.dashboard #content {
    width: 25%;
    padding-top: 2%;
    padding-bottom: 2%;
    height: 88%;
}
.dashboard #content #content-main {
    background-color: var(--nav-sidebar-bg);
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    height: 100%;
}
.dashboard .module caption,
nav .module caption {
    background-color: var(--menu-header);
    font-size: 1rem;
    cursor: pointer;
    color: var(--menu-header-color);
    font-weight: 600;
}
.dashboard .module table caption:hover,
nav .module table caption:hover {
    color: var(--menu-header-color-hover);
}
.dashboard .module table,
nav .module table {
    width: 100%;
    border: none;
}
.dashboard .module table th,
nav .module table th {
    border-bottom: none;
    width: unset !important;
}
.menu-item th {
    border-radius: 0;
    padding-top: 0;
    padding-bottom: 0;
    cursor: pointer;
    background-color: var(--menu-item);
    border-color: white;
    padding-right: 0;
    padding-left: 0.75rem;
}
.menu-item th a {
    color: var(--menu-item-color);
    width: 100%;
    display: flex;
    height: 2.5rem;
    align-items: center;
    padding-left: 1.25rem;
    font-size: 1rem;
    font-weight: 500;
    border-left: solid 3.5px white;
}
.menu-item th:hover a {
    color: var(--menu-item-color-hover);
}

button.logout {
    margin-top: 0.5rem;
    border: solid 2px var(--menu-item-color) !important;
    color: var(--menu-item-color) !important;
    width: 100%;
    padding-top: 1rem;
    padding-bottom: 1rem;
    display: flex;
    text-align: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 1rem;
    background-color: var(--nav-sidebar-bg);
    cursor: pointer;
}
button.logout:hover {
    color: var(--menu-item-color-hover) !important;
    border: solid 2px var(--menu-item-color-hover) !important;
}
#nav-sidebar {
    background-color: var(--nav-sidebar-bg);
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

#header .icon.burguer {
    width: 2rem;
    height: 2rem;
    display: none;
}
#main.main button#toggle-nav-sidebar {
    background-color: var(--nav-sidebar-bg);
    color: white;
}
#main.main.shifted button#toggle-nav-sidebar {
    background-color: white;
    color:  var(--nav-sidebar-bg);
}
#header .toggle-nav-sidebar {
    background-color: #00B7CE;
    color: white;
    border: none;
}
#header .toggle-nav-sidebar::before {
    content: unset;
}

@keyframes openMenuMobileAnimation {
    from {
        margin-left: -100vw;
    }
    to {
        margin-left: 0;
    }
}
@keyframes closeMenuMobileAnimation {
    from {
        left: 0;
    }
    to {
        left: -100vw;
    }
}
@media (max-width: 1160px) or (orientation:portrait) {
    #content-main {
        width: 85%;
    }
    .main.shifted #nav-sidebar {
        animation: openMenuMobileAnimation 1s ;
    }    
    .main #nav-sidebar {
        animation: closeMenuMobileAnimation 1s ;
    }
    #header #toggle-nav-sidebar {
        display: flex;
    }

    #header .icon.burguer {
        display: flex;
        font-size: 2rem;
    }

    #nav-sidebar {
        display: unset;
        flex: 0 0 93%;
        margin-left: -100vw;
        left: unset;
    }
    .main > #nav-sidebar {
        visibility: unset;
    }

}