@font-face{
    font-family: "Material Icons";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/materialicons/v38/flUhRq6tzZclQEJ-Vdg-IuiaDsNY.eot) format("eot"), url(https://fonts.gstatic.com/s/materialicons/v38/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format("woff2"), url(https://fonts.gstatic.com/s/materialicons/v38/flUhRq6tzZclQEJ-Vdg-IuiaDsNa.woff) format("woff"), url(https://fonts.gstatic.com/s/materialicons/v38/flUhRq6tzZclQEJ-Vdg-IuiaDsNZ.ttf) format("ttf");
    font-feature-settings: "liga";
}

/* ---- Design tokens (only variables referenced by the classes below) ---- */
:root {
    --f-heading-2xl: 6rem;
    --f-heading-xl: 4rem;
    --f-heading-lg: 2.5rem;
    --f-heading-md: 2rem;
    --f-heading-sm: 1.25rem;
    --f-heading-xs: 1.125rem;
    --f-body-md: 1rem;
    --f-body-sm: 0.75rem;
    --f-body-lg: 1.25rem;

    /*site styles - spaces */
    --f-space-2xl: 12rem;
    --f-space-xl: 8rem;
    --f-space-lg: 4rem;
    --f-space-md: 2rem;
    --f-space-sm: 1.5rem;
    --f-space-xs: 0.75rem;
    --f-space-2xs: 0.25rem;

    --f-section: 3rem;

    --f-radius-lg:2rem;
    --f-radius-default: 0.75rem;

    --f-row-width-01: 1420px;
    --f-trans-default: 0.2s;

    /* header height (not including padding) */
    --f-header-height: 4.75rem;
    --f-header-height-scroll: 4rem;
    --f-banner-height: 40px;

    --f-color-border: #aaa;
}

/* headings ans spacings responsive */
@media screen and (max-width:1441px){

    :root{
        --f-heading-2xl: 5.5rem;
        --f-heading-xl: 3rem;
        --f-heading-lg: 2.25rem;
        --f-heading-md: 1.5rem;
        --f-space-2xl: 11rem;
        --f-space-xl: 6rem;
        --f-section: 2rem;
    }
}
@media screen and (max-width:1024px){

    :root{
        --f-heading-2xl: 4rem;
        --f-heading-lg: 2rem;
        --f-heading-md: 1.5rem;
        --f-heading-sm: 1.125rem;
        --f-heading-xs: 0.9rem;
        --f-space-2xl: 10rem;
        --f-space-xl: 5rem;
        --f-header-height: 4.5rem;
        --f-header-height-scroll: 3.75rem;
        --f-radius-lg:1.75rem;
        --f-section: 2rem;
    }
}

@media screen and (max-width: 767px){
    :root{
        --f-heading-2xl: 2.5rem;
        --f-heading-xl: 2rem;
        --f-heading-lg: 1.75rem;
        --f-heading-md: 1.25rem;
        --f-body-lg: 1.1rem;
        --f-body-md: 1.0rem;
        --f-body-sm: 0.8rem;
        --f-space-2xl: 6rem;
        --f-space-xl: 4rem;
        --f-space-lg:2.5rem;
        --f-space-md: 1.5rem;
        --f-space-sm: 1rem;
        --f-space-xs: 0.5rem;
        --f-header-height: 2.8rem;
        --f-header-height-scroll: 2.3rem;
        --f-radius-lg:1rem;
    }
}

