:root,
[data-bs-theme=light] {
    --bs-bghighlight: rgb(209,237,242);
    --bs-highlight: rgb(100,100,100);
    --bs-bgheader: #e1e1e1;
    --bs-headercolor: #333;
    --bs-bordercolor: #777;
    --bs-bgaccent: #f5f5f5;
    --bs-bgbanner: #fefefe;
    --bs-bgsubmenu: #fff;
}
[data-bs-theme=dark] {
    --bs-bghighlight: #E0FFFF;
    --bs-highlight: rgb(100,100,100);
    --bs-bgheader: #6C757D;
    --bs-headercolor: color: #eee;
    --bs-bordercolor: #eee;
    --bs-bgaccent: #333;
    --bs-bgbanner: #dedede;
    --bs-bgsubmenu: #333;
}
    
html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}


@media print {
    p {
        page-break-after: always;
    }
}



html {
    position: relative;
    min-height: 100%;
}

.filter-table .quick {
    margin-left: 0.5em;
    font-size: 0.8em;
    text-decoration: none;
}

.userfilter {
    min-width: 8rem !important;
}

.table-grip {
    max-width: 35px !important;
    width: 35px !important;
    padding-left: 0px !important;
    text-overflow: clip;
}

.table-select {
    max-width: 40px !important;
    width: 40px !important;
    min-width: 40px !important;
    text-align: center;
    padding-right: 4px !important;
    padding-left: 4px !important;
}

.table-check-input {
    -ms-transform: scale(1.3); /* IE */
    -moz-transform: scale(1.3); /* FF */
    -webkit-transform: scale(1.3); /* Safari and Chrome */
    -o-transform: scale(1.3); /* Opera */
    padding: 5px;
    margin-left: 4px;
}

.fitler-table .quick:hover {
    text-decoration: underline;
}

td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: .4rem !important;
    padding-left: .4rem !important;
    padding-top: .4rem !important;
    padding-bottom: .25rem !important;

}
table thead th {
    white-space: nowrap;
    overflow: hidden;    
    padding-right: .4rem !important;
    padding-left: .4rem !important;
    padding-top: .3rem !important;
    padding-bottom: .25rem !important;
    line-height:22px!important;
}

td.alt {
    background-color: #ffc;
    background-color: rgba(255, 255, 0, 0.2);
}

.table th:first-child,
.table td:first-child {
    position: sticky;
    left: 0;
}

input[type=search] {
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    background-image: url('/icons/search.svg'); /* Add a search icon to input */
    background-repeat: no-repeat;
    background-position: 160px 12px;

}

.form-body {
    overflow-x: hidden;
}

.btn-sm-table {
    /*font-size: .85rem;*/
    padding-top: .25rem;
    padding-bottom: .25rem;
    padding-left: .5rem;
    padding-right: .5rem;
    border-radius: .2rem;
}


.bg-selected {
    /*background-color: #bfd1ec !important;*/
    background-color: var(--bs-bghighlight) !important;
}


.bg-dgrey {
    background-color: #dddddd !important;
}
.bg-grey {
    background-color: #efefef !important;
}

.bg-coolgreen {
    background-color: rgb(240,254,250) !important;
}

.bg-water {
    background-color: rgb(212,241,249) !important;
}

.bg-clearwater {
    background-color: rgb(230,240,250) !important;
}

.bg-clearclear {
    background-color: rgb(210,250,230) !important;
}

/*.bg-clearsuccess {
    background-color: rgb(240,254,250) !important;
}*/

.bg-paleblue {
    background-color: rgb(209,237,242) !important;
}
.bg-inactive {
    background-color: #f2aba9 !important;
}
.bg-drayblue {
    background-color: rgb(13,160,253) !important;
}
.bg-modal-right-title {
    background-color: #3db3fd !important;
}
.bg-modal-right1-title {
    background-color: #86cffe !important;
    
}
.pre-highlight-cell {
    background-color: unset!important;
}
.highlight-cell {
    background-color: var(--bs-bghighlight) !important;
    color: var(--bs-highlight) !important;
}
.navbar {
    padding-top: 0px !important;
    /*bottom: 0px !important;*/
    margin-bottom: 0.25rem !important;
}

