/* NOTA:

El objetivo de este archivo es hacer de submenu generico

Se recomienda sobreescribir estilos en style.css

*/



@media screen and (max-width: 992px) {

    header > div {

        display: flex;

        flex-wrap: wrap;

    }

    .navbar {

        margin-bottom: 0;

        background: none;

        border: 0;

    }

    .navbar-toggle {

        float: none;

        margin-left: 15px;

    }

    

    .navbar-toggle {

        display: block;

    }

    #sidebar li li a {

        padding: 0.5rem 1rem;

    }

    #navbar { display: none !important; }

    #sidebar {

        width: 250px;

        position: fixed;

        top: 0;

        left: -270px;

        height: 100vh;

        z-index: 1100;

        background: #fff;

        color: #000;

        transition: all 0.3s;

        overflow-y: scroll;

        box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);

    }

    

    #sidebar i {

        padding: 3px 20px;

        position: absolute;

        right: 0;

    }

    

    #sidebar .main_submenu{

        margin: 0 !important;

    } 



    #sidebar.active {

        left: 0;

    }

    

    #sidebar ul ul {

        display: none;

        list-style: none;

        padding-left: 20px;

    }

    

    #sidebar > ul > li > a {

        color: #666666;

        font-size: 14px;

        padding: 9px 32px 9px 17px;

        border-bottom: 1px solid ;

    }



    #dismiss {

        width: 35px;

        height: 35px;

        line-height: 35px;

        text-align: center;

        background: #7386D5;

        position: absolute;

        top: 10px;

        right: 10px;

        cursor: pointer;

        -webkit-transition: all 0.3s;

        -o-transition: all 0.3s;

        transition: all 0.3s;

    }

    #dismiss:hover {

        background: #fff;

        color: #7386D5;

    }



    .overlay {

        position: fixed;

        width: 100vw;

        height: 100vh;

        background: rgba(0, 0, 0, 0.7);

        z-index: 1036;

        display: none;

    }



    #sidebar .sidebar-header {

        padding: 20px;

        background: #6d7fcc;

    }



    #sidebar ul.components {

        padding: 20px 0;

        border-bottom: 1px solid #47748b;

    }



    #sidebar ul p {

        color: #fff;

        padding: 10px;

    }



    #sidebar ul li a {

        font-size: 14px;

        display: block;

    }

    #sidebar ul li a:hover {

        background: #fff;

    }



    /*#sidebar ul li.active > a, a[aria-expanded="true"] {

        color: #fff;

        background: #000;

    }*/

}

@media screen and (min-width: 992px) {

    #sidebar { display: none; }

    

    .main-nav i {

        vertical-align: baseline;

    }



}