/****** Size of the container when the windows size changes ******/
.custom-checkbox .custom-control-input:checked~.custom-control-label::before {
    background-color: var(--noactive-bg-color);
}

.custom-checkbox .custom-control-input:focus~.custom-control-label::after {
    outline: 0 !important;
    border: 0 !important;
    box-shadow: 0 0 0 0.1rem var(--active-bg-color) !important;
}
/* Jumbotron */

.jumbotron {
    margin-bottom: 20px;
    /*height: fit-content;*/
    min-height: inherit !important;
    /*overflow: auto;*/
}

#logo{
    display: block;
    width: 100% !important;
    height: auto !important;
}

#module{
    height: 100%;
    margin: 0px !important;
}

.contentJumbo {
     height: fit-content !important;
}

/* Sort and team dropdowns of the Project and System Boards (Generic/board_sort.html,
 * Generic/team_filter.html), the same as the System and Top Gate ones of the
 * FTA diagram: a bold title in front of a btn-primary dropdown, the current
 * choice highlighted like .fta_selected.
 *
 * .btn-primary carries a 10px bottom margin (control_panel.css), like the
 * "Create a new project" button beside them. The box of title + dropdown takes
 * it instead of its button, so title and button stay centred on each other and
 * level with that "Create" button. */
.board-dropdown {
    margin-bottom: 10px;
}

.board-dropdown .btn {
    margin-bottom: 0;
}

.board-dropdown-label {
    font-weight: bold;
    margin: 0 0.4rem 0 0;
    white-space: nowrap;
    cursor: default;
    user-select: none;
    pointer-events: none;
}

.board-dropdown .dropdown-item.active {
    background: var(--active-bg-color);
    color: white;
}

/* Box of the Sort. Not .d-flex: it would beat the .d-none that hides the one
 * of the System Board until a project is selected */
.board-sort {
    display: flex;
    align-items: center;
}

/* Button that reverses the order of the Sort, right after its dropdown */
.board-sort-reverse {
    margin-left: 0.25rem;
}

/* News board fills the full height of its jumbotron: the box is a flex column,
 * the heading keeps its natural size and #cont_news takes whatever height is
 * left, scrolling on its own. min-height:0 lets the flex child shrink below its
 * content so it actually overflows instead of stretching the jumbotron, and
 * overflow:hidden on the box clips it to exactly the 830px height — the news
 * can never spill past the jumbotron, only scroll inside #cont_news. */
#jumbo_news{
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#head_news{
    flex: 0 0 auto;
}

#cont_news{
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    width: 100%;
    /* Firefox: thin scrollbar, no visible track */
    scrollbar-width: thin;
    scrollbar-color: var(--noactive-bg-color) transparent;
}

/* Minimalist scrollbar for the news board: instead of a bar, show a single
 * little ball. The track is invisible and the thumb is painted with a radial
 * gradient — a solid circle in the middle, transparent everywhere else — so
 * whatever height the browser gives the thumb, only a small dot is visible,
 * gliding up and down as you scroll. It turns to the accent colour on hover. */
#cont_news::-webkit-scrollbar{
    width: 14px;
}

#cont_news::-webkit-scrollbar-track{
    background: transparent;
}

#cont_news::-webkit-scrollbar-thumb{
    background: radial-gradient(circle at center, var(--noactive-bg-color) 5px, transparent 6px);
    background-repeat: no-repeat;
    background-position: center;
}

#cont_news::-webkit-scrollbar-thumb:hover{
    background: radial-gradient(circle at center, var(--active-bg-color) 5px, transparent 6px);
    background-repeat: no-repeat;
    background-position: center;
}

#cont_history{
    overflow: auto;
    height: fit-content !important;
    width: 100%;
}

#cont_descr{
    overflow: auto;
    height: fit-content !important;
    width: 100%;
}

.border-left-primary {
    border-left: .25rem solid var(--active-bg-color)!important;
}

.border-left-success {
    border-left: .25rem solid var(--active-bg-color)!important;
}