.container {
    width: 100% !important;
    max-width: 100% !important;
}

.padd5 {
    padding-left: .5rem !important;
}

.text-ghost {
    color: ghostwhite !important;
}
.text-gray{
    color:#666!important;
}
.text-drayblue {
    color: rgb(13,160,253) !important;
}

.icon-light {
    font-size: 1.5em !important;
    padding-left: .5em !important;
    padding-right: .5em !important;
    color: ghostwhite !important;
}

.icon-dark {
    font-size: 1.5em !important;
    padding-left: .5em !important;
    padding-right: .5em !important;
    color: #666 !important;
}

.text-inactive {
    color: #f2aba9 !important;
}
.form-label-d {
    margin-bottom: .15rem !important;
}

.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12,
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12,
.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
    padding-top: .5rem;
}

.checkbox-lg {
    padding-top: 2em;
}

    .checkbox-lg .form-check-input {
        top: .8rem;
        scale: 1.4;
        /*margin-right: 0.7rem;*/
    }

.checkbox-xl .form-check-input {
    top: 1.2rem;
    scale: 1.7;
    margin-right: 0.8rem;
}

.form-switch-d {
    padding-left: 3.5em !important;
}

.div-border {
    border: solid 1px #BBB;
    padding: .25em;
    margin-bottom: .25em;
}

.multiselect-container {
    max-height: 300px;
    overflow-y: scroll;
    width: 100% !important;
}

.input-group-text-long {
    width: 7em !important;
    text-align: right !important;
}

.input-group-text-small {
    flex: 0 0 auto;
    width: 4.5em !important;
    text-align: right !important;
}

.filter-table {
    margin-bottom: .25rem !important;
}

.dropdown-item:hover {
    background-color: #0d6efd !important;
    color: #fff!important;
}

.dropdown-submenu {
    position: relative;
}

    .dropdown-submenu > .dropdown-menu {
        top: 0;
        left: 100%;
        margin-top: -6px;
        margin-left: -1px;
        -webkit-border-radius: 0 6px 6px 6px;
        -moz-border-radius: 0 6px 6px;
        border-radius: 0 6px 6px 6px;
    }

    .dropdown-submenu:hover > .dropdown-menu {
        display: block;
    }

    .dropdown-submenu > a:after {
        display: block;
        content: " ";
        float: right;
        width: 0;
        height: 0;
        border-color: transparent;
        border-style: solid;
        border-width: 5px 0 5px 5px;
        border-left-color: #ccc;
        margin-top: 5px;
        margin-right: -10px;
    }

    .dropdown-submenu:hover > a:after {
        border-left-color: #fff;
    }

    .dropdown-submenu.pull-left {
        float: none;
    }

        .dropdown-submenu.pull-left > .dropdown-menu {
            left: -100%;
            margin-left: 10px;
            -webkit-border-radius: 6px 0 6px 6px;
            -moz-border-radius: 6px 0 6px 6px;
            border-radius: 6px 0 6px 6px;
        }

.dropdown {
    list-style: none;
    position: relative;
}

.dropdown-item {
    position: relative;
}

.submenu {
    display: none;
    position: absolute;
    left: 100%; /* or right: 0; depending on layout */
    top: 0;
    z-index: 1000;
    background-color: var(--bs-bgsubmenu);
    border: 1px solid #ccc;
}

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



.btn-group {
    max-width: 300px;
}

.breadcrumb-item.active {
    font-weight: bold;
    color: rgb(13,160,253) !important;
}

.dashboard {
    margin-top: -20px !important;
    z-index: 1000;
}


.form-modal-footer {
    position: absolute;
    bottom: 0;
}

.modal.right .modal-dialog {
    position: fixed;
    top:0px;
    margin: auto;
    width: 320px;
    height: 100%;
    -webkit-transform: translate3d(0%, 0, 0);
    -ms-transform: translate3d(0%, 0, 0);
    -o-transform: translate3d(0%, 0, 0);
    transform: translate3d(0%, 0, 0);
}

