/*****************************************
COLORS
*****************************************/

:root {
    /* Primary Colors */
    --primary-50: #D7EAFF;
    --primary-100: #82BCFF;
    --primary-200: #258AFF;
    --primary-300: #0076FF;
    --primary-400: #0162D3;

    /* Secondary Colors */
    --secondary-50: #DBE7FF;
    --secondary-100: #789DE9;
    --secondary-200: #0D42B0;
    --secondary-300: #002E8F;
    --secondary-400: #00194D;

    /*Teriary Colors*/
    --tertiary-300: #2A72C6;

    /* Surface/Grays */
    --surface-50: #FCFCFC;
    --surface-100: #F7F9FD;
    --surface-150: #E3E8EC;
    --surface-200: #66707A;
    --surface-300: #33383D;
    --surface-400: #202327;

    /* Danger Colors */
    --danger-50: #FEE0E0;
    --danger-100: #F1A9A9;
    --danger-200: #EB7B7B;
    --danger-300: #D15151;
    --danger-400: #B73232;

    /* Success Colors */
    --success-50: #E0FAF2;
    --success-100: #9FEDD1;
    --success-200: #66E0B6;
    --success-300: #32D99B;
    --success-400: #12B875;
    --success-600: #005734;

    /* Warning Colors */
    --warning-50: #FFF3D6;
    --warning-100: #FFE1A7;
    --warning-200: #FFCE77;
    --warning-300: #FFB947;
    --warning-400: #F29F1E;
    --warning-600: #755510;

    /* Text Colors */
    --text-color: #333B3D;
    --heading-color: #202237;

    /* Nomina Blue */
    --nomina-blue-10: #EAF1F9;

    /* Yellow */
    --yellow-20: #FFFFCC;
    --yellow-200: #FFFF00;

    /* Purple */
    --purple-50: #F0CCFF;
    --purple-200: #CD006A;
    --purple-400: #7D0041;

    /* Aqua */
    --aqua-50: #DBFEFF;
    --aqua-200: #2AA4C6;
    --aqua-400: #077fa0;

    /*Green*/
    --green-40: #43A854;

    /* Nomina Green */
    --nomgreen-50: #7ED26A;
    --nomgreen-100: #46BE2A;
    --nomgreen-400: #1c7109;
}

/* Basics */
.bg-white { background-color: white !important; }
.text-white { color: white !important; }

/* Primary */
.bg-primary-50 { background-color: var(--primary-50) !important; }
.text-primary-50 { color: var(--primary-50) !important; }
.border-primary-50 { border-color: var(--primary-50) !important; }

.bg-primary-100 { background-color: var(--primary-100) !important; }
.text-primary-100 { color: var(--primary-100) !important; }
.border-primary-100 { border-color: var(--primary-100) !important; }

.bg-primary-200 { background-color: var(--primary-200) !important; }
.text-primary-200 { color: var(--primary-200) !important; }
.border-primary-200 { border-color: var(--primary-200) !important; }

.bg-primary-300 { background-color: var(--primary-300) !important; }
.text-primary-300 { color: var(--primary-300) !important; }
.border-primary-300 { border-color: var(--primary-300) !important; }

.bg-primary-400 { background-color: var(--primary-400) !important; }
.text-primary-400 { color: var(--primary-400) !important; }
.border-primary-400 { border-color: var(--primary-400) !important; }

.link-primary-400 { color: var(--primary-400) !important; }
.link-primary-400:hover { color: var(--secondary-400) !important; text-decoration: underline; }

/* Tertiary */
.bg-tertiary-300 { background-color: var(--tertiary-300) !important; }
.text-tertiary-300 { color: var(--tertiary-300) !important; }
.border-tertiary-300 { border-color: var(--tertiary-300) !important; }

/* Secondary */
.bg-secondary-50 { background-color: var(--secondary-50) !important; }
.text-secondary-50 { color: var(--secondary-50) !important; }
.border-secondary-50 { border-color: var(--secondary-50) !important; }

