html {
    height: 100%;
}

body {
    /* Since navbar is fixed, and so out of the DOM flow, make room for it at the top of the body */
    margin-top: 56px;
    height: calc(100% - 56px);
}

.content {
    height: 100%;
}

.d-inline-below-lg {
    display: inline-block;
}
.d-below-lg {
    display: block;
}
.d-above-lg, .d-inline-above-lg {
    display: none;
}

#filter_sidebar {
    display: none;
}
#filter_inline {
    display: block;
}
/* Medium devices (desktops, 768px and up) */
@media (min-width: 768px) {
    .d-inline-below-lg, .d-below-lg {
        display: none;
    }
    .d-above-lg {
        display: block;
    }
    .d-inline-above-lg {
        display: inline-block;
    }
    #filter_sidebar {
        height: 100%;
        display: flex;
        flex-shrink: 0;
        width: 16rem;
        margin-right: 20px;
        flex-direction: column;
        padding-top:10px;
        padding-bottom:10px;
    }
    #filter_inline {
        display: none;
    }
    #filter_sidebar_list {
        max-height: 100%;
        overflow-y: auto;
    }
}

/***** Dark overlay *****/

.overlay {
    display: none;
    position: fixed;
    width: 100vw;
    height: 100vh;
    background: rgba(51, 51, 51, 0.7);
    z-index: 998;
    opacity: 0;
    transition: all .5s ease-in-out;
}

.overlay.active {
    display: block;
    opacity: 1;
}


/***** Error div *****/

.errdiv {
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    z-index: 1000;
    margin-right: 20px;
    margin-left: 20px;
}


/***** Sidebar *****/

.sidebar {
    overflow-y: auto;
    width: 200px;
    position: fixed;
    top: 56px;
    bottom: 0px;
    left: -200px;
    z-index: 999;
    transition: all .3s;
    text-align: left;
}

.sidebar.active {
    left: 0px;
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    body {
        padding-left: 200px;
    }
    .sidebar,
    .sidebar.active {
        left: 0px;
    }
    .errdiv {
        left: 200px;
    }
}

/* Sidebar menu links */

.sidebar ul li.section-title {
    display: block;
    padding: 15px 10px 10px;
    border: 0;
    font-variant: small-caps;
    color: #f8f8fa; /* BS text-light */
}

.sidebar ul li a {
    display: block;
    padding: 10px 20px;
    border: 0;
    color: rgba(255, 255, 255, .5); /* BS navbar-item default color */
}

.sidebar ul li a:hover,
.sidebar ul li a:focus,
.sidebar ul li.active > a:hover,
.sidebar ul li.active > a:focus {
    text-decoration: none;
    color: rgba(255, 255, 255, .75);
}

/* Icon size and position when embedded in link */
.sidebar ul li a.mdi::before {
    font-size: 1.25em;
    line-height: initial;
    position: relative;
    top: 0.09rem;
}
.sidebar ul li a.mdi:not(:empty)::before {
    margin-right: 0.25rem;
}

.sidebar ul li.active > a,
a[aria-expanded="true"] {
    background: #444;
    color: #fff;
}

.sidebar ul ul a {
    background: #444;
    padding-left: 30px;
    font-size: 14px;
}

.sidebar ul ul li.active > a {
    background: #555;
}

.sidebar a[data-toggle="collapse"] {
    position: relative;
}

.sidebar .dropdown-toggle::after {
    display: block;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}

/***** Content *****/

.content {
    width: 100%;
    transition: all 0.3s;
}

