/* ================================================================================ */
/*                                  Mobile Nav Accordion v1.0.0                            */
/* ================================================================================ */

/* This CSS is meant to be utilized with bootstrap 3 backoffice library in addition to backoffice's mobile.css */

@media screen and (max-width: 767px) {
    .navbar-default .navbar-collapse {
        padding-bottom: 20px;
    }
    .dropdown-menu > li > a {
        white-space: normal;
        /* margin-top: 20px; */
        /* margin-bottom: 20px; */
    }
    div#s-menu {
        padding-top: 20px;
        padding-bottom: 20px;
    }
    div#s-menu .nav.navbar-nav {
        margin: 0px;
    }

    div#s-menu .nav.navbar-nav:hover .dropdown-menu li {
        padding-top: 20px;
        padding-bottom: 20px;
    }
    div#s-menu .nav.navbar-nav > li > a {
        padding: 20px 0;
        border-top: 1px solid #ddd;
    }

    div#s-menu ul.nav.navbar-nav {
        border-bottom: 1px solid #ddd;
    }

    div#s-menu .navbar-nav li.dropdown-submenu > a {
        pointer-events: none;
        cursor: default;
        /* margin-bottom: 10px; */
    }

    div#s-menu
        .nav.navbar-nav
        .dropdown-menu
        li.dropdown-submenu
        > a:first-child,
    div#s-menu > ul.navbar-nav > li > a + ul > li > a {
        font-weight: 600;
        font-size: 14px;
    }

    div#s-menu ul.dropdown-menu,
    div#s-menu
        .nav.navbar-nav
        .dropdown-menu
        .dropdown-submenu.open
        .dropdown-menu,
    div#s-menu .nav.navbar-nav .dropdown-menu .dropdown-submenu .dropdown-menu {
        /* max-height: 0px;
    height: 0px;
    transition: max-height 300ms ease-in-out;
    overflow: hidden; */
        display: none;
    }

    div#s-menu .nav.navbar-nav:hover .dropdown-menu,
    div#s-menu
        .nav.navbar-nav:hover
        .dropdown-menu
        .dropdown-submenu:hover
        > .dropdown-menu {
        /* height: auto; */
        /* max-height: 2000px; */
        display: block;
    }

    div#s-menu
        .nav.navbar-nav
        .dropdown-menu
        li.dropdown-submenu
        > a:first-child,
    div#s-menu > ul.navbar-nav > li > a + ul > li > a {
        position: relative;
    }

    #s-menu .nav.navbar-nav .caret {
        display: none;
    }

    #s-menu .nav.navbar-nav .dropdown > a:before,
    #s-menu .nav.navbar-nav .dropdown-submenu > a:before {
        content: "";
        position: absolute;
        height: 2px;
        width: 14px;
        display: block;
        right: 10px;
        background-color: #333;
        top: calc(50% - 0px);
        -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg);
        -webkit-transition: -webkit-transform 300ms linear;
        transition: -webkit-transform 300ms linear;
        -o-transition: transform 300ms linear;
        transition: transform 300ms linear;
        transition: transform 300ms linear, -webkit-transform 300ms linear;
    }

    #s-menu .nav.navbar-nav .dropdown > a:after,
    #s-menu .nav.navbar-nav .dropdown-submenu > a:after {
        content: "";
        position: absolute;
        height: 2px;
        width: 14px;
        display: block;
        right: 10px;
        background-color: #333;
        top: calc(50% - 0px);
        border: none;
    }

    #s-menu .nav.navbar-nav:hover > li.dropdown > a:before,
    #s-menu .nav.navbar-nav:hover li.dropdown-submenu:hover > a:before {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    div#s-menu
        .nav.navbar-nav:hover
        .dropdown-menu
        > li:not(.dropdown-submenu) {
        margin-right: 40px;
    }
}