/*
    when we get dask and light:
    @import url(/css/light.css) (prefers-color-scheme: light);
    @import url(/css/dark.css) (prefers-color-scheme: dark);
    @import url(/css/light.css);
    */
    @import url(/css/light.css) (prefers-color-scheme: light);
    @import url(/css/dark.css) (prefers-color-scheme: dark);

    html, body {
        margin: 0;
    }

    :root {
        --md-ref-typeface-brand: 'Roboto Flex', 'Be Vietnam Pro', sans-serif;
        --md-ref-typeface-plain: 'Roboto Flex', 'Be Vietnam Pro', sans-serif;

        font-family: var(--md-ref-typeface-plain);
        font-size: 14px;

        background: var(--md-sys-color-background);
        color: var(--md-sys-color-on-background);
    }

    .main-header {
        a: var(--md-sys-color-primary);
    }
    @media (width < 600px){
        .logo {
            width: 80px;
        }
    }
    @media (width >= 600px){
        .logo {
            
        }
    }

    .main-footer {
        background: var(--md-sys-color-surface);
        color: var(--md-sys-color-on-surface);
        margin-top: 64px;
    }
    .main-footer .link {
        font-size: 16px;
    }

    
    
.banner {
    --lqd-color-link: #5b7bfb;
    --lqd-color-link-hover: #181b31;
    --lqd-body-letter-spacing: ;
    --lqd-secondary-font-family: ;
    --lqd-secondary-font-size: ;
    --lqd-secondary-line-height: ;
    --lqd-secondary-font-weight: ;
    --lqd-secondary-text-color: ;
    --lqd-accent-font-weight: ;
    --lqd-accent-text-color: ;
    --lqd-heading-text-transform: ;
    --lqd-heading-letter-spacing: ;
    --lqd-sticky-header-height: 0px;
    --lqd-sticky-header-sentinel-top: 100%;
    --lqd-sticky-header-placeholder-height: 80px;
    --lqd-snickersbar-animation-time: 1.2s;
    --lqd-snickersbar-stay-time: 4s;
    --lqd-cc-bc: var(--lqd-color-primary);
    --lqd-cc-size-outer: 35px;
    --lqd-cc-bw: 1px;
    --lqd-cc-br: calc(var(--lqd-cc-size-outer) / 2);
    --lqd-cc-active-circle-color: #fff;
    --lqd-cc-active-arrow-color: #fff;
    --lqd-z-index: 20;
    --lqd-top-scroll-ind-height: 0;
    --frame-width: 20px;
    --lqd-container-width: 1060px;
    --lqd-container-width-md: 100%;
    --lqd-container-width-sm: 100%;
    --lqd-row-gutter-x: 0;
    --lqd-row-gutter-y: 0;
    --lqd-color-primary: #675DE1;
    --lqd-color-secondary: #6BCD94;
    --lqd-color-dark: #292929;
    --lqd-color-purple-500: #8745D5;
    --lqd-color-blue-500: #007fff;
    --lqd-color-blue-600: #354B60;
    --lqd-color-blue-700: #032A3E;
    --lqd-color-blue-900: #282734;
    --lqd-color-brown-300: #F5DBB8;
    --lqd-color-brown-500: #A25139;
    --lqd-color-green-300: #82B541;
    --lqd-color-green-400: #84F0B2;
    --lqd-color-green-500: #49C193;
    --lqd-color-green-700: #26372D;
    --lqd-color-slate-100: rgba(110, 127, 153, 0.1);
    --lqd-color-slate-200: #b4b6c6;
    --lqd-color-slate-300: #9999A3;
    --lqd-color-slate-400: #6e7f99;
    --lqd-color-slate-500: rgba(69, 67, 113, 0.58);
    --lqd-color-slate-600: #61969D;
    --lqd-color-slate-700: #45485F;
    --lqd-color-orange: #ed6a04;
    --lqd-badge-color: #6E7F99;
    --lqd-color-gradient-start: var(--lqd-color-purple-500);
    --lqd-color-gradient-stop: var(--lqd-color-green-500);
    --lqd-color-orange-100: rgba(196, 116, 66, 0.15);
    --lqd-color-green-100: rgba(66, 196, 106, 0.2);
    --lqd-color-purple-100: rgba(142, 114, 235, 0.17);
    --lqd-color-yellow-100: rgba(249, 223, 104, 0.22);
    --lqd-color-pink-100: rgba(196, 66, 132, 0.15);
    --lqd-color-blue-100: rgba(47, 178, 187, 0.22);
    --lqd-body-text-color: #3C4B62;
    --lqd-body-font-family: 'Roboto Flex', sans-serif;
    --lqd-body-font-size: 14px;
    --lqd-body-font-weight: 400;
    --lqd-body-line-height: 1.35em;
    --lqd-accent-font-family: 'Rubik', sans-serif;
    --lqd-accent-font-size: 16px;
    --lqd-accent-line-height: 2em;
    --lqd-heading-color: var(--lqd-color-blue-900);
    --lqd-heading-font-family: var(--lqd-body-font-family);
    --lqd-h1-font-size: 40px;
    --lqd-heading-font-weight: 700;
    --lqd-heading-line-height: 1em;
    --lqd-h1-letter-spacing: -1.5px;
    --lqd-h2-font-size: 36px;
    --lqd-h2-letter-spacing: -1.5px;
    --lqd-h3-font-size: 32px;
    --lqd-h4-font-size: 25px;
    --lqd-h5-font-size: 21px;
    --lqd-h6-font-size: 18px;
    --lqd-cc-size-inner: 17px;
    --lqd-cc-bg: rgb(255, 255, 255);
    --lqd-cc-active-bw: 1px;
    --lqd-cc-active-bg: rgb(255, 251, 251);
    --lqd-cc-active-bc: rgb(255, 251, 251);
    --lqd-cc-active-circle-txt: rgb(255, 251, 251);
    --lqd-cc-blend-mode: difference;
    --md-sys-color-primary: rgb(30 101 134);
    --md-sys-color-surface-tint: rgb(30 101 134);
    --md-sys-color-on-primary: rgb(255 255 255);
    --md-sys-color-primary-container: rgb(197 231 255);
    --md-sys-color-on-primary-container: rgb(0 30 45);
    --md-sys-color-secondary: rgb(41 106 71);
    --md-sys-color-on-secondary: rgb(255 255 255);
    --md-sys-color-secondary-container: rgb(174 242 197);
    --md-sys-color-on-secondary-container: rgb(0 33 17);
    --md-sys-color-tertiary: rgb(97 90 124);
    --md-sys-color-on-tertiary: rgb(255 255 255);
    --md-sys-color-tertiary-container: rgb(231 222 255);
    --md-sys-color-on-tertiary-container: rgb(29 23 53);
    --md-sys-color-error: rgb(186 26 26);
    --md-sys-color-on-error: rgb(255 255 255);
    --md-sys-color-error-container: rgb(255 218 214);
    --md-sys-color-on-error-container: rgb(65 0 2);
    --md-sys-color-background: rgb(246 250 254);
    --md-sys-color-on-background: rgb(24 28 31);
    --md-sys-color-surface: rgb(246 250 254);
    --md-sys-color-on-surface: rgb(24 28 31);
    --md-sys-color-surface-variant: rgb(221 227 234);
    --md-sys-color-on-surface-variant: rgb(65 72 77);
    --md-sys-color-outline: rgb(113 120 126);
    --md-sys-color-outline-variant: rgb(193 199 205);
    --md-sys-color-shadow: rgb(0 0 0);
    --md-sys-color-scrim: rgb(0 0 0);
    --md-sys-color-inverse-surface: rgb(44 49 52);
    --md-sys-color-inverse-on-surface: rgb(237 241 245);
    --md-sys-color-inverse-primary: rgb(144 206 244);
    --md-sys-color-primary-fixed: rgb(197 231 255);
    --md-sys-color-on-primary-fixed: rgb(0 30 45);
    --md-sys-color-primary-fixed-dim: rgb(144 206 244);
    --md-sys-color-on-primary-fixed-variant: rgb(0 76 106);
    --md-sys-color-secondary-fixed: rgb(174 242 197);
    --md-sys-color-on-secondary-fixed: rgb(0 33 17);
    --md-sys-color-secondary-fixed-dim: rgb(147 213 171);
    --md-sys-color-on-secondary-fixed-variant: rgb(8 81 49);
    --md-sys-color-tertiary-fixed: rgb(231 222 255);
    --md-sys-color-on-tertiary-fixed: rgb(29 23 53);
    --md-sys-color-tertiary-fixed-dim: rgb(203 193 233);
    --md-sys-color-on-tertiary-fixed-variant: rgb(73 66 99);
    --md-sys-color-surface-dim: rgb(215 218 223);
    --md-sys-color-surface-bright: rgb(246 250 254);
    --md-sys-color-surface-container-lowest: rgb(254 254 254);
    --md-sys-color-surface-container-low: rgb(240 244 248);
    --md-sys-color-surface-container: rgb(235 238 243);
    --md-sys-color-surface-container-high: rgb(229 232 237);
    --md-sys-color-surface-container-highest: rgb(223 227 231);
    --md-ref-typeface-brand: 'Roboto Flex', 'Be Vietnam Pro', sans-serif;
    --md-ref-typeface-plain: 'Roboto Flex', 'Be Vietnam Pro', sans-serif;
    --aa-search-input-height: 44px;
    --aa-input-icon-size: 20px;
    --aa-base-unit: 16;
    --aa-spacing-factor: 1;
    --aa-spacing: calc(var(--aa-base-unit)*var(--aa-spacing-factor)*1px);
    --aa-spacing-half: calc(var(--aa-spacing)/2);
    --aa-panel-max-height: 650px;
    --aa-base-z-index: 9999;
    --aa-font-size: calc(var(--aa-base-unit)*1px);
    --aa-font-family: inherit;
    --aa-font-weight-medium: 500;
    --aa-font-weight-semibold: 600;
    --aa-font-weight-bold: 700;
    --aa-icon-size: 20px;
    --aa-icon-stroke-width: 1.6;
    --aa-icon-color-rgb: 119,119,163;
    --aa-icon-color-alpha: 1;
    --aa-action-icon-size: 20px;
    --aa-text-color-rgb: 38,38,39;
    --aa-text-color-alpha: 1;
    --aa-primary-color-rgb: 62,52,211;
    --aa-primary-color-alpha: 0.2;
    --aa-muted-color-rgb: 128,126,163;
    --aa-muted-color-alpha: 0.6;
    --aa-panel-border-color-rgb: 128,126,163;
    --aa-panel-border-color-alpha: 0.3;
    --aa-input-border-color-rgb: 128,126,163;
    --aa-input-border-color-alpha: 0.8;
    --aa-background-color-rgb: 255,255,255;
    --aa-background-color-alpha: 1;
    --aa-input-background-color-rgb: 255,255,255;
    --aa-input-background-color-alpha: 1;
    --aa-selected-color-rgb: 179,173,214;
    --aa-selected-color-alpha: 0.205;
    --aa-description-highlight-background-color-rgb: 245,223,77;
    --aa-description-highlight-background-color-alpha: 0.5;
    --aa-detached-media-query: (max-width:680px);
    --aa-detached-modal-media-query: (min-width:680px);
    --aa-detached-modal-max-width: 680px;
    --aa-detached-modal-max-height: 500px;
    --aa-overlay-color-rgb: 115,114,129;
    --aa-overlay-color-alpha: 0.4;
    --aa-panel-shadow: 0 0 0 1px rgba(35,38,59,0.1),0 6px 16px -4px rgba(35,38,59,0.15);
    --aa-scrollbar-width: 13px;
    --aa-scrollbar-track-background-color-rgb: 234,234,234;
    --aa-scrollbar-track-background-color-alpha: 1;
    --aa-scrollbar-thumb-background-color-rgb: var(--aa-background-color-rgb);
    --aa-scrollbar-thumb-background-color-alpha: 1;
    font-family: var(--lqd-body-font-family);
    font-size: var(--lqd-body-font-size);
    font-weight: var(--lqd-body-font-weight);
    letter-spacing: var(--lqd-body-letter-spacing);
    color: var(--lqd-body-text-color);
    -webkit-font-smoothing: antialiased;
    box-sizing: border-box;
    position: relative;
    flex-direction: column;
    align-items: center;
    background-position: center center;
    background-size: cover;
    border-radius: 30px;
    box-shadow: 0 45px 45px 0 rgba(49,89,118,.22);
    display: flex;
    padding: 7% 0;
    background-image: url(/assets/images/demo/start-hub-4/banner.jpg);
}

