.body-fondo { 
    /* The image used */

  background: -webkit-linear-gradient(-135deg, #0D47A1, #E3F2FD);
  background: -o-linear-gradient(-135deg, #0D47A1, #E3F2FD);
  background: -moz-linear-gradient(-135deg, #0D47A1, #E3F2FD);
  background: linear-gradient(-135deg, #0D47A1, #E3F2FD);

}
::-webkit-scrollbar {
    display: none;
}
#maincontent
{
      
      background-color: #E5E5E5;


}
#divisor
{     margin-top: 10px;
      margin-bottom: 10px;
      height: 2px;
      background-color: lightgray;
}
#menuItemDashboard
{
  font-size: 15px;
  color:black;
  padding-left: 5px;
}
#menuItemDashboard:hover
{
  /*background-color: rgb(122, 122, 122,0.3);*/
  background: linear-gradient(to right, rgba(45,133,192, 0.3) 2%,rgba(0,65,122, 1) 100%);
  color:white;
}
#menuItem
{

  font-size: 15px;
  padding-left: 5px;
  background: transparent;
  color: #444444;
}
#submenuItem
{

  font-size: 13px;
  color:white;
  padding-left: 20px;
}
#submenuItem:hover
{
  font-size: 13px;
 background: linear-gradient(to right, rgba(45,133,192, 0.3) 2%,rgba(0,65,122, 1) 100%);
color:white;
}

#submenuItemResponsive
{

  font-size: 13px;
  color:black;
  padding-left: 20px;
}
#submenuItemResponsive:hover
{
  font-size: 13px;
  text-decoration: none;
 /*background: linear-gradient(to right, rgba(45,133,192, 0.3) 2%,rgba(0,65,122, 1) 100%);*/
color:black;
}

.container-login {
  width: 100%;  


  min-height: 100vh;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  /*background: -webkit-linear-gradient(-135deg, #0D47A1, #E3F2FD);
  background: -o-linear-gradient(-135deg, #0D47A1, #E3F2FD);
  background: -moz-linear-gradient(-135deg, #0D47A1, #E3F2FD);
  background: linear-gradient(-135deg, #0D47A1, #E3F2FD);*/
  
 
}

.wrap-login {
  background: transparent;
  height: auto;
}
.login-bienvenida {
  font-size: 30px;
  background: #2196F3;
  border-radius: 3px 3px 0px 0px;
  overflow: hidden;
  justify-content: space-between;
}

.input {
   background-color: transparent;
  border-radius: 3px;
}
.wrap-login .input-user {
  margin: 5px;
  font-family: Poppins-Medium;
  font-size: 15px;
  color: #666666;
  width: 90%;
  background: transparent;
  height: 50px;
  float: none;
    margin: 5px auto;
  border-radius: 2px;
  padding: 0 30px 0 30px;
}
.wrap-login .col-centered{
    float: none;
    margin: 0 auto;
}
.dashboard {
  width: 100%;
  margin: 0 auto;

}
.headerbackground{
    width: 100%;
    background: #2196F3;
    height: 300px;
}
.headerbackground .buscador{
    float: none;
    margin: 5px auto;
}
.menubackground{
   background: #E0E0E0;
  height: 500px;
  position: relative;
  width: 100%;
}

.contentbackground {
    background: gold;
  left: 500px;
  top: 0;
  right: 5px;
  bottom: 0;
  margin: auto;
  position: absolute;
  height: 700px;
  width: 1000px;
}

.contentbackground {
    background: gold;
  left: 100px;
  top: 0;
  right: 5px;
  bottom: 0;
  margin: auto;
  position: absolute;
  height: 700px;
  width: 200px;
}
.usuarioconectado {
  height: 80px;
  background-color: #00B0FF;
}
.barra-superior-menu {
  height: 80px;
  color:white;
}
.contenedor {
  
  background-color: lightgray;
}
.ejemplo2 {
  
  background-color: gray;
}
.menulateral {
  height: auto;
  background-color: #40C4FF;
}
/* dashboard 2 */
.dashboard2 {
  height: 200px;
}

.content-dashboard3 {
  padding-top: 15px;
}
.input-busqueda
{
  background-color: transparent;
  border-radius: 3px;
}
.iconos{
  
  background-color: lightgray;
}
.menulateraldashboard2{
  background-color: lightgray;

}
.campo1 {
    position: absolute;
    left: 15px;
    top: -100px;
    background-color: lightblue;
    z-index: 0;
}
.campo2 {
    position: absolute;
    left: 15px;
    top: 250px;
    margin-left:10px;
    z-index: 0;
}
.contentcampo2 {
        background-color: lightblue;

}
.campo3 {
    position: absolute;
    left: 15px;
    top: 350px;
    background-color: lightblue;
    z-index: 0;
}
.grafica1_dashboard_3 {
   background: #FFFFFF;
   height: auto;
   margin-bottom: 10px;
   border-radius: 20px;
  box-shadow: 1px 5px 10px gray;

}
.grafica2_dashboard_3 {
  height: auto;
   background: #FFFFFF;
   border-radius: 20px;
  box-shadow: 1px 5px 10px gray;
}
.grafica3_dashboard_3 {
   height: auto;
   margin:10px;
   background: #FFFFFF;
   border-radius: 10px;
  box-shadow: 1px 5px 10px gray;
}

.grafica3_dashboard_3 .fab_grafica3 {
   height: 50px;
   width: 50px;
   margin-top: auto;
  background: #F44336;
  position: absolute;
  top: 40px;
  right: 5px;
  border-radius: 500px 500px 500px 500px; 
}

.grafica4_dashboard_3 {
   height: 350px;
   background: rgba(255, 255, 255);
   border-radius: 20px;
  box-shadow: 1px 5px 10px gray;
}
#navResponsive {
  background-color: #F2F3F3;
  color:black;
  visibility: hidden;
}
.dashboard3 {
  margin-top: -35px;
  background-color: #F5F5F5F5;
  color:black;
  visibility: visible;
  box-shadow: 1px 2px 3px gray;
}

#mySidenav
        {
         display: none;
        }
        #mainContenedor
        {
        margin-left: 0px;
        }

      #content_open_drawer{
        display: none;
      }

#metalife_anual_font
  {
   color:white;font-size: 20px;  
   padding: 5px;
   font-weight: 500;

  }
#otros_anual_font
  {
   color:white;font-size: 20px;  
   padding: 5px;
   font-weight: 500;

  }
  #total_anual_font
  {
   color:white;font-size: 20px;  
   padding: 5px;
   font-weight: 500;

  }
  #metalife_trimestral_font
  {
   color:white;font-size: 20px;  
   padding: 5px;
   font-weight: 500;

  }
  #otros_trimestral_font
  {
   color:white;font-size: 20px;  
   padding: 5px;
   font-weight: 500;

  }
  #total_trimestral_font
  {
   color:white;font-size: 20px;  
   padding: 5px;
   font-weight: 500;

  }








/*Responsive Design*/
  /*lg-size*/
 

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {

  #metalife_anual_font
  {
    font-size: 20px;
  }
  #otros_anual_font
  {
   font-size: 20px;  
  }
  #total_anual_font
  {
   font-size: 20px;  
  }
  #metalife_trimestral_font
  {
   font-size: 20px;
  }
  #otros_trimestral_font
  {
   font-size: 20px;
  }
  #total_trimestral_font
  {
   font-size: 20px;
  }

     .dashboard3 {
  visibility: hidden;
  margin-top:50px;
    }
    
     #navResponsive {
      margin-bottom: -150px;
      margin-left: -16px;
       margin-right: -16px;
  background-color: #F2F3F3;
  color:black;
  margin-top: -20px;
  visibility: visible;
    /*width: 340px;*/

}
#mySidenav
        {
         display: none;
        }
        #mainContenedor
        {
        margin-left: 0px;
        }
         #content_open_drawer{
        display: none;
      }
#menuItem
    {

  font-size: 15px;
  color: black; 
  background-color: transparent;

}
#submenuItem
{

  font-size: 15px;
  color:black;
  background-color: transparent;
}
#submenuItem:hover
{
  font-size: 15px;
  color: black;
   background-color: transparent;

}
#grafia_principal {
 margin-top:50px;
}
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
  #metalife_anual_font
  {
    font-size: 20px;
  }
  #otros_anual_font
  {
   font-size: 20px;  
  }
  #total_anual_font
  {
   font-size: 20px;  
  }
  #metalife_trimestral_font
  {
   font-size: 20px;
  }
  #otros_trimestral_font
  {
   font-size: 20px;
  }
  #total_trimestral_font
  {
   font-size: 20px;
  }
     .dashboard3 {
  visibility: hidden;
    margin-top:30px;

    }
    
     #navResponsive {
       margin-top: -20px;
       margin-left: -16px;
       margin-right: -16px;
      margin-bottom: -130px;
  background-color: #F2F3F3;
  color:black;
  /*width: 670px;*/
  visibility: visible;
}
#mySidenav
        {
         display: none;
        }
        #mainContenedor
        {
       margin-left: 0px;
        }
         #content_open_drawer{
        display: none;
      }
