/*
 * Forms are too dense otherweise
 */
.form-group.row {
    margin-top: 0.5rem;
}

.select2-selection__clear {
    margin-right: 2em !important;
    color: darkgrey !important;
    height: 36px !important;
    font-size: 20px !important;
}

.select2-container .select2-selection--single .select2-selection__rendered {
   z-index:1;
}

.content-page {
    /*min-height: calc(100vh - var(--ct-topbar-height) - 2px);*/
}

.leftside-menu {
    padding-bottom: calc(var(--ct-footer-height) + 2rem) !important;
}

/*
 * Hyper's scrollable-layout rule sizes #leftside-menu-container to
 * calc(100% - var(--ct-topbar-height)), assuming the sidebar logo
 * is the topbar's height. Custom branding logos taller than that
 * push logo + SimpleBar content past .leftside-menu's own box —
 * which then extends the document's scrollable area past body
 * height and appears as a "blank gap" below the sidebar when scrolled.
 *
 * Flexbox the sidebar so the logo takes its natural size and the
 * SimpleBar container is sized to "remaining space" via flex-grow.
 * overflow:hidden clips any residual SimpleBar inner growth so the
 * document scroll never extends past body height.
 */
html[data-layout-position=scrollable] .wrapper .leftside-menu {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
html[data-layout-position=scrollable] .wrapper .leftside-menu .logo {
    flex: 0 0 auto;
}
html[data-layout-position=scrollable] .wrapper .leftside-menu #leftside-menu-container {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    height: 0 !important;
}