@charset "UTF-8";
@import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";

/* ---------------------------------------------------
    SIDEBAR STYLE
----------------------------------------------------- */

.wrapper {
    display: flex;
    width: 100%;
    align-items: stretch;
}

#sidebar {
    min-width: 300px;
    background: #171933;
    transition: all 0.3s;
    border-radius: 3px;
    border: 0 solid darkorange;
    border-right-width: 5px;
}

/*sidebar is deactivated*/
#sidebar.active {
    visibility: hidden;
    opacity: 0;
    margin-left: -250px;
}

/*top of sidebar*/
#sidebar .sidebar-header hr {
    margin-top: 5px;
    margin-bottom: 5px;
}

#sidebar .sidebar-header {
    padding: 10px;
}

#sidebar .sidebar-header a {
    padding: 10px;
    color: darkorange;
    text-decoration: none;
}

/*lock icon*/
#sidebar ul li a span.glyphicon {
    right: 7px;
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
    font-size: 10px;  /* make icons constant size across levels */
}

/*dropdowns caret*/
#sidebar ul li a span.caret {
    color: #8C9CBD;
    display: block;
    position: absolute;
    top: 50%;
    right: 10px;  /*10px from right */
    transform: translateY(-50%);
}

/*dropdowns 0th level */
#sidebar ul li a {
    padding: 10px;
    font-size: 1.0em;
    display: block;
    text-decoration: none;
    position: relative;  /*required to position caret*/
    background: #171940;
    color: #8C9CBD;
}

#sidebar ul li a:hover {
    color: #7386D5;
    background: #fff;
    text-decoration: none;
    transition: all 0.3s;
}

#sidebar ul li a.reading {
    background: #1d2594;
}

/*dropdowns 1st level*/
#sidebar ul ul li a {
    color: #fff;
    font-size: 0.9em !important;
    padding-left: 30px !important;
    background: #181B4B;
}

/*dropdowns 2nd level*/
#sidebar ul ul ul li a {
    color: #fff;
    font-size: 0.8em !important;
    padding-left: 60px !important;
    background: #191c55;
}

/*dropdowns 4th level*/
#sidebar ul ul ul ul li a {
    color: #fff;
    font-size: 0.7em !important;
    padding-left: 90px !important;
    background: #191C55;
}

/*this affects module tree in unexpected way - how to restrict this to a particular url?*/
@media (max-width: 768px) {
    #sidebar {
        visibility: hidden;
        opacity: 0;
        margin-left: -250px;
    }
    /*#sidebar.active {*/
    /*    visibility: visible;*/
    /*    opacity: 100;*/
    /*    margin-left: 0;*/
    /*}*/

    /*remove button text - leaving icon only*/
    /*#sidebarCollapse span {*/
    /*    display: none;*/
    /*}*/

    /*remove button text */
    /*#sidebarCollapse {*/
    /*    display: none;*/
    /*}*/
    /*!*center content panel*!*/
    /*#content {*/
    /*    padding-right: 0;*/
    /*    padding-left: 0;*/
    /*}*/
    /*#content-module {*/
    /*    padding-right: 0;*/
    /*    padding-left: 0;*/
    /*}*/
    /*#content-module .panel {*/
    /*    border-radius: 0;*/
    /*}*/

}