/*
 Theme Name:   Astra Child
 Theme URI:    http://snsipro.com/mysnsi_stage/astra-child/
 Description:  Astra Child Theme
 Author:       SNSI
 Author URI:   http://snsipro.com/mysnsi_stage
 Template:     astra
 Version:      1.0.0
*/



/* .form-dropdown form-control {
  
    width: 100%;
    height: 50px;
} */




/*elenco lingue sotto la lingua attuale colore bianco con margine 10px così appare sopra al banner*/

.wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
 
  color: rgb(32, 248, 255);
  margin-top: 10px;
}



/* stili sulla pagina homeprofessional */




.ban  {
        
  background-size: 100% auto;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #002538;
  height: auto;
  min-height: 188px;
  position: relative;
  color: white;
  margin-bottom: 30px;
}


.btn-text-size {
  font-size: 0.7em !important; /* Imposta la dimensione del testo desiderata */
  line-height:0.7em !important;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-right: 10px !important;
  padding-left: 10px !important;
}


.custom-rounded {
  border-radius: 10px; /* Imposta un raggio di 10px */
}




.testo-contorno {
  /* Imposta il colore del contorno */
  -webkit-text-stroke: 1px rgb(255, 255, 255); /* spessore e colore del contorno */
  /* Imposta il colore dell'interno del testo come trasparente */
  color: transparent;
  /* Esempio di font e dimensione, personalizzabile */
  font-family: 'Arial Black', Gadget, sans-serif;
  font-size: 4vh;
  font-weight: 400;
}


#imgmainbrev {
    max-width: 80%; /* o un valore specifico che preferisci */
    height: auto; /* per mantenere le proporzioni dell'immagine */
    display: block;
    margin: 0 auto; /* per centrare l'immagine se necessario */
  }

.overlay-wrapper {
    position: relative;
    max-width: 300px; /* Larghezza massima dell'overlay e dell'immagine */
    margin: 0 auto; /* Centra il wrapper (e quindi l'overlay e l'immagine) nel contenitore */
  }
  
  
   .img-responsive {
    width: 80%; /* Rende l'immagine responsive, adattandosi alla larghezza del contenitore */
    max-width: 300px; /* Sostituisci questo con la larghezza massima desiderata per le tue immagini */
    max-height:110px;
    height: auto; /* Mantiene le proporzioni dell'immagine */
    display: block; /* Rimuove spazi extra sotto l'immagine */
    margin: 0 auto; /* Centra l'immagine orizzontalmente nel contenitore */
  }
  
  
  .image-overlay {
      position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.5); /* Opacità per l'overlay */
    pointer-events: none; /* Permette interazione con l'elemento sottostante */
  
  }
  
 .levels{
    text-align: center;
    font-weight: 500;
    margin-bottom: 0.5rem;
 }

 
 
 .scadenze{
    color:#646363; 
    text-align:left;
    padding-left: 5px;
    font-size: 0.8rem; 
    

 }

 .titolo-scadenze{
  color:rgb(34, 139, 34) !important;
  text-align:left;
  font-size: 1.0rem !important;

 }

 .titolo-scadenze-proaff{
  color:rgb(34, 139, 34) !important;
  text-align:left;
  font-size: 0.8rem !important;

 }

 .data-exp{
  color:forestgreen;
  text-align: right !important;
  font-size: 1.0rem;
  
 
 }

 .data-exp-proaff{
  color:forestgreen;
  text-align: right !important;
  font-size: 1.0rem;
  
 
 }

  .triangolo-img{
    float:left; 
    width:44px; 
    height: 51px;
  }

 

  

  .paddingtop{
    padding-top:20px;
  }

   

  .dati{
    border-width: 0px !important; 
    background-color: #FFFFFF !important; 
    font-weight: bold; 
    padding-left:0px !important; 
    padding-top:0px !important;
    text-transform: uppercase;
    }
    
    .datiaff{
    border-width: 0px !important; 
    
    font-weight: bold; 
    padding-left:0px !important; 
    padding-top:0px !important;
    text-transform: uppercase;
    }      
    
    .ellisse{
      width: 80%;
  
  }


  .bg-verde-chiaro {
      background-color:rgba(0, 141, 0, 0.1); /* Questo è un esempio di verde chiaro, modifica il codice colore come preferisci */
}



  /* Stile per eliminare l'interlinea tra i paragrafi */
