@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

:root {        
    --theme-primary: #3d2920;
    --theme-secondary: #ebe6d5;  
    --theme-secondary-75: #ebe6d5c0;
    --theme-secondary-50: #ebe6d580;  
    --theme-secondary-25: #ebe6d540;  
    --theme-tertiary: #deca87;
}

body { background:var(--theme-primary); }
body, h1, h2, h3 { color:var(--theme-secondary); }
p, label { font-weight: 400; }
body, p { font-family: 'Raleway', tahoma, helvetica; }
h1 { font-family: 'Lora', tahoma, helvetica; color:var(--theme-tertiary); margin-bottom:revert; }
h2 { font-size:1.5em; margin-bottom:revert; }
h2, h3, h4, h5 { font-family: 'Poppins', tahoma, helvetica; }

::-webkit-scrollbar-thumb { background: var(--theme-secondary-50);}
::-webkit-scrollbar-track { background:var(--theme-primary); }
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { box-shadow: 0 0 0px 1000px var(--theme-primary) inset !important; -webkit-text-fill-color: var(--theme-secondary) !important; transition: background-color 5000s ease-in-out 0s; }

a { color:var(--theme-tertiary); }
hr { border:0; border-top:1px solid var(--theme-secondary-50); }
label { text-transform: none; }
.app, .panes { max-height:1280px; }
.fa-arrow-left:before { content:'\f177'; }
.fa-arrow-right:before { content:'\f178'; }
.slider { background-color: var(--theme-primary); max-height:1280px; }
.slider { background-color: var(--theme-primary); max-height:1280px; }
.agreement h1:after { display:none; }

/* Hero */
.hero .logo, .top .logo { transition:all 2s cubic-bezier(0.075, 0.82, 0.165, 1); background-image:url('logo.png'); filter: brightness(0) saturate(100%) invert(82%) sepia(10%) saturate(1220%) hue-rotate(9deg) brightness(98%) contrast(90%); width:100%; height: 200px; position: absolute; background-size: contain; background-repeat: no-repeat; background-position: center center; transform:none; background-origin: content-box; padding: 1em 5em; left: 50%; transform: translateX(-50%); }
.hero { background:var(--theme-primary) !important; overflow: visible; }
.hero:before, .hero:after { display: none; }
.top { height:auto; min-height: 180px;}

/* Datepicker */
.datepickerwrap { box-shadow: none; transition: all .2s ease-in-out; box-shadow: none; border-radius: 0; }
.datepickerwrap input { background: none; border-radius: 0em; box-shadow: none; border:1px solid var(--theme-secondary); color:var(--theme-secondary); font-size: 1em; padding: 0 60px 0 10px; }
.datepickerwrap:active { transition: all .0s ease-in-out; transform: scale(95%) !important; box-shadow: none;}
.datepickerwrap:after { border-radius:0em; box-shadow:none; color:var(--theme-secondary); background: none; border-left:1px solid var(--theme-secondary); height:56px; }
.ui-datepicker { color:var(--theme-tertiary); background:var(--theme-primary); border:1px solid var(--theme-secondary); }
.ui-datepicker, .ui-datepicker .ui-datepicker-header, .ui-datepicker .ui-datepicker-title { border-radius: 0; }
.ui-datepicker .ui-datepicker-title { background: var(--theme-primary); font-size: 13px; text-transform:none; border:0; border-bottom: 1px solid var(--theme-secondary); color:var(--theme-secondary); }
.ui-datepicker .ui-datepicker-prev:before { color:var(--theme-secondary); }
.ui-datepicker .ui-datepicker-next:before { color:var(--theme-secondary); }
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { background: var(--theme-primary); border:1px solid var(--theme-secondary); color:var(--theme-secondary); border-radius: 0; transition: transform .2s ease-in-out; }
.ui-state-hover { transform: translateY(-3px); }
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { background:var(--theme-secondary); color:var(--theme-primary); }
.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); }