.modal.right.fade .modal-dialog {
    right: 0;
    -webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
    -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
    -o-transition: opacity 0.3s linear, right 0.3s ease-out;
    transition: opacity 0.3s linear, right 0.3s ease-out;
}

.modal.right.fade.in .modal-dialog {
    right: 0;
}

.form-modal-body{
    overflow:auto;
    padding:.25rem;
    max-width:100%;
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label {
    font-weight: bold;
}

.floating-label-input-group {
    height: calc(3.5rem + 2px);
    font-weight: bold;
    opacity: .65;
    transform: scale(.85) translateY(-.5rem) translateX(.15rem);
    padding-top: 2rem !important;
    padding-left: .75rem !important;
    padding-bottom: 1rem !important;
    padding-right: .75rem !important;
    pointer-events: none;
    z-index: 1000;
    border: 1px solid transparent;
    transform-origin: 0 0;
    transition: opacity .1s ease-in-out,transform .1s ease-in-out;
}

.floating-input-group {
    padding-top: 1.625rem;
    padding-bottom: .625rem;
    height: calc(3.5rem + 2px);
    line-height: 1.25;
    margin-top: -.825rem;
}

.floating-button {
    height: calc(3.5rem + 2px);
    z-index: 1000;
    padding-left: .25rem;
}

.dropdown-menu li {
    position: relative;
}

.dropdown-menu .dropdown-submenu {
    display: none;
    position: absolute;
    left: 100%;
    top: -7px;
}

.dropdown-menu .dropdown-submenu-left {
    right: 100%;
    left: auto;
}

.dropdown-menu > li:hover > .dropdown-submenu {
    display: block;
}


label.hover-outline:hover {
    outline: 1px solid rgb(13,160,253);
}

label.hover-outline-primary:hover {
    outline: 1px solid #0d6efd;
}

a.hover-outline:hover {
    outline: 1px solid rgb(13,160,253);
}

a.hover-outline-primary:hover {
    outline: 1px solid #0d6efd;
}

/*button.hover-outline:hover {
    outline: 1px solid rgb(13,160,253);
}
*/
a.hover-outline-danger:hover {
    outline: 1px solid #dc3545;
}

a.danger:hover {
    outline: 1px solid #dc3545;
}

button.hover-outline-primary:hover {
    outline: 1px solid #0d6efd;
}
button.hover-outline-secondary:hover {
    outline: 1px solid #c4c8cb;
}

button.hover-outline-danger:hover {
    outline: 1px solid #dc3545;
}

/*a {
    width: 220px;
    height: 50px;
    display: inline-block;
    background-color: blue;
    color: white;
    line-height: 50px;
    text-align: center;
    margin: auto;
}*/

#sortable-available {
    list-style-type: none;
    padding: 0;
}
#sortable-available li {
    margin: 5px;
    padding: 10px;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
    cursor: move;
}
#sortable-selected {
    list-style-type: none;
    padding: 0;
}

    #sortable-selected li {
        margin: 5px;
        padding: 10px;
        border: 1px solid #ccc;
        background-color: #f9f9f9;
        cursor: move;
    }
.color-picker {
    margin: 20px;
}

.color-display {
    width: 100px;
    height: 100px;
    border: 1px solid #000;
    margin-top: 20px;
}

.select-multiple {
    padding-top: .1rem !important;
    padding-right: .35rem !important;
    padding-bottom: .1rem !important;
    padding-left: .35rem !important;
    font-size:85%!important;
}
.cursor-pointer {
    cursor:pointer;
}
.nav-link.active {
    font-weight:bold!important;
}
.ps-0-15{
    padding-left:.15rem !important;
}
.pe-0-15 {
    padding-right: .15rem !important;
}
.ps-0-15 {
    padding-left: .15rem !important;
}

