/* Caixa do Índice Lateral */
#caixa-indice-lateral {
  border: 2px solid var(--e-global-color-accent);
  padding: 20px;
  overflow-y: scroll;
  margin-bottom: 20px;
  padding-right: 10px; 
  position: -webkit-sticky;
  position: sticky;
  top: 12vw;
  z-index: 10;
  max-height: calc(100vh - 140px - 10vw);  
  will-change: transform;
  scrollbar-color: #111;
  scrollbar-gutter: hidden;
}

#caixa-indice-lateral h3 {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 22px;
    color: #111;
    text-align: right;
}

#lista-indice {
    list-style-type: none; 
    padding-left: 0; 
    margin-bottom: 0;
}
#lista-indice li { 
    margin-bottom: 5px;
}

#lista-indice li a{
    display: block;
    text-decoration: none;
    color: #555;
    font-size: 15px;
    padding: 5px 8px;
    transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out, color 0.3s ease-in-out, padding-left 0.3s ease-in-out;
    text-align: right;
}
#lista-indice li a:hover {
    text-decoration: none;
    color: var(--e-global-color-accent);
    background-color: #e9e9e9;
}
#lista-indice li.indice-item-ativo a {
    transform: translateX(-15px) scale(1.05);
    background-color: var(--e-global-color-accent);
    color: #fff;
    font-weight: 400;
}

@media (min-width: 767px) and (max-width: 1024px){
    #caixa-indice-lateral {
        top: 5vw;
        max-height: 70vh;
        overflow-y: scroll;
    }
    #caixa-indice-lateral h3 {
        font-size: 15px;
    }
    
    #lista-indice li a {
        font-size: 10px;
    }
}

@media (max-width: 767px){
    #caixa-indice-lateral h3 {
        text-align: left;
    }
    #lista-indice li {
        margin-bottom: 0px;
    }
    #lista-indice li a {
        text-align: left;
        font-size: 12px;
    }
}