/*************************************************************************/
/* MODERN PAGE NAVIGATION - Bootstrap 3 compatible                        */
/* Contextual navigation inside view aside                               */
/*************************************************************************/

/*************************************************************************/
/* BASE                                                                   */
/*************************************************************************/

.nav-page {
    --page-nav-background: #263746;
    --page-nav-background-hover: #314455;
    --page-nav-background-active: #34495b;
    --page-nav-border: rgba(255, 255, 255, 0.07);
    --page-nav-title: #ffffff;
    --page-nav-text: #c7d0da;
    --page-nav-muted: #929fad;
    --page-nav-accent: var(--panel-accent, #b18849);
    position: relative;
    width: 100%;
    margin-bottom: 24px;
    color: var(--page-nav-text);
    background-color: var(--page-nav-background);
    border: 1px solid var(--page-nav-border);
    border-radius: var(--panel-radius, 10px);
    box-shadow: 0 4px 14px rgba(31, 45, 61, 0.10);
    overflow: hidden;
}


/*************************************************************************/
/* CONTENT                                                                */
/*************************************************************************/

.nav-page-content {
    padding: 10px;
}


/*************************************************************************/
/* NAV LIST                                                               */
/*************************************************************************/

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

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

        .nav-page .nav > li > a {
            position: relative;
            display: flex;
            align-items: center;
            min-height: 38px;
            padding: 8px 10px;
            color: var(--page-nav-text);
            background-color: transparent;
            border: 1px solid transparent;
            border-radius: 7px;
            font-size: 0.86em;
            font-weight: 500;
            line-height: 1.35;
            text-decoration: none;
            transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
        }


            /*************************************************************************/
            /* HOVER                                                                  */
            /*************************************************************************/

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


            /*************************************************************************/
            /* ACTIVE MAIN ITEM                                                       */
            /*************************************************************************/

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

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


        /*************************************************************************/
        /* OPTIONAL OPEN PARENT BRANCH                                            */
        /*************************************************************************/

        /*
 * Add class "open" to a first-level li when one of its children is active.
 * This avoids styling parent and child as two identical active items.
 */

        .nav-page .nav > li.open > a {
            color: #ffffff;
            background-color: transparent;
            border-color: transparent;
            font-weight: 600;
        }


        /*************************************************************************/
        /* PAGE SCROLL LINKS                                                      */
        /*************************************************************************/

        .nav-page .nav > li > a.page-scroll::after {
            margin-left: auto;
            color: #7f8c99;
            content: "\f105";
            font-family: FontAwesome;
            font-size: 0.85em;
            opacity: 0;
            transform: translateX(-2px);
            transition: color 0.15s ease, opacity 0.15s ease, transform 0.15s ease;
        }

        .nav-page .nav > li > a.page-scroll:hover::after,
        .nav-page .nav > li.active > a.page-scroll::after,
        .nav-page .nav > li.open > a.page-scroll::after {
            color: #c3ccd5;
            opacity: 1;
            transform: translateX(0);
        }


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

.nav-page .nav-divider {
    height: 1px;
    margin: 10px 6px;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.10);
}


/*************************************************************************/
/* SUBMENU                                                                */
/*************************************************************************/

.nav-page .nav li > ul {
    margin: 2px 0 6px;
    padding: 2px 0 2px 14px;
    list-style: none;
}

    .nav-page .nav li > ul > li {
        position: relative;
        margin: 1px 0;
    }

        .nav-page .nav li > ul > li::before {
            position: absolute;
            top: 50%;
            left: 2px;
            width: 4px;
            height: 4px;
            content: "";
            background-color: #718091;
            border-radius: 50%;
            transform: translateY(-50%);
        }

        .nav-page .nav li > ul > li > a {
            display: block;
            padding: 6px 8px 6px 14px;
            color: var(--page-nav-muted);
            background-color: transparent;
            border-radius: 6px;
            font-size: 0.80em;
            font-weight: 500;
            line-height: 1.35;
            text-decoration: none;
            transition: color 0.15s ease, background-color 0.15s ease;
        }

            .nav-page .nav li > ul > li > a:hover,
            .nav-page .nav li > ul > li > a:focus {
                color: #ffffff;
                background-color: rgba(255, 255, 255, 0.05);
                outline: 0;
            }

            .nav-page .nav li > ul > li.active > a,
            .nav-page .nav li > ul > li > a.active {
                color: #ffffff;
                background-color: transparent;
                font-weight: 650;
            }

        .nav-page .nav li > ul > li.active::before {
            background-color: var(--page-nav-accent);
        }


/*************************************************************************/
/* EXTERNAL / OTHER VIEW LINKS                                            */
/*************************************************************************/

.nav-page .nav > li > a:not(.page-scroll) {
    color: #b7c1cb;
}

    .nav-page .nav > li > a:not(.page-scroll)::after {
        margin-left: auto;
        color: #7f8c99;
        content: "\f08e";
        font-family: FontAwesome;
        font-size: 0.78em;
    }

    .nav-page .nav > li > a:not(.page-scroll):hover::after,
    .nav-page .nav > li.active > a:not(.page-scroll)::after {
        color: #c3ccd5;
    }


/*************************************************************************/
/* OPTIONAL TITLE                                                        */
/*************************************************************************/

