.sidebar-toggles .archive {
    bottom: 0;
    height: initial;
    width: initial;
    right: 0;
    top: unset;
    margin-right: 7px!important;
}

.archive {
    position: absolute;
    bottom: 25px;
    width: 100%;
    display: inline-block;
}

.sidebar::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
}
.sidebar::-webkit-scrollbar {
    width: 12px;
    background-color: transparent;
}
.sidebar::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #1b2232c2;
}

.sidebar-toggles .hidden {
    position: absolute;
    bottom: 0px;
    width: fit-content;
    height: fit-content;
}

.sidebar-toggle {
    background-color: #1b2232;
    float: right;
    position: absolute;
    width: 30px;
    /* display: table-cell; */
    left: 0%;
    /* margin-right: 52px; */
    /* padding-right: 6px; */
    /* display: none; */
}

.sidebar-toggle.extend {
    left:15%;
}

.content.extend{
    width: 97%;
    transition: 0.3s;
    /* padding-left: 10%; */
    /* margin-left: 10%; */
}

.sidebar.hidden {
    width: 0%;
}

.sidebar {
    background-color: #1b2232;
    width: 15%;
    height: 70%;
    float: left;
    position: absolute;
    transition: 0.3s;
    display: none;
}

.sidebar-header img {
    width: 25px;
}
.sidebar-header {
    width: 80%;
    position: relative;
    height: 60px;
    margin: 0 auto;
}
img.sidebar-layers {
    position: absolute;
    top: 15px;
}

img.sidebar-rounded-button {
    position: absolute;
    top: 15px;
    right: 0;
    cursor: pointer;
}
hr.sidebar-hr {
    position: absolute;
    top: 46px;
    width: 99%;
    border-color: #80808075;
}
.sidebar a {
    text-decoration: none;
}
.sidebar-client {
    width: 80%;
    margin: 0 auto;
}
.sidebar ul {
    list-style-type: none;
}
.sidebar-projects {
    width: 80%;
    margin: 0 auto;
    height: auto;
    overflow-y: scroll;
    overflow-x: hidden;
    height: 80%;
    scrollbar-color: #1b2232c2 #F5F5F5;
    scrollbar-width: thin;
}
.sidebar-projects::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
}
.sidebar-projects::-webkit-scrollbar {
    width: 12px;
    background-color: transparent;
}
.sidebar-projects::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #1b2232c2;
}
.sidebar-projects a {
    color: white;
}

li.sub-nav-sidebar-archived {
    background-color: #592d2d;
}
li.sub-nav-client{
    margin-bottom: 10px;
    font-size: 17px;
}
ul.sub-nav {
    margin-left: 25px;
    opacity: 0;
    height: 0;
    transition: .3s;
    position: relative;
}
ul.sub-nav li {
    padding-top: 10px;
    padding-bottom: 10px;
}
ul.sub-nav li:hover{
    font-weight: 500;
}
ul.sub-nav li{
    width: 115%;
    margin-left: -48px;
    padding-left: 47px;
}

.sidebar-mob img {
    width: 16px;
    margin-left: 8px;
    margin-top: 7px;
    display: none;
}
/* right click */
/* The whole thing */
.custom-menu {
    display: none;
    z-index: 1000;
    position: absolute;
    border: 1px solid #373b46;
    white-space: nowrap;
    font-family: sans-serif;
    background-color: #373b46;
    border-radius: 5px;
    padding: 10px;
    padding-bottom: 2px;
    padding-right: 5px;
}
ul.custom-menu {
    margin-left: -89px;
    margin-top: 8px;
}
.custom-menu li {
    padding: 7px;
    cursor: pointer;
    list-style-type: none;
    transition: all .3s ease;
    user-select: none;
    font-family: Roboto;
    font-size: 14px;
    font-weight: 400;
    color: white;
    margin-top: -8px;
    margin-left: 14px;
}
.custom-menu a {
    text-decoration: none;
}
ul.custom-menu img {
    width: 15px;
    float: left;
}
/* Sidebar client */
.sidebar-client-s {
    display: none;
    z-index: 1000;
    position: absolute;
    border: 1px solid #373b46;
    white-space: nowrap;
    font-family: sans-serif;
    background-color: #373b46;
    border-radius: 5px;
    padding: 10px;
    padding-left: 11px;
    padding-bottom: 2px;
    padding-right: 11px;
}
ul.sidebar-client-s {
    margin-left: -19px;
    margin-top: 8px;
}
ul.sidebar-client-s img {
    margin-right: 6px;
}

