/*--------------------*/
/*  Inputs            */
/*--------------------*/
.input-field {display: block;position: relative;font-size: var(--int-fs);}
.input-field_fs-l {--int-fs: var(--text-l);}
.input {outline: none;position: relative;z-index: 1;font: inherit;font-size: var(--int-fs);height: var(--int-height);padding: var(--int-pv) var(--int-ph);text-overflow: ellipsis;color: var(--clr-dark);border-radius: var(--rd-2);border: 1px var(--clr-border) solid;-webkit-transition: border var(--transition-1);transition: border var(--transition-1);background: var(--bg);}
.input:disabled {opacity: 0.3;}
.input::-webkit-input-placeholder {font: inherit;font-weight: 300;color: var(--clr-dark-400);}
.input::-moz-placeholder {font: inherit;font-weight: 300;color: var(--clr-dark-400);}
.input:-ms-input-placeholder {font: inherit;font-weight: 300;color: var(--clr-dark-400);}
.input::-ms-input-placeholder {font: inherit;font-weight: 300;color: var(--clr-dark-400);}
.input::placeholder {font: inherit;font-weight: 300;color: var(--clr-dark-400);}
.input-label {color: var(--clr-title);margin-bottom: var(--sp-2xs);line-height: 1;}
.input-field__inner-label {position: absolute;right: calc(var(--int-ph));top: 50%;-webkit-transform: translateY(-48%);transform: translateY(-48%);z-index: 1;font: inherit;color: var(--clr-text);}
.input-field__inner-label + .input {padding-right: calc(var(--int-ph) + 2.1em);}
textarea.input {height: auto;min-height: 6em;overflow: auto;padding: calc(var(--int-pv)) var(--int-ph);}
.input-field__input-wrap {position: relative;}
.input-error,
.input-success {position: relative;left: 0;width: 100%;font-size: 0.75rem;color: var(--clr-red);z-index: 1;-webkit-transition: var(--transition-1);transition: var(--transition-1);opacity: 0;visibility: hidden;pointer-events: none;line-height: 1;max-height: 0;overflow: hidden;}
.input-success {color: var(--clr-success);}
.input-hint {font-size: 0.75rem;margin-top: var(--sp-4xs);}
.input-field__icon-wrap {position: relative;}
.input-field__icon-wrap .input:nth-child(2) {padding-left: calc(var(--int-ph) * 1.5 + var(--int-fs) * 1.25);}
.input-field__icon-wrap .input:not(:last-child) {padding-right: calc(var(--int-ph) * 1.5 + var(--int-fs) * 1.25);}
.input-field__icon-wrap img,
.input-field__icon-wrap svg,
.input-field__icon-wrap .input-field__icon {position: absolute;z-index: 2;pointer-events: none;height: auto;display: block;width: calc(var(--int-fs) * 1.25);top: 50%;-webkit-transform: translateY(-50%);transform: translateY(-50%);color: var(--clr-primary);}
.input-field__icon-wrap img:first-child,
.input-field__icon-wrap svg:first-child,
.input-field__icon-wrap .input-field__icon:first-child {left: var(--int-ph);}
.input-field__icon-wrap img:last-child,
.input-field__icon-wrap svg:last-child,
.input-field__icon-wrap .input-field__icon:last-child {right: var(--int-ph);}
.input-field__button-wrap {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;padding: 0.125rem;border: solid 1px var(--clr-border);border-radius: var(--rd-2);-webkit-transition: var(--transition-1);transition: var(--transition-1);gap: var(--sp-3xs);background: var(--bg);}
.input-field__button-wrap_border-2 {border-width: 2px;}
.input-field__button-wrap_border-dark {border-color: var(--clr-dark);}
.input-field__button-wrap .input-field__input-wrap {-webkit-box-flex: 1;-ms-flex-positive: 1;flex-grow: 1;}
.input-field__button-wrap .input-field__input-wrap::after {right: 0 !important;}
.input-field__button-wrap .btn-close {display: none;}
.input-field__button-wrap .input {border: none !important;}
.focus .input-field__button-wrap {border-color: var(--clr-dark-400);}
.value .input-field__button-wrap .btn-close {display: block;}
.invalid .input-field__button-wrap {border-color: var(--clr-red);}
.success .input-field__button-wrap {border-color: var(--clr-success);}
.input-field__pass-btn {pointer-events: all;cursor: pointer;color: var(--clr-text);-webkit-transition: color var(--transition-1);transition: color var(--transition-1);}
.input-field__pass-btn g {-webkit-transition: opacity var(--transition-1);transition: opacity var(--transition-1);}
.input-field__pass-btn g:last-child {opacity: 0;}
.input-field__pass-btn.active g:first-child {opacity: 0;}
.input-field__pass-btn.active g:last-child {opacity: 1;}
input[type=date] {display: block;-webkit-appearance: none;-moz-appearance: none;text-align: left !important;}
input[type=date]::-webkit-calendar-picker-indicator {opacity: 0;}
.input-field.focus {z-index: 5;}
.input-field.focus .input {border-color: var(--clr-dark-400);}
.input-field.invalid:not(.value, .focus) .input {border-color: var(--clr-red);}
.input-field.invalid:not(.value, .focus) .input-field__input-wrap .input {padding-right: calc(var(--int-ph) * 1.5 + var(--int-fs) * 1.25);}
.input-field.invalid:not(.value, .focus) .input-field__input-wrap::after {content: "";position: absolute;top: calc(var(--int-height) / 2);-webkit-transform: translateY(-50%);transform: translateY(-50%);right: var(--int-ph);width: calc(var(--int-fs) * 1.25);height: calc(var(--int-fs) * 1.25);background: url(../img/icons/warning.svg) no-repeat;background-size: 100%;z-index: 2;}
.input-field.invalid:not(.value, .focus) .input-error {opacity: 1;visibility: visible;max-height: 3em;}
.input-field.success .input-success {opacity: 1;visibility: visible;max-height: 3em;}
.input-field.success .input {border-color: var(--clr-success);}
@media (min-width: 1200px) {
.input-field__pass-btn:hover {color: var(--clr-title);}
}
/*--------------------*/
/*  Autofill          */
/*--------------------*/
.input-field.focus .input:not(textarea):-webkit-autofill,
.input-field.value .input:not(textarea):-webkit-autofill,
.input-field.focus .input:not(textarea):-webkit-autofill:hover,
.input-field.value .input:not(textarea):-webkit-autofill:hover,
.input-field.focus .input:not(textarea):-webkit-autofill:focus,
.input-field.value .input:not(textarea):-webkit-autofill:focus,
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {-webkit-transition: background-color 5000s ease-in-out 0s;transition: background-color 5000s ease-in-out 0s;}
/*======================*/
/*  Upload File         */
/*======================*/
.upload-btn {position: relative;cursor: pointer;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;gap: 0.625rem;font-size: var(--text-s);line-height: 1.25rem;color: var(--clr-text);-webkit-transition: color var(--transition-1);transition: color var(--transition-1);}
.upload-btn input {display: none;}
.upload-btn svg {width: 1.25rem;height: 1.25rem;-ms-flex-negative: 0;flex-shrink: 0;}
.upload-file {position: relative;display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-transition: var(--transition-1);transition: var(--transition-1);font-size: var(--text-m);line-height: 1.25em;color: var(--clr-title);margin-right: 0.75rem;margin-bottom: 1rem;padding-left: 1.75rem;}
.upload-file::before {content: "";position: absolute;top: 0;left: 0;width: 1.25em;height: 1.25em;background-image: url(../img/icons/upload-file_black.svg);background-repeat: no-repeat;background-size: contain;}
.upload-files {display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;-webkit-box-align: start;-ms-flex-align: start;align-items: flex-start;}
.delete-file {position: relative;cursor: pointer;display: inline-block;width: 1.25em;height: 1.25em;-webkit-transition: var(--transition-1);transition: var(--transition-1);color: var(--clr-title);margin-left: 0.5rem;}
.delete-file::before,
.delete-file::after {content: "";position: absolute;left: 50%;top: 50%;-webkit-transform: translate(-50%, -50%) rotate(45deg);transform: translate(-50%, -50%) rotate(45deg);width: 0.125rem;height: 80%;background-color: currentColor;}
.delete-file::after {-webkit-transform: translate(-50%, -50%) rotate(-45deg);transform: translate(-50%, -50%) rotate(-45deg);}
.upload-wrap ~ .input-error {padding-top: var(--sp-4xs);}
@media (min-width: 1200px) {
.upload-btn:hover {color: var(--clr-title);}
.delete-file:hover {color: var(--clr-red);}
}
.search__input-holder {position: relative;}
.search__btn {position: absolute;right: var(--int-ph);top: 50%;-webkit-transform: translateY(-50%);transform: translateY(-50%);z-index: 3;}