:root{

--color-scrollbar: #D3D3D4;
--color-background-scrollbar: #eee;


}


/*Scroll para moz*/
/*Scroll chrome*/

.content__page::-webkit-scrollbar{

width: 25px;
background: transparent;

}

.content__page::-webkit-scrollbar-thumb{

border: 10px solid transparent;
box-shadow: none;
border-radius:  70px;

}

.content__page:hover::-webkit-scrollbar-thumb{

box-shadow: inset 0 0 0 10px var(--color-scrollbar);

}

.content__page::-webkit-scrollbar-track{


margin-top: 40px;
margin-bottom: 40px;

}

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

    /*Scroll para moz*/

    .content-page{

scrollbar-width: thin;
scrollbar-color: var(--color-scrollbar) transparent;


    }


    /*scroll chrome barra lateral*/

    .layout__aside::-webkit-scrollbar{

        width: 25px;
        background: var(--color-secondary);
        
        }
        
        .layout__aside::-webkit-scrollbar-thumb{
        
        border: 10px solid transparent;
        box-shadow: none;
        border-radius:  70px;
        
        }
        
        .layout__aside:hover::-webkit-scrollbar-thumb{
        
        box-shadow: inset 0 0 0 10px var(--color-principal);
        
        }
        
        .layout__aside::-webkit-scrollbar-track{
        
        
        margin-top: 40px;
        margin-bottom: 40px;
        
        }
        
        .layout__aside:hover::-webkit-scrollbar-thumb:hover{
        border: 8px solid transparent;
            box-shadow: inset 0 0 0 10px var(--color-principal);
           
            
            }

             /*Scroll para moz*/

    .layout__aside{

        scrollbar-width: thin;
        scrollbar-color: var(--color-scrollbar) transparent;
        
        
            }
        
            .layout__aside{

scrollbar-width: thin;
scrollbar-color: var(--color-scrollbar) var(--color-secondary)


            }