:root {
  /*--cassiopeia-color-primary: #00BB00;
  --cassiopeia-color-hover: #994C00;
  --cassiopeia-color-link: blue;*/
  --cassiopeia-color-primary: white;
  --cassiopeia-color-hover: white;
  --cassiopeia-color-link: #006633;

   
  /*F2F2F2*/
}
/*sfonfo del sito*/



/*classe del menù laterale*/
.M_classe a{
  color: #006633;
  font-weight: bold;
}

/*descrizine del sito*/
.container-header .site-description {
    /*color: #fff;*/
    color: #006633;
  
    white-space: normal;
    font-size: 2.8rem;
}
/*hamburger menù*/
.container-header .navbar-toggler {
    color: #006633; 
    cursor: pointer;
    border: 1px solid #006633; 
}
/*barra dei menu superiore*/
/*.navbar:focus { 
    outline: 4px solid #004CA3;
    outline-offset: 2px;
}*/
/*menu normale*/
.metismenu.mod-menu .metismenu-item {
    flex-wrap: wrap;
    align-items: center;
    padding: .5em 1em;
    font-size: 1.2rem;
    line-height: 1.5;
    display: flex;
    border-color: #595959;
    border-style: solid; 
    text-decoration: none;
    color: white;
   /* background-color: #00AA00;*/
    background-color: #303030;
    padding: 5px 5px;
    border-radius: 5px;
    transition: background-color 0.3s, transform 0.2s;
    margin-right: 5px;
    margin-top: 5px;
}

.metismenu-item,
.mod-menu__heading,
.nav-header,
.mm-toggler {
    background-color: #303030;
    color: white;
}
/*stile del separatore*/
.mio-separator {
  	font-size: 0;
    content: "";
    display: block;
    width: 100%;
    border-bottom: 1px solid #ccc;   /* colore della linea */
    margin: 8px 0;  
}
/* Effetto hover (al passaggio del mouse) */
.metismenu.mod-menu .metismenu-item:hover {
    /*background-color: #45a049; /* Colore più scuro al passaggio del mouse */
    background-color:#303030;
    /*background-color: #0090FF;  */
    transform: scale(1.0); /* Aumenta leggermente la dimensione */
    border-radius: 5px;
  	border-color: white;
    text-decoration: underline;
    text-decoration-color: #FFFFFF;
}
/*:focus { /*lo imposta per tutto il sito*/
  /*outline: 4px solid #004CA3 ; /* Bordo blu visibile */
  /*outline-offset: 2px ; /* Distanza dal bordo */
/*}*/

:focus{
  outline: 4px solid #FF00FF !important; /* Bordo blu visibile */
  outline-offset: 3px !important; /* Distanza dal bordo */
}


/*li:focus {
  outline: 20px solid #004CA3;
  outline-offset: 2px; 
}*/
.current.active {/*becca il pulsante attivo*/
  /*border-bottom: 20px solid red;*/
  font-weight: bold;
  text-decoration: underline;
  text-decoration-color: #FFFFFF;
}
.metismenu.mod-menu .metismenu-item.current.active{
     text-decoration: underline;
    text-decoration-color: #FFFFFF; 
  
}
.container-header .metismenu>li>a:hover:after, 
.container-header .metismenu>li>button:hover:before,
.container-header .metismenu>li.active>a:after, 
.container-header .metismenu>li.active>button:before {
    background: transparent;
    left: 0;
    right: 0;
}

/* Effetto attivazione (pressione) */
.metismenu.mod-menu .metismenu-item:active {
    transform: scale(0.98); /* Effetto di compressione quando cliccato */
    border-radius: 5px;
    text-decoration: underline;
    text-decoration-color: #FFFFFF;
}
/*personalizza i menù con sfondo trasparente*/
.metismenu.mod-menu .mm-collapse {
    background-color: transparent;
    position: absolute;
    box-shadow: 1px 1px 4px #0000001a;
    
  --link-color: white;
  --link-hover-color: white;
}
.metismenu.mod-menu .mm-toggler {
    /* color: currentColor; */
    /* user-select: none; */
    /* box-shadow: none; */
    /* background: 0 0; */
    /*border: #ec10b1;*/
    /* align-items: center; */
    /* height: 100%; */
    /* padding: 0; */
    /*display: flex*/
    /* position: relative; */
    background-color: transparent;
}
/*personalizza il piedi pagina*/
.footer {
    color: #004400;
    /*background-color: var(--cassiopeia-color-primary);*/
    /*background-image: linear-gradient(135deg, var(--cassiopeia-color-primary) 0%, var(--cassiopeia-color-hover) 100%);*/
    margin-top: 1em;
}
/*imposta il colore del tasto filtra nella pagina dei video*/
.com-content__filter {

  background-color: #006633;
}
/*imposta lo stile del link del crea it*/
.mod-custom.custom a:hover {
    color: #000000;
    text-decoration: underline;
    text-decoration-color: #000000;
    --gray-200:  #006633;
}
.mod-custom.custom a {
    color: #006633;
    text-decoration: underline;
    text-decoration-color: #006633;
  	font-weight: bold;
    --gray-200:  #006633;
}
/*.mod-custom.custom a:focus {
  outline: 2px solid #004CA3; Bordo blu visibile
  outline-offset: 2px; Distanza dal bordo 
}
.footer li:hover {
    color: #FFFFFF;
    text-decoration: underline;
    text-decoration-color: #FFFFFF;
    --gray-200:  #FFFFFF;
}
.footer li {
  	font-weight: none;
    color: #006633;
    text-decoration: none;
  	text-decoration-color: #006633;
  --gray-200:  #FFFFFF;
}*/

/*per il link con il contoro verde arrotondato crea*/
@media  screen and (min-width: 100px) and (max-width: 600px) {
    .linkCreaIT{
      display: block; 
      border-radius: 10px; 
      background-color: white; 
      height: 70px; 
      width: 400px; 
      /*text-align: left; */
      margin-bottom: 5px; 
      /*position: absolute; */
      left: 0px; 
      top: 0px; 
      border: 3px solid #4B9021;
      font-size: 14pt;

    }
  .LinkIT{
    position: relative;
      left: 5px; 
      top: 3px;  
  }
}

@media  screen and  (min-width: 601px) {
    .linkCreaIT{
      display: block; 
      border-radius: 10px; 
      background-color: white; 
      height: 30px; 
      width: 500px; 
      /*ext-align: left; */
      margin-bottom: 5px; 
      /*position: absolute; */
      left: 0px; 
      top: 0px; 
      border: 3px solid #4B9021;
      font-size: 10pt;

    }
    .LinkIT{
      position: relative;
      left: 5px; 
      top: 3px;  
  }
  }
/*cornice articoli*/
.site-grid {
    background-color: #f2f2f2;
}

.container-component {
    background-color: #ffffff;
    /*border: 1px solid #d5d5d5;*/
    border: 1px solid #d5dee2;
    padding: 20px;
    border-radius: 4px;
  margin-top: 16px;
}

/* Link degli articoli Joomla */
/* Solo articolo con ID 123 */
.Ariticolo_Link a {
    color: #006633;
    font-weight: bold;
    text-decoration: none;
}

.Ariticolo_Link a:hover {
    color: #006633;
    font-weight: bold;
    text-decoration: underline;
}