#menuItem
    {

  font-size: 15px;
  color: black; 
  background-color: transparent;

}
#submenuItem
{

  font-size: 15px;
  color:black;
  background-color: transparent;
}
#submenuItem:hover
{
  font-size: 15px;
  color: black;
   background-color: transparent;

}
#grafia_principal {
 margin-top:50px;
}
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  #metalife_anual_font
  {
    font-size: 15px;
  }
  #otros_anual_font
  {
   font-size: 15px;  
  }
  #total_anual_font
  {
   font-size: 15px;  
  }
  #metalife_trimestral_font
  {
   font-size: 15px;
  }
  #otros_trimestral_font
  {
   font-size: 15px;
  }
  #total_trimestral_font
  {
   font-size: 15px;
  }
     .dashboard3 {
  visibility: hidden;
  margin-top:-30px;
    }
    
     #navResponsive {
       margin-top: -20px;
       margin-left: -16px;
       margin-right: -16px;
      margin-bottom: -80px;
  background-color: gray;
  color:black;
  /*width: 780px;*/
  visibility: visible;
}
#mySidenav
        {
        display: none;
        }
        #mainContenedor
        {
        margin-left: 0px;
        }
         #content_open_drawer{
        display: none;
      }
#menuItem
    {

  font-size: 15px;
  color: black; 
  background-color: transparent;

}
#submenuItem
{

  font-size: 15px;
  color:black;
  background-color: transparent;
}
#submenuItem:hover
{
  font-size: 15px;
  color: black;
   background-color: transparent;

}
#grafia_principal {
 margin-top:5px;
}

} 

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
     #metalife_anual_font
  {
    font-size: 15px;
  }
  #otros_anual_font
  {
   font-size: 15px;  
  }
  #total_anual_font
  {
   font-size: 15px;  
  }
  #metalife_trimestral_font
  {
   font-size: 15px;
  }
  #otros_trimestral_font
  {
   font-size: 15px;
  }
  #total_trimestral_font
  {
   font-size: 15px;
  }
      .dashboard3 {
  background-color: #F5F5F5;
  color:black;
  margin-top: -35px;
  visibility: visible;

}

