:root {
  --productmenu-width: 20%;
}

#menuPrincipal {
  width: 20%;
  min-width: 300px;
  position: absolute;
  background-color: rgb(30,30,30);
  left: 0px;
  z-index: 12;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 20px 0px 20px 0px;
  border:solid;
  border-width: 0px 0px 0px 0px;
  /*min-height:50vh;*/
  font-size:14px;
}

#menu-principal-container{
  //width: 100%;
  min-width:70%;
  min-height: 100%;
  background-color: rgb(30,30,30);
  z-index: 12;
  //column-count: 5;
  //column-rule-style: solid;
  //column-rule: 4px inset;
  overflow-x: hidden;
  overflow-y: hidden ;
  padding: 0px 0px 0px 0px;
}


#menu-principal-container li{
  //display: inline-block;
  page-break-inside: avoid;
}

#menuPrincipal li{
  user-select: none;
  -webkit-user-select: none; /* Chrome/Safari */        
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+ */
}

#menuPrincipal ul{
  display: block;
  /* width: 100%; */
  padding: 15px 0px 10px 0px;
  border-width: 1px 0px 0px 0px;
  border:solid;
  color:rgb(40,100,20);
}

#menuPrincipal ul li ul{
  margin: 2px 0px 0px 0px;
  border-width: 1px 0px 0px 0px;
}

#menuPrincipal .categorias{
  
}

#menuPrincipal .categorias li{
  font-weight: bold;
  list-style: none;
  display:block;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 10px;
  color:rgb(98, 175, 95);

}

#menuPrincipal .categorias:first-child{
  margin: 0px 0px 0px 0px;
  padding: -10px 0px 0px 10px;
  border-width: 0px;
}

#menuPrincipal .categorias li ul li{
  font-weight: normal;
  list-style: none; 
  /* display: inline; */
  color:rgb(213,213,213);
  /* position: relative; */
  /* left: 10px; */
  margin: 0px 0px 4px 0px;
  padding: 0px 0px 4px calc( 1 * 10px );
}

#menuPrincipal .secciones-ul {
  list-style: none;
  margin: 0px;
  height: 100%;
  display: block;
  position: relative;
  top: 0px;
  padding: 0px;
}

#menuPrincipal .secciones-ul li {
  color:rgb(213,213,213);
  font-weight:bold;
  padding: 20px;
}

#menuPrincipal .secciones-ul li:hover{
  /*background-color: rgb(21, 100, 30);*/
  box-shadow: inset 8px 0px 0px 0px rgb(40,100,20);
}


#menuPrincipal .categorias li ul li:hover{
  /*background-color: rgb(21, 100, 30);*/
  box-shadow: inset 2px 0px 0px 0px rgb(65,65,65);


}

#menuPrincipal .item-clickeable:hover{
  box-shadow: inset 2px 0px 0px 0px rgb(65,65,65);
}