@media (min-width: 768px) {
    .side{
      left: 0px !important;
    }
  }
  
  
  @media (max-width: 768px) {
    .side{
      left: -260px;
    }
  }
  
  #togglemenu, .side{
      transition: 0.25s all !important;
  }
  
  #togglemenu{
    position: fixed;
    left: 0px;
    z-index: 997;
    height: 60px;
    width: 60px;
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
    background-color: rgba(0,0,0,0.5);
    color: white;
    padding: 10px;
    box-shadow: 0 9px 9px -7px rgba(0,0,0,0.8);
    display: inline-block;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: -10px;
  }
  
  /*posicion y estilo general de la sidebar*/
  .side {
      -webkit-user-select: none;
      user-select: none; 
      font-family: Quicksand !important;
      z-index: 998;
      background: rgba(0,0,0,1);
      color: #cccccc;
      margin-right:0;
      border-bottom:  solid 1px #777777;
      background-image: var(--bg-sidebar);
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      box-shadow: 0 0 10px black;
      height: 101%;
      width: 260px;
      padding-left: 0;
      position: fixed;
      top: -1;
      bottom:1;
      overflow-y: scroll !important;
      
  }
  
  /* width */
  .side::-webkit-scrollbar {
      width: 5px;
      transition: 0.4s all;
  }
  
  /* Track */
  .side::-webkit-scrollbar-track {
      background: transparent;
  }
  
  /* Handle */
  .side::-webkit-scrollbar-thumb {
      background: #b1b1b16e;
      border-radius: 10px;
  }
  
  /* Handle on hover */
  .side::-webkit-scrollbar-thumb:hover {
      background: var(--translucid-color);
  }
  
  .side h1{
    color: white;
    font-size: 20px;
    text-align: center;
    padding: 20px 0px;
    background-color: rgba(255,255,255,0.05) !important;
    border-radius: 3px;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 30px;
    border: none;
    font-weight: 300;
  }
  
  .side .user{
    width: 90%;
    margin-left: 5%;
    margin-bottom: 20px;
    border-top: 1px solid rgba(255,255,255,0.2);
    border-bottom: 1px solid rgba(255,255,255,0.2);
    border-radius: 0px !important;
    font-size: 50px !important;
    font-weight: 300;
  }
  
  .anchor_user{
      padding-top: 7px;
      display: block;
      height: 60px;
  }
  
  .img_user{
    margin-left: 7px;
      margin-top: 6px;
    border-radius: 50%;
    float: left;
  }
  
  /*estilo anclas*/
  .side a {
      font-size: 14px;
      color: white;
      text-decoration: none;
      display: block;
      padding: 3px;
  }
  
  .secundario a{
    font-size: 12px;
  }

  .side a:hover{
    color: #ffffff;
    transition: 0.3s;
  }
  
  
  /*estilo lista*/
  .side ul {
      width: 100%;
      list-style: none;
      padding: 0;
      margin: 0;
  
  }
  
  /*estilo de elementos de lista principal*/
  .side li {
      margin: 3px 2px;
      padding: 3px 5px;
      color: white;
      border-radius: 0px !important;
      transition: all 0.3s;
      vertical-align: middle;
  }
  
  .side li .principal{
    border-radius: 2px !important;
  }
  
  /*Que hacer en la grilla cuando esta hover*/
  .side li div.principal:hover {
      background-color:rgba(255, 255, 255, 0.10) ;
      transition: all 0.3s;
  }
  
  .activado > .principal > a >.inline{
      text-shadow: 0 0 3px white !important;
  }
  
  /*Fija el color de icono del sidebar al activarse*/
  .activado .principal .material-icons {
      color: rgb(255,255,255);
      text-shadow: 0 0 5px #dddddd;
      transition: 0.2s all ease-in-out;
  }
  .activado .principal a{
    color: white;
  }
  
  .activado .principal .expand{
    transform: rotate(180deg);  
    -webkit-transform: rotate(180deg);
  }

  .activado .principal .user-expand{
      color: rgba(255,255,255,0.4) !important;
  }
  
  /*Fija el color de icono del sidebar al activarse*/
  .activado .principal{
      background:  var(--gradient) !important;

    }

  
  /*Estilo de icon de sublista*/
  .principal .material-icons {
      padding-left: 2px;
      vertical-align: middle;
  }
  
  
  /*Estilo icono izquierdo*/
  i.material-icons.pull-right {
      text-align: right;
      font-size: 20px;
  }
  
  /*Estilo de icon de sublista*/
  .secundario .material-icons {
    padding-left: 2px;
    vertical-align: middle;
  }
  
  
  /*estilo de cada submenu*/
  .secundario {
      border-radius: 3px !important;
      padding-left: 4px;
      transition: 0.3s all;
  }
  
  .secundario:hover {
      background-color: rgba(255, 255, 255, 0.10);
      color: white;
  }
  
  .secundario:hover .material-icons{
      color: rgb(255,255,255);
      text-shadow: 0 0 5px #dddddd;
      transition: 0.3s all;
  }
  
  /*cambiar color de material icon onHover*/
  .side li div.principal:hover .material-icons {
      color: rgb(255,255,255);
      transition: all 0.3s;
  }
  
  /*Ocultar x defecto la ul de cada li de la sidebar*/
  .side ul li ul {
      display: none;
  }
  
  #logo-systems{
      background-image: var(--logo-sidebar);
      background-position: center; 
      background-size: 80%;
      background-repeat: no-repeat;
      background-color: #ffffff !important; 
      height: 60px !important;
  }

  .cerrarSesion{
    padding-left: 12px;
    font-size: 14px;
  }

  .roleTag{
      padding-left: 15px !important;
  }

  #li-user{
      padding-left: 0;
      padding-right: 0;
      margin-right: 0;
      margin-left: 0;
  }

  .user-name{
    padding-left: 10px;
      max-width: 130px;
      overflow: hidden !important;
      padding-top: 13px;
      font-size: 18px;
      float: left;
  }

  .user-expand{
      float: right;
      padding-top: 6px;
  }

  #black-panel{
      background: #00000088;
      height: 100vh;
      width: 100vw;
      position: fixed;
      z-index: 990;
  }