html, body {
    /*height: 100%;*/
}

.full-width {
    width: 100%;
}

select[disabled] {
    background-color: #e9ecef;
}


input[disabled] {
    background-color: #e9ecef;
}

.dropdown-submenu:hover div {
    display: block;
}

.dropdown-submenu div {
    display: none;
}

.dropdown-submenu {
    position: relative;
}

.dropdown-submenu > .dropdown-menu {
    top: calc(-0.5rem - 1px);
    right: calc(100% - 4px);
    left: auto;
    margin: 0;
}

.dropdown-submenu-icon {
    height: 18px !important;
    width: 18px !important;
    float: inline-end;
}

.wrapper {
    position: relative;
    margin: 0 auto;
    overflow: hidden;
    padding: 5px;
    height: 50px;
}

.btncustom {
    width: 114px;
}


.btn-sm {
    background-color: rgba(30, 116, 202, 0.25);
}

.main_container {
}

.nav_menu {
    float: left;
    background: #EDEDED;
    border-bottom: 1px solid #D9DEE4;
    margin-bottom: 2px;
    width: 100%;
    position: relative
}

@media (min-width: 480px) {
    .nav_menu {
        position: static
    }
}


.title_left {
    float: left;
    display: block;
    margin-bottom: 12px;
    margin-top: 10px;
    color: #2A3F54;
}


.breadcrumb {
    background-color: #fff !important;
    border-radius: .25rem !important;
}

body {
    background-color: #F7F7F7;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.471;
    color: rgba(0,0,0,0.8) !important;
}

.main_container .top_nav {
    display: block;
    margin-left: 230px
}


.fixed_height_200 {
    height: 200px
}


.fixed_height_175 {
    max-height: 175px;
    min-height: 120px;
}

h1,
.h1,
h2,
.h2,
h3,
.h3 {
    margin-top: 10px;
    margin-bottom: 10px
}

a {
    color: rgba(0,0,0,0.8);
    text-decoration: none
}

    a,
    a:visited,
    a:focus,
    a:active,
    :visited,
    :focus,
    :active {
        outline: 0
    }

        a:hover,
        a:focus {
            text-decoration: none
        }

.toggle {
    float: left;
    margin: 0;
    padding-top: 8px;
    width: 30px;
}

    .toggle a {
        padding: 8px;
        margin: 0;
        cursor: pointer;
    }

        .toggle a i {
            font-size: 20px
        }

}







.tooltip {
    display: block !important
}

    .tooltip.right {
        padding: 5px 0;
        margin-top: 3px;
    }



.expand {
    display: block;
    text-decoration: none;
    color: #555;
    cursor: pointer
}

    .expand h2 {
        width: 85%;
        float: left
    }

h2 {
    font-size: 30px;
    font-weight: 400
}

#left,
#right {
    display: table
}

td span {
    line-height: inherit
}

.bulk-actions {
    display: none
}

table.jambo_table {
    border: 1px solid rgba(221, 221, 221, 0.78)
}

    table.jambo_table thead {
        background: rgba(52, 73, 94, 0.94);
        color: #ECF0F1
    }

    table.jambo_table tbody tr:hover td {
        background: rgba(38, 185, 154, 0.07);
        border-top: 1px solid rgba(38, 185, 154, 0.11);
        border-bottom: 1px solid rgba(38, 185, 154, 0.11)
    }

    table.jambo_table tbody tr.selected {
        background: rgba(38, 185, 154, 0.16)
    }

        table.jambo_table tbody tr.selected td {
            border-top: 1px solid rgba(38, 185, 154, 0.4);
            border-bottom: 1px solid rgba(38, 185, 154, 0.4)
        }


span.right {
    float: right;
    font-size: 14px !important
}

a:focus {
    outline: none
}

.left {
    float: left
}

.alignleft {
    float: left;
    margin-right: 15px
}

.alignright {
    float: right;
    margin-left: 15px
}



.form_wizard .stepContainer {
    display: block;
    position: relative;
    margin: 0;
    padding: 0;
    border: 0 solid #CCC;
    overflow-x: hidden
}

