:root {
    --color-1: #f0f0e1;
    --color-2: #8ec88a;
    --color-3: #f18c61;
    --color-4: #a0a4ff;
    --color-5: #ffda72;
    --color-6: #1a4fa4;

    --color-10: rgba(255,255,255,0.03);
    --color-11: rgba(255,255,255,0.06);
    --color-12: rgba(136, 134, 149, 0.5);
    --color-13: rgba(136, 134, 149, 0.9);
    --color-14: rgba(0,0,0, 0.9);
    --color-15: rgba(0,0,0,0.1);
    --color-16: rgba(0,0,0,0.75);
    
    --color-rosso: #CF0000;
    --color-nero: #000;
    --color-bianco: #fff; 
    --color-blu: blue;
    --color-verde: green;
    --color-grigio: #333;

    --font-verdana: Verdana, Geneva, Tahoma, sans-serif;
  }

    *,html,body {         
        border:0;
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }

    html,
    body {
        min-height: 100%;
        height: 100%;
    }

    body { 
        background:var(--color-bianco);
        color:var(--color-nero);
        font-family: var(--font-verdana); 
        font-size:10pt;
    }

    [onclick] { cursor:pointer; }
    .content {
        padding: 16px;
      }
      
      /* The sticky class is added to the header with JS when it reaches its scroll position */
      .sticky {
        position: fixed;
        top: 0;
        width: 100%;
        z-index : 10; 
      }
      
      /* Add some top padding to the page content to prevent sudden quick movement (as the header gets a new position at the top of the page (position:fixed and top:0) */
      .sticky + .content {
        padding-top: 102px;
      }
      
