/* put sidebar and table side by side */
/* In case we need flex : https://moduscreate.com/blog/how-to-fix-overflow-issues-in-css-flex-layouts/ */

.overflow-container {
    margin-left: 382px;
}

/* sidebar style */

.w-sidebar {
    width: 362px;
    max-width: 362px;
    margin-right:20px;
}

.sidebar {
    overflow-y: auto; /* auto rather than scroll to avoid scroll bar being there when not needed */
    overflow-x: hidden;
    top: 1em;
    scrollbar-width: thin;
    scrollbar-color: var(--middle-blue) var(--pale-blue);
    bottom:2em;
    position:fixed;
}

.nav-menu-text:not(.category) > .submenu-icon { /* place dropdown button to the right */
    float:right;
    margin-left: 0.5em !important;
}

.list-group-item {
    padding:.25rem 1.25rem;
}

.navbar-item-text {
    background-color: inherit;
    display:flex;
    align-items:center;
}

.nav-menu-text {
    cursor:pointer;
    display:flex;
    align-items:center;
}

.nav-menu-text.category {
    background-color: #f9f9f9;
    box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.2) !important;
    z-index:1; /* required for box-shadow to show */
    position:relative;
    border-top: 1px solid #BFBFBF;
    padding:.4rem 1.25rem;
}


.navbar-item-text > label {
    margin-left:1em;
}

.navbar-item-text > input {
    margin-left:1em;
}

.nav-menu-text > .sidebar-span {
    margin-left:2em;
    vertical-align:middle;
    font-weight:bold;
    overflow: hidden;
    text-overflow: ellipsis
}

.database-checkbox {
    transform: scale(1.3);
}

.category-icon {
    height:15px;
    width: 15px;
    padding: 0;
    margin:0;
}

.how-to {
    color: #000;
    text-align: justify;
    padding:1em;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: 0.25rem;
    font-size:0.95em;
}