:root {

        --color-scrollbar: #D3D3D4;
        --color-back-scroll: #EEE;
        --color-principal: #FFFFFF;
        --color-secundario: #73c473; 
    
}

/* SCROLL CHROME */

.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-secundario);
}

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


/* SCROLL CHROME ASIDE */

.layout .layout__aside::-webkit-scrollbar {
    width: 25px;
    background: var(--color-secundario);
}

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

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

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

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