body {font-family: 'Lato', sans-serif;}
    h3 {font-size: 18px;}    


.bianco {color: #ffffff !important;}
a {
    color: none;
    text-decoration:none;
}
.content, .content--horizontal, .content--vertical {
    margin: 0px auto;
   /* max-width: 640px;*/
    padding: 20px;
    max-width: 480px!important;
    height: 100%;
    min-height: 100vh !important;
    overflow: hidden;
    display: block;
    position: relative;
}  

.live-relative {
    position: relative;
}

/* Spacing tra bottoni del topbar destro per evitare collisione bottoni live + dropdown */
.topbar-mda .btn,
.topbar-mda .my-button {
    margin-left: 4px;
    vertical-align: middle;
}
/* Il bottone Live (sync icon) ha bisogno di un pelo in più a destra per il badge */
.topbar-mda .btn.live-relative {
    margin-right: 8px;
}

.live-absolute {
    position: absolute;
    top: 1px;
    right: 1px;              /* interno al bottone, zero sbordo sui vicini */
    background-color: #DC2626;
    color: #fff;
    border-radius: 999px;
    padding: 1px 5px;
    font-size: 9px;
    font-weight: 800;
    line-height: 1.3;
    min-width: 12px;
    max-width: 28px;
    text-align: center;
    z-index: 2;
    pointer-events: none;
}



/* Base styles */
        .form-group-container {
            display: flex;
            flex-wrap: wrap;
            gap: 10px; /* Spaziatura tra i gruppi di form */
        }

        .form-group {
            box-sizing: border-box; /* Assicurati che padding e bordo siano inclusi nella larghezza */
        }

        /* Stili per desktop */
        @media (min-width: 768px) {
            .form-group-0 { width: 0%; }
            .form-group-25 { width: calc(25% - 10px); }
            .form-group-33 { width: calc(33.33% - 10px); }
            .form-group-50 { width: calc(50% - 10px); } /* Sottrai la spaziatura */
            .form-group-66 { width: calc(66.66% - 10px); }
            .form-group-75 { width: calc(75% - 10px); }
            .form-group-100 { width: 100%; }
			.overlay600 { width: 600px;height: 700px;overflow: hidden;}
        }

        /* Stili per dispositivi mobili */
        @media (max-width: 767px) {
            .form-group {
                width: 100%;
            }
        }

        /* Stile per il pulsante */
        .form-group-container button {
            margin-top: 20px; /* Aggiungi margine superiore per avvicinarlo */
            align-self: flex-start; /* Allinea il pulsante a sinistra */
        }

        .horizontal-scroll {
            display: flex;
            overflow-x: auto;
            white-space: nowrap;
        }
        
        /* Stile per barra di scorrimento */
        .horizontal-scroll::-webkit-scrollbar {
            height: 8px;
        }

        .horizontal-scroll::-webkit-scrollbar-thumb {
            background-color: #ccc;
            border-radius: 4px;
        }


    
#datepicker {background-color: #fff; margin-bottom: 30px; border-radius: 10px; max-width: 400px;}
    .day {padding: 12px; font-weight: 400;}  
    .table-condensed {width: 100%;}
    .datepicker-inline {width: 100%;}
    .datepicker-switch {padding: 20px; font-size: 1.5em;}
    
    td.disabled.day { border: none;}
    td.old.disabled.day {border: none;}
    td.day { border: 1px solid rgb(205,220,226);}
    td.active.day {border-radius: 0px !important;}
    
    .next {font-size: 26px; border-radius: 0px;}
    .selpax  {background-color: #fff; margin-bottom: 30px; padding-top: 15px; padding-bottom: 15px;  padding-left: 10px; border-radius: 0px; border: 1px solid rgb(205,220,226); }  
    .form_radio_btn {display: inline-block;	margin-right: 10px;}

    .form_radio_btn input[type=radio] {	display: none;}
    .form_radio_btn label {
    display: inline-block;
    cursor: pointer;
    width: 97px;
    text-align: center;
    /* padding: 0px 30px; */
    line-height: 34px;
    border: 1px solid rgb(205,220,226);
    border-radius: 0px;
    margin-bottom: 11px;
    user-select: none;
}

.form_radio_btn:hover label {
    background-color: #f8f8f8;
}    
.active   {
	background-color: #000 !important;
    color:#fff;
    background-image: linear-gradient(to bottom,#000000,#000000) !important;
}  
    
/* Checked */
.form_radio_btn input[type=radio]:checked + label {
	background: #4e4e56;
    color:#fff;
}
 
/* Hover */
.form_radio_btn label:hover {
	color: #666;
}
 
/* Disabled */
.form_radio_btn input[type=radio]:disabled + label {
	background: #efefef;
	color: #666;
}    
.finestra {display: none;}  
.ver {display: none; 	   
    background: #4e4e56;
    color: #fff;
    border-radius: 3px;
    border: none;
    padding: 10px; }  
    
    
.left {float: left; width: 100%; padding: 20px;}


.right { float: left; width: 100%; padding: 20px; }  
   

#verifica {
        margin-top: 30px;
        display: block;
        width: 100%;
        float: left;
        text-align: center;
        font-size: 11px;
}    
input[type="number"] {
  -moz-appearance: textfield;
}
input[type="number"]::-webkit-inner-spin-button, 
input[type="number"]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}   
.zero {background-color: crimson; color:#fff;border:none; border: 1px solid #000000;}  

div[class^="data-cell"] {
 float: left;
}
div[class^="data-row"] {
clear: both;
}
@media (min-width: 1024px) and (max-width: 4860px) {
	 body {touch-action:pan-x pan-y; margin: 0px;}  
     .nomobile {display: null;}
	 .nodesktop {display: none;}
}
@media (min-width: 0px) and (max-width: 1024px) {

  body { touch-action: pan-x pan-y;margin: 0;}
    .nomobile {display: none !important;}   /* !important: batte il display:flex inline del nome */
    .nodesktop {display: block !important;} /* barra bottoni mobile dentro la topbar */

}
.topbar-mda {
  position: fixed;
  box-sizing: border-box;
}
.mda-zoom-controls {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: none;
  align-items: center;
  gap: 6px;
  color: #fff;
  font-size: 12px;
  white-space: nowrap;
}
.mda-zoom-controls .btn {
  padding: 2px 8px;
  line-height: 1.2;
}
.mda-zoom-label {
  min-width: 46px;
  text-align: center;
  letter-spacing: 0.3px;
}
:root {
  --mda-zoom: 1;
}
@media (min-width: 768px) {
  .mda-zoom-controls {
    display: flex;
  }
  body {
    zoom: var(--mda-zoom);
  }
  .contenta {
    width: calc(100% / var(--mda-zoom));
  }
}
.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #04AA6D;
  color: white;
}  
.leftnav {  
float: left;
width: 335px;
background-color: #fff;    
}
.page-bolall .leftnav {
  display: none;
}
.cont {    float: left;
    width: calc(98% - 320px);
	margin: 30px 0px;
    padding: 20px;
}
    
    
.tab td {/* padding: 15px;*/}    
.odd {background-color: #FFF;}
.even {background:#F6F6F6;}

.tab tr:nth-child(odd) {
    background-color: #f2f2f2; /* Colore delle righe dispari */
}
.tab tr:nth-child(even) {
    background-color: #00000015 /* Colore delle righe pari */
}


.verde {background-color: green;}
.rosso {background-color: firebrick;}
.arancio {background-color: orange;}
.blu  {background-color: darkblue;}
.fwhite {color: white;}
.color1 {background-color: #3F7C85; color: #fff;}    
.color2 {background-color: #3D5D7D; color: #fff;}    
.color3 {background-color: #000; color: #fff;}   
.color3:hover {background-color: #0c2c60; color: #fff;}        
.sel { background-color:#007bff; color:#fff; } 
.sel:hover  { background-color: #373737; color:#fff; } 	
#datepicker {background-color: #fff; margin-bottom: 30px; border-radius: 10px; max-width: 400px;}
    .day {padding: 12px; font-weight: 400;}  
    .table-condensed {width: 100%;}
    .datepicker-inline {width: 100%;}
    .datepicker-switch {padding: 20px; font-size: 1.2em; text-align: center;}
    
    td.disabled.day { border: none;}
    td.old.disabled.day {border: none;}
    td.day { border: 1px solid rgb(205,220,226);}
    td.active.day {border-radius: 0px !important;}
    .prev {font-size: 26px; border-radius: 0px;text-align: center;}
    .next {font-size: 26px; border-radius: 0px;text-align: center;}
.dow {text-align: center;}
    .selpax  {background-color: #fff; margin-bottom: 30px; padding-top: 15px; padding-bottom: 15px;  padding-left: 10px; border-radius: 0px; border: 1px solid rgb(205,220,226); }  
    .form_radio_btn {display: inline-block;	margin-right: 10px;}

    .form_radio_btn input[type=radio] {	display: none;}
    .form_radio_btn label {
    display: inline-block;
    cursor: pointer;
    width: 97px;
    text-align: center;
    /* padding: 0px 30px; */
    line-height: 34px;
    border: 1px solid rgb(205,220,226);
    border-radius: 0px;
    margin-bottom: 11px;
    user-select: none;
}

.custom-button {
  display: inline-block;
  padding: 10px 10px;
  background-color: #007bff;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 0.3s;
	margin: 2px;
}
.custom-button:hover {
  display: inline-block;
  padding: 10px 10px;
  background-color: #0E65AD;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 0.3s;
}
    
    
.custom-button.active {
  background-color: #0056b3;
}
.grayed-out {
	color: #ccc;
}
td.day.back {
    color: #cdcdcd;
}



/* Stile per il pop-up overlay */
        .overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            display: none;
            z-index: 9999;          /* Sopra a topbar, datepicker, footer */
        }

        .overlay-content {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            text-align: center;
            width: 90%;
            max-width: 1100px;
            max-height: 88vh;        /* Altezza ampia, mantiene margine */
            overflow: auto;
            box-shadow: 0 20px 60px rgba(0,0,0,.3);
            z-index: 10000;
        }

.overlay600 {
    
    max-width: 960px;
	width: 80vw;
	max-height: 800px;
    height: 80vh;
    overflow: hidden;
        
}
iframe {
    border: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
}
 .my-button {
            background-color: #4CAF50;
            color: #fff;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
	 cursor: pointer; }


.my-bgreen {
            background-color: #4CAF50;
            color: #fff;
            padding: 5px 10px;
            border: none;
            border-radius: 5px;
	 cursor: pointer; }

.my-bred {
            background-color:#C8292B;
            color: #fff;
            padding: 5px 10px;
            border: none;
            border-radius: 5px;
	 		cursor: pointer; }


	        /* Stile per la tabella nell'overlay */
        .overlay-content table {
            width: 100%;
            border-collapse: collapse;
        }
        
        .overlay-content table th, .overlay-content table td {
            padding: 8px;
        }
        
        /* Alternanza colore righe solo per la stampa */
        @media print {
            .overlay-content table tr:nth-of-type(even) {
                background-color: #f9f9f9; /* Grigio chiarissimo */
            }
        }



.btnover {width: 150px; margin-bottom: 15px; clear:both;}

/* Stile per il popup overlay */
.popupmda-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  justify-content: center;
  align-items: center;
	z-index: 999;
}

/* Stile per il contenuto del popup */
.popupmda-content {
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
  text-align: center;
  width: 90%; 
}

.popupmda-content h2 {
  margin-top: 0;
}

#close-popupmda {
  margin-top: 10px;
  background-color: #333;
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}

#close-popupmda:hover {
  background-color: #555;
}

.dropdown-m {
	display: inline;
	
}
/* Stile del menu a discesa nascosto per impostazione predefinita */
.dropdown-m .dropdown-content-m {
  display: none;
  position: absolute; /* Imposta il posizionamento assoluto */
  top: 30px; /* Posiziona il menu sotto il bottone */
  right: 0; /* Allinea il menu con il bordo sinistro del bottone */
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Mostra il menu a discesa quando si fa clic sul bottone */
.dropdown-m:hover .dropdown-content-m {
  display: block;
}

/* Stile delle voci del menu */
.dropdown-content-m a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
 
/* Cambia lo stile delle voci del menu al passaggio del mouse */
.dropdown-content-m a:hover {
  background-color: #f2f2f2;
}
.custom-tooltip {
            position: relative;
            display: inline-block;
            cursor: pointer;
}
.custom-tooltip .custom-tooltiptext {
            visibility: hidden;
            width: 200px;
            background-color: #555;
            color: #fff;
            text-align: center;
            border-radius: 5px;
            padding: 10px;
            position: absolute;
            z-index: 1;
            bottom: 125%; /* Posiziona il tooltip sopra il testo */
            left: 50%;
            margin-left: -100px; /* Usa metà della larghezza per centrare il tooltip */
            opacity: 0;
            transition: opacity 0.3s;
        }

        .custom-tooltip .custom-tooltiptext::after {
            content: '';
            position: absolute;
            top: 100%; /* In fondo al tooltip */
            left: 50%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: #555 transparent transparent transparent;
        }

        .custom-tooltip:hover .custom-tooltiptext {
            visibility: visible;
            opacity: 1;
        }

@media only screen and (min-width: 993px) {
 .leftnav {float: left; padding: 0px; height: 100vh;}
}


@media screen and (max-width: 992px) {
.overlay600 {
    
    width: 80vw;
    height: 75vh;
    overflow: hidden;
        
}	
	
 .content, .content--horizontal, .content--vertical {
    margin: 0px auto;
    max-width: 560px;
    padding: 20px;
}    
    .form_radio_btn label { width: 68px; }    
    
.left {float: left; width: 100%; padding: 0px;}
.right { float: left; width: 100%; padding: 0px; }  
	
.leftnav {float: left; width: 100%; padding: 0px;}
.rightnav { float: left; width: 100%; padding: 0px; }  	
.cont {
    float: left;
    width: calc(100%);
    padding: 20px;
	margin: 0px 0px;
	overflow: hidden;
}
	
.tab td {
    padding: 10px;
}	
	
}   
/* Margin Top Classes */
.mt5 { margin-top: 5px; }
.mt10 { margin-top: 10px; }
.mt15 { margin-top: 15px; }
.mt20 { margin-top: 20px; }
.mt25 { margin-top: 25px; }
.mt30 { margin-top: 30px; }
.mt35 { margin-top: 35px; }
.mt40 { margin-top: 40px; }
.mt45 { margin-top: 45px; }
.mt50 { margin-top: 50px; }
.mt55 { margin-top: 55px; }
.mt60 { margin-top: 60px; }
.mt65 { margin-top: 65px; }
.mt70 { margin-top: 70px; }
.mt75 { margin-top: 75px; }
.mt80 { margin-top: 80px; }
.mt85 { margin-top: 85px; }
.mt90 { margin-top: 90px; }
.mt95 { margin-top: 95px; }
.mt100 { margin-top: 100px; }
.mt105 { margin-top: 105px; }
.mt110 { margin-top: 110px; }
.mt115 { margin-top: 115px; }
.mt120 { margin-top: 120px; }
.mt125 { margin-top: 125px; }
.mt130 { margin-top: 130px; }
.mt135 { margin-top: 135px; }
.mt140 { margin-top: 140px; }
.mt145 { margin-top: 145px; }
.mt150 { margin-top: 150px; }

/* Margin Bottom Classes */
.mb5 { margin-bottom: 5px; }
.mb10 { margin-bottom: 10px; }
.mb15 { margin-bottom: 15px; }
.mb20 { margin-bottom: 20px; }
.mb25 { margin-bottom: 25px; }
.mb30 { margin-bottom: 30px; }
.mb35 { margin-bottom: 35px; }
.mb40 { margin-bottom: 40px; }
.mb45 { margin-bottom: 45px; }
.mb50 { margin-bottom: 50px; }
.mb55 { margin-bottom: 55px; }
.mb60 { margin-bottom: 60px; }
.mb65 { margin-bottom: 65px; }
.mb70 { margin-bottom: 70px; }
.mb75 { margin-bottom: 75px; }
.mb80 { margin-bottom: 80px; }
.mb85 { margin-bottom: 85px; }
.mb90 { margin-bottom: 90px; }
.mb95 { margin-bottom: 95px; }
.mb100 { margin-bottom: 100px; }
.mb105 { margin-bottom: 105px; }
.mb110 { margin-bottom: 110px; }
.mb115 { margin-bottom: 115px; }
.mb120 { margin-bottom: 120px; }
.mb125 { margin-bottom: 125px; }
.mb130 { margin-bottom: 130px; }
.mb135 { margin-bottom: 135px; }
.mb140 { margin-bottom: 140px; }
.mb145 { margin-bottom: 145px; }
.mb150 { margin-bottom: 150px; }

.sp5  { height: 5px; }
.sp10 { height: 10px; }
.sp15 { height: 15px; }
.sp20 { height: 20px; }
.sp25 { height: 25px; }
.sp30 { height: 30px; }
.sp35 { height: 35px; }
.sp40 { height: 40px; }
.sp45 { height: 45px; }
.sp50 { height: 50px; }