#event_builder {
    .grid .span-2{
        grid-column: span 2;
    }
    .grid .span-1{
        grid-column: span 1;
    }
    .form-container{
        overflow:hidden;
    }
    #event_form{
        display:flex;
        flex-direction:row;
        flex-wrap: nowrap;
        transition: transform 300ms ease-out;
    }
    .form-wrap{
        min-width:100%;
        /*padding:var(--f-space-2xs);*/
    }
    .day-accordion-wrapper{
        transition: all 250ms;
    }
    .day-accordion-wrapper .day-accordion-title{
        display:flex;
        flex-direction: row;
        justify-content: space-between;
        gap:var(--f-space-sm);
    }
    .day-accordion-wrapper .day-accordion-control{
        max-width:fit-content;
        transition: transform 250ms ease-in;
    }
    .day-accordion-wrapper .day-accordion-content{
        display: grid; 
        grid-template-rows: 0fr; 
        overflow: hidden; 
        transition: grid-template-rows 250ms ease-out;
    }
    .day-accordion-wrapper .day-accordion-content .day-content{
        min-height: 0; 
        visibility: hidden; 
        transition: var(--f-trans-default);
    }
    .day-accordion-wrapper{
        padding:var(--f-space-sm);
        background-color: var(--color-primary-alt);
        border-radius: var(--f-radius-default);
        border: 1px solid var(--f-color-border);
    }
    .day-accordion-wrapper.active .day-accordion-content{
        grid-template-rows: 1fr;
    }
    .day-accordion-wrapper.active .day-accordion-content .day-content{
        visibility: visible;
    }
    .day-accordion-wrapper.active .day-accordion-control{
        transform: rotate(45deg);
    }
    .textarea{
        background-color: var(--color-bg, var(--color-content-bg, transparent));
        color:var(--color-body-text);
        border-radius:var(--f-radius-default);
        resize: vertical;
        min-height: var(--f-space-2xl);
        caret-color: var(--color-secondary);
    }
    .textarea.small{
        min-height: var(--f-space-lg);
    }
    .nextBtn.disabled, .submitBtn.disabled{
        pointer-events: none;
        cursor:not-allowed;
        filter:grayscale(90%);
        opacity: 60%;
    }
    .day-wrapper{
        margin-bottom: var(--f-space-sm);
    }
    .day-wrapper:last-of-type{
        margin-bottom:0;
    }
    .form-wrap{
        height:0;
    }
    .form-wrap.active{
        height:fit-content;
    }
    .day-divider{
        height:1px; 
        width:100%; 
        background:#a3a3a3"
    }
    .day-divider:last-of-type{
        display:none
    }
    #img-wrapper{
        text-align: left;
    }
    #img-wrapper img{
        opacity:0%;
        transition: all 250ms ease-in-out;
    }
    #img-wrapper img.active{
        opacity:100%;
    }
    .summary-text{
        text-align: right;
        text-wrap:balance;
    }
    #recapWrapper .editInfo,
    #recapWrapper .editActs,
    #recapWrapper .editExtras{
        display:none;
    }
    @media screen and (max-width:767px) {
        .grid .span-2{
            grid-column: span 1;
        }
    }

    /* --f--- Layout & utility classes (from styles.css) --f--- */
    .object-cover {
        object-fit: cover;
    }

    .w-100 {
        width:100%;
    }

    .h-100 {
        height:100%;
    }

    .relative {
        position: relative;
    }

    .absolute {
        position: absolute;
    }

    .flex-col {
        flex-direction: column;
        display: flex;
    }

    .flex-row {
        flex-direction: row;
        display: flex;
    }

    .justify-center {justify-content: center;}

    .justify-space-between {justify-content: space-between;}

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

    .align-start {align-items: flex-start;}

    .align-self-end {align-self: flex-end;}

    .flex-grow-1 {flex-grow: 1;}

    .grid {display: grid;}

    .cols-1-1 {grid-template-columns: 1fr 1fr;}

    .italic {font-style: italic;}

    .circle {border-radius: 50%; aspect-ratio: 1;}

    .rounded-lg {border-radius: var(--f-radius-lg);}

    .rounded {border-radius: var(--f-radius-default);}

    .overflow-hidden {overflow:hidden;}

    .pointer {cursor: pointer;}

    @media screen and (max-width:1024px) {
    .flex-row.tab-cols-1 {flex-direction: column;}
    }

    @media screen and (max-width:1024px) {
    .tab-cols-1 {grid-template-columns: 1fr;}
    }

    @media screen and (max-width: 767px) {
    .flex-row.mob-cols-1 {flex-direction: column;}
    }

    @media screen and (max-width: 767px) {
    .mob-cols-1 {grid-template-columns: 1fr;}
    }

    .ml-xs {margin-left:var(--f-space-xs);}

    .mb-sm {margin-bottom:var(--f-space-sm);}

    .p-sm {padding:var(--f-space-sm);}

    .p-xs {padding:var(--f-space-xs);}

    .px-sm {padding-left:var(--f-space-sm); padding-right:var(--f-space-sm)}

    .px-xs {padding-left:var(--f-space-xs); padding-right:var(--f-space-xs)}

    .py-xs {padding-top:var(--f-space-xs); padding-bottom:var(--f-space-xs)}

    .py-2xs {padding-top:var(--f-space-2xs); padding-bottom:var(--f-space-2xs)}

    .py-sec {padding-top:var(--section, var(--f-section)); padding-bottom:var(--section, var(--f-section))}

    .pr-xs {padding-right:var(--f-space-xs);}

    .pb-sm {padding-bottom:var(--f-space-sm);}

    .gap-xl {gap: var(--f-space-xl);}

    .gap-lg {gap: var(--f-space-lg);}

    .gap-sm {gap: var(--f-space-sm);}
    .row-gap-sm{row-gap: var(--f-space-sm);}
    .col-gap-sm{column-gap: var(--f-space-sm);}

    .gap-xs {gap: var(--f-space-xs);}
    .row-gap-xs{row-gap: var(--f-space-xs);}
    .col-gap-xs{column-gap: var(--f-space-xs);}

    .gap-2xs {gap: var(--f-space-2xs);}

    .heading {
        color: var(--color-heading-text); 
        text-transform: uppercase;
        line-height: 1;
        text-align: left !important;
    }

    .icn{
        font-family: 'Material Icons' !important;
        font-weight: normal !important;
        font-feature-settings: liga;
        text-transform: initial;
        text-indent: 0 !important;
        overflow: hidden;
        text-align: left !important;
    }
    .icn.lg {height:var(--f-heading-lg);min-width: fit-content;}

    .icn.md {height:var(--f-heading-md);min-width: fit-content;}

    .icn.sm {height:var(--f-heading-sm);min-width: fit-content;}

    .icn.xs {height:var(--f-heading-xs);min-width: fit-content;}

    .heading.lg, .text-lg, .icn.lg {font-size: var(--f-heading-lg);}

    .heading.md, .text-md, .icn.md {font-size: var(--f-heading-md);}

    .heading.sm, .text-sm, .icn.sm {font-size: var(--f-heading-sm);}

    .heading.xs, .text-xs, .icn.xs {font-size: var(--f-heading-xs);}

    .body-text {
        text-transform: none;
        font-size: var(--f-body-md);
        margin:0;
        line-height:140%;
        text-align: left !important;
    }
    .body-text-lg {
        text-transform: none;
        font-size: var(--f-body-lg);
        line-height:140%;
        text-align: left !important;
    }
    .heading.lg, .heading.md, .heading.sm, .heading.xs {
        font-weight: 500;
        margin:0 !important;
    }
    .heading.mid-weight {font-weight:600;}
    .heading.bold {font-weight:900;}
    .h1.h, p, span{
        margin:0 !important;
    }

    .rw01 {max-width: var(--f-row-width-01); margin-left: auto; margin-right: auto;}

    .bg-content {background-color: var(--color-bg);}

    .bg-content-alt {background-color: var(--color-bg-alt);}

    .color-accent, .heading.color-accent {color: var(--color-accent-text);}

    .border {border:solid 1px var(--f-color-border);}

    .scroll-to {scroll-margin-top: calc(var(--f-space-xl) + var(--f-banner-height))}

    .square {aspect-ratio: 1/1;}

    a {color: var(--color-link-text); transition: var(--f-trans-default); text-decoration: none;}

    p a:hover {color: var(--color-link-text-hover);}

    @media screen and (max-width:1024px) {
    .tab-hide {display:none !important}
    }

    section, .row {position:relative;}

    input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {-webkit-appearance: none;
        margin: 0;}

    #sort-by:focus-visible, #cntryLinks:focus-visible {outline: none;}

    #sort-by, #cntryLinks, .select_dropdown {border:none;
        appearance: none;
        padding-right:18px;
        -webkit-appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right center;}

    .select_dropdown {background-position: 98% center;}
    #event-destination{
        border:0px;
        margin-right: var(--f-space-sm);
    }

    /* --f--- Buttons, inputs & theme-specific overrides (from colour-scheme-light.css) --f--- */
    .formError{
        box-shadow: inset 0px 0px 0px 1px red !important;
        border: solid 1px red !important;
    }
    .buttonBlocker{
        cursor:not-allowed;
    }
    .btn {
        padding: var(--f-space-xs) var(--f-space-md);
        margin:4px;
        transition: all 0ms;
    }
    .button{padding:0; cursor:auto}

    .btn.small {padding: var(--f-space-2xs) var(--f-space-xs);}

    .btn:not(.not-rounded) {border-radius: var(--f-radius-default);}

    .btn-title {
        text-transform: uppercase; 
        font-size: var(--f-heading-xs); 
        font-style: italic; 
        font-weight: 600; 
        letter-spacing: 1px; 
        text-align: center; 
        display: block; 
        transition: var(--f-trans-default);
        text-wrap:nowrap;}
    /*
    .btn.sm .btn-title {font-size: var(--f-heading-xs);}

    .btn:not(.w-100) {display: inline-block; 
        width:fit-content; 
        max-width: 100%;}

    .btn.w-100 {display: block;}

    .btn.outline {background-color:transparent;
        box-shadow:inset 0px 0px 0px 2px var(--color-accent);}

    .btn.outline .btn-title {color: var(--color-accent);}
    */
    .prevBtn{
        padding: var(--f-space-xs) 0; 
    }
    .prevBtn .btn-title{
        color: var(--color-body-text);
    }
    .cnt-sel {
        webkit-backdrop-filter: blur(13px);
        backdrop-filter: blur(13px);
        background-color: #ffffff1a;
        border: 1px solid #ffffff2e;
        transition: outline 0ms;
    }

    .cnt-sel .btn-title {color:var(--color-secondary-text); 
        transition:unset;}

    .outline {transition: outline 0ms !important;}

    /*
    @media (hover: hover) and (pointer: fine) {
    .btn:hover {outline: 2px solid var(--color-bg-accent);
            outline-offset: 2px;
            opacity:100%;}
    .cnt-sel:hover {outline: 2px solid var(--color-bg-accent);
            outline-offset: 2px;
            color:#fff;
            border: 1px solid var(--color-bg-accent)}
    .outline:hover {outline: 2px solid var(--color-bg-accent);
            outline-offset: 2px;}
    }
            */

    .btn.rounded, .button.rounded {border-radius: 10rem;}

    .search-input {width:auto;
        padding:var(--f-space-xs) var(--f-space-sm) !important;
        border-radius:10rem !important;
        border:1px solid #aaa;
        caret-color: #000000;}
}