@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
body {
    margin: 0px;
    font-size: 0.9em;
    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: normal;
    font-variation-settings: "width";
    color: #666666;
    text-align: left;
    background-attachment: fixed;
    background-color: #FFFFFF;
    background-size: cover;
}
#wrapper {
    width: 100%;
    height: auto !important;
    min-height: 250px;
    overflow: hidden;
}
A:link {
    color: #0066FF;
    font-size: 1em;
    text-decoration: none;

}
A:hover {
     text-decoration: underline;
}
A:visited {
    color: #0066FF;
    font-size: 1em;
    text-decoration: none;
}
A.LinkBox:link {
    color: #FFFFFF;
    text-decoration: none;
}
A.LinkBox:visited {
    color: #FFFFFF;
    text-decoration: none;
}

A.LinkStazioniUserMenu:link {
    color: #FFFFFF;
    text-decoration: none;
    font-weight: normal;
    text-transform: uppercase;
    word-spacing: 3px;
}
A.LinkStazioniUserMenu:visited {
    color: #FFFFFF;
    text-decoration: none;
    font-weight: normal;
}
A.LinkStazioniUserMenu:hover {
    color: #FF3300;
}
A.LinkMenuFooter:link
{
    color: #666666;
    font-size: 1em;
    text-decoration: none;
}
A.LinkMenuFooter:hover {
    color:#FF0000;
}
A.LinkMenuFooter:visited {
    color: #666666;
    font-size: 1em;
    text-decoration: none;
}
.ImgResp img {
    width: 100%;
    max-width: 1200px;
    height: auto;
}
.h1 {
    color: #FFFFFF;
    padding-top: 4px;
    padding-bottom: 4px;
    font-size: 1em;
}
.h2 {
    padding-top: 4px;
    padding-bottom: 4px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #FFFFFF;
    font-weight: bold;
    font-size: 1em;
}
.webcam-container{
    text-align :center;
    width :100%;
}
.b {
    font-weight: bold;
}
.canvasMap {
    width: 100%; /* per farlo scalare visivamente */
    height: 100%;
}

.ClearAll {
    clear: both;
}
.cGrenn {
    color: #007600;
}
.cOrange{
    color: #FF9700;
}
.cRed {
    color: #FF0000;
}
.Dn {
    display: none;
}
.Dy {
    display: block;
}
.DivCanvas {
    aspect-ratio :7/4;
    width: 100%;
    max-width: 700px; /* opzionale, per non superare le dimensioni originali */
}
.DivContenuto {
    margin: 0px auto 0px auto;
    width: 1040px;
}
.DivContenutoPrincipale {
    width :712px;
    float :left;
}
.DivContenutoDx {
    width: 300px;
    float:right;
}

.DivFooter {
    border: 0px solid #C0C0C0;
    padding: 5px;
    margin: 0px auto 0px auto;
    width: 1040px;
}

.DivFooterCount {
    display: flex;
    align-items: center;
    background-position: top;
    text-align: center;
    background-image: url('../images/counter.png');
    background-repeat: no-repeat;
    width: 100px;
    color: #FFFFFF;
    font-size: small;
}

.DivFooterLink {
    display: flex;
    flex-direction: row;
    align-items: center;
    text-align: left;
    margin-top: 10px;
    gap: 10px;
}

.DivFooterMenu {
    width: 100%;
    display: flex;
    flex-direction: row;
    margin-top: 10px;
    gap: 10px;
}
    .DivFooterMenu div:first-child {
        flex: 1;
    }
    .DivFooterMenu div {
    }

.DivFooterMenuLogo {
    width: 250px;
    margin-bottom:10px;
}

.DivFooterNote {
    font-size: 0.90em;
    text-align: left;
    margin-top: 10px;
}