#divStatus p {
  margin-top: 0;
  margin-bottom: 0;
}

#imgstatus {
  margin-bottom: 0px; /* Riduce il margine inferiore a 0. Ajusta questo valore come preferisci. */
}

.anno{
  font-weight: bold;
  margin-bottom: 0;
  color: #707070;
}

.numDiver {
  box-sizing: border-box; /* Includi il padding e il bordo nel calcolo della larghezza */
  border-radius: 15px;
  font-weight: bold;
  font-size: 1.20rem;
  margin-bottom: 0;
  background: white;
  color: black;
  padding: 10px !important;
}

.numPro {
  box-sizing: border-box; /* Includi il padding e il bordo nel calcolo della larghezza */
  border-radius: 15px;
  font-weight: bold;
  font-size: 1.20rem;
  margin-bottom: 0;
  background: white;
  color: black;
  padding: 10px !important;
}


.riducimarginepar{
  
  margin-bottom: 0;
  
}

/* style per i numeri di certificazioni sull'ellisse */
.image-container {
  position: relative;
  text-align: center;
}

.centered-number {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: black; /* Cambia a seconda del colore di sfondo dell'immagine */
  font-size: 24px; /* Regola a seconda delle tue necessità */
  font-weight: bold;
}


/*definisco il div che contiene le differenze percentuali*/
.diff{
height: 70px;
}

.percento {
box-sizing: border-box; /* Includi il padding e il bordo nel calcolo della larghezza */
font-size: 2vw;
margin-bottom: 0;  
}

 /* Rimuove i bordi da tutte le parti della tabella */
 .no-border th, .no-border td {
  border: none !important;
}


/***************************************************************** Regola per dispositivi più grandi di 1250px***************************************************************************** */
    @media (min-width: 1250px) { 
  
      .numDiver {
      font-size: 20px !important;
      }
  
      .numPro {
      font-size: 20px !important;
      }
  
      .percento {
      box-sizing: border-box; /* Includi il padding e il bordo nel calcolo della larghezza */
      font-size: 20px;
     
  }

  .numDivingActive {
    font-size: 20px !important;
}

.numPROActive {

  font-size: 20px !important;
}

  
  }
 /*******************************************************fine   Regola per dispositivi più grandi di 1250px  ***************************************************************************************/








  /* **************************************************************Applica queste regole per schermi più grandi di 768px *************************************************************** */
  @media (min-width: 768px) { 
      .custom-col1 {
          flex: 0 0 23% !important;
          max-width: 23%;
          padding-right: 2%; /* Spazio tra le colonne */
          
      }
      .custom-col2 {
          flex: 0 0 75%;
          max-width: 75%;
      }
  }
 /**************************************************fine  regole per schermi più grandi di 768px    ********************************************************************************************/ 
  



/* Media query per schermi fino a 768px */
/**********************************************************************************************************************************************/
@media (max-width: 768px) {

  .ban {
    padding: 20px 15px; /* Aggiungi del padding per assicurare spazio intorno al contenuto */
    min-height: 150px; /* Opzionale: puoi ridurre la min-height per dispositivi mobili se necessario */
  }

  .testo-contorno {
    font-size: 3vh; /* Riduci la dimensione del font per schermi più piccoli */
  }

    .img-responsive {
        max-width: 80%; /* Permette all'immagine di adattarsi pienamente alla larghezza del contenitore su dispositivi più piccoli */
          max-height:100%;
          height: auto; /* Mantiene le proporzioni dell'immagine */
         
        }
   

    .overlay-wrapper {
        max-width: 100%; /* Consente al wrapper e al thumbnail di espandersi pienamente all'interno del loro contenitore su schermi più piccoli */
    }

    
/*regola la dimensione del brevetto principale*/
    #imgmainbrev {
        max-width: 80% !important; /* o un valore specifico che preferisci */
        height: auto; /* per mantenere le proporzioni dell'immagine */
        margin: auto;

    }

      /* Regola il posizionamento delle immagini "triangolo" */
      .col-md-1 img {
        width: 20%; /* Adegua la larghezza al contenitore */
        margin: 10px auto; /* Aggiunge margine sopra e sotto e centra orizzontalmente */
        display: block; /* Evita problemi di allineamento */
}