.bg-secondary-100 { background-color: var(--secondary-100) !important; }
.text-secondary-100 { color: var(--secondary-100) !important; }
.border-secondary-100 { border-color: var(--secondary-100) !important; }

.bg-secondary-200 { background-color: var(--secondary-200) !important; }
.text-secondary-200 { color: var(--secondary-200) !important; }
.border-secondary-200 { border-color: var(--secondary-200) !important; }

.bg-secondary-300 { background-color: var(--secondary-300) !important; }
.text-secondary-300 { color: var(--secondary-300) !important; }
.border-secondary-300 { border-color: var(--secondary-300) !important; }

.bg-secondary-400 { background-color: var(--secondary-400) !important; }
.text-secondary-400 { color: var(--secondary-400) !important; }
.border-secondary-400 { border-color: var(--secondary-400) !important; }

/* Surface/Grays */
.bg-surface-50 { background-color: var(--surface-50) !important; }
.text-surface-50 { color: var(--surface-50) !important; }
.border-surface-50 { border-color: var(--surface-50) !important; }

.bg-surface-100 { background-color: var(--surface-100) !important; }
.text-surface-100 { color: var(--surface-100) !important; }
.border-surface-100 { border-color: var(--surface-100) !important; }

.bg-surface-150 { background-color: var(--surface-150) !important; }
.text-surface-150 { color: var(--surface-150) !important; }
.border-surface-150 { border-color: var(--surface-150) !important; }

.bg-surface-200 { background-color: var(--surface-200) !important; }
.text-surface-200 { color: var(--surface-200) !important; }
.border-surface-200 { border-color: var(--surface-200) !important; }

.link-surface-200 { color: var(--surface-200) !important; }
.link-surface-200:hover { text-decoration: underline; }

.bg-surface-300 { background-color: var(--surface-300) !important; }
.text-surface-300 { color: var(--surface-300) !important; }
.border-surface-300 { border-color: var(--surface-300) !important; }

.bg-surface-400 { background-color: var(--surface-400) !important; }
.text-surface-400 { color: var(--surface-400) !important; }
.border-surface-400 { border-color: var(--surface-400) !important; }

/* Danger */
.bg-danger-50 { background-color: var(--danger-50) !important; }
.text-danger-50 { color: var(--danger-50) !important; }
.border-danger-50 { border-color: var(--danger-50) !important; }

.bg-danger-100 { background-color: var(--danger-100) !important; }
.text-danger-100 { color: var(--danger-100) !important; }
.border-danger-100 { border-color: var(--danger-100) !important; }

.bg-danger-200 { background-color: var(--danger-200) !important; }
.text-danger-200 { color: var(--danger-200) !important; }
.border-danger-200 { border-color: var(--danger-200) !important; }

.bg-danger-300 { background-color: var(--danger-300) !important; }
.text-danger-300 { color: var(--danger-300) !important; }
.border-danger-300 { border-color: var(--danger-300) !important; }

.bg-danger-400 { background-color: var(--danger-400) !important; }
.text-danger-400 { color: var(--danger-400) !important; }
.border-danger-400 { border-color: var(--danger-400) !important; }

/* Success */
.bg-success-50 { background-color: var(--success-50) !important; }
.text-success-50 { color: var(--success-50) !important; }
.border-success-50 { border-color: var(--success-50) !important; }

.bg-success-100 { background-color: var(--success-100) !important; }
.text-success-100 { color: var(--success-100) !important; }
.border-success-100 { border-color: var(--success-100) !important; }

.bg-success-200 { background-color: var(--success-200) !important; }
.text-success-200 { color: var(--success-200) !important; }
.border-success-200 { border-color: var(--success-200) !important; }

.bg-success-300 { background-color: var(--success-300) !important; }
.text-success-300 { color: var(--success-300) !important; }
.border-success-300 { border-color: var(--success-300) !important; }

.bg-success-400 { background-color: var(--success-400) !important; }
.text-success-400 { color: var(--success-400) !important; }
.border-success-400 { border-color: var(--success-400) !important; }