.px-0-15 {
    padding-left: .15rem !important;
    padding-right: .15rem !important;
}
.p-0-15 {
    padding-left: .15rem !important;
    padding-right: .15rem !important;
    padding-top: .25rem !important;
    padding-bottom: 0rem !important;
}
.external-icon{
    width:15px;
    height:25px;
    margin-left:-3px;
}
.external-icon-button {
    max-width: 34px;
}
.col-max-2 {
    max-width: 2rem;
}
.col-max-3 {
    max-width: 3rem;
}
.col-max-4 {
    max-width: 4rem;
}
.col-max-5 {
    max-width: 5rem;
}
.col-max-6 {
    max-width: 6rem;
}
.col-max-7 {
    max-width: 7rem;
}
.col-max-8 {
    max-width: 8rem;
}
.col-max-9 {
    max-width: 9rem;
}
.col-max-10 {
    max-width: 10rem;
}
.col-max-11 {
    max-width: 11rem;
}
.col-max-12 {
    max-width: 12rem;
}
.col-max-18 {
    max-width: 18rem;
}
.col-max-15 {
    max-width: 15rem;
}
.col-max-25 {
    max-width: 25rem;
}
.grid-search-multiple{
    font-size:.75rem!important;
}

.chart-canvas {
    width: 200px;
    height: 225px;
    background-color: #fff;
}
.h-50p{
    height:50px!important;
}
.h-300p {
    height:300px;
}
.h-600p {
    height: 600px;
}
.apply-view-check {
    position: absolute;
    left: 10px;
}
.modal-vessel {
    height: 470px;
    width: 300px
}
.modal-rail {
    height: 580px;
    width: 300px
}
.modal-appts {
    height: 520px;
    width: 300px
}
.modal-lfd {
    height: 380px;
    width: 300px
}
.img-banner {
    width: -webkit-fill-available;
    background-color:var(--bs-bgbanner);
}
.modal-message {
    margin-right: 0 !important;
    margin-top: 0 !important;
    z-index: 2500
}
.w-400p{
    width:400px;
}
.z-2000{
    z-index:2000!important;
}
.z-2500 {
    z-index: 2500 !important;
}
.screen-size {
    font-size: 10px;
}
.bottom-div{
    height:230px;
    max-height:230px;
}
.bottom-div-validation {
    height: 200px;
    max-height: 200px;
}
#cont-legs {
    overflow: auto;
    height: 180px;
}
.top-table-resources {
    max-height: calc(100vh - 500px);
    height: calc(100vh - 500px);
}
.top-table-invoices {
    max-height: calc(100vh - 520px);
    height: calc(100vh - 520px);
}
.top-table-legs {
    max-height: calc(100vh - 496px);
    height: calc(100vh - 496px);
}
.top-table-orders {
    max-height: calc(100vh - 466px);
    height: calc(100vh - 466px);
}
.top-table-settitems {
    max-height: calc(100vh - 240px);
    height: calc(100vh - 240px);
}
.top-table-billingitems {
    max-height: calc(100vh - 470px);
    height: calc(100vh - 470px);
}
/* Base header style */
.table-header th {
    font-weight: bold;
    /*padding: 10px;*/
    text-align: left;
    background-color: var(--bs-bgheader) !important;
    color: var(--bs-headercolor) !important;
    border-left: 1px solid var(--bs-bordercolor) !important;
    border-right: 1px solid var(--bs-bordercolor) !important;
   /* border-bottom: 1px solid var(--bs-bordercolor) !important;
    margin-bottom:.25rem!important;*/
    z-index: 1;
}
.h-225{
        height:225px;
}
.h-150 {
    height: 150px;
}
.label-floating {
    opacity: .65;
    transform: scale(.85) translateY(-.5rem) translateX(.15rem);
}
.accent{
    background-color:var(--bs-bgaccent);
}
.waiting-time {
    border: solid 1px #808080;
    padding-left: 5px;
    padding-right: 5px;
}
.drayage-items {
    background-color: lightgreen;
    color: #111
}
.fuel-items {
    background-color: lightpink;
    color: #111
}
.overtime-items {
    background-color: lightyellow;
    color: #111
}
.calloff-items {
    background-color: lightcyan;
    color: #111
}
.parkedtruck-items {
    background-color: lightblue;
    color: #111
}
.invoiced-items {
    background-color: lightgray;
    color: #111
}

