/* ============================
	FONT
   ============================ */

@charset "utf-8";
/* CSS Document */

@font-face {
    font-family: 'VilleroyBoch';
    src: url('../fonts/VilleroyBoch-Bold.eot');
    src: url('../fonts/VilleroyBoch-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/VilleroyBoch-Bold.woff2') format('woff2'),
        url('../fonts/VilleroyBoch-Bold.woff') format('woff'),
        url('../fonts/VilleroyBoch-Bold.ttf') format('truetype'),
        url('../fonts/VilleroyBoch-Bold.svg#VilleroyBoch-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'VilleroyBoch';
    src: url('../fonts/VilleroyBoch.eot');
    src: url('../fonts/VilleroyBoch.eot?#iefix') format('embedded-opentype'),
        url('../fonts/VilleroyBoch.woff2') format('woff2'),
        url('../fonts/VilleroyBoch.woff') format('woff'),
        url('../fonts/VilleroyBoch.ttf') format('truetype'),
        url('../fonts/VilleroyBoch.svg#VilleroyBoch') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* roboto-100 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100;
  src: url('../fonts/roboto-v51-latin-100.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-100italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 100;
  src: url('../fonts/roboto-v51-latin-100italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-200 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 200;
  src: url('../fonts/roboto-v51-latin-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-200italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 200;
  src: url('../fonts/roboto-v51-latin-200italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/roboto-v51-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-300italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 300;
  src: url('../fonts/roboto-v51-latin-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-v51-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/roboto-v51-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/roboto-v51-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-500italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 500;
  src: url('../fonts/roboto-v51-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/roboto-v51-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-600italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 600;
  src: url('../fonts/roboto-v51-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/roboto-v51-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-700italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/roboto-v51-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/roboto-v51-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-800italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 800;
  src: url('../fonts/roboto-v51-latin-800italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/roboto-v51-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-900italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 900;
  src: url('../fonts/roboto-v51-latin-900italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* ============================
			COLORI
   ============================ */

:root {
	--Brand-Primary: #023E84;
	--Brand-Primary-Light: #809EC1;
	--Brand-Primary-Dark: #002851;
	--Brand-Secondary: #ddb57e;
	--Brand-Secondary-Light: #E8CCA6;
	--Brand-Secondary-Dark: #C28633;

	
	--State-Success: #02326a;
	--State-Success-Light: #DDF7DC;
	--State-Error: #9F2B11;
	--State-Error-Main: #B91C1C;
	--State-Error-Light: #FEE2E2;
	--State-Warning: #C38604;
	--State-Warning-Secondary: #C38604;
	--State-Warning-Light: #FEF9C3;
	
	--System-Contrast-background: #F5F5F5;

}


/* ============================
	GENERALI 
   ============================ */

body {
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	font-style: normal;	
	font-size: 16px;
	color: #333;
	Line-height: 150%;
	background-color: #f5f5f5;
	text-align: center;
	/*background-image: url('../img/bg.jpg');
	background-position: top center;
	background-size: contain;
	background-repeat: repeat-y; */
}
.row {
	margin-left:0px;
	margin-right:0px;
}

.h1, .xl, .h2, .h3, .h4, .h5, .h6 {
	font-family: 'VilleroyBoch';
	color: #333;
	font-style: normal;
	font-weight: 700;
	line-height: 110%;
	margin-bottom: 32px;
}

.h1  {
	font-size: 110px;
	line-height: 105%; /* 115.5px */
}
@media (max-width: 767px) {
	.h1  {
	font-size: 56px;
	}
}

.xl {
	font-size: 56px;
	line-height: 105% !important; /* 58.8px */
}

.h2 {
	font-size: 40px;
	letter-spacing: 0.5px;
}
@media (max-width: 767px) {
	.h2  {
	font-size: 28px;
	}
}

.h3 {
	font-size: 32px;
	margin-bottom: 8px !important;
}
@media (max-width: 767px) {
	.h2  {
	font-size: 24px;
	}
}

.h4 {
	font-family: 'Roboto', sans-serif;
	font-size: 28px;
}
@media (max-width: 767px) {
	.h4  {
	font-size: 22px;
	}
}

.h5 {
	font-family: 'Roboto', sans-serif;
	font-size: 24px;
}
@media (max-width: 767px) {
	.h5  {
	font-size: 18px;
	}
}

.bolder {
	font-weight: 700;
	}

.border-left {
	border-left: 4px solid var(--Brand-Primary-dark, #002851) !important;
	border-radius: 0px !important;
	}

.rounded-circle {
	width: 140px;
	height: 140px;
	line-height: 1.2;
	text-transform: uppercase;
}

.rounded-circle.nav {
	font-family: 'Villeroy' !important;
	width: 25px;
	height: 25px;
	line-height: 1.4;
	font-size: 16px;
}

@media (max-width: 767px) {
	.rounded-circle {
	width: 80px;
	height: 80px;
	line-height: 1.4;	
	}
	.border-end {
	border-right: 0px solid transparent !important;
	border-bottom: 1px solid #dee2e6 !important;
	}
	.border-left {
	border-left: 0px solid var(--Brand-Primary-dark, #002851) !important;
	}
}


a {
	color: var(--Brand-Primary);
	text-decoration: none;
}

a.button-text {
	color: var(--Brand-Primary, #023E84);
	text-align: center;
	font-size: 18px;
	font-style: normal;
	font-weight: 700;
	line-height: 130%; 
}

.button-text {
	color: var(--Brand-Primary, #023E84);
	text-align: center;
	font-style: normal;
	font-weight: 700;
	line-height: 130%; 
}

.bg_blu_light {
	background-color: var(--Brand-Primary-Light, #809EC1);
	color: var(--Brand-Primary, #023E84);
}
.bg_blu_dark  {
	background-color: var(--Brand-Primary-Dark);
}

.bg_grey {
	border-radius: 8px;
	padding: 8px 16px;
	background-color: var(--System-Contrast-background, #F5F5F5);
}

.alert {
	font-size: 14px;
	border: 0px solid transparent !important;
	text-align: left !important;
}

.alert-danger {
	background-color: transparent !important;
	color: var(--State-Error) !important;
}

.bg-danger {
	background-color: #ffffff !important;
	font-weight: 700;
	border: 1px solid var(--State-Error) !important;
}
.filter-danger {
	filter: brightness(0) saturate(100%) invert(30%) sepia(19%) saturate(5919%) hue-rotate(337deg) brightness(80%) contrast(111%);
}

.alert-warning {
	color: #333 !important;
}

.bg-warning {
	background-color: #ffffff !important;
	font-weight: 700;
	border: 1px solid var(--State-Warning) !important;
}
.filter-warning {
	filter: brightness(0) saturate(100%) invert(54%) sepia(54%) saturate(4276%) hue-rotate(21deg) brightness(99%) contrast(97%);
}

.alert-verifica {
	background-color: transparent !important;
	color: #333 !important;
}

.bg-verifica {
	background-color: #ffffff !important;
	font-weight: 700;
	border: 1px solid #333 !important;
}
.filter-verifica {
	filter: brightness(0) saturate(100%) invert(10%) sepia(89%) saturate(5%) hue-rotate(314deg) brightness(101%) contrast(79%);
}

.alert-success {
	background-color: transparent !important;
	color: var(--State-Success) !important;
}
.bg-success {
	background-color: #ffffff !important;
	font-weight: 700;
	border: 1px solid var(--State-Success) !important;
}
.filter-success {
	filter: brightness(0) saturate(100%) invert(16%) sepia(100%) saturate(3882%) hue-rotate(146deg) brightness(92%) contrast(89%);
}

.alert-primary {
	border: 1px solid var(--System-Borders, #A2B0C3) !important;
	background: var(--Brand-Primary-Ultralight, #D9E2EC) !important;
	color: var(--Brand-Primary-dark, #002851) !important
}
.filter-primary {
	filter: brightness(0) saturate(100%) invert(10%) sepia(70%) saturate(2191%) hue-rotate(195deg) brightness(99%) contrast(101%);
}

.alert-dismissible .btn-close {
	opacity: 1;
}

   .sfondo {
	display: flex;
	padding: 48px 64px;
	flex-direction: column;
	align-items: center;
	margin-bottom: 16px;
	align-self: stretch;   
   	border-radius: 12px;
	background-color: var(--System-Background, #FFF);
   }

	@media (max-width: 575px) {
		.sfondo {
			display: flex;
			padding: 32px 16px;
			flex-direction: column;
			align-items: center;
			margin-bottom: 16px;
			align-self: stretch;   
			border-radius: 12px;
			background: var(--System-Background, #FFF);
	   }
   }

	.progress {
		background: var(--System-Borders, #A2B0C3) !important;
   }

	.progress-bar {
		background: var(--Brand-Primary, #023E84) !important;
   }

	.step img {
		transform: translateY(-60px);
   }
	@media (max-width: 575px) {
		.step img {
		width: 100px !important;	
		transform: translateY(-50px);
		}	
   }

	.effetto_scroll {
	  justify-content: center !important;
	}
	
	@media (max-width: 991px) {
		.effetto_scroll {
		justify-content: left !important;
		overflow-x: auto !important;
		flex-wrap: nowrap !important;
		}
	}
	.product {
	  max-width: 300px !important;
	}
	@media (max-width: 1200px) {
		.product {
		max-width: 285px;
		}
	}
/* ============================
			MENU
   ============================ */

   .skip-to-main-content-link {
   	position: absolute;
   	left: -9999px;
   	z-index: 999;
   	padding: 1em;
   	background-color: black;
   	color: white;
   	opacity: 0;
   }
   .skip-to-main-content-link:focus {
   	left: 50%;
   	transform: translateX(-50%);
   	opacity: 1;
   }

	.logo {
   	  width: 215px !important;
   }
	@media (max-width: 992px) {
		.logo {
		  width: 115px !important;
	   }		
   	}

   #attiva_menu {
   	max-width: 30px;
	  margin: 16px 0px;
	  cursor: pointer;
   }

   #menu {
   	border-bottom: 1px solid var(--System-Borders, #A2B0C3);
	background: var(--System-Background, #FFF);
   	/*border-bottom: 4px solid #ffffff;
   	box-shadow: 0px 5px 5px rgba(0,0,0,.2);
   	z-index: 2000;
   	position: relative;*/
   }
	
	#menu_list {   
		margin-left: 5px !important;
	}

   #menu_list a {   
   	text-align: center;
   	text-decoration: none;
   	padding: 5px 10px;
	margin: 2rem 0px 0px 1rem;   
	color: var(--System-Title, #333);
	font-family: 'VilleroyBoch';
	font-size: 18px;
	font-style: normal;
	font-weight: 700;
	line-height: 130%; /* 23.4px */   
   }

	@media (max-width: 1100px) {
		#menu_list a {   
			font-size: 15px;
		   }
	}



   @media (max-width: 991px) {
   	#menu_list {
   		float: none; 		
   	}
   	#menu_list a {
		display: block;
   		text-align: left;
		font-size: 18px;
		margin: 1rem 0px 1rem 0px;
   	}
	.login_header {
   		text-align: center !important;
   	}
   }


   @media (max-width: 1199px) {

   	#menu_list {
   		margin-left: 45px;	
   	}
   }

   @media (max-width:991px) {

   	#menu_list {
   		margin-left: 0px;	
   	}
   }

   #menu_list a:hover, #menu_list a.active {
   	text-decoration: none !important;
   	color: var(--Brand-Primary);
   }

	.modal-body {
		background-color: #fff;
	}

	#login_header {
	background: var(--Brand-Primary);
	color: #ffffff !important;
	border-radius: 4px;
	border: 2px solid var(--Brand-Primary);	
	padding: 12px 24px;
	font-family: 'Roboto', sans-serif !important;	
}

/* ============================
	FORM
   ============================ */

   .form-control, .form-select {
	display: flex;
	padding: 17px 16px;
	align-items: center;
	align-self: stretch;   
   	border-radius: 4px;
	border: 1px solid var(--System-Borders, #A2B0C3);
   	color: #000000;  
   }

	.form-control::focus, .form-select::focus {
	border-color: var(--Brand-Primary, #023E84);
   }

   .form-group {
   	margin-bottom: 24px;
   }

	.form-control::placeholder, .form-select::placeholder {
	    color: var(--System-Placeholder, #949494);
		font-size: 14px;
		font-style: normal;
		font-weight: 400;
		line-height: 150%; /* 21px */
	}

	label {
   	color: var(--System-Title, #313F3E);
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 150%; /* 21px */
	text-align: left;
	float: left;	
	margin-bottom: 8px;	
	margin-top: 32px !important;
   }

	label[for=reg], label[for=tratt_dati]  {
		display: block;
	}

   label a {
   	color: var(--Brand-Primary, #023E84);
   	font-weight: bold;
   }

   .small {
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: 150%; /* 18px */
	text-align: left !important;   
   }
 
	.button {
		display: flex;
		background: var(--Brand-Primary);
		color: #ffffff !important;
		border-radius: 4px;
		border: 2px solid var(--Brand-Primary);	
		font-weight: bold;
		font-size: 18px;
		margin-bottom: 32px;
		padding: 12px 24px;
		justify-content: center;
		align-items: center;
		width: 100%;
	}

	.button:hover {	
		color: var(--Brand-Primary) !important;
		background: #ffffff ;
	}
	
	.button2 {
		display: flex;
		background: transparent;
		color: var(--Brand-Primary) !important;
		border-radius: 4px;
		border: 2px solid var(--Brand-Primary);	
		font-weight: bold;
		font-size: 18px;
		margin-bottom: 32px;
		padding: 12px 24px;
		justify-content: center;
		align-items: center;
		width: 100%;
	}

	.button2:hover {	
		color: #ffffff !important;
		background: var(--Brand-Primary) ;
	}


	a:focus-visible, .button:focus-visible, .button2:focus-visible,  {	
		box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.6) !important;
	}

	@media (max-width: 375px) {
		.button, .button2 {
			font-size: 1rem;
		}
	}


#ocr {
	font-size: 1.2rem !important;
}

   @media (max-width: 575px) {
   	label {
   		font-size: .80rem;
   	}
   }

.modal-body {
	background-color: #4D7BBC;
}

	
	.border-bottom {
	border-right: 0px solid transparent !important;
	border-top: 0px solid transparent !important;
	border-left: 0px solid transparent !important;
   }

	.add {
		border-radius: 4px;
		border: 2px dashed var(--System-Borders, #A2B0C3);
		color: var(--Brand-Primary, #023E84);
		font-size: 16px;
		font-style: normal;
		font-weight: 400;
		line-height: 130%; /* 20.8px */
		display: flex;
		padding: 24px 0;
		justify-content: center;
		align-items: center;
	}



/* ============================
	FOOTER
   ============================ */
   footer {
   	font-family: 'Roboto';
   	font-size: 14px;
   	font-weight: 300;
   	font-style: normal;
	line-height: 150%; /* 21px */
   }

   footer p {
   	color:#333333;
   	font-family: 'Roboto';
   	font-weight: 300;
   	font-style: normal;
   }

   footer a {
   	color:#333333;
   	text-decoration: none;
   	font-weight: 300;
   }

	footer a:hover {
   	color: var(--Brand-Primary);
   }

	.footer_list_start a, .footer_list_end a {
   	margin: 0px 0px 0px 1rem;
   }

	.footer_list_start a {
   	float: left;
   }

	/*.footer_list_end a {
   	float: right;
   }*/

	@media (max-width:650px) {
		.footer_list_start a {
		float: none;
    	margin: 0px 1rem 0px 1rem;	
	   }
		
		.footer_list_end a {
		float: none;
		text-align: center !important;	
		display: block;	
	   	margin: 0.5rem 1rem;	
	   }
	}


/* =========================
	COOKIE BAR
	======================= */

	.cc-window {
		font-size: .85rem !important;
		line-height: 1.2em !important;
	}

	@media (max-width:767px) {
		.cc-window {
			font-size: .75rem !important;
			line-height: 1.1em !important;
		}
	}


/* ==============================
		TIMER
	============================= */




/*TIMER*/
.container_timer {
  position: relative;
  margin: auto;
  overflow: hidden;
  max-width: 640px;	
}

#timer {
    color: white;
    font-size: 2.5rem;
	font-weight: bold;
	line-height: 1.5;
}

#timer div {
    display: inline-block;
    background: rgb(255,255,255);
    background: linear-gradient(0deg, rgba(255,255,255,100) 32%, rgba(0,40,81,1) 32%);
    border-radius: 4px;
    margin: 20px;
    /*box-shadow: 3px 3px 6px #000000;*/
    position: relative;
    margin: auto;
    overflow: hidden;
    margin-top: 5px;
    font-family: 'roboto';
}


#timer div span {
    color: #333;
    display: block;
    margin-top: 1px;
    padding-top: 1%;
    font-size: 0.45em;
    font-family: 'roboto';
}

#timer::after {
	content: "!";
	font-size: 6.7rem;
	color: #333;
	margin-top: -30px;
	font-family: "roboto";
	}

@media (max-width:640px) {

    /*TIMER*/
.container_timer {
  position: relative;
  margin: auto;
  overflow: hidden;
}

#timer {
    color: white;
    font-size: 1.75rem;
    font-family: 'roboto';
}
	
#timer div {
    display: inline-block;
    background: rgb(255,255,255);
    background: linear-gradient(0deg, rgba(255,255,255,100) 32%, rgba(0,40,81,1) 32%); 
    border-radius: 4px;
    margin: 5px;
    /*box-shadow: 3px 3px 6px #000000;*/
    position: relative;
    margin: auto;
    overflow: hidden;
    margin-top: 5px;
}

#timer div span {
    color: #333;
    display: block;
    margin-top: 1px;
    padding-top: 1%;
    font-size: .45em;
    font-family: 'roboto';
}  
	
	#timer::after {
	content: "";
	font-size: 0rem;
	color: #303133;
	font-family: "Roboto";
}
}

@media (max-width: 575px) {

	.container_timer {
		padding-right: 0px !important;
		padding-left: 0px !important;
	}
	
	#timer {
		color: white;
		font-size: 1.45rem;
		font-family: 'roboto';
	}
	
	#timer div {
		background: linear-gradient(0deg, rgba(255,255,255,100) 32%, rgba(0,40,81,1) 32%);
		border-radius: 6px;
		margin: 3px;
		box-shadow: 2px 2px 4px #000000;
	}
}


@media (max-width:360px) {
	#timer {
    font-size: 1.25rem;
}
 
#timer div {
    padding: 2px;
} 
}

/* pagina dettagli_prodotto */

  dl, .includes-list {
			text-align: left !important;
		}
  
    /* ── Back link ── */
    .back-link {
      color: var(--Brand-Primary);
      font-size: .9rem;
      font-weight: 400;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: .3rem;
    }
    .back-link:hover { text-decoration: underline; }

    /* ── Product heading ── */
    .brand-label {
      font-size: .7rem;
      letter-spacing: .12em;
      text-transform: uppercase;
      margin-bottom: .2rem;
    }
    .product-title {
      font-family: 'Roboto', sans-serif;
      font-size: 2.4rem;
      font-weight: 700;
      line-height: 1.1;
      margin-bottom: .25rem;
    }
    @media (max-width: 767px) { .product-title { font-size: 1.8rem; } }

    .product-subtitle {
      font-size: .9rem;
      margin-bottom: 1rem;
    }

    /* ── Soglia badge ── */
    .soglia-badge {
      font-size: 1rem;
      font-weight: 700;
    }
    .dot-available {
      width: 10px; height: 10px;
      border-radius: 50%;
      display: inline-block;
      margin-right: .35rem;
      flex-shrink: 0;
    }
    .availability-text {
      font-size: .82rem;
      font-weight: 400;
    }

    /* ── Includes list ── */
    .includes-list {
      padding-left: 1rem;
      margin-bottom: 1.5rem;
    }
    .includes-list li { margin-bottom: .2rem; }

    /* ── Color swatches ── */
    .swatch-label { font-size: .88rem; margin-bottom: .6rem; }
    .swatch-label strong { font-weight: 500; }
    .swatches { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
    .swatch {
      width: 62px; height: 62px;
      border: 2px solid transparent;
      border-radius: 2px;
      overflow: hidden;
      cursor: pointer;
      background: var(--System-Contrast-background);
      transition: border-color .15s;
    }
    .swatch img { width: 100%; height: 100%; object-fit: cover; }
    .swatch.active,
    .swatch:focus-visible {
      border-color: var(--Brand-Primary);
      outline: 3px solid var(--Brand-Primary);
      outline-offset: 2px;
    }
    .swatch-more {
      font-size: .82rem;
      color: var(--Brand-Primary);
      font-weight: 500;
      white-space: nowrap;
      background: none;
      border: none;
      padding: 0;
      cursor: pointer;
      text-decoration: underline;
    }

    /* ── Gallery ── */
    .gallery-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4px;
    }
    .gallery-grid .main-img { grid-column: 1; grid-row: 1; }
    .gallery-grid img {
      width: 100%; height: 100%;
      object-fit: cover;
      display: block;
      background: var(--System-Contrast-background);
    }
    .gallery-item { background: var(--System-Contrast-background); }

    .btn-mostra {
      border: 1.5px solid #023E84;
      background: transparent;
      color: #023E84;
      border-radius: 4px;
      padding: .5rem 1.4rem;
      font-size: .88rem;
      font-weight: 400;
      display: inline-flex;
      align-items: center;
      gap: .4rem;
      cursor: pointer;
      transition: background .2s;
      text-decoration: none;
    }
    .btn-mostra:hover { background: #eee; }

    /* ── Accordion (dettagli / descrizione) ── */
    .accordion-vb .accordion-button {
      font-weight: 700;
      font-size: 1rem;
      color: var(--Brand-Primary);
      background: transparent;
      box-shadow: none;
      padding: 1.1rem 0;
    }
    .accordion-vb .accordion-button:not(.collapsed) { color: var(--Brand-Primary); }
    .accordion-vb .accordion-button::after {
      filter: none;
    }
    .accordion-vb .accordion-item {
      border: none;
      border-top: 1px solid var(--System-Borders);
      background: transparent;
      border-radius: 0 !important;
    }
    .accordion-vb .accordion-body { padding: 0 0 1.5rem; }

    /* ── Specs table ── */
    .specs-row {
      display: flex;
      gap: 1rem;
      padding: .45rem 0;
      border-bottom: 1px solid var(--System-Borders);
      font-size: .88rem;
    }
    .specs-row:last-child { border-bottom: none; }
    .specs-key { font-weight: 700; min-width: 200px; flex-shrink: 0; }
    .specs-val { font-weight: 300; }
    @media (max-width: 575px) {
		
		.specs-row {
	display: block;
	}
      .specs-key { min-width: 130px; }
    }

    
    /* ── sfondo card ── */
    .sfondo_card {
      display: flex;
      padding: 48px 64px;
      flex-direction: column;
      align-items: flex-start;
      background: #fff;
      border-radius: 12px;
    }
    @media (max-width: 991px) { .sfondo_card { padding: 48px 0px; } }
	@media (max-width: 991px) { 
		.sticky-top {
			position: relative !important;
			top: 0;
			z-index: 1020;
		}
	}