/* Warning */
.bg-warning-50 { background-color: var(--warning-50) !important; }
.text-warning-50 { color: var(--warning-50) !important; }
.border-warning-50 { border-color: var(--warning-50) !important; }

.bg-warning-100 { background-color: var(--warning-100) !important; }
.text-warning-100 { color: var(--warning-100) !important; }
.border-warning-100 { border-color: var(--warning-100) !important; }

.bg-warning-200 { background-color: var(--warning-200) !important; }
.text-warning-200 { color: var(--warning-200) !important; }
.border-warning-200 { border-color: var(--warning-200) !important; }

.bg-warning-300 { background-color: var(--warning-300) !important; }
.text-warning-300 { color: var(--warning-300) !important; }
.border-warning-300 { border-color: var(--warning-300) !important; }

.bg-warning-400 { background-color: var(--warning-400) !important; }
.text-warning-400 { color: var(--warning-400) !important; }
.border-warning-400 { border-color: var(--warning-400) !important; }

/* Text Colors */
.text-color { color: var(--text-color) !important; }
.text-heading-color { color: var(--heading-color) !important; }

/* Nomina Blue */
.bg-nomina-blue-10 { background-color: var(--nomina-blue-10) !important; }
.text-nomina-blue-10 { color: var(--nomina-blue-10) !important; }
.border-nomina-blue-10 { border-color: var(--nomina-blue-10) !important; }

/* Yellow */
.bg-yellow-20 { background-color: var(--yellow-20) !important; }
.text-yellow-20 { color: var(--yellow-20) !important; }
.border-yellow-20 { border-color: var(--yellow-20) !important; }

.bg-yellow-200 { background-color: var(--yellow-200) !important; }
.text-yellow-200 { color: var(--yellow-200) !important; }
.border-yellow-200 { border-color: var(--yellow-200) !important; }

/*****************************************
HOVER COLORS
*****************************************/

/* Primary */
.hover\:bg-primary-50:hover {
    background-color: var(--primary-50) !important;
}
.hover\:text-primary-50:hover {
    color: var(--primary-50) !important;
}
.hover\:border-primary-50:hover {
    border-color: var(--primary-50) !important;
}

.hover\:bg-primary-100:hover {
    background-color: var(--primary-100) !important;
}
.hover\:text-primary-100:hover {
    color: var(--primary-100) !important;
}
.hover\:border-primary-100:hover {
    border-color: var(--primary-100) !important;
}

.hover\:bg-primary-200:hover {
    background-color: var(--primary-200) !important;
}
.hover\:text-primary-200:hover {
    color: var(--primary-200) !important;
}
.hover\:border-primary-200:hover {
    border-color: var(--primary-200) !important;
}

.hover\:bg-primary-300:hover {
    background-color: var(--primary-300) !important;
}
.hover\:text-primary-300:hover {
    color: var(--primary-300) !important;
}
.hover\:border-primary-300:hover {
    border-color: var(--primary-300) !important;
}

.hover\:bg-primary-400:hover {
    background-color: var(--primary-400) !important;
}
.hover\:text-primary-400:hover {
    color: var(--primary-400) !important;
}
.hover\:border-primary-400:hover {
    border-color: var(--primary-400) !important;
}

/* Secondary */
.hover\:bg-secondary-50:hover {
    background-color: var(--secondary-50) !important;
}
.hover\:text-secondary-50:hover {
    color: var(--secondary-50) !important;
}
.hover\:border-secondary-50:hover {
    border-color: var(--secondary-50) !important;
}

.hover\:bg-secondary-100:hover {
    background-color: var(--secondary-100) !important;
}
.hover\:text-secondary-100:hover {
    color: var(--secondary-100) !important;
}
.hover\:border-secondary-100:hover {
    border-color: var(--secondary-100) !important;
}

.hover\:bg-secondary-200:hover {
    background-color: var(--secondary-200) !important;
}
.hover\:text-secondary-200:hover {
    color: var(--secondary-200) !important;
}
.hover\:border-secondary-200:hover {
    border-color: var(--secondary-200) !important;
}