.wizard_horizontal ul.wizard_steps {
    display: table;
    list-style: none;
    position: relative;
    width: 100%;
    margin: 0px 0 5px;
}

    .wizard_horizontal ul.wizard_steps li {
        display: table-cell;
        text-align: center
    }

        .wizard_horizontal ul.wizard_steps li a,
        .wizard_horizontal ul.wizard_steps li:hover {
            display: block;
            position: relative;
            filter: alpha(opacity=100);
            opacity: 1;
            color: #666
        }

            .wizard_horizontal ul.wizard_steps li a:before {
                content: "";
                position: absolute;
                height: 4px;
                background: #ccc;
                top: 20px;
                width: 100%;
                z-index: 3;
                left: 0
            }

            .wizard_horizontal ul.wizard_steps li a.disabled .step_no {
                background: #ccc
            }

            .wizard_horizontal ul.wizard_steps li a .step_no {
                width: 32px;
                line-height: 32px;
                border-radius: 100px;
                display: block;
                margin: 0 auto 5px;
                position: relative;
                z-index: 5;
            }

            .wizard_horizontal ul.wizard_steps li a.selected:before,
            .step_no {
                background: #34495E;
                color: #fff
            }

            .wizard_horizontal ul.wizard_steps li a.done:before,
            .wizard_horizontal ul.wizard_steps li a.done .step_no {
                background: #1ABB9C;
                color: #fff
            }

        .wizard_horizontal ul.wizard_steps li:first-child a:before {
            left: 50%
        }

        .wizard_horizontal ul.wizard_steps li:last-child a:before {
            right: 50%;
            width: 50%;
            left: auto
        }

.wizard_verticle .stepContainer {
    width: 80%;
    float: left;
    padding: 0 10px
}

.actionBar {
    width: 100%;
    padding: 10px 0px;
    text-align: right;
}

    .actionBar .buttonDisabled {
        cursor: not-allowed;
        pointer-events: none;
        opacity: .65;
        filter: alpha(opacity=65);
        box-shadow: none
    }

    .actionBar a {
        margin: 0 3px
    }




 

.form_wizard .loader {
    display: none
}

.form_wizard .msgBox {
    display: none
}




.alert-success {
    color: #ffffff;
    background-color: rgba(38, 185, 154, 1);
    border-color: rgba(38, 185, 154, 1)
}

.alert-info {
    color: #E9EDEF;
    background-color: rgba(52, 152, 219, 1);
    border-color: rgba(52, 152, 219, 1)
}

.alert-warning {
    color: #E9EDEF;
    background-color: rgba(243, 156, 18, 1);
    border-color: rgba(243, 156, 18, 1)
}

.alert-danger,
.alert-error {
    color: #E9EDEF;
    background-color: rgba(231, 76, 60, 1);
    border-color: rgba(231, 76, 60, 1)
}


.new-section-xxs {
    margin: 4px 0;
    min-height: 1px;
    border-top: 1px solid #ababb3
}

.new-section-xs {
    margin: 12px 0;
    min-height: 1px
}

.new-section-sm {
    margin: 25px 0;
    min-height: 1px
}

.new-section-md {
    margin: 50px 0;
    min-height: 1px
}

.new-section-lg {
    margin: 100px 0;
    min-height: 1px
}

.new-section-xl {
    margin: 150px 0;
    min-height: 1px
}

/*custom colours for header and footer of cards*/
.card-custom-header {
    background-color: #ededed !important;
    color: black;
    padding: .23rem 1rem;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"
}

/*custom colours for card-body*/
.card-body-color {
    background-color: white !important;
    padding: 8px 1.25rem;
}

/*custom card height*/
.card-fixed-height {
    height: 250px !important
}

.card-scrollable {
    overflow-y: scroll
}

.color-footer {
    background-color: #57789b !important;
    color: white
}

.font-small {
    font-size: 11px
}

.dropdown-menu {
    font-size: 12px !important;
    z-index: 9998;
}

.nav-link-padding-lr {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
}

.display-none {
    display: none;
}

.form-control-size {
    width: 127px !important;
    height: 22px !important;
    margin-bottom: 5px !important;
}

.form-control-label-margin {
    margin-bottom: 0px !important;
    margin-top: 3px !important;
}

.display-block {
    display: block;
}

.padding-collapseButton {
    padding: 0.45rem
}

.toolbarbtn {
    font-size: 12px;
    background-color: #f7f7f7;
}

    .toolbarbtn:hover {
        background-color: #DDDDDD !important;
        outline: 0 !important;
    }

    .toolbarbtn:focus {
        outline: 0 !important;
        box-shadow: 0 0 0 0rem !important;
    }

.padding-toolbar {
    padding: 0rem 1.25rem;
}

.dropdown-divider {
    margin: 0.15rem 0 !important;
}

.flex-nowrap {
    overflow-y: hidden
}

.btn-custom-height {
    height: 38px;
}

.btn-browse-width {
    width: 33px
}

.table-col-width {
    width: 250px;
}

.table-col {
    height: 200px;
    padding-right: 0rem;
    padding-top: 0rem;
    margin-top: 0rem;

}

.nav-tabs-color {
    background-color: #ededed;
}

.main_container .cache_nav {
    display: block;
    margin-left: 230px
}

.nav_cache {
    top: 50px;
}

    .nav_cache .slide {
        margin-left: 9rem
    }

.top-card {
    margin-top: 57px;
}

.cache-name-bar {
    background-color: #fff !important;
    /*border-bottom: none !important;*/
}

.button-text {
    text-align: center;
    line-height: 1rem;
}

    .button-text:hover {
        cursor: pointer;
    }

.form-group {
    margin-bottom: 7px
}