#navResponsive {
  height: 0;
    margin-bottom: 20px;
  visibility: hidden;
}
#mySidenav
{
width: 250px;
display: inline-block;
}
#mainContenedor
{
margin-left: 250px;
}

#content_open_drawer{
        display: inline-block;
      }
#menuItem
{

  font-size: 13px;
          padding-left: 5px;
          background: transparent ;
          color: black;
}
    #menuItem:hover
        {
          font-size: 13px;
          padding-left: 5px;
          background: linear-gradient(to right, rgba(45,133,192, 0.3) 2%,rgba(0,65,122, 1) 100%);
          color:white;
        }
#submenuItem
{

  font-size: 13px;
  color:#757575;
  padding-left: 20px;
}
#submenuItem:hover
{
  font-size: 13px;
  background: linear-gradient(to right, rgba(45,133,192, 0.3) 2%,rgba(0,65,122, 1) 100%);
            color:white;
}
#grafia_principal {
 margin-top:5px;
}

} 
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) 
{
   #metalife_anual_font
  {
    font-size: 20px;
  }
  #otros_anual_font
  {
   font-size: 20px;  
  }
  #total_anual_font
  {
   font-size: 20px;  
  }
  #metalife_trimestral_font
  {
   font-size: 20px;
  }
  #otros_trimestral_font
  {
   font-size: 20px;
  }
  #total_trimestral_font
  {
   font-size: 20px;
  }
        .dashboard3 
          {
          margin-top: -35px;
          background-color: #F5F5F5;
          color:black;
          visibility: visible;
          }
 
        #navResponsive 
        {
          background-color: #F2F3F3;
          color:black;
          height: 0;
          margin-bottom: 20px;
          visibility: hidden;
        }
        #mySidenav
        {
         width: 250px;
         display: inline-block;
        }
        #mainContenedor
        {
        margin-left: 250px;
        }
        #content_open_drawer{
        display: inline-block;
      }
        #menuItem
        {
          font-size: 13px;
          padding-left: 5px;
          background: transparent ;
          color: black;
        }
        #menuItem:hover
        {
          font-size: 13px;
          padding-left: 5px;
          background: linear-gradient(to right, rgba(45,133,192, 0.3) 2%,rgba(0,65,122, 1) 100%);
          color:white;
        }
        #submenuItem
        {
        
          font-size: 13px;
          color:#757575;
          padding-left: 20px;
        }
        #submenuItem:hover
        {
           font-size: 13px;
            background: linear-gradient(to right, rgba(45,133,192, 0.3) 2%,rgba(0,65,122, 1) 100%);
            color:white;
        }
        #grafia_principal {
 margin-top:5px;
}
}