.voided-legs {
    color: #ddd !important;
    font-weight: 500 !important;
    background-color: #b17070 !important;
}

    .voided-legs td {
        color: #ddd !important;
        font-weight: 500 !important;
        background-color: #b17070 !important;
    }


.missedDemStyle {
    color: var(--missedDemColor) !important;
    font-weight: var(--missedDemFontWeight) !important;
}
.missedPdStyle {
    color: var(--missedPdColor) !important;
    font-weight: var(--missedPdFontWeight) !important;
}

.missedOApptStyle {
    color: var(--missedOColor) !important;
    font-weight: var(--missedOFontWeight) !important;
}

.missedDApptStyle {
    color: var(--missedDColor) !important;
    font-weight: var(--missedDFontWeight) !important;
}




.hold-legs {
    background-color: var(--holdLegsBgColor)!important;
    color: var(--holdLegsColor)!important;
}

    .hold-legs td {
        background-color: var(--holdLegsBgColor)!important;
        color: var(--holdLegsColor)!important;
    }

.hot-legs {
    background-color: var(--hotLegsBgColor)!important;
    color: var(--hotLegsColor)!important;
    font-weight: bold!important;
}

    .hot-legs td {
        background-color: var(--hotLegsBgColor)!important;
        color: var(--hotLegsColor)!important;
        font-weight: bold!important;
    }

.empty-legs {
    background-color: var(--emptyLegsBgColor)!important;
    color: var(--emptyLegsColor)!important;
}

    .empty-legs td {
        background-color: var(--emptyLegsBgColor)!important;
        color: var(--emptyLegsColor)!important;
    }

.hot-empty-legs {
    background-color: var(--emptyLegsBgColor)!important;
    color: var(--hotLegsColor)!important;
    font-weight: bold!important;
}

    .hot-empty-legs td {
        background-color: var(--emptyLegsBgColor)!important;
        color: var(--hotLegsColor)!important;
        font-weight: bold!important;
    }

.loaded-legs {
    background-color: var(--loadedLegsBgColor)!important;
    color: var(--loadedLegsColor)!important;
}

    .loaded-legs td {
        background-color: var(--loadedLegsBgColor)!important;
        color: var(--loadedLegsColor)!important;
    }

.hot-loaded-legs {
    background-color: var(--loadedLegsBgColor)!important;
    color: var(--hotLegsColor)!important;
    font-weight: bold!important;
}

    .hot-loaded-legs td {
        background-color: var(--loadedLegsBgColor)!important;
        color: var(--hotLegsColor)!important;
        font-weight: bold!important;
    }
.chassis-legs {
    background-color: var(--chassisLegsBgColor)!important;
    color: var(--chassisLegsColor)!important;
}
    .chassis-legs td {
        background-color: var(--chassisLegsBgColor)!important;
        color: var(--chassisLegsColor)!important;
    }

.hot-chassis-legs {
    background-color: var(--chassisLegsBgColor)!important;
    color: var(--hotLegsColor)!important;
    font-weight: bold!important;
}

    .hot-chassis-legs td {
        background-color: var(--chassisLegsBgColor)!important;
        color: var(--hotLegsColor)!important;
        font-weight: bold!important;
    }

.yard-legs {
    background-color: var(--yardLegsBgColor)!important;
    color: var(--yardLegsColor)!important;
}

    .yard-legs td {
        background-color: var(--yardLegsBgColor)!important;
        color: var(--yardLegsColor)!important;
    }

.hot-yard-legs {
    background-color: var(--yardLegsBgColor)!important;
    color: var(--hotLegsColor)!important;
    font-weight: bold!important;
}

    .hot-yard-legs td {
        background-color: var(--yardLegsBgColor)!important;
        color: var(--hotLegsColor)!important;
        font-weight: bold!important;
    }

.other-legs {
    background-color: var(--otherLegsBgColor)!important;
    color: var(--otherLegsColor)!important;
}

    .other-legs td {
        background-color: var(--otherLegsBgColor)!important;
        color: var(--otherLegsColor)!important;
    }

