.regioni{fill:#a5a5a5 !important;}
    .regioni:hover{fill:#007bff !important;}
	.filiali{fill:#0d3a93;
    cursor: pointer;
    stroke-width: 2px;}

.filiali:hover {
    fill: #eeff00;
    cursor: pointer;
    stroke-width: 2px;
}

.family {
    fill: #cf0404;
    cursor: pointer;
    stroke-width: 2px;
}

.family:hover {
    fill: #eeff00;
    cursor: pointer;
    stroke-width: 2px;
}

.map-svg .regioni {
    cursor: pointer;
    -webkit-transition-duration: unset!important;
    transition-duration: unset!important;
}

.wrap-svg .map-svg {
    margin: auto;
}

.map-svg {
    position: relative;
}

.map-svg .regioni:hover {
    fill: #eeff00;
    -webkit-animation: colorChange .5s ease-in-out;
    animation: colorChange .5s ease-in-out;
}

.wrap-svg {
    width: 100%;
}

@media (max-width:769px){
.wrap-svg {
    width: 95%;
}
}

.dettaglio-filiale {
    background-color: #fff;
    position: fixed;
    width: 465px;
    max-width: 100%;
    -webkit-box-shadow: 0 3px 14px -2px rgb(74 81 85 / 30%);
    box-shadow: 0 3px 14px -2px rgb(74 81 85 / 30%);
    margin-bottom: 40px;
    margin-top: 40px;
    margin-left: 20px;
}

       /* The Modal (background) */
    .modal {
      display: none; /* Hidden by default */
      position: relative; /* Stay in place */
      z-index: 999; /* Sit on top */
      padding-top: 30px; /* Location of the box */
      right: 0;
      top: 0;
      width: 100%; /* Full width */
      height: 100%; /* Full height */
      overflow: auto; /* Enable scroll if needed */
     
    }

    @media screen and (max-width: 769px) {
    .modal {
      display: none; /* Hidden by default */
      position: relative; /* Stay in place */
      z-index: 999; /* Sit on top */
      padding-top:0px; /* Location of the box */
      right: 0;
      top: 0;
      width: 100%; /* Full width */
      height: 100%; /* Full height */
      overflow: auto; /* Enable scroll if needed */
    }  
    }
    
    /* Modal Content */
    .modal-content {
    background-color: #fff;
    color:#2a2a2a;
    position: relative;
    width: 100%;
    max-width: 100%;
    margin-bottom: 40px;
    margin-top: 40px;
    margin-left: 20px;
    margin:auto;
    -webkit-box-shadow: 0 3px 14px -2px rgb(74 81 85 / 30%);
    box-shadow: 0 3px 14px -2px rgb(74 81 85 / 30%);
    border:none;
    z-index: 999;
    }


    .modal-text-title {
        padding-top:5px; 
        font-size:1.2em; 
        color:#2a2a2a;
    }

    .modal-text-p {
        font-size:1em; 
        color:#2a2a2a;
    }
    
    /* The Close Button */
    .close {
      color: #aaaaaa;
      float: right;
      font-size: 28px;
      font-weight: bold;
      padding:0 0 0 0;
      position:absolute;
      top:5;
      right:10;
    }    

    .close:hover,
    .close:focus {
      color: #000;
      text-decoration: none;
      cursor: pointer;
    }

    .text-modal{
      padding:20px 20px 0 20px;
    }


    .st0
    {
    opacity:0.6;
    }
    
    .st1
    {
    fill:#9B9B9B;
    stroke:#1542AD;
    stroke-width:2;
    stroke-miterlimit:10;
    }
    
    .st1:hover
    {
    fill:#1542AD;
    stroke:#1542AD;
    stroke-width:2;
    stroke-miterlimit:10;
        
    }
    
    .st2{fill:#1542AD;}
    .st3{fill:#4356BB;}

    .mistersi{
        width:20%;
        position:absolute;
        top:20;
        right:350;
    }

     @media screen and (max-width: 468px) {
    .mistersi{ 
        display:none;       
    }
    }

    .grid-modal {
        display: grid;
        grid-template-columns: auto auto auto;
        background-color: #2196F3;
        padding: 10px;
      }

      .grid-item {    
        font-size: 16px;
        text-align: left;
      }