:root {
    --blue: #0070C0;
    --warning: #FFD301;
    --error: #EC1B24;
    --success: #7BB662;
}


input, select, textarea{
    outline: none; /* Remove default outline */
    border: 2px solid #ccc; /* Default border */
    transition: border-color 0.4s ease; /* Transition border color */
}

/* Focus state */
input:focus, textarea:focus, select:focus {
    border-color: var(--blue);
}

/* Warning state */
input.warning, textarea.warning{
    border-color: var(--warning);
}

/* Valid state */
input.valid, textarea.valid {
    border-color: var(--success);
}

/* Invalid state */
input.invalid, textarea.invalid{
    border-color: var(--error);
}

#workAuthorization.valid, #howDidUHear.valid, #position-select.valid{
    border-color: var(--success);
}

#workAuthorization.invalid, #howDidUHear.invalid, #position-select.invalid{
    border-color: var(--error);
}

#workAuthorization.focused, #howDidUHear.focused, #position-select.invalid {
    border-color: var(--blue);
}

/* Specificity to remove blue outline */
input:focus,
input.warning:focus,
input.valid:focus,
input.invalid:focus {
    outline: none;
}

textarea:focus, 
textarea.warning:focus,
textarea.valid:focus,
textarea:invalid:focus{
    outline:none;
}

/* Optional focus box-shadow */
input:focus {
    box-shadow: 0 0 5px rgba(0, 112, 192, 0.5);
}

textarea:focus{
    box-shadow: 0 0 5px rgba(0, 112, 192, 0.5);
}

/* optgroup { font-size:15px; }

select{
    font-size: 15px;
} */