/*=============================================

Estilos del menu lateral

=============================================*/
/* check personalizado, addons de bootstrap y label primary*/
/* background primary button */
/* border color buttons */
/* hover del secondary y titulos */
/* disabled menu */
/* roll overs radios y checks buttons */
/* roll overs sobre azul oscuro */
/* color anchors */
/*-----------------------------------------------

	Contenedor 

-----------------------------------------------*/
#lateralMenu {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/*-----------------------------------------------

	Enlaces

-----------------------------------------------*/
#lateralMenu A,
#lateralMenu A:focus {
  color: #FFF;
  display: block;
  box-sizing: border-box;
  padding: 10px 10px 10px 0px;
  opacity: 0;
}

#lateralMenu A:hover,
#lateralMenu A.active {
  color: #e59a17;
}

#lateralMenu A:before {
  font-size: 20px;
  margin: 0px 10px;
  vertical-align: middle;
}

#lateralMenu A.menu-disabled,
#lateralMenu A.menu-disabled:hover,
#lateralMenu A.menu-disabled:focus,
#lateralMenu A.menu-disabled:active {
  color: #7f8ea3;
  cursor: default;
}

/*-----------------------------------------------

	Abrir y cerrar el menu

-----------------------------------------------*/
.menu-hidden {
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-name: menuHidden;
  animation-name: menuHidden;
  -webkit-animation-duration: 300ms;
  animation-duration: 300ms;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.menu-show {
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-name: menuShow;
  animation-name: menuShow;
  -webkit-animation-duration: 300ms;
  animation-duration: 300ms;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

@-webkit-keyframes menuHidden {
  from {
    width: 200px;
  }
  to {
    width: 42px;
  }
}

@keyframes menuHidden {
  from {
    width: 200px;
  }
  to {
    width: 42px;
  }
}

@-webkit-keyframes menuShow {
  to {
    width: 200px;
  }
  from {
    width: 42px;
  }
}

@keyframes menuShow {
  to {
    width: 200px;
  }
  from {
    width: 42px;
  }
}

/*-----------------------------------------------

	Colores de background para los niveles

-----------------------------------------------*/
A[vmdd-level="0"].vmdd-open,
.vmdd-divContainerChilds-level0 {
  background-color: #294266;
}

A[vmdd-level="1"].vmdd-open,
.vmdd-divContainerChilds-level1 {
  background-color: #3d6399;
}

/*-----------------------------------------------

	Dropdown elementos

-----------------------------------------------*/
/* Cuando un elemento se despliega le cambiamos el color para que se sepa que escabecera */
.vmdd-open {
  color: #162437 !important;
  background-color: #Fff !important;
  border-radius: 10px 10px 0px 0px;
}

/* Para los contenedores */
.vmdd-divContainerChilds {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: hidden;
  height: 300px;
  /* arbitrario, pero necesario */
}

/* collapsar / expandir los contenedores */
.vmdd-closeContainer {
  flex: 0;
}

.vmdd-openContainer {
  flex: 1;
}

.vmdd-openTransition {
  transition: flex 0.3s ease-out;
  height: auto;
}