.hot-other-legs {
    background-color: var(--otherLegsBgColor)!important;
    color: var(--hotLegsColor)!important;
    font-weight: bold!important;
}

    .hot-other-legs td {
        background-color: var(--otherLegsBgColor)!important;
        color: var(--hotLegsColor)!important;
        font-weight: bold!important;
    }

.bobtail-legs {
    background-color: var(--bobtailsBgColor)!important;
    color: var(--bobtailsColor)!important;
}

    .bobtail-legs td {
        background-color: var(--bobtailsBgColor)!important;
        color: var(--bobtailsColor)!important;
    }

.hot-bobtail-legs {
    background-color: var(--bobtailsBgColor)!important;
    color: var(--hotLegsColor)!important;
    font-weight: bold!important;
}

    .hot-bobtail-legs td {
        background-color: var(--bobtailsBgColor)!important;
        color: var(--hotLegsColor)!important;
        font-weight: bold!important;
    }

.unscheduled-legs {
    background-color: var(--unscheduledLegsBgColor)!important;
    color: var(--unscheduledLegsColor)!important;
}

    .unscheduled-legs td {
        background-color: var(--unscheduledLegsBgColor)!important;
        color: var(--unscheduledLegsColor)!important;
    }

.hot-unscheduled-legs {
    background-color: var(--unscheduledLegsBgColor)!important;
    color: var(--hotLegsColor)!important;
    font-weight: bold!important;
}

    .hot-unscheduled-legs td {
        background-color: var(--unscheduledLegsBgColor)!important;
        color: var(--hotLegsColor)!important;
        font-weight: bold!important;
    }

.hold-unscheduled-legs {
    background-color: var(--holdLegsBgColor)!important;
    color: var(--holdLegsColor)!important;
}

    .hold-unscheduled-legs td {
        background-color: var(--holdLegsBgColor)!important;
        color: var(--holdLegsColor)!important;
    }

.scheduled-legs {
    background-color: var(--scheduledLegsBgColor)!important;
    color: var(--scheduledLegsColor)!important;
}

    .scheduled-legs td {
        background-color: var(--scheduledLegsBgColor)!important;
        color: var(--scheduledLegsColor)!important;
    }

.hot-scheduled-legs {
    background-color: var(--scheduledLegsBgColor)!important;
    color: var(--hotLegsColor)!important;
    font-weight: bold!important;
}

    .hot-scheduled-legs td {
        background-color: var(--scheduledLegsBgColor)!important;
        color: var(--hotLegsColor)!important;
        font-weight: bold!important;
    }

.hold-scheduled-legs {
    background-color: var(--scheduledLegsBgColor)!important;
    color: var(--holdLegsColor)!important;
}

    .hold-scheduled-legs td {
        background-color: var(--scheduledLegsBgColor)!important;
        color: var(--holdLegsColor)!important;
    }

.assigned-legs {
    background-color: var(--assignedLegsBgColor)!important;
    color: var(--assignedLegsColor)!important;
}

    .assigned-legs td {
        background-color: var(--assignedLegsBgColor)!important;
        color: var(--assignedLegsColor)!important;
    }

.hot-assigned-legs {
    background-color: var(--assignedLegsBgColor)!important;
    color: var(--hotLegsColor)!important;
    font-weight: bold!important;
}

    .hot-assigned-legs td {
        background-color: var(--assignedLegsBgColor)!important;
        color: var(--hotLegsColor)!important;
        font-weight: bold!important;
    }

.hold-assigned-legs {
    background-color: var(--assignedLegsBgColor)!important;
    color: var(--holdLegsColor)!important;
    font-weight: bold!important;
}

    .hold-assigned-legs td {
        background-color: var(--assignedLegsBgColor)!important;
        color: var(--holdLegsColor)!important;
        font-weight: bold!important;
    }

.origin-legs {
    background-color: var(--atOriginLegsBgColor)!important;
    color: var(--atOriginLegsColor)!important;
}

    .origin-legs td {
        background-color: var(--atOriginLegsBgColor)!important;
        color: var(--atOriginLegsColor)!important;
    }

