@font-face {
    font-family: 'lazer84';
    src: url('../_FONTS/lazer84.woff2') format('woff2'),
        url('../_FONTS/lazer84.woff') format('woff'),
        url('../_FONTS/lazer84.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

        html {scroll-behavior: smooth;}
        body {background-color: #000; color: #efefef; padding: 0px; margin: 0px; font-family: 'Open Sans', sans-serif; font-size: 14px;}
        header {position: relative;  max-width: 1920px; margin: 0px auto; border-bottom: 1px solid #FFFFFF}
        h1 {font-family: 'lazer84'; color: #db4337; font-size: 3em;color: #db4337
}
        h3 {margin-top: -25px; margin-bottom: 40px; font-size: 14px; font-weight: 400}
        
        @media screen and (max-width: 500px) {
            h1 {font-family: 'lazer84'; color: #db4337; font-size: 1.5em; }
            h3 {margin-top: -10px; margin-bottom: 30px; font-size: 12px; font-weight: 400}
        }
        
        .container { margin: 0px auto; padding: 0px 30px; box-sizing: border-box}
        .container-inner {max-width: 1100px; margin: 0px auto; padding-top: 30px; padding-bottom: 60px;}
        .container-inner-footer {max-width: 1100px; margin: 0px auto; color: #efefef; padding-top: 60px; padding-bottom: 60px; font-weight: 600; text-align: center}
        .container-inner-footer a {color: #FFFFFF; margin-left: 0px;}
        .container-inner-footer a i {color: #db4337; margin-left: 10px;}
        .navigation { width: 100%; position: absolute; bottom: 10%;  margin: 0px auto; color: #FFF; padding: 0px 30px; box-sizing: border-box}
        
        .navigation-inner {max-width: 1100px; display: flex;  justify-content: space-between; margin: 0px auto; color: #FFF; }
        .nav {display: flex; justify-content: space-between; width: 45%;  }
        
.content-video > div {max-width: 1500px!important; overflow: hidden!important}

.content-image {margin: 0px auto; text-align: center}
.content-image img {width: 100%; height: auto;}

.content-text  a i {color: #000000; margin-left: 10px; font-size: 25px;}
.content-text  a:hover i {color: #FFFFFF}
.content-button {text-align: center; margin: 0px auto}
.content-button a {background-color:#db4337; background: rgb(219,67,55);
background: linear-gradient(267deg, rgba(219,67,55,1) 0%, rgba(210,107,57,1) 100%); color: #000000 ; font-family: 'lazer84'; padding: 10px 20px; display: inline-block; margin-top: 20px; text-decoration: none; font-size: 20px; border: 2px solid #db4337; transition: all 0.2s  }
.content-button a:hover {background: rgb(219,67,55);
background: linear-gradient(90deg, rgba(219,67,55,1) 0%, rgba(210,107,57,1) 100%); color:#FFFFFF }

.green .content-button a {background-color:#db4337; background: rgb(219,67,55);
background: linear-gradient(267deg, rgba(219,67,55,1) 0%, rgba(210,107,57,1) 100%); color: #000000 ; font-family: 'lazer84'; padding: 10px 20px; display: inline-block; margin-top: 20px; text-decoration: none; font-size: 20px; border: 2px solid #000000; transition: all 0.2s  }
.green .content-button a:hover {background: rgb(219,67,55);
background: linear-gradient(90deg, rgba(219,67,55,1) 0%, rgba(210,107,57,1) 100%); color:#FFFFFF }

        .social {display: flex; justify-content: space-between; font-family: 'Font Awesome 5 Brands'; width: 130px;}
        .social a {font-size: 22px;}
        .navigation a {color: #FFFFFF; font-family: 'lazer84'; text-decoration: none; font-size: 18px;}
        .navigation a:hover {color: #db4337} 
        
        
         @media screen and (max-width: 900px) {
            .nav {display: flex; justify-content: space-between; width: 75%;  }
        }
        
        @media screen and (max-width: 800px) {
            
            .navigation { width: 100%; position: absolute; bottom: 40px;  margin: 0px auto; color: #FFF; padding: 0px 30px; box-sizing: border-box}
            .nav {display: flex; justify-content: space-between; width: 100%;  }
            .navigation a { font-size: 14px;}
            .social {display: none;}
        }
        .green {background:#DB4438; background-image: url("../_IMG/foe-cloud.png"); background-size: cover; background-attachment: fixed; color: #000000 }
        .green h1  {color: #000000!important}
        .green h3  {color: #000000}
.green a  {color: #000000}
        
        @media screen and (max-width: 500px) {
        }
        .shows {display: grid; grid-template-columns: 20% 30% 50%; border-top:0px solid #db4337; }
        .shows > span {padding:12px 0px; border-bottom: 1px solid #db4337; padding-right: 30px; font-size: 14px;}
.shows > span > P > a {color:#FFFFFF}
.shows > span > p {padding:0px; margin:0px; }
        .shows > span:nth-child(1) {color: #db4337; padding-bottom: 20px;}
        .shows > span:nth-child(2) {color: #db4337}
        .shows > span:nth-child(3) {color: #db4337}
        
        .store-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 20px; grid-auto-rows: minmax(100px, auto); }
        .store-item {position: relative; grid-row: span 1; grid-column: span 1; border: 0px solid #db4337;  }
        .store-item .image {}
        .store-item .image img {width: 100%!important; height: auto!important}
        .store-item .text {padding:20px; text-align: center}
.store-item .text a {color:#FFFFFF}
        .store-item .text .item-title {font-family: 'lazer84'; color: #db4337; font-size: 20px; display: block; margin-bottom: 20px; }
.store-item .text .item-date {color: #db4337; font-weight: bold; font-size: 14px; display: block; margin-bottom: 10px; }
        .store-item .text a.button {background-color:#db4337; background: rgb(219,67,55);
background: linear-gradient(267deg, rgba(219,67,55,1) 0%, rgba(210,107,57,1) 100%); color: #000000 ; font-family: 'lazer84'; padding: 10px 20px; display: block; margin-top: 20px; text-decoration: none; font-size: 20px; border: 2px solid #db4337; transition: all 0.2s  }
        .store-item .text a.button:hover {background: rgb(219,67,55);
background: linear-gradient(90deg, rgba(219,67,55,1) 0%, rgba(210,107,57,1) 100%); color:#FFFFFF }

.green > .container-inner > .store-grid .store-item .text .item-title {color: #000000}
.green > .container-inner > .store-grid .store-item .text a.button {border: 2px solid #000000;}

        @media screen and (max-width: 800px) {
            .store-grid {grid-template-columns: repeat(2, 1fr); }
        }
        @media screen and (max-width: 500px) {
            .store-grid { grid-template-columns: repeat(1, 1fr);}
        }
        
        .about-container {display: grid; grid-template-columns: 2fr 1fr}
        .about-image {}
        .about-image img {width: 100%!important; height: auto!important; display: block}
        .about-text {display: flex; align-items:center; justify-content:center;}
        .about-text .text-inner {position: relative; padding: 30px; left: -30px; background-color: #000000; color: #FFFFFF}
        
        @media screen and (max-width: 900px) {
          .about-container {display: grid; grid-template-columns: 1fr}
            .about-text .text-inner {position: relative; padding: 30px; left: 0px; bottom: 0px;}
        }
        
        
        .animation-main-container-foe {position:relative; width: 100%; height: 100dvh; box-sizing: border-box; background: url("../_IMG/neph-foe-bg.jpg"); background-position: center; background-size: cover; overflow: hidden}




        
        .animation-cloud {position: absolute; left: 0px; bottom: 0px; width: 120%; height: 100dvh; background: url("../_IMG/foe-cloud.png"); background-size: cover; animation:waveL 25s infinite; animation-timing-function: ease-in-out; box-sizing: border-box}



        .animation-wave-right {position: absolute; right: 0px; bottom: 0px; width: 50%; padding-bottom: 18%; background: url("../_IMG/animate-wave.png"); background-size: cover;  animation:waveR 10s infinite; animation-timing-function: ease-in-out; box-sizing: border-box}
        .animation-wave-middle {position: absolute; right: 25%; bottom: 0px; width: 50%; padding-bottom: 18%; background: url("../_IMG/animate-wave.png"); background-size: cover;  animation:waveM 10s infinite; animation-timing-function: ease-in-out; box-sizing: border-box}
        .eye-blink {position: absolute; width: 22.0%; height: auto; padding-bottom: 25%; right: 20.3%; top: 6%; background:url("../_IMG/eye-blink.png"); background-size: cover; box-sizing: border-box; animation:blink 9s infinite; }
        .band {position: absolute; width: 100%; height: auto; left: 0px; padding-bottom: 45%; background: url("../_IMG/band.png"); background-size: cover; box-sizing: border-box; }
        .logo {position: absolute; bottom: 0px; width: 400px; height: 168px; bottom: 18%;left: 50%; transform: translate(-50%, -0%); background: url("../_IMG/logo-foe.png");  background-size: cover; }
        
        @media screen and (max-width: 600px) {
            .logo {position: absolute; bottom: 0px; width: 300px; height: 126px; bottom: 18%;left: 50%; transform: translate(-50%, -0%); background: url("../_IMG/logo-foe.png"); z-index: 10; background-size: cover;  animation-timing-function: linear}
            
            .animation-main-container-foe {height: 100svh; }
        }
        
         @media screen and (max-width: 400px) {
            .logo {position: absolute; bottom: 0px; width: 250px; height: 105px; bottom: 18%;left: 50%; transform: translate(-50%, -0%); background: url("../_IMG/logo-foe.png"); z-index: 10; background-size: cover;}
             .animation-wave-right {display: none}
        }
        
        @keyframes waveL
                {
                0%   {left: -10%; bottom: 0px; opacity: 0.5}
                50%  {left: 10%; bottom: 0px; transform: scale(1.2); opacity: 0.9} 
                100%  {left: -10%; bottom: 0px; transform: scale(1); opacity: 0.5}     
                }
        
         @keyframes waveR
                {
                0%   {right: -10%; bottom: 50px;}
                  20%  {right: -5%; bottom: 50px; transform: scale(1.1)} 
                100%  {right: -10%; bottom: 50px; transform: scale(1)}     
                }

         @keyframes parallax
                {
                    to {
                transform: translateY(200px); 
                    }
                }
        
          @keyframes waveM
                {
                0%   { transform: scale(1)}
                  40%  { transform: scale(1.3)} 
                60%  { transform: scale(1.2)} 
                100%  { transform: scale(1)}     
                }
        
           @keyframes blink
                {
                0%   {opacity: 0}
                1%  {opacity: 1;} 
                2%  {opacity: 0}
                    55%  {opacity: 0}
                    56%  {opacity: 1} 
                57%  {opacity: 0}
                    76%  {opacity: 0}
                    77%  {opacity: 1} 
                78%  {opacity: 0}
                    100% {opacity: 0}    
                }
        
        @-webkit-keyframes flicker {
	from {
		opacity: 0.5;
	}
	2% {
		opacity: 0.5; left:-1px;
	}
	2.5% {
		opacity: 0.45; right:-1px;
	}
	3% {
		opacity: 0.55; left:0px;
	}
	3.5% {
		opacity: 0.45;
	}
	4% {
		opacity: 0.5;
	}
	4.5% {
		opacity: 0.65;
	}
	5% {
		opacity: 0.55;
	}
	6% {
		opacity: 1;
	}
	
	100% {
		opacity: 1;
	}
	to {
		opacity: 1;
	}
}


.header-subpage { height: 30dvh; }

/* Site colours */
:root {
	--feature: #8D99AE;
    --feature2: #D90429;
	--text: #222;
	--links: #D90429;
    --links--hover: #222;
	--error: #dd0000;	
	--borders-input: #ccc;
	--borders-light: #ddd; 
	
	--discount: #dd0000;
    --button-bg: #D90429;
    --button-text: #fff;
	--nav-desktop-bg: #8D99AE;
	--nav-desktop-text: #fff;
	--nav-mobile-bg: #8D99AE;
	--nav-mobile-text: #fff;
    --footer-bg: #eee;
	--footer-text: #333;
	--table-footer-bg: #eee; 	
}

.cookie-container {position: fixed; z-index:10; top: 0; left: 0; width:100%; height: 100%; overflow: hidden; pointer-events: none; transition: all 300ms linear; }
.cookie-container.active { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); background: rgba(0,0,0,0.4); pointer-events: all;} 
.cookie-container > div {position: absolute; bottom: 0; left: 0; height: 0; width: 100%; overflow: hidden; background: #000000; color: #fff;}
.cookie-container a {color: inherit; text-decoration: underline;}	
.cookie-container > div >  div {position: absolute; top: 0; left: 0; width: 100%;}
.cookie-container .cookie-container__inner {display:flex; width: 100%; color: #fff; gap: 60px; align-items: center; }
.cookie-container .cookie-container__inner > div {flex-grow: 1;}
.cookie-container .cookie-container__inner > div.buttons {flex-grow: 0; text-align: right; padding: 20px 0; display: flex; flex-direction: column; gap: 10px; }
.cookie-container .cookie-container__inner > div.buttons a {display: inline-block; width: auto; border: 1px solid #fff; color: #fff; text-decoration: none; padding: 6px 10px; transition: all 0.3s; white-space:nowrap }
.cookie-container .cookie-container__inner > div.buttons a:hover {background: #fff; color: var(--feature);}
.cookie-container > div.open {height: auto; }
.cookie-container > div.open > div {position: relative; }
@media screen and (max-width: 900px) { 
	.cookie-container .cookie-container__inner {display:block; }
	.cookie-container .cookie-container__inner > div.buttons {padding-top: 0; align-items: center; justify-content: flex-start; flex-direction: row; text-align: left; }
}
.cookie-options {max-width: 700px; margin: 20px auto; padding: 0 30px; text-align: left  }
#modal .cookie-options {margin: 0; padding: 0;  }
#modal .content-text { padding: 0;  }
.cookie-options hr {margin: 20px 0;}
.cookie-options p {margin: 0 0 1em 0;}
.cookie-options .checkbox {margin: 3px 0;}
.cookie-options .checkbox label {display: flex; position: relative; align-items: center; justify-content: left; cursor: pointer;}
.cookie-options .checkbox label input[type=checkbox] {position: absolute; opacity: 0; pointer-events: none; }
.cookie-options .checkbox label i {position: relative; display: block; margin-right: 10px; width: 26px; height: 26px; border: 1px solid var(--borders-input); outline: none }
.cookie-options .checkbox.checked label i {border-color: var(--feature); background: var(--feature);}
.cookie-options .checkbox.checked label i:after {content: ""; position: absolute; top: 50%; left: 50%; margin-left: -7px; margin-top: -5px; width: 14px; height: 7px; box-sizing: border-box; border-bottom: 3px solid #fff; border-left: 3px solid #fff; transform: rotate(-45deg);}
.cookie-options .checkbox-always {margin: 3px 0;}
.cookie-options .checkbox-always label {display: flex; position: relative; align-items: center; justify-content: left; }
.cookie-options .checkbox-always label i {position: relative; display: block; margin-right: 10px; width: 26px; height: 26px; border: 1px solid #ccc; background: #ccc;}
.cookie-options .checkbox-always label i:after {content: ""; position: absolute; top: 50%; left: 50%; margin-left: -7px; margin-top: -5px; width: 14px; height: 7px; box-sizing: border-box; border-bottom: 3px solid #fff; border-left: 3px solid #fff; transform: rotate(-45deg);}


/* Modals */
#modal { position: fixed; display:flex; align-items: center; justify-content: center; width: 100%; height: 100%; left: 0; top: 0; background: rgba(0, 0, 0, 0.45); z-index: 200; cursor: pointer; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);; }
#modal.hidden {display:none;}
#modal .inner {position: relative; width: 100%; max-width: 700px; max-height: 100%; cursor: default; padding: 20px; box-sizing: border-box; }
#modal .inner #content { position: relative; max-height: 95vh; max-height: calc(100vh - 60px); background: #fff; padding: 0 30px; text-align: left; border-radius: 5px; overflow: auto; -ms-overflow-style: none;  /* IE and Edge */ scrollbar-width: none;  /* Firefox */ }
#modal .inner #content::-webkit-scrollbar {display: none;}
#modal .inner #content:before { content: ""; display: block; margin-bottom: 30px; padding-top: 1px; }
#modal .inner #content:after { content: ""; display: block; margin-top: 30px; padding-bottom: 1px; }
#modal .inner #content h1, #modal .inner #content h2, #modal .inner #content h3 {margin-top: 20px; } 
#modal.no-padding .inner #content {padding: 0;}
#modal.no-padding .inner #content:before {display: none; }
#modal.no-padding .inner #content:after {display: none; }
#modal .inner .closeButton { position: absolute; top: 5px; right: 5px;}
@media screen and (max-width: 600px) { 
	#modal .inner #content { padding: 0 20px; }
	#modal .inner #content:before {margin-bottom: 20px; }
	#modal .inner #content:after {margin-top: 20px; }
}

#supersize { position: fixed; width: 100%; height: 100%; left: 0; top: 0; overflow: auto; background: rgba(0, 0, 0, 0.45); z-index: 200; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
#supersize .inner {position: absolute; top: 40px; left: 40px; right: 40px; bottom: 40px; box-sizing: border-box; }
#supersize .inner .content {position: absolute; width: 100%; height: 100%; background: #fff; overflow: hidden;;}
#supersize .inner .closeButton { position: absolute; top: -15px; right: -15px; }	
#supersize .inner .ssprev {position: absolute; top: 50%; left: -1px; width: 30px; height: 60px; border-top-right-radius: 30px; border-bottom-right-radius: 30px; margin-top: -30px; background: #fff; border: 1px solid #ccc; box-shadow: 0 3px 10px rgb(0 0 0 / 0.2); z-index: 1; }
#supersize .inner .ssprev::after {content: ""; position: absolute; top: 50%; left: 8px; width: 12px; height: 12px; border: solid #333; border-width: 0 0 2px 2px; box-sizing: border-box; margin-top: -6px; transform: rotate(45deg);}
#supersize .inner .ssprev:hover::after {border-color: var(--button-bg);}
#supersize .inner .ssnext {position: absolute; top: 50%; right: -1px; width: 30px; height: 60px; border-top-left-radius: 30px; border-bottom-left-radius: 30px; margin-top: -30px; background: #fff; border: 1px solid #ccc; box-shadow: 0 3px 10px rgb(0 0 0 / 0.2); z-index: 1; }
#supersize .inner .ssnext::after {content: ""; position: absolute; top: 50%; right: 8px; width: 12px; height: 12px; border: solid #333; border-width: 0 2px 2px 0; box-sizing: border-box; margin-top: -6px; transform: rotate(-45deg);}
#supersize .inner .ssnext:hover::after {border-color: var(--button-bg);}
#supersize .inner .ssbuttons {position: absolute; display: flex; justify-content: center; bottom: 20px; left: 0; width: 100%; z-index: 1; pointer-events: none; }
#supersize .inner .ssbuttons a {display: block; padding: 6px; transition: all 0.3s; pointer-events: all;}
#supersize .inner .ssbuttons a::after {content: ""; display: block; width: 8px; height: 8px; background: #333; border: 1px solid #333; border-radius: 3px; transition: all 0.3s; box-shadow: 0 3px 10px rgb(0 0 0 / 0.2); }
#supersize .inner .ssbuttons a.active {transform: scale(1.3); pointer-events: none;}
#supersize .inner .ssbuttons a:hover {transform: scale(1.3);}
#supersize .inner .ssbuttons a.active::after, #supersize .inner .ssbuttons a:hover::after {background: #fff;}

#supersize .zoom-control {position:absolute; right: 16px; bottom: 16px; border-radius: 8px; box-shadow: 0 3px 10px rgb(0 0 0 / 0.2); z-index: 1; border: 1px solid #ccc;}
#supersize .zoom-control a {position: relative; width: 30px; height: 30px; display: block; background: #fff; }
#supersize .zoom-control a:first-child {border-top-right-radius: 8px; border-top-left-radius: 8px; }
#supersize .zoom-control a:last-child {border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; border-top: 1px solid #ccc;;}
#supersize .zoom-control a::before {content: ""; position: absolute; width: 14px; height: 2px; left: 50%; top: 50%; margin-left: -7px; margin-top: -1px; background-color: #333}
#supersize .zoom-control a:first-child::after {content: ""; position: absolute; width: 2px; height: 14px; left: 50%; top: 50%; margin-left: -1px; margin-top: -7px; background-color: #333}
#supersize .zoom-control a:hover {background: var(--button-text);}
#supersize .zoom-control a:hover::before {background: var(--button-bg);}
#supersize .zoom-control a:hover::after {background: var(--button-bg);}
#supersize .zoom-control a.disabled {pointer-events: none;}
#supersize .zoom-control a.disabled:before {opacity: 0.25;}
#supersize .zoom-control a.disabled:after {opacity: 0.25;}
#supersize .pan-control {position:absolute; right: 70px; bottom: 16px; border-radius: 100%; box-shadow: 0 3px 10px rgb(0 0 0 / 0.2); border: 1px solid #ccc; height: 70px; width: 70px; background-color: #fff; display: none; z-index: 1;}
#supersize .pan-control a {position: absolute; display: block; left: 50%; top: 50%; margin-left: -13px; margin-top: -35px; width: 26px; height: 26px; transform-origin: 13px 35px}
#supersize .pan-control a::after {content: ""; position: absolute; top: 50%; left: 50%; margin-left: -6px; margin-top: -3px; width: 12px; height: 12px; display: block; border-style: solid; border-color: #333; border-width: 2px 2px 0 0; box-sizing: border-box; transform: rotate(-45deg)}
#supersize .pan-control a:nth-child(1) {transform: rotate(0);  }
#supersize .pan-control a:nth-child(2) {transform: rotate(90deg);}
#supersize .pan-control a:nth-child(3) {transform: rotate(180deg);}
#supersize .pan-control a:nth-child(4) {transform: rotate(270deg);}
#supersize .pan-control a.disabled {pointer-events:none; opacity: 0.25;}
@media screen and (max-width: 600px) { 
	#supersize .inner {top: 20px; left: 20px; right: 20px; bottom: 20px; }
}

.closeButton {width: 30px; height: 30px; background: var(--button-bg); border-radius: 50%;  transition: all 0.2s; border: 2px solid var(--button-bg) }
.closeButton:before { content: ""; position: absolute; background: var(--button-text); width: 16px; height: 2px; top: 50%; left: 50%; margin-top: -1px; margin-left: -8px; transform: rotate(45deg); border-radius: 2px; }
.closeButton:after { content: ""; position: absolute; background: var(--button-text); width: 16px; height: 2px; top: 50%; left: 50%; margin-top: -1px; margin-left: -8px; transform: rotate(-45deg); border-radius: 2px; }
.closeButton:hover {background-color: var(--button-text); }
.closeButton:hover:before {background: var(--button-bg);}
.closeButton:hover:after {background: var(--button-bg);}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

ul.calendar-time-list {margin: 20px 0; padding: 0; list-style: none; border-bottom: 1px solid #ccc; }
ul.calendar-time-list li {display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #ccc; font-weight: bold; padding: 5px 0;}
ul.calendar-time-list li:nth-child(odd){background: #f7f7f7;}
ul.calendar-time-list li button {padding: 3px 8px; margin: 1px; color: var(--button-text); background: var(--button-bg); border: 1px solid var(--button-bg); border-radius: 8px; cursor:pointer; transition: all ease-in 0.1s; }
ul.calendar-time-list li button:hover {color: var(--button-bg); background-color: var(--button-text); }

.calendar {position: relative; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr; gap: 1px; max-width: 350px; background: #ccc; border: 1px solid #ccc; border-radius: 4px; overflow: hidden; }
.calendar > div {display:flex; position: relative; align-items: center; justify-content: center; box-sizing: border-box; overflow: hidden; padding: 2px; background: #fff; color: #333; text-align: center; font-size: 12px;}	
.calendar > div.day {font-size: 16px; font-weight: 700; min-height: 50px; padding: 5px; pointer-events: none;}	
.calendar > div.monthLabel {grid-column:1/8; font-size: 1rem; font-weight: bold; padding: 8px; }
.calendar > div.monthLabel a {position: absolute; box-sizing: border-box; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-color: #000; border-style: solid; }
.calendar > div.monthLabel a.prev {left: 10px; border-width: 0 0 2px 2px; transform:rotate(45deg);}
.calendar > div.monthLabel a.next {right: 10px; border-width: 0 2px 2px 0 ; transform:rotate(-45deg);}
.calendar .wkend {background: #eee;}
.calendar .day ul {display:none;}
.calendar .dayxxx:hover ul {position: absolute; z-index: 10; top: calc(100% + 10px); left: 0; width: 100px; font-size: 1rem; text-align: left; display:block; border: 1px solid #ccc; background: #fff; color: #333; margin: 0; padding: 5px; list-style: none; font-size: 11px; font-weight: normal; }
.calendar .dayxxxx:hover ul li {padding: 0; margin; 0; }
.calendar .day.today {background: #000; color: #fff; }
.calendar .day.available {border:3px solid var(--feature); pointer-events: all; padding: 3px; }
.calendar .day.available:hover {background: var(--feature); color: #fff; cursor:pointer; }
.calendar .day.active {background: var(--feature); color: #fff; cursor:pointer; }
.calendar .day.past {color: #ccc;}
.calendar .day.dimmed {color: #ccc;}
.calendar .day.past:before {content: ""; position: absolute; top: 50%; left: 50%; width: 200px; height: 1px; margin-left: -100px; background: #ccc; transform: rotate(45deg);}
.calendar .day.past:after {content: ""; position: absolute; top: 50%; left: 50%; width: 200px; height: 1px; margin-left: -100px; background: #ccc; transform: rotate(-45deg);}
.calendar .day.today:before {content: ""; position: absolute; top: 50%; left: 50%; width: 200px; height: 1px; margin-left: -100px; background: rgba(255,255,255,0.2); transform: rotate(45deg);}
.calendar .day.today:after {content: ""; position: absolute; top: 50%; left: 50%; width: 200px; height: 1px; margin-left: -100px; background: rgba(255,255,255,0.2); transform: rotate(-45deg);}