.banner-text {
    font-size: larger; 
    color: white;
}

@media (width < 600px) {
    .banner-text {
        font-size: 16px; 
    }
}


    

a {
    color: var(--md-sys-color-primary);
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

.max-width {
    max-width: 1240px;
}

.grid {
    display: grid;
}

.flex {
    display: flex;
}

.flexw {
    display: flex;
    flex-wrap: wrap;
}

/* responsive flex */
.flexr {
    display: flex;
}

@media (width < 600px) {
    .flexr {
        flex-wrap: wrap;
    }
    .mobile {
        display: block;
    }
    .expanded {
        display: none;
    }
}
@media (width >= 600px) {
    .mobile {
        display: none;    
    }
    .expanded {
        display: block;
    }
}

.f1 {
    flex: 1;
}

@media (min-width: 600px) and (max-width: 839px) {
    
}

@media (max-width: 839px) {
    .gt-expanded {
        display: none;
    }
}

@media (min-width: 840px) {
    .gt-expanded {
        display: block;
    }
}

/* Don't think this actually works as intended, center has to be a child for this to work 
:is(.flex, .flexr, .flexw) :is(.center) {
    */
.flex.center {
    justify-content: center;
    align-items: center;
}

.w100 {
    width: 100%;
}

.jc {
    justify-content: center;
}
.jcc {
    justify-content: center;
}
.jsb {
    justify-content: space-between;
}
.jcsb {
    justify-content: space-between;
}
.je {
    justify-content: end;
}
.jce {
    justify-content: end;
}
.jcse {
    justify-content: space-evenly;
}
.ac, .aic {
    align-items: center;
}
.ae, .aie {
    align-items: end;
}

img.center {
    margin: 0 auto;
    display: block;
}

.col {
    flex-direction: column;
}

.g8 {
    gap: 8px;
}

.g12 {
    gap: 12px;
}
.g16 {
    gap: 16px;
}
.g20 {
    gap: 20px;
}
.g24 {
    gap: 24px;
}
.g32 {
    gap: 32px;
}
.g48 {
    gap: 48px;
}

.mt8 {
    margin-top: 8px;
}
.mt12 {
    margin-top: 12px;
}
.mt16 {
    margin-top: 16px;
}
.mt20 {
    margin-top: 20px;
}
.mt24 {
    margin-top: 24px;
}
.mb8{
    margin-bottom: 8px;
}
.mb12 {
    margin-bottom: 12px;
}
.mb16 {
    margin-bottom: 16px;
}
.mb20 {
    margin-bottom: 20px;
}
.mb24 {
    margin-bottom: 24px;
}

.p4 {
    padding: 4px;
}
.p8 {
    padding: 8px;
}
.p12 {
    padding: 12px;
}
.p16 {
    padding: 16px;
}
.p20 {
    padding: 20px;
}
.p24 {
    padding: 24px;
}
.p48 {
    padding: 48px;
}

.pt12 {
    padding-top: 12px;
}
.pt16 {
    padding-top: 16px;
}
.pt20{
    padding-top: 20px;
}
.pt24 {
    padding-top: 24px;
}
.pr8 {
    padding-right: 8px;
}
.pr12 {
    padding-right: 12px;
}

/* THEME STUFF */
.surface {
    background-color: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
}

.surface-variant {
    background-color: var(--md-sys-color-surface-variant); 
    color: var(--md-sys-color-on-surface-variant);
}

.sold_out {
    top: 2em;
    left: -4em;
    color: #fff;
    display: block;
    position:absolute;
    text-align: center;
    text-decoration: none;
    letter-spacing: .06em;
    background-color: #A00;
    padding: 0.5em 5em 0.4em 5em;
    text-shadow: 0 0 0.75em #444;
    box-shadow: 0 0 0.5em rgba(0,0,0,0.5);
    font: bold 16px/1.2em Arial, Sans-Serif;
    -webkit-text-shadow: 0 0 0.75em #444;
    -webkit-box-shadow: 0 0 0.5em rgba(0,0,0,0.5);
    -webkit-transform: rotate(-45deg) scale(0.75,1);
    z-index:10;
}
.sold_out:before {
    content: '';
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    margin: -0.3em -5em;
    transform: scale(0.7);
    -webkit-transform: scale(0.7);
    border: 2px rgba(255,255,255,0.7) dashed;
}
.storeImage {
    border-radius: 8px;
    border: 1px solid silver;
}
.center {
    display: flex;
    justify-content: center;
    align-items: center;
}
.icon-with-badge {
    position: relative;
    display: inline-block;
}
.badge {
    position: absolute;
    top: -6px;
    right: 3px;
    display: inline-block;
    padding: 0.25em 0.4em;
    font-size: 0.75em;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 50%;
    background-color: #f44336; /* Red background */
}

.card{
    border: 1px solid var(--md-sys-color-outline);
    border-radius: 8px;
}

.uppercase {
    text-transform: uppercase;
}

.text-center {
    text-align: center;
}


    .title-large {
        font-weight: 400;
        font-size: 22px;
        line-height: 28px;
    }
    .title-medium {
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
        letter-spacing: 0.15px;
    }
    .title-small {
        font-weight: 500;
        font-size: 14px;
        line-height: 20px;
        letter-spacing: 0.1px;
    }