/* Project Variables */

    :root
    {
        --spc-0: 0.250rem; --spc-2: 0.500rem; --spc-4: 1.000rem; --spc-6: 2.000rem; --spc-8: 4.000rem;
        --spc-1: 0.375rem; --spc-3: 0.750rem; --spc-5: 1.500rem; --spc-7: 3.000rem; --spc-9: 5.000rem;

        --co-01: calc(76px * 1  + (var(--spc-7) * (1 - 1)));     --co-07: calc(76px * 7  + (var(--spc-7) * (7 - 1)));
        --co-02: calc(76px * 2  + (var(--spc-7) * (2 - 1)));     --co-08: calc(76px * 8  + (var(--spc-7) * (8 - 1)));
        --co-03: calc(76px * 3  + (var(--spc-7) * (3 - 1)));     --co-09: calc(76px * 9  + (var(--spc-7) * (9 - 1))); 
        --co-04: calc(76px * 4  + (var(--spc-7) * (4 - 1)));     --co-10: calc(76px * 10 + (var(--spc-7) * (10 - 1)));
        --co-05: calc(76px * 5  + (var(--spc-7) * (5 - 1)));     --co-11: calc(76px * 11 + (var(--spc-7) * (11 - 1))); 
        --co-06: calc(76px * 6  + (var(--spc-7) * (6 - 1)));     --co-12: calc(76px * 12 + (var(--spc-7) * (12 - 1)));

        --font-size: 16px;
    }

    @media only screen and (max-width: 1536px)
    {   
        :root {
            --co-01: calc(((90vw - (var(--spc-7) * 11)) / 12) * 1  + (var(--spc-7) * (1 - 1)));      --co-07: calc(((90vw - (var(--spc-7) * 11)) / 12) * 7  + (var(--spc-7) * (7 - 1)));
            --co-02: calc(((90vw - (var(--spc-7) * 11)) / 12) * 2  + (var(--spc-7) * (2 - 1)));      --co-08: calc(((90vw - (var(--spc-7) * 11)) / 12) * 8  + (var(--spc-7) * (8 - 1))); 
            --co-03: calc(((90vw - (var(--spc-7) * 11)) / 12) * 3  + (var(--spc-7) * (3 - 1)));      --co-09: calc(((90vw - (var(--spc-7) * 11)) / 12) * 9  + (var(--spc-7) * (9 - 1)));
            --co-04: calc(((90vw - (var(--spc-7) * 11)) / 12) * 4  + (var(--spc-7) * (4 - 1)));      --co-10: calc(((90vw - (var(--spc-7) * 11)) / 12) * 10 + (var(--spc-7) * (10 - 1)));
            --co-05: calc(((90vw - (var(--spc-7) * 11)) / 12) * 5  + (var(--spc-7) * (5 - 1)));      --co-11: calc(((90vw - (var(--spc-7) * 11)) / 12) * 11 + (var(--spc-7) * (11 - 1)));
            --co-06: calc(((90vw - (var(--spc-7) * 11)) / 12) * 6  + (var(--spc-7) * (6 - 1)));      --co-12: calc(((90vw - (var(--spc-7) * 11)) / 12) * 12 + (var(--spc-7) * (12 - 1)));
        }
    }
/**/

