.navcontainer {
    margin: 1rem 0rem 0rem 0rem;
    text-align:center;
}

.dropbtn { /* Style The Dropdown Button */
    font-size: 1.2rem;
    color: #333333;
    text-decoration: none;
    padding: 0.4rem 0.4rem;
    margin: 0.4rem 0rem 0.4rem 0rem;
    border: 1px solid white;
    background-color: white;
    cursor: pointer;
    width: 100%;
    display: inline-block;
}

.dropbtn a {
    text-decoration: none;
    color: #333333;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
    margin: 0rem 0rem 0rem 0rem;
    width: 100%;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f0f8ff;
    border: 1px solid #ebebeb;
    border-radius: 0px;
    opacity: 0.96;
    width: 100%;
    z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
    display: block;
    color: black;
    padding: 0.4rem 2rem;
    text-decoration: none;
    text-align: left;
    font-size: 0.95rem;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
    background-color: #00ccff;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
    background-color: white;
    border: 1px solid white;
}

.acceso {
  border: 1px solid white;
}

.testosm {
  font-size: 1.05rem;
  color: #333333;
}

.hamburger {
  display: inline-block;
  font-size: 3rem;
  color: #00ccff;
  margin: 0rem 3rem 0rem 0.8rem;
}




@media (max-width: 767px) {
  .nasconde-mobile {display: none;}
}

@media (min-width: 768px) {
  .dropdown:hover .dropbtn {background-color: #00ccff;}
  .nasconde-big {display:none;}
  .navcontainer {margin: 3rem 0rem 0rem 0rem; border: 1px solid #ebebeb;}
  .dropdown {width: 19.4%; margin: 0rem 0rem 0rem 0rem;}
  .dropbtn {font-size: 1rem; text-align: center;}
  .testosm {font-size: 0.85rem;}
  .dropdown-content a {font-size: 0.78rem; padding: 0.5rem 0rem 0.5rem 1rem;}
  .acceso {background-color: #00ccff;}
  dt {font-size: 0.95rem;}
  dd {font-size: 0.9rem;}
  .freccia {display: inline-block; font-size: 0.55rem; color: #555555;}
}

@media (min-width: 992px) {
  .navcontainer {margin: 4rem 0rem 0rem 0rem;}
  .dropdown {width: 19.4%; margin: 0rem 0.02rem 0rem 0.02rem;}
  .dropbtn {font-size: 1.2rem;}
  .testosm {font-size: 1.05rem;}
  .dropdown-content a {font-size: 0.88rem;}
  dt {font-size: 1.05rem;}
  dd {font-size: 0.95rem;}
  .freccia {font-size: 0.75rem;}
}

@media (min-width: 1200px) {
  .navcontainer {margin: 4rem 0rem 0rem 0rem;}
  .dropdown {width: 19.4%; margin: 0rem 0.05rem 0rem 0.05rem;}
  .dropbtn {font-size: 1.3rem;}
  .testosm {font-size: 1.1rem;}
  .dropdown-content a {font-size: 1.05rem; 0.6rem 0rem 0.6rem 0rem;}
  dt {font-size: 1.1rem;}
  dd {font-size: 1rem;}
  .freccia {font-size: 1rem; padding-left: 0.2rem;}
}









/* ----------------------------------
   2° livello: è già gestito da
   .dropdown-content
   Non lo modifichiamo, perché funziona
   come da te impostato.
-------------------------------------*/

/* 3° livello: la parte annidata */
.dropdown-sub {
  position: relative;        /* Necessario per gestire il posizionamento del sub-menu */
  /* volendo puoi mettere display: block, se preferisci */
}

.dropdown-sub-link {
  display: inline-block;     /* O block, a seconda di come preferisci mostrarlo */
  width: 100%;               /* Se vuoi che prenda tutto lo spazio come gli altri link */
  text-decoration: none;     /* Per uniformarsi allo stile degli altri link */
  color: #333333;
  /* ... puoi aggiungere margini, hover effect ecc. */
}

/* La freccia che indica che c'è un sottomenu */
.freccia-sub {
  font-size: 0.8rem;         /* più piccola di .freccia */
  padding-left: 0.5rem;
  color: #555555;
  /* gioca con dimensioni, margini, ecc. */
}

/* Contenitore del 3° livello */
.dropdown-sub-content {
  display: none;             /* Nascosto di default */
  position: absolute;
  top: 0;
  left: 100%;                /* Per comparire sulla destra del link principale */
  background-color: #f0f8ff; /* come .dropdown-content */
  border: 1px solid #ebebeb;
  min-width: 16rem;          /* o quanto vuoi */
  z-index: 999;              /* per stare sopra a tutto */
  opacity: 0.96;             /* come da te impostato */
}

/* Link interni al 3° livello */
.dropdown-sub-content a {
  display: block;
  color: #333333; 
  padding: 0.4rem 1rem;
  text-decoration: none;
  font-size: 0.9rem;         /* regola se vuoi più grande o più piccolo */
}

.dropdown-sub-content a:hover {
  background-color: #00ccff; /* come i tuoi link al passaggio mouse */
  color: white;              /* se vuoi invertire il testo */
}

/* Mostra il 3° livello quando si passa sul link che lo contiene */
.dropdown-sub:hover .dropdown-sub-content {
  display: block;
}

/* E magari, se vuoi che il sub-submenu si chiuda quando esci, 
   puoi lasciare semplicemente l’hover come sopra. 
   Oppure puoi fare trick con :focus, ma di base l’hover va bene. */



.dropdown-sub.open-left .dropdown-sub-content {
  left: auto;
  right: 100%;
}

.dropdown-sub.open-left .dropdown-sub-link {
  width: auto; 
  /* Se serve, aggiungi text-align: left; o un padding più coerente */
}