/* Bookingperiod selector */
.bookingperiodselector .selectwrapper:after { content: '\f078'; background: var(--theme-secondary); width: 42px; height: 100%; position: absolute; border-radius: 0; top: 0; right: 0; pointer-events: none; font-family: 'FontAwesome'; color: var(--theme-secondary); font-size: 1.1em; text-align: center; line-height: 56px; }
.bookingperiodselector .selectwrapper select { appearance: none; font-size: 1em; background: var(--theme-secondary); border-color:var(--theme-secondary); border-radius: .5em; padding-right: 64px; }
.bookingperiodselector .selectwrapper select option { background-color: var(--theme-secondary); }

.bookingperiod { position: relative;}
.bookingperiod:after { content:''; width:20px; position: absolute; left:0; top:calc(100% + 1em); height:1px; background: var(--theme-secondary); }
.bookingperiod:last-child:after { display: none;}

/* Numselector */
.numselector { background: none; box-shadow: none; }
.numselector input { font-size: 1.1em; border-color:var(--theme-secondary); border:1px solid var(--theme-secondary); color:var(--theme-secondary); }
.numselector button:first-child { border:1px solid var(--theme-secondary); border-right:none; border-radius: 0; height:56px; }
.numselector button:last-child { border:1px solid var(--theme-secondary); border-left:none; border-radius: 0; height:56px; }

/* Timeslots */
.timeslots { display:grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; grid-gap:16px; margin:2em 0; }
.timeslot { background:none; margin:0; border:1px solid var(--theme-secondary); box-shadow: none; border-radius: 0; align-content: center;}
.timeslot:not(.selected):hover { transform: scale(1.05) !important; box-shadow: none; }
.timeslot .pricebadge { background: none; box-shadow: none; top: -16px; right: 5px; font-size: 11px; color: var(--theme-secondary); border-radius: 0; border: none; font-family: 'Poppins'; 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-secondary); margin: 10px 0 0; }
.timeslot .quantitybadge { background: none; box-shadow: none; top: -16px; right: 5px; font-size: 11px; color: var(--theme-secondary); border-radius: 0; border: none; font-family: 'Poppins'; 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-secondary); margin: 10px 0 0; }
.timeslot.disabled { background:none; color:var(--theme-secondary); position: relative; }
.timeslot.disabled:after { content:''; width:100%; height:100%; top:0; left:0; position: absolute; background: linear-gradient(to top left, transparent 0%, transparent calc(50% - 0.8px), var(--theme-secondary) 50%, transparent calc(50% + 0.8px), transparent 100%); animation:fadeIn 1s ease-in-out forwards; /* animation-delay: 2s; */ opacity: 0; }
.timeslot.disabled:hover { transform:none !important; }
.timeslot.selected, .timeslot.selected:hover { background:var(--theme-secondary); color:var(--theme-primary); box-shadow: none;}
.timeslot.selected .pricebadge { color:var(--theme-primary); border-color:var(--theme-primary); }
.timeslot.selected .quantitybadge{ color:var(--theme-primary); border-color:var(--theme-primary);  }

/* Booking */
body>div>view { filter:none !important; }
view .viewcontent { height:100%; display:grid; grid-template-rows: 1fr auto; }
[data-name=step1] h1 { text-align: center;}
[data-name=step1] .top { height:33vh; min-height: 200px; max-height: 100%; }
[data-name=step1] .logo { height:40vh; max-height: 640px;}
[data-name=step1] .viewcontent>div { display: flex; flex-direction: column; justify-content: center; }
.step1_info { text-align: center; display:none; }
[l="step1_text"] { text-align: center; }
[data-name=step2] .viewcontent { display:block; }
view[name=booking] [data-name=step2] .description { font-size: .9em;}
view[name=booking] .scrollable[data-name=step1] { display: grid; grid-template-rows: auto 1fr; }
view[name=booking] .scrollable>.content,
view[name=checkout] .scrollable>.content { padding-top:0; }
view[name=checkout] h2 { margin:0; }
view[name=booking] .scrollable.hasNavbuttons:before,
view[name=checkout] .scrollable.hasNavbuttons:before { background: linear-gradient(to bottom, transparent, var(--theme-primary));  }
view[name=booking] .viewcontent>h2 { margin:2em 0 0; }
view[name=booking] .footer p, view[name=booking] .footer a { color:var(--theme-secondary); }
view[name=booking] .footer a { color:var(--theme-secondary); display: block; margin:0; }
view[name=booking] .footer .fa-envelope:before { content:'\f003'; }

