/* Global list of CSS variables. Try to keep these grouped by category and in alphabetical order
   You can reference these in CSS like so: 
        background-color: var(--blue-1);
*/
html {
    /* color library  https://app.zeplin.io/project/617fe253b012de3b59cf514c/screen/61a63550032d3e8f84222c38 */
    --black: #000;
    --blue-1: #1378a3; /* primaryColor */
    --blue-2: #f3fafd;
    --blue-3: #1378a3; /* primarySubColor */
    --blue-4: #141d41; /* primaryDarkColor */
    --blue-5: #f3fafd;
    --blue-6: #1e5f7e;
    --blue-7: #32c5ff;
    --blue-8: #1e77aa;
    --gray-1: #444444;
    --gray-2: #666366;
    --gray-3: #fafafa;
    --gray-4: #f0f0f0;
    --gray-5: #f7f7f7;
    --gray-6: #ccc;
    --gray-7: #ddd;
    --gray-8: #c5c5c5;
    --gray-9: #999;
    --orange-1: #f5a623;
    --orange-2: #CD820A;
    --orange-3: #e36800;
    --green-1: #1e7137;
    --red-1: #aa3410;
    --white: #fff;
    --orange-title-line: var(--orange-3);
    /* alerts */
    --alert-border-color: #cccccc;
    --alert-danger-color: #d0011b;
    --alert-error-color: #aa3410;
    --alert-info-color: var(--blue-3);
    --alert-warning-color: var(--orange-3);
    --alert-success-color: #1e7137;
    /* borders */
    --border-radius-standard: 5px;
    /* buttons */
    --button-radius: 5px;
    --button-primary-hover: #1e5f7e;
    --button-secondary-hover: #1e5f7e;
    /* fonts */
    --font-fa-pro: 'Font Awesome 5 Pro';
    --font-open-sans: 'Open Sans', sans-serif;
    /* font weight */
    --font-weight-semi-bold: 600;
    /* form input fields */
    --form-field-height: 44px;
    --form-field-height-compact: 32px;
    --form-field-border-color: var(--gray-6);
    --form-field-border-color-dark: var(--gray-1);
    --form-field-border-radius: 5px;
    /* focus indicators */
    --focus-ring: var(--orange-2);
    --focus-ring-box-shadow: rgba(205, 130, 10, 0.2);
    --focus-box-shadow: 0 0px 5px 0 rgba(205, 130, 10, 0.2);
    /* menu */
    --menu-bg: #fff;
    --menu-bg-hover: var(--blue-2);
    --menu-text: var(--gray-1);
    --menu-text-hover: var(--gray-1);
    --menu-border-color: var(--gray-1);
    --menu-button-border-color: #e8e8e8;
    /* text */
    --text-standard: var(--gray-1);
    --text-non-clickable-blue: var(--blue-4);
    --text-placeholder: var(--gray-2);
    --hyperlink-color: var(--blue-1);
    /* tooltips */
    --tooltip-button-color: var(--blue-1);
    --tooltip-background-color: var(--white);
    --tooltip-border-color: var(--gray-6);
    --tooltip-text-color: var(--gray-1);
    /* grids */
    --grid-cell-border-color: var(--gray-8);
}