/*
====================================================================
____    __    ____  ___       __  ___  __  ____    __    ____  __  
\   \  /  \  /   / /   \     |  |/  / |  | \   \  /  \  /   / |  | 
 \   \/    \/   / /  ^  \    |  '  /  |  |  \   \/    \/   /  |  | 
  \            / /  /_\  \   |    <   |  |   \            /   |  | 
   \    /\    / /  _____  \  |  .  \  |  |    \    /\    /    |  | 
    \__/  \__/ /__/     \__\ |__|\__\ |__|     \__/  \__/     |__| 

    2023                                                                   
====================================================================



*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');

:root{

    --margine-tra-blocchi: 0.8rem; 
}


html, body {
	width:100%;
	height:100%;
	padding:0;
	margin:0;	
}

body{ margin:0;  padding:0;  font-family:'Montserrat',sans-serif ; background-color: #dadada;}

/* =======================================  */
/* PAGINE */
.container{ width:100%}

.body-content{  padding:50px 10px;  border-radius:6px; min-height: 80vh; }


.row{ margin:0}
/* Override the default bootstrap behavior where horizontal description lists will truncate terms that are too long to fit in the left column */
.dl-horizontal dt{ white-space:normal}
/* Set width on the form input elements since they're 100% wide by default */
input, select, textarea{ max-width:280px}
.panel-footer{ display:block;  position:fixed;  bottom:0;  right:0;  width:100%;  height:25px;  padding-top:3px;  background-color:#F5FFFD;  box-shadow: 0 0.15rem 0.75rem 0 rgba(58, 59, 69, 0.2);  z-index:9999; font-size:0.8rem; }

/* qui elenco gli OGGETTI a sfondo BIANCO NELLE DIVERSE PAGINE*/

.form-group, .table, .square, .romero-login, .body-content, .pagination-container
{ background-color:#fff; }


/* =======================================  */

/* NAVBAR */
.main-bar{ width:100%;  height:52px;  position:fixed;  background-color:#F5FFFD;  box-shadow: 0 0.15rem 0.75rem 0 rgba(58, 59, 69, 0.2); z-index:1040; }
.navbar{ border-radius:0}
/*.navbar-inverse{    background-color:white}
*/
.navbar-brand{    background:url(../Content/logo-light-small.png) no-repeat top left;  /*color:#273586; */ /*color:#003c8f; */    float:left;     height:42px;     width:140px;     padding:0;     margin:7px 0 0 66px}
.logo-big{    display:inline-block;     background:url('../Content/logo-light-big.png') no-repeat no-repeat top center;  height:70px;  width:100%; background-size:contain; }
.main-menu{ display:block;  position:fixed;  top:0;  right:0;  height:52px}
 .main-menu >ul{ width:auto;  list-style:none;  margin-right:10px}
 .main-menu >ul >li{ float:left;  margin:3% 0 0 25px}
 .main-menu >ul >li:last-child{ float:left;  margin:3px 0 0 20px}
 .main-menu >ul >li >a{ display:inline-block;  vertical-align:top;  color:#078285;  /*color:#003c8f; */ text-decoration:none;  margin:14px 0 0 5px}
 .main-menu >ul >li >.btn{ margin:8px 0 0 5px}
 .main-menu >ul >li >i{ display:inline-block;  font-size:30px ;  color:#078285;  /*color:#003c8f; */ margin-top:4px}
 .main-menu >ul >li >a >p{ display:inline-block;  vertical-align:super}
.nav-big{}
.accent-color{ color:#078285; }

.nav-small{ display:none}

.square{ max-width:800px;  width:calc(100%);  margin:15px auto;  padding:14px 32px;  border:solid 2px rgba(0, 0, 0, 0.15); border-radius:6px; height:inherit}
.square-big{ width:calc(100%);  margin:10px auto;  padding:12px 18px;  border:solid 1px #707070;  height:inherit}
.square-new{ z-index:1;  position:fixed;  top:52px;  left:0;  width:485px;  max-height:calc(100% - 100px);  margin:10px;  padding:2px 10px;  background:#fff;  border:solid 1px #707070;  overflow-x:auto}
.panel-log{ margin:0 50px 20px}
.ui-dialog{ top:25% ;  width:90% }


/* =======================================  */
/* Hamburger Menu */
#menuToggle{ display:block;  position:fixed;  float:left;  top:15px;  left:18px;  z-index:99999;  -webkit-user-select:none;  user-select:none}
 #menuToggle input{ display:block;  width:64px;  height:52px;  position:absolute;  top:-17px;  left:-18px;  margin:0;  cursor:pointer;  opacity:0;  z-index:2;  -webkit-touch-callout:none}
 #menuToggle span{ display:block;  width:28px;  height:3px;  margin-bottom:5px;  position:relative;  background:#078285;  /*background:#003c8f; */ border-radius:0;  z-index:1;  transform-origin:4px 0px;  transition:transform 0.2s cubic-bezier(0.77,0.2,0.05,1.0),background 0.2s cubic-bezier(0.77,0.2,0.05,1.0),opacity 0.2s ease}
 #menuToggle span:first-child{ transform-origin:0% 0%}
 #menuToggle span:nth-last-child(2){ transform-origin:0% 100%}
 #menuToggle input:checked ~ span:nth-child(2){ opacity:1;  transform:rotate(45deg) translate(0,0.5px)}
 #menuToggle input:checked ~ span:nth-child(3){ opacity:0;  transform:rotate(0deg) scale(0.2,0.2)}
 #menuToggle input:checked ~ span:nth-child(4){ transform:rotate(-45deg) translate(-1px,-2.5px)}

#menu{ 
        position:fixed;  
        min-width:300px;  
        margin: 18px 0 0 -10px; 
        padding:0 14px 7px 7px; 
        background-color:#fff;  
        box-shadow:5px 0px 20px rgba(0,0,0,0.3);  
        list-style-type:none;  
        -webkit-font-smoothing:antialiased;  
        transform-origin:0% 0%;  
        transform:translate(-112%,0);  
        transition:transform 0.2s cubic-bezier(0.77,0.2,0.05,0.5);  
        border:1px solid grey;  

    /*Luca x renderlo scrollabile....  come altro fare ?*/
    max-height: calc(100% - 50px);
    overflow-y: auto;
}




 #menu li.separatore { margin: 9px 0px 9px 0px; border-top: 2px solid rgba(0, 0, 0, 0.15); }

 #menu .submenu{ color:#6E6E6E ;  font-size:14px;  font-weight:700;  text-decoration:none;  text-transform:uppercase;  margin-top:20px; background-color: #f1f1f1; }

 #menu::after{ box-shadow:5px 0px 20px rgba(0,0,0,0.3)}

 #menu >li{ display:block;  width:120%; padding:7px 8px;/* cursor:pointer; */ padding-top: 0;}

 #menu >li:hover, #menu >li:focus{ background: linear-gradient(46.62deg, #0D7072 0%, #078285 93.64%); box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
border-radius: 5px; text-decoration:none; color: white; }

 #menu >li >a{ display:inline-block;  color:#555 ;  font-size:15px;  font-weight:700;  text-decoration:none;  text-transform:uppercase;  margin:3px 0 0 4px;  vertical-align:top; }

 #menu >li:hover >a,#menu >li:hover i { color:#fff;}

 #menu >li i { display:inline-block;  color:#6E6E6E;    font-size:23px;  text-align:center;    vertical-align:text-bottom; 
margin-bottom: -4px; padding:0 0 0 10px;  height:29px; width:37px;}
#menuToggle input:checked ~ ul{ transform:none}

/* =======================================  */
/* PAGINE - STRUTTURA */


/* il primo DIV dopo il titolo, con i bottoni di azione */
    div.title-left + div.row { justify-content: space-between; margin-top: var(--margine-tra-blocchi);}
    div.title-left + div.row .btn { height:50px; }



/* pagine con le MAPPE */


    .leaflet-label          { border: none;        background: #fff;        font-size: 11px;        font-weight: bold;    }
    .leaflet-popup          { z-index: 10000; }
    div.db-scroll           { max-height: 35vh; }

    .css-mappa-label-operatore {        color: red;        font-size: 14px;    }

    .barra_filtri                   { text-align: left !important; padding: 3px 0 3px 9px; position:relative; margin: var(--margine-tra-blocchi) 0;
                                        display:inline-block; /* display: flex ;  justify-content:space-between;*/
    
    }
    .barra_filtri div.col-auto      { margin-right: 10px; float:left;}
    .barra_filtri .form-control, .barra_filtri .form-select {   width:auto!important;}
    .barra_filtri div >span         {  display:inline-block; }

    #FiltriEstesi { margin:5px 0;float: left; align-items: center;}

    #map { position:relative; top:auto;  height:87vh; width:100%; }

    @media (max-width: 768px) {
        .barra_filtri div.col-auto { width:100%; }
        .barra_filtri .form-control {   width:200px!important;}
        .barra_filtri div >span {  display:inline-block; min-width:30%;}
            #Start {width:150px!important;}

    }




/* =======================================  */
/* BOTTONI */
/*
button, html input[type="button"], input[type="reset"], input[type="submit"]{ background-color:white;  border:0}
 button, html input[type="button"], input[type="reset"], input[type="submit"]:hover{ background-color:#fff}

select{ border:1px solid #078285;  padding:7px;  margin-bottom:1px;  color:#078285}
*/
.btn{ 
    display:inline-block;  
    color:#038487 ;  
    font-weight:normal;  
    background-color:#fff;  
    border:1px solid #038487;  
    border-radius:4px;  
    margin:4px;  
    
    text-decoration:none;  
    padding:3px 12px;
    box-shadow: none !important;

    /* Luca A. per */
        max-width: 200px;
        min-height: 30px;
}

.btn_small{ 
    display:inline-block;  
    color:#038487 ;  
    font-weight:normal;  
    background-color:#fff;  
    border:1px solid #038487;  
    border-radius:4px;  
    margin-top:4px;  
    margin-bottom:4px;  
    text-decoration:none;  
    padding:2px 9px;
    box-shadow: none !important;

    font-size:16px;  

}

.btn_filtra /* è il container */ { display:flex !important; align-items: flex-end; } 

.btn_primario   {     background-color:#038487 ;      color:#fff;  }
.btn_setup      {     align-self:flex-end;  }

.btn_setup i.icon     {    font-size:14px;color: #d11 !important; margin-left:5px; }

.btn-circle { border-radius:50%; padding: 0.1rem 0.2rem; }

    .btn .icon{ font-size:22px}
    .btn:hover, .btn:focus{ color:white ;  font-weight:bold;  background:#078285 ;  text-decoration:none;  outline:0 }
    .btn:active{ color:white ;  font-weight:bold;  background:#078285;  text-decoration:none;  -webkit-box-shadow:inset 0px 1px 2px 1px rgba(0,0,0,0.3);  box-shadow:inset 0px 1px 2px 1px rgba(0,0,0,0.3)}
    .btn-strong{ color:white ;  background-color:#078285 }
    .btn-strong:hover, .btn-strong:focus{ color:#078285 ;  background:#bce0fd }
    .btn-strong:active{ color:#078285;  background:#bce0fd}
    .btn-light{ color:#078285 ;  background-color:white ;  border:1px solid #078285}
    .btn-light:hover, .btn-light:focus{ color:#078285 ;  background:#bce0fd }
    .btn-light:active{ color:#078285 ;  background-color:white ;  border:1px solid #078285}

.btn i.fa { margin-right:0.7rem;}

    .btn_small:hover, .btn_small:focus{ color:white ;  font-weight:bold;  background:#078285 ;  text-decoration:none;  outline:0}
    .btn_small:active{ color:white;  font-weight:bold;  background:#078285;  text-decoration:none;  -webkit-box-shadow:inset 0px 1px 2px 1px rgba(0,0,0,0.3);  box-shadow:inset 0px 1px 2px 1px rgba(0,0,0,0.3)}
    .mr{ margin-right:4px}
    .cb-usr{ margin:-4px 0px 0 }
    .btn-map{ display:inline-block;  color:#078285;  /*color:#003c8f; */ font-weight:normal;  background-color:#bce0fd ;  border:0;  border-radius:4px;  margin-top:4px;  margin-bottom:4px;  text-decoration:none;  padding:3px 12px}
    .btn-map:hover, .btn-map:focus{ color:white ;  background:#078285 ;  text-decoration:none;  outline:0}
    .btn-map:active{ color:white;  font-weight:bold;  background:#078285;  text-decoration:none;  -webkit-box-shadow:inset 0px 1px 2px 1px rgba(0,0,0,0.3);  box-shadow:inset 0px 1px 2px 1px rgba(0,0,0,0.3)}
    .btn-collapse{ position:absolute;  display:inline-block;  font-size:26px;  letter-spacing:0.6px;  padding:0;  margin:0;  top:6px;  left:299px;  color:##6E6E6E;  z-index:9999}
    .btn-log:hover, .btn-log:focus{ font-weight:normal }
    .ui-button:focus, .ui-button-icon:focus{ outline:0 }

.btn_help  { border-radius:50%; border:2px solid #eee; height:35px; width:35px; position:absolute; margin-left:50%; }

/* =======================================  */
/* LISTE e FORM */

.table      { margin-top: calc( var(--margine-tra-blocchi) *3) ; }

.table th   { background-color: #F3F2F7; border-bottom:1px solid rgba(0, 0, 0, 0.25); border-top:1px solid rgba(0, 0, 0, 0.25); }

.table tr   { border-bottom:2px solid rgba(0, 0, 0, 0.05); }


.table >tbody >tr:first-child >th{ border:0}
.table >tbody >tr:first-child >th a{ color: #6F6F6F; }

.table >thead >tr >th, .table >tfoot >tr >th, 
.table >thead >tr >td, .table >tfoot >tr >td,
.table th    { vertical-align:middle; padding: var(--margine-tra-blocchi) 1rem; }

.table tbody td    { vertical-align:middle; padding: 0.15rem 1rem; }


.table > :not(caption) > * > * {  padding: 0.55rem 1rem; }
.table > :not(caption) > * > td {  padding: 1px 1rem; }

.table.table-striped { font-size:0.75rem; }
.table.table-striped > :not(caption) > * > * {  padding: 0.2rem 0.8rem; }


.form-group { }

select{ border:1px solid #078285}
.flex-field{ display:flex;  flex-wrap:wrap}

.form-control{}
.form-select{}
.form-select option:first-child { font-style:italic;}

.form-group{ }

.list-spec{ text-align:left; margin-top: var(--margine-tra-blocchi);  margin-bottom:30px; }
.list-spec .form-group{ display:inline-block; width:auto; }
.square /*identifica un FORM*/ .list-spec .form-group{ margin-top: 20px;}

input[type="file"]{ display:inline-block}
input[type="file"]:focus, input[type="radio"]:focus, input[type="checkbox"]:focus{ outline:unset ;  outline-offset:0 }
.in-line{ padding-top:7px}

a{ color:#078285 ;  text-decoration:none; }
footer a{ color:#078285 ;  text-decoration:underline; margin:5px 10px; }

 a:hover, a:focus{ color:#6E6E6E ;  text-decoration:underline}
.title-left{ position:fixed;  display:inline-block;  font-size:26px;  letter-spacing:0.6px;  padding:0;  margin:0;  top:6px;  left:200px;  color:#078285;  z-index:99999;  margin-left:20px}
 .title-left .icon{ font-size:24px}
.title-button{ display:inline-block;  float:left;  padding:4px;  margin:5px 0 0}
.title-div{ display:inline-block;  font-size:24px;  letter-spacing:0.6px;  padding:0;  margin:0;  color:#078285}
#legend-title{ z-index:98}
.lgnd-ttl{ font-size:24px}
.label-big{ font-size:18px;  font-weight:normal}
.label-small{ font-size:14px;  font-weight:bold}
.label-i{ font-size:17px;  font-style:italic}
.label-error{ color:#ff484c;  font-weight:bold}
.label-error-big{ color:#ff484c;  font-size:18px;  font-weight:normal}
.thick{ color:red;  font-size:17px;  font-weight:bold;  margin-left:-7px}

select.form-control { -webkit-appearance: auto;-moz-appearance: auto; appearance:auto;}


fieldset { 
  clear:both; 
  margin: 30px 0!important;
  padding: 20px 10px!important;
  box-shadow: 2px 6px 6px rgba(100, 100, 100, .175);
  border: 2px solid #eee;
 transition: all ease-out 0.5s;
 padding: 5px 10px;  
 background: #fdfdfd;

}
fieldset:hover { background: #fdfdfd; border-color: #aaa; }


/*================================================================*/
/* questa la paginazione dentro una WEB-GRID*/
    .table_paginazione > td {  padding-top: 0.5rem!important;padding-bottom: 0.5rem!important; font-size:1rem; font-weight:bold;  }
    .table_paginazione > td > a { font-size:0.8rem;  margin:0 0.3rem; padding: 3px 7px; border:3px solid #038487; border-radius: 3px; border-radius: 100%; }
    .table_paginazione > td > a:first-child { margin-left:0.8rem ;}
    .table_paginazione > td > a:hover {   background-color: #f0f0f0;  }



/* PAGINAZIONE */

.pagination-container { display:flex; width:100%; justify-content:flex-end;}

.paginator_info { font-size: 80%; font-weight: bold; text-transform: uppercase; margin-top: 1.25rem;  float: right; margin-right: 9.25rem; }
.pagination{ padding-left:0;  margin:20px 0;  border-radius:100%; margin-right:5%;}

.pagination >li{ display:inline}

.pagination >li >a, 
.pagination >li >span{ position:relative;  float:left;  padding:6px 12px;  margin-left:-1px;  line-height:1.428571429;  text-decoration:none;  background-color:#fff;  border:1px solid #ddd; }

.pagination >li:first-child >a, 
.pagination >li:first-child >span{ margin-left:0;  border-bottom-left-radius:100%;  border-top-left-radius:100%; }

.pagination >li:last-child >a, 
.pagination >li:last-child >span{ border-top-right-radius:100%;  border-bottom-right-radius:100%; }

.pagination >li >a:hover, 
.pagination >li >span:hover, 
.pagination >li >a:focus, 
.pagination >li >span:focus{ background-color:#eee}

.pagination >.active >a, 
.pagination >.active >span, 
.pagination >.active >a:hover, 
.pagination >.active >span:hover, 
.pagination >.active >a:focus, 
.pagination >.active >span:focus{ z-index:2;  color:#fff;  cursor:default;  background-color:#038487;  border-color:#038487; 
                                border-radius: 100%; outline: 6px solid #038487; /*Luca A effetto palla*/
                                }

.pagination >.disabled >span, 
.pagination >.disabled >a, 
.pagination >.disabled >a:hover, 
.pagination >.disabled >a:focus{ color:#999;  cursor:not-allowed;  background-color:#fff;  border-color:#ddd}

.pagination-lg >li >a, 
.pagination-lg >li >span{ padding:10px 16px;  font-size:18px}

.pagination-lg >li:first-child >a, 
.pagination-lg >li:first-child >span{ border-bottom-left-radius:6px;  border-top-left-radius:6px}

.pagination-lg >li:last-child >a, 
.pagination-lg >li:last-child >span{ border-top-right-radius:6px;  border-bottom-right-radius:6px}

.pagination-sm >li >a, 
.pagination-sm >li >span{ padding:5px 10px;  font-size:12px}

.pagination-sm >li:first-child >a, 
.pagination-sm >li:first-child >span{ border-bottom-left-radius:3px;  border-top-left-radius:3px}

.pagination-sm >li:last-child >a, 
.pagination-sm >li:last-child >span{ border-top-right-radius:3px;  border-bottom-right-radius:3px}

.pager{ padding-left:0;  margin:20px 0;  text-align:center;  list-style:none}

.pager:before, 
.pager:after{ display:table;  content:""}

.pager:after{ clear:both}

.pager:before, 
.pager:after{ display:table;  content:""}

.pager:after{ clear:both}

.pager li{ display:inline}

.pager li >a, 
.pager li >span{ display:inline-block;  padding:5px 14px;  background-color:#fff;  border:1px solid #ddd;  border-radius:15px}

.pager li >a:hover, 
.pager li >a:focus{ text-decoration:none;  background-color:#eee}

.pager .next >a, 
.pager .next >span{ float:right}

.pager .previous >a, 
.pager .previous >span{ float:left}

.pager .disabled >a, 
.pager .disabled >a:hover, 
.pager .disabled >a:focus, 
.pager .disabled >span{ color:#999;  cursor:not-allowed;  background-color:#fff}

/*===============================================*/


.checkbox input[type="checkbox"]{ margin-left:0}
.label-info{ background-color:unset }
.tltp{}
 .tltp .tltptxt{ visibility:hidden;  position:absolute;  border:2px solid #078285;  border-radius:1px;  background-color:white;  color:#6E6E6E;  text-align:center;  font-size:20px;  padding:5px;  box-shadow:0 3px 14px rgba(0,0,0,0.4);  z-index:1;  margin-top:34px;  margin-left:-100px}
 .tltp:hover .tltptxt{ visibility:visible}

/* =======================================  */
/* LOGIN */
.romero-login{ max-width:560px;  width:calc(100% - 40px);  margin:80px auto;  box-shadow:0 1px 4px 0 rgba(49,54,58,0.36);  border:solid 1px #f4f7fa;  height:inherit}

.romero-login form>div { margin-top: 1.5rem; }


/* =======================================  */
/* FINESTRA STRUTTURE */

.ui-widget.ui-widget-content{ border:3px solid #078285 }
.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br{ border-bottom-right-radius:unset }
.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl{ border-bottom-left-radius:unset }
.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr{ border-top-right-radius:unset }
.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl{ border-top-left-radius:unset }
.ui-widget-content{ border:1px solid #ddd;  background:#fff;  color:#333}
/*.ui-widget{ font-family:'IBM Plex Sans',sans-serif ;  font-size:1em}*/
.ui-widget-header{ color:#333 ;  font-weight:bold ;  font-size:18px;  border:unset ;  background:white ;  margin:4px 9px}
.ui-dialog .ui-dialog-titlebar{ padding:unset }
.ui-dialog .ui-dialog-titlebar-close{ right:-9px; top: 8px; width:30px ;  height:30px;   background-image: url(../Content/ico_close.png); background-position:center center; background-repeat:no-repeat;  }
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus, .ui-button:hover, .ui-button:focus{ border:unset ;  font-weight:normal;  color:#078285 ;  background:#bce0fd ;  border:unset ;  border-radius:4px}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active{ display:inline-block;  font-size:30px;  font-weight:bold;  text-decoration:none;  color:#078285 ;  margin:3px 3px 0 0;  font-weight:normal;  font-size:16px;  background:#bce0fd ;  border:unset ;  border-radius:4px;  margin-top:4px;  margin-bottom:4px;  text-decoration:none}

/* =======================================  */
/* MAPPA */
#map{ position:fixed;  margin:0;  height:100%;  left:0;  right:0;  border-top:1px solid grey}
.map-selection{ position:absolute;  z-index:98;  width:100%;  top:52px;  left:0px;  height:auto;  padding:0;  background:white;  border-bottom:1px solid grey}
 .map-selection >p{ color:#078285;  margin:0 }
 .map-selection >p >select{ /*text-shadow:2px 0 0 #fff,-2px 0 0 #fff,0 2px 0 #fff,0 -2px 0 #fff,1px 2px #fff,-1px -1px 0 #fff,1px -1px 0 #fff,-1px 1px 0 #fff; */ }
 .map-selection .form-control, .map-selection .form-select{ display:inline-block;  width:unset}
.map-desc{ font-size:16px;  margin:0 -24px 0 0}
.leaflet-popup{ border:3px solid #078285; border-radius: 12px; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip{ border-radius:0 }
.leaflet-popup-content-wrapper{ text-align:center}
.leaflet-container a{ color:#078285 ;  /*color:#003c8f ; */}
    .leaflet-container a.leaflet-popup-close-button{        width:30px ;         padding:4px 0 0 0 ;         font:37px/16px Tahoma,Verdana,sans-serif ;  color:#078285 ;  /*color:#003c8f ; */   }
.leaflet-popup-content{    margin:6px 30px 0 6px ;     min-height:21px;     line-height:1.4;     text-align:center}
.leaflet-touch .leaflet-control-layers, .leaflet-touch .leaflet-bar{    border:0 ;     box-shadow:0 1px 5px rgb(0 0 0 / 65%) ;  border-radius:4px }

/* ===POPUP ====================================  */
.overlay{ position:fixed;  top:0;  bottom:0;  left:0;  right:0;  background:rgba(0,0,0,0.7);  transition:opacity 500ms;  visibility:hidden;  opacity:0;  z-index:1}
 .overlay:target{ visibility:visible;  opacity:1}


.popup{ margin-top:80px ;  padding:0 ;  background:#fff;  transition:all 5s ease-in-out;  border:3px solid #078285;
        width: calc(100% - 15px); text-align:left !important; height: auto; overflow-x: auto;
}

 .popup h2{ margin-top:0;  color:#333; }
 .popup p { font-size:1rem; padding: 5% 2%; color:#555; }

.control-label{ display:inline-block;  margin:4px 9px;  font-weight:bold;  font-size:13px}

 .control-label i{ font-size:18px }
.nnbl{ font-weight:normal }
.popup .close{ font-size:30px;  font-weight:bold;  text-decoration:none;  color:#078285;  margin:3px 3px 0 0;  opacity:1; float: right;}
 .popup .close:hover{ color:#003c8f}
.popup .content{ max-height:30%;  overflow:auto}
.fix-btn{ position:fixed;  top:56px;  right:0}
.demo-btn{ cursor:not-allowed;  text-decoration:none;  background-color:#BDBDBD ;  color:white }
 .demo-btn:hover{ background-color:#BDBDBD }

/* =======================================  */
canvas{ width:100px}
#qrcodeCanvas canvas{ width:150px;  float:right;  margin-top:46px;  margin-right:43px;  padding-left:20px}
.wt2{ min-width:380px}
.list-allegati{ list-style:none}
 .list-allegati li h3 a{ margin-left:10px}

#notfound .notfound{ position:absolute;  left:50%;  top:50%;  -webkit-transform:translate(-50%,-50%);  -ms-transform:translate(-50%,-50%);  transform:translate(-50%,-50%)}
.notfound{ max-width:410px;  width:100%;  text-align:center}
 .notfound .notfound-404{ height:280px;  position:relative;  z-index:-1}
 .notfound .notfound-404 h1{ font-size:230px;  margin:0px;  font-weight:900;  position:absolute;  left:50%;  -webkit-transform:translateX(-50%);  -ms-transform:translateX(-50%);  transform:translateX(-50%);  background:linear-gradient( 135deg,#289afb 0%,#57acfc 100%);  -webkit-background-clip:text;  -webkit-text-fill-color:transparent;  background-size:cover;  background-position:center}
 .notfound h2{ color:#000;  font-size:24px;  font-weight:700;  text-transform:uppercase;  margin-top:0}
 .notfound p{ color:#000;  font-size:14px;  font-weight:400;  margin-bottom:20px;  margin-top:0px}

 
.nav-big{}
.nav-small { display:none;}

.select2-container--default .select2-selection--single .select2-selection__arrow {  right: 4px; }
.select2-container--default .select2-selection--single {  border-radius: 0.375rem; }




/* =======================================  *//* =======================================  */
/* MEDIA QUERY 
    - l'approccio è invertito rispetto al Mobile-first, per cui uso max-width...
    - le misure devono essere BASATE SUI BREAKPOINT PREDEFINITI DI BOOTSTRAP... per quanto possibile!
            https://getbootstrap.com/docs/5.2/layout/breakpoints/

*/

@media (max-width:1400px)
{ 
}

@media (max-width:1200px)
{
}

@media (max-width:991px)
{ 
    .body-content, .list-spec   { text-align:center}
    .romero-login                 { width:calc(100% - 40px);  box-shadow:0 1px 4px 0 rgba(49,54,58,0.36);  border:solid 1px #f4f7fa;  height:inherit}
    .square                     { margin:15px auto;  padding:10px 6px}
    .title-left                 { position:unset;  display:inline-block;  font-size:24px;  letter-spacing:0.4px;  color:#078285}
}

@media (max-width:767px)
{ 
    #menu       { top:52px;  left:0;  bottom:0;  width:100%;  border:0;  box-shadow:none;  margin:0;  overflow-x:auto}
    .nav-small  { display: block; margin-top: -10px !important; }
    .nav-big    { display:none;}
}

@media (max-width:575px)
{
    .panel-log{ margin:0 5px 20px}
}

/* =======================================  *//* =======================================  */