/* -------------------------------------------------------------------------------------------------------------- */
/* SIDE MENU */
/* -------------------------------------------------------------------------------------------------------------- */

#menuSide {
    width: 50px;
    position: absolute;
    top: 80px;
    left: 0;
    bottom: 0;
    margin-bottom:40px;
    height: fit-content;

    color: white;
    text-decoration: none;
    z-index: 100;
}

body.noMenuSide #menuSide {
    display: none;
}

#menuSideOverlay {
    display: none;
    position:fixed;
    top: 80px;
    left: 250px;
    right: 0;
    bottom: 0;
    background: rgba(80,80,80,0.5);
    z-index: 100;
}

#menuSideBackground {
    background-color: #241F20;
    width: 50px;
    position: fixed;
    top: 80px;
    left: 0;
    bottom: 0;
}

#menuSide.opened #menuSideBackground {
    width: 250px;
}

#menuSide.opened {
    width: 250px;
}

#menuSide ul {
    margin-top: 20px;
    padding: 0;
    list-style: none;
}

#menuSide li {
    position: relative;

    display: block;
    height: 50px;

    color: white;
    text-decoration: none;

    cursor:pointer;
}

/*
#menuSide li:hover {
    background-color: white;
}

#menuSide li:hover a {
    color: #241F20;
}
*/

#menuSide a {
    display: flex;
    justify-content: left; /* Horizontal centering */
    align-items: center; /* Vertical centering */
    text-decoration: none;
    color: white;

    left:50px;
    width:200px;
    height:50px;

    font-family: 'Titillium Web', sans-serif;
    font-style: normal;
    font-weight: 700;
}

.menuSideIcon {
    display: flex;
    position: absolute;
    justify-content: center; /* Horizontal centering */
    align-items: center; /* Vertical centering */
    height:50px;
    width:50px;
    overflow:hidden;
}

/*
#menuSide li:hover .menuSideIcon {
    color: #241F20;
}
*/

.menuSideCaption {
    display: none;
    position: absolute;
    left: 50px;
    height: 50px;
    width: 200px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    font-family: 'Titillium Web', sans-serif;
    font-style: normal;
    font-weight: 700;
}

#menuSide.opened .menuSideCaption {
    display: block;
}