/*Para hacer scrol*/
.nav-wrapperLogo {
    display: flex;
    justify-content: space-between; /* una a la izquierda, otra a la derecha */
    align-items: center;
    padding: 10px 20px;
}

.logo-left img,
.logo-right img {
    height: 70px;
    object-fit: contain;
}

.izquierda{

  width: 300px;

}
.derecha{

  width: 100%; 
  margin-top: 400px; /*----- Seperar el menú del cardpanel ----*/

}
.nav-wrapperLogo{
     /*------ Letras del menu alinear con el icono----*/
    height: 90px !important;  
    line-height: 45px !important;      
    
    background-color: #F7F7F6 !important; /*---- Color Barra de menu principal ------*/
    padding-left:70px;
    padding-right:40px
    
}

.nav-wrapper{
    /*------ Letras del menu alinear con el icono----*/
    height: 55px !important;        
    line-height: 45px !important;      
    
    background-color: #F7F7F6 !important; /*---- Color Barra de menu principal ------*/
    padding-left:70px;
    padding-right:40px
    
}


/*----- Colores al abrir el drodown ---*/
#megamenu a, .dropbtn{
    /*background-color:ghostwhite;
    color:black !important; Add !important here */
}

/*.dropdown .dropbtn {
  display: inline-block;
  color: ghostwhite;
  text-decoration: none;
  text-align: center;
  padding: 14px 16px;
}*/




/*------ Fin cambiar colores dropdown -----*/

ul {
  margin-top: 25px;
}
a.anchor {

    display: block;
    position: relative;
    top: -60px;

}
.Letrasbarrasmenu{   
    color :#050300; /*-- Color menu horizontal princiapl ---*/
}
/* Cambia el color del texto al pasar el mouse */
.Letrasbarrasmenu:hover {
    color: #F2CB05 ; /* Cambia este color por el que desees */
    background-color: #0F2539; /* Opcional: fondo al hacer hover */
    transition: 0.3s;
    font-weight: bold;
}



/*SCROLLSPY*/

nav ul a.active {

    font-weight: 500;

    border-bottom: 2px solid black;

}

/*-------- Scoll------------------*/

.nav{

    background-color: transparent;

}


.side-nav{

    width: 250px; /* Ancho al salir menu */

}

/* label underline focus color */
   .input-field input[type=text]:focus {
     border-bottom: 1px solid #000;
     box-shadow: 0 1px 0 0 #000;
   }
   /* label color */
   .input-field label {
     color: #000;
   }




@media (min-width: 320px) and (max-width: 1023px){

    .side{
        margin-top: 120px;
    }

    .izquierda{
        display: none;
    }

    .derecha{
        width: 100%; 
        margin-top: 50px;
    }

}

@media (min-width: 1024px) and (max-width: 1359px){

    .side{
        margin-top: 64px;
    }

    .izquierda{
        width: 250px;
    }

    .derecha{
        width: 100%; margin-top: 50px;
    }

}

@media (min-width: 1360px) and (max-width: 1439px){

    .side{
        margin-top: 64px;
    }

    .izquierda{
        width: 250px;
    }

    .derecha{

        width: 100%; margin-top: 50px;

    }

}

@media (min-width: 1440px) and (max-width: 2559px){

    .side{

        margin-top: 64px;

    }

    .izquierda{

        width: 250px;

    }

    .derecha{

         width: 100%; margin-top: 20px;

    }

}

@media (min-width: 2560px){

    .side{

        margin-top: 64px;

    }

    .izquierda{

        width: 300px;

    }

    .derecha{

        width: 100%; 
        margin-top: 20px;

    }

}


.menuIcon{

    height: 1.5em; vertical-align: middle; margin-right: 10px;

}

.TitulosBarras{ /*---- Titulo de las barras ----*/
    font-weight: bold; 
    font-size: 10px; 
    background: #07073C
}

#divdonut{

    padding-top: 10px;

}

#empresa{

    font-size: .9em;

}

#usuario{

    font-size: .9em

}

#loading{

    max-height: 250px;

}