@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

:root{
    --dark-purple-color: #070724;
    --light-purple-color: #8854C0;
    --light-color: #fff;
    --dark-color: #000;
    --grey-color: #f2f2f2;
    --transition: all 300ms ease-in-out;
}

body {
    background-color: var(--dark-purple-color);
    height:100vh;
}
main{
    height:100%;
}
.h-5{
    height: 5%;
}
.h-15{
    height: 15%;
}
.h-85{
    height: 85%;
}
.h-95{
    height: 95%;
}
.h-92{
    height: 92%;
}
.w-15{
    width: 15%;
}
.w-20{
    width: 20%;
}
.w-80{
    width: 80%;
}
.w-85{
    width: 85%;
}
.bg-pendiente{
    background-color: #adb5bd ;
}
.bg-pagado{
    background-color: #99d98c;
}
.ls-10{
    font-size: 1.5rem;
}
.col-id{
    flex: 0 0 0%;
}
.col-pro{
    flex: 1 0 5%;
}
.scrollbar-morpheus-den::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-color: var(--dark-purple-color);
    border-radius: 10px;
}

.scrollbar-morpheus-den::-webkit-scrollbar {
    width: 12px;
    background-color: var(--dark-purple-color);
}

.scrollbar-morpheus-den::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-image: -webkit-linear-gradient(bottom, #30cfd0 0%, #30cfd0 100%);
}

.scrollbar-morpheus-den {
    scrollbar-color: #330867 #F5F5F5;
}
li:hover{
    background-color: #bde0fe;
}