#sidebar-menu {
    height: calc(100% - var(--header-height));
    width: var(--sidebar-width);
    background-color: var(--color-light-grey);
    position: fixed;
    left: 0;
    top: var(--header-height);
    border-right: 1px solid  var(--color-light-grey);;
}

.sided-container {
    left: 0;
}

.side-menu-content {
    width: 100%;
    height: 100%;
    background-color: var(--primary);
    display: flex;
    flex-direction: column;
    border-bottom: 2px solid  var(--color-light-grey);
    border-top: 2px solid  var(--color-light-grey);
}

.menu-module-box {
    display: flex;
    flex-direction: row;
    align-items: center;
    color: var(--color-on-primary);
    font-size: var(--sidebar-menu-text-size);
}

.menu-box-link:nth-child(1) .menu-module-box,
.menu-box-link:nth-child(5) .menu-module-box,
.menu-box-link:nth-child(9) .menu-module-box {
    background-color: var(--color-bonus-orange);
}

.menu-box-link:nth-child(2) .menu-module-box,
.menu-box-link:nth-child(6) .menu-module-box,
.menu-box-link:nth-child(10) .menu-module-box {
    background-color: var(--color-bonus-red);
}

.menu-box-link:nth-child(3) .menu-module-box,
.menu-box-link:nth-child(7) .menu-module-box,
.menu-box-link:nth-child(11) .menu-module-box {
    background-color: var(--color-bonus-blue);
}

.menu-box-link:nth-child(4) .menu-module-box,
.menu-box-link:nth-child(8) .menu-module-box,
.menu-box-link:nth-child(12) .menu-module-box {
    background-color: var(--color-bonus-purple);
}

.menu-module-box-number {
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--margin-l);
    padding: 0 var(--module-box-padding-s);;
}

.menu-box-link .menu-module-box .menu-module-box-title {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex: 1;
    padding: var(--module-box-padding) var(--module-box-padding);
    background-color: var(--primary);
    text-transform: uppercase;
}

.menu-box-link.touch-active .menu-module-box .menu-module-box-title,
.menu-box-link .menu-module-box.active .menu-module-box-title {
    background-color: transparent;
}

.menu-box-link.touch-active .menu-module-box:not(.active) .menu-module-box-title {
    text-decoration: underline;
}

/****************** MOBILE MENU ******************/
.header .mobile-menu-container {
    width: 100%;
    background-color: var(--color-light-grey);
    border-bottom: var(--shadow-mobile-menu);
    box-shadow: var(--shadow-mobile-menu-smooth);
}

.header .mobile-menu-container #sidebar-menu {
    width: 100%;
}

main #sidebar-menu {
    display: none;
}

main .sided-container {
    width: 100%;
    margin-left: 0;
}

@media screen and (min-width: 992px) {
    .header .mobile-menu-container {
        display: none;
    }
    
    main #sidebar-menu {
        display: flex;
    }
    
    main .sided-container {
        width: calc(100% - var(--sidebar-width));
        margin-left: var(--sidebar-width);
    }
    
    .menu-box-link:hover .menu-module-box .menu-module-box-title
    {
        text-decoration: underline;
        background-color: transparent;
    }
}