/home/bdqbpbxa/rc-subdomains/waykay-rc.goodface.com.ua/frontend/css/ui-kit/form-elements.css
.input {
  position: relative;
  display: block;
  width: 100%;
}

.input__name {
  display: block;
  color: var(--shark-shark-600, #0A0B0D);
  margin-bottom: min(8px, 0.556vw);
}

.input__error {
  color: var(--secondary-cinnabar, #F04D39);
  transition: opacity 0.4s;
  opacity: 0;
  position: absolute;
  bottom: 0;
  left: 0;
  transform: translateY(100%);
}

.input__wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100%;
}

.input__wrapper input {
  font-family: Rotunda;
  border-radius: 4px;
  background: var(--shark-shark-50, #EFF2F4);
  border: 1px solid var(--shark-shark-50, #EFF2F4);
  padding: 0 min(36px, 2.500vw) 0 min(15px, 1.042vw);
  height: min(56px, 3.889vw);
  width: 100%;
  color: var(--shark-shark-600, #0A0B0D);
  line-height: 100%;
  transition: color 0.4s, background 0.4s, border 0.4s;
}

.input__wrapper:after {
  content: '';
  position: absolute;
  right: min(16px, 1.111vw);

  pointer-events: none;
  transition: opacity 0.4s;
  opacity: 0;

  display: block;
  width: min(16px, 1.111vw);
  height: min(16px, 1.111vw);
  background: no-repeat center / contain url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEzLjMzMzIgNEw1Ljk5OTg0IDExLjMzMzNMMi42NjY1IDgiIHN0cm9rZT0iIzNBQTY3MCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K);
}

.input__wrapper input::placeholder {
  color: var(--shark-shark-200, #B8BBBC);
  transition: background 0.4s;
}

.input__wrapper input:focus {
  background: var(--shark-shark-100, #E4E7E9);
  border-color: var(--shark-shark-100, #E4E7E9);
}

.input.-valid .input__wrapper:before {
  opacity: 1;
}

.input.-invalid input {
  color: var(--secondary-cinnabar, #F04D39);
  border-color: var(--secondary-cinnabar, #F04D39);
}

.input.-invalid .input__error {
  opacity: 1;
}

.-apple .input__wrapper input {
  padding-top: min(2px, 0.139vw);
}


@media screen and (max-width: 1100px) {

  .input__name {
    margin-bottom: 8px;
  }

  .input__wrapper input {
    padding: 0 36px 0 15px;
    height: 44px;
  }

  .input__wrapper:after {
    right: 16px;
    width: 16px;
    height: 16px;
  }
}
Path: home/bdqbpbxa/rc-subdomains/waykay-rc.goodface.com.ua/frontend/css/ui-kit