.scroll-container {
    color: white;       /* Color del texto */
}

/* Personalizar el scroll en navegadores WebKit */
.scroll-container::-webkit-scrollbar {
    width: 6px; /* Ancho del scroll vertical */
}

.scroll-container::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.075); /* Fondo del track del scroll */
}

.scroll-container::-webkit-scrollbar-thumb {
    background: white; /* Color del círculo */
    border-radius: 50%; /* Hacer el "thumb" circular */
    border: 2px solid transparent; /* Espaciado alrededor del círculo */
    background-clip: padding-box; /* Evita que el borde tape el color */
}

.scroll-container::-webkit-scrollbar-thumb:hover {
    background: #f0f0f0; /* Cambiar el color al pasar el mouse */
}

/* Quitar botones inicial y final del scroll */
.scroll-container::-webkit-scrollbar-button {
    display: none; /* Oculta los botones del scroll */
}

/* Controlar la distancia entre el "thumb" y los extremos */
.scroll-container::-webkit-scrollbar-track-piece {
    margin-top: 10px;  /* Distancia desde la parte superior */
    margin-bottom: 10px; /* Distancia desde la parte inferior */
}
@media (orientation: portrait) {

    .scroll-container {
        color: white;       /* Color del texto */
    }
    
    /* Personalizar el scroll en navegadores WebKit */
    .scroll-container::-webkit-scrollbar {
        height: 6px; /* Ancho del scroll vertical */
    }
    
    .scroll-container::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.075); /* Fondo del track del scroll */
    }
    
    .scroll-container::-webkit-scrollbar-thumb {
        background: white; /* Color del círculo */
        border-radius: 50%; /* Hacer el "thumb" circular */
        border: 2px solid transparent; /* Espaciado alrededor del círculo */
        background-clip: padding-box; /* Evita que el borde tape el color */
    }
    
    .scroll-container::-webkit-scrollbar-thumb:hover {
        background: #f0f0f0; /* Cambiar el color al pasar el mouse */
    }
    
    /* Quitar botones inicial y final del scroll */
    .scroll-container::-webkit-scrollbar-button {
        display: none; /* Oculta los botones del scroll */
    }
    
    /* Controlar la distancia entre el "thumb" y los extremos */
    .scroll-container::-webkit-scrollbar-track-piece {
        margin-left: 10px;  /* Distancia desde la parte superior */
        margin-right: 10px; /* Distancia desde la parte inferior */
    }
}