/*  that calc() is ugly with the "- 9px" in it
    the problem is that 100vw does not take the scrollbar into consideration; if this changes in the future we can make this better
    it might cause horizontal scroll bars on some browsers (not on the ones I tested); if so, change 9px to 10px, etc...
*/
.container-break { width: 100vw; position: relative; left: calc(-1 * (50vw - 50%) - 9px); }

@media (max-width: 767px) {
    .container-break { position: relative; left: -15px; margin-right: -30px; }
}

.text-bold { font-weight: bold; }
.text-italic { font-style: italic; }
.text-underline { text-decoration: underline; }

.text-wordbreak-all { word-break: break-all; }

/* right align except in xs viewport (then no alignment) */
.text-right-notxs { text-align: right; }

@media (max-width: 768px) {
    .text-right-notxs { text-align: unset; }
}

.float-left { float: left; }
.float-right { float: right; }

.margin-bottom-extra-small { margin-bottom: 10px; }
.margin-bottom-small { margin-bottom: 15px; }
.margin-bottom-medium { margin-bottom: 30px; }
.margin-bottom-large { margin-bottom: 45px; }
.margin-bottom-none { margin-bottom: 0; }

.margin-top-extra-small { margin-top: 10px; }
.margin-top-small { margin-top: 15px; }
.margin-top-medium { margin-top: 30px; }
.margin-top-large { margin-top: 45px; }
.margin-top-none { margin-top: 0; }

.margin-none { margin: 0; }
.padding-none { padding: 0; }

.cursor-pointer { cursor: pointer; }
.cursor-grab { cursor: grab; }
.cursor-move { cursor: move; }
.cursor-not-allowed { cursor: not-allowed; }
.cursor-copy { cursor: copy; }
.cursor-right { cursor: e-resize; }
.cursor-left { cursor: w-resize; }

.display-none { display: none; }

a.no-underline { text-decoration: none; }

.img-rounded-bottom { border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; }

/* right-align tabs */
.nav-rtl { padding-left: 40px; padding-right: 0px; }
    .nav-rtl li { float: right; }

/* add to div.row to make all columns the same height */
.row-eq-height, .row-eq-height > div[class*='col-'] { display: flex; flex-wrap: wrap; }

/* smaller pills */
.nav-sm > li > a { padding: 4px 8px; font-size: 13px; }

/* all HRs in modals should go full width */
.modal .modal-body hr { margin-left: -15px; margin-right: -15px; }

ul.list-unstyled li { margin-bottom: 5px; }