.hover\:bg-secondary-300:hover {
    background-color: var(--secondary-300) !important;
}
.hover\:text-secondary-300:hover {
    color: var(--secondary-300) !important;
}
.hover\:border-secondary-300:hover {
    border-color: var(--secondary-300) !important;
}

.hover\:bg-secondary-400:hover {
    background-color: var(--secondary-400) !important;
}
.hover\:text-secondary-400:hover {
    color: var(--secondary-400) !important;
}
.hover\:border-secondary-400:hover {
    border-color: var(--secondary-400) !important;
}

/* Surface/Grays */
.hover\:bg-surface-50:hover {
    background-color: var(--surface-50) !important;
}
.hover\:text-surface-50:hover {
    color: var(--surface-50) !important;
}
.hover\:border-surface-50:hover {
    border-color: var(--surface-50) !important;
}

.hover\:bg-surface-100:hover {
    background-color: var(--surface-100) !important;
}
.hover\:text-surface-100:hover {
    color: var(--surface-100) !important;
}
.hover\:border-surface-100:hover {
    border-color: var(--surface-100) !important;
}

.hover\:bg-surface-150:hover {
    background-color: var(--surface-150) !important;
}
.hover\:text-surface-150:hover {
    color: var(--surface-150) !important;
}
.hover\:border-surface-150:hover {
    border-color: var(--surface-150) !important;
}

.hover\:bg-surface-200:hover {
    background-color: var(--surface-200) !important;
}
.hover\:text-surface-200:hover {
    color: var(--surface-200) !important;
}
.hover\:border-surface-200:hover {
    border-color: var (--surface-200) !important;
}

.hover\:bg-surface-300:hover {
    background-color: var(--surface-300) !important;
}
.hover\:text-surface-300:hover {
    color: var(--surface-300) !important;
}
.hover\:border-surface-300:hover {
    border-color: var(--surface-300) !important;
}

.hover\:bg-surface-400:hover {
    background-color: var(--surface-400) !important;
}
.hover\:text-surface-400:hover {
    color: var(--surface-400) !important;
}
.hover\:border-surface-400:hover {
    border-color: var(--surface-400) !important;
}

/* Danger */
.hover\:bg-danger-50:hover {
    background-color: var(--danger-50) !important;
}
.hover\:text-danger-50:hover {
    color: var(--danger-50) !important;
}
.hover\:border-danger-50:hover {
    border-color: var(--danger-50) !important;
}

.hover\:bg-danger-100:hover {
    background-color: var(--danger-100) !important;
}
.hover\:text-danger-100:hover {
    color: var(--danger-100) !important;
}
.hover\:border-danger-100:hover {
    border-color: var(--danger-100) !important;
}

.hover\:bg-danger-200:hover {
    background-color: var(--danger-200) !important;
}
.hover\:text-danger-200:hover {
    color: var(--danger-200) !important;
}
.hover\:border-danger-200:hover {
    border-color: var(--danger-200) !important;
}

.hover\:bg-danger-300:hover {
    background-color: var(--danger-300) !important;
}
.hover\:text-danger-300:hover {
    color: var(--danger-300) !important;
}
.hover\:border-danger-300:hover {
    border-color: var(--danger-300) !important;
}

.hover\:bg-danger-400:hover {
    background-color: var(--danger-400) !important;
}
.hover\:text-danger-400:hover {
    color: var(--danger-400) !important;
}
.hover\:border-danger-400:hover {
    border-color: var(--danger-400) !important;
}

/* Success */
.hover\:bg-success-50:hover {
    background-color: var(--success-50) !important;
}
.hover\:text-success-50:hover {
    color: var(--success-50) !important;
}
.hover\:border-success-50:hover {
    border-color: var(--success-50) !important;
}

.hover\:bg-success-100:hover {
    background-color: var(--success-100) !important;
}
.hover\:text-success-100:hover {
    color: var(--success-100) !important;
}
.hover\:border-success-100:hover {
    border-color: var(--success-100) !important;
}

.hover\:bg-success-200:hover {
    background-color: var(--success-200) !important;
}
.hover\:text-success-200:hover {
    color: var(--success-200) !important;
}
.hover\:border-success-200:hover {
    border-color: var(--success-200) !important;
}

