@charset "utf-8";

@-webkit-keyframes shimmering { 
  100% { background-position-x: 0px; }
}

@keyframes shimmering { 
  100% { background-position-x: 0px; }
}

.input-field { --input-padding-left: 20px; --input-padding-right: 48px; --icon-margin-left: 12px; --label-color: #5c5c5c; --label-bg-color: #fff; --input-color: #000; --input-border-color: #919191; --input-hover-border-color: #424242; --input-focus-color: #000; --input-focus-border-color: #2c69f6; --helper-text-color: #5c5c5c; --icon-color: var(--label-color); position: relative; }

.input-field--filled { --input-border-color: #424242; }

.input-field--error { --helper-text-color: #d0021b; --input-focus-border-color: #d0021b; --input-border-color: #d0021b; --input-hover-border-color: #d0021b; --icon-color: #d0021b; }

.input-field--error .input-field__error-icon { color: var(--icon-color); display: block; position: absolute; right: var(--icon-margin-left); top: 24px; transform: translateY(-50%); }

.input-field--dark { background-color: inherit; --input-hover-border-color: #ddd; --input-border-color: #767676; --input-focus-border-color: #5687f8; --input-focus-color: #fff; --label-color: #b9b9b9; --label-bg-color: #202020; }

.input-field--dark.input-field--filled { --input-border-color: #ddd; --input-color: #fff; }

.input-field--dark.input-field--error { --helper-text-color: #ff492e; --input-focus-border-color: #ff492e; --input-border-color: #ff492e; --input-hover-border-color: #ff492e; --icon-color: #ff492e; }

.input-field--dark .input-field__left-icon { color: rgb(185, 185, 185); }

.input-field__input, .input-field__label { font-family: BrownRegular, sans-serif; font-size: 1.6rem; font-weight: 400; line-height: 1; }

.input-field__label { color: var(--label-color); display: flex; left: var(--input-padding-left); position: absolute; -webkit-box-align: center; align-items: center; border-radius: 2px; cursor: text; top: 16px; transition-duration: 0.3s; transition-property: background-color, line-height, padding, top; transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); z-index: 3; }

@media (prefers-reduced-motion: reduce) {
  .input-field__label { transition: none; }
}

.input-field__label { transition-timing-function: cubic-bezier(0.16, 1, 0.99, 0.99); }

.input-field__label--with-left-icon { top: 12px; }

.input-field__input { background-color: transparent; border-color: var(--input-border-color); border-radius: 100px; border-style: solid; border-width: 2px; box-sizing: border-box; color: var(--input-color); height: 48px; outline: none; padding: 0 var(--input-padding-right) 0 var(--input-padding-left); transition-duration: 0.3s; transition-property: border-width, border-color, color; transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .input-field__input { transition: none; }
}

.input-field__input:-webkit-autofill, .input-field__input:-webkit-autofill:active, .input-field__input:-webkit-autofill:focus, .input-field__input:-webkit-autofill:hover { transition: background-color 5e+06s ease-in-out; -webkit-text-fill-color: var(--input-color); }

.input-field__left-icon { margin-right: 4px; }

.input-field__error-icon { display: none; }