.triangolo-img{
    width:22px; 
    height: 25px;
    margin: 10px auto; /* Aggiunge margine sopra e sotto e centra orizzontalmente */
    display: block;
  }   

  .text-center-mobile {
    text-align: center;
    margin-bottom:20px;

  }

  .mobile-spacing {
    margin-bottom: 20px; /* Aggiunge spazio extra sotto l'elemento su dispositivi mobili */
}

.ellisse{
  width: 150px !important;

}

.diff{
  height: auto;
}

.numDiver {
  font-size: 20px !important;
  }

  .numPro {
  font-size: 20px !important;
  }

  .percento {
  box-sizing: border-box; /* Includi il padding e il bordo nel calcolo della larghezza */
  font-size: 20px;
 
}

.numDivingActive {
font-size: 20px !important;
}

.numPROActive {

font-size: 20px !important;
}

}/*FINE MEDIA QUERY PER MOBILE*/
/*****************************************************************************************************************************/
/*****************************************************************************************************************************/

/* Spinner per il caricamento */
.loading-spinner {
  display: none; /* Nascosto inizialmente */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%); /* Compatibilità Safari */
  z-index: 1000;
}

.spinner {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite; /* Compatibilità per Safari/Chrome */
  animation: spin 2s linear infinite; /* Animazione per tutti i browser */
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Barra di caricamento */
.loading-bar-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; /* Larghezza del campo select */
  height: 100%; /* Altezza pari al campo select */
  background-color: transparent;
  display: none; /* Nascosta inizialmente */
  z-index: 1000; /* Sovrapporsi sopra il campo */
}

.loading-bar {
  width: 0;
  height: 5px; /* Altezza della barra */
  background-color: #3498db; /* Colore della barra */
  position: absolute;
  bottom: 0; /* Allineato al fondo del campo */
}

/* Campo select disabilitato durante il caricamento */
.select-disabled {
  opacity: 0.6; /* Campo semi-trasparente durante il caricamento */
  pointer-events: none; /* Disabilita l'interazione */
}

/* Visibilità placeholder country */
.gform_wrapper .gfield_select option[disabled] {
  color: #bfef83;
}

.gform_wrapper .gfield_select option[selected] {
  font-weight: bold;
}

/*fine visibilità placeholder country*/

/* Spinner per il caricamento dei prerequisiti */
.loading-spinner-prerequisiti {
  display: none; /* Nascosto inizialmente */
  position: fixed; /* Posizionato al centro della pagina */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%); /* Compatibilità Safari/Chrome */
  z-index: 1000; /* Priorità più alta */
}

