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

    2023                                                         


====================================================================
=== OTTIMIZZAZIONI RESPONSIVE - usiamo le dimensioni standard di BOOTSTRAP 
=== https://getbootstrap.com/docs/5.2/layout/breakpoints/ 
====================================================================

*/ 
 

/* ===================================================================================*/
/* === FONT */

@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 {
    --font-normale: 'Montserrat';
    --font-diverso: 'Tahoma';
    --col-principale: #f29100; /*colore scuro*/
    --col-principale-2: rgba(242,145,0,.7); /*colore chiaro*/
    --col-bordi: gray;
    --col-testo: rgb(98, 95, 110);
    --col-testo-chiaro: #5e5873;
    --col-link: rgb(128, 125, 130);
    --col-in-evidenza: #D12E05; /*arancione*/
    --col-neutro: #879fab;
    font-size: 14px;
}
/* ====color per l'area ============================================================= */
.area5{ color : var(--col-principale) ; }
.area14{ color : rgb(215, 179, 230);  } /*viola */
.area13{ color : #b6ff00; }              /*verde*/
.area12{ color :rgb(232, 168, 137) ;}     /*arancio*/
.area11{ color :  rgba(133, 185, 251, 0.87) }  /*blu*/
.area16{ color : #CCCCCC; }   /*grigio*/
.area15{ color :rgb(191, 5, 5)}  /*rosso*/
 


.area24{ color : blueviolet;  } /*viola */
.area23{ color : #f18769; }              /*arancio*/
.area22{ color :  #7bbb58  ;}     /*verde*/
.area21{ color : Darkblue }  /*blu*/
.area26{ color : brown; }   /*marrone*/
.area25{ color : Crimson}  /*rosso*/




/* accessibility:*/

    .skip-link { position: absolute;top: -40px; /* Nascosto per default */ left: 0;padding: 8px;background-color: #ffffff;z-index: 100;}

    .skip-link:focus {    top: 0; /* Diventa visibile quando riceve il focus */ } 
    h1 {line-height:0; margin: 20px 0 40px 0;}

.text-info {    color: #571DF7;}
/* ===================================================================================*/
/* === strutture generali */
html, body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}

    /* Move down content because we have a fixed navbar that is 50px tall */
    body{ margin:0;  padding:0;  font-family:var(--font-normale), sans-serif ; background-color: #f8f8f8;  font-size:1rem; }

    .body-content{ padding-left:15px;  padding-right:15px; min-height:80vh; margin-top:60px;  margin-bottom:20px; }

    .dl-horizontal dt{ white-space:normal}

    footer { margin-top:5vh; padding-top:20px; border-top:3px solid rgba(0,0,0,0.05);}

/*
    .css-pagina-contenuto { min-height:600px; }
*/
 
/* ===================================================================================*/
/* === HEADER  */ 
.navbar-inverse {    background-color: #fff;    color: var(--col-testo);}
.navbar-nav > li > a , .navbar-nav > li > i { color:white; }
.navbar-nav > li > a:hover { color:   var(--col-testo);}
.navbar-inverse .navbar-toggle .icon-bar {
    background-color: #fff ; color : #fff;
}
    .navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus{ background-color:#017fc1}

    .wellAurora{ 
                background:#fff;  
                box-shadow:5px 0px 20px rgba(0,0,0,0.3); 
                border:1px solid var(--col-bordi);  
                min-height:50px;  padding:5px;  margin-bottom:25px;  
            
                font-weight:bold; 
    }
    .etiTitolo{  color: var(--col-testo);  font-size:1.5rem; }

    .navbar-inverse .navbar-brand { color: #000; font-weight:900; }



/* ===================================================================================*/
    /* MENU */

.panel{ }
.pnlPopUp {
    width: 800px;
    padding: 10px;
}

    #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:#09B3B7;  /*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)}

    #MainMenu{ 
            /*
                transform:translate(-112%,0);  
                transition:transform 0.2s cubic-bezier(0.77,0.2,0.05,0.5);  
            margin: 18px 0 0 -10px; 
            padding:0 14px 7px 7px; 
            */
                position:fixed;  
              /*  width: 18vw;*/
                min-width:250px;  
                min-height: 90vh;
                left:0; 

                margin: 0 3px;
                
            background-color:#fff;  
            box-shadow:5px 0px 20px rgba(0,0,0,0.3); 
            border:1px solid var(--col-bordi);  
            list-style-type:none;  
           
            z-index:999;

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

     #MainMenu   .list-group>div { background-color:#fff;   }

     #MainMenu hr{ margin:0 } 


    /* ====== MENU HAMBURGER ======================================= */

        .menu-hamb { display:none; text-align:right; font-size:25px; position: absolute; top: 5px; left: 5vw; z-index:9999; }
        #Hamburger2 {left: 90vw; }
        #Hamburger2 .fa-bars { color: var(--col-principale-2); }

        
    /* ====== MENU HAMBURGER ======================================= */

    a.list-group-item.list-group-item-success.collapsed{
                     /*text-transform:uppercase;  */  
                    margin-top:20px; margin-bottom:5px;  background:#fff; border-radius: 4px; 
                    border:none; box-shadow:none; color:var(--col-testo); 
    }
    a.list-group-item.list-group-item-success { 
                    background: linear-gradient(118deg,var(--col-principale), var(--col-principale-2)); 
                    box-shadow: 0 0 10px 1px var(--col-principale);
                    font-size:1.2rem; color:#fff;    font-weight:normal;  text-decoration:none; 
                }

    a.list-group-item:hover, a.list-group-item:focus,
    a.list-group-item.list-group-item-success:hover, a.list-group-item.list-group-item-success:focus
                {  background-color:var(--col-principale-2)!important; color:#fff; }
 

.list-group-item .list-group-item {
    margin-left: 2rem !important;
}


    a.list-group-item, button.list-group-item{ }


    .pnliframe { position:absolute; bottom:0; width:99%; margin:20px 0;  }
    .pnliframe a { color:var(--col-testo);  font-weight:normal;  text-decoration:none; box-shadow: 0 0 3px 3px #ddd; border-radius: 20%; padding:4px; }

/* ===================================================================================*/
/* === ELEMENTI  */
    a{ color:var(--col-link)}

    /*a:hover, 
    a:focus{ color:var(--col-link);  font-weight:bold}*/

    .row{ margin-right:unset;  margin-left:unset}

    .btn-aurora, .btn-default, input[type="submit"], .btn-datagrid
        {   text-transform:uppercase; font-family:var(--font-diverso);  color: #fff;
            padding:6px 6px;  border-color: var(--col-principale) !important  ; background-color: var(--col-principale) !important ; }

    .btn-aurora:hover, .btn-aurora:focus, .btn-default:hover, .btn-default:focus,  input[type="submit"]:hover    
        { box-shadow:0 8px 25px -8px var(--col-principale); }

    .btn-aurora:active, .btn-default:active{ color:#80cd45;  background-color:#fbfbfb;  border-color:#017fc1;  -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-datagrid
        {   text-transform:uppercase; font-family:var(--font-diverso);  color: #000 ; box-shadow: 2px 2px var(--col-principale) ;
            padding:6px 6px;  border-color: var(--col-principale-2) !important  ; background-color: var(--col-principale-2) !important ; }

    .btn-default:active:hover{ color:#80cd45;  background-color:#fbfbfb;  border-color:#017fc1}
    .btn:hover{ border-bottom-width:1px}


.btn-cse {
    width: 20px;
    height: 20px;
    color: var(--col-testo) !important;
    /* padding: 10px;*/
    background-color: transparent !important;
    border: 0px;
    display: inline;
    box-shadow: 2px 2px #ccc;
}



    .breadcrumb{ border:none;background: #eee; /* margin-top:3%;*/ }

    
    /*per il banner cookies*/
    #cookie {   font-weight:bold;  text-align:center; font-size: 2rem;  color:#555;background:rgba(204,204,204,0.95);  
                z-index:900;  position:fixed; top: 20vh; width: 80vw; min-height: 25vh; margin-left: 10vw; padding: 8vh;    }

    #cookie a{  text-decoration:underline; }

    #cookie .close{    position:absolute;  top: 20px; right:40px; padding:10px;
                        font-weight:900;  color:#fff;  text-decoration:none;  background:#fff; }
    #cookiesMsg { position:fixed;z-index:10000 ;}
    /* in ogni CSS specializzato uso un'immagine specializzata come spondo*/
    .navbar-header { height:100%; width: 18vw; }
    .navbar-brand { display:inline-block; /*margin-left:5vw;*/ width:100%;  background-position:center center; background-repeat:no-repeat; background-size:contain;  }


/* ===================================================================================*/
/* === LISTE , TABELLE */

    td,  th{ padding:8px}
    .bordergrwHead      { background-color:rgba(181, 180, 179, 0.3);  color:#000;  font-size: 1rem; }
    .bordergrwAlter     { background-color:rgba(200,200,200,0.2) !important;  }
    .bordergrwHead a  { color:var(--col-testo); text-decoration:none!important;}
    .bordergrwHead a:hover  {}

/* questa la paginazione dentro una WEB-GRID*/
    .table_paginazione {  background:  #eee; }
    .table_paginazione td {  padding-top: 0.5rem!important;padding-bottom: 0.5rem!important; font-size:1rem; font-weight:bold; text-align:center;background:none; }
    .table_paginazione td > a { 
                display:inline-block;  font-size:1.1rem; width:2.5rem;   text-decoration:none; color:var(--col-link);
                margin:0 0.3rem; padding: 3px 7px; border:3px solid var(--col-principale); 
                margin:0 0.3rem; padding: 3px 7px; border:3px solid var(--col-principale); 
                border-radius: 3px; border-radius: 100%;  background: var(--col-principale-2)  ;

                
    }
    .table_paginazione td >  a:first-child { margin-left:0.2rem ;}
    .table_paginazione td >  a:hover {   background-color: #f0f0f0;  }


    .list-group-item-info { background-color:var(--col-principale);  color:#fff; margin-top:30px; margin-bottom:10px; }

/* ===================================================================================*/
/* === FORM */

/* Set widths on the form inputs since otherwise they're 100% wide */
input[type="text"], 
input[type="password"], 
input[type="email"], 
input[type="tel"], 
input[type="select"] { width:auto;   padding:4px;  font-size: 1rem;  /* modifica dimensione testo */}


.form-control{ border-color:var(--col-bordi);  min-height:inherit;  padding:4px 8px;  height:auto;  font-size:1rem;  /* modifica dimensione testo */}
select.form-control{  padding:6px 8px; }

.input-group-addon{  border-color:var(--col-bordi);  width:150px;  background-color:whitesmoke;  font-size: 1rem;  /* modifica dimensione testo */}
.input-group{ margin-bottom:5px}

    .input-group .input-group-addon { min-width:200px; }
    /*.input-group .form-control      { min-width:150px; }*/


    .input-group .form-control      .lar   ,
     .input-group .form-control      .lar2   ,
     .input-group .form-control      .lar2-bt ,
     .input-group .form-control      .lar3     ,
     .input-group .form-control      .lar4       { min-width:250px; }

.icon-group-color {      color: var(--col-neutro); }

.viewSmart { display:none;  }

.card {  position: relative;  min-width: 0;  word-wrap: break-word;  background-color: #fff;  background-clip: border-box; border: 1px solid rgba(34,41,47,.125);  border-radius: 0.428rem; padding: 1.5rem; margin: 2.5rem 0; }


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

.bordato {
    border-radius: 4px;
    border: 1px solid var(--col-link);
    padding: 8px;
}

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

.tariffe{  border:1px solid var(--col-bordi);  padding:10px;  width:450px;  border-radius:10px}

.wellLegenda {    color: var(--col-testo);    background-color: whitesmoke;    padding: 10px;    box-shadow: 0 5px 4px 0px var(--col-principale-2);    border: solid 1px #f4f7fa;    padding: 20px;    border-radius: 3%;    margin-bottom: 10px;}
.wellLegenda>ul>li{ background-color:rgba(255,255,255,0.7); }

#wizHeader li .prevStep         { background-color:var(--col-principale-2) /*#696*/}
#wizHeader li .prevStep:after   { border-left-color:var(--col-principale-2)}
#wizHeader li .currentStep      { background-color:var(--col-principale)}
#wizHeader li .currentStep:after    { border-left-color:var(--col-principale) !important}
#wizHeader li .nextStep             { background-color:#C2C2C2}
#wizHeader li .nextStep:after       { border-left-color:#C2C2C2 !important}
#wizHeader          { list-style:none;  overflow:hidden;  font:18px Helvetica,Arial,Sans-Serif;  margin:0px;  padding:0px}
#wizHeader li       { float:left}
#wizHeader li a     { color:white;  text-decoration:none;  padding:10px 0 10px 55px;  background:brown; /* fallback color */ background:hsla(34,85%,35%,1);  position:relative;  display:block;  float:left}
#wizHeader li a:after   { content:"";  display:block;  width:0;  height:0;  border-top:50px solid transparent; /* Go big on the size,and let overflow hide */ border-bottom:50px solid transparent;  border-left:30px solid hsla(34,85%,35%,1);  position:absolute;  top:50%;  margin-top:-50px;  left:100%;  z-index:2}
#wizHeader li a:before  { content:"";  display:block;  width:0;  height:0;  border-top:50px solid transparent;  border-bottom:50px solid transparent;  border-left:30px solid white;  position:absolute;  top:50%;  margin-top:-50px;  margin-left:1px;  left:100%;  z-index:1}
 
#wizHeader li:first-child a     { padding-left:10px}
#wizHeader li:last-child        { padding-right:50px}
#wizHeader li a:hover           { background:var(--col-principale);color:var(--col-principale-2)}
#wizHeader li a:hover:after     { border-left-color:var(--col-principale) !important}

.head-index-font {    font-size: 24px;    margin-top: 5%; color:#5e5925; font-weight }
.loginForm { 
        box-shadow: 0 2px 4px 2px rgba(49,54,58,0.36); border: solid 1px #f4f7fa; padding:20px; border-radius:3%;
        margin-top:20%;

}
legend { font-size: 18px; 
    border-bottom: 1px solid rgba(0,0,0,0.3);
}
    .riserva                    { background-color: #ffd800 !important; }
    .Calendario                 { background-color:#fff; border:none; height:320px; width:80%; }
    .CalendarioTitolo ,.Calendario tr:first-child   td { background-color: var(--col-principale)!important; height: 12pt; font-weight:bold; color:#fff;}
    .CalendarioSelected         { background-color: var(--col-principale)!important; font-weight:bold;}
    .CalendarioDayHeader        { font-weight:bold; font-size:0.8rem; color:#333;  }
    .CalendarioDay              { background-color:#fff; }

    .CalendarioNextPrev  a       { font-weight:bold;  font-size:0.8rem; color:#fff!important; }
    .CalnmdarioOtherMonthDay    { color:#999;}

    .CalendarioToday            { background-color:#eee; color:#999; }
    .CalendarioSelector         { background-color: var(--col-principale); color:#fff; font-size:1.5rem;   }



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

.lista_servizi      { display: flex;  flex-wrap: wrap;  align-items: stretch; }


    .box_servizio{ 
                background:#fff;  
                box-shadow:5px 2px 10px rgba(0,0,0,0.2); 
                border:1px solid var(--col-bordi);  
                height: 98%;
                min-width:100px; 
                margin-bottom:25px;  
                border-radius:6px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
   }

    .dettaglio_servizio .box_servizio   { padding:2em 1em; }
    .lista_servizi .box_servizio        { margin-left:25px; padding:2em 1em;   }

    .box_categoria { border:2px solid rgba(0,0,0,0.2);  box-shadow:none; }
    .box_categoria i.fa { color:var(--col-principale); }

    .box_servizio .immagine     { height:200px; width:100%; overflow:hidden; border-radius:25px; background-size:contain; background-position:center center; }
    .box_servizio  img           { border-radius:25px; height:200px; width:auto;  max-width:100%; }

    .box_servizio .titolo       { min-height:5.8rem; margin:2rem 10px; color:#999; text-align:center; font-weight:bold;}
    
    .box_servizio .descrizione  { min-height:6.5rem; margin:1rem 0; padding:1rem; ;border-radius:8px; position:relative; }
    .box_servizio .descrizione .puntini {  position:absolute; bottom:5px ;left: 89%; font-weight:900; }


    .box_servizio.box_categoria .titolo { vertical-align: middle;/* display: flex;*/ align-items: center; align-content: space-evenly;  justify-content: center; }
    .box_servizio .titolo small { font-size:0.7em; font-weight:normal; }


    .box_servizio.box_categoria .titolo, 
    .box_servizio .descrizione,
    .box_servizio
                           { background-color:rgba(242,237,148, 0.1); /*rgba(242,145,0, 0.1)*/}

    .box_servizio .attributi                    { margin:0.5rem 0; }
    .box_servizio .attributi div:nth-child(2)   { text-align:right; }

    .box_servizio .titolo ,
    .box_servizio .descrizione ,
    
                {  /* queste 2 sono necessarie */ overflow: hidden; /*white-space: nowrap; text-overflow:ellipsis; */ }
   
    .box_servizio .badge    { color: var(--col-principale); background-color:rgba(242,145,0, 0.2); }
    .box_servizio .btn-aurora { white-space: nowrap; min-width:100px;}

    .dettaglio_servizio .box_servizio .descrizione  { height:auto; overflow:visible; padding:1rem; margin:0.5rem; background-color:rgba(242,145,0, 0.1); border-radius:8px; }



/*
  ======================================================================================================
  ======================================================================================================
            === vecchio CSS generale 
  ======================================================================================================
  ======================================================================================================

*/


.conferma-ac{ color:black}

/*se rosso non si vede*/
.text-dangerB{ color:yellow}

/*---------fine override------*/
.label-underline{ text-decoration:line-through}

.label-inrevisione{ color:#017fc1;  font-family:var(--font-diverso);  font-weight:bold;  font-size:16px}

.label-msginfo{ color:var(--col-link);   font-weight:bold;  font-size:16px}

.label-error{ color:#ED0202;  font-size: 1.5rem;  /* modifica dimensione testo */}

.label-ok {   color:forestgreen;     font-size: 1rem; /* modifica dimensione testo */ }
.right{ float:right}
.data{ width:90px}

.bottom{ margin-bottom:10px}

.top{ margin-top:10px}
.label-etichetta {    color: #0129CB /*indianred*/;    font-style: italic;    font-size: 1rem;    font-family: var(--font-diverso);}


.wizAurora{ margin-top:unset;   margin-bottom:10px}



.wellVerde{ min-height:10px;  padding:5px;  margin-bottom:5px;  background-color:whitesmoke;  opacity:0.80; filter:alpha(opacity=80); -webkit-box-shadow:none;  box-shadow:none; border:1px outset whitesmoke; border-radius:4px;  color:#0f0f42;  /* IE10 */ background-image:linear-gradient( #58C474 0%,#FFF 100%); border:1px solid var(--col-link) ;   border-radius:4px;   -webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.05);  box-shadow:inset 0 1px 1px rgba(0,0,0,0.05);  margin-bottom:10px}

.wellPanel{ /*margin-top:10px; */ border:1px dotted var(--col-link) ;  margin-bottom:15px}

.wellTabNav{ background-color:#FE763E}

.headerElenco{  background-color:indianred;   color:#fff;  font-weight:bold;   text-transform:uppercase;  font-size:11px;   padding:5px;  opacity:0.8}


.bordergrwAlter{ background-color:#e6e6e6}

#PopupHeader{color:var(--col-testo); font-size:22px}
.ModalPopupBG{background-color:#669;  opacity:0.7}

/* grwElenco */
 .bordergrw{ box-shadow:0 1px 1px rgba(1,0,0,0.075) inset; border:1px solid #ccc; -webkit-border-radius:8px; -moz-border-radius:8px; border-radius:8px; /* overflow:hidden; */ /* per evitare che nella pagina corsi,ultima riga in basso,a ridosso del footer,siano visibili/utilizzabili le tre voci (agendo su configura) */ filter:alpha(opacity=80); margin-bottom:15px; padding:1px; width:auto}
 .bordergrw td, .bordergrw th{border:1px dotted #ccc; font-size:10pt}
 .bordergrw th{border:1px dotted #ccc;  font-size:10pt; font-weight:bold}
 .bordergrw table table td{border-style:none}
 /* grwElenco end */


.loading{    background-image:url(/images/loader.gif);   background-position:right;  background-repeat:no-repeat;  background-size:inherit}

.completionList{ border:solid 1px Gray;  margin:0px;  padding:3px;  height:120px;  overflow:auto;  background:#fff;  z-index:11000 !important}

 .listItem{ color:#191919}

 .itemHighlighted{ background-color:rgba(255,255,0,0.3)}

/*  Modifiche Dorinel            */
 
 .alt{ height:auto}



.well{ padding:20px 0;  margin-top:20px}


.err{ border-radius:10px;  margin:20px;  border:1px;  background:#eee}

.err1{ margin:20px;  background:#fff}

.err1 >#MainContent_MainContent_lbValidazione{ color:#d9534f;  font-size:16px;  font-weight:bold;  width:100%;  display:block;  text-align:left;  padding-bottom:10px;  border-radius:0;  border-bottom:2px solid #fff}


#MainContent_MainContent_ricercaServizi_PnlDettaglio{ width:300px;  background-color:rgb(255,255,255);  position:absolute;  z-index:10002;  left:240px!important;  top:290px;  border:1px solid #4FA2E1;  border-radius:10px;  box-shadow:rgb(204,204,204) 1px 1px 5px 2px}

#MainContent_MainContent_ricercaServizi_PnlDettaglio p{ margin:10px;  padding:5px}

#MainContent_MainContent_ricercaServizi_PnlDettaglio p a{ font-size:16px;   color:#555; }

#MainContent_MainContent_ricercaServizi_PnlDettaglio p a:hover{ text-decoration:underline;  color:var(--col-link)}

.ModalPopupBG{ background:#333;  opacity:0.7;   background-color:#000;  opacity:0.7;  position:fixed;  left:0px;  top:0px;  z-index:10000}

#MainContent_MainContent_ricercaServizi_PnlDettaglio .tariffe{ margin:10px;  width:270px}

#MainContent_MainContent_WizServizio_moduloServizio1_pnldettagli{ background:white;  box-shadow:1px 1px 1px 1px #81bee0;  padding:15px;  border:1px solid #81bee0;  border-radius:6px}

/* esperimento 1 */
.navbar{ border:0}


.ind{ border:1px solid;  border-radius:4px;  border-color:#4fa2e1;  margin-top:10px;  width:36px;  padding:7px 6px 6px 7px}

.ind:hover{ background:#ebebeb}

.pag{ font-family :Verdana;   font-size:22px;  margin-left:15px;  margin-right:15px;  /*width:100px; */  border:1px solid var(--col-in-evidenza);  padding:5px;  border-radius:3px;  color:var(--col-in-evidenza)}

.popup{ border:3px solid #4fa2e1;  border-bottom-left-radius:8px;  border-bottom-right-radius:8px;  border-top-left-radius:8px;  border-top-right-radius:8px;  background-color:#fff;  padding:5px;  box-shadow:2px 2px 2px 2px #ccc}

.sfondopopup{ position:fixed;  left:0px;  top:0px;  z-index:10002;  width:1349px;  height:1215px;  background:#eee;  opacity:0.7}

.center{ text-align:center}

 
.content{ height:150px;   padding-top:75px;  text-align:center;  background-color:#F9F9F9;  font-size:48px}

.puls{ float:right;  margin-left:-50px}

.destra{ float:right}

.margine-alto{ margin-top:170px}


.oriz tr{ float:left;  margin-right:20px}

.pad{ padding:0}

#MainContent_MainContent_WizAcquisto_tabAcquisto_formViewACQ td{ padding:0}

#MainContent_MainContent_WizAcquisto_tabAcquisto_formViewACQ td div{ padding:0}

/*#MainContent_MainContent_WizAcquisto_tabAcquisto_formViewACQ_rbPagamento tr:first-child{ float:left}

#MainContent_MainContent_WizAcquisto_tabAcquisto_formViewACQ_rbPagamento tr:last-child{ float:right} 

 #MainContent_MainContent_WizAcquisto_tabAcquisto_formViewACQ_rbPagamento tr td{ padding:0}
*/
#MainContent_MainContent_WizAcquisto_tabAcquisto_formViewACQ_rbresidente label{ margin-left:2px}

#MainContent_MainContent_WizAcquisto_tabAcquisto_formViewACQ_rbresidente tr:first-child label{ margin-right:10px}

#MainContent_MainContent_WizAcquisto_tabAcquisto_formViewACQ_rbPagamento tr:first-child label {     margin-right: 10px}


/*#MainContent_MainContent_WizAcquisto_tabAcquisto_lbAl{ background:#ccc;  color:#000}*/

#MainContent_MainContent_schedaFamiglia_fwFami_txFamiglia{ background:#ccc;  color:#000}

#MainContent_MainContent_WizPaga_tabPagamento_chiudi1{ color:black;  margin-top:10px;  float:right}

#MainContent_MainContent_WizPaga_tabPagamento_pnlInfo{ position:absolute;  top:170px;  left:250px;  border:1px solid #ccc;  padding:20px;  background:#4fa2e1;  color:#fff;  border-radius:5px;  text-align:center;  box-shadow:1px 1px 1px 1px #ccc}

.pagamentoOK {    background-color: #ccc !important;    color: #000;}
.pagamentoNO {  background-color:khaki  !important ; color: #000;}
.pagamentoAlert {    background-color: red !important;    color: #fff;}

#MainContent_MainContent_sottos{ width:150px;  margin-bottom:5px}

#MainContent_MainContent_tornacq1{ width:150px}

#MainContent_MainContent_WizAcquisto_tabAcquisto_CalPeriodi1_Calendar1{ margin-top:15px}
#MainContent_MainContent_pnlFamiglia a{ margin:10px 0;  width:80%; /*450px; */}

.center>table>tbody>tr>th{ text-align:center}


#MainContent_MainContent_pnlcord{ border:1px solid var(--col-link);  padding:15px;  border-radius:5px;  margin-bottom:20px}

.nondisp{ margin-bottom:10px;  border:1px solid;  display:inline-block;  padding:5px;  line-height:1.5em ;color: #9F2723 ;}

.aspNetDisabled {
    display: inline-block;
    padding: 8px 8px;
    font-size: 1rem;
    padding-bottom: 8px;
    border-radius: 0px;
    border: 1px solid var(--col-link);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    background-color: #ecf1f7;
    border: 0;
}
.headerRow{ background:#ff8533;  color:white;  text-align:center}

.rec{ border:1px solid #ddd;  padding:10px}

.pnl-row{ padding:30px}

.pnl-config{ border:1px solid var(--col-principale);  padding:10px;  border-radius:10px;  width:100%}

 
 .inactive{background-color:#FDFFAA}
 
.pnl-sconti{background-color:rgb(255,255,255);  z-index:10002;  border:1px solid rgb(79,162,225);  border-radius:10px;  box-shadow:rgb(204,204,204) 1px 1px 5px 2px;  padding:20px}

.autocom{ background:rgba(255,255,0,0.3)!important}
 
.pnliframe{ margin-top:20px;  padding:5px;  text-align:center}

.pnliframe a{ margin:10px}

.pnliframe a:hover{ margin-top:10px}

.iframe-menu{max-width:200px; max-height:150px; height:150px}

.iframe-menu span{font-size:20px; padding-bottom:5px; border-bottom:1px dashed; color:red}

.iframe-menu-img{ margin-top:10px}



.grw_riserva{ width:100%;  border-collapse:initial!important;  border:2px double #fed803;  margin:10px 0px}

.ck >input[type="checkbox"]{ width:30px;  height:30px}



/*          ====================================================================
            === vecchio CSS specializzato per Organizzazione
            ====================================================================
*/
/*
            ====================================================================
            === OTTIMIZZAZIONI RESPONSIVE - usiamo le dimensioni standard di BOOTSTRAP 
            === https://getbootstrap.com/docs/5.2/layout/breakpoints/ 
            ====================================================================
                    Extra small 	None 	<576px
                    Small 	sm 	≥576px
                    Medium 	md 	≥768px
                    Large 	lg 	≥992px
                    Extra large 	xl 	≥1200px
                    Extra extra large 	xxl 	≥1400px
*/

@media (max-width:768px)
{ 

     .body-content{ padding:0}
     .col-md-11{ width:100%;  padding:0}
     .input-group{ width:100%}
     .input-group >span:last-child, select{ width:100% }
     #MainContent_MainContent_WizAcquisto_tabAcquisto_grDettaglio{ display:none}
     #MainContent_MainContent_WizAcquisto_tabAcquisto_chBoxServizi >tbody >tr{ float:left}
     #MainContent_MainContent_WizAcquisto_tabAcquisto_chBoxServizi >tbody >tr >td{ width:100%;  float:left;  text-align:left}
     #MainContent_MainContent_WizAcquisto_tabAcquisto_CalPeriodi1_Calendar1{ width:100%!important;  height:300px}
     #MainContent_MainContent_WizAcquisto_tabAcquisto_CalMesi1_CheckBoxListMesi >tbody >tr{ width:100%;  float:left}
     #MainContent_MainContent_WizAcquisto_tabAcquisto_CalMesi1_CheckBoxListMesi >tbody >tr >td{ width:100%;  float:left;  padding:0;  text-align:left}
     .nondisp{ font-size:12px}

     #MainContent_MainContent_WizAcquisto_tabAcquisto_formViewACQ_rbresidente{ width:100% !important;  float:left;  margin-top:unset}
     #MainContent_MainContent_WizAcquisto_tabAcquisto_formViewACQ_rbresidente >tbody >tr >td{ padding:0;  width:100%;  float:left}
        #MainContent_MainContent_WizAcquisto_tabAcquisto_formViewACQ_rbresidente label {font-size: 15px        }
    /*  #MainContent_MainContent_WizAcquisto_tabAcquisto_formViewACQ_rbPagamento >tbody >tr{ float:left;  width:100%}*/
    #MainContent_MainContent_WizAcquisto_tabAcquisto_formViewACQ_rbPagamento { width: 100% !important;float: left;  margin-top: unset}
        #MainContent_MainContent_WizAcquisto_tabAcquisto_formViewACQ_rbPagamento > tbody > tr > td {  padding: 0;  width: 100%; float: left;      }
        #MainContent_MainContent_WizAcquisto_tabAcquisto_formViewACQ_rbPagamento label { font-size: 15px  }
  

     #MainContent_MainContent_WizAcquisto_tabAcquisto_ckBoxList >tbody >tr{ width:100%;  float:left}
     #MainContent_MainContent_WizAcquisto_tabAcquisto_ckBoxList >tbody >tr >td{ width:100%;  float:left;  padding:0;  text-align:left}

    .navbar-header {  width: 90vw; }
    .input-group .input-group-addon {  min-width: 100px;  }
    .viewSmart { display: unset;  } /* per visualizzare  */     
    .head-index-font {        font-size: 14px;    }
    .cssDisplayNone {         display: none;    }
    .pnlPopUp {        width: 300px;    }

    /* (max-width:600px)  ---- */
    .lar2{width:170px!important}
    input[type="text"] {width: 100% !important}
    input[type="password"]  { width: 100% !important    }
    input[type="Email"] {  width: 100% !important    }
     
    .viewSmart {        display: unset;    } 
    .head-index-font {        font-size: 14px;    }
    
    .content-wrapper {   margin-left: 10%;   margin-right: 10%; margin-top : 110px;   }
}
 
@media (max-width:992px){ 

        #MainMenu               { width: 95vw; }
        .menu-hamb              { display:block; }
        .menu                   { display:none; }
        .menu-toggle            { display:block;  cursor:pointer; }
        .menu-toggle span       { display:block;  height:2px;  width:25px;  background-color:#333;  margin-bottom:5px; }
        .menu-toggle-left       { display:block;  cursor:pointer; }

        .panel{height:auto}
        .puls{margin:0}

}

/*
@media (max-width:600px){ 


}
@media (min-width:768px){ 

    .col-sm-5{ width:70.666667%}
    .col-sm-1{ width:23.333333%}

}
@media (min-width:992px){ 
    .col-md-11{width:80%}
    .col-md-1{width:18%}
}

@media (max-width:992px){ 
    .col-md-11{width:60%}

}

@media (max-width:1400px){ 
    .margine-alto{margin:0}
}

@media (max-width:640px){ 
    .puls{float:initial}
    .destra{float:initial}
}



@media (min-width:1380px){ .container{ width:1366px}

}
*/

    /* ====================== Luca 2025 =======================*/
    /* Vetrina */

    .table-responsive { /* come Bootstrap 4 */
      display: block;
      width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      -ms-overflow-style: -ms-autohiding-scrollbar;
    }

    .logo_vetrina { max-width:300px; width:100%; }

@media (max-width:768px)
{ 

    .body-content {  margin-top: 105px; }

    .input-group .form-control ,.input-group .input-group-addon {  clear:both; display:block; width: 100% !important; }
    .input-group .input-group-addon {  border: 0; margin: 10px 0 5px 0;  }

    .btn-aurora { width: 100%; text-wrap: auto; margin-bottom:5px; } 


    #MainMenu {    margin-top: 0; min-height:auto; }
    .navbar-toggle { margin-right: -20px; background-color: #fff; }
    .navbar-toggle .icon-bar {   background-color: cornflowerblue!important; }
    .nav > li { text-align:right; }
    .nav a { font-size: 1.2rem; }

    /* Vetrina */
    .vetrina .rowHeader      { margin-left: 0!important; text-align:center;  }
    .logo_vetrina { max-height:80px; width:auto; padding:10px 0;  }


    


    .lista_categorie,.lista_servizi
                        { justify-content: center;  }

    .lista_categorie .box_categoria  ,.lista_servizi .box_servizio      
                        { margin-left:5px; padding:5px;   }

    .card-body { padding:0;}
}


/*
            ====================================================================
            === ANIMAZIONI 
            ====================================================================

*/

 @-webkit-keyframes color-change            { 0%{ color:red} 50%{ color:yellow} 100%{ color:red} }
 @-moz-keyframes color-change               { 0%{ color:red} 50%{ color:yellow} 100%{ color:red} }
 @-ms-keyframes color-change                { 0%{ color:red} 50%{ color:yellow} 100%{ color:red} }
 @-o-keyframes color-change                 { 0%{ color:red} 50%{ color:yellow} 100%{ color:red} }
 @keyframes color-change                    { 0%{ color:red} 50%{ color:yellow} 100%{ color:red} }

 @-moz-keyframes color-change2              { 0%{ color:green} 50%{ color:greenyellow} 100%{ color:green} }
 @-ms-keyframes color-change2               { 0%{ color:green} 50%{ color:greenyellow} 100%{ color:green} }
 @-o-keyframes color-change2                { 0%{ color:green} 50%{ color:greenyellow} 100%{ color:green} }
 @keyframes color-change2                   { 0%{ color:green} 50%{ color:greenyellow} 100%{ color:green} }
 
 .safe{ -webkit-animation:color-change2 2s infinite; -moz-animation:color-change2 2s infinite; -o-animation:color-change2 2s infinite; -ms-animation:color-change2 2s infinite; animation:color-change2 2s infinite; font-size:20px} @-webkit-keyframes color-change2{ 0%{ color:green} 50%{ color:black} 100%{ color:green} }

.wrong{ -webkit-animation:color-change 2s infinite;  -moz-animation:color-change 2s infinite;  -o-animation:color-change 2s infinite;  -ms-animation:color-change 2s infinite;  animation:color-change 2s infinite;  font-size:20px}


/*da mirto*/

.btn-log {
    display: inline-block;
    border: 1px solid #f4f7fa;
    color: #381567;
    border-radius: 4px;
    /* margin-top: 4px;
    margin-bottom: 4px;*/
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    padding: 3px 12px;
    background: #f8fafc;
    position: fixed;
    top: 5px;
    right: 15px;
}

    .btn-log:hover, .btn-log:focus {
        color: var(--col-testo);
        background: var(--col-principale-2);
        border: 1px solid var(--col-principale);
        text-decoration: none;
        outline: 0;
        border-radius: 4px;
    }

    .btn-log:active {
       /* background: #f8fafc;*/
        border: 1px solid #381567;
        text-decoration: none;
        -webkit-box-shadow: inset 0px 1px 2px 1px rgba(0, 0, 0, 0.3), 0 1px 10px 2px rgba(56, 21, 103, 0.3);
        box-shadow: inset 0px 1px 2px 1px rgba(0, 0, 0, 0.3), 0 1px 10px 2px rgba(56, 21, 103, 0.3);
    }

    .btn-log > .icon {
        font-size: 26px;
    }