@font-face {
	font-family : 'impact';
	src         : url('/font/impact.woff') format('woff');
	font-weight : normal;
	font-style  : normal;
}
@font-face {
	font-family: 'led_dot-matrixregular';
	src: url('/font/led_dot-webfont.woff2') format('woff2'),
		  url('/font/led_dot-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}
html, body{
	width       : 100%;
	height      : 100%;
	overflow    : hidden;
	font-family : "Arial", sans-serif;
	padding     : 0;
	background  : #1a1816;
}

.popup {
  background: #2e2c2a;
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.06) inset;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

#div_cookie{
	position            : absolute;
	left                : calc(50% - 350px);
	top                 : calc(50% - 200px);
	width               : 700px;
	height              : 400px;
	border              : 1px solid black;
	border-radius       : 15px;
	background          : #2e2c2a;
	color               : #f0ece6;
	/*background-image    : url("../img/bkg.jpg");*/
	background-size     : 100% 100%;
	background-repeat   : no-repeat;
	background-position : 0px 0px;
	z-index             : 51;
}
#div_top{
	position : absolute;
	left     : 0px;
	top      : 0px;
	width    : 100%;
	height   : 70px;
}
#div_bottom{
	position   : absolute;
	left       : 0;
	bottom     : 0;
	width      : 100%;
	height     : 70px;
	background : #2e2c2a;
	line-height : 70px;
}

#td_logo{
	max-width  : 70px;
	width      : 70px;
	text-align : center;
	height     : 72px !important;
}
#td_club{
	color       : #f0ece6;
	font-size   : 150%;
	font-family : "impact";
}
#td_meteo{
	width : 500px;
}

#div_book, #div_usr{
	position            : absolute;
	left                : calc(50% - 400px);
	top                 : calc(50% - 250px);
	width               : 800px;
	height              : 500px;
	border              : 1px solid black;
	border-radius       : 10px;
	background          : #2e2c2a;
	color               : #f0ece6;
	/*background-image    : url("../img/bkg.jpg");*/
	background-size     : 100% 100%;
	background-repeat   : no-repeat;
	background-position : 0px 0px;
	z-index             : 52;
	visibility          : hidden;
	overflow            : hidden;
}
/*campo, data, ora */
.div_cdo{
	position    : relative;
	display     : inline-block;
	height      : 50px;
	line-height : 50px;
	font-family : "led_dot-matrixregular";
	text-align  : center;
	color       : rgb(245, 229, 141);
	text-transform: uppercase;
}
#div_book_msg{
	position            : absolute;
	left                : 0px;
	top                 : 0px;
	width               : 100%;
	height              : 100%;
	border              : 1px solid black;
	border-radius       : 10px;
	background          : #2e2c2a;
	font-family         : "Poppins";
	color               : #fafafa;
	/*background-image    : url("../img/bkg.jpg");*/
	background-size     : 100% 100%;
	background-repeat   : no-repeat;
	background-position : 0px 0px;
	visibility          : hidden;
}
#div_book_delHH, #div_book_pagamento{
	position            : absolute;
	left                : 0px;
	top                 : 105%;
	width               : 100%;
	height              : 100%;
	border              : 1px solid black;
	border-radius       : 10px;
	background          : #2e2c2a;
	color               : #fafafa;
	/*background-image    : url("../img/bkg.jpg");*/
	background-size     : 100% 100%;
	background-repeat   : no-repeat;
	background-position : 0px 0px;
	visibility          : hidden;
   text-align          : left;
   font-size           : 20px;
}
#div_book_delHH{
	font-family         : "Poppins";
}

#staklo{
	position   : fixed;
	left       : 0px;
	top        : 0px;
	width      : 100%;
	height     : 100%;
	background : rgba(0,0,0,.5);
	z-index    : 50;
	visibility : hidden;
}
.btn_green{
	background    :  #218838;
	color         : white;
	padding       : 10px 20px;
	border        : none;
	border-radius : 8px;
	font-size     : 16px;
	font-weight   : 600;
	cursor        : pointer;
	box-shadow    : 0 4px 8px rgba(0, 0, 0, 0.15);
}

.btn_green:hover{
	background : #27ae60;
}

.btn_green:active{
	background : #30704b;
}

/* CONTENITORE SCROLL */
.table-wrapper {
   width    : 100%;
	height   : 100%; /* limita altezza per far attivare scroll verticale */
	overflow : auto;
	border   : none;
}

.table-wrapper.terra{
	background       : rgba(198, 93, 46, 0.5);
	background-image : radial-gradient(rgba(0,0,0,0.05) 2px, transparent 2px);
	background-size  : 4px 4px;
}
.table-wrapper.verde{
	background       : rgba(62, 145, 83,.5);
	background-image : radial-gradient(rgba(0,0,0,0.05) 2px, transparent 2px);
	background-size  : 4px 4px;
}
.table-wrapper.blue{
	background       : rgba(49, 111, 177,.5);
	background-image : radial-gradient(rgba(0,0,0,0.05) 2px, transparent 2px);
	background-size  : 4px 4px;
}

.campi {
	border-collapse : separate;
	width           : 100%;
	border-spacing  : 2px;
   font-size       : 14px;
}

.campi th, .campi td {
	border         : 0px solid #ddd;
	text-align     : center;
	padding-top    : 2px;
	padding-bottom : 2px;
   font-size      : 12px;
   width          : 12.5% !important;
}