/* Cart */
.cart { background: #eddecb url(papertop_bg.png) repeat-x; box-shadow: inset 50px 0 50px -50px #441f005c; }
.cartButton { background: var(--theme-secondary); box-shadow: 0 0 0 5px #88002622; }
.cartButton .count { background: var(--theme-primary); color:var(--theme-secondary); border-radius: .5em;}
.cartButton.cartvisible { color:var(--theme-secondary); }
.cart .items, .checkoutcart .items { overflow-x: visible; overflow-y: visible;}
.cart .item, .checkoutcart .item, .confirmselection .item { background: none; border:1px solid var(--theme-secondary) !important; box-shadow: none !important; border-radius: 0; }
.cart .totals, .checkoutcart .totals { border: 1px solid var(--theme-secondary); padding: 1em; margin-top: -21px; margin-bottom:21px; }
.cart .totals, .checkoutcart .totals h2, .cart .totals, .checkoutcart .totals h3, .cart .totals>div, .checkoutcart .totals>div { font-family: 'Poppins', tahoma, helvetica; font-weight: 400; }

.cart .item, .checkoutcart .item .content, .confirmselection .item .content { padding:0; }
.cart .item, .checkoutcart .item .grid, .confirmselection .item .grid { display:block; }
.cart .item, .checkoutcart .item .img, .confirmselection .item .img { display:none; }

.cart .item .grid, .checkoutcart .item .grid, .confirmselection .item .grid { grid-template-columns: minmax(100px, 140px) 1fr; padding:1em; }
.cart .totals>div, .checkoutcart .totals>div { font-family: 'Lato', tahoma, helvetica; }
[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-secondary); font-weight: 400;}
.cart .item .content p, .checkoutcart .item .content p, .confirmselection .item .content p { margin:.5em 0; color:var(--theme-secondary); }
/* .cart .item .content i, .checkoutcart .item .content i, .confirmselection .item .content i { display: none; } */

.cart .fees, .checkoutcart .fees, .confirmselection .fees { padding:1em; }
.cart .fees>h3, .checkoutcart .fees>h3, .confirmselection .fees>h3 { display: none; }

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

/* Buttons */
.cart .item .delete, .checkoutcart .item .delete, .confirmselection .item .delete, .fastcheckout .customerinfo .delete { border-radius: 0em; background:none; color:var(--theme-secondary); border:1px solid var(--theme-secondary); width:40px; height:40px; margin:0; }
button:not(.card button):disabled, a.button:disabled, button:not(.card button).disabled, a.button.disabled { background: var(--theme-primary); color:var(--theme-secondary); opacity: .25; }
button, a.button { border-radius: 0; background:var(--theme-primary); color:var(--theme-secondary); box-shadow: none; border:1px solid var(--theme-secondary); font-family: 'Lora'; font-weight: 400; }
button.green { background-color: var(--theme-secondary); color:var(--theme-primary); box-shadow: none;}

.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:none; box-shadow: none; border:1px solid var(--theme-secondary); border-radius: 0; }
input[type=checkbox]:checked + label { background:none; color:var(--theme-secondary); box-shadow: none; border:1px solid var(--theme-secondary); }
input[type=checkbox]:checked + label:after { color:var(--theme-secondary); }

