:root {
    --neutral-color-50: #F4F7FA;
    --neutral-color-100: #EFF2F5;
    --neutral-color-200: #C3CCD6;
    /* same Color 300 and 400 */
    --neutral-color-300: #A8B5C2;
    --neutral-color-400: #A8B5C2;
    --neutral-color-500: #8593A3;
    --neutral-color-600: #6A7682;
    --neutral-color-700: #505862;
    --neutral-color-800: #353B41;
    --neutral-color-900: #1B1D21;


    --primary-color-50: #E4EAF2;
    --primary-color-100: #BBCBE0;
    --primary-color-200: #8EA8CB;
    --primary-color-300: #6085B6;
    --primary-color-400: #3E6BA6;
    --primary-color-500: #1C5196;
    --primary-color-600: #194A8E;
    --primary-color-700: #144083;
    --primary-color-800: #113779;
    --primary-color-900: #092768;

    --success-color-50: #E6FAF4;
    --success-color-100: #D4F4EC;
    --success-color-200: #A9EAD8;
    --success-color-300: #7EDFC5;
    --success-color-400: #53D5B2;
    --success-color-500: #28CA9E;
    --success-color-600: #20A17F;
    --success-color-700: #18795F;
    --success-color-800: #10513F;
    --success-color-900: #082820;

    --warning-color-50: #FFF7E5;
    --warning-color-100: #FFEECC;
    --warning-color-200: #FFDD99;
    --warning-color-300: #FFCD66;
    --warning-color-400: #FFBC33;
    --warning-color-500: #FFAB00;
    --warning-color-600: #CC7A00;
    --warning-color-700: #995200;
    --warning-color-800: #663000;
    --warning-color-900: #331400;

    --error-color-50: #FDF1ED;
    --error-color-100: #FDDDD3;
    --error-color-200: #FABBA8;
    --error-color-300: #F89A7C;
    --error-color-400: #F57851;
    --error-color-500: #F35625;
    --error-color-600: #C2451E;
    --error-color-700: #923416;
    --error-color-800: #61220F;
    --error-color-900: #311107;

}
.select-input {
    position: relative;
    width: 100%;
    height: 48px;
    margin-bottom: 15px;;
    
}

.select-input select {
    border: 1px solid var(--neutral-color-300);
    outline: none;
    border-radius: 4px;
    font-size: 14px;
    height: 100%;
    color: #6A7682;
    padding: 10px 10px 0% 14px;
   
}

.select-input label {
    color: #6A7682;
    font-size: 14px;
    transition: ease-in-out .2s;
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translate(0%, -50%);
}

.select-input select {
    appearance: none;
    background-image: url('https://web-sandbox.inventiproptech.com/eton/public/assets/img/arrow_drop_down_FILL0_wght400_GRAD0_opsz48.svg');
    background-size: 25px;
    background-repeat: no-repeat;
    background-position: right center;
    padding-right: 1.5em;
}

.select-input select:hover {
    background-color: var(--neutral-color-100);
}

.select-input select:focus {
    border: 2px solid var(--primary-color-500);

}

.select-input select:focus~label,
.select-input select:valid~label {
    font-size: 10px;
    top: 25%;
    color: #9C2A3C;
}




.select-error select {
    border: 2px solid var(--error-color-300);
    outline: none;
    padding: 6% 3% 3% 14px;
    border-radius: 4px;
    font-size: 14px;
    width: 100%;
    color: var(--error-color-900);
}

.select-error label {
    color: var(--error-color-900);
    font-size: 14px;
    transition: ease-in-out .2s;
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translate(0%, -50%);
}

.select-error select {
    appearance: none;
    background-image: url('https://web-sandbox.inventiproptech.com/eton/public/assets/img/arrow_drop_down_FILL0_wght400_GRAD0_opsz48.svg');
    background-size: 25px;
    background-repeat: no-repeat;
    background-position: right center;
    padding-right: 1.5em;
}

.select-error select:hover {
    background-color: var(--neutral-color-100);
}

.select-error select:focus {
    border: 2px solid var(--error-color-500);

}

.select-error select:focus~label,
.select-error select:valid~label {
    font-size: 10px;
    top: 25%;
    color: var(--error-color-500);
}


.select-success select {
    border: 2px solid var(--success-color-300);
    outline: none;
    padding: 6% 3% 3% 14px;
    border-radius: 4px;
    font-size: 14px;
    width: 100%;
    color: var(--success-color-900);
}

.select-success label {
    color: var(--success-color-900);
    font-size: 14px;
    transition: ease-in-out .2s;
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translate(0%, -50%);
}

.select-success select {
    appearance: none;
    background-image: url('https://web-sandbox.inventiproptech.com/eton/public/assets/img/arrow_drop_down_FILL0_wght400_GRAD0_opsz48.svg');
    background-size: 25px;
    background-repeat: no-repeat;
    background-position: right center;
    padding-right: 1.5em;
}

.select-success select:hover {
    background-color: var(--neutral-color-100);
}

.select-success select:focus {
    border: 2px solid var(--success-color-500);

}

.select-success select:focus~label,
.select-success select:valid~label {
    font-size: 10px;
    top: 25%;
    color: var(--success-color-500);
}
.select-input select:disabled,
.select-input select:disabled ~ label {
    background-color: var(--neutral-color-100);
    color: var(--neutral-color-300);
}

.select-div {
    display: flex;
    flex-direction: column;
    gap: 20px;
}