/* By default, the sidebar is visible */

#left_sidebar                   { font-family: var(--arial-font);
                                  font-size: 10pt; line-height: 16px;
                                  width: 150px; float: left; padding-top: 20px; background-color: var(--ref-color5); }
#content                        { width: calc(100% - 150px); float: left; }

#left_sidebar .group            { margin-bottom: 20px; }
#left_sidebar .group .title     { display: block; margin: 0 0 0 2px; padding: 2px 6px; color: var(--ref-color2);
                                  font-weight: bold; font-size: 8pt; line-height: normal; text-transform: uppercase; }

#left_sidebar .item             { display: block; margin: 0 0 0 10px; padding: 4px 6px; }
#left_sidebar .item.selected    { background-color: white; color: black; }
#left_sidebar .item.highlighted { background-color: rgba(0, 255, 255, 0.25); color: black; }
#left_sidebar .item.important   { color: navy; }
#left_sidebar .item.critical    { background-color: rgba(0, 0, 128, 0.25); border: 1px solid navy; }

#left_sidebar a                                    ,
#left_sidebar .pseudo_link                         { text-decoration: none; color: silver; }
#left_sidebar a.item:hover                         ,
#left_sidebar .pseudo_link:hover                   { background-color: white; }
#left_sidebar a.item.highlighted:hover             ,
#left_sidebar  .item.pseudo_link.highlighted:hover { background-color: rgba(0, 255, 255, 0.5); }
#left_sidebar a.item.critical:hover                ,
#left_sidebar  .item.pseudo_link.critical:hover    { color: white; background-color: rgba(0, 128, 128, 0.5); }


#left_sidebar .group .title:empty { display: none; }

#header .main_menu_item#left_sidebar_trigger { cursor: pointer; display: none; }

/* We'll hide it for small displays (less than 480px wide) */

@media all and (min-width: 100px) and (max-width: 480px)
{
    #left_sidebar { display: none; }
    #content      { float: none; width: 100%; }
    
    #header .main_menu_item#left_sidebar_trigger { display: inline-block; }
}

/* Overrides for the toggler */

body[data-left-sidebar-visible="true"] #left_sidebar {
    /*
    display: block; position: absolute; max-width: 100vw;
    background-color: white;
    -webkit-box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.5);
    -moz-box-shadow:    5px 5px 10px 1px rgba(0,0,0,0.5);
    box-shadow:         5px 5px 10px 1px rgba(0,0,0,0.5);
    */
    background-color:   var(--ref-color5);
    display:            block; margin-bottom: 10px; padding-right: 10px; width: 100%;
    position:           relative; z-index: 100;
}

/* The trigger is hidden when the main menu is expanded on small devices. */
#header .main_menu_item#left_sidebar_trigger.visible { display: none; }