:root {
    --color-primary-red: #f00;
    --color-primary-black: #000;
    --color-primary-white: #fff;
    --color-primary-green: #0f0;
    --color-primary-blue: #00f;
    --color-nav-border: #48779d;
    --color-brand-navy: #003057;
    --color-brand-navy-opacity: rgba(0, 48, 87, .75);
    --color-brand-navy-opacity-2: rgba(0, 48, 87, .98);
    --color-brand-navy-dark: #062345;
    --color-brand-navy-dark-opacity: rgba(6, 35, 69, 0.75);
    --color-brand-pale-blue: #b7dde1;
    --color-brand-pale-blue-opacity: rgba(183, 221, 225, 0.3);
    --color-brand-red: #e1523e;
    --color-brand-red-opacity: rgba(225, 82, 62, 0.35);
    --color-brand-red-opacity-2: rgba(225, 82, 62, 0.25);
    --color-brand-orange: #db864e;
    --color-brand-orange-opacity: rgba(219, 134, 78, 0.35);
    --color-brand-orange-disabled: #efc8ae;
    --color-brand-teal: #006271;
    --color-accent-blue-bright: #6ec4ff;
    --color-accent-blue-bright-opacity: rgba(110, 196, 255, 0.45);
    --color-gray-dark: #414042;
    --color-brand-highlight: #ffff00;
    /* black 90 */
    --color-gray-light: #dcddde;
    --color-gray-light-opacity: rgba(220, 221, 222, 0.35);
    /* black 15 */
    --color-gray-light-web: #f2f3f4;
    --color-alert-background-info: #dbeff0;
    --color-alert-background-warning: #f7e1d3;
    --color-alert-background-critical: #f8d3cd;
    --color-alert-icon-info: var(--color-brand-navy);
    --color-alert-icon-warning: var(--color-brand-orange);
    --color-alert-icon-critical: var(--color-brand-red);
}

:root {
    --font-size-body: 1.7rem;
    --font-size-body-medium-small: 1.5rem;
    --font-size-body-small: 1.3rem;
    --font-size-body-medium: 2rem;
    --font-size-body-large: 3rem;
    --font-size-body-extra-large: 3.5rem;
    --font-family-main: "Montserrat", sans-serif;
}

:root {
    --bu: 1rem;
    --padding-normal: 4rem 0;
    --margin-small: var(--bu);
    --margin-medium: calc(var(--margin-small) * 2);
    --margin-normal: calc(var(--margin-medium) * 2);
    --margin-large: calc(var(--margin-normal) * 2);
    --margin-extra-large: calc(var(--margin-large) * 2);
    --margin-left-align: 15%;
}

:root {
    --mobile-padding: 3vw;
    --content-width-narrow: 70.5rem;
    --content-width-normal: 100rem;
    --content-width-normal-2: 96rem;
    --content-width-wide: 105rem;
    --content-width-wide-2: 121rem;
    /* --content-width-wide-2: 140rem; */
    --content-width-extra-wide: 192rem;
    --top-nav-height: 0;
    --sidebar-menu-height: 0;
    --h4: #414042;
    --unvisited-link: #003057;
}

:root {
    --grid-column-main-content-padding: 10rem;
    --grid-columns-main-content-with-clear-sides: auto var(--grid-column-main-content-padding) 90rem 30rem var(--grid-column-main-content-padding) auto;
    --grid-template-areas-main-content-with-clear-sides: "left-edge left-padding main-content side-bar-nav right-padding right-edge";
    --grid-template-areas-main-content-with-clear-sides-one-column: "left-edge left-padding main-content main-content right-padding right-edge";
    --grid-template-areas-main-content-with-clear-sides-one-column-no-padding: "left-edge main-content main-content main-content main-content right-edge";
    --grid-columns-content-components-width-alignment: 1fr 25rem 15rem 20rem 80rem auto 1fr;
    --grid-columns-narrow-component: 8rem 71rem auto;
    --grid-sidebar: "content content content sidebar" "content content content sidebar" "content content content sidebar";
    --alert-min-height: 5rem;
    --main-padding: 16.9rem;
}

:root {
    --z-index-curtain: 2;
    --z-index-search-modal: 3;
    --z-index-alerts: 5;
    --z-index-leaderboard-ads: 6;
}

:root{
    --modal-width-wide: 85dvw;
    --modal-width-common: calc(var(--content-width-normal) - (var(--margin-medium) * 2));
}


@media screen and (max-width: 100rem){
    :root{
        --modal-width-common: var(--modal-width-wide);
    }
}