/* Resourcetypes */
.resourceTypes { display: block; max-width: 1080px; margin: 0 auto; }
.resourceType { position: relative; width: 100%; height: auto; padding: 1em 0; }
.resourceType + .resourceType { border-top:1px solid transparent; animation: animateBorderTop 1s ease-in-out forwards; animation-delay: .5s; }
.resourceType .card:hover { transform:translateY(-5px); box-shadow: none; }
.resourceType .card { width: 100%; background: none; border: none; border-radius: 0; padding: 2em 0; box-shadow: none; text-align: left; animation:fadeIn .5s ease-in-out forwards; opacity: 0; animation-delay: 0 !important; }
.resourceType .card .actions { box-shadow: none; background: none; padding:0; margin:0; }
.resourceType .card button { border-radius: 0; background:none; border:1px solid var(--theme-secondary); color:var(--theme-secondary); box-shadow: none; padding: 0 1em; }
.resourceType .card button:after { content:'\f178'; font-family: 'FontAwesome'; margin-left: .5em; }
.resourceType .card .top { display:none; transform: rotate(-2deg); border-radius: 0; }
.resourceType .card .top:after { display: none; }
.resourceType .card .content { display: grid; grid-template-columns: 1fr auto; align-items: end; width: 100%; height:auto; padding:0; grid-gap: 2em; }
.resourceType .card .content h3 { font-family: 'Lora'; font-size: 1.75em; color:var(--theme-tertiary); }
.resourceType .card .content p { color:var(--theme-secondary); }

.resourceTypes[data-num="1"] .card .content { grid-template-columns: 1fr; grid-gap:.5em; }

@keyframes animateBorderTop {
    0% { border-top-color: transparent; }
    100% { border-top-color: var(--theme-secondary-25); }
}

/* Products */
.relatedProduct .card { background:none; border:1px solid var(--theme-secondary); box-shadow: none; border-radius: 0; color:var(--theme-secondary); }
.relatedProduct .card .actions { margin: 0 -24px -14px -24px; padding: 24px 24px 24px 24px; box-shadow: none; }
.relatedProduct .card .actions>div input { border-radius: 0; border:1px solid var(--theme-secondary); border-left:0; border-right: 0; color:var(--theme-secondary); background: none; box-shadow: none; height:40px; text-align: center; font-size: 1em; font-weight: normal; }
.relatedProduct .card .actions>div { grid-gap:0; max-width: auto; grid-template-columns: 1fr 1fr 1fr; }
.relatedProduct .card .actions:after { display: none;}
.relatedProduct .card button { height:100%; }
.relatedProduct .card h1 { font-size: 2em; }
.relatedProduct .card .img { border-radius: 0; border-right: 1px solid var(--theme-secondary); }
.relatedProduct .card .pricebadge { background: none; margin: 0; float: none; transform: none; padding: 0; position: absolute; bottom: 24px; font-size: 1.5em; font-weight: 400; color: var(--theme-secondary); }
.relatedProduct .card .pricebadge:after { content:' DKK';}

/* Checkout */
view[name=checkout] .checkoutgrid { display: grid; grid-template-columns: 1fr; margin-top:1em; }
view[name=checkout] .checkoutgrid .checkoutgrid { margin-top:2.5em; }
[data-enablecart=""] .checkoutgrid .checkoutcontainer { order:2; }
[data-enablecart=""] .checkoutsummary { order:1; margin-bottom:-20px; margin-top:0; }
[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:0 0 1em 0; }
view[name=checkout] .checkoutform input, 
view[name=checkout] .noteform textarea { background-color: var(--theme-primary); color:var(--theme-secondary); border:0; box-shadow: none; resize:none; border:1px solid var(--theme-secondary); border-radius: 0; }
.fastcheckout>p:first-child { display: none; }
view[name=checkout] .customerinfo { box-shadow: none; background: none; background-size: 100% 400%; background-position: 0 -20px; border: 1px solid var(--theme-secondary); border-top:0; border-radius: 0; padding: 1em; }
view[name=checkout] .checkoutbuttons button { height: 56px; }
view[name=thanks] .pagecontent { text-align: center; }
view[name=thanks] .pagecontent h1 { text-align: center; margin-bottom:20px; }
view[name=checkout] [l="checkout_text"] { border:1px solid var(--theme-secondary); border-top:0; padding:1em; }
view[name=thanks] [l="thanks_helptext"] { margin-bottom:1em; }
view[name=thanks] .icon { display:none; }
view[name=cancelbooking] .pagecontent { margin-top:3em; }
.cart .item .badge, .checkoutcart .item .badge { background: none; border:1px solid var(--theme-secondary); color:var(--theme-secondary); border-radius: 0;    }
.checkoutgrid:has(.customerlookup) ~ div#checkoutcomplete { display:none; }

