: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;

}
.text-field {
    position: relative;
}
.text-field input[type="text"] {
    border: 1px solid var(--neutral-color-300);
    outline: none;
    padding: 6% 3% 3% 14px;
    border-radius: 4px;
    font-size: 14px;
    color: var(--neutral-color-900);
}
.text-field input[type="text"]::placeholder {
    color: transparent;
}
.text-field label {
    color: var(--neutral-color-900);
    font-size: 14px;
    transition: ease-in-out .2s;
    position: absolute;
    left: 14px;
    top: 50%;
	color:#6A7682;
    transform: translate(0%, -50%);
    font-family: 'Poppins','Regular';
}
.text-field input[type="text"]:disabled {
    background-color: var(--neutral-color-100) !important;
    border: 1px solid var(--neutral-color-200) !important;
}
.text-field input[type="text"]:disabled ~ label  {
    color: var(--neutral-color-300);
}
.text-field input[type="text"]:disabled:hover{
    background-color: var(--neutral-color-100);
}
.text-field input[type="text"]:focus ~ label,
.text-field input[type="text"]:not(:placeholder-shown) ~ label {
    font-size: 10px;
    top: 25%;
    color: var(--neutral-color-500);
}
.text-field input[type="text"]:hover {
    background-color: var(--neutral-color-50);
}
.text-field input[type="text"]:focus,
.text-field input[type="text"]:not(:placeholder-shown){
    border: 2px solid var( --primary-color-500);
}
.error-field input[type="text"],
.error-field input[type="text"]:not(:placeholder-shown),
.error-field input[type="text"]:focus {
    border: 2px solid var( --error-color-500) !important;
}
.error-field input[type="text"]:not(:placeholder-shown)~ label,
.error-field input[type="text"]:focus ~ label {
    color: var(--error-color-500) !important;
}

.success-field input[type="text"],
.success-field input[type="text"]:not(:placeholder-shown),
.success-field input[type="text"]:focus {
    border: 2px solid var( --success-color-500) !important;
}
.success-field input[type="text"]:not(:placeholder-shown) ~ label,
.success-field input[type="text"]:focus ~ label {
    color: var(--success-color-500) !important;
}

.text-field input[type="file"] {
    padding: 3% 3% 3% 12px;
    border: 1px solid var(--neutral-color-300);
    outline: none;
    font-size: 14px;
    border-radius: 4px;
    color: var(--neutral-color-200);
}
input[type="file"]:hover {
    background-color: var(--neutral-color-50);
}
.text-field input[type="file"]::file-selector-button {
    background-color: var(--primary-color-500);
    border: none;
    border-radius: 4px;
    color: var(--neutral-color-50);
    width: 85px;
    padding: 6px;
}
.file-warning input[type="file"]::file-selector-button {
    background-color: var(--warning-color-500) !important;
    color: var(--warning-color-50);
}
.file-error input[type="file"]::file-selector-button {
    background-color: var(--error-color-500) !important;
    color: var(--error-color-50);
}
.file-success input[type="file"]::file-selector-button {
    background-color: var(--success-color-500) !important;
    color: var(--success-color-50);
}
.file-dark input[type="file"]::file-selector-button {
    background-color: var(--neutral-color-900) !important;
    color: var(--neutral-color-50);
}