.DivFooterWrapper {
    margin-top: 5px;
    border-top-style: solid;
    border-top-width: 1px;
    border-top-color: #C0C0C0;
    background-color: #E7E7E7;
    background-image: url('../images/background-footer.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

.DivGraphDati {
    width :100%;
    margin-bottom: 10px;
}
.DivGraphOdo {
    text-align: center;
    width: 40%;
    float: left;
}
.DivGraphTemp {
    text-align: center;
    width: 20%;
    float: left;
}
.DivPayPal {
    width: 50%;
    padding :1em;
}
.DivPayOK {
    font-size: 2em;
    color: #ffffff;
    text-align: center;
    padding: 1em;
    margin: 1em;
    background-color: #33CC33;
    border: 2px solid#008000;
    border-radius: 25px;
}
.DivPayOKLink {
    width: 50%;
    font-size: 1.5em;
    text-align: center;
    padding: 0.5em;
    margin-left: auto;
    margin-right: auto;
    background-color: #dedede;
    border: 2px solid #9A9A9A;
    border-radius: 25px;
}
.DivPayKO {
    font-size: 2em;
    color: #ffffff;
    text-align: center;
    padding: 1em;
    margin: 1em;
    background-color: #FF0000;
    border: 2px solid #B90000;
    border-radius: 25px;
}
.DivPayKOLink {
    width: 50%;
    font-size: 1.5em;
    text-align: center;
    padding: 0.5em;
    margin-left: auto;
    margin-right: auto;
    background-color: #dedede;
    border: 2px solid #9A9A9A;
    border-radius: 25px;
}
.DivPrevisioni {
    width: auto;
    background-color: #FFFFFF;
    padding: 5px;
    margin-top: 5px;
}

.DivPrevisioniLink {
    width: 100%;
    text-align: center;
    margin-top: 5px;
}

.DivPrevisioniTitolo {
    margin-top: 5px;
    margin-bottom: 2px;
    padding: 5px;
}

.DivPrevisioniTitoloTxt {
    text-align: left;
    font-size: 1.5em;
}
.DivPrevisioniSottoTitoloTxt {
    text-align: left;
    font-size: 1.2em;
    margin-top:5px;
}
.DivPrevisioniBtnStorico {
    border-style: none none solid none;
    margin-left: auto;
    margin-right: auto;
    padding: 8px;
    background-color: #009900;
    color: #FFFFFF;
    width: 80%;
    font-weight: bold;
    border-bottom-width: 2px;
    border-bottom-color: #006600;
}

.DivPrevisioniBtnStorico:hover {
        background-color: #33CC33;
        border-bottom-width: 2px;
        border-bottom-color: #008000;
    }

.DivPrevisioniBtnAggiorna {
    border-style: none none solid none;
    margin-left: auto;
    margin-right: auto;
    border-bottom-width: 2px;
    border-bottom-color: #B35207;
    padding: 8px;
    background-color: #FC7A16;
    color: #FFFFFF;
    width: 80%;
    font-weight: bold;
    text-align: center;
}

.DivPrevisioniBtnAggiorna:hover {
        background-color: #F49145;
        border-bottom-color: #B35207;
    }

.DivPromoBox {
    padding: 1.35em;
    text-align: center;
    background-color: #FF0000;
    border: 1px solid #640303;
}
.DivPromoBoxTitle {
    color :#ffffff;
    font-size :1.8em;
    font-weight :bold;
}
.DivPromoBoxText {
    color: #ffffff;
    font-size: 1em;
}
.DivSospesoTitolo1 {
    font-size :4em; 
    width:100%;
}
.DivSospesoTitolo2 {
    font-size :10em; 
    color :forestgreen ;
    width:100%;
}
.DivWebCamLogo{
    overflow :visible ;
}

.DivGallery {
    width: 100%;
    position: relative;
}
.DivGalleryContent {
    text-align: center;
    width: 100%;
}
.DivGalleryContentImg {
    max-width:100%;
    max-height: 600px;
    height: auto;
} 
#DivGalleryContentThumbnailImg > a img{
    max-height: 104px;
}
.DivGalleryNext {
    width: 32px;
    height: 32px;
    position: absolute;
    z-index: 1080;
    right:20px;
    top:50%;
}
.DivGalleryPrev {
    width: 32px;
    height: 32px;
    position: absolute;
    z-index: 1080;
    left:20px;
    top:50%;
    
 }
.DivGraphTitolo {
    text-align: center;
    margin: 2px;
}
.DivGraphValore {
    text-align: center;
    font-weight: bold;
    margin-top: 5px;
}
.DivHead {
    border: 0px solid #C0C0C0;
    padding: 5px;
    margin: 0px auto 0px auto;
    width: 1040px;
}
.DivHeadLogo {
    float: left;
    width: 300px;
    height: 90px;
    text-align: center;
}
.DivHeadLogoTitle {
    font-size :1.2em; 
    padding: 4px 15px 4px 4px;
    text-align: left;
}
.DivHeadLogoStazione {
    float: left;
    height: 90px;
}
.DivHeadLogoStazioneTitle{
     padding-right: 5px; 
     text-align: right;
}
.DivHeadWrapper {
    background-image: url('../images/background.jpg');
    border-bottom-width: 1px;
    border-bottom-color: #C0C0C0;
    border-bottom-style: solid;
}
.DivMain {
    min-height: 100em;
}
 .DivMap {
    width: 100%;
    height: 28em;
}
.DivModuloRiga {
    margin-top: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
}
.DivModuloCampo {
    margin-top: 2px;
}
.DivModuloLabel {
    font-weight: bold;
}
.DivModuloLabelMeteo{
    width :10em;
    font-weight: bold;
    float :left
       
}
.DivModuloCampoMeteo {
    margin-top: 2px;
    float:none 
}
.DivModuloTitolo {
    margin-top: 15px;
}
.DivPageMenuMain {
    position :relative ;
    background-color: #FFFFFF;
    padding-top: 5px;
    padding-bottom: 5px;
}
 .DivSponsor {
    margin: 0px 0px 3px 0px;
}
.DivWebCamThumbnail {
    float :left;
    margin-left: 4px;
    margin-bottom: 2px;
    width: 231px;
    height: 130px;
}
.DivMenuStazioni {
    margin: 0px;
   }
.DivMenuStazioniHome{
   display:none ;
 }
.DivMenuStazioniRegione {
    padding :4px;
    background-color:rgba(0, 102, 255,0.7);
    border-bottom-style :solid;
    border-bottom-color :#0033CC;
    border-bottom-width :3px;
    font-weight:bold;
    text-transform:uppercase;
    letter-spacing :2px;
    color:#FFFFFF
}
.DivMenuStazioniRegioneHome {
    padding: 4px;
    background-color: rgba(0, 102, 255,0.7);
    border-bottom-style: solid;
    border-bottom-color: #0033CC;
    border-bottom-width: 3px;
    font-weight: bold;
    font-size: 1.3em;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #FFFFFF
}
.DivMenuStazioniLocalita {
    padding: 2px 2px 2px 4px;
    background-color: rgba(255, 255, 255,0.8);
    font-weight: bold;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: #0033CC;
    height: 1.8em;
    display: flex;
    align-items: center;
}
.DivMenuStazioniLocalitaHome {
    padding: 6px 6px 6px 15px;
    background-color: rgba(255, 255, 255,0.8);
    font-weight: bold;
    font-size: 1.3em;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: #0033CC;
    display: flex;
    align-items: center;
}
.DivMenuStazioniLocalitaNomeHome {
    width: 31em;
}
.DivMenuStazioniLocalitaNomeStazione {
    width: 16em;
}
.DivMenuStazioniLocalitaPallinoHome{
    margin-right :0px;
}
.DivMenuStazioniLocalitaPallinoStazione {
    width:1.2em; 
}
.FiltroCk {
    display: block;
    margin-bottom: 10px;
    margin-left: 0px;
}
.FiltroLbl {
    font-weight: bold;
    display: block;
    height: 22px;
    padding: 5px;
    padding-top: 9px;
    background: #0066FF;
    border-top: 5px solid;
    border-top-color: #000080;
    color: #FFFFFF;
    margin-bottom: 5px;
}
.iFrameManometri {
    width: 100%;
    height: 290px;
}
.ModuloBtn {
    border-style: none none solid none;
    padding: 8px;
    background-color: #009900;
    color: #FFFFFF;
    width: 11.5em;
    font-weight: bold;
    margin-right: 2px;
    border-bottom-width: 2px;
    border-bottom-color: #006600;
}
.ModuloBtn:hover {
   background-color: #33CC33;
    border-bottom-width: 2px;
    border-bottom-color: #008000;
}
.ModuloBtnComandi {
    border-style: none none solid none;
    border-bottom-width: 2px;
    border-bottom-color: #000080;
    padding: 8px;
    background-color: #0066FF;
    color: #FFFFFF;
    width: 11.5em;
    font-weight: bold;
    margin-right: 2px;
    text-align: center;
}
.ModuloBtnComandi:hover {
    background-color: #5599FF;
    border-bottom-color: #000080;
}
.ModuloBtnComandiSel {
    background-color: #FF0000;
    border-style: none none solid none;
    border-bottom-width: 2px;
    border-bottom-color: #800000;
    padding: 8px;
    color: #FFFFFF;
    width: 11.5em;
    font-weight: bold;
    margin-right: 2px;
    text-align: center;
}
.ModuloBtnGrid {
    border-style: none none solid none;
    padding: 8px 4px 8px 4px;
    background-color: #FF6600;
    color: #FFFFFF;
    font-weight: bold;
    border-bottom-width: 2px;
    border-bottom-color: #FF3300;
}
.ModuloBtnGrid:hover  {
    background-color: #FF9933;
    border-bottom-width: 2px;
    border-bottom-color: #FF3300;
}
.ModuloFu {
    border-style: none none solid none;
    padding: 8px;
    background-color: #FF6600;
    color: #FFFFFF;
    font-weight: bold;
    border-bottom-width: 2px;
    border-bottom-color: #FF3300;
}
.ModuloCkAlert {
    width: 60px;
    display: inline-block;
}
.ModuloTxt {
    border-style: solid;
    border-width: 1px 1px 2px 2px;
    border-color: #808080;
    padding: 8px;
}
.ModuloTxt:hover {
    background-color: #FFFFCC;
}
.ModuloTxtValid {
    color: #FF0000;
    font-weight: bold;
}

.PPDonazione{
    margin :5px 5px 5px 5px;
}
.DivRisponditore {
    padding: 5px;
    border: 1px solid #008000;
    background-color: #33CC33;
    margin: 0px auto 0px auto;
}
.DivRisponditoreTxt {
    vertical-align: middle;
    text-align: center;
    font-size: 24px;
    color: #FFFFFF;
}
.DivRisponditoreTxt img {
    vertical-align :middle;

}
.DivPro {
    text-align: center;
    padding: 5px;
    border: 1px solid #800000;
    background-color: #FF0000;
    margin-top: 10px;
    color: #FFFFFF;
}
.DivProTxt1 {
    font-size: 24px;
}
.DivProTxt2 {
    font-size: 15px;
}
.DivHomeMenuStazioni {
    padding: 0px;
    margin: 0px;
    background-color: #FFFFFF;
    float: left;
    width: 35%;
    height: 420px;
}

.DivInfo {
    line-height :1.2em;
}

.DivInfoTitolo {
    color: #666666;
    font-size: 1.60em;
    font-weight: normal;
    text-transform: uppercase;
    text-align: center;
    margin: 10px 0px 10px 0px;
}
.DivTopMenu {
    float: left;
    text-transform: uppercase;
    padding-right: 5px;
    padding-left: 5px;
    margin-top: 10px;
}
.DivTopMenuMain {
    background-color: #FFFFFF;
    width: 100%;
}
.DivTitoloServizi {
    margin-top: 10px;
    margin-bottom: 5px;
    text-align: left;
}
.DivTitoloServiziTxt {
    color: #0000FF;
    font-size: 14px;
    font-weight: bold;
}
.DivStazioniUserMenu {
    padding: 8px;
    background-color: #1A2968;
    color: #FFFFFF;
    width: 250px;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 1px;
}
.DivStazioniUserMenu:hover {
    background-color: #0000FF;
}
.StazioneSel {
    background-image: url('../images/freccia-stazione-sel.png');
    background-repeat: no-repeat;
}
.DivRegioneUserMenu {
    padding: 8px;
    background-color: #4D67D2;
    color: #FFFFFF;
    width: 250px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: bold;
    text-align: left;
    margin-top: 3px;
}

.Fl {
    float: left;
}
.Fr {
    float:right ;
}
.mT10 {
    margin-top: 10px;
}
.mL20 {
    margin-left: 20px;
}
.mL40 {
    margin-left: 45px;
}
.tAj {
    text-align: justify;
}
.tAc {
    text-align: center;
}
.tAr {
    text-align: right;
}
.LH12 {
  line-height: 1.2em;
}
.w6 {
    width: 6em;
}
.w15 {
    width: 15em;
}
.w20 {
      width: 20em;
}
.w40p {
      width: 40%;
}
.w90p {
      width: 90%;
}
.w100p {
    width: 100%;
}
.Loading {
    width: 200px;
    height: 160px;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -80px;
    z-index: 2001;
    color: #FFFFFF;
    font-weight: bold;
    text-align: center;
}
.Grid {
    
}
.Grid td {
    border: 1px solid #C0C0C0;
    padding: 2px;
    font-size: 0.9em;
    vertical-align: middle;
}

.Grid th {
    border: 1px solid #C0C0C0;
    padding: 4px 2px;
    color: #fff;
    background: #0066FF;
    font-size: 0.9em;
}

.Grid .alt {
    background: #FFFFCC;
}

    .Grid .pgr {
        background: #0066FF;
        font-size: 1.8em;
    }

.Grid .pgr table {
}

.Grid .pgr td {
    border-width: 0;
    padding: 2pt 2px 2px 2px;
    font-weight: bold;
    color: #fff;
}
.Grid .empity {
        padding: 5px;
        background: #FFFFCC;
        font-size: 3em;
        color:red;
    }


.Grid .pgr a {
    color: #333333;
    text-decoration: none;
}

.Grid .pgr a:hover {
    color: #000;
    text-decoration: none;
}

.grafico_tooltips_css {
    background-color: #FFFFFF;
    padding: 3px;
}
#divheadlogo img {
    width: auto;
    height: 100%;
    }
