:root{

  --primaryColor: #0f47af;
  --secundaryColor: #fed44b;
}


ul,
#myUL {
  list-style-type: none;
  list-style-type: disc;
  color: #000;
}

.liPrincipal{
  list-style: none;
}

.liPrincipal ul li {
  list-style: none;
  padding: 5px;
  margin: 0;
  position: relative;
}

.liPrincipal ul li::before {
  content: "";
  position: absolute;
  border-left: 1px solid #ddd;
  top: 2px;
  left: -32px;
  width: 35px;
  height: 100%;
}

.liPrincipal ul li a {
  display: block;
  max-width: 300px;
  padding: 5px;
  position: relative;
}

.liPrincipal a:hover{
  color: #23527c;
}

.liPrincipal ul li a::before {
  content: "";
  position: absolute;
  border-top: 1px solid #ddd;
  top: 20px;
  left: -36px;
  width: 35px;
  height: 0;
}

/* Remove margins and padding from the parent ul */
#myUL {
  margin: 0;
  padding: 0;
}

/* Style the caret/arrow */
.caret {
  cursor: pointer;
  user-select: none;
  font-size: 1.3rem;

  display: flex;
  align-items: center;
  gap: 1rem;
}

.caret .fa-caret-right {
  font-size: 2rem;
  transition: all 0.5s ease;
}

.pagesSite {
  font-size: 1.3rem;
  font-weight: normal;
}

.pagesSite i {
  font-size: 1rem;
}

/* Rotate the caret/arrow icon when clicked on (using JavaScript) */
.caret-down .fa-caret-right {
  transform: rotate(90deg);
}

.nested {
  height: 0;
  padding-left: 40px;
  overflow: hidden; /* Para ocultar contenido mientras la altura es 0 */
  transition: height 0.5s ease; /* Añadir transiciones */
}

/* Loader */

.spinner {
  width: 11.2px;
  height: 11.2px;
  border-radius: 11.2px;
  box-shadow: 28px 0px 0 0 rgba(71, 75, 255, 0.2),
    22.7px 16.5px 0 0 var(--primaryColor),
    8.68px 26.6px 0 0 var(--primaryColor),
    -8.68px 26.6px 0 0 var(--primaryColor), -22.7px 16.5px 0 0 var(--primaryColor);
  animation: spinner-b87k6z 1s infinite linear;
}

@keyframes spinner-b87k6z {
  to {
    transform: rotate(360deg);
  }
}