/* add pipe delimiter to some lists */
ul.list-delimited li { padding: 0; }
    ul.list-delimited li:before { color: #ccc; content: "|"; padding: 0 6px 0 2px; }
    ul.list-delimited li:first-child:before { content: ""; }

/* same as .dl-horizontal but it doesn't collapse in xs */
.dl-horizontal-xs dt { float: left; width: 160px; clear: left; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-horizontal-xs dd { margin-left: 180px; }

@media (max-width: 768px) {
    .dl-horizontal-xs dt { width: 130px; }
    .dl-horizontal-xs dd { margin-left: 150px; }
}

/* an even-more-condensed version of bootstrap's table-condensed */
.table-verycondensed > thead > tr > th,
.table-verycondensed > tbody > tr > th,
.table-verycondensed > tfoot > tr > th,
.table-verycondensed > thead > tr > td,
.table-verycondensed > tbody > tr > td,
.table-verycondensed > tfoot > tr > td { padding: 2px; }

@media (max-width: 768px) {
    .table-verycondensed { font-size: .8em; }
}

.table-noborder > thead > tr > th, .table > tbody > tr > th, .table-noborder > tfoot > tr > th, .table-noborder > thead > tr > td, .table-noborder > tbody > tr > td, .table > tfoot > tr > td { border-top: 0; }

/* separate divs with a sort-of horizontal rule */
.rule-separated > div { border-top: 1px solid #eee; margin-top: 15px; padding-top: 15px; }
    .rule-separated > div:first-child { border-top: 0; margin-top: initial; padding-top: initial; }

.rule-separated.rule-separated-large > div { margin-top: 30px; padding-top: 30px; }
    .rule-separated.rule-separated-large > div:first-child { border-top: 0; margin-top: initial; padding-top: initial; }

/* add extra vertical space to some lists */
ul.list-padded li { margin: 5px 0; }

/* allow form-inline to work in xs viewport */
@media (max-width: 767px) {
    .form-inline-xs .form-control { display: inline-block; width: auto; vertical-align: middle; }
}

@media (max-width: 767px) {
    .form-inline-xs .form-group { display: inline-block; vertical-align: middle; }
}

#notifications { position: fixed; right: 10px; bottom: 0; width: 35%; cursor: pointer; }
    #notifications .notification { opacity: .9; }
        #notifications .notification .panel-body { font-size: 0.85em; }
        #notifications .notification:hover { opacity: 1; }

/* new row-table // my intention is to replace old tables with these */
.row-table .row { padding-bottom: 5px; padding-top: 5px; font-size: .95em; }
.row-table .row { padding-bottom: 5px; padding-top: 5px; font-size: .95em; }
.row-table .row-header { text-transform: uppercase; color: #00578e; font-weight: bold; }
    .row-table .row-header .sort { cursor: pointer; }
.row-table .row-subheader { margin-top: 8px; font-weight: bold; }

.row-table.row-table-small { font-size: .9em; }
.row-table .row.active { font-weight: bold; }

.row-table.row-table-striped .row:nth-child(2n-1) { background-image: linear-gradient(rgba(0, 0, 0, 0.2) 0 0); }
.row-table.row-table-striped .row-header.row:nth-child(2n) { background-image: none; }
.row-table.row-table-striped .row-subheader.row:nth-child(2n) { background-image: none; }

.row-table.row-table-lined .row { border-bottom: 1px solid #ddd; }
    .row-table.row-table-lined .row:last-child { border-bottom: 0; }
.row-table.row-table-lined .row-header { border-bottom: 2px solid #ddd; }

.row-table .glyphicon { cursor: pointer; }


/* special dark button */
.btn-dim { color: #000; background-color: #bbb; border-color: #aaa; }
    .btn-dim:focus,
    .btn-dim.focus { color: #000; background-color: #aaa; border-color: #888; }
    .btn-dim:hover { color: #000; background-color: #aaa; border-color: #999; }
    .btn-dim:active,
    .btn-dim.active,
    .open > .dropdown-toggle.btn-dim { color: #000; background-color: #aaa; background-image: none; border-color: #999; }
        .btn-dim:active:hover,
        .btn-dim.active:hover,
        .open > .dropdown-toggle.btn-dim:hover,
        .btn-dim:active:focus,
        .btn-dim.active:focus,
        .open > .dropdown-toggle.btn-dim:focus,
        .btn-dim:active.focus,
        .btn-dim.active.focus,
        .open > .dropdown-toggle.btn-dim.focus { color: #000; background-color: #999; border-color: #888; }
    .btn-dim.disabled:hover,
    .btn-dim[disabled]:hover,
    fieldset[disabled] .btn-dim:hover,
    .btn-dim.disabled:focus,
    .btn-dim[disabled]:focus,
    fieldset[disabled] .btn-dim:focus,
    .btn-dim.disabled.focus,
    .btn-dim[disabled].focus,
    fieldset[disabled] .btn-dim.focus { background-color: #bbb; border-color: #aaa; }
    .btn-dim .badge { color: #bbb; background-color: #000; }


.kfs-grid { display: grid; }
    .kfs-grid > * { text-overflow: ellipsis; position: relative; white-space: nowrap; overflow: hidden; background-color: #212629; padding: 5px 4px 3px 4px; }
    .kfs-grid .col { font-size: 1.1em; font-weight: bold; padding: 4px; margin-bottom: 7px; position: relative; }
        .kfs-grid .col.sortable { cursor: pointer; }
    .kfs-grid input[type=checkbox] { margin: 11px; position: relative; top: -3px; }
    .kfs-grid > a { display: inherit; }
    .kfs-grid .glyphicon { font-size: 1.1em; text-align: center; cursor: pointer; margin-top: -1px; line-height: 1.3em; }
    .kfs-grid * .glyphicon { top: 2px; }
    .kfs-grid .sortable .glyphicon.glyphicon-chevron-up, .kfs-grid .sortable .glyphicon.glyphicon-chevron-down { position: absolute; font-size: 1em; top: 9px; padding-left: 5px; z-index: 10; }
    .kfs-grid .sortable.icon .glyphicon:nth-child(2) { display: none; }
    .kfs-grid .hover { background-color: #2e3539; cursor: pointer; }
    .kfs-grid .disabled { color: #888; }
    .kfs-grid .active { font-weight: bold; }

    /* thwart any html tags inside the grid */
    .kfs-grid > div * { margin: 0 !important; }

.kfs-grid-light > * { background-color: #Fff; border-top: 1px solid #eee; }
.kfs-grid-light .col { margin-bottom: 4px; border-top: 0; }

.kfs-grid-small { font-size: .9em; }

@media (max-width: 767px) {
    .kfs-grid input[type=checkbox] { margin: 6px; }
}

.kfs-nav { position: fixed; top: 0; height: 50px; left: 0; right: 0; z-index: 100; padding: 0 10px; display: flex; justify-content: space-between; align-items: center; background-color: #656a6d; color: #fff; }
    .kfs-nav > * { margin: 0 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    .kfs-nav .kfs-nav-brand { font-size: 1.2em; }
    .kfs-nav .kfs-nav-spacer { flex-grow: 100; flex-shrink: 1; min-width: 0; margin: 0; }
    .kfs-nav .glyphicon { font-size: 1.4em; top: 0; margin: 0; padding: 10px 10px; cursor: pointer; }
    .kfs-nav a { display: contents; }

@media (max-width: 767px) {
    .kfs-nav { padding: 5px; }
        .kfs-nav > * { margin: 0 5px; }
        .kfs-nav .kfs-nav-brand { font-size: 1.1em; }
        .kfs-nav .glyphicon { font-size: 1.2em; padding: 0; width: 28px; }
}

/* an example can be found in the MPS General project */
.glyph-checkbox { position: relative; }
    .glyph-checkbox input { opacity: 0; cursor: pointer; }
    .glyph-checkbox span { position: absolute; left: 0; display: none; }
        .glyph-checkbox span:nth-child(1) { display: block; }
    .glyph-checkbox:has(input:checked) span:nth-child(1) { display: none; }
    .glyph-checkbox:has(input:checked) span:nth-child(2) { display: block; }

/* push carousel caption below the image in md, sm, and xs [#8977] */
@media (max-width: 1199px) {
    .carousel .carousel-caption { position: relative; right: unset; left: unset; bottom: unset; color: unset; text-shadow: unset; border-top-left-radius: 0; border-top-right-radius: 0; }
    .carousel .carousel-control { background-image: none !important; bottom: 30%; }
}