.btn-width {
    width: 129px
}

.subheading {
    padding-left: 34px;
}

.margin-cardbody-bottom {
    margin-bottom: 10px !important;
}

.margin-cardbody-y {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
}

.fixed_height_400 {
    height: 400px;
}

.w-15 {
    width: 15% !important;
}

.w-12 {
    width: 12% !important;
}



.file-btn {
    height: 25px;
    width: 28px;
}

.textbox-file {
    height: 26px;
}

.actionBarTop {
    width: 100%;
    /*border-top: 1px solid #ddd;*/
    padding: 10px 0px;
    text-align: right;
}

.form-custom {
    height: 270px !important;
    width: 542px !important;
    overflow-y: scroll;
}

/*Dynamic adding rows table*/
.table-wrapper {
    width: 700px;
    margin: 30px auto;
    background: #fff;
    padding: 20px;
    box-shadow: 0 1px 1px rgba(0,0,0,.05);
}



table.tablecustom tr th, table.table tr td {
    border-color: #e9e9e9;
    vertical-align: middle;
}

.table > tbody > tr.active > td, .table > tbody > tr.active > th, .table > tbody > tr > td.active, .table > tbody > tr > th.active, .table > tfoot > tr.active > td, .table > tfoot > tr.active > th, .table > tfoot > tr > td.active, .table > tfoot > tr > th.active, .table > thead > tr.active > td, .table > thead > tr.active > th, .table > thead > tr > td.active, .table > thead > tr > th.active {
    background-color: #f5f5f5;
}

table.tablecustom th i {
    cursor: pointer;
}

table.tablecustom th:last-child {
    width: 100px;
}

table.tablecustom td a {
    cursor: pointer;
    display: inline-block;
    margin: 0 5px;
    min-width: 24px;
}

    table.tablecustom td a.add {
        color: #27C46B;
    }

    table.tablecustom td a.edit {
        color: #FFC107;
    }

    table.tablecustom td a.delete {
        color: #E34724;
    }

table.tablecustom td i {
    font-size: 19px;
}

table.tablecustom td a.add i {
    font-size: 24px;
    margin-right: -1px;
    position: relative;
    top: 3px;
}

table.tablecustom .form-control {
    height: 32px;
    line-height: 32px;
    box-shadow: none;
    border-radius: 2px;
}

    table.tablecustom .form-control.error {
        border-color: #f50000;
    }

table.tablecustom td .add {
    display: none;
}

.font-sm {
    font-size: 13px;
}

.mb-minus-9 {
    margin-bottom: -9px;
}

.btn-link {
    border: none;
}

.custom_tree_height {
    height: 150px;
}

.custom_tree_height2 {
    height: 130px;
}

.custom_tree_heighiest {
    height: 350px;
}

.indicator {
    margin-right: 5px;
}

.custom_input_file {
    width: 100% !important;
}

.border-rectangular {
    /*padding: .375rem .75rem;*/
    font-size: 0.9rem;
    line-height: 1.6 !important;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

    .border-rectangular:focus, input:focus {
        color: #495057;
        background-color: #fff;
        border-color: #80bdff;
        outline: 0;
        box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
    }

input.custom-radio {
}

    input.custom-radio:focus {
        outline-width: 2px;
        outline-style: solid;
        outline-color: Highlight;
    }

.btn-tiny {
    font-size: 0.75rem !important;
    width: 4rem !important;
    height: 2rem !important;
}


.btn-close {
}

    .btn-close:hover {
        cursor: pointer;
        border-radius: 25px;
        background-color: #e8e8e8fa;
    }

a.buttonCancel {
    color: #007bff;
    background-color: transparent;
    margin-right: 2rem;
    text-decoration: underline;
}

    a.buttonCancel:focus {
        outline-width: 2px;
        outline-style: solid;
        outline-color: Highlight;
    }

button.btn-okcancel {
    font-size: 0.75rem;
    background-color: #e9ecef;
    border-color: #ced4da;
    font-weight: bold;
}

.fa-custom-small {
    font-size: 1.25em;
}

.addprovider-btn {
    height: 27px !important;
}

#selecteduserscardbody::-webkit-scrollbar {
    width: 7px;
}

#selectedUsersselect::-webkit-scrollbar {
    width: 7px;
}

#availableuserscardbody::-webkit-scrollbar {
    width: 7px;
}

#securityUserTree::-webkit-scrollbar {
    width: 7px;
}

#selectedUsersselect {
    height: 200px;
    width: 100%;
    border: none;
}

a.disabled {
    pointer-events: none;
    cursor: default;
}

.jstree-wholerow-ul {
    position: unset !important;
    display: unset !important;
    min-width: unset !important;
}

.btn-deploy {
    background-color: #e9ecef !important;
    border-color: #aaa !important;
    font-size: 0.75rem !important;
}

.wh-22 {
    height: 22px !important;
    width: 22px !important;
}

