/*************************************************************************/
/* MODERN APPLICATION SIDEBAR - Bootstrap 3                              */
/*************************************************************************/

.sidebar-content {
    --sidebar-bg: #202f3d;
    --sidebar-bg-hover: #2a3b4b;
    --sidebar-bg-active: #314556;
    --sidebar-text: #c5ced7;
    --sidebar-muted: #8493a2;
    --sidebar-title: #ffffff;
    --sidebar-accent: var(--panel-accent, #b18849);
    --sidebar-border: rgba(255,255,255,.08);
    width: 100%;
    min-height: 100%;
    padding: 12px 10px 24px;
    color: var(--sidebar-text);
    background-color: var(--sidebar-bg);
}


/*************************************************************************/
/* NAV                                                                   */
/*************************************************************************/

.sidebar-nav {
    margin: 0;
    padding: 0;
    list-style: none;
}

    .sidebar-nav > li {
        position: relative;
        margin: 2px 0;
    }


        /*************************************************************************/
        /* LINKS                                                                 */
        /*************************************************************************/

        .sidebar-nav > li > a {
            position: relative;
            display: flex;
            align-items: center;
            gap: 11px;
            min-height: 42px;
            padding: 8px 10px;
            color: var(--sidebar-text);
            background-color: transparent;
            border: 1px solid transparent;
            border-radius: 8px;
            font-size: 13px;
            font-weight: 500;
            line-height: 1.35;
            text-decoration: none;
            transition: color .15s ease, background-color .15s ease, border-color .15s ease;
        }

            .sidebar-nav > li > a:hover,
            .sidebar-nav > li > a:focus {
                color: #ffffff;
                background-color: rgba(255,255,255,.055);
                border-color: rgba(255,255,255,.045);
                text-decoration: none;
                outline: 0;
            }


            /*************************************************************************/
            /* ICONS                                                                 */
            /*************************************************************************/

            .sidebar-nav > li > a > i.fa,
            .sidebar-nav > li > a > i.glyphicon {
                display: inline-flex;
                flex: 0 0 auto;
                align-items: center;
                justify-content: center;
                width: 28px;
                height: 28px;
                margin: 0;
                color: var(--sidebar-muted);
                background-color: rgba(255,255,255,.045);
                border-radius: 7px;
                font-size: 13px;
                line-height: 1;
                transition: color .15s ease, background-color .15s ease;
            }

            .sidebar-nav > li > a:hover > i.fa,
            .sidebar-nav > li > a:hover > i.glyphicon,
            .sidebar-nav > li > a:focus > i.fa,
            .sidebar-nav > li > a:focus > i.glyphicon {
                color: var(--sidebar-accent);
                background-color: rgba(255,255,255,.075);
            }


            /*************************************************************************/
            /* ACTIVE                                                                */
            /*************************************************************************/

            .sidebar-nav > li.active > a,
            .sidebar-nav > li > a.active {
                color: #ffffff;
                background-color: rgba(255,255,255,.075);
                border-color: rgba(255,255,255,.05);
                font-weight: 650;
            }

                .sidebar-nav > li.active > a::before,
                .sidebar-nav > li > a.active::before {
                    position: absolute;
                    top: 7px;
                    bottom: 7px;
                    left: -10px;
                    width: 3px;
                    content: "";
                    background-color: var(--sidebar-accent);
                    border-radius: 0 3px 3px 0;
                }

                .sidebar-nav > li.active > a > i.fa,
                .sidebar-nav > li.active > a > i.glyphicon,
                .sidebar-nav > li > a.active > i.fa,
                .sidebar-nav > li > a.active > i.glyphicon {
                    color: var(--sidebar-accent);
                    background-color: rgba(255,255,255,.075);
                }


/*************************************************************************/
/* BRAND / AVATAR                                                        */
/*************************************************************************/

.sidebar-brand {
    margin: 2px 0 12px !important;
    padding-bottom: 13px;
    border-bottom: 1px solid var(--sidebar-border);
}

    .sidebar-brand > a {
        display: flex !important;
        align-items: center;
        justify-content: center;
        min-height: auto !important;
        padding: 10px !important;
        background-color: transparent !important;
        border: 0 !important;
    }

        .sidebar-brand > a:hover,
        .sidebar-brand > a:focus {
            background-color: rgba(255,255,255,.035) !important;
        }

    .sidebar-brand .avatar {
        position: relative;
        width: 72px;
        height: 72px;
        padding: 3px;
        background-color: rgba(255,255,255,.05);
        border: 1px solid rgba(255,255,255,.10);
        border-radius: 50%;
        box-shadow: 0 4px 14px rgba(0,0,0,.16);
    }

        .sidebar-brand .avatar img {
            display: block;
            width: 100%;
            height: 100%;
            margin: 0;
            object-fit: cover;
            border-radius: 50%;
        }


/*************************************************************************/
/* SECTION LABELS                                                        */
/*************************************************************************/

/*
 * Ta vue contient déjà quelques <li> avec uniquement du texte :
 *
 * <li>@Html.Raw(...)</li>
 *
 * On les traite comme titres de section sans modifier le Razor.
 */

.sidebar-nav > li:not(.sidebar-brand):not(.nav-divider):not(:has(a)) {
    margin: 16px 10px 6px;
    color: #718191;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1.3;
    text-transform: uppercase;
}

/*************************************************************************/
/* DIVIDER                                                               */
/*************************************************************************/

.sidebar-nav > .nav-divider {
    height: 1px;
    margin: 11px 8px;
    background-color: rgba(255,255,255,.09);
    border: 0;
}
/*************************************************************************/
/* BADGES                                                                */
/*************************************************************************/

.sidebar-nav > li > a > .badge {
    margin-left: auto;
    min-width: 20px;
    padding: 4px 6px;
    color: #ffffff;
    background-color: var(--sidebar-accent);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 650;
    line-height: 1;
}
/*************************************************************************/
/* SCROLLBAR                                                             */
/*************************************************************************/

.sidebar-content {
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.16) transparent;
}

    .sidebar-content::-webkit-scrollbar {
        width: 6px;
    }

    .sidebar-content::-webkit-scrollbar-track {
        background: transparent;
    }

    .sidebar-content::-webkit-scrollbar-thumb {
        background-color: rgba(255,255,255,.16);
        border-radius: 999px;
    }

        .sidebar-content::-webkit-scrollbar-thumb:hover {
            background-color: rgba(255,255,255,.26);
        }

.sidebar-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.help-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}