:root{
    --color-scrollbar: #D3D3D4;
    --color-background-scrollbar: #eee;
    --color-principal: #FFFFFF;
    --color-secondary: #04B4E0;
}

/* WEBKIT (Chrome, Safari, Edge) */
@supports (-webkit-appearance: none) {

    /*SCROLL VERTICAL CONTENEDOR DERECHO*/
    .content__page::-webkit-scrollbar{
        width: 25px;
        background: transparent;
    }

    .content__page::-webkit-scrollbar-thumb{
        border: 10px solid transparent;
        box-shadow: none;
        border-radius: 40px;
    }

    .content__page:hover::-webkit-scrollbar-thumb{
        box-shadow: inset 0 0 0 10px var(--color-scrollbar);
    }

    .content__page:hover::-webkit-scrollbar-thumb:hover{
        border: 8px solid transparent;
        box-shadow: inset 0 0 0 10px var(--color-secondary);
    }

    .content__page::-webkit-scrollbar-track{
        background-color: transparent;
        margin: 40px 0;
    }

    /*SCROLL VERTICAL CONTENEDOR IZQUIERDO*/
    .layout__aside::-webkit-scrollbar{
        width: 25px;
        background: var(--color-secondary);
    }

    .layout__aside::-webkit-scrollbar-thumb{
        border: 10px solid transparent;
        box-shadow: none;
        border-radius: 40px;
    }

    .layout__aside:hover::-webkit-scrollbar-thumb{
        box-shadow: inset 0 0 0 10px var(--color-principal);
    }

    .layout__aside:hover::-webkit-scrollbar-thumb:hover{
        border: 8px solid transparent;
        box-shadow: inset 0 0 0 10px var(--color-principal);
    }

    .layout__aside::-webkit-scrollbar-track{
        background-color: transparent;
        margin: 40px 0;
    }
}

/*SCROLL MOZILLA*/
@-moz-document url-prefix() {

    /*SCROLL VERTICAL CONTENEDOR DERECHO*/
    .content__page{
        scrollbar-width: auto;
        scrollbar-color: var(--color-scrollbar) transparent;
    }

    /*SCROLL VERTICAL CONTENEDOR IZQUIERDO*/
    .layout__aside{
        scrollbar-width: auto;
        scrollbar-color: var(--color-scrollbar) var(--color-secondary);
    }
}