.wh-18 {
    height: 18px !important;
    width: 18px !important;
}

.wh_26 {
    height: 26px !important;
    width: 26px !important;
}

.wh_24 {
    height: 24px !important;
    width: 24px !important;
}

.wh_28 {
    height: 28px !important;
    width: 28px !important;
}


.add-row-table-btn-padding {
    padding: .15rem !important;
}

.svg-icon-color-light {
    fill: white;
}

.custom-hr {
    border: none;
    border-left: 1px solid hsla(200, 10%, 50%,100);
    width: 1px;
}

.form-conrtol-custom {
    font-size: 0.9rem !important;
    line-height: 1.6 !important;
    padding: 0 0 0 0.3rem !important;
}

.top-card_local_cache {
    margin-top: 48px;
}

.divider-custom {
    border-left: 1px solid #38536b4d;
    height: 27px;
    margin: 3px;
}

.nav-link.active {
    font-weight: bold;
}

@media screen and (min-width:720px) and (min-height:1280) {
}

.disabledCheckbox {
    opacity: 0.5;
}

/*.red{
    color:red;
}

.blue {
    color: blue;
}*/

.unsupported-browser {
    background-color: rgba(255, 238, 186, 1);
    border-bottom: 1px solid #b3a569;
    color: #211e14;
}

.container-lg {
    max-width: 1012px;
}

.container-lg, .container-xl {
    margin-left: auto;
    margin-right: auto;
}

.py-2 {
    padding-top: 8px !important;
}

.p-responsive {
    padding-left: 16px !important;
    padding-right: 0px !important;
}

.flex-auto {
    flex: 1 1 auto !important;
}

.nav_cache_custom {
    top: 85px;
}

.top_IE {
    top: 50px;
}

.banner_style {
    height: 34px;
    margin-top: 54px;
    margin-left: 44px;
    width: 97%;
}

.wh_custom
{
    height: 24px !important;
    width: 17px !important;
}

.custom-width {
    width: 100% !important;
}

.licenseStatusExpired {
    color: red !important;
}

.licenseStatus {
    color: rgba(0,0,0,0.8) !important;
}

.alert-success-default {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
}

.alert-danger-default {
    color: #842029;
    background-color: #f8d7da;
    border-color: #f5c2c7;
}
/* ===== Bootstrap 5 migration compatibility layer =====
   Classes removed in Bootstrap 5 that are still used in markup.
   Rules replicate the Bootstrap 4.6 behavior. */
.form-row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -5px;
    margin-left: -5px;
}
.form-row > .col,
.form-row > [class*="col-"] {
    padding-right: 5px;
    padding-left: 5px;
}