ul.sidebar-client-s span.tip.tip-up {
    right: 71px;
}
.sidebar-client-s li {
    padding: 7px;
    cursor: pointer;
    list-style-type: none;
    transition: all .3s ease;
    user-select: none;
    font-family: Roboto;
    font-size: 14px;
    font-weight: 400;
    color: white;
    margin-top: -8px;
}

.sidebar-client-s a {
    text-decoration: none;
}
ul.sidebar-client-s img {
    width: 15px;
    float: left;
}
ul.sidebar-client-s-hidden span.tip.tip-up {
    right: 71px;
}

.sidebar-client-s-hidden {
    display: none;
    z-index: 1000;
    position: absolute;
    border: 1px solid #373b46;
    white-space: nowrap;
    font-family: sans-serif;
    background-color: #373b46;
    border-radius: 5px;
    padding: 10px;
    padding-bottom: 2px;
    padding-right: 5px;
}

ul.sidebar-client-s-hidden {
    margin-left: -19px;
    margin-top: 8px;
}

.sidebar-client-s-hidden li {
    padding: 7px;
    cursor: pointer;
    list-style-type: none;
    transition: all .3s ease;
    user-select: none;
    font-family: Roboto;
    font-size: 14px;
    font-weight: 400;
    color: white;
    margin-top: -8px;
}

.sidebar-client-s-hidden a {
    text-decoration: none;
}

ul.sidebar-client-s-hidden img {
    width: 15px;
    float: left;
}

/* Sidebar project */
.sidebar-project {
    display: none;
    z-index: 1000;
    position: absolute;
    border: 1px solid #373b46;
    white-space: nowrap;
    font-family: sans-serif;
    background-color: #373b46;
    border-radius: 5px;
    padding: 10px;
    padding-bottom: 2px;
    padding-left: 11px;
    padding-right: 11px;
}
ul.sidebar-project img {
    margin-right: 4px;
}
ul.sidebar-project span.tip.tip-up {
    right: 71px;
}
ul.sidebar-project {
    margin-left: -9px;
    margin-top: 8px;
}
.sidebar-project li {
    padding: 7px;
    cursor: pointer;
    list-style-type: none;
    transition: all .3s ease;
    user-select: none;
    font-family: Roboto;
    font-size: 14px;
    font-weight: 400;
    color: white;
    margin-top: -8px;
}
.selected {background-color:red; }
.sidebar-project a {
    text-decoration: none;
}
ul.sidebar-project img {
    width: 15px;
    float: left;
}
/* Sidebar project */
.sidebar-project-archived {
    display: none;
    z-index: 1000;
    position: absolute;
    border: 1px solid #373b46;
    white-space: nowrap;
    font-family: sans-serif;
    background-color: #373b46;
    border-radius: 5px;
    padding: 10px;
    padding-bottom: 2px;
    padding-right: 5px;
}
ul.sidebar-project-archived {
    margin-left: -19px;
    margin-top: 8px;
}
ul.sidebar-project span.tip.tip-up {
    right: 71px;
}
.sidebar-project-archived li {
    padding: 7px;
    cursor: pointer;
    list-style-type: none;
    transition: all .3s ease;
    user-select: none;
    font-family: Roboto;
    font-size: 14px;
    font-weight: 400;
    color: white;
    margin-top: -8px;
}
.selected {background-color:red; }
.sidebar-project-archived a {
    text-decoration: none;
}
ul.sidebar-project-archived img {
    width: 15px;
    float: left;
}
/* Each of the items in the list */
ul.sidebar-menu img {
    width: 15px;
    float: left;
}
.sidebar-menu {
    display: none;
    z-index: 1000;
    position: absolute;
    border: 1px solid #373b46;
    white-space: nowrap;
    font-family: sans-serif;
    background-color: #373b46;
    border-radius: 5px;
    padding: 10px;
    padding-bottom: 2px;
    padding-right: 5px;
}
ul.sidebar-menu {
    margin-left: -99px;
    margin-top: 8px;
}
.sidebar-menu a {
    text-decoration: none;
}
/* Each of the items in the list */
.sidebar-menu li {
    padding: 7px;
    cursor: pointer;
    list-style-type: none;
    transition: all .3s ease;
    user-select: none;
    font-family: Roboto;
    font-size: 14px;
    font-weight: 400;
    color: white;
    margin-top: -8px;
}
ul.sidebar-menu img {
    width: 15px;
    float: left;
}
.tip {
    width: 0px;
    height: 0px;
    position: absolute;
    background: transparent;
    border: 10px solid #373b46;
}
.tip-up {
    top: -18px;
    right: 11px;
    border-right-color: transparent;
    border-left-color: transparent;
    border-top-color: transparent;
}