/* Material Design icons styling for BS4
    See https://dev.materialdesignicons.com/getting-started/bootstrap
*/
.alert.mdi::before,
.breadcrumb .mdi::before,
.btn.mdi::before,
.card-title.mdi::before,
.card-subtitle.mdi::before,
.card-link.mdi::before,
.dropdown-item.mdi::before,
.list-group-item.mdi::before,
.nav-link.mdi::before {
    font-size: 1.25em;
    line-height: initial;
    position: relative;
    top: 0.09rem;
}
.alert.mdi::before,
.breadcrumb .mdi:not(:empty)::before,
.btn.mdi:not(:empty)::before,
.card-title.mdi:not(:empty)::before,
.card-subtitle.mdi:not(:empty)::before,
.card-link.mdi:not(:empty)::before,
.dropdown-item.mdi:not(:empty)::before,
.nav-link.mdi:not(:empty)::before {
    margin-right: 0.25rem;
}
.list-group-item.mdi:not(:empty)::before {
    margin-right: 0.5rem;
}
.dropdown-item.mdi:not(:empty)::before {
    margin-left: -0.75rem;
}
.alert.mdi::before,
.list-group-item.mdi:not(:empty)::before {
    margin-left: -0.5rem;
}
.modal-title.mdi::before {
    font-size: 1.5em;
    line-height: 0.5;
    position: relative;
    top: 0.26rem;
    margin-right: 0.5rem;
}


/* Add spacing between datatables button groups */
div.dt-buttons {
    //float: right;
    margin-right: 20px;
}
/* Column visibility styling, see https://codepen.io/RedJokingInn/pen/RpddaE */
/* Remove the default 'active' colors */
a.dt-button.dropdown-item.buttons-columnVisibility.active {
    background-color: rgb(255, 255, 255);
    color: black;
}
/* Prepend item with a blue checkmark instead */
a.dt-button.dropdown-item.buttons-columnVisibility.active::before {
    content: '✔ ';
    color: var(--primary);
}
/* Pad with whitespaces when inactive, for alignment consistency */
a.dt-button.dropdown-item.buttons-columnVisibility::before {
    content: '\00a0\00a0\00a0\00a0 ';
}
/* Restore hover/focus */
a.dt-button.dropdown-item.buttons-columnVisibility.active:hover,
a.dt-button.dropdown-item.buttons-columnVisibility.active:focus,
a.dt-button.dropdown-item.buttons-columnVisibility:hover,
a.dt-button.dropdown-item.buttons-columnVisibility:focus {
    background-color: var(--light);
    color: #16181b;
}
/* shrink default padding from 1.5rem to 0.5 */
a.dt-button.dropdown-item.buttons-columnVisibility {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
}


div.row_spacer {
    height: 20px;
}
.glyphicon.spinning {
    animation: spin 1s infinite linear;
    -webkit-animation: spin2 1s infinite linear;
}

// Fit selectpicker into an input-group
.modal-body {
    margin: 0;
    padding: 0;
}


/***** Bootstrap-select *****/

/* We put muted items in dropdowns for 'none' values
   Bootstrap sets active items in light color for them to be readable on a primary background
   but the muted text color supersedes this and is too dark
*/
.dropdown-item:active .text-muted,
.dropdown-item.active .text-muted {
    color: #ddd !important;
}

/* We use data-content to set html content in bootstrap-select options. But this html also appears in the dropdown button
   (unless we also use the option's title attribute, but then no styling is possible and we want styling!)
   So we resort to hiding the unwanted elements of our html using css, by applying the only-option-text class to bootstrap
   select's dropdown button this way (in the binding initialization, so that we don't have to bother in the UI):
   .selectpicker('setStyle', 'only-option-text', 'add')
*/
.only-option-text small {
    display: none;
}


/* Panel layout mechanics
 */

.panel {
    position: fixed;
    top: 56px;
    bottom: 0;
    right: 0;
    transform: translateX(100%);
    /*transition: .3s ease-out; 
    z-index: 999; This is set dynamically */
    background-color: rgb(255, 255, 255);
}

.panel.active {
    transform: translateX(0%);
}

.panel-form {
    width: 60em;
}

.panel-select {
    width: 30em;
}

.panel-overlay {
    display: none;
    position: fixed;
    width: 100vw;
    height: 100vh;
    background: rgba(51, 51, 51, 0.7);
    /*z-index: 998; This is set dynamically */
    /* Note: transitions will not work if display: None. Do it dunamically if needed.
    opacity: 0;
    transition: opacity 2s ease-out;*/
}

.panel-overlay.active {
    display: block;
    /*opacity: 1;*/
}


/* hide the blue outline */
.no-focus-hint:focus {
    outline: 0 !important;
    border-color: initial;
    box-shadow: none;
}