.hover\:bg-success-300:hover {
    background-color: var(--success-300) !important;
}
.hover\:text-success-300:hover {
    color: var(--success-300) !important;
}
.hover\:border-success-300:hover {
    border-color: var(--success-300) !important;
}

.hover\:bg-success-400:hover {
    background-color: var(--success-400) !important;
}
.hover\:text-success-400:hover {
    color: var(--success-400) !important;
}
.hover\:border-success-400:hover {
    border-color: var(--success-400) !important;
}

/* Warning */
.hover\:bg-warning-50:hover {
    background-color: var(--warning-50) !important;
}
.hover\:text-warning-50:hover {
    color: var(--warning-50) !important;
}
.hover\:border-warning-50:hover {
    border-color: var(--warning-50) !important;
}

.hover\:bg-warning-100:hover {
    background-color: var(--warning-100) !important;
}
.hover\:text-warning-100:hover {
    color: var(--warning-100) !important;
}
.hover\:border-warning-100:hover {
    border-color: var(--warning-100) !important;
}

.hover\:bg-warning-200:hover {
    background-color: var(--warning-200) !important;
}
.hover\:text-warning-200:hover {
    color: var(--warning-200) !important;
}
.hover\:border-warning-200:hover {
    border-color: var(--warning-200) !important;
}

.hover\:bg-warning-300:hover {
    background-color: var(--warning-300) !important;
}
.hover\:text-warning-300:hover {
    color: var(--warning-300) !important;
}
.hover\:border-warning-300:hover {
    border-color: var(--warning-300) !important;
}

.hover\:bg-warning-400:hover {
    background-color: var(--warning-400) !important;
}
.hover\:text-warning-400:hover {
    color: var(--warning-400) !important;
}
.hover\:border-warning-400:hover {
    border-color: var(--warning-400) !important;
}

/* Text Colors */
.hover\:text-color:hover {
    color: var(--text-color) !important;
}

.hover\:text-heading-color:hover {
    color: var(--heading-color) !important;
}

/* Nomina Blue */
.hover\:bg-nomina-blue-10:hover {
    background-color: var(--nomina-blue-10) !important;
}
.hover\:text-nomina-blue-10:hover {
    color: var(--nomina-blue-10) !important;
}
.hover\:border-nomina-blue-10:hover {
    border-color: var(--nomina-blue-10) !important;
}


/* Yellow */
.hover\:bg-yellow-20:hover {
    background-color: var(--yellow-20) !important;
}
.hover\:text-yellow-20:hover {
    color: var(--yellow-20) !important;
}
.hover\:border-yellow-20:hover {
    border-color: var(--yellow-20) !important;
}

.hover\:bg-yellow-200:hover {
    background-color: var(--yellow-200) !important;
}
.hover\:text-yellow-200:hover {
    color: var(--yellow-200) !important;
}
.hover\:border-yellow-200:hover {
    border-color: var(--yellow-200) !important;
}


/*****************************************
FOCUS COLORS
*****************************************/

/* Primary */
.focus\:bg-primary-50:focus {
    background-color: var(--primary-50) !important;
}
.focus\:text-primary-50:focus {
    color: var(--primary-50) !important;
}
.focus\:border-primary-50:focus {
    border-color: var(--primary-50) !important;
}

.focus\:bg-primary-100:focus {
    background-color: var(--primary-100) !important;
}
.focus\:text-primary-100:focus {
    color: var(--primary-100) !important;
}
.focus\:border-primary-100:focus {
    border-color: var(--primary-100) !important;
}

.focus\:bg-primary-200:focus {
    background-color: var(--primary-200) !important;
}
.focus\:text-primary-200:focus {
    color: var(--primary-200) !important;
}
.focus\:border-primary-200:focus {
    border-color: var(--primary-200) !important;
}

.focus\:bg-primary-300:focus {
    background-color: var(--primary-300) !important;
}
.focus\:text-primary-300:focus {
    color: var(--primary-300) !important;
}
.focus\:border-primary-300:focus {
    border-color: var(--primary-300) !important;
}

