/* ----------------------
     BACKGROUND COLORS
   ---------------------- */
.red {
    background-color: var(--red-color);
    color: #FFFFFF;
    color: var(--white-color-text);
}

.pink {
    background-color: #E91E63;
    color: #FFFFFF;
    color: var(--white-color-text);
}

.purple {
    background-color: #9C27B0 !important;
    color: #FFFFFF;
    color: var(--white-color-text);
}

.deep-purple {
    background-color: #673AB7;
    color: #FFFFFF;
    color: var(--white-color-text);
}

.indigo {
    background-color: #3F51B5;
    color: #FFFFFF;
    color: var(--white-color-text);
}

.blue {
    background-color: #2196F3;
    color: #FFFFFF;
    color: var(--white-color-text);
}

.light-blue {
    background-color: #03A9F4;
    color: #FFFFFF;
    color: var(--white-color-text);
}

.cyan {
    background-color: #00BCD4;
    color: #FFFFFF;
    color: var(--white-color-text);
}

.teal {
    background-color: #009688;
    color: #FFFFFF;
    color: var(--white-color-text);
}

.green {
    background-color: #4CAF50 !important;
    color: #FFFFFF;
    color: var(--white-color-text);
}

.light-green {
    background-color: #8BC34A;
    color: #FFFFFF;
    color: var(--white-color-text);
}

.lime {
    background-color: #CDDC39;
    color: #000;
}

.yellow {
    background-color: #FFEB3B;
    color: #000;
}

.amber {
    background-color: #FFC107;
    color: #000;
}

.orange {
    background-color: #FF9800 !important;
    color: #000;
}

.deep-orange {
    background-color: #FF5722;
    color: #000;
}

.gray94, .grey94 {
    background-color: #F4F5F6 !important;
    background-color: var(--solitude-bg-color) !important;
    color: #000;
    color: var(--black-color-text);
}

.light-gray {
    background-color: #F5F5F5 !important;
    background-color: var(--white-smoke) !important;
}

.temp-color-block, .structural-color-block {
    width: 200px;
    height: 100px;
    display: inline-block;
    font-size: 1rem;
    text-align: center;
    line-height: 100px;
    text-transform: capitalize;
    margin: 0 5px;
    padding-top: 45px;
}

    .temp-color-block p, .structural-color-block p {
        margin: 0;
        padding: 0 10px;
    }


/* ----------------------
     STRUCTURAL COLORS
   ---------------------- */
.darkest {
    background-color: #202327;
    color: #FFFFFF;
    color: var(--white-color-text);
}

.dark {
    background-color: #6a6e73;
    background-color: var(--mid-grey);
    color: #FFFFFF;
    color: var(--white-color-text);
}

.medium-dark {
    background-color: #a5a8ac;
    background-color: var(--dark-grey);
    color: #FFFFFF;
    color: var(--white-color-text);
}

.medium-light {
    background-color: #DEE0E2;
    color: #000;
}

.light {
    background-color: #F0F1F2;
    color: #000;
}

.lightest {
    background-color: #FFFFFF !important;
    background-color: var(--white-color-text) !important;
    color: #000;
}

.bg-color-white {
    background-color: #FFF;
    background-color: var(--white-color);
}


/* ------------------------------
     FORE COLORS or FONT COLORS
   ------------------------------ */

.font-red {
    color: var(--red-color) !important;
}

.font-pink {
    color: #E91E63 !important;
}

.font-purple {
    color: #9C27B0;
}

.font-deep-purple {
    color: #673AB7;
}

.font-indigo {
    color: #3F51B5;
}

.font-blue {
    color: #2196F3;
}

.font-light-blue {
    color: #03A9F4;
}

.font-cyan {
    color: #00BCD4;
}

.font-teal {
    color: #009688;
}

.font-green {
    color: #4CAF50;
}

.font-light-green {
    color: #8BC34A;
}

.font-lime {
    color: #CDDC39;
}

.font-yellow {
    color: #FFEB3B;
}

.font-amber {
    color: #FFC107;
}

.font-orange {
    color: #FF9800;
}

.font-yellow-green {
    color: #6dd400;
}

.font-deep-orange {
    color: #FF5722;
}

.font-light-grey {
    color: #6a6e73 !important;
    color: var(--mid-grey) !important;
}

.font-white {
    color: #FFFFFF;
    color: var(--white-color-text);
}

.font-disabled {
    color: rgb(180,180,180) !important;
}

.font-charcoal-grey{
    color: #4c4c4c;
}
.font-gray20 {
    color: var(--gray-20);
}

.font-gray999{
    color: #999999;
}

.font_error_color {
    color: #DC2625;
}

.text_color_4{
    color: var(--text_color_4);
}