#printOrderConfirmationBtn { display:none; }
.cart .item .price, .checkoutcart .item .price, .confirmselection .item .price { font-family:'Raleway'; background: none; border:1px solid var(--theme-secondary); border-radius: 0; color: var(--theme-secondary); transform: none; right: -1px; bottom: -1px; font-size: 1.3em; padding:1em; height:calc(100% + 2px); align-content: center; }
.cart .item .grid:has(+ .products), .checkoutcart .item .grid:has(+ .products), .confirmselection .item .grid:has(+ .products) { border-bottom: 1px solid var(--theme-secondary); border-radius: 0; box-shadow: none; }
.cart .totals, .checkoutcart .totals h2, .cart .totals, .checkoutcart .totals h3, .cart .totals>div, .checkoutcart .totals>div { font-family:'Raleway'; font-size:13px; }
.cart .products, .checkoutcart .products, .confirmselection .products { padding: 1em; }
.cart .products h3, .checkoutcart .products h3, .confirmselection .products h3 { display: none; }

/* Rating */
view[name=rate] .rateform { background: none; box-shadow: none; border-radius: 0; padding:0; }
view[name=rate] .rateform textarea { background-color: var(--theme-primary); color:var(--theme-secondary); border:0; box-shadow: none; resize:none; border:1px solid var(--theme-secondary); border-radius: 0; }
view[name=rate] h1 { font-size: 2.2em; }
view[name=rate] button { border-radius: 0; background:var(--theme-primary); color:var(--theme-secondary); box-shadow: none; border:1px solid var(--theme-secondary); font-family: 'Lora'; font-weight: 400; }
/* view[name=rate] .rating img { filter: brightness(0) saturate(100%) invert(100%); }  */
view[name=rate] .rating img { filter: brightness(0) saturate(100%) invert(82%) sepia(10%) saturate(1220%) hue-rotate(9deg) brightness(98%) contrast(90%); } 
view[name=rate] .rating p { text-align: center; font-family: 'Lora'; color:var(--theme-tertiary); margin-top: 1em; font-size: 1.25em; }
/* view[name=rate] .rating:has(~.rating.selected) { opacity:1; } */
view[name=rate] .rating.selected { opacity:1; transform:scale(1); } 


/* Modals */
.modal_window { background:var(--theme-primary); color:var(--theme-secondary); border-radius: 0; border:1px solid var(--theme-secondary); box-shadow: none; }
.modal_window>.modal_buttons, .modal_content .buttons { background: #0000; border-top:1px solid var(--theme-secondary); box-shadow: none; }

/* Toast */
.toast_window { background:var(--theme-secondary); color:#fff; }

@media only screen and (max-width: 1280px) {
  view[name=rate] .hero { max-height: 100% !important; }
  view[name=thanks] .hero { max-height: 256px !important; }
}

@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-enablecart="1"] view[name=booking] .checkoutbuttons { margin: -112px -24px 0; padding: 160px 24px 0; }
    .timeslots { display:grid; grid-template-columns: 1fr 1fr 1fr; grid-gap:12px; margin:2em 0; word-spacing: 24px; }
    h1 { font-size:24px; }
    h2 { font-size:18px; }            
    view .viewcontent { padding: 32px 24px 16px; }
    view .pagecontent { padding: 32px 24px 16px; }

    .relatedProduct .card { grid-template-columns: 1fr; grid-template-rows: 1fr; }    
    .relatedProduct .card .img { display:none; }
    .relatedProduct .card .pricebadge { font-size: 1.25em; }


    view[name=thanks] .hero { max-height: 220px !important; }
    view[name=thanks] .icon { display:none; }
    view[name=thanks] .pagecontent h1 { margin-bottom:10px; }
    view[name=thanks] button { margin:0 auto 2em auto; display: block; }
  
}