.focus\:bg-primary-400:focus {
    background-color: var(--primary-400) !important;
}
.focus\:text-primary-400:focus {
    color: var(--primary-400) !important;
}
.focus\:border-primary-400:focus {
    border-color: var(--primary-400) !important;
}

/* Secondary */
.focus\:bg-secondary-50:focus {
    background-color: var(--secondary-50) !important;
}
.focus\:text-secondary-50:focus {
    color: var(--secondary-50) !important;
}
.focus\:border-secondary-50:focus {
    border-color: var(--secondary-50) !important;
}

.focus\:bg-secondary-100:focus {
    background-color: var(--secondary-100) !important;
}
.focus\:text-secondary-100:focus {
    color: var(--secondary-100) !important;
}
.focus\:border-secondary-100:focus {
    border-color: var(--secondary-100) !important;
}

.focus\:bg-secondary-200:focus {
    background-color: var(--secondary-200) !important;
}
.focus\:text-secondary-200:focus {
    color: var(--secondary-200) !important;
}
.focus\:border-secondary-200:focus {
    border-color: var(--secondary-200) !important;
}

.focus\:bg-secondary-300:focus {
    background-color: var(--secondary-300) !important;
}
.focus\:text-secondary-300:focus {
    color: var(--secondary-300) !important;
}
.focus\:border-secondary-300:focus {
    border-color: var(--secondary-300) !important;
}

.focus\:bg-secondary-400:focus {
    background-color: var(--secondary-400) !important;
}
.focus\:text-secondary-400:focus {
    color: var(--secondary-400) !important;
}
.focus\:border-secondary-400:focus {
    border-color: var(--secondary-400) !important;
}

/* Surface/Grays */
.focus\:bg-surface-50:focus {
    background-color: var(--surface-50) !important;
}
.focus\:text-surface-50:focus {
    color: var (--surface-50) !important;
}
.focus\:border-surface-50:focus {
    border-color: var(--surface-50) !important;
}

.focus\:bg-surface-100:focus {
    background-color: var(--surface-100) !important;
}
.focus\:text-surface-100:focus {
    color: var(--surface-100) !important;
}
.focus\:border-surface-100:focus {
    border-color: var(--surface-100) !important;
}

.focus\:bg-surface-150:focus {
    background-color: var(--surface-150) !important;
}
.focus\:text-surface-150:focus {
    color: var(--surface-150) !important;
}
.focus\:border-surface-150:focus {
    border-color: var(--surface-150) !important;
}

.focus\:bg-surface-200:focus {
    background-color: var(--surface-200) !important;
}
.focus\:text-surface-200:focus {
    color: var(--surface-200) !important;
}
.focus\:border-surface-200:focus {
    border-color: var(--surface-200) !important;
}

.focus\:bg-surface-300:focus {
    background-color: var(--surface-300) !important;
}
.focus\:text-surface-300:focus {
    color: var(--surface-300) !important;
}
.focus\:border-surface-300:focus {
    border-color: var(--surface-300) !important;
}

.focus\:bg-surface-400:focus {
    background-color: var(--surface-400) !important;
}
.focus\:text-surface-400:focus {
    color: var(--surface-400) !important;
}
.focus\:border-surface-400:focus {
    border-color: var(--surface-400) !important;
}

/* Danger */
.focus\:bg-danger-50:focus {
    background-color: var(--danger-50) !important;
}
.focus\:text-danger-50:focus {
    color: var(--danger-50) !important;
}
.focus\:border-danger-50:focus {
    border-color: var(--danger-50) !important;
}

.focus\:bg-danger-100:focus {
    background-color: var(--danger-100) !important;
}
.focus\:text-danger-100:focus {
    color: var(--danger-100) !important;
}
.focus\:border-danger-100:focus {
    border-color: var(--danger-100) !important;
}

