@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');

:root {        
    --theme-bg: #212121;
    --theme-bg-75: #212121ee;
    --theme-primary: #ED1C24;
    --theme-primary-75: #ED1C24ee;
    --theme-secondary: #212121;  
    --theme-secondary-75: #ebe6d5c0;
    --theme-secondary-50: #ebe6d580;  
    --theme-secondary-25: #ebe6d540;  
    --theme-tertiary: #81625c;
    --theme-text : #fff;
    --theme-input-bg: #ffffff22;
}

body { background:var(--theme-bg); font-size:16px; }
body, h1, h2, h3 { color:var(--theme-text); }
p, label { color:var(--theme-text); font-weight: 400; }
body, p { font-family: 'DM Sans', tahoma, helvetica; }
h1 { font-family: 'DM Sans'; font-size:2.2em; font-weight: 600; }
h2, h3 {  font-family: 'DM Sans'; font-weight: 600; }
::-webkit-scrollbar-thumb { background: #00000066;}
::-webkit-scrollbar-track { background:#00000022; }

::placeholder { color: var(--theme-text); opacity: 0.5; }
::-webkit-input-placeholder { color: var(--theme-text); opacity: 0.5; }
:-moz-placeholder { color: var(--theme-text); opacity: 0.5; }
:-ms-input-placeholder { color: var(--theme-text); opacity: 0.5; }

a { color:#000; }
hr { border:0; border-top:1px solid #663a3244; }
label { text-transform: none; }
.fa-arrow-left:before { content:'\f177'; }
.fa-arrow-right:before { content:'\f178'; }
.slider { background-color: var(--theme-bg); }
.agreement h1:after { display:none; }

/* Hero */
.hero .logo, .top .logo { background-image:url('district13_white_16x10.svg'); transform:none !important; width:100%; max-width: 100% !important; height:150px; position: static; background-size: contain; background-repeat: no-repeat; background-position: center center; padding: 1em 5em;}
.hero { display:none !important; }
[name="checkout"] .hero { display:block !important; max-height: 100%; padding:0; }
.hero:before, .hero:after { display: none; }
.top { height:auto; max-height: 100% !important; padding:1em 0 !important; }

/* Datepicker */
.datepickerwrap { box-shadow: none; transition: all .2s ease-in-out; box-shadow: none; }
.datepickerwrap input { background: var(--theme-input-bg); box-shadow: none; border:none; font-size: .8em; font-weight: 600; padding: 0 60px 0 10px; border-radius: .25em; color: var(--theme-text); }
.datepickerwrap:active { transition: all .0s ease-in-out; transform: scale(95%) !important; box-shadow: none;}
.datepickerwrap:after { box-shadow: none; color: var(--theme-text); background: var(--theme-primary); border-left: 0; height: 56px; border-radius: 0 .25em .25em 0;}
.ui-datepicker { background:linear-gradient( to bottom, var(--theme-primary), var(--theme-bg) 1px); border:0; border-radius: .25em; }
.ui-datepicker, .ui-datepicker .ui-datepicker-header, .ui-datepicker .ui-datepicker-title { border-radius: .25em; }
.ui-datepicker .ui-datepicker-header { background: var(--theme-primary); }
.ui-datepicker .ui-datepicker-title { background: var(--theme-primary); font-size: 14px; text-transform: none; border: 0; border-radius: .25em .25em 0 0; color: var(--theme-text); }
.ui-datepicker .ui-datepicker-prev:before { color:var(--theme-text); }
.ui-datepicker .ui-datepicker-next:before { color:var(--theme-text); }
.ui-datepicker .ui-datepicker-prev:hover { opacity: .5; }
.ui-datepicker .ui-datepicker-next:hover { opacity: .5; }
.ui-datepicker .ui-datepicker-prev.ui-state-disabled:hover { opacity: .25; }
.ui-datepicker .ui-datepicker-next.ui-state-disabled:hover { opacity: .25; }
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { background: var(--theme-input-bg); border:0; border-radius: .25em; color:var(--theme-text); transition: transform .2s ease-in-out; }
.ui-state-hover { color:inherit !important; }
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { background:var(--theme-primary); color:var(--theme-text); }
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active,
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight { border-color: var(--theme-primary-75); }

/* Messages */
.messages_container:empty { display:none; }
.messages_container:not(:empty) { background: #f5dad4; border-radius: 1em; padding:1em; margin:2em 0; display:none; animation:fadeIn .5s ease-in-out forwards; }
.messages_container p:first-child { margin-top:0; }
.messages_container p:last-child { margin-bottom:0; }

/* Bookingperiod selector */
.bookingperiodselector .selectwrapper:after { content: '\f078'; background: var(--theme-primary); width: 42px; height: 100%; position: absolute; border-radius:0 .25em .25em 0; top: 0; right: 0; pointer-events: none; font-family: 'FontAwesome'; color: var(--theme-text); font-size: .8em; text-align: center; line-height: 56px; }
.bookingperiodselector .selectwrapper { max-width: 230px; }
.bookingperiodselector .selectwrapper select { appearance: none; font-size: .8em; font-weight: 600; background: var(--theme-input-bg); border:0; padding-right: 64px; border-radius: .25em; color: var(--theme-text); }
.bookingperiodselector .selectwrapper select option { background-color: var(--theme-input-bg); }
.bookingperiod { position: relative;}

/* Numselector */
.numselector { background: none; box-shadow: none; width: 148px; grid-template-columns: 48px 1fr 48px; }
.numselector input { font-size: .8em; border:0; background:var(--theme-input-bg); font-weight: 600; color: var(--theme-text); }
.numselector button:first-child { border:0; border-right:none; height:56px; background: var(--theme-primary); color:var(--theme-text); border-radius: .25em 0 0 .25em; }
.numselector button:last-child { border:0; border-left:none; height:56px; background: var(--theme-primary); color:var(--theme-text); border-radius: 0 .25em .25em 0; }

/* Timeslots */
.timeslots { display:grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr; grid-gap:16px; margin:2em 0; }
.timeslot { background:var(--theme-input-bg); color:var(--theme-text); margin:0; box-shadow: none; border-radius: .25em; align-content: center;}
.timeslot:not(.selected):hover { transform: scale(1.05) !important; box-shadow: none; }
.timeslot .pricebadge { background: var(--theme-primary); color:var(--theme-text); top:-5px; right:-5px; font-size: 1em; font-weight: 500; }
.timeslot .quantitybadge { background: none; box-shadow: none; top: -16px; right: 5px; font-size: .8em; border-radius: 0; border: none; font-size: 1em; margin: 0; font-weight: 700; transform: none; position: static; padding: 10px 0 0; display: block; width: 100%; border-top: 1px solid var(--theme-text)50; margin: 10px 0 0; }
.timeslot.disabled { background:var(--theme-input-bg); color:#fff3; position: relative; text-decoration: line-through; }
.timeslot.disabled:hover { transform:none !important; }
.timeslot.selected, .timeslot.selected:hover { background:var(--theme-primary); color:#fcf4e8; box-shadow: 0; }
.timeslot.selected .quantitybadge{ color:#fcf4e8; border-color:#fff5;  }

/* Products */
.relatedProduct .card .pricebadge { transform:none; font-family: 'DM Sans'; color:#a1817a; font-weight: 600; position: absolute; bottom: .25em; font-size: 1.5em; float:none; background:none; margin:0; padding: 0; box-shadow: none; }
.relatedProduct .card .actions>div input { background-color: #ffffff; height: 32px; border: 0; box-shadow: none; resize: none; border-radius: 1em; }
.relatedProduct .card button { background:var(--theme-primary); }
.relatedProduct .card button:active { opacity: .5; }
.relatedProduct .card { background: #f5dad4; border-radius: 1em; padding:1em; margin:0; box-shadow: none; }
.relatedProduct .card .actions { box-shadow: none; background:none; }
.relatedProduct .card .actions:after { display:none; }
.relatedProduct .card .img { border-radius: .5em; overflow: hidden; }
.relatedProduct .card .content { padding:0 .5em 0 1em; }

/* Booking */
body>div>view, body>div>view view { filter:none !important; }
view .viewcontent { min-height:400px; height:100%; display:grid; grid-template-rows: 1fr auto; }
[data-name=step1] h1 { text-align: center;}
[data-enablecart=""] [data-name=step2] .viewcontent { display:block; max-width:1280px; }
view[name=booking] [data-name=step2] .description { font-size: .9em;}
view[name=booking] .scrollable>.content,
view[name=checkout] .scrollable>.content { padding-top:0; }
view[name=booking] .scrollable.hasNavbuttons:before,
view[name=checkout] .scrollable.hasNavbuttons:before { background: linear-gradient(to bottom, #0000, var(--theme-bg));  }
view[name=booking] .viewcontent>h2 { margin:2em 0 0; }
view[name=booking] .footer { background: var(--theme-bg); padding:2em; }
view[name=booking] .footer p, view[name=booking] .footer a { color:var(--theme-text); }
view[name=booking] .footer p { float:right; display: inline; }
view[name=booking] .footer p:before { content:'\2022'; margin:0 .5em; color:var(--theme-primary-75); }
view[name=booking] .footer p:nth-child(1) { font-weight: 600; }
view[name=booking] .footer p:nth-child(1):before, view[name=booking] .footer p:last-child:before { display:none; }
view[name=booking] .footer p:nth-child(1), view[name=booking] .footer p:nth-child(2), view[name=booking] .footer p:nth-child(3) { float:left; display: inline; }
view[name=booking] .footer a { color:var(--theme-text); display: inline; margin:0; }

.step1_info { text-align: center; display:none; }

/* Step 1 */
[data-name=step1] { display: block; position: relative; background-color: var(--theme-bg); }
[data-name=step1]>.top { position: absolute; top:0; width:100%; height:100%; max-height: 50vh !important; background:linear-gradient(to bottom, var(--theme-bg), #0000); z-index: 49; }
[data-name=step1]>.top .logo { background-image:url('district13_white_16x10.svg'); height:25vh; padding:1em 5em 0; animation:fadeIn 1s ease-in-out forwards; animation-delay: .8s; opacity: 0; }
[data-name=step1]>.top .hero { display: none; }
[data-name=step1] .viewcontent { max-width: 100% !important; padding:0; }
[data-name=step1] .viewcontent [l="step1_title"] { display:none; position: absolute; z-index:50; color:var(--theme-text); font-size:2em; }
[data-name=step1] .viewcontent [l="step1_text"] { position: absolute; z-index:50; }
[data-name=step1] .content { height:100%; overflow:hidden; }
[data-name=step1] .resourceTypes { height:100%; display: grid; grid-template-columns: 1fr; grid-gap:0; }
[data-name=step1] .resourceTypes:has(.resourceType + .resourceType) { grid-template-columns: 1fr 1fr; }
[data-name=step1] .resourceTypes:has(.resourceType + .resourceType + .resourceType) { grid-template-columns: 1fr 1fr 1fr; }
[data-name=step1] .resourceTypes:has(.resourceType + .resourceType + .resourceType + .resourceType) { grid-template-columns: 1fr 1fr; }
[data-name=step1] .resourceTypes:has(.resourceType + .resourceType + .resourceType + .resourceType + .resourceType) { grid-template-columns: 1fr; }
[data-name=step1] .resourceTypes .resourceType { height:100%; display: block; padding:0; animation:fadeIn 1s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards !important; }
[data-name=step1] .resourceTypes .resourceType .card { z-index: 1 !important; }
[data-name=step1] .resourceTypes .resourceType .card:active { transform:none !important; }
[data-name=step1] .resourceTypes .resourceType .top { display:block; position:absolute; width:100%; height:100%; max-height: 100%; transform:none; border-radius: 0; transition: all .3s cubic-bezier(0.075, 0.82, 0.165, 1); }
[data-name=step1] .resourceTypes .resourceType button { border-color:var(--theme-primary); background: var(--theme-primary-75); color:#fff; font-weight: 700; font-size: 1em; border-radius: .25em; transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1);}
[data-name=step1] .resourceTypes .resourceType:hover .top { transform:scale(1.05); }
[data-name=step1] .resourceTypes .resourceType:hover button { background: var(--theme-primary); transform:scale(1.01); }
[data-name=step1] .resourceTypes .resourceType .content { opacity:0; animation:fadeIn .5s ease-in-out forwards; animation-delay: 1.2s; display:grid; grid-template-rows: auto 1fr auto; position: absolute; bottom:0; left:0; width:100%; background:var(--theme-bg-75); padding:2.5em 2em; color:var(--theme-text); border-radius: 0; }
[data-name=step1] .resourceTypes .resourceType .content h3 { margin-bottom:1em;}
[data-name=step1] .resourceTypes .resourceType .content h3, 
[data-name=step1] .resourceTypes .resourceType .content p { color:var(--theme-text); }
[data-name=step1] .resourceTypes .resourceType .content span { overflow:hidden; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Cart */
.cart { background: var(--theme-bg); box-shadow: inset 50px 0 50px -50px #441f005c; }
.cartButton { background: #212121; box-shadow: 0 0 0 5px #88002622; }
.cartButton .count { background: #4e3f3c; color:#fff; border-radius: .5em;}
.cartButton.cartvisible { color:#212121; }
.cart .items, .checkoutcart .items { overflow-x: visible; overflow-y: visible;}
.cart .item, .checkoutcart .item, .confirmselection .item { background: var(--theme-input-bg); padding:1.5em !important; border:0 !important; box-shadow: none !important; }
.cart .item, .checkoutcart .item:first-child, .confirmselection .item:first-child { border-radius: 1em 1em 0 0; }
.cart .item, .checkoutcart .item:last-child, .confirmselection .item:last-child { border-radius: 0 0 1em 1em; }
.cart .item, .checkoutcart .item:first-child:last-child, .confirmselection .item:first-child:last-child { border-radius: .25em; }
.cart .totals, .checkoutcart .totals { background: ar(--theme-input-bg); border-radius: 0 0 1em 1em; padding:1.5em !important; border:0 !important; box-shadow: none !important; margin-top: 2px; margin-bottom:0; }
.cart .totals>div, .checkoutcart .totals>div { font-family: 'DM Sans'; color:#a1817a; font-weight: 400; }
.cart .products, .checkoutcart .products, .confirmselection .products { box-shadow: none; margin:1.5em -1.5em -1.5em; padding:1.5em; border-top:2px solid var(--theme-text); font-family: 'DM Sans'; }
.cart .fees, .checkoutcart .fees, .confirmselection .fees { box-shadow: none; margin:1.5em -1.5em -1.5em; padding:1.5em; border-top:2px solid var(--theme-text); font-family: 'DM Sans'; }
.cart .item .grid:has(+ .products), .checkoutcart .item .grid:has(+ .products), .confirmselection .item .grid:has(+ .products) { box-shadow: none; }
.cart .item .grid:has(+ .fees), .checkoutcart .item .grid:has(+ .fees), .confirmselection .item .grid:has(+ .fees) { box-shadow: none; }
.cart .products h3, .cart .fees h3, .checkoutcart h3 { color:var(--theme-primary); }

/* view[name=checkout] .checkoutcart h2 { color:var(--theme-primary); } */
.checkoutcart .totals h3 { color:var(--theme-primary); }
.cart .item, .checkoutcart .item .content, .confirmselection .item .content { padding:0; }
.cart .item .img, .checkoutcart .item .img, .confirmselection .item .img { border-radius: 0.25em 0 0 .25em; margin: -1.5em 1.5em -1.5em -1.5em; }
.cart .item .grid, .checkoutcart .item .grid, .confirmselection .item .grid { grid-template-columns: minmax(100px, 180px) 1fr; padding:0 1.5em; margin:0 -1.5em; }
view[name=checkout] .checkoutcart .item { margin:0; }
/* [data-enablecart="1"] view[name=booking] .checkoutbuttons { background: url(paperbottom_bg.png) repeat-x; margin:-42px -42px 0; padding:160px 42px 0; } */
.termslink, .gdprlink { color:var(--theme-text); font-weight: 400; } 
.cart .item .content p, .checkoutcart .item .content p, .confirmselection .item .content p { font-family: 'DM Sans'; color:var(--theme-text); }

view[name=checkout] .voucherform { padding:0; background: none; box-shadow: none; display:none; }
view[name=checkout] .reservationchoices { margin:0 0 1em 0; }

.files { margin-bottom:2em;}

/* Buttons */
.cart .item .delete, .checkoutcart .item .delete, .confirmselection .item .delete, .fastcheckout .customerinfo .delete { aspect-ratio: 1; width:56px; }
button:not(.card button):disabled, a.button:disabled, button:not(.card button).disabled, a.button.disabled { background: var(--theme-tertiary)33; color: #21212144; opacity: .25; }
button, a.button { background:var(--theme-primary); color:#fff; box-shadow: none; border:0; font-family: 'DM Sans'; font-weight: 600; border-radius: .25em; }
button.green { background-color: var(--theme-primary); color:#fff; box-shadow: none;}
.viewcontent .navbuttons, [data-enablecart=""] .pagecontent .navbuttons { max-width:1280px; }

.inputwrapper.validated:after { content:'\f00c'; font-family: 'FontAwesome'; top:50%; right:1em; background: none; width:auto; border:0; left:auto; transform: translateY(-50%); height:auto;}
.inputwrapper.error:after { display: none; }

input[type=checkbox] + label { background:var(--theme-input-bg); box-shadow: none; border:0; border-radius: .25em; }
input[type=checkbox] + label:after { color:var(--theme-text); }
input[type=checkbox]:checked + label { color:#fff; box-shadow: none; border:0; }
input[type=checkbox]:checked + label:after { color:#fff; }

/* Resourcetypes */
.resourceTypes { grid-gap:32px; width:100%; display:block; overflow:hidden; }
.resourceType { position: relative; width:100%; height:auto; padding:1em 0; transition: all .3s cubic-bezier(0.075, 0.82, 0.165, 1);}
.resourceType .card:hover { transform:translateY(-5px); box-shadow: none; }
.resourceType .card { background:none; border:none; border-radius: 0; padding:.5em 0 2em; box-shadow: none; }
.resourceType:active { opacity: .8;}
.resourceType .card .actions { box-shadow: none; background: none; padding:0; margin:0; }
.resourceType .card button { background: none; border: 2px solid #fff; color: #fff; box-shadow: none; padding: 0 1em; height: 50px; border-radius: 25px; margin-top: 1.5em; font-family: 'DM Sans'; font-weight: 600; font-size: 1.2em; }
.resourceType .card .top:after { display: none; }
.resourceType .card .content { display: block; width: 100%; height:auto; padding:0; }

/* Checkout */
[data-enablecart=""] view .pagecontent { max-width:1280px; }
view[name=checkout] .checkoutgrid { display: grid; grid-template-columns: 1fr; }
view[name=checkout] .checkoutgrid .checkoutgrid.persistant { margin-top:2.5em; }
[data-enablecart=""] .checkoutgrid .checkoutcontainer { order:2; }
[data-enablecart=""] .checkoutsummary { order:1; margin-bottom:-20px; }
[data-enablecart=""] .checkoutsummary>h2 { display: none; }
[l="checkout_myinfo"] { display:none; }
view[name=checkout] .checkoutform { background: none; border:0; border-radius: 0; box-shadow:none; padding:0; margin:2em 0 1em 0; }
view[name=checkout] .checkoutform input, 
view[name=checkout] .noteform textarea { background-color: var(--theme-input-bg); color: var(--theme-text); height: 56px; border: 0; box-shadow: none; resize: none; border-radius: .25em; }
view[name=checkout] .noteform textarea { min-height: 100px; }
.fastcheckout>p:first-child { display: none; }
view[name=checkout] .fastcheckout button { border-radius: 26px; height:56px; }
view[name=checkout] .fastcheckout button:not(:disabled) { background: var(--theme-primary); color:var(--theme-text); border-radius: .25em; }
view[name=checkout] .customerinfo { box-shadow: none; background: var(--theme-input-bg); border:0; border-radius: .25em; padding: 1.5em; }
view[name=checkout] .checkoutbuttons button { border-radius: .25em; height:56px; }
view[name=thanks] .pagecontent h1 { text-align: center; margin-bottom:20px; }
view[name=thanks] { text-align: center; }
view[name=thanks] .icon { display:none; }
view[name=thanks] .hero { display:block !important; background:none !important; height:auto !important; max-height:100% !important; opacity: 1; }

view[name=thanks] [l=thanks_helptext] { display: block; margin-bottom: 2em; }
view[name=cancelbooking] .pagecontent { margin-top:3em; }
.cart .item .badge, .checkoutcart .item .badge { background: none; border:1px solid #212121; color:#212121; border-radius: 0;    }
.checkoutgrid:has(.customerlookup) ~ div#checkoutcomplete { display:none; }
#printOrderConfirmationBtn { display:none; }
.cart .item .price, .checkoutcart .item .price, .confirmselection .item .price { background: none; color: var(--theme-primary); transform: none; right: 0; bottom: 0; font-size:1.3em; padding:0 1em; align-content: center; font-family: 'DM Sans'; font-weight: 600; }
.cart .item .price span, .checkoutcart .item .price span, .confirmselection .item .price span { font-size: .8em; text-align: end; }

.paymentlogos { display: none; }

/* Modals */
.modal_window { background:var(--theme-bg-75); }
.modal_window>.modal_buttons { background:transparent; }
.modal_window h2 { margin-bottom: 1em; }

@media only screen and (max-height: 840px) { [data-enablecart="1"] view[name=booking] .checkoutbuttons { margin:-42px -24px 0 } }
@media only screen and (max-width: 840px) {
    [data-name=step1] .content { overflow:auto; }
    [data-name=step1] .resourceTypes:has(.resourceType + .resourceType) { grid-template-columns: 1fr; grid-template-rows: 1.5fr; grid-auto-rows: 1fr; }
    [data-name=step1] .resourceTypes:has(.resourceType + .resourceType + .resourceType) { grid-template-columns: 1fr; grid-template-rows: 1.5fr; grid-auto-rows: 1fr; }
    [data-name=step1] .resourceTypes:has(.resourceType + .resourceType + .resourceType + .resourceType) { grid-template-columns: 1fr; grid-template-rows: 1.5fr; grid-auto-rows: 1fr;  }
    [data-name=step1] .resourceTypes:has(.resourceType + .resourceType + .resourceType + .resourceType + .resourceType) { grid-template-columns: 1fr; grid-template-rows: 1.5fr; grid-auto-rows: 1fr;  }

    [data-name=step1] .viewcontent { grid-template-rows: 100% auto; }
    [data-name=step1] .resourceTypes .resourceType .content span { -webkit-line-clamp: 1; line-clamp: 1; }

    [data-enablecart="1"] view[name=booking] .checkoutbuttons { margin: -112px -24px 0; padding: 160px 24px 0; }
    [data-name=step1] .resourceTypes .resourceType .content { height: auto; padding: 2em 1.5em; }
    view[name=booking] .footer p { float:none !important; display:block; }
    view[name=booking] .footer p:nth-child(n+4):before { display:none; }
    .timeslots { display:grid; grid-template-columns: 1fr 1fr 1fr; grid-gap:12px; margin:2em 0; }
    h1 { font-size: 32px; margin-bottom:0; line-height: 1;}
    h2 { font-size: 20px; }    
       
    view[name=checkout] .checkoutgrid { font-size: .9em; }
    
    view .viewcontent { padding: 32px 24px 16px; }
    view .pagecontent { padding: 32px 24px 16px; }
    view[name=thanks] .pagecontent h1 { margin-bottom:10px; }
    view[name=thanks] button { margin:0 auto 2em auto; display: block; }

    .grid.auto-auto-1fr { display: grid !important; grid-template-columns: 1fr 1fr; }        
    .relatedProduct .card .content { padding:1em 0 0; }
    .relatedProduct .card .actions { padding-top:1em; }
}

/* Toast */
.toast_window { background:#212121; color:#fff; }