#menu-lateral {
    width: 256px;
    transition: 0.5s width;

    // submenu closed
    input:not(:checked){
        & + label {
            .icosq-chevron {
                @extend .icosq-chevron-down;
            }
        }
        & + label + .submenu {
            display: none;
        }
    }

    // submenu open
    input:checked + label {
        .icosq-chevron {
            @extend .icosq-chevron-up;
        }
    }

    &.fold {
        width: 3.833rem; //46px

        .submenu {
            // hide until hover reveal it by a hover
            display: none;
        }
        
        // (Fold) Display submenu on menu hover 
        .menu>li:hover {
            position: relative;

            .submenu-single-link,
            .submenu {
                display: block !important;
                position: absolute;
                top: 0;
                left: 100%;
                width: auto;
                display: none;
                min-width: 210px;
                z-index: 20;

                box-shadow: 0px 3px 8px #bdbcbc;
                -webkit-box-shadow: 0px 3px 8px #bdbcbc;
                -moz-box-shadow: 0px 3px 8px #bdbcbc;
            }
        } 
        .d-fold-none { display: none }
    }

    &:not(.fold) {

        .submenu-item {
            padding-left: 2rem;
            &.active {
                padding-left: calc( 2rem - 4px );
            }
        }

        .d-unfold-none {
            display: none;
        }
    }

    #btn-menu-fold {

        // Reset <button>
        border: 0;
        border-radius: 0;
        width: 100%;
        padding: 0;
        outline: 0;

        display: flex;
        flex-wrap: nowrap;
        align-items: center;

        min-height: 3.333rem; // 40px
        background-color: var(--main-color-client1);
        cursor: pointer;

        // TODO : why is the text centered without this rule ?
        .menu-label {
            text-align: left; 
        }
    }
    
    
    .badge-counter {
        min-width: 1.5rem;
        padding: 1px 4px;
        font-size: var(--fs-11);

        border-radius: 8px;
        font-weight: bold;
        text-align: center;
        display: inline-block;
        vertical-align: middle;
        color: var(--color-text-light) !important;
        background-color:var(--main-color-client1);
    }

    .list-inline{
        margin-left:0px!important;
    }

    .submenu-single-link,
    .submenu {
        background-color: var(--color-bg-default);
        border-top: solid 1px rgba(151, 151, 151, 0.16);
    }

    .menu>li,
    .submenu>li:not(:last-of-type) { // <li> of .submenu except the last
        border-bottom: solid 1px rgba(151, 151, 151, 0.16);
    }

    .icosq-chevron {
        width: 1.666rem !important; // 20px
        height: 1.666rem !important; // 20px
    }

    .menu-icon {
        font-size: 1.5rem; // 18px
    }

    .submenu-item,
    .menu-item {
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
        cursor: pointer;

        min-height: 3.333rem; // 40px

        // reset <a>
        @extend .link-unstyled;

        // reset <label>
        margin-bottom: 0;

        // Gutter
        padding-left: 5px; 
        padding-right: 5px;
        > * {
            margin-left: 5px;
            margin-right: 5px;
        }

        
        &:hover {
            background-color: rgba(74, 85, 107, 0.06)!important;
        }

        &.active { 
            border-left: solid 4px var(--main-color-client1);
            padding-left: calc( 5px - 4px );
        }        
    }

    .submenu-item {
        justify-content: start;
    }

    .menu-item {
        position: relative;
        .badge-counter {
            position: absolute;
            right: -5px; bottom: 1px;
            font-size: 0.833rem;
        }
    }

    .submenu-single-link {
        display: none;
    }

    .menu-label {
        font-weight: bold;
        
        margin-right: auto; // Push other element to the right

        // Display one one line only and cut text with ellipsis
        @extend .bs-col;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

}

@-webkit-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }
    40% {
        display: block;
        opacity: 0;
    }
    100% {
        display: block;
        opacity: 1;
    }
}

@-moz-keyframes fadeInFromNone {
    0% {display: none;opacity: 0;}
    40% {display: block; opacity: 0;}
    100% {display: block; opacity: 1;}
}

@-o-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }
    40% {
        display: block;
        opacity: 0;
    }
    100% {
        display: block;
        opacity: 1;
    }
}

@keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }
    40% {
        display: block;
        opacity: 0;
    }
    100% {
        display: block;
        opacity: 1;
    }
}

/***** Paramètres *****/

.ss_params {
	position: absolute;
    width: 265px;
    right:51px;
    display: none;
    border-radius: 2px;
    background-color: var(--color-bg-default);
	box-shadow: -1px 3px 8px#bdbcbc;
	-webkit-box-shadow: -1px 3px 8px #bdbcbc;
	-moz-box-shadow: -1px 3px 8px #bdbcbc;
	z-index:20;
	top:8px;
}