.input-group-prepend,
.input-group-append {
    display: flex;
}
.input-group-prepend .btn,
.input-group-append .btn {
    position: relative;
    z-index: 2;
}
.input-group-prepend { margin-right: -1px; }
.input-group-append { margin-left: -1px; }
.input-group > .input-group-append > .btn,
.input-group > .input-group-append > .input-group-text {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.input-group > .input-group-prepend > .btn,
.input-group > .input-group-prepend > .input-group-text {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.input-group > .form-control:not(:last-child),
.input-group > .form-select:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.form-control {
    &:disabled,
    &[readonly] {
        background-color: var(--bs-secondary-bg);
    }
}
/* ===== Bootstrap 4 visual parity =====
   Restores the exact pre-upgrade look (Bootstrap 4.0 defaults) on top of
   Bootstrap 5.3, so the upgraded Web Manager renders identically to the
   previous release. */
:root {
    --bs-border-radius: .25rem;
    --bs-border-radius-sm: .2rem;
    --bs-border-radius-lg: .3rem;
    --bs-link-color: #007bff;
    --bs-link-hover-color: #0056b3;
}
/* BS4 parity: BS4 exposed unprefixed theme vars on :root; BS5 only has --bs-*.
   style.css still references these (e.g. the active monitor dashboard pill). */
:root {
    --dark: #343a40;
    --light: #f8f9fa;
    --gray: #6c757d;
    --green: #28a745;
    --yellow: #ffc107;
    --red: #dc3545;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
/* Plain links keep the app's own colors (custom.css `a` rule above);
   BS5 link vars are mapped to BS4 blue for components that use them. */
/* BS4 dropdown metrics */
.dropdown-menu {
    --bs-dropdown-item-padding-x: 1.5rem;
    --bs-dropdown-border-radius: .25rem;
}
/* BS4 badge metrics */
.badge {
    padding: .25em .4em;
}
/* BS4 table look: row separators on top, 2px header underline, body text color */
.table {
    --bs-table-color: rgba(0, 0, 0, 0.8);
}
.table > :not(caption) > * > * {
    padding: .3rem;
    border-bottom-width: 0;
    border-top: 1px solid #dee2e6;
}
.table > thead > * > th {
    border-bottom: 2px solid #dee2e6;
}
/* BS4 theme-color buttons (BS5 shifted primary/success/info) */
.btn-primary {
    --bs-btn-bg: #007bff; --bs-btn-border-color: #007bff;
    --bs-btn-hover-bg: #0069d9; --bs-btn-hover-border-color: #0062cc;
    --bs-btn-active-bg: #0062cc; --bs-btn-active-border-color: #005cbf;
    --bs-btn-disabled-bg: #007bff; --bs-btn-disabled-border-color: #007bff;
}
.btn-success {
    --bs-btn-bg: #28a745; --bs-btn-border-color: #28a745;
    --bs-btn-hover-bg: #218838; --bs-btn-hover-border-color: #1e7e34;
    --bs-btn-active-bg: #1e7e34; --bs-btn-active-border-color: #1c7430;
    --bs-btn-disabled-bg: #28a745; --bs-btn-disabled-border-color: #28a745;
}
.btn-info {
    --bs-btn-color: #fff; --bs-btn-bg: #17a2b8; --bs-btn-border-color: #17a2b8;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #138496; --bs-btn-hover-border-color: #117a8b;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #117a8b; --bs-btn-active-border-color: #10707f;
    --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #17a2b8; --bs-btn-disabled-border-color: #17a2b8;
}
/* BS4 alert palette */
.alert-success { color: #155724; background-color: #d4edda; border-color: #c3e6cb; }
.alert-danger  { color: #721c24; background-color: #f8d7da; border-color: #f5c6cb; }
.alert-warning { color: #856404; background-color: #fff3cd; border-color: #ffeeba; }
.alert-info    { color: #0c5460; background-color: #d1ecf1; border-color: #bee5eb; }
/* BS4 muted text */
.text-muted { color: #6c757d !important; }
/* BS4 navbar height (measured against a BS4 build: 52px, which is also BS5's natural
   height here; pinned so a notification badge can't change it) */
#PrimaryNav { height: 52px; }
/* BS4 parity: BS4 padded every .col-* (15px + 1px min-height); BS5 only pads columns
   inside a .row. The page title bars put cols straight in <nav>, so without this the
   title hugs the left edge and the float-end breadcrumb runs under the scrollbar. */
.cache-name-bar nav > [class*="col-"] {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}
/* BS4 parity: 30px grid gutter (BS5: 24px) - row margins, column and container padding */
.row, .container, .container-fluid { --bs-gutter-x: 30px; }
/* BS4 parity: card spacing (BS5: 1rem body; .5rem x 1rem header; .5rem under .card-title).
   Also set on the card parts themselves: the app uses .card-body/.card-header outside a
   .card, where BS5's padding vars would otherwise be undefined (0) - BS4 padded them anyway. */
.card, .card-body, .card-header, .card-footer {
    --bs-card-spacer-y: 1.25rem;
    --bs-card-spacer-x: 1.25rem;
    --bs-card-cap-padding-y: .75rem;
    --bs-card-cap-padding-x: 1.25rem;
    --bs-card-title-spacer-y: .75rem;
}
/* BS4 parity: every column had min-height 1px, so an empty column still occupies a line */
.col, [class^="col-"], [class*=" col-"] { min-height: 1px; }
/* BS4 parity: BS4 gave every column 15px side padding; BS5 pads only children of .row.
   Zero specificity (:where), like BS4's single-class rule, so any component or app rule
   on the same element (.card-body, .form-control, padding utilities...) still wins. */
:where(:not(.row):not(.form-row) > :is(.col, .col-auto, [class*="col-1"], [class*="col-2"], [class*="col-3"],
    [class*="col-4"], [class*="col-5"], [class*="col-6"], [class*="col-7"], [class*="col-8"], [class*="col-9"],
    [class*="col-sm-"], [class*="col-md-"], [class*="col-lg-"], [class*="col-xl-"])) {
    padding-right: 15px;
    padding-left: 15px;
}
/* BS4 reboot gave labels a .5rem bottom margin (except check/col-form labels). The
   settings forms float labels inside flex columns, so it sets their row heights. */
label { margin-bottom: .5rem; }
.form-check-label, .col-form-label { margin-bottom: 0; }
/* BS4 parity: native checks absolutely placed in a 1.25rem indent; BS5 draws its own,
   floats them in a 1.5em indent and gives .form-check a 1.5rem min-height */
.form-check { position: relative; min-height: 0; padding-left: 1.25rem; margin-bottom: 0; }
.form-check .form-check-input { float: none; position: absolute; margin-top: .3rem; margin-left: -1.25rem; }
.form-check-input { appearance: auto; }
.form-check-inline { display: inline-flex; align-items: center; padding-left: 0; margin-right: .75rem; }
.form-check-inline .form-check-input { position: static; margin: 0 .3125rem 0 0; }
/* BS4 parity: hr was a 0-height content-box line in a faint border color; BS5 makes it
   border-box (about 3px tall as a flex item) in the text color at 25% opacity */
hr { box-sizing: content-box; height: 0; overflow: visible; opacity: 1; color: rgba(0, 0, 0, .1); }
/* BS4 parity: lists kept the browser's 40px indent; BS5's reboot sets 2rem (32px), which
   shifts e.g. the wizard step bar. Classed lists (.nav, .breadcrumb, .list-unstyled...) and
   padding utilities still win. */
ol, ul { padding-left: 2.5rem; }
/* BS4 parity: dropdown arrows. BS5 sets appearance:none on .form-control (it expects
   selects to use .form-select, which draws its own arrow and needs 2.25rem right padding);
   the app's selects use .form-control with p-0/h-100/app height classes, so restore the
   native arrow BS4 showed rather than switching them to .form-select. */
select.form-control { appearance: auto; }
/* BS4 parity: "Browse" buttons (.input-group-text.btn) sit directly in .input-group-sm, so
   BS5 applies its small add-on sizing; BS4 only sized append/prepend children */
.input-group-sm > .btn-choose { padding: .375rem .75rem; font-size: .75rem; }
/* BS4 parity: disabled add-on buttons (.input-group-text.btn - Browse, Add Selected Datatypes,
   Move Up...). Plain BS5 .btn leaves --bs-btn-disabled-* undefined, so :disabled resolved to a
   transparent background and a currentColor (dark) border; BS4 kept the add-on grey and only
   faded it (opacity .65). */
:where(.btn) {
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: transparent;
    --bs-btn-disabled-color: var(--bs-btn-color);
}
.input-group-text.btn {
    --bs-btn-disabled-bg: #e9ecef;
    --bs-btn-disabled-border-color: #ced4da;
    --bs-btn-disabled-color: #495057;
}
/* BS4 breadcrumb metrics: BS5 zeroed the padding, floats the "/" divider with its
   spacing moved onto the item, and darkened it to near-invisible on the header */
.breadcrumb { padding: .75rem 1rem; }
.breadcrumb-item + .breadcrumb-item { padding-left: 0; }
.breadcrumb-item + .breadcrumb-item::before {
    float: none;
    display: inline-block;
    padding: 0 .5rem;
    color: #6c757d;
}
/* BS4 parity: .btn-link was fully styled without needing .btn (color + no underline) */
.btn-link { color: #007bff; text-decoration: none; }
.btn-link:hover { color: #0056b3; text-decoration: underline; }
/* BS4 parity: striped/hover rows used inherited text color, not emphasis black */
.table {
    --bs-table-striped-color: rgba(0, 0, 0, 0.8);
    --bs-table-hover-color: rgba(0, 0, 0, 0.8);
    --bs-table-active-color: rgba(0, 0, 0, 0.8);
}
/* BS4 parity: cells were transparent, letting thead/tr backgrounds show through */
.table { --bs-table-bg: transparent; }
/* BS4 parity: dark table header. The legacy jambo_table thead background
   shows through transparent cells; BS5 sets th color per-cell, so the light
   header text must be explicit (BS4 let it inherit from thead). */
table.jambo_table thead th {
    color: #ECF0F1;
    background-color: transparent;
}
/* BS4 parity: disabled buttons kept a transparent border and their fill;
   BS5 paints a visible border and clears the background. */
.toolbarbtn:disabled, .toolbarbtn.disabled,
.btn-okcancel:disabled, .btn-okcancel.disabled {
    border-color: transparent;
    color: rgba(16, 16, 16, 0.3);
}
.toolbarbtn:disabled, .toolbarbtn.disabled { background-color: #f7f7f7; }
.btn-okcancel:disabled, .btn-okcancel.disabled { background-color: #e9ecef; }
/* BS4 parity: toolbar button text was black (BS5 sets #212529 via btn vars) */
.toolbarbtn { color: #000; }
/* BS4 parity: form control borders/text and focus ring */
.form-control, .form-select {
    border-color: #ced4da;
    color: #495057;
}
.form-control:focus, .form-select:focus {
    color: #495057;
    border-color: #80bdff;
    box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25);
}
/* BS4 parity: input group addon fill */
.input-group-text {
    background-color: #e9ecef;
    border-color: #ced4da;
}
/* BS4 parity: active tab text color */
.nav-tabs {
    --bs-nav-tabs-link-active-color: #495057;
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: #495057;
}
/* BS4 parity: Bootstrap 5 gives every direct child of .row "width: 100%" plus
   gutter padding; Bootstrap 4 left non-column children content-sized. The app
   frequently puts plain elements (imgs, headings, labels) straight inside
   .row (e.g. collapsible panel headers), which BS5 stacks vertically. */
.row > *:not(.col):not([class*="col-"]) {
    width: auto;
}
.row > .input-group:not(.col):not([class*="col-"]) {
    width: 100%;
}
/* Zero only the gutter padding BS5 adds (.row > * pads by --bs-gutter-x), so the
   element's own padding still applies - e.g. a .card-body placed directly in a .row
   keeps its 20px, as in BS4. Nested .rows keep their gutter for their own columns
   and just get BS4's zero padding. */
.row > *:not(.col):not([class*="col-"]):not(.row) {
    --bs-gutter-x: 0;
}
.row > .row:not(.col):not([class*="col-"]) {
    padding-right: 0;
    padding-left: 0;
}
/* The rule above outranks legacy padding classes on row children; re-assert
   the collapse-chevron padding so the arrow glyph keeps its BS4 size. */
.row > .padding-collapseButton {
    padding: 0.45rem !important;
}

/* BS4 parity: nav-tab links (incl. the vertical settings sidebar) inherited the
   app's dark anchor color; BS5 paints them with the blue link color var. */
.nav-tabs .nav-link { color: rgba(0, 0, 0, 0.8); }
.nav-tabs .nav-link:hover { color: rgba(0, 0, 0, 0.8); }
/* BS4 parity: monitor dashboard pills inherited the app's dark anchor color */
.nav-pills .nav-link, .nav-pills .nav-link:hover { color: rgba(0, 0, 0, 0.8); }

/* BS4 parity: grid col-* classes placed directly on form controls, or on tables inside a flex .row
   (BS4 sized those via flex-basis; elsewhere its .table max-width:100% won), acted as a
   max-width cap (BS4 cols used max-width; BS5 cols use width, which the later
   .form-control { width:100% } rule overrides - controls stretched full width). */
.form-control.col-1, .form-select.col-1, .row > .table.col-1 { max-width: 8.333333%; }
.form-control.col-2, .form-select.col-2, .row > .table.col-2 { max-width: 16.666667%; }
.form-control.col-3, .form-select.col-3, .row > .table.col-3 { max-width: 25.0%; }
.form-control.col-4, .form-select.col-4, .row > .table.col-4 { max-width: 33.333333%; }
.form-control.col-5, .form-select.col-5, .row > .table.col-5 { max-width: 41.666667%; }
.form-control.col-6, .form-select.col-6, .row > .table.col-6 { max-width: 50.0%; }
.form-control.col-7, .form-select.col-7, .row > .table.col-7 { max-width: 58.333333%; }
.form-control.col-8, .form-select.col-8, .row > .table.col-8 { max-width: 66.666667%; }
.form-control.col-9, .form-select.col-9, .row > .table.col-9 { max-width: 75.0%; }
.form-control.col-10, .form-select.col-10, .row > .table.col-10 { max-width: 83.333333%; }
.form-control.col-11, .form-select.col-11, .row > .table.col-11 { max-width: 91.666667%; }
.form-control.col-12, .form-select.col-12, .row > .table.col-12 { max-width: 100.0%; }
@media (min-width: 576px) {
    .form-control.col-sm-1, .form-select.col-sm-1, .row > .table.col-sm-1 { max-width: 8.333333%; }
    .form-control.col-sm-2, .form-select.col-sm-2, .row > .table.col-sm-2 { max-width: 16.666667%; }
    .form-control.col-sm-3, .form-select.col-sm-3, .row > .table.col-sm-3 { max-width: 25.0%; }
    .form-control.col-sm-4, .form-select.col-sm-4, .row > .table.col-sm-4 { max-width: 33.333333%; }
    .form-control.col-sm-5, .form-select.col-sm-5, .row > .table.col-sm-5 { max-width: 41.666667%; }
    .form-control.col-sm-6, .form-select.col-sm-6, .row > .table.col-sm-6 { max-width: 50.0%; }
    .form-control.col-sm-7, .form-select.col-sm-7, .row > .table.col-sm-7 { max-width: 58.333333%; }
    .form-control.col-sm-8, .form-select.col-sm-8, .row > .table.col-sm-8 { max-width: 66.666667%; }
    .form-control.col-sm-9, .form-select.col-sm-9, .row > .table.col-sm-9 { max-width: 75.0%; }
    .form-control.col-sm-10, .form-select.col-sm-10, .row > .table.col-sm-10 { max-width: 83.333333%; }
    .form-control.col-sm-11, .form-select.col-sm-11, .row > .table.col-sm-11 { max-width: 91.666667%; }
    .form-control.col-sm-12, .form-select.col-sm-12, .row > .table.col-sm-12 { max-width: 100.0%; }
}
@media (min-width: 768px) {
    .form-control.col-md-1, .form-select.col-md-1, .row > .table.col-md-1 { max-width: 8.333333%; }
    .form-control.col-md-2, .form-select.col-md-2, .row > .table.col-md-2 { max-width: 16.666667%; }
    .form-control.col-md-3, .form-select.col-md-3, .row > .table.col-md-3 { max-width: 25.0%; }
    .form-control.col-md-4, .form-select.col-md-4, .row > .table.col-md-4 { max-width: 33.333333%; }
    .form-control.col-md-5, .form-select.col-md-5, .row > .table.col-md-5 { max-width: 41.666667%; }
    .form-control.col-md-6, .form-select.col-md-6, .row > .table.col-md-6 { max-width: 50.0%; }
    .form-control.col-md-7, .form-select.col-md-7, .row > .table.col-md-7 { max-width: 58.333333%; }
    .form-control.col-md-8, .form-select.col-md-8, .row > .table.col-md-8 { max-width: 66.666667%; }
    .form-control.col-md-9, .form-select.col-md-9, .row > .table.col-md-9 { max-width: 75.0%; }
    .form-control.col-md-10, .form-select.col-md-10, .row > .table.col-md-10 { max-width: 83.333333%; }
    .form-control.col-md-11, .form-select.col-md-11, .row > .table.col-md-11 { max-width: 91.666667%; }
    .form-control.col-md-12, .form-select.col-md-12, .row > .table.col-md-12 { max-width: 100.0%; }
}
@media (min-width: 992px) {
    .form-control.col-lg-1, .form-select.col-lg-1, .row > .table.col-lg-1 { max-width: 8.333333%; }
    .form-control.col-lg-2, .form-select.col-lg-2, .row > .table.col-lg-2 { max-width: 16.666667%; }
    .form-control.col-lg-3, .form-select.col-lg-3, .row > .table.col-lg-3 { max-width: 25.0%; }
    .form-control.col-lg-4, .form-select.col-lg-4, .row > .table.col-lg-4 { max-width: 33.333333%; }
    .form-control.col-lg-5, .form-select.col-lg-5, .row > .table.col-lg-5 { max-width: 41.666667%; }
    .form-control.col-lg-6, .form-select.col-lg-6, .row > .table.col-lg-6 { max-width: 50.0%; }
    .form-control.col-lg-7, .form-select.col-lg-7, .row > .table.col-lg-7 { max-width: 58.333333%; }
    .form-control.col-lg-8, .form-select.col-lg-8, .row > .table.col-lg-8 { max-width: 66.666667%; }
    .form-control.col-lg-9, .form-select.col-lg-9, .row > .table.col-lg-9 { max-width: 75.0%; }
    .form-control.col-lg-10, .form-select.col-lg-10, .row > .table.col-lg-10 { max-width: 83.333333%; }
    .form-control.col-lg-11, .form-select.col-lg-11, .row > .table.col-lg-11 { max-width: 91.666667%; }
    .form-control.col-lg-12, .form-select.col-lg-12, .row > .table.col-lg-12 { max-width: 100.0%; }
}
@media (min-width: 1200px) {
    .form-control.col-xl-1, .form-select.col-xl-1, .row > .table.col-xl-1 { max-width: 8.333333%; }
    .form-control.col-xl-2, .form-select.col-xl-2, .row > .table.col-xl-2 { max-width: 16.666667%; }
    .form-control.col-xl-3, .form-select.col-xl-3, .row > .table.col-xl-3 { max-width: 25.0%; }
    .form-control.col-xl-4, .form-select.col-xl-4, .row > .table.col-xl-4 { max-width: 33.333333%; }
    .form-control.col-xl-5, .form-select.col-xl-5, .row > .table.col-xl-5 { max-width: 41.666667%; }
    .form-control.col-xl-6, .form-select.col-xl-6, .row > .table.col-xl-6 { max-width: 50.0%; }
    .form-control.col-xl-7, .form-select.col-xl-7, .row > .table.col-xl-7 { max-width: 58.333333%; }
    .form-control.col-xl-8, .form-select.col-xl-8, .row > .table.col-xl-8 { max-width: 66.666667%; }
    .form-control.col-xl-9, .form-select.col-xl-9, .row > .table.col-xl-9 { max-width: 75.0%; }
    .form-control.col-xl-10, .form-select.col-xl-10, .row > .table.col-xl-10 { max-width: 83.333333%; }
    .form-control.col-xl-11, .form-select.col-xl-11, .row > .table.col-xl-11 { max-width: 91.666667%; }
    .form-control.col-xl-12, .form-select.col-xl-12, .row > .table.col-xl-12 { max-width: 100.0%; }
}
/* BS4 parity: Bootstrap 4.0's .form-control-sm had no height/min-height, so the
   app's p-0 utility produced compact 23px inputs; BS5 enforces a 31px min-height. */
.form-control-sm { min-height: 0; }
/* Bug 55335: the row action menus ("..." beside View Details) are positioned fixed so the
   #MainContainer overflow no longer clips them, and kept below the top bar (72px, matching the
   popper padding on the buttons); on a window shorter than the menu it scrolls. Menus with
   fly-out submenus are left unscrolled: overflow would clip the submenu, which opens outside. */
button[data-bs-popper-config] + .dropdown-menu:not(:has(.dropdown-submenu)) { max-height: calc(100vh - 80px); overflow-y: auto; }