@media only screen and ( max-width: 40em ) {
  .DivContenuto {
    padding: 0px;
    margin: 0px;
    width: 100%;
    background-color: #FFFFFF;
  }
  .DivContenutoPrincipale {
    width :100%;
    float :none;
  }
    .DivContenutoDx {
        width: 100%;
        float: none;
        text-align: center;
    }  
  .DivGraph {
    float :none;
    width: 50%;
  }
  .DivGraph > canvas  {
    width: 100%;
  }
  .DivGraphDati{
     height :25em;
 }
 .GraphDati{
     width :55%;
 }
    .DivGraphTitolo {
        font-size: 0.8em;
    }
 .DivPrevisioniContainer{
     margin-top :0.5em;
     width:60%;
     float :left ;
 }
    .DivPrevisioniTitoloTxt {
        font-size: 1.2em;
    }
    .DivGraphOdo {
        width: 40%;
        margin-bottom: 10px;
    }
    .DivGraphTemp {
        width: 20%;
    }
    .CanvasGraphTemp {
        width: 80%;
        height:100px; 
        object-fit: contain;
    }
 .DivPrevisioniLink{
     padding :0;
     margin-top :1em;
     float :none ;
 }
 
 .DivHeadLogo {
      width :100%;
      text-align :center;
      float:none;
      height: 75px;
      text-align: center;
  }
  .DivHeadLogoStazione{
      display :none ;
  }
 .DivHeadLogoStazioneTitle {
     display :none ;
 }
 .DivInfo {
    padding:0.1em; 
}
 .DivMappaItalia{
   display :none ;
 }
 .DivMenuStazioniHome{
   display:block;
 }
 .DivMenuStazioniDx{
   display :none ;
 }
 .DivMenuStazioniRegione {
    font-size:1.5em;
 }
 .DivMenuStazioniLocalita {
    font-size:1.5em;
    font-weight:normal;
 }
  
.DivRisponditore {
    padding: 4px;
    margin: 5px;
}
.DivRisponditoreTxt {
    vertical-align: middle;
    text-align: center;
    font-size: 1.2em;
    color: #FFFFFF;
}
.DivRisponditoreIcon{
    width:20px;
    height :auto ;
}
   
.DivWebCamThumbnail{
     width:10em;
 }
 .h2 {
    padding-top: 4px;
    padding-bottom: 4px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #FFFFFF;
    font-weight: bold;
    font-size: 1.5em;
}
.iFrameManometri {
    width: 100%;
    height: 30em;
}

}