:root {
    --picker-color: hsl(244, 100%, 50%);
    --success-color: #07aa3e;
    --danger-color: darkred;

    /* 
    make color based on primary color, just change the hue
    */
    --hue: 244;
    --primary-color: hsl(var(--hue), 100%, 25%);
    --secondary-color: hsl(var(--hue), 100%, 40%);
    --tertiary-color: hsl(var(--hue), 100%, 55%);
    
    --dc0: hsl(var(--hue), 100%, 20%);
    --dc1: hsl(var(--hue), 100%, 15%);
    --dc2: hsl(var(--hue), 100%, 7%);
    --dc3: hsl(var(--hue), 100%, 2%);

    --lc0: hsl(var(--hue), 100%, 80%);
    --lc1: hsl(var(--hue), 100%, 85%);
    --lc2: hsl(var(--hue), 100%, 90%);
    --lc3: hsl(var(--hue), 100%, 98%);

    --nc0: hsl(var(--hue), 10%, 100%);
    --nc1: hsl(var(--hue), 10%, 80%);
    --nc2: hsl(var(--hue), 10%, 60%);
    --nc3: hsl(var(--hue), 10%, 40%);

    --yellow-color: hsl(44, 84%, 35%);
    --blue-color: hsl(244, 84%, 35%);
    --green-color: hsl(144, 84%, 35%);
}

.danger {
    color: var(--danger-color);
}
.bg-danger {
    background: var(--danger-color);
}

.success {
    color: var(--success-color);
}
.bg-success {
    background: var(--success-color);
}

.default {
    color: var(--primary-color);
}
.bg-default {
    background: var(--primary-color);
}

.primary {
    color: var(--primary-color);
}
.bg-primary {
    background: var(--primary-color);
    /* color: white; */
    color: var(--nc0);
}

.secondary {
    color: var(--secondary-color);
}
.bg-secondary {
    background: var(--secondary-color);
}

.tertiary {
    color: var(--tertiary-color);
}
.bg-tertiary {
    background: var(--tertiary-color);
}



* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#app {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

#headerApp {
    background: var(--primary-color);
    background: linear-gradient(0deg, var(--primary-color), var(--dc1));
    color: white;
    font-size: 1.5rem;
    padding: .5rem;

    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    position: sticky;
    top: 0;

    height: 4rem;
}

#headerApp>div {
    display: flex;
    flex-direction: row;
    align-items: center;
}

#controlSidebar {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: 100%;
    aspect-ratio: 1;
    padding: .5rem;
    cursor: pointer;
}

#informacoesUsuario {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: 1rem;
}

#informacoesUsuario>a {
    color: white;
    background-color: var(--danger-color);
    padding: .2rem .4rem;
    border-radius: 5px;
    margin: 0 .5rem;
}


#content {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: calc(100% - 4rem);
}


nav {
    display: flex;
    flex-direction: column;
    /* width: 20%; */
    /* min-width: 150px; */

    background: var(--primary-color);
    color: white;
    min-width: 0px;
    width: 0px;
    transition: .3s ease-in-out;
    padding: 0 5px;
}

nav.active {
    width: 200px;
    min-width: 200px;
}


nav .nav-item {
    padding: 10px;
    /* border-bottom: 1px solid var(--nc1); */
    box-shadow: 0px 5px 5px -5px var(--nc1);
    margin-bottom: .6rem;
    transition: .2s;
    border-radius: .5rem;
}

nav .nav-item:last-child {
    margin-bottom: 0;
}

nav .nav-item:hover {
    background: var(--tertiary-color);
    cursor: pointer;
}

nav .divisor {
    text-align: center;
    margin-top: 1rem;
    font-size: .8rem;
    border-bottom: 1px solid var(--nc3);
}

.caixa_itens {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: .5rem 0;
    padding: 10px;
    border-radius: 1rem;
    background-color: var(--secondary-color);
}


main {
    background: var(--lc3);
    width: 100%;
    margin: 0 5px;

    /* height: calc(100vh - 60px); */
    overflow-y: auto;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* 
set scroll bar style
*/
main::-webkit-scrollbar {
    width: 10px;
}

main::-webkit-scrollbar-track {
    background: var(--lc2);
    border-radius: 5px;
}

main::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 5px;
}

main section {
    width: 100%;
    /* height: 100%; */
}

/* 
Set all scroll bar
*/
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--lc2);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 5px;
}