﻿/*All CSS Variables*/

/* TOC */
/* || COLORS */
/* || COLORS - DEFAULT */
/* || COLORS - GREY SHADE */
/* || COLORS - GREY TINT */
/* || COLORS - STATUS */
/* || COLORS - THEME PRIMARY */
/* || COLORS - THEME SECONDARY */
/* || COLORS - THEME CONTRAST */
/* || COLORS - GAINWELL */
/* || DEFAULT STYLES */
/* || DEFAULT STYLES - BORDER */
/* || DEFAULT STYLES - BUTTONS*/
/* || DEFAULT STYLES - FONT FAMILY */
/* || DEFAULT STYLES - LINK */
/* || SITE */
/* || SITE - LOGO */
/* || SITE - SPRITES */
/* || SITE - ICON POSITION */
/* || SITE - TYPE STYLE */
/* || SITE - PAGE - HEADER */
/* || SITE - PAGE - NAV BAR */
/* || SITE - PAGE - FOOTER */
/* || SITE - SPECIAL BLOCK - DEFAULT */
/* || SITE - SPECIAL BLOCK - ANNOUNCEMENT */
/* || SITE - SPECIAL BLOCK - DEFAULT/SPECIAL */
/* || SITE - SPECIAL BLOCK - ALTERNATIVE */
/* || SITE - SPECIAL BLOCK - NEWS/MEDICAL NEWS */
/* || SITE - TAB NAVIGATION */
/* || SITE - CONTENT TABS */
/* || SITE - HOME PAGE SPECIFICS  */
/* || SITE - FORM CONTROL  */
/* || SITE - TABLE GRID  */
/* || SITE - PAGE - DASHBOARD  */

