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

    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 {  

    --color_base:           #ff6c03;
    --color_base_chiaro:    #ffac63;
    --color_base_scuro:     #df5c03;
}

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

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

/* =======================================  */
/* PAGINE */


      #menu24 > .voce_inevidenza a {
          background: linear-gradient(46.62deg, var(--color_base_chiaro) 0%, var(--color_base) 93.64%);
          box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
          border-radius: 5px;
          text-decoration: none;
          color: white;
            padding: 5px 10px; 
        }


.container{ width:100%}

.body-content{  padding-left:10px;  padding-right:10px; padding-top:52px;  margin-bottom:24px; 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{ max-width:280px}/*, textarea*/
textarea { max-width:100% ; }
.panel-footer{ display:block;  position:fixed;  bottom:0;  right:0;  width:100%;   padding:unset;  background-color:white;  border-top:1px solid grey;  z-index:99}

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

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

.logo_piccolo { max-height:60px; width:auto; margin:10px 15px;}

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

/* NAVBAR */
.main-bar{ width:100%;  height:52px;  position:fixed;  background-color:white;  border-bottom:1px solid grey;  z-index:99}
.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;   height:90px; width:100%;    background:url('../Content/logo-light-small.png') no-repeat no-repeat top center; background-size:auto auto;  }
.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:var(--color_base);  /*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:var(--color_base);  /*color:#003c8f; */ margin-top:4px}
 .main-menu >ul >li >a >p{ display:inline-block;  vertical-align:super}
.nav-big{}
.accent-color{ color:var(--color_base); }

.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:101;  -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:var(--color_base);*/  /*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)}*/

#menu24 {
    /*position:fixed;  
        min-width:300px; */
    /* margin: 0 0 0 -10px; */
    padding:1rem 0; 
    background-color: #fff;
    box-shadow: 5px 0px 0px 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;
    /* z-index:999;*/ 
    min-height: 600px; 
    /*Luca x renderlo scrollabile....  come altro fare ?*/
   /* max-height: calc(100% - 50px);
    overflow-y: auto;*/
}



  hr { border-top: 2px solid rgba(0, 0, 0, 0.15); margin-top: 10px !important; }

 #menu24 hr{ margin:0 }

 #menu24 .submenu{ color:gray ;  font-size:14px;  font-weight:700;  text-decoration:none;  text-transform:uppercase;  margin-top:20px; margin-bottom:5px; }

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

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

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

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

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

 #menu24 >li i { display:inline-block;  color:gray;    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}*/

/* =======================================  */
/* 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 var(--color_base);  padding:7px;  margin-bottom:1px;  color:var(--color_base)}
*/
.btn{ 
    display:inline-block;  
    color:var(--color_base_scuro) ;  
    font-weight:normal;  
    background-color:#fff;  
    border:1px solid var(--color_base_chiaro);  
    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:var(--color_base_scuro) ;  
    font-weight:normal;  
    background-color:#fff;  
    border:1px solid var(--color_base_chiaro);  
    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;align-items: flex-end; } 

.btn_primario   {     background-color:var(--color_base_scuro) ;      color:#fff;  }
.btn_setup      {     align-self:flex-end;  }

.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:var(--color_base) ;  text-decoration:none;  outline:0 }
    .btn:active{ color:white ;  font-weight:bold;  background:var(--color_base);  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:var(--color_base) }
    .btn-strong:hover, .btn-strong:focus{ color:var(--color_base) ;  background:var(--color_base_chiaro) }
    .btn-strong:active{ color:var(--color_base);  background:var(--color_base_chiaro)}
    .btn-light{ color:var(--color_base) ;  background-color:white ;  border:1px solid var(--color_base)}
    .btn-light:hover, .btn-light:focus{ color:var(--color_base) ;  background:var(--color_base_chiaro) }
    .btn-light:active{ color:var(--color_base) ;  background-color:white ;  border:1px solid var(--color_base)}

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

    .btn_small:hover, .btn_small:focus{ color:white ;  font-weight:bold;  background:var(--color_base) ;  text-decoration:none;  outline:0}
    .btn_small:active{ color:white;  font-weight:bold;  background:var(--color_base);  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:var(--color_base);  /*color:#003c8f; */ font-weight:normal;  background-color:var(--color_base_chiaro) ;  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:var(--color_base) ;  text-decoration:none;  outline:0}
    .btn-map:active{ color:white;  font-weight:bold;  background:var(--color_base);  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:#gray;  z-index:999}
    .btn-log:hover, .btn-log:focus{ font-weight:normal }
    .ui-button:focus, .ui-button-icon:focus{ outline:0 }

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

.table      { margin-top: 20px; }
.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 > :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 var(--color_base)}
.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: 30px;  border-top:2px solid rgba(0, 0, 0, 0.15);padding-top:10px; }
.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:var(--color_base) ;  text-decoration:none}
 a:hover, a:focus{ color:gray ;  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:var(--color_base);  z-index:999;  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:var(--color_base)}
#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;}
/*================================================================*/
/* 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 var(--color_base_scuro); 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:var(--color_base_scuro);  border-color:var(--color_base_chiaro); 
                                border-radius: 100%; outline: 6px solid var(--color_base_chiaro); /*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}
.table >tbody >tr:first-child >th{ border:0}
 .table >tbody >tr:first-child >th a{ color:#gray }
.table >thead >tr >th, .table >tbody >tr >th, .table >tfoot >tr >th, .table >thead >tr >td, .table >tbody >tr >td, .table >tfoot >tr >td{ vertical-align:middle}
.label-info{ background-color:unset }
.tltp{}
 .tltp .tltptxt{ visibility:hidden;  position:absolute;  border:2px solid var(--color_base);  border-radius:1px;  background-color:white;  color:gray;  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 */
.box_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}

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


/* =======================================  */
/* FINESTRA STRUTTURE */
.ui-widget.ui-widget-content{ border:3px solid var(--color_base) }
.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:var(--color_base) ;  background:var(--color_base_chiaro) ;  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:var(--color_base) ;  margin:3px 3px 0 0;  font-weight:normal;  font-size:16px;  background:var(--color_base_chiaro) ;  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:var(--color_base);  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 var(--color_base)}
.leaflet-popup-content-wrapper, .leaflet-popup-tip{ border-radius:0 }
.leaflet-popup-content-wrapper{ text-align:center}
.leaflet-container a{ color:var(--color_base) ;  /*color:#003c8f ; */}
    .leaflet-container a.leaflet-popup-close-button{        width:30px ;         padding:4px 0 0 0 ;         font:37px/16px Tahoma,Verdana,sans-serif ;  color:var(--color_base) ;  /*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 }

/* =======================================  */
.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 var(--color_base)}
 .popup h2{ margin-top:0;  color:#333;  font-family:Tahoma,Arial,sans-serif}
.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:var(--color_base);  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)
{ #menu24 { min-height: 600px;    }
}

@media (max-width:1200px) {
    #menu24 { min-height: 600px;    }
}

@media (max-width:991px)
{ 
    .body-content, .list-spec   { text-align:center}
    .box_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:var(--color_base)}
}

@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}
}

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