/* Typography */
    a    { text-decoration: none;}
        
    h1, h2, h3, h4, h5, h6, p { margin: 0px; padding: 0px; display: block; }

    @font-face { font-family: 'Arkhip'; src: url('../fonts/Arkhip.TTF') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; }

    .rbt { font-family: Roboto, 'sans-serif'; }
    .jst { font-family: Jost, 'sans-serif'; }
    .ark { font-family: Arkhip, 'sans-serif'; }
    .cms { font-family: Commissioner, 'sans-serif'; }

    .ellipsis { overflow: hidden; text-overflow: ellipsis; }
    .truncate
    {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    /* Text Truncation Utilities */
    .line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
    .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
    .line-clamp-4 { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
    .line-clamp-5 { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
    .line-clamp-6 { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
    .line-clamp-7 { display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; }
    .line-clamp-8 { display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; }
    .line-clamp-9 { display: -webkit-box; -webkit-line-clamp: 9; -webkit-box-orient: vertical; overflow: hidden; }
    .line-clamp-10 { display: -webkit-box; -webkit-line-clamp: 10; -webkit-box-orient: vertical; overflow: hidden; }
/**/

/* Structure */
    html { padding: 0px; margin: 0px; scroll-behavior: smooth; background-color: var(--d-surface); }
    body { padding: 0px; margin: 0px; scroll-behavior: smooth; background-color: var(--d-surface); }
    main { /*overflow: hidden;*/ }
    img, iframe, svg { user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -o-user-select: none; }
    body, html, .adjustPaddingFromTopMenus, .adjustMarginFromTopMenus
    {
        overflow-anchor: none;
    }

    input:focus { border: none; outline: none; }
    a { color: unset; }

    input[type="date"],
    input[type="time"],
    input[type="datetime-local"]
    {
        text-align: left;
        width: 100%;
    }

    input[type="date"]::-webkit-datetime-edit,
    input[type="time"]::-webkit-datetime-edit,
    input[type="datetime-local"]::-webkit-datetime-edit,
    input[type="date"]::-webkit-datetime-edit-fields-wrapper,
    input[type="time"]::-webkit-datetime-edit-fields-wrapper,
    input[type="datetime-local"]::-webkit-datetime-edit-fields-wrapper
    {
        text-align: left;
        justify-content: flex-start;
        width: 100%;
    }

    header
    {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 100;
        height: 0;
        pointer-events: none;
    }
    header > *
    {
        pointer-events: auto;
    }
    .headerElement
    {
        will-change: top;
        transform: translateZ(0);
    }
    
    *::selection
    {
        background: var(--d-surface-container-lowest);
        -webkit-text-fill-color: var(--d-on-surface);
        color: var(--d-on-surface);
    }

    .hidden { display: none !important; }
    .disabled { pointer-events: none; cursor: default; opacity: 0.33; }
    .pointer-events-none { pointer-events: none; }

    .is-invisible
    {
        opacity: 0;
        transition: opacity 0.45s ease-in-out;
        pointer-events: none;
    }

    .round  { border-radius: 8px; }
    .circle { border-radius: 100%; }
    .border   { border: 1.5px solid; }
    .noborder { border: none; }

    .material-symbols-outlined  { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
    .material-symbols-filled    { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
    .grecaptcha-badge           { display: none !important; }

    .fullw { width:  100%;  }
    .fullh { height: 100%;  }

    .min-cont { width: min-content; }
    .max-cont { width: max-content; }
    .fit-cont { width: fit-content; }

    /* Width utilities */
    .flex-scrnw-100 { width: 100vw; width: 100dvw; }
    .flex-min-scrnw-100 { min-width: 100vw; min-width: 100dvw; }
    .flex-max-scrnw-100 { max-width: 100vw; max-width: 100dvw; }

    .flex-scrnw-75 { width: 75vw; width: 75dvw; }
    .flex-min-scrnw-75 { min-width: 75vw; min-width: 75dvw; }
    .flex-max-scrnw-75 { max-width: 75vw; max-width: 75dvw; }

    .flex-scrnw-50 { width: 50vw; width: 50dvw; }
    .flex-min-scrnw-50 { min-width: 50vw; min-width: 50dvw; }
    .flex-max-scrnw-50 { max-width: 50vw; max-width: 50dvw; }

    .flex-scrnw-25 { width: 25vw; width: 25dvw; }
    .flex-min-scrnw-25 { min-width: 25vw; min-width: 25dvw; }
    .flex-max-scrnw-25 { max-width: 25vw; max-width: 25dvw; }

    .fixed-scrnw-100 { width: 100vw; }
    .fixed-min-scrnw-100 { min-width: 100vw; }
    .fixed-max-scrnw-100 { max-width: 100vw; }

    .fixed-scrnw-75 { width: 75vw; }
    .fixed-min-scrnw-75 { min-width: 75vw; }
    .fixed-max-scrnw-75 { max-width: 75vw; }

    .fixed-scrnw-50 { width: 50vw; }
    .fixed-min-scrnw-50 { min-width: 50vw; }
    .fixed-max-scrnw-50 { max-width: 50vw; }

    .fixed-scrnw-25 { width: 25vw; }
    .fixed-min-scrnw-25 { min-width: 25vw; }
    .fixed-max-scrnw-25 { max-width: 25vw; }

    /* Height utilities */
    .flex-scrnh-100 { height: 100vh; height: 100dvh; transition: height 0.3s ease; will-change: height; }
    .flex-min-scrnh-100 { min-height: 100vh; min-height: 100dvh; transition: height 0.3s ease; will-change: height; }
    .flex-max-scrnh-100 { max-height: 100vh; max-height: 100dvh; transition: height 0.3s ease; will-change: height; }

    .flex-scrnh-75 { height: 75vh; height: 75dvh; transition: height 0.3s ease; will-change: height; }
    .flex-min-scrnh-75 { min-height: 75vh; min-height: 75dvh; transition: height 0.3s ease; will-change: height; }
    .flex-max-scrnh-75 { max-height: 75vh; max-height: 75dvh; transition: height 0.3s ease; will-change: height; }

    .flex-scrnh-50 { height: 50vh; height: 50dvh; transition: height 0.3s ease; will-change: height; }
    .flex-min-scrnh-50 { min-height: 50vh; min-height: 50dvh; transition: height 0.3s ease; will-change: height; }
    .flex-max-scrnh-50 { max-height: 50vh; max-height: 50dvh; transition: height 0.3s ease; will-change: height; }

    .flex-scrnh-25 { height: 25vh; height: 25dvh; transition: height 0.3s ease; will-change: height; }
    .flex-min-scrnh-25 { min-height: 25vh; min-height: 25dvh; transition: height 0.3s ease; will-change: height; }
    .flex-max-scrnh-25 { max-height: 25vh; max-height: 25dvh; transition: height 0.3s ease; will-change: height; }

    .fixed-scrnh-100 { height: 100vh; }
    .fixed-min-scrnh-100 { min-height: 100vh; }
    .fixed-max-scrnh-100 { max-height: 100vh; }

    .fixed-scrnh-75 { height: 75vh; }
    .fixed-min-scrnh-75 { min-height: 75vh; }
    .fixed-max-scrnh-75 { max-height: 75vh; }

    .fixed-scrnh-50 { height: 50vh; }
    .fixed-min-scrnh-50 { min-height: 50vh; }
    .fixed-max-scrnh-50 { max-height: 50vh; }

    .fixed-scrnh-25 { height: 25vh; }
    .fixed-min-scrnh-25 { min-height: 25vh; }
    .fixed-max-scrnh-25 { max-height: 25vh; }

    .fullscreen-p    { padding: var(--fullscreen-padding); }
    .fullscreen-pv   { padding-top: var(--fullscreen-padding); padding-bottom: var(--fullscreen-padding); }
    .fullscreen-ph   { padding-left: var(--fullscreen-padding); padding-right: var(--fullscreen-padding); }
    .fullscreen-pt   { padding-top: var(--fullscreen-padding); }
    .fullscreen-pr   { padding-right: var(--fullscreen-padding); }
    .fullscreen-pb   { padding-bottom: var(--fullscreen-padding); }
    .fullscreen-pl   { padding-left: var(--fullscreen-padding); }    

    .fitcont { width: fit-content; }
    .grow { flex: 1; }
    .noShrink { flex-shrink: 0; }
    .scroll-y { overflow-y: auto; min-height: 0; }
    .min-w-0 { min-width: 0; }
    .halfw { width: 50%;  }
    .samew, .samew > * { flex: 1 0 0; }
    .sameh { align-items: stretch; }

    .cont  { display: flex; box-sizing: border-box; flex-wrap: wrap; }
    .row   { flex-direction: row; }
    .col   { flex-direction: column; flex-wrap: nowrap !important; }
    .nwrap { flex-wrap: nowrap !important; }

    .col.v-cent     { justify-content: center; }
    .col.v-apart    { justify-content: space-between; }
    .col.v-start    { justify-content: flex-start; }
    .col.v-end      { justify-content: flex-end; }
    .col.v-stretch  { justify-content: stretch; }

    .col.h-cent     { align-items: center; }
    .col.h-apart    { align-items: space-between; }
    .col.h-start    { align-items: flex-start; }
    .col.h-end      { align-items: flex-end; }
    .col.h-stretch  { align-items: stretch; }

    .row.v-cent     { align-items: center; }
    .row.v-apart    { align-items: space-between; }
    .row.v-start    { align-items: flex-start; }
    .row.v-end      { align-items: flex-end; }
    .row.v-stretch  { align-items: stretch; }

    .row.h-cent     { justify-content: center; }
    .row.h-apart    { justify-content: space-between; }
    .row.h-start    { justify-content: flex-start; }
    .row.h-end      { justify-content: flex-end; }
    .row.h-stretch  { justify-content: stretch; }

    .fcent     { text-align: center; }
    .fleft     { text-align: left; }
    .fright    { text-align: right; }
    .fjustify  { text-align: justify; }
    
    .bgcover   { background-size: cover !important;   background-repeat: no-repeat !important; background-position: center !important; }
    .bgcontain { background-size: contain !important; background-repeat: no-repeat !important; background-position: center !important; }
    .bgtrans   { background: transparent; }

    .admOnly { display: none !important; }

    .blockScroll { overflow: hidden; }
/**/

/* Effects */
    .hover:hover { cursor: pointer; }
    .und { text-decoration: underline; }
    .an-und:hover { text-decoration: underline; }

    @keyframes fadeIn { 0% { opacity: 0%; } 100% { opacity: 100%; } }
    @keyframes fadeOut { 0% { opacity: 100%; } 100% { opacity: 0%; } }
    @keyframes slideOutLeft { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }
    @keyframes slideOutLeftFade
    {
        0% {
            transform: translateX(0);
            opacity: 1;
        }
        80% {
            opacity: 1;
        }
        100% {
            transform: translateX(-100%);
            opacity: 0;
        }
    }
    @keyframes slideOutRight { 0% { transform: translateX(0); } 100% { transform: translateX(100%); } }    
    @keyframes slideOutRightFade
    {
        0% {
            transform: translateX(0);
            opacity: 1;
        }
        80% {
            opacity: 1;
        }
        100% {
            transform: translateX(100%);
            opacity: 0;
        }
    }    
    @keyframes slideInLeft { 0% { transform: translateX(-100%); } 100% { transform: translateX(0); } }
    @keyframes slideInLeftFade
    {
        0% {
            transform: translateX(-100%);
            opacity: 0;
        }
        20% {
            opacity: 0;
        }
        100% {
            transform: translateX(0);
            opacity: 1;
        }
    }
    @keyframes slideInRight { 0% { transform: translateX(100%); } 100% { transform: translateX(0); } }
    @keyframes slideInRightFade
    {
        0% {
            transform: translateX(100%);
            opacity: 0;
        }
        20% {
            opacity: 0;
        }
        100% {
            transform: translateX(0);
            opacity: 1;
        }
    }
    @keyframes slideOutDown
    {
        from
        { 
            opacity: 1;
            transform: translateY(0);
        }
        to
        {
            opacity: 0;
            transform: translateY(100%);
        }
    }
    @keyframes slideInUp
    {
        from
        {
            opacity: 0;
            transform: translateY(100%);
        }
        to
        {
            opacity: 1;
            transform: translateY(0);
        }
    }
    @keyframes shake { 0% { transform: translateX(0); } 25% { transform: translateX(-10px); } 50% { transform: translateX(10px); } 75% { transform: translateX(-10px); } 100% { transform: translateX(0); } }
    
    .fadeIn { animation: fadeIn 0.3s forwards; }
    .fadeOut { animation: fadeOut 0.3s forwards; }
    .slideOutLeft { animation: slideOutLeft 0.5s forwards; }
    .slideOutLeftFade { animation: slideOutLeftFade 0.5s forwards; }
    .slideOutRight { animation: slideOutRight 0.5s forwards; }
    .slideOutRightFade { animation: slideOutRightFade 0.5s forwards; }    
    .slideInLeft { animation: slideInLeft 0.5s forwards; }
    .slideInLeftFade { animation: slideInLeftFade 0.5s forwards; }
    .slideInRight { animation: slideInRight 0.5s forwards; }
    .slideInRightFade { animation: slideInRightFade 0.5s forwards; }
    .slideOutDown { animation-name: slideOutDown 0.5s ease forwards; }
    .slideInUp { animation-name: slideInUp 0.5s ease forwards; }
    .shake { animation: shake 0.4s ease-in-out; }

    /**/

    :not(.disabled).anbg-round { position: relative; }
    :not(.disabled).anbg-round::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
    :not(.disabled).anbg-round::before { background: var(--icons-hover); opacity: 0; width: 0px; height: 0px; transition: all 0.3s; border-radius: 100%; }
    :not(.disabled).anbg-round:hover          { cursor: pointer; }
    :not(.disabled).anbg-round:hover::before  { width: 40px; height: 40px; opacity: 0.2; transition: all 0.3s; }
    :not(.disabled).anbg-round:active::before { width: 60px; height: 60px; opacity: 0.2; transition: all 0.3s; }

    .anbg-fill { transition: background-color 0.3s; }
    .anbg-fill:hover { background-color: rgba(255, 255, 255, 0.10); transition: background-color 0.3s; }

    :hover  > .anbg-round-parent         { cursor: pointer; }
    :hover  > .anbg-round-parent::before { width: 40px; height: 40px; opacity: 0.2; transition: all 0.3s; }
    :active > .anbg-round-parent::before { width: 60px; height: 60px; opacity: 0.2; transition: all 0.3s; }

    /**/

    .imageLoading
    {
        opacity: 0;
        background-color: var(--d-surface-container-high);
    }
    .imageLoaded
    {
        opacity: 1;
        transition: opacity 0.2s ease-in-out;
    }

    .elev-1 { box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.25);   }
    .elev-2 { box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.25);  }
    .elev-3 { box-shadow: 0px 16px 30px 0px rgba(0, 0, 0, 0.25); }

    .at-elev-1:hover { box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.25);   }
    .at-elev-2:hover { box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.25);  }
    .at-elev-3:hover { box-shadow: 0px 16px 30px 0px rgba(0, 0, 0, 0.25); }

    /**/
/**/

/* Color Palette */
    .primary-1-cl { color: var(--primary-1); } .primary-1-bg { background-color: var(--primary-1); } .primary-1-bc { border-color: var(--primary-1); }
    .primary-2-cl { color: var(--primary-2); } .primary-2-bg { background-color: var(--primary-2); } .primary-2-bc { border-color: var(--primary-2); }
    .primary-3-cl { color: var(--primary-3); } .primary-3-bg { background-color: var(--primary-3); } .primary-3-bc { border-color: var(--primary-3); }
    .primary-4-cl { color: var(--primary-4); } .primary-4-bg { background-color: var(--primary-4); } .primary-4-bc { border-color: var(--primary-4); }
    .primary-5-cl { color: var(--primary-5); } .primary-5-bg { background-color: var(--primary-5); } .primary-5-bc { border-color: var(--primary-5); }
    .primary-6-cl { color: var(--primary-6); } .primary-6-bg { background-color: var(--primary-6); } .primary-6-bc { border-color: var(--primary-6); }
    .primary-7-cl { color: var(--primary-7); } .primary-7-bg { background-color: var(--primary-7); } .primary-7-bc { border-color: var(--primary-7); }
    .primary-8-cl { color: var(--primary-8); } .primary-8-bg { background-color: var(--primary-8); } .primary-8-bc { border-color: var(--primary-8); }
    .primary-9-cl { color: var(--primary-9); } .primary-9-bg { background-color: var(--primary-9); } .primary-9-bc { border-color: var(--primary-9); }

    .neutral-1-cl { color: var(--neutral-1); } .neutral-1-bg { background-color: var(--neutral-1); } .neutral-1-bc { border-color: var(--neutral-1); }
    .neutral-2-cl { color: var(--neutral-2); } .neutral-2-bg { background-color: var(--neutral-2); } .neutral-2-bc { border-color: var(--neutral-2); }
    .neutral-3-cl { color: var(--neutral-3); } .neutral-3-bg { background-color: var(--neutral-3); } .neutral-3-bc { border-color: var(--neutral-3); }
    .neutral-4-cl { color: var(--neutral-4); } .neutral-4-bg { background-color: var(--neutral-4); } .neutral-4-bc { border-color: var(--neutral-4); }
    .neutral-5-cl { color: var(--neutral-5); } .neutral-5-bg { background-color: var(--neutral-5); } .neutral-5-bc { border-color: var(--neutral-5); }
    .neutral-6-cl { color: var(--neutral-6); } .neutral-6-bg { background-color: var(--neutral-6); } .neutral-6-bc { border-color: var(--neutral-6); }
    .neutral-7-cl { color: var(--neutral-7); } .neutral-7-bg { background-color: var(--neutral-7); } .neutral-7-bc { border-color: var(--neutral-7); }
    .neutral-8-cl { color: var(--neutral-8); } .neutral-8-bg { background-color: var(--neutral-8); } .neutral-8-bc { border-color: var(--neutral-8); }
    .neutral-9-cl { color: var(--neutral-9); } .neutral-9-bg { background-color: var(--neutral-9); } .neutral-9-bc { border-color: var(--neutral-9); }

    .red-1-cl { color: var(--accent-red-1); } .red-1-bg { background-color: var(--accent-red-1); } .red-1-bc { border-color: var(--accent-red-1); }
    .red-2-cl { color: var(--accent-red-2); } .red-2-bg { background-color: var(--accent-red-2); } .red-2-bc { border-color: var(--accent-red-2); }
    .red-3-cl { color: var(--accent-red-3); } .red-3-bg { background-color: var(--accent-red-3); } .red-3-bc { border-color: var(--accent-red-3); }
    .red-4-cl { color: var(--accent-red-4); } .red-4-bg { background-color: var(--accent-red-4); } .red-4-bc { border-color: var(--accent-red-4); }
    .red-5-cl { color: var(--accent-red-5); } .red-5-bg { background-color: var(--accent-red-5); } .red-5-bc { border-color: var(--accent-red-5); }
    .red-6-cl { color: var(--accent-red-6); } .red-6-bg { background-color: var(--accent-red-6); } .red-6-bc { border-color: var(--accent-red-6); }
    .red-7-cl { color: var(--accent-red-7); } .red-7-bg { background-color: var(--accent-red-7); } .red-7-bc { border-color: var(--accent-red-7); }
    .red-8-cl { color: var(--accent-red-8); } .red-8-bg { background-color: var(--accent-red-8); } .red-8-bc { border-color: var(--accent-red-8); }
    .red-9-cl { color: var(--accent-red-9); } .red-9-bg { background-color: var(--accent-red-9); } .red-9-bc { border-color: var(--accent-red-9); }

    .brown-1-cl { color: var(--accent-brown-1); } .brown-1-bg { background-color: var(--accent-brown-1); } .brown-1-bc { border-color: var(--accent-brown-1); }
    .brown-2-cl { color: var(--accent-brown-2); } .brown-2-bg { background-color: var(--accent-brown-2); } .brown-2-bc { border-color: var(--accent-brown-2); }
    .brown-3-cl { color: var(--accent-brown-3); } .brown-3-bg { background-color: var(--accent-brown-3); } .brown-3-bc { border-color: var(--accent-brown-3); }
    .brown-4-cl { color: var(--accent-brown-4); } .brown-4-bg { background-color: var(--accent-brown-4); } .brown-4-bc { border-color: var(--accent-brown-4); }
    .brown-5-cl { color: var(--accent-brown-5); } .brown-5-bg { background-color: var(--accent-brown-5); } .brown-5-bc { border-color: var(--accent-brown-5); }
    .brown-6-cl { color: var(--accent-brown-6); } .brown-6-bg { background-color: var(--accent-brown-6); } .brown-6-bc { border-color: var(--accent-brown-6); }
    .brown-7-cl { color: var(--accent-brown-7); } .brown-7-bg { background-color: var(--accent-brown-7); } .brown-7-bc { border-color: var(--accent-brown-7); }
    .brown-8-cl { color: var(--accent-brown-8); } .brown-8-bg { background-color: var(--accent-brown-8); } .brown-8-bc { border-color: var(--accent-brown-8); }
    .brown-9-cl { color: var(--accent-brown-9); } .brown-9-bg { background-color: var(--accent-brown-9); } .brown-9-bc { border-color: var(--accent-brown-9); }

    .faction-legion-3-cl { color: var(--faction-legion-3); } .faction-legion-3-bg { background-color: var(--faction-legion-3); } .faction-legion-3-bc { border-color: var(--faction-legion-3); }
    .faction-legion-5-cl { color: var(--faction-legion-5); } .faction-legion-5-bg { background-color: var(--faction-legion-5); } .faction-legion-5-bc { border-color: var(--faction-legion-5); }
    .faction-legion-7-cl { color: var(--faction-legion-7); } .faction-legion-7-bg { background-color: var(--faction-legion-7); } .faction-legion-7-bc { border-color: var(--faction-legion-7); }

    .faction-order-3-cl { color: var(--faction-order-3); } .faction-order-3-bg { background-color: var(--faction-order-3); } .faction-order-3-bc { border-color: var(--faction-order-3); }
    .faction-order-5-cl { color: var(--faction-order-5); } .faction-order-5-bg { background-color: var(--faction-order-5); } .faction-order-5-bc { border-color: var(--faction-order-5); }
    .faction-order-7-cl { color: var(--faction-order-7); } .faction-order-7-bg { background-color: var(--faction-order-7); } .faction-order-7-bc { border-color: var(--faction-order-7); }

    .faction-conclave-3-cl { color: var(--faction-conclave-3); } .faction-conclave-3-bg { background-color: var(--faction-conclave-3); } .faction-conclave-3-bc { border-color: var(--faction-conclave-3); }
    .faction-conclave-5-cl { color: var(--faction-conclave-5); } .faction-conclave-5-bg { background-color: var(--faction-conclave-5); } .faction-conclave-5-bc { border-color: var(--faction-conclave-5); }
    .faction-conclave-7-cl { color: var(--faction-conclave-7); } .faction-conclave-7-bg { background-color: var(--faction-conclave-7); } .faction-conclave-7-bc { border-color: var(--faction-conclave-7); }

    .faction-primal-3-cl { color: var(--faction-primal-3); } .faction-primal-3-bg { background-color: var(--faction-primal-3); } .faction-primal-3-bc { border-color: var(--faction-primal-3); }
    .faction-primal-5-cl { color: var(--faction-primal-5); } .faction-primal-5-bg { background-color: var(--faction-primal-5); } .faction-primal-5-bc { border-color: var(--faction-primal-5); }
    .faction-primal-7-cl { color: var(--faction-primal-7); } .faction-primal-7-bg { background-color: var(--faction-primal-7); } .faction-primal-7-bc { border-color: var(--faction-primal-7); }

    .inf-3-cl { color: var(--inf-3); } .inf-3-bg { background-color: var(--inf-3); } .inf-3-bc { border-color: var(--inf-3); }
    .inf-5-cl { color: var(--inf-5); } .inf-5-bg { background-color: var(--inf-5); } .inf-5-bc { border-color: var(--inf-5); }
    .inf-7-cl { color: var(--inf-7); } .inf-7-bg { background-color: var(--inf-7); } .inf-7-bc { border-color: var(--inf-7); }

    .scs-3-cl { color: var(--scs-3); } .scs-3-bg { background-color: var(--scs-3); } .scs-3-bc { border-color: var(--scs-3); }
    .scs-5-cl { color: var(--scs-5); } .scs-5-bg { background-color: var(--scs-5); } .scs-5-bc { border-color: var(--scs-5); }
    .scs-7-cl { color: var(--scs-7); } .scs-7-bg { background-color: var(--scs-7); } .scs-7-bc { border-color: var(--scs-7); }

    .wrn-3-cl { color: var(--wrn-3); } .wrn-3-bg { background-color: var(--wrn-3); } .wrn-3-bc { border-color: var(--wrn-3); }
    .wrn-5-cl { color: var(--wrn-5); } .wrn-5-bg { background-color: var(--wrn-5); } .wrn-5-bc { border-color: var(--wrn-5); }
    .wrn-7-cl { color: var(--wrn-7); } .wrn-7-bg { background-color: var(--wrn-7); } .wrn-7-bc { border-color: var(--wrn-7); }

    .err-3-cl { color: var(--err-3); } .err-3-bg { background-color: var(--err-3); } .err-3-bc { border-color: var(--err-3); }
    .err-5-cl { color: var(--err-5); } .err-5-bg { background-color: var(--err-5); } .err-5-bc { border-color: var(--err-5); }
    .err-7-cl { color: var(--err-7); } .err-7-bg { background-color: var(--err-7); } .err-7-bc { border-color: var(--err-7); }

    .inhe-cl { color: inherit; } /* add references where style="color:inherit" is used */
/**/

/* Spacing */
    .ml-0 { margin-left: var(--spc-0); } .mr-0 { margin-right: var(--spc-0); } .mt-0 { margin-top: var(--spc-0); } .mb-0 { margin-bottom: var(--spc-0); } 
    .ml-1 { margin-left: var(--spc-1); } .mr-1 { margin-right: var(--spc-1); } .mt-1 { margin-top: var(--spc-1); } .mb-1 { margin-bottom: var(--spc-1); } 
    .ml-2 { margin-left: var(--spc-2); } .mr-2 { margin-right: var(--spc-2); } .mt-2 { margin-top: var(--spc-2); } .mb-2 { margin-bottom: var(--spc-2); } 
    .ml-3 { margin-left: var(--spc-3); } .mr-3 { margin-right: var(--spc-3); } .mt-3 { margin-top: var(--spc-3); } .mb-3 { margin-bottom: var(--spc-3); } 
    .ml-4 { margin-left: var(--spc-4); } .mr-4 { margin-right: var(--spc-4); } .mt-4 { margin-top: var(--spc-4); } .mb-4 { margin-bottom: var(--spc-4); } 
    .ml-5 { margin-left: var(--spc-5); } .mr-5 { margin-right: var(--spc-5); } .mt-5 { margin-top: var(--spc-5); } .mb-5 { margin-bottom: var(--spc-5); } 
    .ml-6 { margin-left: var(--spc-6); } .mr-6 { margin-right: var(--spc-6); } .mt-6 { margin-top: var(--spc-6); } .mb-6 { margin-bottom: var(--spc-6); } 
    .ml-7 { margin-left: var(--spc-7); } .mr-7 { margin-right: var(--spc-7); } .mt-7 { margin-top: var(--spc-7); } .mb-7 { margin-bottom: var(--spc-7); } 
    .ml-8 { margin-left: var(--spc-8); } .mr-8 { margin-right: var(--spc-8); } .mt-8 { margin-top: var(--spc-8); } .mb-8 { margin-bottom: var(--spc-8); } 
    .ml-9 { margin-left: var(--spc-9); } .mr-9 { margin-right: var(--spc-9); } .mt-9 { margin-top: var(--spc-9); } .mb-9 { margin-bottom: var(--spc-9); } 

    .mh-0 { margin-left: var(--spc-0); margin-right: var(--spc-0); } .mv-0 { margin-top: var(--spc-0); margin-bottom: var(--spc-0); } .m-0 { margin: var(--spc-0); }
    .mh-1 { margin-left: var(--spc-1); margin-right: var(--spc-1); } .mv-1 { margin-top: var(--spc-1); margin-bottom: var(--spc-1); } .m-1 { margin: var(--spc-1); }
    .mh-2 { margin-left: var(--spc-2); margin-right: var(--spc-2); } .mv-2 { margin-top: var(--spc-2); margin-bottom: var(--spc-2); } .m-2 { margin: var(--spc-2); }
    .mh-3 { margin-left: var(--spc-3); margin-right: var(--spc-3); } .mv-3 { margin-top: var(--spc-3); margin-bottom: var(--spc-3); } .m-3 { margin: var(--spc-3); }
    .mh-4 { margin-left: var(--spc-4); margin-right: var(--spc-4); } .mv-4 { margin-top: var(--spc-4); margin-bottom: var(--spc-4); } .m-4 { margin: var(--spc-4); }
    .mh-5 { margin-left: var(--spc-5); margin-right: var(--spc-5); } .mv-5 { margin-top: var(--spc-5); margin-bottom: var(--spc-5); } .m-5 { margin: var(--spc-5); }
    .mh-6 { margin-left: var(--spc-6); margin-right: var(--spc-6); } .mv-6 { margin-top: var(--spc-6); margin-bottom: var(--spc-6); } .m-6 { margin: var(--spc-6); }
    .mh-7 { margin-left: var(--spc-7); margin-right: var(--spc-7); } .mv-7 { margin-top: var(--spc-7); margin-bottom: var(--spc-7); } .m-7 { margin: var(--spc-7); }
    .mh-8 { margin-left: var(--spc-8); margin-right: var(--spc-8); } .mv-8 { margin-top: var(--spc-8); margin-bottom: var(--spc-8); } .m-8 { margin: var(--spc-8); }
    .mh-9 { margin-left: var(--spc-9); margin-right: var(--spc-9); } .mv-9 { margin-top: var(--spc-9); margin-bottom: var(--spc-9); } .m-9 { margin: var(--spc-9); }

    .pl-0 { padding-left: var(--spc-0); } .pr-0 { padding-right: var(--spc-0); } .pt-0 { padding-top: var(--spc-0); } .pb-0 { padding-bottom: var(--spc-0); } 
    .pl-1 { padding-left: var(--spc-1); } .pr-1 { padding-right: var(--spc-1); } .pt-1 { padding-top: var(--spc-1); } .pb-1 { padding-bottom: var(--spc-1); } 
    .pl-2 { padding-left: var(--spc-2); } .pr-2 { padding-right: var(--spc-2); } .pt-2 { padding-top: var(--spc-2); } .pb-2 { padding-bottom: var(--spc-2); } 
    .pl-3 { padding-left: var(--spc-3); } .pr-3 { padding-right: var(--spc-3); } .pt-3 { padding-top: var(--spc-3); } .pb-3 { padding-bottom: var(--spc-3); } 
    .pl-4 { padding-left: var(--spc-4); } .pr-4 { padding-right: var(--spc-4); } .pt-4 { padding-top: var(--spc-4); } .pb-4 { padding-bottom: var(--spc-4); } 
    .pl-5 { padding-left: var(--spc-5); } .pr-5 { padding-right: var(--spc-5); } .pt-5 { padding-top: var(--spc-5); } .pb-5 { padding-bottom: var(--spc-5); } 
    .pl-6 { padding-left: var(--spc-6); } .pr-6 { padding-right: var(--spc-6); } .pt-6 { padding-top: var(--spc-6); } .pb-6 { padding-bottom: var(--spc-6); } 
    .pl-7 { padding-left: var(--spc-7); } .pr-7 { padding-right: var(--spc-7); } .pt-7 { padding-top: var(--spc-7); } .pb-7 { padding-bottom: var(--spc-7); } 
    .pl-8 { padding-left: var(--spc-8); } .pr-8 { padding-right: var(--spc-8); } .pt-8 { padding-top: var(--spc-8); } .pb-8 { padding-bottom: var(--spc-8); } 
    .pl-9 { padding-left: var(--spc-9); } .pr-9 { padding-right: var(--spc-9); } .pt-9 { padding-top: var(--spc-9); } .pb-9 { padding-bottom: var(--spc-9); } 

    .ph-0 { padding-left: var(--spc-0); padding-right: var(--spc-0); } .pv-0 { padding-top: var(--spc-0); padding-bottom: var(--spc-0); } .p-0 { padding: var(--spc-0); }
    .ph-1 { padding-left: var(--spc-1); padding-right: var(--spc-1); } .pv-1 { padding-top: var(--spc-1); padding-bottom: var(--spc-1); } .p-1 { padding: var(--spc-1); }
    .ph-2 { padding-left: var(--spc-2); padding-right: var(--spc-2); } .pv-2 { padding-top: var(--spc-2); padding-bottom: var(--spc-2); } .p-2 { padding: var(--spc-2); }
    .ph-3 { padding-left: var(--spc-3); padding-right: var(--spc-3); } .pv-3 { padding-top: var(--spc-3); padding-bottom: var(--spc-3); } .p-3 { padding: var(--spc-3); }
    .ph-4 { padding-left: var(--spc-4); padding-right: var(--spc-4); } .pv-4 { padding-top: var(--spc-4); padding-bottom: var(--spc-4); } .p-4 { padding: var(--spc-4); }
    .ph-5 { padding-left: var(--spc-5); padding-right: var(--spc-5); } .pv-5 { padding-top: var(--spc-5); padding-bottom: var(--spc-5); } .p-5 { padding: var(--spc-5); }
    .ph-6 { padding-left: var(--spc-6); padding-right: var(--spc-6); } .pv-6 { padding-top: var(--spc-6); padding-bottom: var(--spc-6); } .p-6 { padding: var(--spc-6); }
    .ph-7 { padding-left: var(--spc-7); padding-right: var(--spc-7); } .pv-7 { padding-top: var(--spc-7); padding-bottom: var(--spc-7); } .p-7 { padding: var(--spc-7); }
    .ph-8 { padding-left: var(--spc-8); padding-right: var(--spc-8); } .pv-8 { padding-top: var(--spc-8); padding-bottom: var(--spc-8); } .p-8 { padding: var(--spc-8); }
    .ph-9 { padding-left: var(--spc-9); padding-right: var(--spc-9); } .pv-9 { padding-top: var(--spc-9); padding-bottom: var(--spc-9); } .p-9 { padding: var(--spc-9); }

    .gv-0 { row-gap: var(--spc-0); } .gh-0 { column-gap: var(--spc-0); } .g-0 { gap: var(--spc-0); }
    .gv-1 { row-gap: var(--spc-1); } .gh-1 { column-gap: var(--spc-1); } .g-1 { gap: var(--spc-1); }
    .gv-2 { row-gap: var(--spc-2); } .gh-2 { column-gap: var(--spc-2); } .g-2 { gap: var(--spc-2); }
    .gv-3 { row-gap: var(--spc-3); } .gh-3 { column-gap: var(--spc-3); } .g-3 { gap: var(--spc-3); }
    .gv-4 { row-gap: var(--spc-4); } .gh-4 { column-gap: var(--spc-4); } .g-4 { gap: var(--spc-4); }
    .gv-5 { row-gap: var(--spc-5); } .gh-5 { column-gap: var(--spc-5); } .g-5 { gap: var(--spc-5); }
    .gv-6 { row-gap: var(--spc-6); } .gh-6 { column-gap: var(--spc-6); } .g-6 { gap: var(--spc-6); }
    .gv-7 { row-gap: var(--spc-7); } .gh-7 { column-gap: var(--spc-7); } .g-7 { gap: var(--spc-7); }
    .gv-8 { row-gap: var(--spc-8); } .gh-8 { column-gap: var(--spc-8); } .g-8 { gap: var(--spc-8); }
    .gv-9 { row-gap: var(--spc-9); } .gh-9 { column-gap: var(--spc-9); } .g-9 { gap: var(--spc-9); }
/**/

/* Responsive */
    .co-12 { width: var(--co-12); }
    .co-11 { width: var(--co-11); }
    .co-10 { width: var(--co-10); }
    .co-09 { width: var(--co-09);  }
    .co-08 { width: var(--co-08);  }
    .co-07 { width: var(--co-07);  }
    .co-06 { width: var(--co-06);  }
    .co-05 { width: var(--co-05);  }
    .co-04 { width: var(--co-04);  }
    .co-03 { width: var(--co-03);  }
    .co-02 { width: var(--co-02);  }
    .co-01 { width: var(--co-01);  }
    .co-auto { flex: 0 0 auto; width: auto; }

    @media only screen and (min-width: 1536px)
    {
        html { font-size: var(--font-size); }
        .mwc { max-width: 1440px; column-gap: var(--spc-7); }
    }
    
    @media only screen and (max-width: 1536px)
    {
        html { font-size: var(--font-size); }
        .mwc { max-width: 90vw; column-gap: var(--spc-7); }

        .co-12 { width: var(--co-12); }
        .co-11 { width: var(--co-11); }
        .co-10 { width: var(--co-10); }
        .co-09 { width: var(--co-09);  }
        .co-08 { width: var(--co-08);  }
        .co-07 { width: var(--co-07);  }
        .co-06 { width: var(--co-06);  }
        .co-05 { width: var(--co-05);  }
        .co-04 { width: var(--co-04);  }
        .co-03 { width: var(--co-03);  }
        .co-02 { width: var(--co-02);  }
        .co-01 { width: var(--co-01);  }
        .co-auto { flex: 0 0 auto; width: auto; }
    }
/**/