:root {
    /* || COLORS */
    /* || COLORS - DEFAULT */
    --color-black: #000000;
    --color-white: #FFFFFF;
    /* || COLORS - GREY SHADE */
    --color-grey-shades-shark: #222222;
    --color-grey-shades-charcoal-grey: #424242;
    --color-grey-shades-very-dark-grey: #666666;
    --color-grey-shades-dark-grey: #888888;
    --color-grey-shades-grey: #A0A0A0;
    /* || COLORS - GREY TINT */
    --color-grey-tint-silver: #CCCCCC;
    --color-grey-tint-light-grey: #D8D8D8;
    --color-grey-tint-very-light-grey: #E8E8E8;
    --color-grey-tint-almost-white: #F5F5F5;
    /* || COLORS - STATUS */
    --status-alert: #F2994A;
    --status-success: #6FCF97;
    --status-error: #EB5757;
    --status-warning: #F2C94C;
    --status-info: #3E80ED;
    /* || COLORS - THEME PRIMARY */
    --color-primary-1: #4D608C;
    --color-primary-2: #001C5A;
    --color-primary-3: #364353;
    /* || COLORS - THEME SECONDARY */
    --color-secondary-1: #C1133D;
    --color-secondary-2: #A62B48;
    --color-secondary-3: #691B2C;
    /* || COLORS - THEME CONTRAST */
    --color-contrast-1: #EBBD31;
    --color-contrast-2: #FFD34F;
    --color-contrast-3: #FFE576;
    --color-contrast-4: #FFF8D7;
    /* || COLORS - GAINWELL */
    --gainwell-primary-vibrant-green: #00EEAE;
    --gainwell-primary-white: #FFFFFF;
    --gainwell-primary-soft-black: #2B3A44;
    --gainwell-secondary-grey-1: #EBEDF5;
    --gainwell-secondary-grey-2: #C2C6D2;
    --gainwell-secondary-grey-3: #8E99A8;
    --gainwell-secondary-grey-4: #5A6978;
    --gainwell-accent-dark-green: #00593C;
    --gainwell-accent-purple: #55206E;
    --gainwell-accent-blue: #1931E3;
    --gainwell-accent-light-blue: #00A9E0;
    --gainwell-accent-magenta: #CB29F5;
    --gainwell-accent-orange: #F26924;
    /* || DEFAULT STYLES */
    /* || DEFAULT STYLES - BORDER */
    --border: 1px solid var(--color-grey-tint-silver);
    /* || DEFAULT STYLES - BUTTONS*/
    --btn-text-transform: uppercase;
    --btn-primary-color: var(--gainwell-primary-white);
    --btn-primary-color-hover: var(--gainwell-primary-soft-black);
    --btn-primary-bg-color: var(--gainwell-primary-soft-black);
    --btn-primary-bg-color-hover: var(--gainwell-primary-vibrant-green);
    --btn-primary-border-color: var(--gainwell-primary-soft-black);
    --btn-primary-border-hover: 1px solid var(--gainwell-primary-vibrant-green);
    --btn-secondary-color: var(--gainwell-primary-soft-black);
    --btn-secondary-bg-color: var(--gainwell-secondary-grey-1);
    --btn-secondary-bg-color-hover: var(--gainwell-primary-vibrant-green);
    --btn-secondary-color-hover: var(--gainwell-primary-soft-black);
    --btn-secondary-border: 1px solid var(--gainwell-primary-soft-black);
    --btn-secondary-border-hover: 1px solid var(--gainwell-primary-vibrant-green);
    /* || DEFAULT STYLES - FONT FAMILY */
    --global-font-size: 1rem;
    --global-font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    /* || DEFAULT STYLES - LINK */
    --global-link-color: var(--gainwell-accent-dark-green);
    --global-link-bg-color: var(--color-contrast-4);
    --global-link-color-visited: var(--gainwell-accent-dark-green);
    /* || SITE */
    /* || SITE - LOGO */
    --gainwell-logo-black-green: url(/Images/gainwell_logo_300_rgb_pos.png);
    --gainwell-logo-white-green: url(/Images/gainwell_logo_300_rgb_rev.png);
    /* || SITE - SPRITES */
    --sprite-icon-image: url(/Images/icons.png);
    /* || SITE - ICON POSITION */
    --global-icon-color-1: var(--gainwell-primary-vibrant-green);
    --global-icon-color-2: var(--gainwell-primary-soft-black);
    --icon-508-position: -30px -420px;
    --icon-help-position: -30px -509px;
    --icon-user-position: -30px -450px;
    /* || SITE - TYPE STYLE */
    --title-font-size: 18px;
    --title-line-height: 39px;
    --title-color: var(--gainwell-accent-dark-green);
    --title-large-font-size: 24px;
    /* || SITE - PAGE - HEADER */
    --header-height: 150px;
    --header-bg-color: var(--color-white);
    --header-logo-height: 50px;
    --header-logo-width: 200px;
    --header-logo-image: var(--gainwell-logo-black-green);
    --header-links-color: var(--global-link-color);
    /* || SITE - PAGE - NAV BAR */
    --nav-border-width: 0;
    --nav-border: 3px solid transparent;
    --nav-border-color: var(--gainwell-accent-dark-green);
    --nav-border-style: none;
    --nav-border-hover: 3px solid;
    --nav-bg-color: var(--color-white);
    --nav-color: var(--global-link-color);
    --nav-links-font-size: 18px;
    --nav-links-bg-color-hover: var(--color-white);
    --nav-submenu-color: var(--color-primary-3);
    --nav-submenu-bg-color: var(--color-grey-tint-almost-white);
    --nav-submenu-border-top: 10px solid var(--color-secondary-3);
    --nav-submenu-border-color: var(--color-secondary-3);
    --nav-submenu-active-bg-color: var(--gainwell-secondary-grey-1);
    /* --nav-submenu-active-color: var(--gainwell-secondary-grey-1); */
    /* || SITE - PAGE - FOOTER */
    /* --footer-height: 97px; */
    --footer-padding: 30px 0 30px 0;
    --footer-border-color: var(--color-grey-tint-light-grey);
    /*--footer-bg-image: url(/Images/footer.png);*/
    --footer-logo-image: var(--gainwell-logo-white-green);
    /* --footer-logo-height: 0px; */
    --footer-logo-width: 0px;
    --footer-logo-height: 50px;
    --footer-logo-width: 200px;
    --footer-bg-color: var(--gainwell-primary-soft-black);
    --footer-links-color: var(--color-white);
    --footer-links-color-hover: var(--color-white);
    --footer-text-color: var(--color-white);
    --footer-links-separator-color: var(--color-white);
    /* || SITE - SPECIAL BLOCK - DEFAULT */
    --special-block-default-header-paddingleft: 13px;
    /* || SITE - SPECIAL BLOCK - ANNOUNCEMENT */
    --special-block-ann-header-bg: var(--gainwell-accent-dark-green);
    --special-block-ann-header-border: 1px solid var(--color-grey-tint-silver);
    --special-block-ann-header-color: var(--color-white);
    --special-block-ann-content-bg: var(--color-white);
    --special-block-ann-content-border: 1px solid var(--color-grey-tint-silver);
    /* || SITE - SPECIAL BLOCK - DEFAULT/SPECIAL */
    --special-block-default-header-bg: var(--gainwell-accent-dark-green);
    --special-block-default-header-border: 1px solid var(--color-grey-tint-silver);
    --special-block-default-header-color: var(--color-white);
    --special-block-default-content-bg: var(--color-white);
    --special-block-default-content-border: 1px solid var(--color-grey-tint-silver);
    /* || SITE - SPECIAL BLOCK - ALTERNATIVE */
    --special-block-alt-header-bg: var(--color-primary-2);
    --special-block-alt-header-border: 1px solid var(--color-grey-tint-silver);
    --special-block-alt-header-color: var(--color-white);
    --special-block-alt-content-bg: var(--color-grey-tint-almost-white);
    --special-block-alt-content-altrow-bg: var(--color-white);
    --special-block-alt-content-border: 1px solid var(--color-grey-tint-silver);
    /* || SITE - SPECIAL BLOCK - NEWS/MEDICAL NEWS */
    --special-block-news-header-bg: var(--color-grey-tint-almost-white);
    --special-block-news-header-border: 1px solid var(--color-grey-tint-silver);
    --special-block-news-header-color: var(--color-primary-1);
    --special-block-news-content-bg: var(--color-white);
    --special-block-news-content-border: 1px solid var(--color-grey-tint-silver);
    /* || SITE - TAB NAVIGATION */
    --tabsnav-tab-font-size: 16px;
    --tabsnav-tab-font-weight: 700;
    --tabsnav-tab-text-transform: uppercase;
    --tabsnav-tab-height: 42px;
    --tabsnav-tab-border: none;
    --tabsnav-tab-border-radius: 4px 4px 0 0;
    --tabsnav-tab-border-top: 4px solid var(--color-grey-tint-silver);
    --tabsnav-tab-color: var(--color-white);
    --tabsnav-tab-bg-color: var(--gainwell-secondary-grey-4);
    --tabsnav-tab-margin-right: 2px;
    --tabsnav-activetab-color: var(--color-white);
    --tabsnav-activetab-bg-color: var(--gainwell-accent-dark-green);
    --tabsnav-activetab-border: none;
    --tabsnav-activetab-border-top: 4px solid var(--gainwell-primary-vibrant-green);
    /* || SITE - CONTENT TABS */
    --tabscontent-border: 1px solid var(--color-grey-tint-silver);
    --tabscontent-tab-bg-color: var(--color-white);
    --tabscontent-tab-color: var(--color-primary-3);
    --tabscontent-tab-active-color: var(--color-primary-3);
    --tabscontent-tab-active-bg-color: var(--color-contrast-1);
    --tabscontent-tab-arrow-color: var(--color-secondary-1);
    --tabscontent-content-bg-color: var(--color-white);
    --tabscontent-content-bg-gradient-direction: bottom; /*l to r: right; r to l: left; top to bottom: bottom; bottom to top: top*/
    --tabscontent-content-bg-gradient-direction-webkit: top; /* always opposite of the above variable*/
    --tabscontent-content-bg-gradient-color-1: var(--color-white);
    --tabscontent-content-bg-gradient-color-2: var(--color-contrast-4);
    --tabscontent-content-bg-gradient: linear-gradient(to var(--tabscontent-content-bg-gradient-direction),var(--tabscontent-content-bg-gradient-color-1),var(--tabscontent-content-bg-gradient-color-2));
    /* || SITE - HOME PAGE SPECIFICS  */
    --home-welcome-header-color: var(--color-primary-2);
    --home-welcome-header-font-size: 12px;
    /* || SITE - FORM CONTROL  */
    --form-border-color: var(--color-primary-3);
    --form-bg-color: var(--color-white);
    --form-list-select-bg-color: var(--color-contrast-4);
    --form-list-select-color: var(--color-primary-3);
    --form-details-label-bg-color: var(--color-grey-tint-very-light-grey);
    --form-details-info-bg-color: var(--color-white);
    --form-details-label-color: var(--color-grey-shades-very-dark-grey);
    --form-button-bg-color-hover: var(--gainwell-primary-vibrant-green);
    /* || SITE - TABLE GRID  */
    --table-header-color-hover: var(--gainwell-primary-soft-black);
    --table-header-bg-color-hover: var(--gainwell-primary-vibrant-green);
    --table-header-icon-color: var(--gainwell-primary-white);
    --grid-toolbar-background-color: var(--color-grey-tint-almost-white);
    --grid-icon-color: var(--gainwell-primary-soft-black);
    --table-footer-pager-color: var(--gainwell-primary-white);
    /* || SITE - PAGE - DASHBOARD  */
    --dashboard-banner-color: var(--gainwell-primary-soft-black);
    --dashboard-banner-bg-color: var(--gainwell-primary-vibrant-green);
    --dashboard-banner-underline-color: var(--gainwell-primary-soft-black);
    --dashboard-banner-img: url(/Images/gainwell-dashboard-welcome.png);
    --dashboard-secure-actions-color: var(--color-white);
    --dashboard-secure-actions-bg-color: var(--gainwell-secondary-grey-4);
    --dashboard-secure-actions-icon-color: var(--global-icon-color-1);
    --dashboard-secure-actions-icon-size: 50px;
    --dashboard-title-border-color: var(--gainwell-primary-vibrant-green);
    --dashboard-title-border-size: 0.3em;
    --dashboard-user-actions-color: var(--gainwell-primary-soft-black);
    --dashboard-user-actions-bg-color: var(--gainwell-secondary-grey-1);
    --dashboard-user-icon-color: var(--global-icon-color-1);
    --dashboard-contact-color: var(--color-white);
    --dashboard-contact-bg-color: var(--gainwell-secondary-grey-4);
    --dashboard-training-bg-color: var(--gainwell-secondary-grey-1);
    /* || SITE - PAGE - DASHBOARD - MEDICAID CARD  */
    --medicaid-card-color: var(--color-black);
    --medicaid-card-top-banner-bg-color: var(--gainwell-primary-vibrant-green);
    --medicaid-card-top-banner-height: 70px;
    --medicaid-card-left-banner-bg-color: var(--gainwell-secondary-grey-2);
    --medicaid-card-content-bg-color: var(--gainwell-secondary-grey-1);
    --medicaid-card-icon: url(/Images/medicaid-card-icon.svg);
}
