#reviewStars-input input:checked ~ label, #reviewStars-input label, #reviewStars-input label:hover, #reviewStars-input label:hover ~ label {
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAoCAMAAADNGvrUAAABj1BMVEVMaXHMysr/uwDMysrMysrMysr/uwDMysr/uwD/uwD/uwD/uwD/uwD/uwDMysrMysrMysr/uwDMysrMysr/uwDMysr/uwDMysr/uwDMysr/uwDMysr/uwDMysrMysrMysr/uwDMysrMysrMysr/uwDMysr/uwD/uwD/uwDMysr/uwD/uwDMysr/uwDMysr/uwDMysr/uwD/uwDMysr/uwDMysr/uwD/uwDMysr/uwD/uwDMysrMysrMysr/uwDMysrMysr/uwDMysrMysrMysrMysrMysrMysrMysrMysrMysrMysrMysrMysr/uwDMysr/uwDMysrMysrMysrMysrMysrMysrMysrMysn/uwD/uwD/uwD/uwD/uwDMysr/uwD/uwDNysf/uwDNysjNysfGzOHFzOf/uwD/uwDHzN7HzODIy9nKy9P/ugD/uAD/uwDMysvKy9H/uwD/uwD/uwD/uwD/uwD/uwD/uwD/uwD/uwD/uwD/uwD/uwD/uwD/uwD/uwDMysr/uwDMysjMysmq+4DUAAAAgXRSTlMA+PioenR6kZF0A6hV5CtUfX8lz63UkxqdgaJn6mxS91R7gB59hSXP1H8agQNnrWyTUvede6KAHuqFMt8Bh0vorytmrjIIS28NVQy22uQNd3PIYMeOtxflY47aZuYX3HZgVeXk4nMMx29ldgN0tgx36+brh8jcZQi34q4M32MB6K/QgBtXAAABLElEQVR42m3R1XYCMRAG4AFKYaEtdXd3d2+pu7u7u/ukffBuOGROdpP/JpPvYjJJgDI2Pw6aTCPOqbq0jDgxovACmomwa4yDc2uKVSurMZQGkvhAmSspB8NxJDTlZRcAeFCTfHDrOAOgSNUs3jzNrm6uSvtYMUytEOuVhmQeIO6XeZS4S+ZhYpfMHuJZc/d3e3h282sWQaGDk4gHp+cARxf7iB2dwhe3dkW50tNrfdur40vdX14ztqPq5h5ja1MKrzIzkXbtc3LOLLeqL5GFkkpSnBvnL61n4ThL0hvrWgC8TJNmMHRcBdCmag1vXmFXg6vSvlAMkyzEeqVumduJ12WOIr6X+YTYL7OX+IFvN2a27/j6JvQ5mrHXJx/Au2FWH1/CXx7pnM/vH778A/Bz3OcJSVdYAAAAAElFTkSuQmCC') no-repeat;
}

.simplecallback {
  position: relative;
}

.reviews-form {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  padding: 10px 0;
  margin: 0 0 90px;

  @media (width < 1024px) {
    flex-direction: column;
  }

  @media (width < 768px) {
    margin-bottom: 60px;
  }
}

.reviews-form__body {
  display: flex;
  flex-wrap: wrap;
  width: 70%;
  padding-left: 80px;
  margin: 0;

  @media (width < 1200px) {
    padding-left: 60px;
  }

  @media (width < 1024px) {
    width: 100%;
    padding-left: 0;
  }

  @media (width < 768px) {
    flex-direction: column;
  }
}

.reviews-form__body-left {
  width: 180px;
  margin-right: 30px;

  @media (width < 768px) {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin: 0;
  }

  @media (width < 480px) {
    flex-direction: column-reverse;
  }
}

.reviews-form__body-right {
  flex-grow: 1;
}

.reviews-form__body-bottom {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: flex-start;
  width: 100%;

  @media (width < 768px) {
    flex-direction: row;
  }

  @media (width < 480px) {
    flex-direction: column;
  }
}

.reviews-form__text {
  position: relative;
  width: 30%;
  margin: 0;
  padding: 0 0 20px;

  text-align: left;
  border-bottom: 3px solid var(--color-accent);

  @media (width < 1024px) {
    width: 100%;
    padding: 0;
    margin-bottom: 40px;

    border-bottom: none;
  }
}

.reviews-form__fieldset {
  margin: 0;
}

.reviews-form__fieldset--name {
  text-align: right;

  @media (width < 768px) {
    text-align: left;
  }

  @media (width < 480px) {
    margin: 20px auto 5px;
  }

  & input {
    text-align: inherit;
    background: transparent;
  }
}

.reviews-form__fieldset--message {
  position: relative;

  &::after,
  &::before {
    content: '';
    position: absolute;
    right: 100%;
    top: 27px;
    border: 20px solid transparent;
    border-top: none;
    border-right-color: var(--color-grey-light);

    @media (width < 768px) {
      right: auto;
      top: auto;
      bottom: 100%;
      left: 5px;
      border: 10px solid transparent;
      border-top: none;
      border-bottom-color: var(--color-grey-light);
    }

    @media (width < 480px) {
      left: calc(50% - 10px);
    }
  }

  &::after {
    top: 26px;
    right: calc(100% - 1px);
    border-right-color: var(--color-grey-extra-light);

    @media (width < 768px) {
      right: auto;
      top: auto;
      left: 6px;
      border-color: transparent;
      border-bottom-color: var(--color-grey-extra-light);
    }

    @media (width < 480px) {
      left: calc(50% - 9px);
    }
  }

  & textarea {
    height: 100px;
    resize: none;

    border-left: 1px solid var(--color-grey-light);
    border-bottom: none;
    border-radius: 5px;
  }
}

.reviews-form__btn {
  min-width: 220px;

  @media (width < 768px) {
    min-width: 180px;
  }

  @media (width < 480px) {
    width: 100%;
  }
}

.reviews-form__privacy {
  margin: 0 30px 0 0;
  text-align: right;
  width: 220px;

  @media (width < 768px) {
    margin: 0 0 0 15px;
    text-align: left;
  }

  @media (width < 480px) {
    width: 300px;
    max-width: 100%;
    margin: 15px 0 0;

    text-align: center;
  }
}

#reviewStars-input {
  position: relative;
  display: flex;
  flex-direction: row-reverse;

  & input {
    display: none;
  }

  & label {
    position: static;
    width: 30px;
    height: 20px;
    margin: 0;
    padding: 0;
    cursor: pointer;
    background-position: center 0;
  }

  & input:checked ~ label,
  & label:hover,
  & label:hover ~ label {
    background-position: center -20px;
  }

  & input:hover:not(:checked) + label {
    opacity: .7;
  }

  & input:checked + label::after {
    content: attr(title);
    position: absolute;
    left: 5px;
    right: 5px;
    top: calc(100% + 4px);

    background: var(--color-white);
    font-size: 12px;
    text-align: right;
    pointer-events: none;

    @media (width < 480px) {
      text-align: center;
    }
  }
}