/* to include them in a file: */
/* {{ url_for('static', filename='variables.css') }} */

:root {
    --white: #FFF;
    --off-white: #F9F9F9;
    --blue25: #6DAAD9;
    --blue40: #1667FF;
    --blue50: #2B57C8;
    --blue75: #3D5BA7;
    --blue100: #10518D;
    --blue200: #01288D;
    --blue300: #003D6B;
    --green100: #3CE257;
    --green200: #18CC35;
    --yellow100: #FFF500;
    --orange100: #FF9D29;
    --red100: #FF6C2C;
    --red200: #E54500;
    --gray100: #E0E0E0;
    --gray200: #CCC;
    --gray250: #ACACAC;
    --gray300: #575757;
    --black: #000;
    --bg-white: var(--white);
    --bg-page: var(--off-white);
    --bg-card1: var(--blue100);
    --bg-card2: var(--blue25);
    --bg-card3: var(--blue300);
    --bg-card4: var(--gray100);
    --bg-card5: var(--gray200);
    --bg-actionlight: var(--blue75);
    --bg-action: var(--blue200);
    --bg-action-blue2: var(--blue50);
    --action2: var(--gray200);
    --yellow: var(--yellow100);
    --ligh-green: var(--green100);
    --green: var(--green200);
    --light-red: var(--red100);
    --red: var(--red200);
    --gray: var(--gray200);
    --dark-gray: var(--gray250);
    --black: var(--black);
}

.bg-white {
    background-color: var(--bg-white) !important;
}

.bg-page {
   background-color: var(--bg-page) !important;
}

.bg-card1 {
    background-color: var(--bg-card1) !important;
}

.bg-card2 {
    background-color: var(--bg-card2) !important;
}

.bg-card3 {
    background-color: var(--bg-card3) !important;
}

.bg-card4 {
    background-color: var(--bg-card4) !important;
}

.bg-card5 {
    background-color: var(--bg-card5) !important;
}

.bg-actionlight {
    background-color: var(--bg-actionlight) !important;
}

.bg-action {
    background-color: var(--bg-action) !important;
}

.bg-action-blue2 {
    background-color: var(--bg-action-blue2) !important;
}

.bg-action2 {
    background-color: var(--action2) !important;
}

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

.bg-light-green {
    background-color: var(--ligh-green) !important;
}

.bg-green {
    background-color: var(--green) !important;
}

.bg-light-red {
    background-color: var(--light-red) !important;
}

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

.bg-gray {
    background-color: var(--gray) !important;    
}

.bg-dark-gray {
    background-color: var(--dark-gray) !important;
}

.bg-black {
    background-color: var(--black) !important;
}

.text-white {
    color: var(--white) !important;
}

.text-black {
    color: var(--black) !important;
}