.focus\:bg-danger-200:focus {
    background-color: var(--danger-200) !important;
}
.focus\:text-danger-200:focus {
    color: var(--danger-200) !important;
}
.focus\:border-danger-200:focus {
    border-color: var(--danger-200) !important;
}

.focus\:bg-danger-300:focus {
    background-color: var(--danger-300) !important;
}
.focus\:text-danger-300:focus {
    color: var(--danger-300) !important;
}
.focus\:border-danger-300:focus {
    border-color: var(--danger-300) !important;
}

.focus\:bg-danger-400:focus {
    background-color: var(--danger-400) !important;
}
.focus\:text-danger-400:focus {
    color: var(--danger-400) !important;
}
.focus\:border-danger-400:focus {
    border-color: var(--danger-400) !important;
}

/* Success */
.focus\:bg-success-50:focus {
    background-color: var(--success-50) !important;
}
.focus\:text-success-50:focus {
    color: var(--success-50) !important;
}
.focus\:border-success-50:focus {
    border-color: var(--success-50) !important;
}

.focus\:bg-success-100:focus {
    background-color: var(--success-100) !important;
}
.focus\:text-success-100:focus {
    color: var(--success-100) !important;
}
.focus\:border-success-100:focus {
    border-color: var(--success-100) !important;
}

.focus\:bg-success-200:focus {
    background-color: var(--success-200) !important;
}
.focus\:text-success-200:focus {
    color: var(--success-200) !important;
}
.focus\:border-success-200:focus {
    border-color: var(--success-200) !important;
}

.focus\:bg-success-300:focus {
    background-color: var(--success-300) !important;
}
.focus\:text-success-300:focus {
    color: var(--success-300) !important;
}
.focus\:border-success-300:focus {
    border-color: var(--success-300) !important;
}

.focus\:bg-success-400:focus {
    background-color: var(--success-400) !important;
}
.focus\:text-success-400:focus {
    color: var(--success-400) !important;
}
.focus\:border-success-400:focus {
    border-color: var(--success-400) !important;
}

/* Warning */
.focus\:bg-warning-50:focus {
    background-color: var(--warning-50) !important;
}
.focus\:text-warning-50:focus {
    color: var(--warning-50) !important;
}
.focus\:border-warning-50:focus {
    border-color: var(--warning-50) !important;
}

.focus\:bg-warning-100:focus {
    background-color: var(--warning-100) !important;
}
.focus\:text-warning-100:focus {
    color: var(--warning-100) !important;
}
.focus\:border-warning-100:focus {
    border-color: var(--warning-100) !important;
}

.focus\:bg-warning-200:focus {
    background-color: var(--warning-200) !important;
}
.focus\:text-warning-200:focus {
    color: var(--warning-200) !important;
}
.focus\:border-warning-200:focus {
    border-color: var(--warning-200) !important;
}

.focus\:bg-warning-300:focus {
    background-color: var(--warning-300) !important;
}
.focus\:text-warning-300:focus {
    color: var(--warning-300) !important;
}
.focus\:border-warning-300:focus {
    border-color: var(--warning-300) !important;
}

.focus\:bg-warning-400:focus {
    background-color: var(--warning-400) !important;
}
.focus\:text-warning-400:focus {
    color: var(--warning-400) !important;
}
.focus\:border-warning-400:focus {
    border-color: var(--warning-400) !important;
}

/* Nomina Blue */
.focus\:bg-nomina-blue-10:focus {
    background-color: var(--nomina-blue-10) !important;
}
.focus\:text-nomina-blue-10:focus {
    color: var(--nomina-blue-10) !important;
}
.focus\:border-nomina-blue-10:focus {
    border-color: var(--nomina-blue-10) !important;
}

/* Yellow */
.focus\:bg-yellow-20:focus {
    background-color: var(--yellow-20) !important;
}
.focus\:text-yellow-20:focus {
    color: var(--yellow-20) !important;
}
.focus\:border-yellow-20:focus {
    border-color: var(--yellow-20) !important;
}

.focus\:bg-yellow-200:focus {
    background-color: var(--yellow-200) !important;
}
.focus\:text-yellow-200:focus {
    color: var(--yellow-200) !important;
}
.focus\:border-yellow-200:focus {
    border-color: var(--yellow-200) !important;
}