.spinner {
  border: 16px solid #f3f3f3; /* Bordo esterno */
  border-radius: 50%; /* Forma circolare */
  border-top: 16px solid #3498db; /* Bordo superiore per l'effetto di rotazione */
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite; /* Compatibilità per Safari/Chrome */
  animation: spin 2s linear infinite; /* Per tutti i browser */
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


/* Fine Spinner per il caricamento dei prerequisiti */

/* Spinner per il caricamento degli istruttori */
/* Spinner orizzontale per il campo select degli istruttori */
.loading-bar-container-instructors {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* Altezza pari al campo select */
  background-color: transparent;
  display: none; /* Nascosta inizialmente */
  z-index: 1000; /* Sovrapporsi sopra il campo */
  pointer-events: none; /* Impedisce che l'utente interagisca con lo spinner */
}

/* Barra di caricamento per gli istruttori */
.loading-bar-instructors {
  width: 0;
  height: 5px; /* Altezza della barra sottile */
  background-color: #3498db;
  position: absolute;
  bottom: 0;
  -webkit-transition: width 2s ease; /* Transizione fluida su Safari e Chrome */
  transition: width 2s ease; /* Transizione fluida su Firefox, Edge e altri */
}

/* Compatibilità per le versioni precedenti di Safari e iOS */
@-webkit-keyframes loading-animation-instructors {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}

@keyframes loading-animation-instructors {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}

/* Fallback per i browser che non supportano la transizione CSS */
.loading-bar-instructors {
  -webkit-animation: loading-animation-instructors 2s forwards;
  animation: loading-animation-instructors 2s forwards;
}




/*stile per il form pagamento */

.woocommerce-billing-fields {
  width: 600px !important;
}

.woocommerce-shipping-fields {
  width: 400px !important;
}

.woocommerce-column.woocommerce-column--1.woocommerce-column--billing-address.col-1 {
  max-width: 40% !important; /* Imposta la larghezza desiderata */
}


#customer_details .col-1
{
  max-width: 400px !important; /* Imposta la larghezza desiderata */
}

#order_comments {
  width: 500px !important;
}


/*stili elearning*/
/* Media query for devices with a minimum width of 767 pixels */
@media (min-width: 767px) {
  /* Flexbox display for blurb content */
  .pa-vertical-align-blurb .et_pb_blurb_content {
      display: flex!important;
  }
  
  /* Flexbox display for blurb container */
  .pa-vertical-align-blurb .et_pb_blurb_container {
      display: flex!important;
      justify-content: center; /* Center align blurb container horizontally */
      flex-direction: column; /* Arrange blurb container content in a column */
  }
  
  /* Flexbox display for main blurb image */
  .et-db #et-boc .et-l .pa-vertical-align-blurb .et_pb_main_blurb_image {
      display: flex;
      width: auto!important; /* Ensure blurb image width adjusts automatically */
      margin-bottom: 0px!important; /* Remove bottom margin for better alignment */
  }
}



/* Nascondi il link "Continue Shopping" sotto il carrello */
.ast-mini-cart-empty .woocommerce-mini-cart__buttons .ast-continue-shopping {
  display: none !important;
}

/*FINE nascondere il carrello se non ci sono prodotti*/

/* Nascondi il link "Return to Shop" dalla pagina del carrello */
.woocommerce-cart .return-to-shop {
  display: none !important;
}
/*FINE  Nascondi il link "Return to Shop" dalla pagina del carrello */


/* Nascondi il pulsante report dalla pagina di gestione della classe */
.uo-groups .uo-right {
  float: right;
  display: none !important;
}

/* FINE Nascondi il pulsante report dalla pagina di gestione della classe */


/* distanzia i link del report tincanny */
.tclr-admin-nav .tclr-admin-nav-items .nav-tab {
  padding-right:20px !important;
}

/* Nascondi i link per tin can report e xapi quiz report dalla pagina report con shortcode [tincanny] */
a[href="https://mysnsi.com/us/elearning-group-report?tab=tin-can"] {
  display: none !important;
}


a[href="https://mysnsi.com/us/elearning-group-report?tab=xapi-tincan"] {
  display: none !important;
}

/* Seleziona lo span con il testo "Tin Canny Reports" */
.reporting-breadcrumbs-item--guide span {
  /* Nasconde il testo reale */
  color:transparent !important; 
  position: relative;
}

/* Inserisce il nuovo testo "Report" */
.reporting-breadcrumbs-item--guide span::after {
  content: "Report";
  font-size: larger !important;
  padding-left: 20px !important;
  padding-right: 60px !important;
  margin-right: 20px;
  /* Mostra correttamente il nuovo testo */
  color: #ffffff;
  background-color: #000;
  position: absolute; 
  left: 0;
  top: 0;
}

 #menuTinCan {
  display: none !important;
}