.scaling-svg { height:100%;width:100%;display:inline; }
.prov_shape { fill-opacity:1;stroke:#000000;stroke-width:0.0375;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;display:inline  }
.prov_path, #path_PN, #path_TS, #path_UD, #path_GO { fill-opacity:1;stroke-width:0.0375;stroke-miterlimit:4;stroke-dasharray:none } 



#path_PN { fill:#8ec88a; }
#path_TS { fill:#f18c61;  } 
#path_GO { fill:#a0a4ff; }
#path_UD { fill: #ffda72; }
#path_PN:hover { fill:red; }
#path_TS:hover { fill:red;  } 
#path_GO:hover { fill:red; }
#path_UD:hover, #mappa_regionale .act { fill: red; } 

.btn_anno { margin:5px;display:inline-block;width:60px;text-align:center;padding:3px;background:black;color:#fff;font-weight:bold;border:1px solidi #000; } 
.btn_anno.act { background: #1a4fa4; color:#fff; border:1px solid #1a4fa4; }


    .wrap-all { 
        display:grid;
        grid-template-areas: 
            'link link'
            'logo logo'
            'slide slide'
            'naviga naviga'
            'contenuti partners'
            'footer footer'
        ;
        grid-template-columns: 1fr 250px;
    }

    .wrap-all > .banner_top { 
        grid-area: link; 
        display:flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
    }
    
.top_menu ul {display:flex; list-style:none outside none; margin:10px; padding:0}
.top_menu ul li:not(:last-child){float:left; border-right:2px solid var(--color-grigio)}
.top_menu ul li a{color:var(--color-rosso); display:block; font-size:12px; padding:0 11px; line-height:12px;text-transform: uppercase;}
.top_menu ul li a:hover{text-decoration:underline}

    .wrap-all > .main_logo { 
        grid-area: logo;  
        display:grid;
        grid-template-columns:1fr auto;
        position: relative;
    }
    .logo_home { 
        display: flex;
        align-items: flex-end;
    }
    .logo_home img, .logo_home2 img,.logo_home3 img { height:100%; }
    .logo_home { height:180px; }
    .logo_home2,.logo_home3 { display:none; }
    .link_regioni { display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 15px;
            padding: 10px 20px;
            align-items: end;
            justify-items: center; 
        }
    .link_header img { height: 85px; }
    .titolo_link_header { font-size:9px;text-align:center;font-weight: bold; }

    .wrap-all > .main_slide { 
        grid-area: slide; 
        height:250px; 
        position:relative;
        border-top:5px solid var(--color-nero);
    }
    .header_slider, .header_slider > div { position:absolute;inset:0; background-size:cover;background-position:center; }
    .header_slider > div { display:none; }
    #slide_1 { display: block; }
    .wrap-all > .main_menu { grid-area: naviga; background:var(--color-nero); color:var(--color-bianco); }
    .wrap-all > .main_content { grid-area: contenuti;padding: 20px; }
    .wrap-all > .main_partners { grid-area: partners; padding:10px;}
    .menuPartner{ display: flex; flex-direction: column;}
    .main_partners img { width: 240px; }
    .wrap-all > .main_footer { grid-area: footer; background:var(--color-nero); color:var(--color-bianco); text-align:center;}

    .main_menu_area ul{ display: flex; overflow: hidden; flex-flow: row; justify-content: space-between; list-style: none; background: #000;margin:0; padding:0; }
    li {  float: left;  font-family: 'bebasregular', sans-serif;text-transform: uppercase;}
    li a, .dropbtn { display: inline-block; color: white;  text-align: center;  padding: 8px 10px;  text-decoration: none; }
    .main_menu_area li a:hover,.main_menu_area li:hover, .dropdown:hover .dropbtn { background-color: red; }
    li.dropdown {  display: inline-block; padding: 3px 8px;}
    
    .dropdown-content {  display: none;  position: absolute;  background-color: #000;color:#fff; min-width: 160px; z-index: 1; }
    
    .dropdown-content a {
      color: #fff;
      padding: 10px 8px;
      text-decoration: none;
      display: block;
      text-align: left;
    }
    
    .dropdown-content a:hover {background-color: red;}
    
    .dropdown:hover .dropdown-content {
      display: block;
    } 

    .box_shad { border:1px solid #ccc;margin:0 auto;-webkit-box-shadow: 3px 3px 10px 0px rgba(0,0,0,0.75);-moz-box-shadow: 3px 3px 10px 0px rgba(0,0,0,0.75);box-shadow: 3px 3px 10px 0px rgba(0,0,0,0.75); padding:10px; } 

    .scheda_persona .foto_persona img {
        width: 96px;
    }


  /* === Mobile devices - da 481px a 767px === */
  @media screen and  (max-width: 767px) {
    .top_menu ul li a { color: var(--color-4)}
    /* Smartphone in orizzontale e telefoni un po' più grandi */
    .link_regioni {  gap:0px 2px; padding:5px 5px; position:absolute; top:0; right:5px; }
    .link_header img { height: 40px; }
    .link_header .titolo_link_header {  display:none;  }
    .logo_home { display:none; }
    
    .logo_home2,.logo_home3 { display:block; }
    .logo_home2 img { height:80px; }
    .logo_home3 { position:absolute; bottom:0px; left:180px; height:30px; }
    .top_menu ul li a { font-size: 10px; }
    .wrap-all > .main_slide { height:100px; }
    .wrap-all { 
        display:grid;
        grid-template-areas: 
            'link'
            'logo'
            'slide'
            'naviga'
            'contenuti'
            'partners'
            'footer'
        ;
        grid-template-columns: 1fr ;
    }
    .menuPartner {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        align-content: center;
        justify-content: center;
        border-top:1px solid var(--color-grigio);
        padding-top:20px;
    }
    .main_partners img { width: 160px; }
  }
  
  /* === Tablet devices - da 768px a 1024px === */
  @media screen and (min-width: 768px) and (max-width: 1024px) {
    .top_menu ul li a { color: var(--color-blu)}
    /* Tablet verticali e orizzontali */
    .link_header img { height: 70px; }
    .logo_home  { height:100px; }
    .wrap-all > .main_slide { height:150px; }
  }
  
  /* === Medium screens - da 1025px a 1280px === */
  @media screen and (min-width: 1025px) and (max-width: 1280px) {
    .top_menu ul li a { color: var(--color-verde)}
    /* Laptop e desktop piccoli */
    .link_header img { height: 80px; }
    .logo_home  { height:140px; }
    .wrap-all > .main_slide { height:200px; }
  }
  
  /* === Large screens - da 1281px in su === */
  @media screen and (min-width: 1281px) {
    .top_menu ul li a { color: var(--color-rosso)}
    /* Desktop grandi, schermi widescreen */
  }





  /* TABELLE */
  .calendario-grid,.comunicati-grid {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    margin-top: 20px;
  }
  
  .grid-head {
    display: grid;
    grid-template-columns: 100px 1fr 2fr;
    font-weight: bold;
    background-color: #eee;
    padding: 10px;
    border-radius: 4px;
  }
  
  .grid-row {
    display: grid;
    grid-template-columns: 100px 1fr 2fr;
    padding: 4px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #fafafa;
  }
  .comunicati-grid .grid-row { 
    grid-template-columns:50px 100px 1fr 100px;
  }
  
  .grid-row .cell {
    padding: 2px;
  }
  
  /* Mobile: stack in verticale con etichette */
  @media screen and (max-width: 768px) {
    .grid-head {
      display: none;
    }
  
    .grid-row {
      display: flex;
      flex-direction: column;
    }
  
    .grid-row .cell {
      position: relative;
      padding-left: 110px;
      margin-bottom: 0px;
    }
  
    .grid-row .cell::before {
      content: attr(data-label);
      position: absolute;
      left: 10px;
      font-weight: bold;
      color: #666;
    }
  }
  

  .riga_anno {
    background: var(--color-nero);
    color: var(--color-bianco);
    text-align: center;
    font-size: 2rem;
}

.riga_mese {
    background: var(--color-6);
    color: var(--color-bianco);
    text-align: center;
    font-size: 1.4rem;
}



.ico_link,.ico_pdf, .ico_word, .ico_excel {
	display: inline-block;
	font: normal normal normal 14px/1 FontAwesome;
	font-size:20px;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	margin-left:3px;
}


.ico_link { color: #333; margin-top:2px; }
.ico_pdf { color: red; }
.ico_word { color: blue }
.ico_excel { color: green; }


.ico_link:before { content: "\f08e"; }
.ico_pdf:before { content: "\f1c1"; }
.ico_word:before { content: "\f1c2"; }
.ico_excel:before { content: "\f1c3"; }


.menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 24px;
    color: #333;
    margin: 10px;
    cursor: pointer;
  }
  
  @media screen and (max-width: 768px) {
    .menu-toggle {
      display: block;
    }
  
    .main_menu ul#nav {
      display: none;
      flex-direction: column;
      background: #fff;
      padding: 10px;
      border-top: 1px solid #ccc;
    }
  
    .main_menu ul#nav.open {
      display: flex;
    }
  
    .main_menu li.dropdown {
      width: 100%;
    }
  
    .main_menu .dropdown-content {
      position: static;
      display: none;
    }
  
    .main_menu li.dropdown:hover .dropdown-content {
      display: block;
    }
  }

  

.menu_panel_tab > a { display:block;
}