::-webkit-input-placeholder {color: var(--grey-one);}
::-moz-placeholder          {color: var(--grey-one);}
:-moz-placeholder           {color: var(--grey-one);}
:-ms-input-placeholder      {color: var(--grey-one);}




input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}





.input{
    background-color: var(--white);
    outline: none;
    height: 45px;
    border: 1px solid var(--grey-three);
    border-radius: 16px;
    color: var(--grey-one);
    font-size: var(--text-size);
    padding-left: 16px;
    padding-right: 40px;
    position: relative;
    cursor: text;
}



.input:hover{
    transition: all 0.2s ease-in;
    background-color: var(--grey-four);
}

.input:hover:focus{
    transition: none;
}
.input:hover:active{
    transition: none;
}



.input:disabled{
    background-color: var(--grey-four);
    opacity: 0.4;
    cursor: not-allowed !important;
}

.input:focus{
    background-color: var(--grey-four);
    border: 1px solid var(--yellow);
    outline: 1px solid var(--yellow-two);
}





.input--valid{
    border: 1px solid var(--green-one);
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='24' height='50' viewBox='0 0 24 50' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cg clip-path='url(%23clip0_4768_516)'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.9082 31.8844C9.77814 31.8847 9.64927 31.8593 9.52911 31.8095C9.40895 31.7597 9.29988 31.6866 9.20819 31.5943L4.27118 26.6353C4.08795 26.4484 3.98535 26.1971 3.98535 25.9353C3.98535 25.6736 4.08795 25.4222 4.27118 25.2353C4.3627 25.1427 4.4717 25.0691 4.59186 25.0189C4.71202 24.9687 4.84097 24.9429 4.97119 24.9429C5.10142 24.9429 5.23036 24.9687 5.35052 25.0189C5.47069 25.0691 5.57968 25.1427 5.6712 25.2353L9.80316 29.3853L18.0032 18.3983C18.0806 18.2942 18.1778 18.2064 18.2892 18.1399C18.4007 18.0735 18.5242 18.0297 18.6526 18.0111C18.7811 17.9925 18.9119 17.9995 19.0376 18.0316C19.1633 18.0638 19.2814 18.1204 19.3852 18.1983C19.5942 18.3572 19.7323 18.592 19.7697 18.8519C19.8071 19.1118 19.7409 19.3759 19.5852 19.5874L10.6982 31.4873C10.6136 31.601 10.5056 31.6951 10.3813 31.7631C10.257 31.8311 10.1195 31.8714 9.97821 31.8813C9.95521 31.8833 9.9312 31.8844 9.9082 31.8844Z' fill='%2342922F'/%3e%3c/g%3e%3cdefs%3e%3cclipPath id='clip0_4768_516'%3e%3crect width='15.782' height='13.875' fill='white' transform='translate(4 18.0001)'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e") !important;
    background-repeat: no-repeat;
    background-position:  right 12px center;
}
.input--valid:focus{
    border: 1px solid var(--green-one);
    outline: 1px solid var(--green-one-opacity-50);
}


.input--error{
    border: 1px solid var(--red);
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M11.953 2C6.465 2 2 6.486 2 12C2 17.514 6.486 22 12 22C17.514 22 22 17.514 22 12C22 6.486 17.493 2 11.953 2ZM12 20C7.589 20 4 16.411 4 12C4 7.589 7.567 4 11.953 4C16.391 4 20 7.589 20 12C20 16.411 16.411 20 12 20Z' fill='%23D71921'/%3e%3cpath d='M11 7H13V14H11V7ZM11 15H13V17H11V15Z' fill='%23D71921'/%3e%3c/svg%3e ");
    background-repeat: no-repeat;
    background-position:  right 14px center;
}

.input--error:focus{
    border: 1px solid var(--red);
    outline: 1px solid var(--red-opacity-50);
}

.input-wrapper{
    position: relative;
    display: inline-block;
}

.input-warn-par{
    display: block;
    position: absolute;
    font-size: var(--sub-text-size);
    bottom: -20px;
    color: var(--red);
    white-space: nowrap;

}


.input-wrapper .preloader{
    position: absolute;
    display: flex;
    right: 12px;
    top: 11px;
}


.input-wrapper .preloader svg{
    height: 24px;
    width: 24px;
}


.input--search{
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3e%3cpath d='M10 18C11.846 18 13.543 17.365 14.897 16.312L19.293 20.708L20.707 19.294L16.311 14.898C17.365 13.543 18 11.846 18 10C18 5.589 14.411 2 10 2C5.589 2 2 5.589 2 10C2 14.411 5.589 18 10 18ZM10 4C13.309 4 16 6.691 16 10C16 13.309 13.309 16 10 16C6.691 16 4 13.309 4 10C4 6.691 6.691 4 10 4Z' fill='%23D71921'/%3e%3c/svg%3e ");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 38px;

}


.input--password{
    background-position:  right 46px center;
}


.input--date{
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3e%3cpath d='M7 11H9V13H7V11ZM7 15H9V17H7V15ZM11 11H13V13H11V11ZM11 15H13V17H11V15ZM15 11H17V13H15V11ZM15 15H17V17H15V15Z' fill='%23D71921'/%3e%3cpath d='M5 22H19C20.103 22 21 21.103 21 20V8V6C21 4.897 20.103 4 19 4H17V2H15V4H9V2H7V4H5C3.897 4 3 4.897 3 6V8V20C3 21.103 3.897 22 5 22ZM19 8L19.001 20H5V8H19Z' fill='%23D71921'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 13px center;
}


input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    display: none;
    -webkit-appearance: none;
    margin: 0;
}





.input-wrapper .input{
    width: 100%;
}
























@media (max-width: 1000px) {

    .input{
        height: 40px;
        border-radius: 14px;
        padding-left: 14px;
        padding-right: 38px;
    }


    .input--valid{
        background-position:  right 10px center;
    }

    .input--error{
        background-position:  right 12px center;
    }

    .input--date{
        background-position: right 11px center;
    }

    .input--search{
        background-position: right 10px center;
        padding-right: 36px;
    }

    .input-wrapper .preloader{
        top: 9px;
    }

    .input-warn-par{
        bottom: -16px;
    }

    .input--password{
        background-position:  right 46px center;
    }

}