.hot-origin-legs {
    background-color: var(--atOriginLegsBgColor)!important;
    color: var(--hotLegsColor)!important;
    font-weight: bold!important;
}

    .hot-origin-legs td {
        background-color: var(--atOriginLegsBgColor)!important;
        color: var(--hotLegsColor)!important;
        font-weight: bold!important;
    }

.hold-origin-legs {
    background-color: var(--atOriginLegsBgColor)!important;
    color: var(--holdLegsColor)!important;
    font-weight: bold!important;
}

    .hold-origin-legs td {
        background-color: var(--atOriginLegsBgColor)!important;
        color: var(--holdLegsColor)!important;
        font-weight: bold!important;
    }

.outgate-legs {
    background-color: var(--outgateLegsBgColor)!important;
    color: var(--outgateLegsColor)!important;
}

    .outgate-legs td {
        background-color: var(--outgateLegsBgColor)!important;
        color: var(--outgateLegsColor)!important;
    }

.hot-outgate-legs {
    background-color: var(--outgateLegsBgColor)!important;
    color: var(--hotLegsColor)!important;
    font-weight: bold!important;
}

    .hot-outgate-legs td {
        background-color: var(--outgateLegsBgColor)!important;
        color: var(--hotLegsColor)!important;
        font-weight: bold!important;
    }

.hold-outgate-legs {
    background-color: var(--outgateLegsBgColor)!important;
    color: var(--holdLegsColor)!important;
    font-weight: bold!important;
}

    .hold-outgate-legs td {
        background-color: var(--outgateLegsBgColor)!important;
        color: var(--holdLegsColor)!important;
        font-weight: bold!important;
    }

.destination-legs {
    background-color: var(--atDestinationLegsBgColor)!important;
    color: var(--atDestinationLegsColor)!important;
}

    .destination-legs td {
        background-color: var(--atDestinationLegsBgColor)!important;
        color: var(--atDestinationLegsColor)!important;
    }

.hot-destination-legs {
    background-color: var(--atDestinationLegsBgColor)!important;
    color: var(--hotLegsColor)!important;
    font-weight: bold!important;
}

    .hot-destination-legs td {
        background-color: var(--atDestinationLegsBgColor)!important;
        color: var(--hotLegsColor)!important;
        font-weight: bold!important;
    }

.hold-destination-legs {
    background-color: var(--atDestinationLegsBgColor)!important;
    color: var(--holdLegsColor)!important;
    font-weight: bold!important;
}

    .hold-destination-legs td {
        background-color: var(--atDestinationLegsBgColor)!important;
        color: var(--holdLegsColor)!important;
        font-weight: bold!important;
    }

.terminal-color1 {
    background-color: var(--bgcolor1) !important;
    color: var(--color1) !important;
}

.terminal-color2 {
    background-color: var(--bgcolor2) !important;
    color: var(--color2) !important;
}

.terminal-color3 {
    background-color: var(--bgcolor3) !important;
    color: var(--color3) !important;
}

.terminal-color4 {
    background-color: var(--bgcolor4) !important;
    color: var(--color4) !important;
}

.terminal-color1 td {
    background-color: var(--bgcolor1) !important;
    color: var(--color1) !important;
}

.terminal-color2 td {
    background-color: var(--bgcolor2) !important;
    color: var(--color2) !important;
}

.terminal-color3 td {
    background-color: var(--bgcolor3) !important;
    color: var(--color3) !important;
}

.terminal-color4 td {
    background-color: var(--bgcolor4) !important;
    color: var(--color4) !important;
}

#docViewer {
    position: absolute;
    top: 70px;
    left: 20px;
    width: 1000px;
    height: 800px;
    background-color: #f9f9f9;
    border: 1px solid #ccc;
    padding: 5px 10px;
    z-index: 1000; /* ensures it sits above everything */
    display: none;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
#docContent {
    height:90%
}

.pure-blob {
    object-fit: contain;
    width: 100%;
     height: 700px;
   max-height: 900px;
}