/* HEADER STICKY */
.campi thead th {
	position : sticky;
	top      : 0;
	z-index  : 3;
	height   : 50px;
	color    : white;
}
.campi thead th span{
	color : yellow;
}

/*class campo terra ************************************/
.campi thead th.terra{
	background: rgb(164, 76, 36);
	background-image: radial-gradient(rgba(0,0,0,0.05) 2px, transparent 2px);
	background-size: 4px 4px;
}
.terra.past{
	color       : #2b2b2b;
	text-shadow : 1px 1px 1px gray;
}
.terra.past span{
	color       : #2b2b2b;
	text-shadow : 1px 1px 1px gray;
}

/*class campo verde ************************************/
.campi thead th.verde{
	background: rgb(49, 102, 63);
	background-image: radial-gradient(rgba(0,0,0,0.05) 2px, transparent 2px);
	background-size: 4px 4px;
}
.verde.past{
	color       : #2b2b2b;
	text-shadow : 1px 1px 1px gray;
}
.verde.past span{
	color       : #2b2b2b;
	text-shadow : 1px 1px 1px gray;
}

/*class campo blue ************************************/
thead th.blue{
	background: rgb(44, 84, 128);
	background-image: radial-gradient(rgba(0,0,0,0.05) 2px, transparent 2px);
	background-size: 4px 4px;
}
.blue.past{
	color       : #2b2b2b;
	text-shadow : 1px 1px 1px gray;
}
.blue.past span{
	color       : #2b2b2b;
	text-shadow : 1px 1px 1px gray;
}

/* numero campo */
.campi thead th:first-child {
	left      : 0;
	z-index   : 4;
	font-size : 30px;
   font-family : "led_dot-matrixregular";
   color       : red;
}

/* COLONNA ORA STICKY */
td.hour {
	position    : sticky;
	left        : 0;
	font-weight : bold;
	z-index     : 2;
	border      : 0px solid silver;
   height      : 50px;
}
.hour.terra{
	background       : rgba(198, 93, 46,.5);
	background-image : radial-gradient(rgba(0,0,0,0.05) 2px, transparent 2px);
	background-size  : 4px 4px;
   color            : rgb(196, 155, 136);
}
.hour.verde{
	background       : rgba(62, 145, 83,.5);
	background-image : radial-gradient(rgba(0,0,0,0.05) 2px, transparent 2px);
	background-size  : 4px 4px;
   color            : rgb(165, 208, 176);
}
.hour.blue{
	background       : rgba(49, 111, 177,.5);
	background-image : radial-gradient(rgba(0,0,0,0.05) 2px, transparent 2px);
	background-size  : 4px 4px;
   color            : rgb(160, 183, 206);
}

td.hour span{
	font-size : 70%;
}
.campi img{
	width : 25px;
}
    
td.future{
	border-radius : 8px;
	cursor        : pointer;
	background    : rgba(255,255,255,.3); /*rgba(0,0,0,.3);*/
}
td.future:hover {
   background : rgba(255,255,255,.5);
}
td.past {
	background    : rgba(0,0,0,.1);
	box-shadow    : inset 0 2px 4px rgba(0,0,0,0.15);
	color         : #2b2b2b;
	text-shadow   : 1px 1px 1px white;
	filter        : brightness(40%) contrast(100%);
   border-radius : 8px;
	cursor        : default;
}

.sel{
	width              : 100%;
	padding            : 5px 10px;
	font-size          : 14px;
	border             : 1px solid #807e7e;
	border-radius      : 6px;
	background         : #3f3f3f;
	color              : #f8f8f8;
	-moz-appearance    : none;
	-webkit-appearance : none;
	appearance         : none;

	background-image:
	linear-gradient(45deg, transparent 50%, #fcfcfc 50%),
	linear-gradient(135deg, #fdfdfd 50%, transparent 50%);
	background-position:
	calc(100% - 18px) 50%,
	calc(100% - 12px) 50%;
	background-size:6px 6px;
	background-repeat:no-repeat;
}

.campo_info{
	text-align   : left;
	padding-left : 10px;
	color        : silver;
	font-size    : 80%;
   line-height  : 25px;
   height       : 25px;
}
.txt_book{
	width               : 70%;
	height              : 50px;
	font-size           : 30px;
	background-size     : 30px 30px;
	background-position : 10px 10px;
	background-repeat   : no-repeat;
	padding-left        : 50px;
	text-align          : left;
	border-radius       : 10px;
	outline             : none;
}
.txt_book.new{
	border           : 2px solid #3e3a37;	
	background-color : #3f3f3f;
	color            : white;	
}
.txt_book.booked{
	border           : 2px solid rgba(255,0,0,.2);
	background-color : rgba(200,0,0,0.1);
	color            : #c54a4a;
}

/*MARQUEE */
.marquee-wrap {
  overflow: hidden;
  width: 100%;
}

/* la div interna contiene il testo duplicato e scorre */
.marquee-track {
  display: flex;
  width: max-content;
  animation: scroll 10s linear infinite;
}

/* ogni "pezzo" di testo */
.marquee-item {
  white-space   : nowrap;
  /*padding-right : 60px;*/
  display       : flex;
  align-items   : center;
  gap           : 8px;
}
.link{
	color: silver;
	text-decoration: none;
}

@keyframes scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* pausa al hover */
.marquee-wrap:hover .marquee-track {
  animation-play-state: paused;
}