DIV.cal {
	text-align: center;
	width: 100%;
}

DIV.slot {
	border: solid 1px gray;
	border-top: none;
	position: relative;
	height: 2em;
}

DIV.slot SPAN.time {
	font-size: .5em;
	position: absolute;
	left: 2px;
	top: 2px;
}

DIV.slot.available {
	background: #d3fdd3;
}
DIV.slot.occupied {
	background: #ffb7b7;
}
DIV.slot.me {
	background: green;
	color: white;
}
DIV.slot.available:hover {
	background-color: #87ec87;
	cursor: pointer;
}
DIV.slot.last {
	background-color: #f5ffdb;
}

DIV.day {
	margin-right: .5em;
	display: inline-block;
	color: black;
	width: 30%;
	max-width: 10em;	
}

DIV.dayname {
	font-size: .8em;
	text-align: center;
	padding-bottom: .5em;
	border-bottom: solid 1px gray;
}

A.disabled {
	opacity: .33;
	cursor: default;
}

#panel_add {
	position: relative;
	width: 100% !important;
}

#panel_add #div_data {
	display: inline-block;
	width: calc(100% - 250px) !important;
	margin-bottom: 0;
}

#panel_add DIV.buttons {
	display: inline-block;
	width: 250px;
	text-align: right;	
	justify-self: end;
	margin: 0;
}

.ric_bonus{
	text-transform: uppercase; 
	font-family: "Saira Condensed", sans-serif !important;
	font-size: large;
	line-height: 2.5rem;
}
.ric_bonus.val{
	font-weight: bold;
}

@media screen and (max-width: 767px),
(max-height: 767px) {
	#panel_add #div_data {
		display: block;
		width: 100% !important;
		align-self: center;
		margin-bottom: 1em;
	}
	#panel_add DIV.buttons {
		display: flex;
		align-self: center;
		justify-content: center;
		width: 100% !important;
	}
	DIV.day {
		width: 25%;
	}
	DIV.dayname {
		font-size: .5em;
	}
}

TABLE#lista_prenotazioni td:nth-child(2){
	font-weight: bold;
}
.buttons #date_pre, .buttons #date_post{
	width: 15% !important;
}
.buttons #back{
	width: 35% !important;
}

.pure-button.small {
	font-size: .75em;
}

.nowrap {
	white-space: nowrap;
}

TD.inizio {
	width: 7em;
}

DIV.info_prenotazione SPAN {
	display: inline-block;
	min-width: 4em;
}

DIV.door_box {
	display: inline-block;
	width: 12em;
	margin: 0 .5em;
	text-align: center;
	font-size: 1.33em;
}
DIV.door_box SPAN.spin {
	display: none;  
}

DIV.door_box A.door_button {
	width: 100%;
	display: block;
	opacity: 1;
	border-radius: var(--radius-md) !important;
	background-color: var(--bg_default);
}
DIV.door_box A.door_button:hover {
	text-decoration: none;
	opacity: 1;	
	color: var(--char_col);
}

DIV.door_box A.door_button.enabled {
	opacity: 1;
	background-color: #aae2aa;
	border: outset 2px #8fc68f;
}

DIV.door_box A.door_button.enabled.wait {
	background-color: lime;
}
DIV.door_box A.door_button.enabled.wait SPAN.spin {
	display: inline-block;
	animation: spin 3s linear infinite;	
}

#div_acquisto {
	width: 50% !important;
	padding: 0.5em;
	margin-bottom: 1em;
	border: 1px solid silver;
	border-radius: var(--radius-sm);
	background-color: var(--bg_default);
	align-self: center;
	text-align: center;
}
#btn-annulla {
	width:75%;
    text-transform: uppercase;
}

#admin_buttons {
	margin: 2em 0 1em;
	text-align: center;
}
#admin_buttons A {
	margin: .25em 0 .25em 0 !important;
	background-color: #8c1818;
	width: 90%;
}


#prenotazione_add A.btn {
	min-width: 12em !important;
	max-width: 25% !important;
	margin: 1em !important;
}

.do_cmd:hover{
	text-decoration: none;
}

DIV.alert {
	background: red;
	color: white;
	padding: .5em 1em;
	margin: 2em 0;
	display: inline-block;
}
DIV.alert.done {
	background: #850303;
}

TR.bg_orange TD {
	background-color: #e3ac41;
}
TR.bg_yellow TD {
	background-color: #ffe6b5;
}

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

#card-background{
	/* align-items: start !important; */
	border: none !important;
	align-items: center;
}
.btn-primary, .btn-secondary{
	align-self: center;
	width: 50%;
}
#conferma, #indietro{
	width: 75%;
	margin: 0%;
	margin-bottom: .5em !important;
}

@media screen and (max-width: 767px),
(max-height: 767px) {
	#conferma, #indietro{
		width: 75%;
		max-width: none !important;
	}
	#conferma{
		margin: 0%;
	}
	#indietro{
		margin: .5rem 0%;
	}
	#div_acquisto {
		width: 100% !important; 
		font-size: 2vh !important;
	}
	#spazio {
		display: block !important;
	}

    #card-background{
        align-items: center !important;
    }
	#prossime{
		text-align: center;
	}
	#card-background h2{
		width: 95dvw;
		text-align: center;
	}
    TABLE#lista_prenotazioni td{
        font-size: 1.5vw;
    }
	
	A.btn {
		width: 75% !important;
	}
}