.nav-page-title {
    margin: 0;
    padding: 13px 15px 10px;
    color: #8e9baa;
    background-color: rgba(255, 255, 255, 0.025);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.70em;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.3;
    text-transform: uppercase;
}


/*************************************************************************/
/* STICKY - DESKTOP                                                       */
/*************************************************************************/

@media (min-width: 992px) {

    .sticky-container {
        position: relative;
        width: 100%;
        top: auto;
        left: auto;
        background-color: transparent;
    }

        .sticky-container .nav-page {
            position: -webkit-sticky;
            position: sticky;
            top: 70px;
            width: 100%;
        }
}

/*************************************************************************/
/* PAGE LAYOUT WITH CONTEXTUAL NAVIGATION                                */
/*************************************************************************/

@media (min-width: 992px) {

    .page-with-navigation {
        display: flex;
        align-items: stretch;
    }

        .page-with-navigation > aside,
        .page-with-navigation > main {
            float: none;
        }

        .page-with-navigation > aside {
            position: relative;
        }

        .page-with-navigation .sticky-container {
            position: relative;
            width: 100%;
            height: 100%;
        }

        .page-with-navigation .nav-page {
            position: -webkit-sticky;
            position: sticky;
            top: 70px;
            width: 100%;
        }
}

/*************************************************************************/
/* NAV SCROLLBAR                                                          */
/*************************************************************************/

.nav-page {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

    .nav-page::-webkit-scrollbar {
        width: 6px;
    }

    .nav-page::-webkit-scrollbar-track {
        background: transparent;
    }

    .nav-page::-webkit-scrollbar-thumb {
        background-color: rgba(255, 255, 255, 0.18);
        border-radius: 999px;
    }

        .nav-page::-webkit-scrollbar-thumb:hover {
            background-color: rgba(255, 255, 255, 0.28);
        }


/*************************************************************************/
/* RESPONSIVE / OFFCANVAS                                                 */
/*************************************************************************/

@media (max-width: 991px) {

    /*********************************************************************/
    /* MENU TOGGLE                                                       */
    /*********************************************************************/

    .navbar-menu {
        position: relative;
        z-index: 1100;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        margin: 0;
        color: #7b8794;
        background-color: #ffffff;
        border: 1px solid var(--panel-border, #e3e8ef);
        border-radius: 8px;
        box-shadow: 0 2px 7px rgba(31, 45, 61, 0.08);
        cursor: pointer;
        transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    }

        .navbar-menu:hover,
        .navbar-menu:focus {
            color: var(--panel-accent, #b18849);
            background-color: #ffffff;
            border-color: #d4dce4;
            box-shadow: 0 4px 10px rgba(31, 45, 61, 0.10);
            outline: 0;
        }

        .navbar-menu i {
            color: inherit;
        }


    /*********************************************************************/
    /* OFFCANVAS CONTAINER                                               */
    /*********************************************************************/

    .sticky-container {
        position: fixed;
        top: 50px;
        bottom: 0;
        left: 0;
        z-index: 1050;
        width: 360px;
        max-width: calc(100vw - 44px);
        height: calc(100vh - 50px) !important;
        margin: 0;
        overflow-x: hidden;
        overflow-y: auto;
        background-color: var(--page-nav-background, #263746);
        box-shadow: 8px 0 28px rgba(20, 31, 43, 0.24);
        transform: translateX(-100%);
        transition: transform 0.22s ease;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
    }

        /*
     * Bootstrap 3 normally hides .collapse.
     * The off-canvas must remain rendered so transform can animate it.
     */
        .sticky-container.collapse {
            display: block;
            visibility: visible;
        }

            .sticky-container.collapse.in {
                transform: translateX(0);
            }

        .sticky-container::-webkit-scrollbar {
            width: 6px;
        }

        .sticky-container::-webkit-scrollbar-track {
            background: transparent;
        }

        .sticky-container::-webkit-scrollbar-thumb {
            background-color: rgba(255, 255, 255, 0.18);
            border-radius: 999px;
        }

            .sticky-container::-webkit-scrollbar-thumb:hover {
                background-color: rgba(255, 255, 255, 0.28);
            }


        /*********************************************************************/
        /* NAV PAGE INSIDE OFFCANVAS                                         */
        /*********************************************************************/

        .sticky-container .nav-page {
            width: 100%;
            min-height: 100%;
            margin: 0;
            border: 0;
            border-radius: 0;
            box-shadow: none;
            overflow: visible;
        }

        .sticky-container .nav-page-content {
            padding: 14px 12px 30px;
        }


        /*********************************************************************/
        /* MOBILE SPACING                                                    */
        /*********************************************************************/

        .sticky-container .nav-page .nav > li > a {
            min-height: 42px;
            padding: 9px 11px;
            font-size: 14px;
        }

        .sticky-container .nav-page .nav li > ul {
            margin: 3px 0 7px;
            padding-left: 18px;
        }

            .sticky-container .nav-page .nav li > ul > li > a {
                padding: 7px 9px 7px 14px;
                font-size: 13px;
            }


    /*********************************************************************/
    /* PAGE LAYERS                                                       */
    /*********************************************************************/

    aside {
        position: relative;
        z-index: 600;
    }

    main {
        position: relative;
        z-index: 500;
    }
}

.navbar-menu {
    display: none;
}

@media (max-width: 991px) {

    .navbar-menu {
        display: inline-flex;
    }
}