/*****************************************
SUPPORT COLORS
*****************************************/

/* Purple */
.bg-purple-50 { background-color: var(--purple-50) !important; }
.text-purple-50 { color: var(--purple-50) !important; }
.border-purple-50 { border-color: var(--purple-50) !important; }

.bg-purple-200 { background-color: var(--purple-200) !important; }
.text-purple-200 { color: var(--purple-200) !important; }
.border-purple-200 { border-color: var(--purple-200) !important; }

.bg-purple-400 { background-color: var(--purple-400) !important; }
.text-purple-400 { color: var(--purple-400) !important; }
.border-purple-400 { border-color: var(--purple-400) !important; }

/* Purple - Hover */
.hover\:bg-purple-50:hover {
    background-color: var(--purple-50) !important;
}
.hover\:text-purple-50:hover {
    color: var(--purple-50) !important;
}
.hover\:border-purple-50:hover {
    border-color: var(--purple-50) !important;
}

.hover\:bg-purple-200:hover {
    background-color: var(--purple-200) !important;
}
.hover\:text-purple-200:hover {
    color: var(--purple-200) !important;
}
.hover\:border-purple-200:hover {
    border-color: var(--purple-200) !important;
}

.hover\:bg-purple-400:hover {
    background-color: var(--purple-400) !important;
}
.hover\:text-purple-400:hover {
    color: var(--purple-400) !important;
}
.hover\:border-purple-400:hover {
    border-color: var(--purple-400) !important;
}

/* Aqua */
.bg-aqua-50 { background-color: var(--aqua-50) !important; }
.text-aqua-50 { color: var(--aqua-50) !important; }
.border-aqua-50 { border-color: var(--aqua-50) !important; }

.bg-aqua-200 { background-color: var(--aqua-200) !important; }
.text-aqua-200 { color: var(--aqua-200) !important; }
.border-aqua-200 { border-color: var(--aqua-200) !important; }

.bg-aqua-400 { background-color: var(--aqua-400) !important; }
.text-aqua-400 { color: var(--aqua-400) !important; }
.border-aqua-400 { border-color: var(--aqua-400) !important; }

/* Aqua - Hover */
.hover\:bg-aqua-50:hover {
    background-color: var(--aqua-50) !important;
}
.hover\:text-aqua-50:hover {
    color: var(--aqua-50) !important;
}
.hover\:border-aqua-50:hover {
    border-color: var(--aqua-50) !important;
}

.hover\:bg-aqua-200:hover {
    background-color: var(--aqua-200) !important;
}
.hover\:text-aqua-200:hover {
    color: var(--aqua-200) !important;
}
.hover\:border-aqua-200:hover {
    border-color: var(--aqua-200) !important;
}

.hover\:bg-aqua-400:hover {
    background-color: var(--aqua-400) !important;
}
.hover\:text-aqua-400:hover {
    color: var(--aqua-400) !important;
}
.hover\:border-aqua-400:hover {
    border-color: var(--aqua-400) !important;
}

/* Warning */
.bg-warning-600 { background-color: var(--warning-600) !important; }
.text-warning-600 { color: var(--warning-600) !important; }
.border-warning-600 { border-color: var(--warning-600) !important; }

/* Warning - Hover */
.hover\:bg-warning-600:hover {
    background-color: var(--warning-600) !important;
}
.hover\:text-warning-600:hover {
    color: var(--warning-600) !important;
}
.hover\:border-warning-600:hover {
    border-color: var(--warning-600) !important;
}


/* Success */
.bg-success-600 { background-color: var(--success-600) !important; }
.text-success-600 { color: var(--success-600) !important; }
.border-success-600 { border-color: var(--success-600) !important; }

/* Success - Hover */
.hover\:bg-success-600:hover {
    background-color: var(--success-600) !important;
}
.hover\:text-success-600:hover {
    color: var(--success-600) !important;
}
.hover\:border-success-600:hover {
    border-color: var(--success-600) !important;
}