:root {
    --sidebar: 250px;
    --header-height: 50px;
}

header {
    height: var(--header-height);
}

/* Wrapper */
  .wrapper {
    width: 100%;
    height: 100%;
    min-height: calc(100vh - var(--header-height));
}

#sidebar {
    width: var(--sidebar);
    transition-duration: 1s;
}

#sidebar.active {
    margin-left: calc(-1 * var(--sidebar));
    transition-duration: 1s;
}

#sidebar-close {
    background-image: url(../images/icons/chevron-double-left.svg);
    background-size: contain;
    width: 32px;
    height: 32px;
}

#sidebar-close.active {
    background-image: url(../images/icons/chevron-double-right.svg);
}

@media (max-width: 768px) {
    #sidebar { margin-left: calc(-1 * var(--sidebar)); }
    #sidebar.active { margin-left: 0 !important; width: 100vw; }
    #sidebar-close { background-image: url(../images/icons/chevron-double-right.svg); }
    #sidebar-close.active { background-image: url(../images/icons/chevron-double-left.svg); }
}
.hidden {
    display: none !important;
}
/* Icons */
/* Filter generator : https://codepen.io/sosuke/pen/Pjoqqp */
.icon-header {
    height: 40px;
    filter: brightness(0) saturate(100%) invert(12%) sepia(22%) saturate(4646%) hue-rotate(241deg) brightness(84%) contrast(98%);
}

.icon-profile {
    height: 150px;
    width: 150px;
}

.icon-profile-svg {
    height: 150px;
    width: 150px;
    filter: brightness(0) saturate(100%) invert(30%) sepia(79%) saturate(1640%) hue-rotate(243deg) brightness(78%) contrast(91%);
}

.icon-menu {
    height: 24px;
    width: 24px;
    filter: brightness(0) saturate(100%) invert(30%) sepia(79%) saturate(1640%) hue-rotate(243deg) brightness(78%) contrast(91%);
}

.icon-card {
    max-width: 180px;
    max-height: 180px;
}