/* Project Variables */

    :root {
        --primary-0: #D3D9DA; 
        --primary-1: #C4CCCD; 
        --primary-2: #B5BEC0; 
        --primary-3: #545D60; 
        --primary-4: #454E52; 
        --primary-5: #353E43; 
        --primary-6: #252E35; 
        --primary-7: #151E26; 
        --primary-8: #10181E; 
        --primary-9: #0A1115;

        --neutral-1: #F5F5F5; 
        --neutral-3: #EBEBEB; 
        --neutral-5: #DFDFDF; 
        --neutral-7: #CCC; 
        --neutral-9: #B8B8B8;

        --accent-red-1: #E56182;    --accent-brown-1: #AC825D;
        --accent-red-3: #E03E66;    --accent-brown-3: #7B5D44;
        --accent-red-5: #C8214C;    --accent-brown-5: #4A382A;
        --accent-red-7: #8C1734;    --accent-brown-7: #1F160D;
        --accent-red-9: #460B1A;    --accent-brown-9: #0E0A06;

        --inf-3: #45D6F4;   --wrn-3: #FFF4AD;   --scs-3: #62DB98;   --error-3: #E25B4F; 
        --inf-5: #0AAACC;   --wrn-5: #FFE64D;   --scs-5: #1FCC6C;   --error-5: #B3271B; 
        --inf-7: #208398;   --wrn-7: #F5D400;   --scs-7: #168F4C;   --error-7: #8D2219;

        --faction-legion-3: #70FFEC;    --faction-order-3: #FFC999;    --faction-conclave-3: #5CE1FF;   --faction-primal-3: #FF7083;
        --faction-legion-5: #00FFDF;    --faction-order-5: #FFB16D;    --faction-conclave-5: #00C3F1;   --faction-primal-5: #FF455F;
        --faction-legion-7: #00B89F;    --faction-order-7: #FF871F;    --faction-conclave-7: #0096B8;   --faction-primal-7: #FF1F3D;

        --hover-transparency: rgba(211, 217, 218, 0.10);

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

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

        --font-size: 20px;
    }

    @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: 'Arkship'; src: url('../fonts/Arkship.TTF') format('truetype'); font-weight: normal; font-style: normal; }

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

    .ellipsis { overflow: hidden; text-overflow: ellipsis; }

    .xxs-letter-spc { letter-spacing: 0.012rem; }
    .xs-letter-spc { letter-spacing: 0.014rem; }
    .sm-letter-spc { letter-spacing: 0.016rem; }
    .md-letter-spc { letter-spacing: 0.018rem; }
/**/

/* Structure */
    html { padding: 0px; margin: 0px; scroll-behavior: smooth; }
    body { padding: 0px; margin: 0px; scroll-behavior: smooth; }
    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; }

    input:focus { border: none; outline: none; }
    a { color: unset; }
    
    *::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; }

    .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; }

    .grow { flex-grow: 1; }

    .scrnw-100 { width:  100vw; }       .min-scrnw-100 { min-width:  100vw; }       .max-scrnw-100 { max-width:  100vw; }
    .scrnw-75 { width:  75vw; }         .min-scrnw-75 { min-width:  75vw; }         .max-scrnw-75 { max-width:  75vw; }
    .scrnw-50 { width:  50vw; }         .minscrnw-50 { min-width:  50vw; }          .max-scrnw-50 { max-width:  50vw; }
    .scrnw-25 { width:  25vw; }         .min-scrnw-25 { min-width:  25vw; }         .max-scrnw-25 { max-width:  25vw; }

    .scrnh-100 { height: 100vh; }       .min-scrnh-100 { min-height: 100vh; }       .max-scrnh-100 { max-height: 100vh; }
    .scrnh-75 { height: 75vh; }         .min-scrnh-75 { min-height: 75vh; }         .max-scrnh-75 { max-height: 75vh; }
    .scrnh-50 { height: 50vh; }         .min-scrnh-50 { min-height: 50vh; }         .max-scrnh-50 { max-height: 50vh; }
    .scrnh-25 { height: 25vh; }         .min-scrnh-25 { min-height: 25vh; }         .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; }
    .halfw { width: 50%;  }
    .samew > * { flex: 1; }

    .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; }
    .mainMenuSpacing { padding-top: 4.25rem; }

    .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 slideOutRight { 0% { transform: translateX(0); } 100% { transform: translateX(100%); } }
    @keyframes slideInLeft { 0% { transform: translateX(-100%); } 100% { transform: translateX(0); } }
    @keyframes slideInRight { 0% { transform: translateX(100%); } 100% { transform: translateX(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; }
    .slideOutRight { animation: slideOutRight 0.5s forwards; }
    .slideInLeft { animation: slideInLeft 0.5s forwards; }
    .slideInRight { animation: slideInRight 0.5s 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; }

    /**/

    .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);  }

    @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);  }
    }
/**/