@import "https://fonts.googleapis.com/css?family=Righteous";
:root {
    --primary-gradient: var(--primary-color);
    --chat-width: 360px;
    --chat-height: 530px;
    --header-height: 56px;
    --border-radius: 16px;
    --transition-speed: 0.3s;
    --webchat__padding--regular: 8px;
    --header-textColor: #FFF;

    /* BOOTSTRAP-MIGRATION Phase 6e: Restore BS3-era base typography.
       BS5 Reboot sets body to system-ui font stack at 1rem (16px).
       BS3 body used "Helvetica Neue", Helvetica, Arial, sans-serif at 14px.
       Setting font-size: 87.5% on :root makes 1rem = 14px everywhere — this
       cascades automatically to ALL BS5 rem-based component sizing (dropdowns,
       inputs, modals, badges, etc.) without per-component overrides.
       --bs-body-font-size is updated to 1rem so it reads 14px via the root
       override, not 12.25px (0.875 × 14px). */
    font-size: 87.5%;                    /* 1rem = 14px — BS3's base font size */
    --bs-font-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
    --bs-body-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    --bs-body-font-size: 1rem;           /* 14px — via root font-size: 87.5% above */
    --bs-body-line-height: 1.42857143;   /* matches BS3 body default */

    /* BOOTSTRAP-MIGRATION Phase 6e: Restore BS3-era heading sizes.
       BS5 headings are significantly larger than BS3 (h4: 1.5rem/24px vs 18px,
       h5: 1.25rem/20px vs 14px). Override CSS variables so modal titles, card
       headers, and any h4/h5 in the app render at the expected compact size. */
    --bs-modal-title-font-size: 1.125rem; /* ~15-16px, matches BS3 modal header */
}

@-webkit-keyframes load8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes load8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes blinking {
    0% {
        color: darkred;
    }

    100% {
        color: floralwhite;
    }
}

@keyframes blinkingBackground {
    0% {
        background-color: #a6a6a6;
    }

    25% {
        background-color: #bd323b;
    }

    50% {
        background-color: #ef0a1a;
    }

    75% {
        background-color: #006699;
    }

    100% {
        background-color: #4b8df7;
    }
}

@keyframes shake {
    0% {
        transform: translate(1px, 1px) rotate(0deg);
    }

    10% {
        transform: translate(-1px, -1px) rotate(-1deg);
    }

    20% {
        transform: translate(-1px, 0px) rotate(1deg);
    }

    30% {
        transform: translate(1px, 1px) rotate(0deg);
    }

    40% {
        transform: translate(1px, -1px) rotate(1deg);
    }

    50% {
        transform: translate(-1px, 1px) rotate(-1deg);
    }

    60% {
        transform: translate(-1px, 1px) rotate(0deg);
    }

    70% {
        transform: translate(1px, 1px) rotate(-1deg);
    }

    80% {
        transform: translate(-1px, -1px) rotate(1deg);
    }

    90% {
        transform: translate(1px, 1px) rotate(0deg);
    }

    100% {
        transform: translate(1px, -1px) rotate(-1deg);
    }
}

@-webkit-keyframes wrench {
    0% {
        -webkit-transform: rotate(-12deg);
        transform: rotate(-12deg);
    }

    8% {
        -webkit-transform: rotate(12deg);
        transform: rotate(12deg);
    }

    10% {
        -webkit-transform: rotate(24deg);
        transform: rotate(24deg);
    }

    18% {
        -webkit-transform: rotate(-24deg);
        transform: rotate(-24deg);
    }

    20% {
        -webkit-transform: rotate(-24deg);
        transform: rotate(-24deg);
    }

    28% {
        -webkit-transform: rotate(24deg);
        transform: rotate(24deg);
    }

    30% {
        -webkit-transform: rotate(24deg);
        transform: rotate(24deg);
    }

    38% {
        -webkit-transform: rotate(-24deg);
        transform: rotate(-24deg);
    }

    40% {
        -webkit-transform: rotate(-24deg);
        transform: rotate(-24deg);
    }

    48% {
        -webkit-transform: rotate(24deg);
        transform: rotate(24deg);
    }

    50% {
        -webkit-transform: rotate(24deg);
        transform: rotate(24deg);
    }

    58% {
        -webkit-transform: rotate(-24deg);
        transform: rotate(-24deg);
    }

    60% {
        -webkit-transform: rotate(-24deg);
        transform: rotate(-24deg);
    }

    68% {
        -webkit-transform: rotate(24deg);
        transform: rotate(24deg);
    }

    75% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}

@keyframes wrench {
    0% {
        -webkit-transform: rotate(-12deg);
        -ms-transform: rotate(-12deg);
        transform: rotate(-12deg);
    }

    8% {
        -webkit-transform: rotate(12deg);
        -ms-transform: rotate(12deg);
        transform: rotate(12deg);
    }

    10% {
        -webkit-transform: rotate(24deg);
        -ms-transform: rotate(24deg);
        transform: rotate(24deg);
    }

    18% {
        -webkit-transform: rotate(-24deg);
        -ms-transform: rotate(-24deg);
        transform: rotate(-24deg);
    }

    20% {
        -webkit-transform: rotate(-24deg);
        -ms-transform: rotate(-24deg);
        transform: rotate(-24deg);
    }

    28% {
        -webkit-transform: rotate(24deg);
        -ms-transform: rotate(24deg);
        transform: rotate(24deg);
    }

    30% {
        -webkit-transform: rotate(24deg);
        -ms-transform: rotate(24deg);
        transform: rotate(24deg);
    }

    38% {
        -webkit-transform: rotate(-24deg);
        -ms-transform: rotate(-24deg);
        transform: rotate(-24deg);
    }

    40% {
        -webkit-transform: rotate(-24deg);
        -ms-transform: rotate(-24deg);
        transform: rotate(-24deg);
    }

    48% {
        -webkit-transform: rotate(24deg);
        -ms-transform: rotate(24deg);
        transform: rotate(24deg);
    }

    50% {
        -webkit-transform: rotate(24deg);
        -ms-transform: rotate(24deg);
        transform: rotate(24deg);
    }

    58% {
        -webkit-transform: rotate(-24deg);
        -ms-transform: rotate(-24deg);
        transform: rotate(-24deg);
    }

    60% {
        -webkit-transform: rotate(-24deg);
        -ms-transform: rotate(-24deg);
        transform: rotate(-24deg);
    }

    68% {
        -webkit-transform: rotate(24deg);
        -ms-transform: rotate(24deg);
        transform: rotate(24deg);
    }

    75% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}

@-webkit-keyframes ring {
    0% {
        -webkit-transform: rotate(-15deg);
        transform: rotate(-15deg);
    }

    2% {
        -webkit-transform: rotate(15deg);
        transform: rotate(15deg);
    }

    4% {
        -webkit-transform: rotate(-18deg);
        transform: rotate(-18deg);
    }

    6% {
        -webkit-transform: rotate(18deg);
        transform: rotate(18deg);
    }

    8% {
        -webkit-transform: rotate(-22deg);
        transform: rotate(-22deg);
    }

    10% {
        -webkit-transform: rotate(22deg);
        transform: rotate(22deg);
    }

    12% {
        -webkit-transform: rotate(-18deg);
        transform: rotate(-18deg);
    }

    14% {
        -webkit-transform: rotate(18deg);
        transform: rotate(18deg);
    }

    16% {
        -webkit-transform: rotate(-12deg);
        transform: rotate(-12deg);
    }

    18% {
        -webkit-transform: rotate(12deg);
        transform: rotate(12deg);
    }

    20% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}

@keyframes ring {
    0% {
        -webkit-transform: rotate(-15deg);
        -ms-transform: rotate(-15deg);
        transform: rotate(-15deg);
    }

    2% {
        -webkit-transform: rotate(15deg);
        -ms-transform: rotate(15deg);
        transform: rotate(15deg);
    }

    4% {
        -webkit-transform: rotate(-18deg);
        -ms-transform: rotate(-18deg);
        transform: rotate(-18deg);
    }

    6% {
        -webkit-transform: rotate(18deg);
        -ms-transform: rotate(18deg);
        transform: rotate(18deg);
    }

    8% {
        -webkit-transform: rotate(-22deg);
        -ms-transform: rotate(-22deg);
        transform: rotate(-22deg);
    }

    10% {
        -webkit-transform: rotate(22deg);
        -ms-transform: rotate(22deg);
        transform: rotate(22deg);
    }

    12% {
        -webkit-transform: rotate(-18deg);
        -ms-transform: rotate(-18deg);
        transform: rotate(-18deg);
    }

    14% {
        -webkit-transform: rotate(18deg);
        -ms-transform: rotate(18deg);
        transform: rotate(18deg);
    }

    16% {
        -webkit-transform: rotate(-12deg);
        -ms-transform: rotate(-12deg);
        transform: rotate(-12deg);
    }

    18% {
        -webkit-transform: rotate(12deg);
        -ms-transform: rotate(12deg);
        transform: rotate(12deg);
    }

    20% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}

@-webkit-keyframes vertical {
    0% {
        -webkit-transform: translate(0, -3px);
        transform: translate(0, -3px);
    }

    4% {
        -webkit-transform: translate(0, 3px);
        transform: translate(0, 3px);
    }

    8% {
        -webkit-transform: translate(0, -3px);
        transform: translate(0, -3px);
    }

    12% {
        -webkit-transform: translate(0, 3px);
        transform: translate(0, 3px);
    }

    16% {
        -webkit-transform: translate(0, -3px);
        transform: translate(0, -3px);
    }

    20% {
        -webkit-transform: translate(0, 3px);
        transform: translate(0, 3px);
    }

    22% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }
}

@keyframes vertical {
    0% {
        -webkit-transform: translate(0, -3px);
        -ms-transform: translate(0, -3px);
        transform: translate(0, -3px);
    }

    4% {
        -webkit-transform: translate(0, 3px);
        -ms-transform: translate(0, 3px);
        transform: translate(0, 3px);
    }

    8% {
        -webkit-transform: translate(0, -3px);
        -ms-transform: translate(0, -3px);
        transform: translate(0, -3px);
    }

    12% {
        -webkit-transform: translate(0, 3px);
        -ms-transform: translate(0, 3px);
        transform: translate(0, 3px);
    }

    16% {
        -webkit-transform: translate(0, -3px);
        -ms-transform: translate(0, -3px);
        transform: translate(0, -3px);
    }

    20% {
        -webkit-transform: translate(0, 3px);
        -ms-transform: translate(0, 3px);
        transform: translate(0, 3px);
    }

    22% {
        -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        transform: translate(0, 0);
    }
}

@-webkit-keyframes horizontal {
    0% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }

    6% {
        -webkit-transform: translate(5px, 0);
        transform: translate(5px, 0);
    }

    12% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }

    18% {
        -webkit-transform: translate(5px, 0);
        transform: translate(5px, 0);
    }

    24% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }

    30% {
        -webkit-transform: translate(5px, 0);
        transform: translate(5px, 0);
    }

    36% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }
}

@keyframes horizontal {
    0% {
        -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        transform: translate(0, 0);
    }

    6% {
        -webkit-transform: translate(5px, 0);
        -ms-transform: translate(5px, 0);
        transform: translate(5px, 0);
    }

    12% {
        -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        transform: translate(0, 0);
    }

    18% {
        -webkit-transform: translate(5px, 0);
        -ms-transform: translate(5px, 0);
        transform: translate(5px, 0);
    }

    24% {
        -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        transform: translate(0, 0);
    }

    30% {
        -webkit-transform: translate(5px, 0);
        -ms-transform: translate(5px, 0);
        transform: translate(5px, 0);
    }

    36% {
        -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        transform: translate(0, 0);
    }
}

@-webkit-keyframes flash {
    0%, 100%, 50% {
        opacity: 1;
    }

    25%, 75% {
        opacity: 0;
    }
}

@keyframes flash {
    0%, 100%, 50% {
        opacity: 1;
    }

    25%, 75% {
        opacity: 0;
    }
}

@-webkit-keyframes bounce {
    0%, 10%, 20%, 50%, 80% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    40% {
        -webkit-transform: translateY(-15px);
        transform: translateY(-15px);
    }

    60% {
        -webkit-transform: translateY(-15px);
        transform: translateY(-15px);
    }
}

@keyframes bounce {
    0%, 10%, 20%, 50%, 80% {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }

    40% {
        -webkit-transform: translateY(-15px);
        -ms-transform: translateY(-15px);
        transform: translateY(-15px);
    }

    60% {
        -webkit-transform: translateY(-15px);
        -ms-transform: translateY(-15px);
        transform: translateY(-15px);
    }
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}

@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(359deg);
        -ms-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}

@-webkit-keyframes float {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    50% {
        -webkit-transform: translateY(-6px);
        transform: translateY(-6px);
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes float {
    0% {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }

    50% {
        -webkit-transform: translateY(-6px);
        -ms-transform: translateY(-6px);
        transform: translateY(-6px);
    }

    100% {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}

@-webkit-keyframes pulse {
    0% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }

    50% {
        -webkit-transform: scale(0.8);
        transform: scale(0.8);
    }

    100% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }
}

@keyframes pulse {
    0% {
        -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
        transform: scale(1.1);
    }

    50% {
        -webkit-transform: scale(0.8);
        -ms-transform: scale(0.8);
        transform: scale(0.8);
    }

    100% {
        -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
        transform: scale(1.1);
    }
}

@-webkit-keyframes tada {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    10%, 20% {
        -webkit-transform: scale(0.9) rotate(-8deg);
        transform: scale(0.9) rotate(-8deg);
    }

    30%, 50%, 70% {
        -webkit-transform: scale(1.3) rotate(8deg);
        transform: scale(1.3) rotate(8deg);
    }

    40%, 60% {
        -webkit-transform: scale(1.3) rotate(-8deg);
        transform: scale(1.3) rotate(-8deg);
    }

    80% {
        -webkit-transform: scale(1) rotate(0);
        transform: scale(1) rotate(0);
    }
}

@keyframes tada {
    0% {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }

    10%, 20% {
        -webkit-transform: scale(0.9) rotate(-8deg);
        -ms-transform: scale(0.9) rotate(-8deg);
        transform: scale(0.9) rotate(-8deg);
    }

    30%, 50%, 70% {
        -webkit-transform: scale(1.3) rotate(8deg);
        -ms-transform: scale(1.3) rotate(8deg);
        transform: scale(1.3) rotate(8deg);
    }

    40%, 60% {
        -webkit-transform: scale(1.3) rotate(-8deg);
        -ms-transform: scale(1.3) rotate(-8deg);
        transform: scale(1.3) rotate(-8deg);
    }

    80% {
        -webkit-transform: scale(1) rotate(0);
        -ms-transform: scale(1) rotate(0);
        transform: scale(1) rotate(0);
    }
}

@-webkit-keyframes passing {
    0% {
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        opacity: 0;
    }

    50% {
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
        opacity: 1;
    }

    100% {
        -webkit-transform: translateX(50%);
        transform: translateX(50%);
        opacity: 0;
    }
}

@keyframes passing {
    0% {
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
        opacity: 0;
    }

    50% {
        -webkit-transform: translateX(0%);
        -ms-transform: translateX(0%);
        transform: translateX(0%);
        opacity: 1;
    }

    100% {
        -webkit-transform: translateX(50%);
        -ms-transform: translateX(50%);
        transform: translateX(50%);
        opacity: 0;
    }
}

@-webkit-keyframes burst {
    0% {
        opacity: .6;
    }

    50% {
        -webkit-transform: scale(1.8);
        transform: scale(1.8);
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@keyframes burst {
    0% {
        opacity: .6;
    }

    50% {
        -webkit-transform: scale(1.8);
        -ms-transform: scale(1.8);
        transform: scale(1.8);
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@keyframes blink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.smallTxt {
    font-size: 8pt;
    text-decoration: none;
}

.sortHeaderIcon {
    font-size: 14px;
    margin-left: 5px;
}

.serviceLeadGrid td {
    padding-top: 2px;
    padding-bottom: 2px;
}

.wrapword {
    white-space: -moz-pre-wrap !important;
    white-space: -webkit-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    white-space: pre-wrap;
    word-wrap: break-word;
    word-break: break-all;
    white-space: normal;
}

.font-Color {
    color: black;
}

.transparentTextColor {
    color: darkgoldenrod;
}

.progress-POGA {
    background-image: -webkit-linear-gradient(top, #1f9645 0, #2bad54 100%);
    background-image: -o-linear-gradient(top, #1f9645 0, #2bad54 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#1f9645), to(#2bad54));
    background-image: linear-gradient(to bottom, #1f9645 0, #2bad54 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1f9645',endColorstr='#2bad54',GradientType=0);
    background-repeat: repeat-x;
}

.progress-bar-POGA {
    background-image: -webkit-linear-gradient(top, #1f9645 0, #2bad54 100%);
    background-image: -o-linear-gradient(top, #1f9645 0, #2bad54 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#1f9645), to(#2bad54));
    background-image: linear-gradient(to bottom, #1f9645 0, #2bad54 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1f9645',endColorstr='#2bad54',GradientType=0);
    background-repeat: repeat-x;
}

.dot {
    border-radius: 50%;
    border: 1px black solid;
    border-image: none;
    width: 14px;
    height: 14px;
    text-align: center;
    margin-left: 1px;
}

.dotGreen {
    background-color: #1f9645 !important;
}

.POGA-Green {
    color: #1f9645;
}

.desking-SubtotalValue {
    text-decoration: underline;
}

.desking-TotalValue {
    text-decoration: underline;
    border-bottom: 1px solid #000;
}

.deskingExpired {
    position: absolute;
    top: 0;
    text-align: center;
    height: 100%;
    width: 100%;
    color: red;
    font-size: 60px;
    text-shadow: 2px 2px 8px;
    opacity: .4;
}

.form-signin {
    max-width: 400px;
    padding: 15px;
    margin: 0 auto;
}

    .form-signin .form-signin-heading {
        margin-bottom: 10px;
    }

    .form-signin .checkbox {
        margin-bottom: 10px;
        font-weight: normal;
    }

    .form-signin .form-control {
        color: #000000;
        position: relative;
        font-size: 16px;
        height: auto;
        padding: 10px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

        .form-signin .form-control:focus {
            z-index: 2;
        }

    .form-signin input[type="text"] {
        margin-bottom: 15px;
    }

    .form-signin input[type="password"] {
        margin-bottom: 15px;
    }

a {
    color: black;
    /* BOOTSTRAP-MIGRATION Phase 6e: BS5 Reboot sets a { text-decoration: underline; }
       which replaced BS3's a { text-decoration: none; }. Reset globally to preserve
       existing link appearance app-wide. */
    text-decoration: none;
}

.schedInvertedTab {
    /* BOOTSTRAP-MIGRATION Phase 6e: this pulls the tab up to overlap/touch the
       nav-tabs bar above it — always a hardcoded offset tuned to the surrounding
       tabs' exact height. BS5's nav-tabs padding/line-height sizing shifted that
       height, so the old BS3-tuned -7px left a visible gap. Re-measured live in
       DevTools against the current BS5 layout: -45px is the value that closes it. */
    margin-top: -45px;
    margin-left: 5px;
    display: block;
    width: 120px;
    padding: 2px;
    background-color: #006699;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.75);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.75);
}

#apptschednotessubmenu {
    z-index: 10000;
    display: block;
    position: absolute;
    width: 450px;
    overflow: hidden;
    max-height: 0;
    padding: 0;
    right: 0;
    top: 0;
}

#apptschednotesmenu:hover #apptschednotessubmenu {
    overflow: visible;
}

#apptschedcustomersubmenu {
    z-index: 10000;
    display: block;
    position: absolute;
    width: 450px;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.7s ease-in;
    padding: 0;
    right: 0;
    top: 0;
}

#apptschedcustomermenu:hover #apptschedcustomersubmenu {
    max-height: 200px;
    overflow: visible;
}

.redShadowBorder {
    box-shadow: 3px 3px 1px red;
    border: solid 1px red;
}

.yellowBackground {
    background-color: #ffff1a;
}

.redBackground {
    background-color: #ff4d4d;
}

.turnoffColor {
    color: #DAA520;
    color: -webkit-linear-gradient(#FFA500, #FFD700);
    color: -o-linear-gradient(#FFA500, #FFD700);
    color: -moz-linear-gradient(#FFA500, #FFD700);
    color: linear-gradient(#FFA500, #FFD700);
}

.ui-state-active {
    color: black;
}

.ui-widget-content .ui-state-active {
    color: black;
}

.ui-widget-content .ui-state-hover {
    background: #0088cc;
}

.ui-widget-content .ui-state-focus {
    background: #0088cc;
}

.ui-widget-header .ui-state-active {
    color: black;
}

.ui-widget-header .ui-state-hover {
    background: #0088cc;
}

.ui-widget-header .ui-state-focus {
    background: #0088cc;
}

a.ui-button:active {
    color: black;
}

.ui-button:active {
    color: black;
}

.ui-state-active.ui-button:hover {
    color: black;
}

.account-wall {
    padding: 5px 0 0 0;
    background-color: #FFFFFF;
    border-radius: 10px;
    height: 100%;
}

.login-title {
    color: #555;
    font-size: 18px;
    font-weight: 700;
    display: block;
}

.verify-img {
    width: 60px;
    margin: 0 auto 10px;
    display: block;
    border-radius: 50%;
}

.profile-img {
    width: 96px;
    height: 96px;
    margin: 0 auto 10px;
    display: block;
    border-radius: 50%;
}

.need-help {
    margin-top: 10px;
}

.mfaPanel {
    position: relative;
    -webkit-perspective: 500px;
    -moz-perspective: 500px;
    perspective: 500px;
    height: 320px;
    box-shadow: none !important;
}

    .mfaPanel > .front {
        float: none;
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        transform-style: preserve-3d;
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-transition: all .4s ease-in-out;
        transition: all .4s ease-in-out;
        z-index: 900;
        -webkit-transform: rotateX(0deg);
        -moz-transform: rotateX(0deg);
        transform: rotateX(0deg);
    }

    .mfaPanel > .back {
        float: none;
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        transform-style: preserve-3d;
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-transition: all .4s ease-in-out;
        transition: all .4s ease-in-out;
        z-index: 800;
        -webkit-transform: rotateX(-179deg);
        -moz-transform: rotateX(-179deg);
        transform: rotateX(-179deg);
    }

    .mfaPanel.flip > .front {
        -webkit-transform: rotateX(180deg);
        -moz-transform: rotateX(180deg);
        transform: rotateX(180deg);
    }

    .mfaPanel.flip > .back {
        z-index: 1000;
        -webkit-transform: rotateX(0deg);
        -moz-transform: rotateX(0deg);
        transform: rotateX(0deg);
    }

    .mfaPanel.flip .action {
        display: none;
    }

.loginPanel {
    position: relative;
    -webkit-perspective: 600px;
    -moz-perspective: 600px;
    perspective: 600px;
    height: 330px;
    box-shadow: none !important;
    margin-bottom: 0;
}

    .loginPanel > .front {
        float: none;
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        transform-style: preserve-3d;
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-transition: all .4s ease-in-out;
        transition: all .4s ease-in-out;
        z-index: 900;
        -webkit-transform: rotateX(0deg);
        -moz-transform: rotateX(0deg);
        transform: rotateX(0deg);
    }

    .loginPanel > .back {
        float: none;
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        transform-style: preserve-3d;
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-transition: all .4s ease-in-out;
        transition: all .4s ease-in-out;
        z-index: 800;
        -webkit-transform: rotateX(-179deg);
        -moz-transform: rotateX(-179deg);
        transform: rotateX(-179deg);
    }

    .loginPanel.flip > .front {
        -webkit-transform: rotateX(180deg);
        -moz-transform: rotateX(180deg);
        transform: rotateX(180deg);
    }

    .loginPanel.flip > .back {
        z-index: 1000;
        -webkit-transform: rotateX(0deg);
        -moz-transform: rotateX(0deg);
        transform: rotateX(0deg);
    }

    .loginPanel.flip .action {
        display: none;
    }

    .loginPanel.flippy > .back {
        z-index: 1000;
        -webkit-transform: rotateX(-360deg);
        -moz-transform: rotateX(-360deg);
        transform: rotateX(-360deg);
    }

.block ol li {
    text-align: left;
    margin: 0 0 0 28px;
}

.block .action {
    display: block;
    padding: 3px;
    background: #333;
    text-align: right;
    font-size: .8em;
    opacity: 0;
    position: absolute;
    cursor: pointer;
    -webkit-transition: opacity .2s linear;
}

.block:hover .action {
    opacity: .7;
}

.open > .dropdown-menu {
    display: block;
    z-index: 10000;
}

.inputOnTable {
    width: auto;
    padding: 0;
    border: 0 none;
    background: transparent none repeat scroll 0 0;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0) inset;
    border-radius: 0;
}

    .inputOnTable:focus {
        background-color: white;
    }

    .inputOnTable[disabled] {
        background-color: transparent;
        opacity: 1;
    }

.white {
    color: navajowhite;
}

.PDFIteminner {
    box-sizing: border-box;
    border: none;
    width: 100%;
    height: auto;
    padding: 10px;
    min-height: 150px;
    border-radius: 1.8em;
    background-color: white;
}

.PDFItem {
    margin: 10px;
    background: -webkit-linear-gradient(#a6a6a6, #262626);
    background: -o-linear-gradient(#a6a6a6, #262626);
    background: -moz-linear-gradient(#a6a6a6, #262626);
    background: linear-gradient(#a6a6a6, #262626);
    width: 30%;
    max-width: 250px;
    height: auto;
    padding: 1px;
    border-radius: 1.8em;
}

.add-check > .btn {
    min-width: 150px;
    border: 1px groove #e6e6e6;
}

.add-check > .btn-sm {
    min-width: 100px !important;
}

/* BOOTSTRAP-MIGRATION Phase 6e: default.css paired btn-group-xs>btn-default.active with
   btn-group-sm>btn-secondary.active. After the BS3→BS5 btn-default→btn-secondary rename,
   btn-group-xs>btn-secondary.active has NO matching rule. BS5 falls back to
   .btn.active { background-color: var(--bs-btn-active-bg) } which applies an
   unexpected gray (#5c636a), making the selected state visually unclear.
   Fix: explicitly declare the active state for btn-group-xs with btn-secondary (and
   the legacy btn-default name as a fallback) using the same blue as btn-group-sm. */
.btn-group-xs > .btn-secondary.active,
.btn-group-xs > .btn-default.active,
.btn-group-xs > .btn-secondary:active {
    background-color: var(--primary-color, #0054a6) !important;
    border-color: var(--primary-color, #0054a6) !important;
    color: var(--Font-Color-for-main-Theme-color, #fff) !important;
}

.btn-group-xs > .btn-secondary:hover,
.btn-group-xs > .btn-default:hover {
    background-color: var(--primary-color, #0054a6);
    border-color: var(--primary-color, #0054a6);
    color: var(--Font-Color-for-main-Theme-color, #fff);
}

/* BOOTSTRAP-MIGRATION Phase 6e: float-end (float:right) is ignored on flex items.
   Any flex container (.modal-header, .card-header when made flex, .eqi-container, etc.)
   that contains a .float-end child needs margin-left:auto to push it right instead.
   This is a broad safety rule — the margin only has effect when the parent is flex;
   in block containers float:right on the element itself still works as expected. */
.flex-container > .float-end,
.eqi-container > .float-end,
.modal-header > .float-end,
.card-header > .float-end,
.card-footer > .float-end,
[style*="display:flex"] > .float-end,
[style*="display: flex"] > .float-end {
    margin-left: auto;
    float: none;
}

/* BOOTSTRAP-MIGRATION Phase 6e: Glyphicons removed — replaced with FA6 Pro.
   Old: font-family "Glyphicons Halflings", content "\e013" (glyphicon-ok).
   New: font-family "Font Awesome 6 Pro", content "\f00c" (fa-check), weight 900 (solid). */
.add-check .active:before {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: "Font Awesome 6 Pro";
    font-style: normal;
    font-weight: 900;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\f00c";
    margin-right: 4px;
}

.green {
    color: #00AB6F;
}

.red {
    color: #B22400 !important;
}

.blue {
    color: #0054a6;
}

.gray {
    color: #666666;
}

.black {
    color: #000000;
}

.lightBlue {
    color: #4b8df7;
}

.linkBlue {
    color: #0054A6;
}

.lightGray {
    color: #D3D3D3;
}

.yellow {
    color: #dbdb14
}

li.disabled {
    pointer-events: none;
    opacity: 0.6;
}

.slider {
    display: inline-block;
    vertical-align: middle;
    position: relative;
}

    .slider input {
        display: none;
    }

    .slider .tooltip-inner {
        white-space: nowrap;
    }

    .slider.slider-horizontal {
        width: 210px;
        height: 20px;
    }

        .slider.slider-horizontal .slider-track {
            height: 10px;
            width: 100%;
            margin-top: -5px;
            top: 50%;
            left: 0;
        }

        .slider.slider-horizontal .slider-selection {
            height: 100%;
            top: 0;
            bottom: 0;
        }

        .slider.slider-horizontal .slider-handle {
            margin-left: -10px;
            margin-top: -5px;
        }

    .slider.slider-vertical {
        height: 100%;
        width: 20px;
    }

        .slider.slider-vertical .slider-track {
            width: 8px;
            height: 100%;
            margin-left: -4px;
            left: 50%;
            top: 0;
        }

        .slider.slider-vertical .slider-selection {
            width: 100%;
            left: 0;
            top: 0;
            bottom: 0;
        }

        .slider.slider-vertical .slider-handle {
            margin-left: -4px;
            margin-top: -8px;
            z-index: 1;
        }

.slider-track {
    position: absolute;
    cursor: pointer;
    background-color: #f7f7f7;
    background-image: -moz-linear-gradient(top, #f5f5f5, #f9f9f9);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(#f9f9f9));
    background-image: -webkit-linear-gradient(top, #f5f5f5, #f9f9f9);
    background-image: -o-linear-gradient(top, #f5f5f5, #f9f9f9);
    background-image: linear-gradient(to bottom, #f5f5f5, #f9f9f9);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5',endColorstr='#fff9f9f9',GradientType=0);
    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

.slider-selection {
    position: absolute;
    background-color: #f7f7f7;
    background-image: -moz-linear-gradient(top, #f9f9f9, #f5f5f5);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f9f9f9), to(#f5f5f5));
    background-image: -webkit-linear-gradient(top, #f9f9f9, #f5f5f5);
    background-image: -o-linear-gradient(top, #f9f9f9, #f5f5f5);
    background-image: linear-gradient(to bottom, #f9f9f9, #f5f5f5);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff9f9f9',endColorstr='#fff5f5f5',GradientType=0);
    -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
    -moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

.slider-handle {
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 8px;
    background-color: #0e90d2;
    background-image: -moz-linear-gradient(top, #149bdf, #0480be);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#149bdf), to(#0480be));
    background-image: -webkit-linear-gradient(top, #149bdf, #0480be);
    background-image: -o-linear-gradient(top, #149bdf, #0480be);
    background-image: linear-gradient(to bottom, #149bdf, #0480be);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff149bdf',endColorstr='#ff0480be',GradientType=0);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    border: 0 solid transparent;
    opacity: 0.8;
}

    .slider-handle:hover {
        opacity: 1;
    }

.dropdown-header {
    font-weight: bolder;
}

.hoverTable {
    font-family: "din-2014", sans-serif;
    margin: 0 0 15px;
    font-size: 9pt;
    text-align: left;
    width: 100%;
    border-collapse: collapse;
}

    .hoverTable th {
        overflow: hidden;
        white-space: nowrap;
        max-width: 150px;
    }

    .hoverTable td {
        padding: 6px 4px;
        overflow: hidden;
        white-space: nowrap;
    }

    .hoverTable tr {
        background: #ffffff;
    }

        .hoverTable tr:hover {
            background-color: #E0E1E1;
            color: black;
        }

        .hoverTable tr.selected {
            background-color: #CBCCCD;
        }

    .hoverTable thead tr .header {
        background-color: #CBCCCD;
        border: 1px solid #FFF;
        font-size: 8pt;
        padding: 4px;
        color: black;
    }

        .hoverTable thead tr .header:hover {
            background-color: #B6B8B9;
            border: 1px solid #FFF;
            font-size: 8pt;
            padding: 4px;
            color: white;
        }

.hoverTableNoRowOver {
    font-family: "din-2014", sans-serif;
    margin: 0 0 15px;
    font-size: 9pt;
    text-align: left;
    width: 100%;
    border-collapse: collapse;
}

    .hoverTableNoRowOver th {
        overflow: hidden;
        white-space: nowrap;
        max-width: 150px;
    }

    .hoverTableNoRowOver td {
        padding: 6px 4px;
        overflow: hidden;
        white-space: nowrap;
    }

    .hoverTableNoRowOver tr {
        background: #F0F0F6;
    }

        .hoverTableNoRowOver tr.selected {
            background-color: #CBCCCD;
        }

    .hoverTableNoRowOver thead tr .header {
        background-color: #CBCCCD;
        border: 1px solid #FFF;
        font-size: 8pt;
        padding: 4px;
        color: black;
    }

        .hoverTableNoRowOver thead tr .header:hover {
            background-color: #B6B8B9;
            border: 1px solid #FFF;
            font-size: 8pt;
            padding: 4px;
            color: white;
        }

.trafficLogGrid td {
    padding-top: 5px;
    padding-bottom: 5px;
    vertical-align: top;
}

ul.trafficLogUL {
    margin: 0;
    padding: 0;
}

.trafficLogUL li {
    margin: 0 !important;
}

.flexLoader {
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    overflow: hidden;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -moz-align-items: center;
    -webkit-align-items: center;
    align-items: center;
    z-index: 66000;
    background-color: rgba(229, 241, 255, 0.6);
    border-color: #dcdcdc;
    -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 0 rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 0 rgba(255, 255, 255, 0.1);
}

    .flexLoader:after {
        display: block;
        content: "";
        margin: 0 auto;
        border-top: 1.1em solid rgba(255, 255, 255, 0.2);
        border-right: 1.1em solid rgba(255, 255, 255, 0.2);
        border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
        border-left: 1.1em solid #ffffff;
        -webkit-animation: load8 1.1s infinite linear;
        animation: load8 1.1s infinite linear;
        border-radius: 50%;
        width: 12em;
        height: 12em;
    }

.list-unstyled li {
    margin: 4px;
}

.list-unstyled .label {
    width: 150px;
    font-size: 100%;
    color: black;
    border: 1px solid #fff;
    text-align: left;
}

.top-nav > li {
    padding-right: 5px;
}

/* BOOTSTRAP-MIGRATION Phase 6e: BS5 btn-group-sm sets CSS custom properties that override
   our global .btn size reduction, making these smaller than BS3. Restore to BS3 default
   btn dimensions so they match pre-migration appearance. */
.btn-call-select {
    padding: 6px 10px !important;
    font-size: 14px !important;
}

.dropdown-fill:not(.dropdown-menu):not([class*="col-"]) {
    /* BOOTSTRAP-MIGRATION Phase 6e: BS5 .btn-group sets display:inline-flex, making
       the dropdown-fill element an inline box. That prevents width:100% from stretching
       it to fill a flex or block parent (the form row's flex:1 1 auto div).
       Force display:block so it participates in block formatting and reliably fills
       its containing block regardless of whether btn-group is also present.
       Scoped to :not(.dropdown-menu) — some legacy HTML applies dropdown-fill directly
       to the <ul class="dropdown-menu"> itself. Without this exclusion, display:block
       would override BS5's display:none on the menu, making all dropdowns stuck open.
       Scoped to :not([class*="col-"]) — when dropdown-fill is on a col-md-8 wrapper,
       width:100% (specificity 0,2,0) overrides col-md-8's width:66.66% (0,1,0),
       making the column 100% wide and causing flex row overflow. The toggle inside
       still gets width:100% via .dropdown-fill .dropdown-toggle. */
    display: block;
    width: 100%;
}

    .dropdown-fill .dropdown-menu {
        min-width: 100%;   /* at minimum match the button width */
        width: max-content; /* grow wider than the button when items are longer */
    }

    .dropdown-fill .dropdown-toggle {
        /* BOOTSTRAP-MIGRATION Phase 6e: In BS3 the caret was a real .caret child element;
           text-align:right + padding-right:20px reserved space for it at the far right.
           In BS5 the caret is a ::after pseudo-element that participates in inline flow.
           Fix: make the button a flex row — .selected span gets flex:1 (fills width,
           anchors text left) and the ::after caret naturally sits at the right edge.
           No special padding-right needed; normal button padding is sufficient.

           min-height: converting to display:flex removed a side effect BS3 relied on —
           a plain inline-block/block button reserves one line's height even with zero
           content, but a flex container with zero children (e.g. when the ko-bound
           .selected div isn't rendered because nothing is selected) can collapse well
           below that, making empty dropdowns visibly shorter than populated ones.
           24px is the tuned value for this default tier — do not change without
           verifying against every .dropdown-fill instance app-wide relying on it, since
           this is the base rule (not scoped to one tier). See the .btn-group-xs/.btn-sm/
           .text-sm overrides directly below for other size tiers. */
        width: 100%;
        min-height: 24px;
        display: flex !important;
        align-items: center;
        text-align: left;
        padding-right: 8px;
    }

    /* .btn-group-xs shrinks the inner .btn to a much smaller size (padding:1px 5px;
       font-size:0.75rem — see .btn-group-xs > .btn elsewhere in this file), so the
       34px default above would make empty buttons noticeably taller than populated
       ones in this variant. 21px matches that smaller size's own line-height +
       padding + border. */
    .dropdown-fill.btn-group-xs .dropdown-toggle {
        min-height: 21px;
    }

    /* .btn-sm on the toggle itself (not via .btn-group-xs) — e.g. Portfolio's
       Status/Type/Owns filters, Customer Info's email-type picker. Computes to
       ~27.4px (smaller padding + font-size than the default .btn); 28px matches. */
    .dropdown-fill .dropdown-toggle.btn-sm,
    .dropdown-fill.btn-group-sm .dropdown-toggle {
        min-height: 22px;
    }

    /* .text-sm alone (font-size:0.95em, no padding override) computes to ~32.45px —
       close to but distinct from the 34px default tier. */
    .dropdown-fill .dropdown-toggle.text-sm {
        min-height: 23px;
    }

    /* filters.html has one button with both .btn-sm and .text-sm — pin it to the
       .btn-sm tier explicitly so a future stylesheet reorder can't flip which of
       the two equal-specificity rules above wins. */
    .dropdown-fill .dropdown-toggle.btn-sm.text-sm {
        min-height: 28px !important;
    }

	#issuePopup .dropdown-fill .dropdown-toggle {
        min-height: 34px;
    }
	
    .dropdown-fill .selected {
        flex: 1 1 auto;
        min-width: 0;
        float: none;
        text-align: left;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* BOOTSTRAP-MIGRATION Phase 6e: ::after caret — always push to right edge.
       When .selected is present it uses flex:1 1 auto and grows to fill the button;
       ::after follows at the right. But when .selected is absent (e.g. Make dropdown
       uses ko if which doesn't render the span when nothing is selected) the ::after
       is the only flex item and sits at flex-start (far left) by default.
       margin-left:auto on a flex item consumes all remaining free space — so whether
       .selected is present or absent, ::after is always pushed to the right edge. */
    .dropdown-fill .dropdown-toggle::after {
        margin-left: auto;
        flex-shrink: 0;
    }


    .dropdown-fill .caret {
        /* BOOTSTRAP-MIGRATION Phase 6e: the -8px was a BS3 hack to compensate for
           padding-right:20px on the toggle. Now that the toggle uses flex layout with
           padding-right:8px, the caret sits naturally as a flex item — no negative
           margin needed. Reset to 0 so it doesn't bleed outside the button. */
        flex-shrink: 0;
        margin-left: 4px;
        margin-right: 0;
    }

/* BOOTSTRAP-MIGRATION Phase 6e: Utility class to suppress the BS5 ::after caret on
   dropdown toggles that contain only an icon. In BS3 the caret was a real .caret element
   that you could omit; in BS5 it is always injected via ::after on .dropdown-toggle.
   Add class="dropdown-toggle no-caret" to icon-only dropdown triggers. */
.dropdown-toggle.no-caret::after {
    display: none !important;
}

.btn-circle {
    width: 24px;
    height: 24px;
    padding: 0;
    font-size: 12px;
    line-height: 1;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.trim-link {
    background-color: #b4c6e5;
    border-radius: 4px;
    box-shadow: 0 0 0 0.7px #899bcd;
    color: #006699;
    padding-left: 5px;
    padding-right: 5px;
}

    .trim-link:hover {
        box-shadow: 0 0 0 1px #899bcd inset;
        text-decoration: underline !important;
        padding-bottom: 1px;
    }

    .trim-link:focus {
        outline: none !important;
        text-decoration: none;
    }

.btn-icon {
    padding: 2px 6px;
}

    .btn-icon > .fas,
    .btn-icon > .far,
    .btn-icon > .fa-solid,
    .btn-icon > .fa-regular {
        font-size: 11pt;
    }

.dropdown-menu {
    max-height: 20em;
    overflow-y: auto;
    z-index: 1009;
    /* BOOTSTRAP-MIGRATION: dropdowns whose menu wasn't given an explicit width
       (or whose width was left at Bootstrap's default) clip long item text
       behind a horizontal scrollbar instead of growing to fit. width:max-content
       lets the menu grow wider when an item needs more room. Any dropdown-menu
       with its own inline width style, or a more specific rule like
       .dropdown-fill's, is unaffected by this.
       NOTE: min-width:100% is intentionally NOT set here — see the scoped rule
       below. On a standalone right-click context menu (a bare <ul class="dropdown-menu">
       that JS positions with position:absolute/fixed at the cursor), 100% resolves
       against a huge positioned ancestor / the viewport and stretches the menu far
       too wide. Those menus size to their content via width:max-content instead. */
    width: max-content;
}

/* BOOTSTRAP-MIGRATION: keep "at least as wide as its toggle" behavior, but ONLY
   for dropdowns that actually hang off a toggle. Bootstrap always nests a toggle
   dropdown inside one of these wrappers (required for Popper positioning), so 100%
   resolves against the narrow button/group — the intended behavior. Standalone
   context menus live outside any of these wrappers and are therefore excluded,
   fixing the app-wide "menu is way too wide" bug. */
.dropdown > .dropdown-menu,
.dropup > .dropdown-menu,
.dropend > .dropdown-menu,
.dropstart > .dropdown-menu,
.btn-group > .dropdown-menu,
.btn-group-vertical > .dropdown-menu,
.input-group > .dropdown-menu,
.input-group-btn > .dropdown-menu {
    min-width: 100%;
}

/* BOOTSTRAP-MIGRATION: autofit right-aligned selector menus to their content.
   The Work Plan Store/Viewing selectors carry inline max-width caps (450px/300px)
   that clip long "Store - Branch" names now that the old accidental min-width:100%
   stretch is gone. width:max-content (matching the base rule) grows the menu to its
   longest item; !important is required to defeat the inline max-width. Menus that
   already have no cap (e.g. the Traffic Log store selector) are unaffected — they
   were autofitting via the base rule already. This lives in CSS (a direct <link>,
   always fresh) so it also holds when the HTML template is served from browser
   cache with the old inline caps still present. */
.dropdown-menu.dropdown-menu-right {
    width: max-content !important;
    max-width: none !important;
}

    .dropdown-menu > li > a,
    .dropdown-menu > li:not(:has(a)) {
        /* BOOTSTRAP-MIGRATION Phase 6e: removed overflow:hidden/text-overflow:ellipsis.
           white-space:nowrap lets the menu grow wider instead of wrapping or clipping text.
           display:block + width:100%: BS5 removed the BS3 block-display rule for li > a.
           Without it the <a> is inline and active/hover backgrounds only cover text width.
           color: BS5 <a> elements inherit --bs-link-color (blue); dropdown items should
           use body text color (#333) to match BS3 appearance.
           !important needed: style-workplan.css loads after style.css in the bundle and
           can override this rule without !important.
           The li:not(:has(a)) branch covers dropdown items whose text is bound directly
           on the <li> with no <a> wrapper (e.g. the Department picker in
           trafficloggrid_classic.html) — without it those items get none of this padding
           and their text sits flush against the menu's left edge, unlike every other
           picker in the app.
           NOTE: display is intentionally NOT !important — Knockout's visible binding hides
           via a non-important inline display:none, which must win. block still applies when
           shown (BS5 default is inline with 0 specificity; style-workplan.css agrees on block),
           so items keep full-width block layout while visible:false can hide them again. */
        display: block;
        width: 100% !important;
        white-space: nowrap;
        padding: 5px 15px !important;
        color: #333 !important;
        text-decoration: none !important;
        background-color: transparent;
        /* BOOTSTRAP-MIGRATION Phase 6e: BS3's .dropdown-menu > li > a explicitly set
           font-weight:normal. Without it, a dropdown nested inside a bold ancestor
           (e.g. a <th>, which is bold by default) inherits that bold weight — as seen
           in the Step 2 "Options" menu of the survey editor, nested inside a <th>. */
        font-weight: normal !important;
    }

    .dropdown-menu > li > a:hover,
    .dropdown-menu > li > a:focus,
    .dropdown-menu > li:not(:has(a)):hover,
    .dropdown-menu > li:not(:has(a)):focus {
        /* BOOTSTRAP-MIGRATION Phase 6e: Restore BS3-era light-gray dropdown hover.
           default.css has this rule but only sets background-color without a color
           reset — BS5's blue link-hover-color bleeds through. Using hardcoded #333
           instead of var(--bs-body-color) because CSS variables can fail to resolve
           inside pseudo-class rules in some browser/bundler combinations.
           !important ensures this wins over any later-loaded stylesheet. */
        background-color: #F5F5F5 !important;
        color: #333 !important;
        text-decoration: none !important;
    }

    /* BOOTSTRAP-MIGRATION Phase 6e: Active dropdown item — theme background + white text.
       BS3 styled .active li with a blue background and white text automatically.
       In BS5 the .active class on <li> doesn't carry the same built-in styles, and our
       blanket color:#333 !important rule above applies to ALL li > a including active ones,
       painting the text black on top of whatever dark background the li gets.
       Restore the BS3 pattern: theme-color background + white text for active items. */
    .dropdown-menu > li.active > a,
    .dropdown-menu > li.active > a:hover,
    .dropdown-menu > li.active > a:focus,
    .dropdown-menu > li.active:not(:has(a)),
    .dropdown-menu > li.active:not(:has(a)):hover,
    .dropdown-menu > li.active:not(:has(a)):focus {
        background-color: var(--primary-color, #0054a6) !important;
        color: #fff !important;
        text-decoration: none !important;
    }

#social {
    -ms-transform: rotate(270deg);
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
    display: inline-block;
    float: right;
    margin-right: -12px;
    color: black;
}

.calendar_default_rowheader_inner {
    font-size: 1em;
}

.calendar_default_corner {
    visibility: hidden;
}

.btn-NoBorders {
    box-shadow: 0 0 0 rgba(255, 255, 255, 0.15) inset, 0px 0 0 rgba(0, 0, 0, 0.075) !important;
    padding: 0;
    border:none !important;
    background-color:transparent !important;
}

    .btn-NoBorders > img {
        width: 20px;
    }

/* BOOTSTRAP-MIGRATION Phase 6e: .btn-block was removed in Bootstrap 5.
   Re-declared here so existing HTML requires no changes.
   BS5 equivalent is d-grid on a wrapper or w-100 on the button itself,
   but re-adding the class is the zero-HTML-change path for 9 usages across 4 files. */
.btn-block {
    display: block;
    width: 100%;
}

.table-noborder {
    width: 100%;
}

    .table-noborder > tbody > tr > td {
        text-align: center;
    }

    .table-noborder > thead > tr > th {
        text-align: center;
        background-color: transparent !important;
        color:black !important;
    }

        .table-noborder > thead > tr > th > h3 {
            color: red;
        }

        .table-noborder > thead > tr > th > h5 {
            font-weight: bold;
        }

.input-xs {
    height: 23px;
    padding: 2px 5px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
}

/* Plain, framework-free search box: one flex row with a single border, a
   decorative/clickable search icon, a borderless input (placeholder carries the
   "Search" label instead of a separate element), and an optional clear icon.
   Deliberately not built on any Bootstrap form-control/input-group class, so it
   can't be broken again by a future Bootstrap version the way .has-feedback and
   .input-group-text's default chrome were. Pattern lifted from the traffic log
   page's .tl-search-box (Pages/trafficlog_new/trafficlog_new.html), just made
   reusable here instead of living in a page-local <style> block. */
.search-box-inline {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #d0d0d0;
    border-radius: 6px;
    height: 23px;
    overflow: hidden;
}

    .search-box-inline:focus-within {
        border-color: var(--primary-color, #0054a6);
        box-shadow: 0 0 0 2px rgba(0, 84, 166, 0.12);
    }

    .search-box-inline input {
        border: none;
        outline: none;
        background: transparent;
        font-size: 12px;
        color: #333;
        flex: 1 1 auto;
        min-width: 0;
        padding: 0 4px;
        height: 100%;
    }

    .search-box-inline .fa-search,
    .search-box-inline .fa-times {
        flex-shrink: 0;
        padding: 0 7px;
        font-size: 11px;
        color: #bbb;
    }

    .search-box-inline .fa-times {
        cursor: pointer;
    }

.calendar_g_main {
    border: 1px solid #dddddd;
    font-family: "din-2014", sans-serif;
    font-size: 12px;
}

    .calendar_g_main td {
        font-family: "din-2014", sans-serif;
        font-size: 12px;
    }

.calendar_g_event_inner {
    position: absolute;
    overflow: hidden;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: 0;
    color: #1d1d1d;
    background-color: #9a9cff;
    padding: 3px;
    border: 1px solid rgba(255, 255, 255, 0.75);
}

.calendar_g_alldayevent_inner {
    position: absolute;
    overflow: hidden;
    left: 1px;
    right: 0;
    top: 1px;
    bottom: 0;
    margin: 2px;
    color: #1d1d1d;
    background-color: #9a9cff;
    padding: 2px;
    border: 1px solid #373ad7;
    text-align: left;
}

.calendar_g_alldayheader_inner {
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border-right: 1px solid #dddddd;
    border-bottom: 1px solid #dddddd;
    color: #555555;
    background: #ffffff;
}

.calendar_g_colheader_inner {
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border-right: 1px solid #dddddd;
    border-bottom: 1px solid #dddddd;
    color: #555555;
    background: #ffffff;
}

.calendar_g_rowheader_inner {
    font-size: 12px;
    text-align: right;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border-right: 1px solid #dddddd;
    border-bottom: 1px solid #dddddd;
    color: #555555;
    background: #ffffff;
    padding: 2px;
}

.calendar_g_rowheader_minutes {
    font-size: 12px;
    xvertical-align: super;
    padding-left: 2px;
    padding-right: 2px;
}

.calendar_g_corner_inner {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border-right: 1px solid #dddddd;
    border-bottom: 1px solid #dddddd;
    color: #ffffff;
    background: #ffffff;
}

.calendar_g_cornerright_inner {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border-right: 1px solid #dddddd;
    border-bottom: 1px solid #dddddd;
    color: #ffffff;
    background: #ffffff;
}

.calendar_g_cell_inner {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border-right: 1px solid #dddddd;
    border-bottom: 1px solid #dddddd;
    background: #ffffff;
}

.calendar_g_cell_business .calendar_g_cell_inner {
    background: #ffffff;
}

.calendar_g_message {
    padding: 10px;
    opacity: 0.9;
    filter: alpha(opacity=90);
    color: #1d1d1d;
    background: #f9edbe;
}

.calendar_g_shadow_inner {
    background-color: #666666;
    opacity: 0.5;
    filter: alpha(opacity=50);
    height: 100%;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

.calendar_g_event_delete {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAI5JREFUKFNtkLERgCAMRbmzdK8s4gAUlhYOYEHJEJYOYOEwDmGBPxC4kOPfvePy84MGR0RJ2N1A8H3N6DATwSQ57m2ql8NBG+AEM7D+UW+wjdfUPgerYNgB5gOLRHqhcasg84C2QxPMtrUhSqQIhg7ypy9VM2EUZPI/4rQ7rGxqo9sadTegw+UdjeDLAKUfhbaQUVPIfJYAAAAASUVORK5CYII=) center center no-repeat;
    opacity: 0.6;
    -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=60)';
    cursor: pointer;
}

    .calendar_g_event_delete:hover {
        opacity: 1;
        -ms-filter: none;
    }

.calendar_g_scroll_up {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAB3RJTUUH2wESDiYcrhwCiQAAAAlwSFlzAAAuIwAALiMBeKU/dgAAAARnQU1BAACxjwv8YQUAAACcSURBVHjaY2AgF9wWsTW6yGMlhi7OhC7AyMDQzMnBXIpFHAFuCtuaMTP+P8nA8P/b1x//FfW/HHuF1UQmxv+NUP1c3OxMVVhNvCVi683E8H8LXOY/w9+fTH81tF8fv4NiIpBRj+YoZtZ/LDUoJmKYhsVUpv0MDiyMDP96sIYV0FS2/8z9ICaLlOhvS4b/jC//MzC8xBG0vJeF7GQBlK0xdiUzCtsAAAAASUVORK5CYII=);
}

.calendar_g_scroll_down {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAALiMAAC4jAXilP3YAAACqSURBVChTY7wpam3L9J+xmQEP+PGPKZZxP4MDi4zI78uMDIwa2NT+Z2DYovrmiC+TI8OBP/8ZmEqwGvif4e8vxr+FIDkmEKH25vBWBgbG0+iK/zEwLtF+ffwOXCGI8Y+BoRFFIdC030x/WmBiYBNhpgLdswNJ8RSYaSgmgk39z1gPUfj/29ef/9rwhQTDHRHbrbdEbLvRFcGthkkAra/9/uMvhkK8piNLAgCRpTnNn4AEmAAAAABJRU5ErkJggg==);
}

#searchCriteria {
    border: 1px solid rgba(0, 0, 0, 0.5);
    padding: 5px;
}

.btn-search-view {
    margin-top: -10px;
    width: 110px;
    margin-left: 5px;
    height: 25px;
    padding: 0;
}

.modal-title {
    color: black;
    font-weight: 600;
}

/* Modal bottom corners — modals with no .modal-footer leave the body as the
   last child with SQUARE bottom corners painting over the rounded .modal-content
   (rounded top / square bottom). Round the last child to the SAME inner radius
   BS5 already gives the header/footer (--bs-modal-inner-border-radius = outer
   radius minus the border width) so it hugs the border exactly like the top —
   no white sliver, no extra rounding. The header is left alone (BS5 handles it).
   Cosmetic only — overflow is untouched, so dropdowns/tooltips/date pickers that
   escape the modal still work. */
.modal-content > :last-child {
    border-bottom-left-radius: var(--bs-modal-inner-border-radius);
    border-bottom-right-radius: var(--bs-modal-inner-border-radius);
}

.modal-header {
    /* BOOTSTRAP-MIGRATION Phase 6e: removed !important — it was preventing KO's
       visible:false binding (which sets inline display:none) from hiding .modal-header
       elements. Without !important, KO's inline style wins correctly. BS5 already
       sets display:flex on .modal-header, so this rule still ensures the correct
       alignment/spacing overrides. */
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 30px;
    cursor: move;
    padding: 2px 15px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

    /* BOOTSTRAP-MIGRATION Phase 6e: BS5 removed the .close class entirely — it now
       uses .btn-close with an SVG background image. Existing modals use .close with
       an × character. Restore BS3 appearance here.
       BS5 .modal-header is display:flex; justify-content:space-between — with the
       HTML order <button.close> then <h4.modal-title>, the button appears on the
       LEFT and the title on the RIGHT (backwards).
       Fix: .modal-title takes flex:1 to fill available space (anchors title to left),
       .close uses margin-left:auto to push it to the far right. The order properties
       are kept as belt-and-suspenders for HTML files that have the title before the
       button. */
    .modal-header .close {
        order: 2;
        flex-shrink: 0;
        margin-left: auto;
        padding: 0;
        cursor: pointer;
        background: transparent;
        border: 0;
        -webkit-appearance: none;
        appearance: none;
        font-size: 21px;
        font-weight: bold;
        line-height: 1;
        color: #000;
        text-shadow: 0 1px 0 #fff;
        opacity: 0.5;
        margin-top: 0;
    }
    .modal-header .close:hover,
    .modal-header .close:focus {
        color: #000;
        text-decoration: none;
        opacity: 0.75;
    }
	/* DM-8132: the stock sidebar's close button (worksheetmodal.html and its Autovance
       variant, autovance_worksheetmodal.html) also uses class="close", but lives inside a
       .card-header, not .modal-header, so it never got the styling above. BS5 doesn't
       define .close at all (renamed to .btn-close), so without this it renders as a bare,
       unstyled browser button - gray background, border, default padding - next to an
       otherwise flat, borderless header. Scoped to these two modals rather than a generic
       .card-header .close, since other card-headers in the app haven't been surveyed for
       the same issue. */
    #worksheetModal .card-header .close,
    #autovance_worksheetModal .card-header .close {
        flex-shrink: 0;
        padding: 0;
        cursor: pointer;
        background: transparent;
        border: 0;
        -webkit-appearance: none;
        appearance: none;
        font-size: 21px;
        font-weight: bold;
        line-height: 1;
        color: #000;
        text-shadow: 0 1px 0 #fff;
        opacity: 0.5;
        margin-top: 0;
    }
    #worksheetModal .card-header .close:hover,
    #worksheetModal .card-header .close:focus,
    #autovance_worksheetModal .card-header .close:hover,
    #autovance_worksheetModal .card-header .close:focus {
        color: #000;
        text-decoration: none;
        opacity: 0.75;
    }
	
    .modal-header .modal-title {
        order: 1;
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* BOOTSTRAP-MIGRATION Phase 6e: BS5 close button class */
    .modal-header .btn-close {
        order: 2;
        flex-shrink: 0;
        margin-left: auto;
        margin-top: 2px;
    }

    .modal-header h4 {
        font-size: 1.2em;
    }

.asterisk {
    color: red;
    font-size: 5px;
}

.daterangepicker.dropdown-menu {
    max-width: none;
    z-index: 3000;
}

.daterangepicker.opensleft .ranges {
    float: left;
    margin: 4px;
}

.daterangepicker.opensleft .calendar {
    float: left;
    margin: 4px;
}

.daterangepicker.opensleft:before {
    position: absolute;
    top: -7px;
    right: 9px;
    display: inline-block;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #ccc;
    border-left: 7px solid transparent;
    border-bottom-color: rgba(0, 0, 0, 0.2);
    content: '';
}

.daterangepicker.opensleft:after {
    position: absolute;
    top: -6px;
    right: 10px;
    display: inline-block;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #fff;
    border-left: 6px solid transparent;
    content: '';
}

.daterangepicker.opensright .ranges {
    float: right;
    margin: 4px;
}

.daterangepicker.opensright .calendar {
    float: right;
    margin: 4px;
}

.daterangepicker.opensright:before {
    position: absolute;
    top: -7px;
    left: 9px;
    display: inline-block;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #ccc;
    border-left: 7px solid transparent;
    border-bottom-color: rgba(0, 0, 0, 0.2);
    content: '';
}

.daterangepicker.opensright:after {
    position: absolute;
    top: -6px;
    left: 10px;
    display: inline-block;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #fff;
    border-left: 6px solid transparent;
    content: '';
}

.daterangepicker.openscenter .ranges {
    float: right;
    margin: 4px;
}

.daterangepicker.openscenter .calendar {
    float: right;
    margin: 4px;
}

.daterangepicker.openscenter:before {
    position: absolute;
    top: -7px;
    left: 0;
    right: 0;
    width: 0;
    margin-left: auto;
    margin-right: auto;
    display: inline-block;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #ccc;
    border-left: 7px solid transparent;
    border-bottom-color: rgba(0, 0, 0, 0.2);
    content: '';
}

.daterangepicker.openscenter:after {
    position: absolute;
    top: -6px;
    left: 0;
    right: 0;
    width: 0;
    margin-left: auto;
    margin-right: auto;
    display: inline-block;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #fff;
    border-left: 6px solid transparent;
    content: '';
}

.daterangepicker.single .ranges {
    float: none;
}

.daterangepicker.single .calendar {
    float: none;
}

.daterangepicker {
    position: absolute;
    background: #fff;
    top: 100px;
    left: 20px;
    padding: 4px;
    margin-top: 1px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

    .daterangepicker .ranges {
        width: 160px;
        text-align: left;
    }

        .daterangepicker .ranges .range_inputs > div {
            float: left;
        }

            .daterangepicker .ranges .range_inputs > div:nth-child(2) {
                padding-left: 11px;
            }

        .daterangepicker .ranges input {
            font-size: 11px;
        }

        .daterangepicker .ranges .input-mini {
            border: 1px solid #ccc;
            border-radius: 4px;
            color: #555;
            display: block;
            font-size: 11px;
            height: 30px;
            line-height: 30px;
            vertical-align: middle;
            margin: 0 0 10px 0;
            padding: 0 6px;
            width: 74px;
        }

        .daterangepicker .ranges ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .daterangepicker .ranges li {
            font-size: 13px;
            display: block;
            width: 100%;
            box-sizing: border-box;
            background: #f5f5f5;
            border: none;
            border-bottom: 1px solid #e0e0e0;
            color: #08c;
            padding: 6px 12px;
            margin-bottom: 0;
            border-radius: 0;
            cursor: pointer;
        }

            .daterangepicker .ranges li:hover {
                background: #08c;
                border-bottom: 1px solid #08c;
                color: #fff;
            }

            .daterangepicker .ranges li.active {
                background: #08c;
                border-bottom: 1px solid #08c;
                color: #fff;
            }

    .daterangepicker .calendar {
        display: none;
        max-width: 270px;
    }

        .daterangepicker .calendar th {
            font-family: "din-2014", sans-serif;
            white-space: nowrap;
            text-align: center;
            min-width: 32px;
        }

        .daterangepicker .calendar td {
            font-family: "din-2014", sans-serif;
            white-space: nowrap;
            text-align: center;
            min-width: 32px;
        }

        .daterangepicker .calendar.single .calendar-date {
            border: none;
        }

    .daterangepicker .daterangepicker_start_input label {
        color: #333;
        display: block;
        font-size: 11px;
        font-weight: normal;
        height: 20px;
        line-height: 20px;
        margin-bottom: 2px;
        text-shadow: none;
        text-transform: uppercase;
        width: 74px;
    }

    .daterangepicker .daterangepicker_end_input label {
        color: #333;
        display: block;
        font-size: 11px;
        font-weight: normal;
        height: 20px;
        line-height: 20px;
        margin-bottom: 2px;
        text-shadow: none;
        text-transform: uppercase;
        width: 74px;
    }

    .daterangepicker .calendar-date {
        border: 1px solid #ddd;
        padding: 4px;
        border-radius: 4px;
        background: #fff;
    }

    .daterangepicker .calendar-time {
        text-align: center;
        margin: 8px auto 0 auto;
        line-height: 30px;
    }

    .daterangepicker table {
        width: 100%;
        margin: 0;
    }

    .daterangepicker td {
        text-align: center;
        width: 20px;
        height: 20px;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        cursor: pointer;
        white-space: nowrap;
    }

    .daterangepicker th {
        text-align: center;
        width: 20px;
        height: 20px;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        cursor: pointer;
        white-space: nowrap;
    }

    .daterangepicker td.off {
        color: #999;
    }

    .daterangepicker td.disabled {
        color: #999;
    }

    .daterangepicker option.disabled {
        color: #999;
    }

    .daterangepicker td.available:hover {
        background: #eee;
    }

    .daterangepicker th.available:hover {
        background: #eee;
    }

    .daterangepicker td.in-range {
        background: #ebf4f8;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
    }

    .daterangepicker td.start-date {
        -webkit-border-radius: 4px 0 0 4px;
        -moz-border-radius: 4px 0 0 4px;
        border-radius: 4px 0 0 4px;
    }

    .daterangepicker td.end-date {
        -webkit-border-radius: 0 4px 4px 0;
        -moz-border-radius: 0 4px 4px 0;
        border-radius: 0 4px 4px 0;
    }

    .daterangepicker td.start-date.end-date {
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
    }

    .daterangepicker td.active {
        background-color: #357ebd;
        border-color: #3071a9;
        color: #fff;
    }

        .daterangepicker td.active:hover {
            background-color: #357ebd;
            border-color: #3071a9;
            color: #fff;
        }

    .daterangepicker td.week {
        font-size: 80%;
        color: #ccc;
    }

    .daterangepicker th.week {
        font-size: 80%;
        color: #ccc;
    }

    .daterangepicker select.monthselect {
        font-size: 12px;
        padding: 1px;
        height: auto;
        margin: 0;
        cursor: default;
        margin-right: 2%;
        width: 56%;
    }

    .daterangepicker select.yearselect {
        font-size: 12px;
        padding: 1px;
        height: auto;
        margin: 0;
        cursor: default;
        width: 40%;
    }

    .daterangepicker select.hourselect {
        width: 50px;
        margin-bottom: 0;
    }

    .daterangepicker select.minuteselect {
        width: 50px;
        margin-bottom: 0;
    }

    .daterangepicker select.secondselect {
        width: 50px;
        margin-bottom: 0;
    }

    .daterangepicker select.ampmselect {
        width: 50px;
        margin-bottom: 0;
    }

    .daterangepicker th.month {
        width: auto;
    }

    .daterangepicker.show-calendar .calendar {
        display: block;
    }

    .daterangepicker.dropup {
        margin-top: -5px;
    }

        .daterangepicker.dropup:before {
            top: initial;
            bottom: -7px;
            border-bottom: initial;
            border-top: 7px solid #ccc;
        }

        .daterangepicker.dropup:after {
            top: initial;
            bottom: -6px;
            border-bottom: initial;
            border-top: 6px solid #fff;
        }

.daterangepicker_start_input {
    float: left;
}

.daterangepicker_end_input {
    float: left;
    padding-left: 11px;
}

.nav-tabs-simple {
    font-size: .9em;
    box-shadow: 0 -6.5px 6px -6px rgba(0, 0, 0, 0.3) inset;
    /* BOOTSTRAP-MIGRATION Phase 6e: original border-bottom was invalid CSS (color-only, no
       width or style), so BS5's .nav-tabs { border-bottom: 1px solid #dee2e6 } was bleeding
       through. Override with a proper shorthand to match the original inset shadow look. */
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
    margin-top: 5px;
    position: relative;
    /* BOOTSTRAP-MIGRATION Phase 6e: BS5 .nav is display:flex;flex-wrap:wrap. Keep the same
       flex layout but align tabs to the bottom so the ::after white-bar trick still covers
       the border-bottom line on the active tab. */
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
}

    .nav-tabs-simple > li {
        /* BOOTSTRAP-MIGRATION Phase 6e: BS5 .nav-item has margin:0; override to restore
           the small gap between tabs and the -1px bottom overlap for the active tab trick. */
        margin: 0 2px -1px 0;
        list-style: none;
        /* position:relative makes <li> the containing block for the absolutely-positioned
           badge/orb sibling. Without this, the badge anchors to a distant ancestor and
           renders in the wrong location or behind other tabs. */
        position: relative;
    }

        .nav-tabs-simple > li > a {
            padding: 8px 18px;
            border: none;
            border-radius: 0;
            background: #E6E6E6;
            box-shadow: 0 -1px 4px 0 rgba(0, 0, 0, 0.3);
            color: #606060;
            position: relative;
            z-index: 1;
            cursor: pointer;
            /* BOOTSTRAP-MIGRATION Phase 6e: BS5 .nav-link adds padding and color overrides;
               display:block ensures the tab fills its li and the ::after trick works. */
            display: block;
        }

        .nav-tabs-simple > li:not(.active) > a:hover {
            opacity: 0.9;
        }

        .nav-tabs-simple > li .badge {
            background-color: #CD4D4D;
            position: absolute;
            z-index: 2;  /* above the <a>'s z-index:1 so badge always paints on top */
            top: -4px;
            right: -4px;
            pointer-events: none;
            float: none; /* position:absolute cancels float automatically, but explicit for clarity */
        }

        .nav-tabs-simple > li.active > a,
        .nav-tabs-simple > li > a.active {
            box-shadow: 0 -1px 4px 0 rgba(0, 0, 0, 0.4);
            cursor: default;
        }

            /* BOOTSTRAP-MIGRATION Phase 6e: BS5's tab.js adds .active to the <a> element,
               not the parent <li>. Mirror all active-tab styles for both patterns so the
               "lifted" tab appearance works regardless of where .active lands. */
            .nav-tabs-simple > li.active > a::after,
            .nav-tabs-simple > li > a.active::after {
                position: absolute;
                background: #fff;
                left: 0;
                right: 0;
                height: 6px;
                bottom: -6px;
                content: '';
            }

.panel.with-nav-tabs .panel-heading {
    padding: 5px 5px 1px 5px;
}

/* BOOTSTRAP-MIGRATION Phase 6e: BS5 card equivalent */
.card.with-nav-tabs .card-header {
    padding: 5px 5px 1px 5px;
}

.panel-default > .panel-heading-worksheet {
    background: none !important;
    border-width: 0 0 1px 0;
    padding: 10px 0 3px;
}

/* BOOTSTRAP-MIGRATION Phase 6e: BS5 card equivalent */
.card > .panel-heading-worksheet {
    background: none !important;
    border-width: 0 0 1px 0;
    padding: 10px 0 3px;
}

/* Migration script renamed panel-heading-worksheet → card-heading-worksheet and
   panel-title-content → card-title-content in HTML. Match the new names here. */
.card-header.card-heading-worksheet {
    background: none !important;
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, .125);
    padding: 10px 0 3px;
    color: dimgray !important;
}

.card-header .card-title-content {
    display: inline;
}

.tab-content-simple {
    background: transparent;
    border-radius: 0 0 4px 4px;
    border: 1px solid #ddd;
    border-top-width: 0;
    padding: 6px;
    position: relative;
}

.progress-bar {
    border-radius: 3px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
}

/* BOOTSTRAP-MIGRATION Phase 6e: BS3's .progress was a fixed height:20px with normal
   body font-size. BS5 shrunk both via CSS variables (--bs-progress-height:1rem,
   --bs-progress-font-size:0.75rem) — with this app's root font-size:87.5% (1rem=14px),
   that's 14px tall with 10.5px text, noticeably smaller/harder to read than BS3's 20px
   bar with normal-size text (e.g. the Appts/Hours Booked-Max summary bars in Appt
   Sched, and any other unstyled .progress usage app-wide). Scoped as a CSS-variable
   override (not a plain height/font-size decl) so any .progress that already sets its
   OWN inline height/font-size (e.g. the smaller per-slot bars in scheduler.html) keeps
   that inline value — inline always wins over these var() defaults regardless. */
.progress {
    --bs-progress-height: 20px;
    --bs-progress-font-size: 1rem;
}

.col-rowSpaced > .row:nth-child(n+2) {
    margin-top: 8px;
}

.childSpace > *:nth-child(n+2) {
    margin-top: 5px;
}

.bootstrap-datetimepicker-widget {
    list-style: none;
}

    .bootstrap-datetimepicker-widget .list-unstyled {
        margin: 0;
    }

    .bootstrap-datetimepicker-widget a[data-action] {
        padding: 6px 0;
    }

        .bootstrap-datetimepicker-widget a[data-action]:active {
            box-shadow: none;
        }

    .bootstrap-datetimepicker-widget .timepicker-hour {
        width: 54px;
        font-weight: bold;
        font-size: 1.2em;
        margin: 0;
    }

    .bootstrap-datetimepicker-widget .timepicker-minute {
        width: 54px;
        font-weight: bold;
        font-size: 1.2em;
        margin: 0;
    }

    .bootstrap-datetimepicker-widget .timepicker-second {
        width: 54px;
        font-weight: bold;
        font-size: 1.2em;
        margin: 0;
    }

    .bootstrap-datetimepicker-widget button[data-action] {
        padding: 6px;
    }

    .bootstrap-datetimepicker-widget .btn[data-action="incrementHours"]::after {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        border: 0;
        content: "Increment Hours";
    }

    .bootstrap-datetimepicker-widget .btn[data-action="incrementMinutes"]::after {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        border: 0;
        content: "Increment Minutes";
    }

    .bootstrap-datetimepicker-widget .btn[data-action="decrementHours"]::after {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        border: 0;
        content: "Decrement Hours";
    }

    .bootstrap-datetimepicker-widget .btn[data-action="decrementMinutes"]::after {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        border: 0;
        content: "Decrement Minutes";
    }

    .bootstrap-datetimepicker-widget .btn[data-action="showHours"]::after {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        border: 0;
        content: "Show Hours";
    }

    .bootstrap-datetimepicker-widget .btn[data-action="showMinutes"]::after {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        border: 0;
        content: "Show Minutes";
    }

    .bootstrap-datetimepicker-widget .btn[data-action="togglePeriod"]::after {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        border: 0;
        content: "Toggle AM/PM";
    }

    .bootstrap-datetimepicker-widget .btn[data-action="clear"]::after {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        border: 0;
        content: "Clear the picker";
    }

    .bootstrap-datetimepicker-widget .btn[data-action="today"]::after {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        border: 0;
        content: "Set the date to today";
    }

    .bootstrap-datetimepicker-widget .picker-switch {
        text-align: center;
    }

        .bootstrap-datetimepicker-widget .picker-switch::after {
            position: absolute;
            width: 1px;
            height: 1px;
            margin: -1px;
            padding: 0;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            border: 0;
            content: "Toggle Date and Time Screens";
        }

        .bootstrap-datetimepicker-widget .picker-switch td {
            padding: 0;
            margin: 0;
            height: auto;
            width: auto;
            line-height: inherit;
        }

            .bootstrap-datetimepicker-widget .picker-switch td span {
                line-height: 2.5;
                height: 2.5em;
                width: 100%;
            }

    .bootstrap-datetimepicker-widget table {
        width: 100%;
        margin: 0;
    }

        .bootstrap-datetimepicker-widget table td {
            text-align: center;
            border-radius: 4px;
            height: 54px;
            line-height: 54px;
            width: 54px;
        }

            .bootstrap-datetimepicker-widget table td span {
                display: inline-block;
                width: 54px;
                height: 54px;
                line-height: 54px;
                margin: 2px 1.5px;
                cursor: pointer;
                border-radius: 4px;
            }

                .bootstrap-datetimepicker-widget table td span:hover {
                    background: #eeeeee;
                }

                .bootstrap-datetimepicker-widget table td span.active {
                    background-color: #337ab7;
                    color: #ffffff;
                    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
                }

                .bootstrap-datetimepicker-widget table td span.old {
                    color: #777777;
                }

                .bootstrap-datetimepicker-widget table td span.disabled {
                    background: none;
                    color: #777777;
                    cursor: not-allowed;
                }

                    .bootstrap-datetimepicker-widget table td span.disabled:hover {
                        background: none;
                        color: #777777;
                        cursor: not-allowed;
                    }

        .bootstrap-datetimepicker-widget table th {
            text-align: center;
            border-radius: 4px;
            height: 20px;
            line-height: 20px;
            width: 20px;
        }

            .bootstrap-datetimepicker-widget table th.picker-switch {
                width: 145px;
            }

            .bootstrap-datetimepicker-widget table th.disabled {
                background: none;
                color: #777777;
                cursor: not-allowed;
            }

                .bootstrap-datetimepicker-widget table th.disabled:hover {
                    background: none;
                    color: #777777;
                    cursor: not-allowed;
                }

            .bootstrap-datetimepicker-widget table th.prev::after {
                position: absolute;
                width: 1px;
                height: 1px;
                margin: -1px;
                padding: 0;
                overflow: hidden;
                clip: rect(0, 0, 0, 0);
                border: 0;
                content: "Previous Month";
            }

            .bootstrap-datetimepicker-widget table th.next::after {
                position: absolute;
                width: 1px;
                height: 1px;
                margin: -1px;
                padding: 0;
                overflow: hidden;
                clip: rect(0, 0, 0, 0);
                border: 0;
                content: "Next Month";
            }

        .bootstrap-datetimepicker-widget table thead tr:first-child th {
            cursor: pointer;
        }

            .bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
                background: #eeeeee;
            }

        .bootstrap-datetimepicker-widget table td.cw {
            font-size: .8em;
            height: 20px;
            line-height: 20px;
            color: #777777;
        }

        .bootstrap-datetimepicker-widget table td.day {
            height: 20px;
            line-height: 20px;
            width: 20px;
        }

            .bootstrap-datetimepicker-widget table td.day:hover {
                background: #eeeeee;
                cursor: pointer;
            }

        .bootstrap-datetimepicker-widget table td.hour:hover {
            background: #eeeeee;
            cursor: pointer;
        }

        .bootstrap-datetimepicker-widget table td.minute:hover {
            background: #eeeeee;
            cursor: pointer;
        }

        .bootstrap-datetimepicker-widget table td.second:hover {
            background: #eeeeee;
            cursor: pointer;
        }

        .bootstrap-datetimepicker-widget table td.old {
            color: #777777;
        }

        .bootstrap-datetimepicker-widget table td.new {
            color: #777777;
        }

        .bootstrap-datetimepicker-widget table td.today {
            position: relative;
        }

            .bootstrap-datetimepicker-widget table td.today:before {
                content: '';
                display: inline-block;
                border: 0 0 7px 7px solid transparent;
                border-bottom-color: #337ab7;
                border-top-color: rgba(0, 0, 0, 0.2);
                position: absolute;
                bottom: 4px;
                right: 4px;
            }

        .bootstrap-datetimepicker-widget table td.active {
            background-color: #337ab7;
            color: #ffffff;
            text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
        }

            .bootstrap-datetimepicker-widget table td.active:hover {
                background-color: #337ab7;
                color: #ffffff;
                text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
            }

            .bootstrap-datetimepicker-widget table td.active.today:before {
                border-bottom-color: #fff;
            }

        .bootstrap-datetimepicker-widget table td.disabled {
            background: none;
            color: #777777;
            cursor: not-allowed;
        }

            .bootstrap-datetimepicker-widget table td.disabled:hover {
                background: none;
                color: #777777;
                cursor: not-allowed;
            }

    .bootstrap-datetimepicker-widget .datepicker-decades .decade {
        line-height: 1.8em !important;
    }

    .bootstrap-datetimepicker-widget.dropdown-menu {
        margin: 2px 0;
        padding: 4px;
        width: 19em;
    }

        .bootstrap-datetimepicker-widget.dropdown-menu:before {
            content: '';
            display: inline-block;
            position: absolute;
        }

        .bootstrap-datetimepicker-widget.dropdown-menu:after {
            content: '';
            display: inline-block;
            position: absolute;
        }

        .bootstrap-datetimepicker-widget.dropdown-menu.bottom:before {
            border-left: 7px solid transparent;
            border-right: 7px solid transparent;
            border-bottom: 7px solid #cccccc;
            border-bottom-color: rgba(0, 0, 0, 0.2);
            top: -7px;
            left: 7px;
        }

        .bootstrap-datetimepicker-widget.dropdown-menu.bottom:after {
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            border-bottom: 6px solid white;
            top: -6px;
            left: 8px;
        }

        .bootstrap-datetimepicker-widget.dropdown-menu.top:before {
            border-left: 7px solid transparent;
            border-right: 7px solid transparent;
            border-top: 7px solid #cccccc;
            border-top-color: rgba(0, 0, 0, 0.2);
            bottom: -7px;
            left: 6px;
        }

        .bootstrap-datetimepicker-widget.dropdown-menu.top:after {
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            border-top: 6px solid white;
            bottom: -6px;
            left: 7px;
        }

        .bootstrap-datetimepicker-widget.dropdown-menu.pull-right:before {
            left: auto;
            right: 6px;
        }

        .bootstrap-datetimepicker-widget.dropdown-menu.pull-right:after {
            left: auto;
            right: 7px;
        }

    .bootstrap-datetimepicker-widget.usetwentyfour td.hour {
        height: 27px;
        line-height: 27px;
    }

    .bootstrap-datetimepicker-widget.wider {
        width: 21em;
    }

.input-group.date .input-group-addon {
    cursor: pointer;
}

/* BOOTSTRAP-MIGRATION Phase 6e: BS5 renamed input-group-addon → input-group-text */
.input-group.date .input-group-text {
    cursor: pointer;
}

.ui-datepicker {
    z-index: 4000 !important;
    background-color: #fff;
    border: 1px solid #66AFE9;
    border-radius: 4px;
    box-shadow: 0 0 8px rgba(102, 175, 233, 0.6);
    display: none;
    padding: 2px;
    font-size: 12px;
    width: 175px;
}

    .ui-datepicker a {
        text-decoration: none;
        color: #777;
    }

        .ui-datepicker a:hover {
            text-decoration: none;
            color: #777;
            color: #6F6F6F;
            -webkit-transition: color 0.1s ease-in-out;
            -moz-transition: color 0.1s ease-in-out;
            -o-transition: color 0.1s ease-in-out;
            transition: color 0.1s ease-in-out;
        }

    .ui-datepicker td:hover a {
        color: #6F6F6F;
        -webkit-transition: color 0.1s ease-in-out;
        -moz-transition: color 0.1s ease-in-out;
        -o-transition: color 0.1s ease-in-out;
        transition: color 0.1s ease-in-out;
    }

    .ui-datepicker .ui-datepicker-header {
        margin-bottom: 4px;
        text-align: center;
    }

    .ui-datepicker .ui-datepicker-title {
        font-weight: 700;
    }

    .ui-datepicker select.ui-datepicker-month {
        font-size: x-small;
        border-radius: 3px;
        border-width: thin;
    }

    .ui-datepicker select.ui-datepicker-year {
        font-size: x-small;
        border-radius: 3px;
        border-width: thin;
    }

    .ui-datepicker .ui-datepicker-prev {
        cursor: pointer;
        /* BOOTSTRAP-MIGRATION Phase 6e: Glyphicons removed. Replaced with FA6 Pro arrow-left (\f060). */
        font-family: "Font Awesome 6 Pro";
        -webkit-font-smoothing: antialiased;
        font-style: normal;
        font-weight: 900;
        height: 20px;
        line-height: 1;
        margin-top: 2px;
        width: 30px;
        float: left;
        text-align: left;
    }

        .ui-datepicker .ui-datepicker-prev:before {
            content: "\f060";
        }

    .ui-datepicker .ui-datepicker-next {
        cursor: pointer;
        /* BOOTSTRAP-MIGRATION Phase 6e: Glyphicons removed. Replaced with FA6 Pro arrow-right (\f061). */
        font-family: "Font Awesome 6 Pro";
        -webkit-font-smoothing: antialiased;
        font-style: normal;
        font-weight: 900;
        height: 20px;
        line-height: 1;
        margin-top: 2px;
        width: 30px;
        float: right;
        text-align: right;
    }

        .ui-datepicker .ui-datepicker-next:before {
            content: "\f061";
        }

    .ui-datepicker .ui-icon {
        display: none;
    }

    .ui-datepicker .ui-datepicker-calendar {
        table-layout: fixed;
        width: 100%;
    }

        .ui-datepicker .ui-datepicker-calendar th {
            text-align: center;
            padding: 3px;
            line-height: 1;
        }

        .ui-datepicker .ui-datepicker-calendar td {
            text-align: center;
            padding: 3px;
            border-radius: 4px;
            -webkit-transition: background-color 0.1s ease-in-out,color 0.1s ease-in-out;
            -moz-transition: background-color 0.1s ease-in-out,color 0.1s ease-in-out;
            -o-transition: background-color 0.1s ease-in-out,color 0.1s ease-in-out;
            transition: background-color 0.1s ease-in-out,color 0.1s ease-in-out;
        }

            .ui-datepicker .ui-datepicker-calendar td:hover {
                background-color: #eee;
                cursor: pointer;
            }

            .ui-datepicker .ui-datepicker-calendar td a {
                text-decoration: none;
            }

        .ui-datepicker .ui-datepicker-calendar tr {
            line-height: 1;
        }

        .ui-datepicker .ui-datepicker-calendar .ui-datepicker-current-day:hover {
            background-color: #5e9bd4;
            color: whitesmoke;
        }

            .ui-datepicker .ui-datepicker-calendar .ui-datepicker-current-day:hover a {
                background-color: #5e9bd4;
                color: whitesmoke;
            }

        .ui-datepicker .ui-datepicker-calendar .ui-datepicker-unselectable:hover {
            background-color: #fff;
            cursor: default;
        }

    .ui-datepicker .ui-datepicker-current-day {
        background-color: #4289cc;
    }

        .ui-datepicker .ui-datepicker-current-day a {
            color: #fff;
        }

    .ui-datepicker .ui-state-disabled span {
        color: #a8a8a8;
    }

.schedulerTeamHeaders > td {
    color: #404040;
    border: 1px solid #dedfde;
}

    .schedulerTeamHeaders > td > div {
        border-width: 1px;
        border-style: solid;
        border-color: transparent;
    }

        .schedulerTeamHeaders > td > div:hover {
            border-color: black;
        }

        .schedulerTeamHeaders > td > div > div {
            border-width: 2px;
            border-style: solid;
            border-color: transparent;
        }

.selectedSchedulerTeamHeader > div > div {
    color: black;
    border-color: orange !important;
}

.schedulerEServiceAppt {
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
    border-width: 2px;
    border-style: solid;
    border-color: steelblue !important;
    font-style: italic;
}

.vehicle-tabs {
    -moz-flex-shrink: 0;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
}

    .vehicle-tabs + .tab-content > .tab-pane {
        position: absolute;
        height: 100%;
        width: 100%;
    }

    .vehicle-tabs > .nav-tabs {
        border-bottom: 1px solid #ddd;
    }

        .vehicle-tabs > .nav-tabs > li {
            background-color: transparent;
            height: 20px;
            margin-top: 3px;
        }

            .vehicle-tabs > .nav-tabs > li > a {
                font-weight: bold;
                height: 20px;
                padding: 1px 10px;
                font-size: 12px;
                border-top-left-radius: 10px;
                border-top-right-radius: 10px;
                color: #080808;
                outline: 0;
            }

.sliderControlBtn {
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 0;
    padding: 0;
    font-size: 13px;
    /* BOOTSTRAP-MIGRATION Phase 6e: BS5 .btn is display:inline-block so icons inside
       are positioned by inline-box flow, not centered. Make the button a flex container
       so the angle-up / angle-down icon is always centered both axes. */
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.apptSchedListTable {
    font-family: "din-2014", sans-serif;
    margin: 0 0 15px;
    font-size: 8pt;
    text-align: left;
    width: 100%;
    border-collapse: collapse;
}

    .apptSchedListTable th {
        overflow: hidden;
        white-space: nowrap;
        max-width: 150px;
    }

    .apptSchedListTable td {
        padding: 4px;
        overflow: hidden;
        white-space: nowrap;
        max-width: 150px;
    }

    .apptSchedListTable tr.selected {
        font-weight: bold;
        border: 1.5px solid #828DFF;
        background: #c9e6f1;
    }

    .apptSchedListTable thead tr .header {
        background-color: #CBCCCD;
        border: 1px solid #FFF;
        font-size: 8pt;
        padding: 4px;
        color: black;
    }

        .apptSchedListTable thead tr .header:hover {
            background-color: #B6B8B9;
            border: 1px solid #FFF;
            font-size: 8pt;
            padding: 4px;
            color: white;
        }

    .apptSchedListTable .apptSchedListTimeSlot {
        color: #383838;
        background: #7ab1f0;
        background: -moz-linear-gradient(top, #7ab1f0 0, #659eed 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #7ab1f0), color-stop(100%, #659eed));
        background: -webkit-linear-gradient(top, #7ab1f0 0, #659eed 100%);
        background: -o-linear-gradient(top, #7ab1f0 0, #659eed 100%);
        background: -ms-linear-gradient(top, #7ab1f0 0, #659eed 100%);
        background: linear-gradient(to bottom, #7ab1f0 0, #659eed 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7ab1f0',endColorstr='#659eed',GradientType=0 );
    }

        .apptSchedListTable .apptSchedListTimeSlot:hover {
            opacity: 0.9;
        }

    .apptSchedListTable .apptSchedListAppt {
        background-color: #7DCBFF;
    }

        .apptSchedListTable .apptSchedListAppt:nth-child(even) {
            background-color: #83D4FC;
        }

        .apptSchedListTable .apptSchedListAppt:hover {
            background-color: #57BCFF;
        }

    .apptSchedListTable .apptSchedListOpCode {
        background-color: #AEEEFC;
    }

        .apptSchedListTable .apptSchedListOpCode:nth-child(even) {
            background-color: #CDF2FA;
        }

        .apptSchedListTable .apptSchedListOpCode:hover {
            background-color: #E6EEF0;
        }

.calendar_g_event_skill {
    border: 3px double #00005f !important;
    font-weight: bold;
}

.customBlockSelected {
    border: 1.5px dashed red !important;
    font-weight: bold;
}

.customBlock {
    border: 1.5px dashed black !important;
    font-weight: bold;
}

.calendar_g_event_notType {
    opacity: 0.4;
}

.calendar_g_selected {
    border: 2px double black;
    border-radius: 2px;
}

    .calendar_g_selected .calendar_g_event_inner {
        background: #ff5656 !important;
        font-weight: bold;
    }

.calendar_g_hidden {
    display: none !important;
}

.filterButtons {
    background-color: transparent !important;
    border-radius: 0;
    border: none !important;
    width: 100%;
    text-align: left;
    padding: 8px 8px !important;
    color: black !important;
    /* BOOTSTRAP-MIGRATION Phase 6e: filterButtons are inside a flex-column btn-group.
       BS5 ignores float on flex items, so float:right badges inside these buttons
       no longer appear on the right side of the label. Make filterButtons itself a
       flex row so badge children can use margin-left:auto to push right. */
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    /* Badges inside filterButtons: flex pushes them to the right edge.
       Clear float (ignored in flex) and ensure they don't shrink. */
    .filterButtons > .badge,
    .filterButtons .badge[style*="float"] {
        flex-shrink: 0;
        float: none !important;
        margin-left: auto;
    }

    .filterButtons > span {
        font-size: 10pt;
    }

    .filterButtons.selected {
        /* BOOTSTRAP-MIGRATION Phase 6e: use theme primary color (not hardcoded blue)
           so the active filter button honours the dealership's configured theme.
           Text must be white (not black) to remain legible against the dark background. */
        background-color: var(--primary-color, #0054a6) !important;
        color: var(--Font-Color-for-main-Theme-color, #fff) !important;
    }

/* BOOTSTRAP-MIGRATION Phase 6e: In BS5 .btn-group is display:inline-flex;flex-direction:row,
   so filterButtons (sidebar filter lists) rendered horizontally instead of stacked.
   :has() targets any .btn-group/.btn-group-sm that directly contains a .filterButtons
   button and forces column layout. Supported in Chrome 105+, Firefox 121+, Safari 15.4+. */
.btn-group:has(> .filterButtons),
.btn-group-sm:has(> .filterButtons) {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
}

/* BOOTSTRAP-MIGRATION Phase 6e: .emailButton btn-group (emailhistory.html sidebar)
   contains full-width buttons that must stack vertically. Unlike filterButtons these
   buttons have no identifying class, so :has() can't target them — use the explicit
   .emailButton class name instead. */
.btn-group.emailButton,
.btn-group-sm.emailButton {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

/* BOOTSTRAP-MIGRATION Phase 6e: Restore BS3 default button size.
   BS5's default .btn is noticeably larger than BS3 (font-size: 1rem / padding: 0.375rem 0.75rem).
   We target BS3's btn-sm size (5px 10px / 12px) as the new baseline so regular buttons stay compact.
   Rather than adding btn-sm to hundreds of HTML elements, we restore the compact baseline here
   on .btn (specificity 0-1-0) so any downstream class (.recServicesButton, .btn-sm, .btn-xs, etc.)
   declared later in this file wins by cascade order.
   IMPORTANT: BS5's .btn-sm/.btn-lg only set CSS custom properties (--bs-btn-padding-y etc.), not
   padding/font-size directly. Our .btn rule above sets padding/font-size directly, overriding the
   variable-based approach — so we must also provide direct overrides for .btn-sm and .btn-lg below. */
.btn {
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
}
/* Restore BS3 btn-sm sizing. Declared after .btn so cascade order applies.
   Vertical padding matches btn-xs (1px) so height stays compact (~22px).
   Horizontal padding kept at 8px (wider than btn-xs's 5px) so longer labels
   don't feel cramped. */
.btn-sm,
.btn-group-sm > .btn {
    padding: 1px 8px;
    font-size: 12px;
    line-height: 1.5;
}
/* Restore BS3 btn-lg sizing. */
.btn-lg,
.btn-group-lg > .btn {
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.33333;
}

/* BOOTSTRAP-MIGRATION Phase 6e: .btn-group-vertical uses btn-secondary buttons throughout
   the app. BS5's .btn-secondary sets --bs-btn-border-color: #6c757d (same gray as its
   background), making borders invisible between stacked buttons. default.css previously
   fixed this via .btn-group-sm > .btn-secondary { border-color: #0054a6 } (specificity
   0-2-0), which beat BS5's 0-1-0 variable declaration. Now that vertical groups use
   .btn-group instead of .btn-group-sm, that rule no longer matches. Replicate the same
   fix with matching 0-2-0 specificity for the general vertical group case. */

.btn-group-vertical > .btn-secondary {
    border-color: var(--primary-color, #0054a6);
}
.btn-group-vertical > .btn-secondary:hover,
.btn-group-vertical > .btn-secondary.hover {
    background-color: var(--primary-color, #0054a6);
    border-color: var(--primary-color, #0054a6);
    color: #ffffff;
}
.btn-group-vertical > .btn-secondary.active,
.btn-group-vertical > .btn-secondary:active {
    background-color: var(--primary-color, #0054a6);
    border-color: var(--primary-color, #0054a6);
    color: #ffffff;
}

/* BOOTSTRAP-MIGRATION: Restore BS3 pressed .btn-primary hover/focus colour.
   BS5 applies its own --bs-btn-active-bg on :active, which renders as an off-tone blue.
   Loaded after bootstrap.css, so this wins on equal specificity. */
.btn-primary:active:hover,
.btn-primary.active:hover,
.open > .dropdown-toggle.btn-primary:hover,
.btn-primary:active:focus,
.btn-primary.active:focus,
.open > .dropdown-toggle.btn-primary:focus,
.btn-primary:active.focus,
.btn-primary.active.focus,
.open > .dropdown-toggle.btn-primary.focus {
    color: #fff;
    background-color: #204d74;
    border-color: #122b40;
}

/* BOOTSTRAP-MIGRATION Phase 6e: Restore BS3 disabled button behaviour.
   BS5 sets pointer-events:none on disabled buttons, which prevents cursor:not-allowed from
   rendering on the element itself. Fix: split into two rules —
   - .btn:disabled (HTML attribute): pointer-events:auto lets the cursor show; the browser
     still blocks all click/keyboard events on a disabled button regardless of CSS.
   - .btn.disabled (CSS class, KO-driven): keep pointer-events:none so Bootstrap dropdown
     triggers and other data-bs-* handlers don't fire when KO marks a button as disabled. */
.btn.disabled,
.btn:disabled,
fieldset:disabled .btn {
    --bs-btn-disabled-bg: #f0f0f0;
    --bs-btn-disabled-border-color: #d0d0d0;
    --bs-btn-disabled-color: #888;
    opacity: .65;
    box-shadow: none;
    cursor: not-allowed;
}

.btn:disabled,
fieldset:disabled .btn {
    pointer-events: auto;
}

/* BOOTSTRAP-MIGRATION Phase 6e: BS5 .btn-link adds text-decoration:underline always.
   BS3 only underlined on hover. Restore BS3 behavior. */
.btn-link,
.btn-link:hover {
    text-decoration: none;
    cursor: pointer;
}

/* BOOTSTRAP-MIGRATION Phase 6e: BS5 removed btn-xs and btn-group-xs entirely (only btn-sm
   and btn-lg remain). Re-declared here using the same values Bootstrap 3 used for btn-xs
   so all existing HTML (9+ usages of btn-xs / btn-group-xs across the app) requires no changes.
   Icon size override: icons inside btn-xs should be slightly smaller than btn-sm icons
   so they don't overpower the compact button dimensions. */
.btn-xs,
.btn-group-xs > .btn {
    padding: 1px 5px;
    font-size: 0.85rem;   /* 12px */
    line-height: 1.5;
    border-radius: 3px;
}
.btn-xs .fas,
.btn-xs .far,
.btn-xs .fa,
.btn-xs .fa-solid,
.btn-xs .fa-regular {
    font-size: 0.7rem;
}

/* BOOTSTRAP-MIGRATION Phase 6e: BS3 had a .hide utility class (display:none !important).
   BS5 removed it entirely. Third-party plugins (e.g. bootstrap-slider) still emit it on
   elements they want hidden (e.g. the second range handle in single-value mode). */
.hide {
    display: none !important;
}

/* BOOTSTRAP-MIGRATION Phase 6e: BS3 .tooltip had position:absolute so plugin-injected
   tooltips (e.g. bootstrap-slider) were out of normal flow. BS5 removed position:absolute
   from .tooltip, causing plugin tooltips inside slider containers to take up vertical space
   and inflate the slider height. Restore absolute positioning scoped to .slider only. */
.slider .tooltip {
    position: absolute;
}

/* BOOTSTRAP-MIGRATION Phase 6e: input-sm was a BS3 built-in size modifier for form controls.
   BS4/BS5 kept it as a class but changed its values. Declaring here with BS3's exact values
   (height:30px, padding:5px 10px, font-size:12px) to preserve the compact appearance of any
   inputs, selects, or textareas that use this class throughout the app. */
.input-sm {
    height: 30px;
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
}

/* BOOTSTRAP-MIGRATION Phase 6e: Restore BS3 .label / .label-* family (from labels.less).
   The entire .label component was dropped in Bootstrap 4/5 — only .badge remains.
   Rather than changing every usage in HTML, we re-declare the BS3 definitions here.
   Color variants use the theme CSS variables where available so dealer-specific
   primary colours are respected; all others use the original BS3 hex values. */
.label {
    display: inline;
    padding: .2em .6em .3em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25em;
}
.label:empty { display: none; }
.label-default  { background-color: #777; }
.label-default[href]:hover,
.label-default[href]:focus  { background-color: #5e5e5e; }
.label-primary  { background-color: var(--primary-color, #337ab7); }
.label-primary[href]:hover,
.label-primary[href]:focus  { background-color: var(--primary-color, #286090); }
.label-success  { background-color: #5cb85c; }
.label-success[href]:hover,
.label-success[href]:focus  { background-color: #449d44; }
.label-info     { background-color: #5bc0de; }
.label-info[href]:hover,
.label-info[href]:focus     { background-color: #31b0d5; }
.label-warning  { background-color: #f0ad4e; }
.label-warning[href]:hover,
.label-warning[href]:focus  { background-color: #ec971f; }
.label-danger   { background-color: #d9534f; }
.label-danger[href]:hover,
.label-danger[href]:focus   { background-color: #c9302c; }

/* BOOTSTRAP-MIGRATION Phase 6e: Restore BS3-era heading sizes.
   BS5 headings scale significantly larger than BS3 (h4: 1.5rem/24px → BS3 18px,
   h5: 1.25rem/20px → BS3 14px, h6: 1rem/16px → BS3 12px). These overrides keep
   modal titles, card headers, and inline headings at the compact sizes the UI
   was designed around. Using px values (not rem) so these are insulated from any
   future root font-size changes. */
h4, .h4 { font-size: 18px; }
h5, .h5 { font-size: 14px; }
h6, .h6 { font-size: 12px; }

/* BOOTSTRAP-MIGRATION Phase 6e: input-group-btn compatibility shim.
   BS3's .input-group-btn was a wrapper <span> or <div> placed inside .input-group
   to hold one or more buttons. BS5 removed it entirely — buttons go directly inside
   .input-group as flex children and BS5's CSS selects them with .input-group > .btn.
   59 HTML files use the old wrapper. Rather than updating every file, this shim makes
   .input-group-btn a transparent flex participant so the button inside visually connects
   to the adjacent form-control exactly as in BS3.

   How it works:
   - `display: flex; align-items: stretch` makes the wrapper a flex item that passes
     its full height to the button inside (matching what .input-group > .btn gets).
   - `flex-shrink: 0` prevents the button from being compressed.
   - Border-radius and negative margin on the inner .btn replicates what BS5 normally
     applies via .input-group > :not(:first-child) and .input-group > :not(:last-child). */
.input-group > .input-group-btn {
    display: flex;
    align-items: stretch;
    flex-shrink: 0;
}
/* Button sits on the right side (most common): merge left border and remove left radii */
.input-group > :not(:first-child).input-group-btn > .btn {
    margin-left: calc(var(--bs-border-width, 1px) * -1);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
/* Button sits on the left side: remove right radii */
.input-group > :not(:last-child).input-group-btn > .btn {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
/* Restore outer right radius on the button when it is the last item in the group */
.input-group > .input-group-btn:last-child > .btn:last-of-type {
    border-top-right-radius: var(--bs-btn-border-radius, 0.375rem);
    border-bottom-right-radius: var(--bs-btn-border-radius, 0.375rem);
}
/* Restore outer left radius on the button when it is the first item in the group */
.input-group > .input-group-btn:first-child > .btn:first-of-type {
    border-top-left-radius: var(--bs-btn-border-radius, 0.375rem);
    border-bottom-left-radius: var(--bs-btn-border-radius, 0.375rem);
}

/* BOOTSTRAP-MIGRATION Phase 6e: input-group-xs — Bootstrap 3 had this size class;
   BS4/BS5 dropped it (only input-group-sm and input-group-lg remain).
   Re-declared here so existing HTML using input-group-xs needs no changes.
   Applies to the wrapper, and cascades down to inputs, selects, and buttons inside. */
.input-group-xs {
    font-size: 12px;
}
.input-group-xs .form-control,
.input-group-xs .input-group-text,
.input-group-xs .btn {
    padding: 1px 5px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
    height: 24px;
}
.input-group-xs select.form-control {
    height: 24px;
    line-height: 24px;
}

.filterDropdown {
    padding: 0 3px !important;
    width: 70% !important;
    float: right !important;
}

/* BOOTSTRAP-MIGRATION Phase 6e: .form-group base style.
   In BS3, the BASE .form-group was only ever margin-bottom — it was a plain block div.
   The previous shim incorrectly applied .row-like negative side margins globally,
   causing every .form-group to be 24 px wider than its container. This broke any
   flex parent (e.g. the sendEmail modal form with flex:1 1 0%) because the
   overflow made the flex width calculation report the wrong available space.
   Restored to the BS3 baseline: block-level, margin-bottom only. */
.form-group {
    margin-bottom: 10px;
}

/* BOOTSTRAP-MIGRATION Phase 6e: Restore gap between checkbox/radio inputs and their label text.
   BS3 browsers applied a small implicit right margin to inline input[type=checkbox/radio].
   BS5's form reset removes it, causing the input to sit flush against the label text.
   This rule restores the gap globally for all usages — both the old BS3 label-wraps-input
   pattern (<label><input type="checkbox"> Text</label>) and standalone inputs. */
input[type="checkbox"],
input[type="radio"] {
    margin-right: 5px !important;
}

/* BOOTSTRAP-MIGRATION Phase 6e: form-inline compatibility shim.
   BS5 removed .form-inline entirely. Re-declared here so existing HTML using it
   gets the original BS3 inline-flex behaviour without any HTML changes.
   .radio and .checkbox inside a form-inline are also restored to display inline. */
.form-inline {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    gap: 6px;
}
.form-inline .form-group {
    display: flex;
    align-items: center;
    margin-bottom: 0;
}
.form-inline .radio,
.form-inline .checkbox {
    display: flex;
    align-items: center;
    margin: 0;
    white-space: nowrap;
}
.form-inline .radio label,
.form-inline .checkbox label {
    margin-bottom: 0;
    font-weight: normal;
    cursor: pointer;
}

/* BOOTSTRAP-MIGRATION Phase 6e: BS3's .checkbox class positioned the input absolutely
   (margin-left:-20px; padding-left:20px on label) so text sat on the same line as the
   checkbox. BS5 has no .checkbox class at all — without the shim the input is in normal
   flow and may wrap below its label text, especially when label has width:100%.
   display:flex on .checkbox label keeps checkbox + text on one line always.
   gap:6px replaces the old padding-left:20px offset. ms-auto on any sibling span
   (e.g. float-end percentage counters) pushes it to the right inside the flex row.
   margin-top/bottom restores BS3's default 10px vertical spacing between stacked
   checkboxes. .form-inline .checkbox overrides this with margin:0 for inline contexts. */
.checkbox {
    margin-top: 2px;
    margin-bottom: 2px;
}
.checkbox label {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 20px;
    margin-bottom: 0;
    font-weight: normal;
    cursor: pointer;
    width: 100%;
}
.checkbox label .float-end,
.checkbox label [class*="float-end"] {
    margin-left: auto;
    float: none;
}
/* When a span wrapper (e.g. .yellowBorder) sits between the flex label and the
   float-end span, margin-left:auto only works if that wrapper is also flex.
   flex:1 makes it fill the label's remaining width so the % can push right. */
.checkbox label span.yellowBorder {
    display: flex;
    align-items: center;
    flex: 1;
}

/* BOOTSTRAP-MIGRATION Phase 6e: BS5 removed .radio-inline/.checkbox-inline entirely
   (they were BS3-only helper classes). Without them, grouped inline radios/checkboxes
   render as bare labels with no padding and no gap between adjacent groups, making
   them look crammed together. Restored verbatim from the BS3 rule (Content/bootstrap.css)
   so every existing .radio-inline/.checkbox-inline usage gets its spacing back with no
   HTML changes required. */
.radio-inline,
.checkbox-inline {
    position: relative;
    display: inline-block;
    padding-left: 20px;
    margin-bottom: 0;
    font-weight: normal;
    vertical-align: middle;
    cursor: pointer;
}
.radio-inline + .radio-inline,
.checkbox-inline + .checkbox-inline {
    margin-top: 0;
    margin-left: 10px;
}
.radio-inline input[type="radio"],
.checkbox-inline input[type="checkbox"] {
    position: absolute;
    margin-top: 4px;
    margin-left: -20px;
}
/* .fillRowAuto > * (below, pre-dates this migration) sets display:table-cell and has
   the same specificity as .radio-inline/.checkbox-inline above, so it wins the cascade
   tie by source order — leaving radio/checkbox groups stuck as table-cells. Table-cells
   ignore the margin property entirely (CSS spec, not a bug), which silently drops the
   margin-left spacing between adjacent groups. This higher-specificity override restores
   inline-block wherever a radio-inline/checkbox-inline is nested inside a .fillRowAuto,
   without touching .fillRowAuto's normal table-cell layout for its other usages. */
.fillRowAuto .radio-inline,
.fillRowAuto .checkbox-inline {
    display: inline-block;
}
/* .fillRowAuto is display:table. Per the CSS table box-generation algorithm, any direct
   child that isn't display:table-cell gets wrapped in its own anonymous table-row — so
   once the radio/checkbox children above were forced back to inline-block, each one was
   individually boxed into its own row and stacked vertically instead of sitting
   side-by-side. :has() scopes this fix to only the .fillRowAuto rows that wrap a
   radio/checkbox group, leaving every other .fillRowAuto (e.g. label:input pairs, which
   still need real table-cell auto-sizing) untouched. */
.fillRowAuto:has(> .radio-inline),
.fillRowAuto:has(> .checkbox-inline) {
    display: block;
}

/* BOOTSTRAP-MIGRATION Phase 6e: pairs with the Dropdown._getConfig patch in
   bootstrapInit.js, which forces reference:'parent' for any dropdown toggle
   living inside .btn-group-xs (the "wide value button + narrow pencil toggle"
   field widget used across the traffic log, showroom/service lead tables,
   action studio, and delivery grids). Once the menu is anchored to the whole
   .btn-group instead of the toggle button, it also needs to actually span
   that width instead of shrink-wrapping to its default min-width. Scoped
   identically to the JS fix (.btn-group-xs, direct child) so both stay in
   sync — other dropdowns elsewhere in the app are unaffected. */
.btn-group-xs > .dropdown-menu {
    width: 100%;
    min-width: 150px;
}

/* BOOTSTRAP-MIGRATION Phase 6e: float-inside-flex global compatibility fix.
   In Bootstrap 5, .row is display:flex — float:right/left on direct children is
   silently ignored by the browser (flex items cannot be floated). This was valid in
   BS3's float-based grid but breaks in every .row across the app.
   Fix: convert float:right inline styles to margin-left:auto (pushes item to the
   far right inside a flex row, exactly what float:right did in block context) and
   float:left to margin-right:auto. float:none prevents the float from accidentally
   applying if the element ever lives outside a flex context.
   Covers both spacing variants ("float:right" and "float: right") since both appear
   in the codebase. Only direct children of .row are targeted — elements nested deeper
   inside a col-* block (which is still display:block) float correctly without help. */
.row > [style*="float:right"],
.row > [style*="float: right"] {
    margin-left: auto !important;
    float: none !important;
}
.row > [style*="float:left"],
.row > [style*="float: left"] {
    margin-right: auto !important;
    float: none !important;
}

/* BOOTSTRAP-MIGRATION Phase 6e: Remove BS5's default blue focus glow on form inputs.
   BS5 adds a 4px rgba(13,110,253,0.25) box-shadow on :focus — a prominent blue halo
   that wasn't present in BS3. Replacing it with a clean border-color change only,
   which is more subtle and respects the dealer's theme colour.
   Covers all standard form controls: text inputs, selects, textareas, and checkboxes. */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    box-shadow: none !important;
    border-color: var(--primary-color, #0054a6) !important;
    outline: 0;
}

.profile-grid {
    width: 100%;
}

.pieLegend {
    color: rgba(0, 0, 0, 0.8);
    display: table-cell;
    vertical-align: middle;
}

    .pieLegend > ul {
        border: #888888 solid 1px;
        box-shadow: 2px 3px 4px #888888;
        background-color: #fff;
        padding: 2px;
    }

        .pieLegend > ul > li {
            border-radius: 3px;
            padding: 1px 4px 1px 3px;
        }

            .pieLegend > ul > li > svg {
                vertical-align: middle;
            }

.unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: default;
}

.simpleTitleText {
    text-align: center;
    font-weight: bold;
    font-size: 1.2em;
}

.tab-content {
    position: relative;
}

    .tab-content > .tab-pane.active.flex-container {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        background-color: white;
    }

.recServicesButton {
    border: 2px solid red !important;
    font-weight: bold;
    height: 25px;
    padding: 0 3px;
    width: 82px;
    border-radius: 5px !important;
    /* BOOTSTRAP-MIGRATION Phase 6e: BS5 .btn-group > .btn has flex:1 1 auto which
       expands each button to fill the group. When only one recServicesButton is
       visible (others display:none), it stretches to 100%. Lock to natural width. */
    flex: 0 0 auto !important;
    /* Prevent "Follow Ups" (and similar two-word labels) from wrapping inside the
       fixed 82px width. In BS5 slight font-metric differences vs BS3 can push the
       text over the wrap threshold. white-space:nowrap keeps the label on one line;
       overflow:hidden clips any pixel-level overhang cleanly without a scrollbar.
       font-size reduced from 14px (inherited from .btn) to 12px so the full label
       comfortably fits in the available text area (82px - 4px border - 6px padding = 72px). */
    white-space: nowrap;
    overflow: hidden;
    font-size: 12px;
}

.recServicesButtonBlue {
    border: 2px solid blue;
    font-weight: bold;
    height: 30px;
    padding: 0 3px;
    white-space: nowrap;
    overflow: hidden;
    font-size: 12px;
}

.monthpicker .ui-datepicker-calendar {
    display: none;
}

.noModalPopup {
    position: fixed;
    z-index: 1035;
    transition: width .4s ease-in-out;
    left: 0;
    right: 0;
    margin: 0 auto;
}

    .noModalPopup .noModalPopupCollapseSection {
        transition: height .4s ease-in-out;
        overflow: hidden;
        /* BOOTSTRAP-MIGRATION Phase 6e: make this a flex column so the modal-body
           can grow (flex:1) and the modal-footer stays pinned at the bottom.
           Without this, BS5's modal-content flex layout causes modal-body height:100%
           to fill the entire section, clipping the footer below the overflow boundary. */
        display: flex;
        flex-direction: column;
    }

    /* BOOTSTRAP-MIGRATION Phase 6e: override the inline height:100% so it doesn't
       consume the entire flex column, leaving no room for the footer. */
    .noModalPopup .noModalPopupCollapseSection > .modal-body {
        flex: 1 1 auto;
        overflow-y: auto;
        height: auto !important;
    }

    .noModalPopup .modal-footer {
        text-align: center;
        cursor: pointer;
        height: 25px;
        padding: 0;
        line-height: 2em;
        border-top: 1px solid #e0e0e0;
        /* BOOTSTRAP-MIGRATION Phase 6e: BS5 .modal-footer uses justify-content:flex-end;
           override to center the chevron icon. flex-shrink:0 prevents the footer from
           collapsing when the modal-body grows in the flex column. */
        justify-content: center !important;
        flex-shrink: 0;
    }

        .noModalPopup .modal-footer:hover .hoverText {
            color: #000;
            text-decoration: none;
            filter: alpha(opacity=50);
            opacity: .5;
        }

.bookApptPopupBaseSettings {
    left: 15%;
    /* Center on screen: height fits the content (height:auto) and top:50% + translateY(-50%)
       keeps it vertically centered regardless of how tall the content is. max-height caps it
       for long content, at which point the modal-body scrolls. (Horizontal centering already
       comes from left:15% + width:70%.) */
    top: 40%;
    transform: translateY(-50%);
    width: 70% !important;
    height: auto !important;
    max-height: 85%;
    /* Lift the popup off the page so it reads as a floating modal. */
    border-radius: 6px;
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.45);
}

    .bookApptPopupBaseSettings > .modal-content {
        border-radius: 6px;
    }

/* The call-in-progress popup has a fixed 555px content box, but bookApptPopupBaseSettings
   forces the wrapper to 70% width. That made the box-shadow frame the wide invisible
   wrapper instead of the popup. Shrink the wrapper to its content and re-center it so the
   shadow hugs the actual popup.

   DM-8127: left/right/margin didn't need !important here - #callInProgressPopup is an ID
   selector, which already beats .bookApptPopupBaseSettings's left:15% (not !important there) on
   plain specificity. But !important on left was actively harmful: jQuery UI's draggable moves the
   popup by calling .css({left, top}) on every mouse-move, a plain-priority assignment - it can
   only win against a plain-priority CSS rule, never an !important one. With left marked !important,
   every drag frame's left update lost to this rule and snapped straight back to 50%, so the popup
   could only be dragged vertically (top has no !important fight) and jumped sideways the instant a
   drag began. width still needs !important, though - bookApptPopupBaseSettings's width:70% IS
   !important, and importance is compared before specificity, so an ID selector alone can't beat it;
   dropping !important here let that 70% win uncontested, stretching the popup far wider than its
   555px content and leaving a big empty gap. */
#callInProgressPopup {
    left: 50%;
    right: auto;
    width: auto !important;
    margin: 0;
    transform: translate(-50%, -50%);
}

/* Merged-files picker in the profile header: size to the widest name so entries aren't
   clipped, and remove the doubled li padding + responsive li margin that left large gaps
   between rows (padding stays on the .dropdown-item label alone). */
.dropdown-menu.mergedFilesMenu {
    width: max-content !important;
    min-width: 260px;
    max-width: 90vw !important;
}

    .dropdown-menu.mergedFilesMenu > li {
        margin: 0 !important;
        padding: 0 !important;
    }

    .dropdown-menu.mergedFilesMenu .dropdown-item {
        padding: 3px 15px !important;
    }

/* Make-busy reason picker (telephony top-nav): each reason renders as a colored pill that
   carries its own 1px spacing, so strip ALL li margin/padding. Two effects: (1) rows sit
   flush with no gaps between them, and (2) an empty row (e.g. the 'queues' entry, which
   matches none of the render branches) collapses to 0 height instead of showing the global
   rule's 5px 15px padding as a stray pill. */
.dropdown-menu.makeBusyMenu > li {
    margin: 0 !important;
    padding: 0 !important;
}

.worksheet-Width {
    min-width: 70%;
}

/* DM-8132: min-width:70% above is unchanged since before the BS5 migration and was never
   the problem. The shared .modal-flex > .modal-dialog { width:fit-content } rule (added
   during the migration) is: this dialog's content has TWO percentage-width flex children
   when the stock sidebar is open (main panel 70%, sidebar 30% - both bound via Knockout
   style:{width:...}), so fit-content has to shrink-wrap around content whose own size is
   defined as a percentage OF the dialog - an unresolvable circular reference. With the
   sidebar closed there's only one percentage child, and the browser resolves the ambiguity
   too narrow ("slimmer than normal"); with it open, two competing percentage children push
   the resolution the other way, falling back to the full viewport ("takes up the whole
   screen"). Giving the dialog a real, definite width breaks the cycle entirely - matches
   min-width so the size stays stable whether the sidebar is open or not, same as pre-BS5.
   Needs the .modal-flex > .modal-dialog compound selector to out-specify the shared rule;
   .worksheet-Width alone (one class) isn't specific enough to beat it. */
.modal-flex > .modal-dialog.worksheet-Width {
    width: 70%;
}

.inventoryPopupBaseSettings {
    left: 20%;
    width: 80% !important;
    max-width: 1000px;
    margin: 0;
}

.closeMargin {
    margin: 1px;
}

.closePadding {
    padding: 1px;
}

.QueuePopupBaseSettings {
    left: 70%;
    top: 8%;
    max-width: 1000px;
    margin: 0;
}

.VoiceMailPopupBaseSettings {
    left: 80%;
    top: 8%;
    width: 35% !important;
    max-width: 1000px;
    margin: 0;
}

.noModalPopupCollapse {
    width: 75px !important;
    height: 75px !important;
}

    .noModalPopupCollapse .noModalPopupCollapseSection {
        height: 0 !important;
    }

.hoverText {
    color: #000;
    text-shadow: 0 1px 0 #fff;
    filter: alpha(opacity=20);
    opacity: .4;
}

    .hoverText:hover {
        color: #000;
        text-decoration: none;
        filter: alpha(opacity=50);
        opacity: .5;
    }

.flex-container {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    /* BOOTSTRAP-MIGRATION Phase 6e: explicitly set flex-direction: row so that
       Bootstrap 5 classes like .card (which set flex-direction: column) cannot
       silently override the expected horizontal layout when combined with
       .flex-container. .flex-column (defined below) still overrides this
       because it appears later in the CSS and has equal specificity. */
    flex-direction: row;
}

.flex-HVCenter {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
}

.flex-VerticalBottom {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: flex-end;
}

.flex-HorizontalVerticalCenter {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    justify-content: center;
}

.flex-wrap-nostrech {
    padding: 0;
    margin: 0;
    list-style: none;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
}

.flex-column {
    -moz-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}

.flex-auto {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
}

.flex-autoWithDropdown {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
}

.flex-container.flex-auto {
    overflow: hidden;
}

.flex-container.flex-autoWithDropdown {
    overflow: hidden;
}

.flex-nogrow {
    -moz-flex-grow: 0;
    -webkit-flex-grow: 0;
    flex-grow: 0;
}

.steps-chart-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}

.steps-chart-placeholder {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
}

.steps-name {
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.sales-step-completion-rate-cell {
    text-align: center;
    padding: 2px;
}

.dashboard-sales-step-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.dashboard-sales-step-value {
    font-weight: bold;
    font-size: 14px;
}

.dashboard-sales-step-percentage {
    font-size: 12px;
    font-weight: 500;
    margin-top: 2px;
    color: #4C4E50;
}

.flex-noshrink {
    -moz-flex-shrink: 0;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
}

.flex-nobasis {
    -moz-flex-basis: 0;
    -webkit-flex-basis: 0;
    flex-basis: 0;
}

.flex-wrap {
    -moz-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

.flex-justify-space-between {
    -moz-justify-content: space-between;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

.flex-align-self-end {
    -moz-align-self: flex-end;
    -webkit-align-self: flex-end;
    align-self: flex-end;
}

.navbar-theme .navbar-toggle {
    border-color: #333;
}

    .navbar-theme .navbar-toggle:hover {
        background-color: #333;
    }

    .navbar-theme .navbar-toggle:focus {
        background-color: #333;
    }

    .navbar-theme .navbar-toggle .icon-bar {
        background-color: #fff;
    }

/* BOOTSTRAP-MIGRATION: #menuDropdown hamburger — shown only when navbar-expand-xxl
   collapses the nav (below 1400px). Button uses btn-secondary so no navbar-toggler
   class is needed; we mirror the xxl breakpoint manually. */
@media (min-width: 1000px) {
    #menuDropdown {
        display: none !important;
    }
}

/* BOOTSTRAP-MIGRATION Phase 6d: BS5 navbar-toggler equivalents */
.navbar-theme .navbar-toggler {
    border-color: #333;
}
.navbar-theme .navbar-toggler:hover {
    background-color: #333;
}
.navbar-theme .navbar-toggler:focus {
    background-color: #333;
}
.navbar-theme .navbar-toggler .navbar-toggler-icon {
    background-color: #fff;
}

/* BOOTSTRAP-MIGRATION Phase 6e: BS5 .navbar-nav is display:flex;flex-direction:row.
   In BS3, li was float:left and a was display:block filling the li width.
   Vertical centering was via symmetric padding on a fixed-height element.
   In BS5 the li is a flex item — a MUST remain display:block so it fills
   the full li width. shell.js uses $("body").on("click","a",...) to load page
   templates; if a does not fill li, clicks on the li outside the a text have
   e.target=li (not a) and the delegated handler never fires, breaking navigation.
   Use line-height equal to height for single-line vertical centering instead of flex. */
/* BOOTSTRAP-MIGRATION Phase 6e: align-items:stretch makes <a> fill the full <li>
   height (32px from .navbar-two) automatically — no fixed height or margin-top needed.
   This eliminates the 2px dead zone at the top of each nav item where margin-top:2px
   inside align-items:center caused e.target=<li> instead of <a>, breaking shell.js's
   $("body").on("click","a",...) delegated handler (and locking the screen on click). */
.navbar-theme .navbar-nav > li {
    display: flex;
    align-items: stretch;
}

/* BOOTSTRAP-MIGRATION Phase 6e: switched from line-height:32px centering to
   display:flex + align-items:center. The theme CSS (default.css etc.) adds
   padding-top:3px at equal specificity and loads after style.css, so it wins
   over padding:0 12px and shifts the text up. Flex centering is immune to
   padding-top because it centers children within the remaining space after
   padding — the line-box model is not involved. All state variants updated to
   match so hover/focus/active/open are consistent. */
.navbar-theme .navbar-nav > li > a,
.navbar-theme .navbar-nav > li > a:hover,
.navbar-theme .navbar-nav > li > a:focus,
.navbar-theme .navbar-nav > .open > a,
.navbar-theme .navbar-nav > .active > a {
    border-top-right-radius: 6px;
    border-top-left-radius: 6px;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0 12px;
    white-space: nowrap;
    overflow: hidden;
}

.dmIcon {
    height: 45px;
    border-radius: 45px;
    cursor: pointer;
}

.pointer {
    cursor: pointer !important;
}

.navbar-two {
    height: 32px;
    min-height: 32px;
    margin-bottom: 0;
    /* BOOTSTRAP-MIGRATION Phase 6e: BS5 .navbar has padding:0.5rem 1rem by default.
       Without this reset the 8px top/bottom padding shrinks the content area to 16px,
       causing the 32px <ul> to overflow 8px above and below — making inactive tab text
       appear off-center and the active tab bleed above the visible bar. */
    padding: 0;
}

/* BOOTSTRAP-MIGRATION Phase 6e: In BS3 the navbar-nav <li> had an implicit
   positioning context. In BS5's flex navbar it does not. Each badge inside
   navFlexMenu items is position:absolute; right:-5px; top:0px — without a
   positioned <li> ancestor, all badges escape to the nearest positioned
   ancestor (the position:fixed navbar) and pile up at right:-5px; top:0px
   of the whole bar. Restoring position:relative on each <li> anchors every
   badge to its own nav item so they appear in the correct corner. */
#navFlexMenu > li {
    position: relative;
}

/* BOOTSTRAP-MIGRATION Phase 6e: Both fixed navbars (navbar-one at 52px tall,
   navbar-two at 32px tall positioned at top:52px) are position:fixed and therefore
   do not push document flow. #pageLoader (shell.html) holds all page content
   (template_profile, template_dashboard, etc.) and renders at y:0 without an
   offset — directly behind the fixed navbars. padding-top pushes the content
   area below both navbars so profile and other inline-flow pages are not obscured. */
#pageLoader {
    padding-top: 84px;
}

/* BOOTSTRAP-MIGRATION Phase 6e: navbar-fixed-bottom was removed in Bootstrap 4/5
   and renamed to fixed-bottom. The nav footer in nav.html still uses the BS3
   class name. Re-declare it here so the footer stays pinned to the bottom without
   touching nav.html. */
.navbar-fixed-bottom {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1030;
}

/* BOOTSTRAP-MIGRATION Phase 6e: The profile sidebar slider has inline style="height:50px"
   from the original jQuery UI slider markup. The compact profile layout needs 11px.
   Override here so the HTML doesn't need to change. */
#profile-slider {
    height: 11px !important;
}

/* Noticeable third-party widget: the outer div carries btn-secondary styling;
   neutralize the widget's internally-rendered button so it doesn't override the
   outer border-radius, background, or border. */
#noticeable-widget > * {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    color: inherit !important;
    height: 100% !important;
    width: 100% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.with-nav-tabs.panel-default .nav-tabs > li > a {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    padding: 6px 12px;
}

/* BOOTSTRAP-MIGRATION Phase 6e: BS5 card equivalent — remove unexpected card chrome on
   full-width tabbed-navigation containers. BS5 adds border + border-radius to .card;
   this reset keeps the look flat and full-width as intended. */
.card.with-nav-tabs {
    border: none;
    border-radius: 0;
}

/* BOOTSTRAP-MIGRATION Phase 6e: BS5 .nav-tabs only styles .nav-link elements. The
   tabbed-navigation and other components use BS3-style <li class="active"><a> structure
   without .nav-link class. These rules bridge the gap so tabs display correctly.
   Scoped to .with-nav-tabs to avoid affecting .nav-tabs-simple and vehicle-tabs. */
.with-nav-tabs .nav-tabs > li > a {
    display: block;
    padding: 6px 12px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    color: #fff;
    text-decoration: none;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
    margin-bottom: -1px;
    border: 1px solid transparent;
}

.with-nav-tabs .nav-tabs > li > a:hover,
.with-nav-tabs .nav-tabs > li > a:focus {
    isolation: isolate;
    border-color: var(--bs-border-color, #dee2e6) var(--bs-border-color, #dee2e6) var(--bs-body-bg, #fff);
    color: var(--bs-nav-tabs-link-active-color, #495057);
    background-color: var(--bs-nav-tabs-link-active-bg, #fff);
    text-decoration: none;
}

.with-nav-tabs .nav-tabs > li.active > a {
    color: var(--bs-nav-tabs-link-active-color, #495057);
    background-color: var(--bs-nav-tabs-link-active-bg, #fff);
    border-color: var(--bs-border-color, #dee2e6) var(--bs-border-color, #dee2e6) var(--bs-body-bg, #fff);
}

.flexMenu-popup {
    border: 1px solid black;
    border-top: hidden;
    border-bottom-right-radius: 14px;
    border-bottom-left-radius: 14px;
    padding: 0;
    background-color: #ffffff;
    margin: 0;
    z-index: 1010;
    position: absolute;
    min-width: 100%;
}

    .flexMenu-popup > li {
        display: block;
        color: black;
        font-weight: bold;
        width: 100%;
    }

        .flexMenu-popup > li > a {
            outline: none;
            padding: 6px 11px;
            display: block;
            color: black;
            font-weight: bold;
            width: 100%;
        }

            .flexMenu-popup > li > a:hover {
                text-decoration: none;
                background-color: #e6e6e6;
            }

            .flexMenu-popup > li > a:focus {
                text-decoration: none;
                background-color: #e6e6e6;
            }

    .flexMenu-popup:last-child li:last-child {
        border-bottom-right-radius: 14px;
        border-bottom-left-radius: 14px;
    }

        .flexMenu-popup:last-child li:last-child a {
            border-bottom-right-radius: 14px;
            border-bottom-left-radius: 14px;
        }

.flexMenu-viewMore {
    margin-top:5px !important;
    display: inline-block !important;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

    .flexMenu-viewMore > a:after {
        display: inline-block;
        content: "";
        border-left: 0.3em solid transparent;
        border-right: 0.3em solid transparent;
        border-top: 0.4em solid black;
        margin-left: 0.4em;
        position: relative;
        top: -.1em;
    }

    .flexMenu-viewMore.hover {
        overflow: visible;
    }

.eqi-container {
    display: flex;
    justify-content: space-between;
}

.bookApptPopupDropdownOptions {
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

    .bookApptPopupDropdownOptions > div {
        width: 185px;
    }

.popover {
    z-index: 2001;
    position: fixed;
}

.settings {
    font-size: medium;
    position: fixed;
    right: 15px;
    z-index: 1005;
    top: 78px;
    border: 1px solid #ccc;
    -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

.badge {
    padding: 3px 6px;
    font-size: 8pt;
    /* BOOTSTRAP-MIGRATION Phase 6e: BS5 resets z-index on badge; re-apply so badges
       render above sibling elements (buttons, table cells, card bodies). */
    position: relative;
    z-index: 1;
}

#showroom-search-clear {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #838F9C;
    font-size: 16px;
}

.showroom-dm-logo {
    background-repeat: no-repeat;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="uuid-a71ccb7b-1336-4563-a5ae-f7470a6b2870" viewBox="0 0 978.96 979.2"><defs><style>.uuid-e4e5168a-ac89-4cb2-87f2-5e4177697bd8{fill:%23181918;}.uuid-e4e5168a-ac89-4cb2-87f2-5e4177697bd8,.uuid-cefe0f09-5cd2-4bbf-9ee8-0f6712a30259,.uuid-9ebf0a30-6a6d-4322-a614-62ed3717ee55,.uuid-ef369f08-e4c7-4e86-9fa9-ba9efd70fef9{stroke-width:0px;}.uuid-cefe0f09-5cd2-4bbf-9ee8-0f6712a30259{fill:%23231f20;}.uuid-9ebf0a30-6a6d-4322-a614-62ed3717ee55{fill:%230054a6;}.uuid-ef369f08-e4c7-4e86-9fa9-ba9efd70fef9{fill:%23fff;filter:url(%23uuid-edca2a82-e56f-4ba9-9356-94040d4019aa);}</style><filter id="uuid-edca2a82-e56f-4ba9-9356-94040d4019aa" filterUnits="userSpaceOnUse"><feOffset dx="4" dy="4"/><feGaussianBlur result="uuid-c99b30bb-64d4-4ab5-8273-93fdb1f5ca7e" stdDeviation="5"/><feFlood flood-color="%23181918" flood-opacity=".25"/><feComposite in2="uuid-c99b30bb-64d4-4ab5-8273-93fdb1f5ca7e" operator="in"/><feComposite in="SourceGraphic"/></filter></defs><rect class="uuid-ef369f08-e4c7-4e86-9fa9-ba9efd70fef9" x="11.0435" y="11.1642" width="948.8132" height="948.8132" rx="92.9066" ry="92.9066"/><g id="uuid-8e2bc765-c835-4111-8a82-16c44c617c76"><path class="uuid-e4e5168a-ac89-4cb2-87f2-5e4177697bd8" d="m112.6087,708.7767v-384.2949h144.3577c124.6481,0,186.2348,59.6186,186.2348,192.151s-61.5867,192.1438-186.2348,192.1438H112.6087Zm144.3577-81.2925c71.9341,0,94.0995-42.8634,94.0995-110.8513s-22.1654-110.8515-94.0995-110.8515h-53.2042v221.7028h53.2042Z"/><polygon class="uuid-cefe0f09-5cd2-4bbf-9ee8-0f6712a30259" points="661.3119 432.6005 601.8734 492.039 661.3257 551.4777 720.7505 492.039 661.3119 432.6005"/><polygon class="uuid-e4e5168a-ac89-4cb2-87f2-5e4177697bd8" points="553.1794 324.4818 553.1133 324.5472 553.1133 324.4876 469.0293 324.4876 469.0293 709.386 553.1133 709.386 553.1133 443.2725 598.6106 488.7697 658.0361 429.3312 553.1794 324.4818"/><path class="uuid-e4e5168a-ac89-4cb2-87f2-5e4177697bd8" d="m511.0786,299.5575c31.1572,0,56.4271-25.2626,56.4271-56.4343s-25.2698-56.4467-56.4271-56.4467-56.4416,25.2613-56.4416,56.4467,25.2698,56.4343,56.4416,56.4343Z"/><path class="uuid-9ebf0a30-6a6d-4322-a614-62ed3717ee55" d="m811.6671,299.5575c31.1573,0,56.4389-25.2626,56.4389-56.4343s-25.2816-56.4467-56.4389-56.4467c-31.173,0-56.4415,25.2613-56.4415,56.4467s25.2685,56.4343,56.4415,56.4343Z"/><polygon class="uuid-9ebf0a30-6a6d-4322-a614-62ed3717ee55" points="769.6434 324.5014 769.6303 324.4818 664.5878 429.504 724.0271 488.9353 769.6434 443.319 769.6434 709.386 853.7012 709.386 853.7012 324.4876 769.6434 324.4876 769.6434 324.5014"/></g></svg>');
    display: inline-block;
    width: 16px;
    height: 16px;
    background-size: contain;
    background-position: center;
    vertical-align: middle;
}


.showroom-badge {
    display: inline-flex;
    align-items: center;
    font-size: 1rem;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 999px;
}

    /* Showroom Log vehicle and worksheet tooltips */
    .showroom-vehicle-tooltip-wrapper,
    .showroom-worksheet-tooltip-wrapper {
        position: relative;
        display: inline-block;
    }

.showroom-vehicle-tooltip,
.showroom-worksheet-tooltip {
    display: none;
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%);
    z-index: 1200;
    width: max-content;
    max-width: 400px;
    background: var(--Base-White, #FFF);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(24,26,24,0.15);
    padding: 10px;
    color: #181A18;
}
    .showroom-vehicle-tooltip::before,
    .showroom-vehicle-tooltip::after,
    .showroom-worksheet-tooltip::before,
    .showroom-worksheet-tooltip::after {
        content: "";
        position: absolute;
        left: -8px;
        top: 50%;
        transform: translateY(-50%) rotate(45deg);
        width: 12px;
        height: 12px;
        pointer-events: none;
    }

    .showroom-vehicle-tooltip::before,
    .showroom-worksheet-tooltip::before {
        background: var(--Base-White, #FFF);
        z-index: 1201;
    }

    .showroom-vehicle-tooltip::after,
    .showroom-worksheet-tooltip::after {
        background: rgba(24,26,24,0.08);
        left: -10px;
        z-index: 1200;
        filter: blur(1px);
    }

    /* text inside tooltips */
    .showroom-vehicle-tooltip-title,
    .showroom-worksheet-tooltip-title {
        color: #000;
        font-size: 14px;
        font-weight: 600;
        margin-bottom: 8px;
    }

    .showroom-vehicle-list,
    .showroom-worksheet-list {
        margin: 0;
        padding: 0;
        list-style: none;
        max-height: 160px;
        overflow-y: auto;
    }

    .showroom-vehicle-item,
    .showroom-worksheet-item {
        display: flex;
        gap: 8px;
        margin-bottom: 8px;
        align-items: flex-start;
    }

    .showroom-vehicle-index,
    .showroom-worksheet-index {
        flex: 0 0 28px;
        height: 28px;
        border-radius: 50%;
        background: #CCD1D6;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #181A18;
        font-family: DIN;
        font-size: 12px;
        font-weight: 500;
    }

    .showroom-vehicle-desc,
    .showroom-worksheet-desc {
        color: #181A18;
        font-family: DIN;
        font-size: 14px;
        line-height: 16px;
        word-break: break-word;
    }

    .showroom-vehicle-sub,
    .showroom-worksheet-sub {
        font-size: 12px;
        color: #666;
        margin-top: 2px;
    }

    .showroom-vehicle-item,
    .showroom-worksheet-item {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        margin-bottom: 10px;
        padding-bottom: 6px;
        border-bottom: 1px solid #F0F2F5;
        position: relative;
    }

     .showroom-vehicle-item:last-child,
     .showroom-worksheet-item:last-child {
         border-bottom: none;
         margin-bottom: 0;
         padding-bottom: 0;
     }


 /* show tooltip while hovering */
    .showroom-vehicle-tooltip-wrapper:hover .showroom-vehicle-tooltip,
    .showroom-vehicle-tooltip-wrapper:focus-within .showroom-vehicle-tooltip,
    .showroom-vehicle-tooltip:hover,
    .showroom-worksheet-tooltip-wrapper:hover .showroom-worksheet-tooltip,
    .showroom-worksheet-tooltip-wrapper:focus-within .showroom-worksheet-tooltip,
    .showroom-worksheet-tooltip:hover {
        display: block !important;
    }

    /*  so tooltip doesn't go off-screen */
    @media (max-width: 960px) {
        .showroom-vehicle-tooltip,
        .showroom-worksheet-tooltip {
            left: auto;
            right: calc(100% + 12px);
            transform: translateY(-50%);
        }

       .showroom-vehicle-tooltip::before, .showroom-vehicle-tooltip::after,
       .showroom-worksheet-tooltip::before, .showroom-worksheet-tooltip::after {
           left: auto;
           right: -8px;
           transform: translateY(-50%) rotate(45deg);
       }
    }

    .showroom-addup-container {
        display: flex;
        width: 200px;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-end;
        gap: 8px;
        flex-shrink: 0;
    
    }

    .showroom-btn {
        width: 200px;
        height: 38px;
        padding: 8px 16px;
        border-radius: 6px;
        cursor: pointer;
        font-size: 14px;
        font-weight: 400;
        line-height: 16px;
        white-space: nowrap;
    }

    .showroom-btn-primary {
        background: #0054A6;
        border: none;
        color: #FFF;
    }

    .showroom-btn-secondary {
        background: #FFF;
        border: 1px solid #0054A6;
        color: #0054A6;
    }

    .showroom-btn-separated {
        border: none;
    }

.showroom-qualification-msg {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    border-radius: 3px;
    padding: 8px;
    font-family: DIN;
    font-size: 12px;
    font-weight: 400;
    line-height: normal;
    width: 100%;
    margin-top: auto;
}

    .showroom-qualification-msg-info {
        background: #DFE7EC;
        border-left: 3px solid #0054A6;        
    }

    .showroom-qualification-msg-info .showroom-qualification-icon {
        color: #0054A6;
        font-size: 14px;
        margin-top: 1px;
    }

    .showroom-qualification-msg-warning {
        background: #FFF4E6;
        border-left: 3px solid #E67F00;
    }

     .showroom-qualification-msg-warning .showroom-qualification-icon {
         color: #E67F00;
         font-size: 14px;
         margin-top: 1px;
     }

    .showroom-qualification-text {
        color: #181A18;
    }

.showroom-icon-badge {
    background-color: #CCD1D6;
    gap: 4px;
    width: auto;
    height: 25px;
}

.vehicle-section {
    margin-top: 8px;
}

.vehicle-list {
    list-style: none;
    padding-left: 0;
    margin: 4px 0;
    max-height: 120px;
    overflow-y: auto;
}

#adminScreenContent {
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
    -moz-column-gap: 10px;
    -webkit-column-gap: 10px;
    column-gap: 10px;
}

    #adminScreenContent > li {
        -webkit-column-break-inside: avoid;
        -moz-column-break-inside: avoid;
        -moz-page-break-inside: avoid;
        page-break-inside: avoid;
        break-inside: avoid-column;
    }

.headerList {
    display: inline-block;
    vertical-align: central;
    text-decoration: none;
    padding: 5px;
    list-style-type: none;
}

.specScreenList {
    vertical-align: top;
    text-decoration: none;
    padding: 0;
    list-style-type: none;
}

.myLink {
    color: #0054a6 !important;
    -moz-text-decoration-color: blue !important;
    text-decoration-color: blue !important;
    font-size: 12px !important;
    text-decoration: none !important;
    border-width: 0 !important;
    white-space: nowrap !important;
    background-color: transparent !important;
}

.mySliderClass {
    top: 84px;
    bottom: 15px;
    border: none;
    box-shadow: none;
    background: none;
    pointer-events: none;
}

    .mySliderClass .sidebarContent {
        pointer-events: all;
        overflow: auto;
        max-height: 100%;
    }

.inputWithFocusText {
    position: relative;
}

    .inputWithFocusText > input::-ms-clear {
        display: none;
    }

    .inputWithFocusText > input::-webkit-input-placeholder {
        -moz-transition: 0.3s opacity ease-in-out;
        -ms-transition: 0.3s opacity ease-in-out;
        -o-transition: 0.3s opacity ease-in-out;
        -webkit-transition: 0.3s opacity ease-in-out;
        transition: 0.3s opacity ease-in-out;
    }

    .inputWithFocusText > input:focus::-webkit-input-placeholder {
        opacity: 0;
    }

    .inputWithFocusText > input:focus:-moz-placeholder {
        opacity: 0;
    }

    .inputWithFocusText > input:focus::-moz-placeholder {
        opacity: 0;
    }

    .inputWithFocusText > input:focus + label {
        opacity: 0.25;
        color: #0054a6;
    }

    .inputWithFocusText > label {
        opacity: 0;
        position: absolute;
        top: 0.5em;
        right: 10px;
        pointer-events: none;
        -moz-transition: 0.3s opacity ease-in-out;
        -ms-transition: 0.3s opacity ease-in-out;
        -o-transition: 0.3s opacity ease-in-out;
        -webkit-transition: 0.3s opacity ease-in-out;
        transition: 0.3s opacity ease-in-out;
    }

.simpleHeader {
    border: 1px solid rgba(255, 255, 255, 0.8);
    background-color: rgba(255, 255, 255, 0.5);
    text-align: center;
}

.dropdown-submenu {
    position: relative;
}

    .dropdown-submenu > .dropdown-menu {
        top: 0;
        right: 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 > 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;
    }

.menuDropdown.open {
    display: block;
}

.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;
    }

/* BOOTSTRAP-MIGRATION Phase 6e: float-end / float-start flex-container compatibility.
   Bootstrap 5 defines .float-end as float:right !important and .float-start as
   float:left !important — both are ignored inside flex containers (flex formatting
   context suppresses float). In block containers float still works so we must NOT
   add margin-left:auto globally — it interferes with floated elements in block flow
   (consumes space to the left of the float, preventing adjacent text from rendering
   on the same line and causing unexpected wrapping).
   Scope the fix to known flex parent classes used in this app. */
.flex-container > .float-end,
.flex-container > .float-right,
.d-flex > .float-end,
.d-flex > .float-right,
.card > .float-end,
.card > .float-right,
.input-group > .float-end,
.input-group > .float-right,
.modal-header > .float-end,
.modal-header > .float-right,
.navbar > .float-end,
.navbar > .float-right,
.navbar-nav > li > .float-end,
.navbar-nav > li > .float-right,
/* BOOTSTRAP-MIGRATION Phase 6e: BS5 .nav is display:flex — float:right on a direct
   .nav child is ignored. Use margin-left:auto to push it to the far end instead. */
.nav > li.float-end,
.nav > li.float-right,
.nav > .float-end,
.nav > .float-right {
    margin-left: auto !important;
    float: none !important;
}
.flex-container > .float-start,
.flex-container > .float-left,
.d-flex > .float-start,
.d-flex > .float-left,
.card > .float-start,
.card > .float-left {
    margin-right: auto !important;
}

/* BOOTSTRAP-MIGRATION Phase 6e: BS5 dropdown-submenu float-start override */
.dropdown-submenu.float-start {
    float: none;
}

    .dropdown-submenu.float-start > .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;
    }

.text-sm {
    font-size: 0.95em;
}

.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.panel-heading .panel-title-content {
    display: inline;
}

    .panel-heading .panel-title-content.panel-title-collapse-content {
        display: none;
    }

.panel-heading.collapsed .panel-title-content {
    display: none;
}

    .panel-heading.collapsed .panel-title-content.panel-title-collapse-content {
        display: inline;
    }

/* BOOTSTRAP-MIGRATION Phase 6e: BS5 card-header equivalents */
.card-header .panel-title-content {
    display: inline;
}

    .card-header .panel-title-content.panel-title-collapse-content {
        display: none;
    }

.card-header.collapsed .panel-title-content {
    display: none;
}

    .card-header.collapsed .panel-title-content.panel-title-collapse-content {
        display: inline;
    }

.fillRowAuto {
    width: 100%;
    display: table;
}

    .fillRowAuto > * {
        display: table-cell;
        white-space: nowrap;
    }

    /* BOOTSTRAP-MIGRATION Phase 6e: .fillRowAuto > * above forces display:table-cell
       on every direct child, overriding .btn-group-vertical's own display:inline-flex
       and breaking its flex-direction:column stacking (e.g. the Infinite/Expiry range
       toggle in the batch contacts Scheduling popup rendered as one horizontal bar
       instead of two stacked buttons). Restore its own flex layout; .fillRowAuto's
       other children are untouched. */
    .fillRowAuto > .btn-group-vertical {
        display: inline-flex;
        flex-direction: column;
    }

    .fillRowAuto .autoHideOverflowWrapper {
        position: relative;
        height: 100%;
    }

        .fillRowAuto .autoHideOverflowWrapper > .autoHideOverflow {
            position: absolute;
            overflow: hidden;
            width: 100%;
            height: 100%;
        }

.fillRowFixed {
    width: 100%;
    display: table;
    table-layout: fixed;
}

    .fillRowFixed > * {
        display: table-cell;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.tableRow {
    display: table-row;
}

    .tableRow > * {
        display: table-cell;
        white-space: nowrap;
    }

.worksheetStyleSelector {
    width: 32px;
    height: 32px;
    border-radius: 3px;
    margin: 3px;
    cursor: pointer;
}

    .worksheetStyleSelector:hover {
        box-shadow: 0 0 9px 0 #6699ff;
    }

    .worksheetStyleSelector.active {
        box-shadow: 0 0 9px 1px #6699ff;
    }

.width-transition {
    transition: width .4s ease-in-out;
}

.rowEvenColHeight {
    display: table;
}

    .rowEvenColHeight > [class*='col-'] {
        float: none;
        display: table-cell;
        vertical-align: top;
    }

.deskingTable {
    width: 100%;
    display: table;
}

    .deskingTable > div {
        display: table-cell;
        vertical-align: top;
    }

    .deskingTable .deskingLeaseFinance {
        width: 100%;
    }

        .deskingTable .deskingLeaseFinance > div {
            width: 50%;
            float: left;
        }

    .deskingTable .mobileDesking {
        display: none;
    }

    .deskingTable .deskingTableHeader {
        height: 50px;
        max-height: 50px;
        padding: 4px 0;
        margin-bottom: 5px;
        width: 100%;
        border-top: 1px solid #CBCCCD;
        border-bottom: 1px solid #f7f7f7;
    }

    .deskingTable .deskingPadding {
        padding: 0 2px;
    }

    .deskingTable .deskingItem {
        padding: 2px 1px;
        margin: 5px 0;
        border-radius: 5px;
        height: 80px;
        max-height: 80px;
        width: 100%;
        cursor: pointer;
    }

        .deskingTable .deskingItem .blank {
            visibility: hidden;
            pointer-events: none;
        }

    .deskingTable .deskingSpace {
        padding: 2px 1px;
        margin: 5px 0;
        height: 80px;
        max-height: 80px;
        width: 100%;
    }

        .deskingTable .deskingSpace .deskingBorder {
            border-radius: 5px;
            height: 80px;
            max-height: 80px;
            width: 100%;
            cursor: pointer;
        }

.deskingFinalOption {
    border: 2px solid yellow !important;
}

.deskingHighlight {
    background-color: rgba(255, 255, 0, 0.5);
}

.deskingIncentive {
    border-radius: 5px;
    border: 1px solid #C6CED9;
    background-color: #C5E0FE;
    height: 100%;
    width: 100%;
    margin: 2px 5px;
    padding: 5px;
}

.desking-form-control {
    text-align: right;
    font-size: 12px;
    height: auto;
    padding: 2px 8px;
    background-color: #d8e5f1;
}

.flexSidebarWrapper {
    height: 100%;
    overflow: hidden;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
}

    .flexSidebarWrapper > .flexSidebar {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -moz-box-orient: vertical;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        -moz-flex-shrink: 0;
        -webkit-flex-shrink: 0;
        flex-shrink: 0;
        transition: width .4s ease-in-out;
        overflow: auto;
        width: 300px;
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
    }

    .flexSidebarWrapper > .flexSidebarCollapser {
        width: 14px;
        color: #5f5f5f;
        border: 1px solid #bfbfbf;
        border-radius: 3px;
        /* BOOTSTRAP-MIGRATION Phase 6e: Glyphicons removed. Replaced with FA6 Pro chevrons. */
        font-family: "Font Awesome 6 Pro";
        font-weight: 900;
        box-shadow: 1px 0 3px #aaaaaa;
        background-color: white;
        cursor: pointer;
        z-index: 1;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -moz-flex-shrink: 0;
        -webkit-flex-shrink: 0;
        flex-shrink: 0;
        -moz-align-items: center;
        -webkit-align-items: center;
        align-items: center;
    }

        .flexSidebarWrapper > .flexSidebarCollapser:hover {
            background-color: #f2f2f2;
            color: #424242;
        }

        .flexSidebarWrapper > .flexSidebarCollapser::after {
            /* BOOTSTRAP-MIGRATION Phase 6e: BS5's box-sizing reset on *::after can disrupt
               font-family inheritance from the parent flex container. Declare explicitly so
               the FA6 Pro chevron always renders — not as a raw Unicode box character. */
            font-family: "Font Awesome 6 Pro";
            font-weight: 900;
            content: "\f053"; /* FA6 fa-chevron-left — sidebar is open, click to collapse */
            margin-left:2px;
        }

        .flexSidebarWrapper > .flexSidebarCollapser.inverse::after {
            content: "\f054"; /* FA6 fa-chevron-right */
        }

    .flexSidebarWrapper > .flexSidebarMainContent {
        overflow: hidden;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-flex: 1;
        -moz-box-flex: 1;
        -webkit-flex: 1 1 auto;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
        -moz-box-orient: vertical;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
    }

.flexSidebarWrapperRight {
    height: 100%;
    overflow: hidden;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    flex-direction: row-reverse;
    -webkit-flex-direction: row-reverse;
    -ms-flex-direction: row-reverse;
}

    .flexSidebarWrapperRight > .flexSidebarMainContent {
        overflow: hidden;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-flex: 1;
        -moz-box-flex: 1;
        -webkit-flex: 1 1 auto;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
        -moz-box-orient: vertical;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .flexSidebarWrapperRight > .flexSidebar {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -moz-box-orient: vertical;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        -moz-flex-shrink: 0;
        -webkit-flex-shrink: 0;
        flex-shrink: 0;
        transition: width .4s ease-in-out;
        overflow: auto;
        width: 240px;
    }

    .flexSidebarWrapperRight.toggled > .flexSidebar {
        width: 0 !important;
    }

.flexSidebarWrapper.toggled > .flexSidebar {
    width: 0 !important;
    overflow: auto !important;
}

.flexSidebarWrapper.toggled > .flexSidebarCollapser.inverse::after {
    content: "\f053"; /* FA6 fa-chevron-left */
}

.flexSidebarWrapper.toggled > .flexSidebarCollapser::after {
    content: "\f054"; /* FA6 fa-chevron-right — sidebar is collapsed, click to expand */
}

.flexSidebarWrapper.toggledRight > .flexSidebarCollapser::after {
    content: "\f054"; /* FA6 fa-chevron-right */
}

.flexSidebarWrapper.toggledRight > .flexSidebarCollapser.inverse::after {
    content: "\f053"; /* FA6 fa-chevron-left */
}

.flexSidebarWrapper.toggledLeft > .flexSidebarCollapser.inverse::after {
    content: "\f054"; /* FA6 fa-chevron-right */
}

.flexSidebarWrapper.toggledLeft > .flexSidebarCollapser::after {
    content: "\f053"; /* FA6 fa-chevron-left */
}

/* Sidebar filter panels: keep each label/control row side by side and never let
   the label text wrap. Every label column gets the SAME fixed width so the
   controls (dropdowns) all share one left edge and one width, and the label
   fills that width without wrapping. Size the label column per panel with the
   --filter-label-w custom property (default fits ~16 chars, e.g. "Contact
   Stage:"); raise it on panels with longer labels like "Customer Initiated:".
   Apply the class to a filter container whose rows are laid out as
   [label][control]; non-.row items (checkboxes, etc.) are left untouched. */
.filterLabelsNoWrap .row {
    flex-wrap: nowrap;
    align-items: center;
    font-size: 13px; /* restore the pre-BS5-migration filter text size (BS5 base is 16px) */
    --bs-gutter-x: 0; /* drop Bootstrap's wide column gutter so the label sits close to its control */
    column-gap: 6px;
}

    .filterLabelsNoWrap .row > [class*="col-"]:first-child {
        white-space: nowrap;
        flex: 0 0 var(--filter-label-w, 7em);
        width: var(--filter-label-w, 7em);
    }

    .filterLabelsNoWrap .row > [class*="col-"]:last-child {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
    }

/* Same treatment for filter panels whose rows use .fillRowAuto ([label][control])
   instead of Bootstrap .row/.col-* — e.g. the classic Unsold Traffic and Sales
   Reassign sidebars. Each .fillRowAuto is its own display:table, so a longer label
   ("Assigned To:", "Unassigned Deals:") makes that row's column split differ and the
   dropdowns fall out of alignment. Switch these rows to flex with a fixed label
   column so every dropdown shares one left edge and one width. Exclude .btn-group
   rows (e.g. the Sales/Prospect/All toggle) which need their normal layout. */
    .filterLabelsNoWrap .fillRowAuto:not(.btn-group) {
        display: flex;
        align-items: center;
        column-gap: 6px;
        font-size: 13px;
    }

    .filterLabelsNoWrap .fillRowAuto:not(.btn-group) > *:first-child {
        white-space: nowrap;
        flex: 0 0 var(--filter-label-w, 7em);
        width: var(--filter-label-w, 7em);
        min-width: 0;
    }

    .filterLabelsNoWrap .fillRowAuto:not(.btn-group) > *:last-child {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
    }

tr.strikeout > td {
    position: relative;
}

    tr.strikeout > td:before {
        content: " ";
        position: absolute;
        left: 0;
        top: 50%;
        border-bottom: 1px solid #111;
        width: 100%;
        margin: 0 0;
        z-index: 1;
    }

tr.strikeout td:after {
    content: "\00B7";
    font-size: 10px;
}

td.strikeout:before {
    content: " ";
    position: absolute;
    left: 0;
    top: 50%;
    border-bottom: 1px solid #111;
    width: 100%;
    margin: 0 0;
    z-index: 1;
}

.disableOverlay {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
    background-color: rgba(222, 222, 222, 0.6);
    cursor: not-allowed;
}

.influenceMapElementContainer {
    width: 0;
    height: 0;
    overflow: visible;
    position: absolute;
    cursor: pointer;
}

.influenceMapElement {
    position: relative;
}

    .influenceMapElement > .influenceMapElementText {
        position: absolute;
        top: 0;
        width: 100%;
        text-align: center;
    }

    .influenceMapElement > img {
        height: 100%;
    }

.image {
    position: relative;
    width: 100%;
    text-align: center;
}

.txt {
    position: relative;
    bottom: 18px;
    font-size: 11px;
    color: #585858;
}

.txtDude {
    margin-top: -20px;
    margin-left: 5px;
    display: flex;
    font-size: 9px;
    color: white;
}

.inactiveTxtProfile {
    position: absolute;
    left: 30px;
    right: 0;
    height: 100px;
    line-height: 3em;
    color: red;
    font-size: 60px;
    text-shadow: 2px 2px 8px;
    opacity: .4;
    -ms-transform: rotate(-27deg);
    -webkit-transform: rotate(-27deg);
    transform: rotate(-27deg);
}

.duplicateLeadTxtProfile {
    position: absolute;
    left: 30px;
    right: 0;
    height: 100px;
    line-height: 3em;
    color: black;
    font-size: 60px;
    text-shadow: 2px 2px 8px;
    opacity: .4;
}

.line-through {
    text-decoration: line-through;
}

.inactiveTxt {
    position: absolute;
    margin-top: 200px !important;
    margin-left: 100px !important;
    width: 150px !important;
    height: 50px;
    color: red;
    font-size: 130px !important;
    text-shadow: 2px 2px 8px;
    opacity: .4;
    -ms-transform: rotate(-27deg);
    -webkit-transform: rotate(-27deg);
    transform: rotate(-27deg);
    z-index: 1500;
}

.treeview .list-group-item {
    cursor: pointer;
    padding: 5px;
}

.treeview span.indent {
    margin-left: 10px;
    margin-right: 10px;
}

.treeview span.icon {
    width: 12px;
    margin-right: 5px;
}

.treeview .node-disabled {
    color: silver;
    cursor: not-allowed;
}

*[hidden] {
    display: none;
}

.bubbledLeft {
    margin-top: 5px;
    padding: 8px 14px;
    clear: both;
    position: relative;
    float: left;
    margin-right: auto;
    border-radius: 0px 12px 12px 12px;
    background-color: #E0E0E1;
    color: #000;
    max-width:92%;
}
.bubbledRight {
    margin-top: 5px;
    padding: 8px 14px;
    clear: both;
    position: relative;
    float: right;
    margin-left: auto;
    text-align: right;
    border-radius: 12px 0px 12px 12px;
    background-color: #0054A6;
    color: white;
    max-width: 92%;
}

.bubbledLeftFailed {
    margin-top: 5px;
    padding: 5px 9px;
    clear: both;
    position: relative;
    float: left;
    margin-right: auto;
    text-align: left;
    border-radius: 8px 8px 8px 0;
    background-color: #E0E0E1;
    color: black;
    border: 1px solid #F11735;
    word-wrap: break-word;
    overflow: hidden;
    max-width: 92%;
}

    .bubbledLeftFailed:before {
        position: absolute;
        bottom: 0;
        left: -8px;
        content: "";
    }

    .failedMessageContainer {
        display: flex;
        flex-direction: column;
        max-width: 90%;
        margin-right: auto;
    }

.failedMessageText {
    color: red;
    font-size: 9px;
    margin-top: 2px;
    text-align: right;
}

.bubbledRightError {
    margin-top: 5px;
    padding: 8px 14px;
    clear: both;
    position: relative;
    float: right;
    margin-left: auto;
    text-align: left;
    border-radius: 12px 0px 12px 12px;
    background-color: #FEE0E4;
    color: #181A18;
    max-width: 92%;
}

.errorMessageContainerInbound {
    display: flex;
    flex-direction: column;
    align-items: flex-end; 
    margin-left: auto;
}
.smsDateUser {
    line-height: 14px;
    margin-top:10px;
    font-size: 12px;
    color: #4C4E50;
}

.modal-flex {
    height: 100% !important;
    width: 100% !important;
    /* BOOTSTRAP-MIGRATION Phase 6e: overflow:hidden lets child .modal-dialog percentage
       heights resolve against the fixed viewport height rather than scroll height. */
    overflow: hidden !important;
}

    .modal-flex > .modal-dialog {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -moz-box-orient: vertical;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        justify-content: center;
        height: 100%;
        /* BOOTSTRAP-MIGRATION Phase 6e: BS5 @media(min-width:576px) sets
           max-width:var(--bs-modal-width) (500px by default) on .modal-dialog,
           which overrides inline style="width:95%". Clear it here so inline widths
           on .modal-flex modals take effect.
           width:fit-content makes dialogs without an explicit inline width shrink-wrap
           their content (restoring old auto-sized popup behaviour). Dialogs that DO
           have an inline style="width:95%" or style="width:550px" override this via
           higher-specificity inline styles, so large modals are unaffected.

           DM-8120: shrink-to-content had no floor, so a dialog whose widest line of
           text happened to be short (e.g. a brief vehicle description, or a mostly-
           empty popup like Add Bookmark) collapsed to an unreadably small, cramped
           width - same popup, different size, purely because of content length. */
        width: fit-content;
        /* BOOTSTRAP-MIGRATION Phase 6e: clear BS5's default .modal-dialog max-width:500px
           (from its min-width:576px media query) so .modal-flex dialogs honor their inline
           width. This selector (0,2,0) already out-specifies BS5's .modal-dialog (0,1,0),
           so no !important is needed — and using !important would wrongly override legit
           inline max-width values (e.g. customerMatch's max-width:91%), letting those
           dialogs grow to ~100%. Keep this non-important so inline caps still win. */
        max-width: none;
        margin: 0 auto;
        padding: 10px 0;
    }

    /* DM-8120: give width:fit-content a sensible floor for dialogs that rely on
       shrink-to-content sizing, so a short-content popup doesn't collapse to
       something unreadably cramped just because its content happened to be short.
       Scoped to dialogs with no inline width/min-width/max-width of their own -
       [style*="width"] matches "width:", "min-width:" and "max-width:" alike - so
       any modal deliberately sized smaller than 350px (inline or via a Knockout
       style-binding caller passes at runtime, since that also lands in the style
       attribute) keeps its intended size untouched. */
    .modal-flex > .modal-dialog:not([style*="width"]) {
        min-width: 400px;
    }

        .modal-flex > .modal-dialog > .modal-content {
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -moz-box-orient: vertical;
            -webkit-flex-direction: column;
            -ms-flex-direction: column;
            flex-direction: column;
            overflow: visible;
            max-height: 100%;
            min-height: 1px;
        }

            .modal-flex > .modal-dialog > .modal-content > .modal-header {
                -moz-flex-shrink: 0;
                -webkit-flex-shrink: 0;
                flex-shrink: 0;
            }

            .modal-flex > .modal-dialog > .modal-content > .modal-footer {
                -moz-flex-shrink: 0;
                -webkit-flex-shrink: 0;
                flex-shrink: 0;
            }

            .modal-flex > .modal-dialog > .modal-content .modal-body {
                -webkit-box-flex: 1;
                -moz-box-flex: 1;
                -webkit-flex: 1 1 auto;
                -ms-flex: 1 1 auto;
                flex: 1 1 auto;
                overflow: auto;
            }

.inventoryGalleryViewItem {
    border: thin solid grey;
    border-radius: 5px;
    margin: 5px;
    padding: 5px 7px;
}

    .inventoryGalleryViewItem:hover {
        box-shadow: inset 0 0 0 99999px rgba(255, 255, 255, 0.5);
    }

    .inventoryGalleryViewItem .selected {
        box-shadow: inset 0 0 0 99999px rgba(255, 255, 255, 0.5);
    }

    .inventoryGalleryViewItem .inventoryGalleryViewImage {
        width: 225px;
        background-color: #fff;
    }

.inventoryGalleryViewItemSelected {
    box-shadow: inset 0 0 0 99999px rgba(255, 255, 255, 0.5);
}

.rotateNeg30 {
    -webkit-transform: rotate(330deg);
    -moz-transform: rotate(330deg);
    -o-transform: rotate(330deg);
    -ms-transform: rotate(330deg);
    transform: rotate(330deg);
}

.absoluteCenter {
    position: absolute;
    left: 50%;
    top: 50%;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.ui-autocomplete {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 99999;
    float: left;
    display: none;
    min-width: 160px;
    _width: 160px;
    padding: 4px 0;
    margin: 2px 0 0 0;
    list-style: none;
    background-color: #ffffff;
    border-color: #ccc;
    border-color: rgba(0, 0, 0, 0.2);
    border-style: solid;
    border-width: 1px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
    *border-right-width: 2px;
    *border-bottom-width: 2px;
    max-height: 200px;
    overflow-y: auto;
}

    .ui-autocomplete .ui-menu-item {
        display: block;
        padding: 3px 15px;
        clear: both;
        font-weight: normal;
        line-height: 18px;
        color: #555555;
        white-space: nowrap;
        cursor: pointer;
    }

        .ui-autocomplete .ui-menu-item:hover {
            color: #ffffff;
            text-decoration: none;
            background-color: #0088cc;
            border-radius: 0;
            -webkit-border-radius: 0;
            -moz-border-radius: 0;
            background-image: none;
        }

        .ui-autocomplete .ui-menu-item.active {
            color: #ffffff;
            text-decoration: none;
            background-color: #0088cc;
            border-radius: 0;
            -webkit-border-radius: 0;
            -moz-border-radius: 0;
            background-image: none;
        }

.ui-menu .ui-menu-item a.ui-corner-all:hover {
    background: #0088cc !important;
}

.ui-menu .ui-menu-item a.ui-corner-all:focus {
    background: #0088cc !important;
}

.ui-menu .ui-menu-item a.ui-corner-all:active {
    background: #0088cc !important;
}

.ui-state-hover {
    background: #0088cc;
}

.ui-state-focus {
    background: #0088cc;
}

.hr-divider {
    width: 100%;
    margin: 5px 0;
    padding: 0 10px;
    background-color: #CCCCCC;
    height: 1px;
}

.flexDevExRichText {
    width: 100%;
    height: 100%;
}

    .flexDevExRichText > form {
        width: 100%;
        height: 100%;
    }

        .flexDevExRichText > form > #RichEdit {
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -moz-box-orient: vertical;
            -webkit-flex-direction: column;
            -ms-flex-direction: column;
            flex-direction: column;
        }

            .flexDevExRichText > form > #RichEdit > #RichEdit_View {
                height: 100% !important;
            }

.bold {
    font-weight: bold;
}

.vehicleInactive {
    color: #a3a3a3 !important;
    font-style: italic !important;
}

.yellowBorder {
    border: 2px solid #ffff4d;
}

.yellowBorderBegin {
    border-top: 2px solid #ffff4d;
    border-left: 2px solid #ffff4d;
    border-bottom: 2px solid #ffff4d;
}

.yellowBorderMiddle {
    border-top: 2px solid #ffff4d;
    border-bottom: 2px solid #ffff4d;
}

.yellowBorderEnd {
    border-top: 2px solid #ffff4d;
    border-right: 2px solid #ffff4d;
    border-bottom: 2px solid #ffff4d;
}

.btn-arrow-right {
    position: relative;
    padding-left: 18px;
    padding-right: 18px;
    padding-left: 36px;
}

    .btn-arrow-right:before {
        content: "";
        position: absolute;
        top: 5px;
        width: 16px;
        height: 16px;
        background: inherit;
        border: inherit;
        border-left-color: transparent;
        border-bottom-color: transparent;
        border-radius: 0 4px 0 0;
        -webkit-border-radius: 0 4px 0 0;
        -moz-border-radius: 0 4px 0 0;
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        right: -8px;
        height: 16px;
        width: 16px;
        margin-top: -3px;
        background-color: transparent;
    }

    .btn-arrow-right:after {
        content: "";
        position: absolute;
        top: 5px;
        width: 16px;
        height: 16px;
        background: inherit;
        border: inherit;
        border-left-color: transparent;
        border-bottom-color: transparent;
        border-radius: 0 4px 0 0;
        -webkit-border-radius: 0 4px 0 0;
        -moz-border-radius: 0 4px 0 0;
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        right: -8px;
        height: 16px;
        width: 16px;
        margin-top: -3px;
        z-index: 1;
    }

.btn-arrow-left {
    position: relative;
    padding-left: 18px;
    padding-right: 18px;
    padding-right: 36px;
}

    .btn-arrow-left:before {
        content: "";
        position: absolute;
        top: 5px;
        width: 16px;
        height: 16px;
        background: inherit;
        border: inherit;
        border-left-color: transparent;
        border-bottom-color: transparent;
        border-radius: 0 4px 0 0;
        -webkit-border-radius: 0 4px 0 0;
        -moz-border-radius: 0 4px 0 0;
        transform: rotate(225deg);
        -webkit-transform: rotate(225deg);
        -moz-transform: rotate(225deg);
        -o-transform: rotate(225deg);
        -ms-transform: rotate(225deg);
        right: -8px;
        height: 16px;
        width: 16px;
        margin-top: -3px;
        z-index: 1;
    }

    .btn-arrow-left:after {
        content: "";
        position: absolute;
        top: 5px;
        width: 16px;
        height: 16px;
        background: inherit;
        border: inherit;
        border-left-color: transparent;
        border-bottom-color: transparent;
        border-radius: 0 4px 0 0;
        -webkit-border-radius: 0 4px 0 0;
        -moz-border-radius: 0 4px 0 0;
        transform: rotate(225deg);
        -webkit-transform: rotate(225deg);
        -moz-transform: rotate(225deg);
        -o-transform: rotate(225deg);
        -ms-transform: rotate(225deg);
        right: -8px;
        height: 16px;
        width: 16px;
        margin-top: -3px;
        background-color: transparent;
    }

.errorBorder {
    border-style: groove;
    border-color: #bf3333;
}

.placeholder {
    color: #bf3333;
    font-style: italic;
}

.inputDropdown::-webkit-input-placeholder {
    color: #bf3333;
    font-style: italic;
}

.inputDropdown:-moz-placeholder {
    color: #bf3333;
    font-style: italic;
}

.inputDropdown::-moz-placeholder {
    color: #bf3333;
    font-style: italic;
}

.inputDropdown:-ms-input-placeholder {
    color: #bf3333;
    font-style: italic;
}

.inputDropdown::-ms-input-placeholder {
    color: #bf3333;
    font-style: italic;
}

.StrongBorder {
    border-color: lightgray !important;
    border-radius: 0 !important;
}

.min {
    width: 250px;
    height: 35px;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0;
    float: left;
    position: static !important;
}

    .min .modal-dialog {
        height: 100%;
        width: 100%;
        margin: 0 !important;
        padding: 0 !important;
    }

    .min .modal-content {
        height: 100%;
        width: 100%;
        margin: 0 !important;
        padding: 0 !important;
    }

    .min .modal-header {
        height: 100%;
        width: 100%;
        margin: 0 !important;
        padding: 3px 5px !important;
    }

.display-none {
    display: none;
}

.minmaxCon {
    height: 35px;
    bottom: 1px;
    position: fixed;
    right: 1px;
    width: 250px;
    z-index: 9999;
}

.fluidMedia {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

    .fluidMedia iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

.floatThead-wrapper {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    overflow: hidden;
    min-height: 22px;
    width: 100%;
    flex: 1;
}

.worksheet-clean {
    background: none !important;
    border-width: 0 !important;
    box-shadow: none !important;
}

/* BOOTSTRAP-MIGRATION Phase 6e: Worksheet section accordion.
   Replaces .card.worksheet-clean / .card-header.card-heading-worksheet structure.
   KO toggles .show on the content div (opposite of old pattern that toggled .collapse).
   BS5's .collapse { display:none } / .collapse.show { display:block } handles visibility. */
.worksheet-section {
    width: 100%;
}

.worksheet-section-header {
    padding: 6px 12px;
    user-select: none;
    border-bottom: 1px solid rgba(0, 0, 0, .125);
}

.worksheet-section-body .flex-container > div {
    min-width: 0;
}

.worksheet-section-body .flex-container > div .bold {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Vehicle pricing summary: the value column (last cell of each row) must never
   shrink or truncate — only the name/label column may ellipsis. This overrides
   the min-width:0 + .bold ellipsis rules above for the dollar amounts, so the
   Subtotal is not clipped and every value shares one right-aligned edge. */
.worksheet-vehicle-summary .flex-container > div:last-child,
.worksheet-vehicle-summary .flex-container > div.bold:last-child {
    flex: 0 0 auto;
    min-width: max-content;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
    text-align: right;
    padding-left: 8px;
}

.worksheet-section-header h4.card-title {
    font-size: 14px;
    font-weight: normal;
    display: inline;
    margin: 0;
}

.worksheet-section-body {
    padding: 10px 12px 15px;
}

.summaryTable {
    border-collapse: collapse;
}

    .summaryTable td {
        padding: 2px;
        overflow: hidden;
        white-space: nowrap;
    }

.editableLabel {
    height: 17px;
    font-size: 13px;
    color: #333;
    padding: 0 5px;
    border: 0;
    border-image: none;
    box-shadow: none;
    background-color: transparent;
}

.tooltip {
    z-index: 10001;
}

.bootstrap-tagsinput {
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    display: inline-block;
    padding: 4px 6px;
    color: #555;
    vertical-align: middle;
    border-radius: 4px;
    max-width: 100%;
    line-height: 22px;
    cursor: text;
}

    .bootstrap-tagsinput input {
        border: none;
        box-shadow: none;
        outline: none;
        background-color: transparent;
        padding: 0 6px;
        margin: 0;
        width: auto;
        max-width: inherit;
    }

        .bootstrap-tagsinput input:focus {
            border: none;
            box-shadow: none;
        }

    .bootstrap-tagsinput .tag {
        margin-right: 2px;
        color: white;
    }

        .bootstrap-tagsinput .tag [data-role="remove"] {
            margin-left: 8px;
            cursor: pointer;
        }

            .bootstrap-tagsinput .tag [data-role="remove"]:after {
                content: "x";
                padding: 0 2px;
            }

            .bootstrap-tagsinput .tag [data-role="remove"]:hover {
                box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
            }

                .bootstrap-tagsinput .tag [data-role="remove"]:hover:active {
                    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
                }

    .bootstrap-tagsinput.form-control input::-moz-placeholder {
        color: #777;
        opacity: 1;
    }

    .bootstrap-tagsinput.form-control input:-ms-input-placeholder {
        color: #777;
    }

    .bootstrap-tagsinput.form-control input::-webkit-input-placeholder {
        color: #777;
    }

.dataCard {
    background-image: -webkit-linear-gradient(bottom, #cccccc 0, #999999 100%);
    background-image: -o-linear-gradient(bottom, #cccccc 0, #999999 100%);
    background-image: -webkit-gradient(linear, left bottom, left top, from(#999999), to(#c2ffff));
    background-image: linear-gradient(to top, #cccccc 0, #999999 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#999999',endColorstr='#cccccc',GradientType=0);
    background-repeat: repeat-x;
    border-color: #dcdcdc;
    -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 0 rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 0 rgba(255, 255, 255, 0.1);
    color: #080808;
    border-radius: 5px;
    padding: 5px;
    margin: 5px;
}

    .dataCard:hover {
        box-shadow: inset 0 0 5px 5px #4b8df7;
    }

    .dataCard.selected {
        box-shadow: inset 0 0 5px 5px #4b8df7;
    }

.dataCard_white {
    background-image: -webkit-linear-gradient(bottom, #ededed 0, #ffffff 100%);
    background-image: -o-linear-gradient(bottom, #ededed 0, #ffffff 100%);
    background-image: -webkit-gradient(linear, left bottom, left top, from(#ededed), to(#ffffff));
    background-image: linear-gradient(to top, #ededed 0, #ffffff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed',endColorstr='#ffffff',GradientType=0);
    background-repeat: repeat-x;
    border-color: #d1d1d1;
    -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 0 rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 0 rgba(255, 255, 255, 0.1);
    color: #080808;
    border-radius: 5px;
    padding: 5px;
    margin: 5px;
}

    .dataCard_white:hover {
        box-shadow: inset 0 0 5px 5px #4b8df7;
    }

    .dataCard_white.selected {
        box-shadow: inset 0 0 5px 5px #4b8df7;
    }

    .dataCard_white.highlighted {
        background-image: linear-gradient(to top, #4b8df7 0, lightgray 68%);
    }

div.droppableSection {
    border-radius: 4px;
}

.QPSectionElement.selected {
    box-shadow: inset 0 0 5px 5px #4b8df7;
}

.QPSectionElement.NA {
    background-color: #fbecba;
    color: black;
}

.droppableSection.selected {
    box-shadow: inset 0 0 5px 5px #4b8df7;
}

#dropContainerQP > div:last-child {
    padding-bottom: 50px !important;
    margin-bottom: 50px !important;
}

ul.jqtree-tree .jqtree-title.jqtree-title-folder {
    font-weight: bold;
    font-style: normal !important;
    color: black !important;
}

ul.jqtree-tree .jqtree-title {
    font-style: italic !important;
    color: #4b8df7 !important;
    font-weight: normal;
}

#assist_menu {
    position: fixed;
    right: 0;
    top: 50%;
    width: 1.5em;
    margin: -2.5em 0 0 0;
    z-index: 999999;
    background: rgba(133, 194, 10, 0.4);
    font-weight: bold;
    font-size: large;
    text-align: left;
    border: solid rgba(133, 194, 10, 0.2);
    border-right: none;
    padding: 6px 5px 0 2px;
    box-shadow: 0 1px 3px black;
    border-radius: 6px 0 0 6px;
}

.box {
    position: relative;
    display: inline-block;
    border-radius: 5px;
    border-radius: 5px;
    -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

    .box::after {
        content: "";
        border-radius: 5px;
        position: absolute;
        z-index: -1;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
        transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    }

    .box:hover {
        -webkit-transform: scale(1.25, 1.25);
        transform: scale(1.25, 1.25);
    }

        .box:hover::after {
            opacity: 1;
        }

.blinkColor {
    animation: blinking 2s infinite;
}

.blink-bg {
    animation: blinkingBackground 2s infinite;
    color: white;
}

.dataCard_alternating {
    background-image: -webkit-linear-gradient(bottom, #ededed 0, #ffffff 100%);
    background-image: -o-linear-gradient(bottom, #ededed 0, #ffffff 100%);
    background-image: -webkit-gradient(linear, left bottom, left top, from(#ededed), to(#ffffff));
    background-image: linear-gradient(to top, #ededed 0, #ffffff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed',endColorstr='#ffffff',GradientType=0);
    background-repeat: repeat-x;
    border-color: #d1d1d1;
    -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 0 rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 0 rgba(255, 255, 255, 0.1);
    color: #080808;
    border-radius: 5px;
    padding: 5px;
    margin: 5px;
}

    .dataCard_alternating:hover {
        box-shadow: inset 0 0 5px 5px #4b8df7;
    }

    .dataCard_alternating.selected {
        box-shadow: inset 0 0 5px 5px #4b8df7;
    }

div.dataCard_alternating > div:nth-of-type(odd) {
    background: #e0e0e0;
}

.collapsed .fa-chevron-down {
    display: none;
}

.collapsed .fa-chevron-right {
    display: inline-block;
}

.fa-chevron-right {
    display: none;
}

.fa-chevron-down {
    display: inline-block;
}

.vectro {
    position: relative;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 0.1px #f1f1f1;
    font-family: "Righteous", cursive;
    font-size: 15pt;
    margin: 5px 0 5px 0;
}

    .vectro:after {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0, rgba(255, 255, 255, 0.05) 1px, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0) 2px);
    }

.windows .vectro {
    -webkit-text-stroke: 4px #f1f1f1;
}

.windows .vectro-red {
    padding-right: 30px;
}

.windows .vectro-green {
    padding-right: 30px;
    margin-left: -30px;
}

.windows .vectro-blue {
    padding-right: 30px;
    margin-left: -30px;
}

.vectro-body {
    -webkit-background-clip: text;
    background-image: -webkit-linear-gradient(#C3BFB4 0, #FDFCFA 50%, #E8E7E5 51%, #757172 52%, #E8E9DB 100%);
    -webkit-filter: drop-shadow(2px 2px 15px #3F59F4);
}

.vectro-red {
    color: #F10C20;
    -webkit-text-fill-color: #F10C20;
    -webkit-text-stroke: 0;
    -webkit-filter: drop-shadow(2px 2px 15px #F10C20);
    font-style: italic;
    padding-right: 20px;
}

.vectro-green {
    color: #6BFF2B;
    -webkit-text-fill-color: #6BFF2B;
    -webkit-filter: drop-shadow(2px 2px 15px #6BFF2B);
    -webkit-text-stroke: 0;
    font-style: italic;
    padding-right: 20px;
    margin-left: -20px;
}

.vectro-blue {
    color: #3F59F4;
    -webkit-text-fill-color: #3F59F4;
    -webkit-filter: drop-shadow(2px 2px 15px #3F59F4);
    -webkit-text-stroke: 0;
    font-style: italic;
    padding-right: 20px;
    margin-left: -20px;
}

.slowShake {
    animation: shake 6s;
    animation-iteration-count: infinite;
}

.module {
    width: 100%;
    padding: 5px;
    color: black;
    border-width: 3px;
    border-style: solid;
    border-image: linear-gradient(to bottom, steelBlue, rgba(0, 0, 0, 0)) 1 100%;
}

.faa-wrench.animated {
    -webkit-animation: wrench 2.5s ease infinite;
    animation: wrench 2.5s ease infinite;
    transform-origin-x: 90%;
    transform-origin-y: 35%;
    transform-origin-z: initial;
}

.faa-wrench.animated-hover:hover {
    -webkit-animation: wrench 2.5s ease infinite;
    animation: wrench 2.5s ease infinite;
    transform-origin-x: 90%;
    transform-origin-y: 35%;
    transform-origin-z: initial;
}

.faa-parent.animated-hover:hover > .faa-wrench {
    -webkit-animation: wrench 2.5s ease infinite;
    animation: wrench 2.5s ease infinite;
    transform-origin-x: 90%;
    transform-origin-y: 35%;
    transform-origin-z: initial;
}

.faa-parent.animated-hover:hover > .faa-ring {
    -webkit-animation: ring 2s ease infinite;
    animation: ring 2s ease infinite;
    transform-origin-x: 50%;
    transform-origin-y: 0;
    transform-origin-z: initial;
}

.faa-parent.animated-hover:hover > .faa-vertical {
    -webkit-animation: vertical 2s ease infinite;
    animation: vertical 2s ease infinite;
}

.faa-parent.animated-hover:hover > .faa-horizontal {
    -webkit-animation: horizontal 2s ease infinite;
    animation: horizontal 2s ease infinite;
}

.faa-parent.animated-hover:hover > .faa-flash {
    -webkit-animation: flash 2s ease infinite;
    animation: flash 2s ease infinite;
}

.faa-parent.animated-hover:hover > .faa-bounce {
    -webkit-animation: bounce 2s ease infinite;
    animation: bounce 2s ease infinite;
}

.faa-parent.animated-hover:hover > .faa-spin {
    -webkit-animation: spin 1.5s linear infinite;
    animation: spin 1.5s linear infinite;
}

.faa-parent.animated-hover:hover > .faa-float {
    -webkit-animation: float 2s linear infinite;
    animation: float 2s linear infinite;
}

.faa-parent.animated-hover:hover > .faa-pulse {
    -webkit-animation: pulse 2s linear infinite;
    animation: pulse 2s linear infinite;
}

.faa-parent.animated-hover:hover > .faa-shake {
    -webkit-animation: wrench 2.5s ease infinite;
    animation: wrench 2.5s ease infinite;
}

.faa-parent.animated-hover:hover > .faa-tada {
    -webkit-animation: tada 2s linear infinite;
    animation: tada 2s linear infinite;
}

.faa-parent.animated-hover:hover > .faa-passing {
    -webkit-animation: passing 3s linear infinite;
    animation: passing 3s linear infinite;
}

.faa-parent.animated-hover:hover > .faa-burst {
    -webkit-animation: burst 3s infinite linear;
    animation: burst 3s infinite linear;
}

.faa-ring.animated {
    -webkit-animation: ring 2s ease infinite;
    animation: ring 2s ease infinite;
    transform-origin-x: 50%;
    transform-origin-y: 0;
    transform-origin-z: initial;
}

.faa-ring.animated-hover:hover {
    -webkit-animation: ring 2s ease infinite;
    animation: ring 2s ease infinite;
    transform-origin-x: 50%;
    transform-origin-y: 0;
    transform-origin-z: initial;
}

.faa-vertical.animated {
    -webkit-animation: vertical 2s ease infinite;
    animation: vertical 2s ease infinite;
}

.faa-vertical.animated-hover:hover {
    -webkit-animation: vertical 2s ease infinite;
    animation: vertical 2s ease infinite;
}

.faa-horizontal.animated {
    -webkit-animation: horizontal 2s ease infinite;
    animation: horizontal 2s ease infinite;
}

.faa-horizontal.animated-hover:hover {
    -webkit-animation: horizontal 2s ease infinite;
    animation: horizontal 2s ease infinite;
}

.faa-flash.animated {
    -webkit-animation: flash 2s ease infinite;
    animation: flash 2s ease infinite;
}

.faa-flash.animated-hover:hover {
    -webkit-animation: flash 2s ease infinite;
    animation: flash 2s ease infinite;
}

.faa-bounce.animated {
    -webkit-animation: bounce 2s ease infinite;
    animation: bounce 2s ease infinite;
}

.faa-bounce.animated-hover:hover {
    -webkit-animation: bounce 2s ease infinite;
    animation: bounce 2s ease infinite;
}

.faa-spin.animated {
    -webkit-animation: spin 1.5s linear infinite;
    animation: spin 1.5s linear infinite;
}

.faa-spin.animated-hover:hover {
    -webkit-animation: spin 1.5s linear infinite;
    animation: spin 1.5s linear infinite;
}

.faa-float.animated {
    -webkit-animation: float 2s linear infinite;
    animation: float 2s linear infinite;
}

.faa-float.animated-hover:hover {
    -webkit-animation: float 2s linear infinite;
    animation: float 2s linear infinite;
}

.faa-pulse.animated {
    -webkit-animation: pulse 2s linear infinite;
    animation: pulse 2s linear infinite;
}

.faa-pulse.animated-hover:hover {
    -webkit-animation: pulse 2s linear infinite;
    animation: pulse 2s linear infinite;
}

.faa-shake.animated {
    -webkit-animation: wrench 2.5s ease infinite;
    animation: wrench 2.5s ease infinite;
}

.faa-shake.animated-hover:hover {
    -webkit-animation: wrench 2.5s ease infinite;
    animation: wrench 2.5s ease infinite;
}

.faa-tada.animated {
    -webkit-animation: tada 2s linear infinite;
    animation: tada 2s linear infinite;
}

.faa-tada.animated-hover:hover {
    -webkit-animation: tada 2s linear infinite;
    animation: tada 2s linear infinite;
}

.faa-passing.animated {
    -webkit-animation: passing 3s linear infinite;
    animation: passing 3s linear infinite;
}

.faa-passing.animated-hover:hover {
    -webkit-animation: passing 3s linear infinite;
    animation: passing 3s linear infinite;
}

.faa-burst.animated {
    -webkit-animation: burst 3s infinite linear;
    animation: burst 3s infinite linear;
}

.faa-burst.animated-hover:hover {
    -webkit-animation: burst 3s infinite linear;
    animation: burst 3s infinite linear;
}

.acceptedQuote {
    background-color: #e6f2ff;
    border-bottom: solid #99ccff;
}

.notAcceptedQuote {
    background-color: white;
    border-bottom: solid #cccccc;
}

.blink {
    animation: blink 0.5s step-start infinite;
}

.panel-recall {
    width: 130px;
    height: 90px !important;
    text-align: center;
}

    .panel-recall > .panel-body {
        height: 50px !important;
        font-size: 12px !important;
    }

    .panel-recall > .panel-heading {
        font-size: 13px !important;
    }

.label-recall {
    display: inline-block;
    height: 20px;
    width: 75px;
    padding: 5px;
    font-size: 75%;
    font-weight: bold;
    line-height: 1;
    color: white;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25em;
}

/* Recall master detail cards — equal-width, evenly spaced across the row.
   Each detail row holds 7 cards; flex:1 1 0 makes every card the same width
   (independent of its content) and stretches them to fill the row. */
.card-recall {
    flex: 1 1 0;
    min-width: 0;
    margin: 0 6px;
}

    .card-recall:first-child {
        margin-left: 0;
    }

    .card-recall:last-child {
        margin-right: 0;
    }

.password-container {
    position: relative;
}

    .password-container input[type="password"] {
        width: 100%;
        padding: 12px 36px 12px 12px;
        box-sizing: border-box;
    }

    .password-container input[type="text"] {
        width: 100%;
        padding: 12px 36px 12px 12px;
        box-sizing: border-box;
    }

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}

    input:-webkit-autofill:hover {
        -webkit-box-shadow: 0 0 0 30px white inset !important;
    }

    input:-webkit-autofill:focus {
        -webkit-box-shadow: 0 0 0 30px white inset !important;
    }

    input:-webkit-autofill:active {
        -webkit-box-shadow: 0 0 0 30px white inset !important;
    }

.borderBlue {
    border-color: #0054A6;
}

.beback {
    border: 1px solid #5cb252;
    background-color: white;
    color: black;
    cursor: pointer;
}

.beback_today {
    border: 1px solid #5cb252;
    background-color: #5cb252;
    color: white;
    cursor: pointer;
}

.errorText {
    color: #8D0404;
}

.footerImage {
    overflow: hidden;
    position: absolute;
    width: 100%;
    vertical-align: bottom;
    display: inline-block;
    bottom: 0;
}

.telephonyTranscriptionPopup {
    margin: 10px;
    background-color: white;
    min-width: 300px;
    bottom: 2%;
    position: fixed;
    z-index: 1050;
}

.dataCard_blue {
    background-image: -webkit-linear-gradient(left, #01264a 0, #0054A6 50%) !important;
    background-image: -o-linear-gradient(left, #01264a 0, #0054A6 50%) !important;
    background-image: -webkit-gradient(linear, left bottom, left top, from(#01264a), to(#0054A6)) !important;
    background-image: linear-gradient(to left, #01264a 0, #0054A6 50%) !important;
    color: #fafbfc !important;
}

.mb-0 {
    margin-bottom: 0;
}

li > button > span {
    font-family: Roboto;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

i .mce-ico.mce-i-attachFile {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Pro 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.--><path d="M375 73c-26-26-68.1-26-94.1 0L89 265C45.3 308.6 45.3 379.4 89 423s114.4 43.6 158.1 0L399 271c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9L281 457c-62.4 62.4-163.5 62.4-225.9 0S-7.4 293.4 55 231L247 39C291.7-5.7 364.2-5.7 409 39s44.7 117.2 0 161.9L225.2 384.7c-31.6 31.6-83.6 28.7-111.5-6.2c-23.8-29.8-21.5-72.8 5.5-99.8L271 127c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9L153.2 312.7c-9.7 9.7-10.6 25.1-2 35.8c10 12.5 28.7 13.6 40 2.2L375 167c26-26 26-68.1 0-94.1z"/></svg>') !important;
    height: 19px !important;
    width: 17px !important;
}

.mce-ico.mce-i-fa {
    display: inline-block;
    font: normal normal normal 16px/1 FontAwesome;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.logo-button {
    background-repeat: no-repeat;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="uuid-a71ccb7b-1336-4563-a5ae-f7470a6b2870" viewBox="0 0 978.96 979.2"><defs><style>.uuid-e4e5168a-ac89-4cb2-87f2-5e4177697bd8{fill:%23181918;}.uuid-e4e5168a-ac89-4cb2-87f2-5e4177697bd8,.uuid-cefe0f09-5cd2-4bbf-9ee8-0f6712a30259,.uuid-9ebf0a30-6a6d-4322-a614-62ed3717ee55,.uuid-ef369f08-e4c7-4e86-9fa9-ba9efd70fef9{stroke-width:0px;}.uuid-cefe0f09-5cd2-4bbf-9ee8-0f6712a30259{fill:%23231f20;}.uuid-9ebf0a30-6a6d-4322-a614-62ed3717ee55{fill:%230054a6;}.uuid-ef369f08-e4c7-4e86-9fa9-ba9efd70fef9{fill:%23fff;filter:url(%23uuid-edca2a82-e56f-4ba9-9356-94040d4019aa);}</style><filter id="uuid-edca2a82-e56f-4ba9-9356-94040d4019aa" filterUnits="userSpaceOnUse"><feOffset dx="4" dy="4"/><feGaussianBlur result="uuid-c99b30bb-64d4-4ab5-8273-93fdb1f5ca7e" stdDeviation="5"/><feFlood flood-color="%23181918" flood-opacity=".25"/><feComposite in2="uuid-c99b30bb-64d4-4ab5-8273-93fdb1f5ca7e" operator="in"/><feComposite in="SourceGraphic"/></filter></defs><rect class="uuid-ef369f08-e4c7-4e86-9fa9-ba9efd70fef9" x="11.0435" y="11.1642" width="948.8132" height="948.8132" rx="92.9066" ry="92.9066"/><g id="uuid-8e2bc765-c835-4111-8a82-16c44c617c76"><path class="uuid-e4e5168a-ac89-4cb2-87f2-5e4177697bd8" d="m112.6087,708.7767v-384.2949h144.3577c124.6481,0,186.2348,59.6186,186.2348,192.151s-61.5867,192.1438-186.2348,192.1438H112.6087Zm144.3577-81.2925c71.9341,0,94.0995-42.8634,94.0995-110.8513s-22.1654-110.8515-94.0995-110.8515h-53.2042v221.7028h53.2042Z"/><polygon class="uuid-cefe0f09-5cd2-4bbf-9ee8-0f6712a30259" points="661.3119 432.6005 601.8734 492.039 661.3257 551.4777 720.7505 492.039 661.3119 432.6005"/><polygon class="uuid-e4e5168a-ac89-4cb2-87f2-5e4177697bd8" points="553.1794 324.4818 553.1133 324.5472 553.1133 324.4876 469.0293 324.4876 469.0293 709.386 553.1133 709.386 553.1133 443.2725 598.6106 488.7697 658.0361 429.3312 553.1794 324.4818"/><path class="uuid-e4e5168a-ac89-4cb2-87f2-5e4177697bd8" d="m511.0786,299.5575c31.1572,0,56.4271-25.2626,56.4271-56.4343s-25.2698-56.4467-56.4271-56.4467-56.4416,25.2613-56.4416,56.4467,25.2698,56.4343,56.4416,56.4343Z"/><path class="uuid-9ebf0a30-6a6d-4322-a614-62ed3717ee55" d="m811.6671,299.5575c31.1573,0,56.4389-25.2626,56.4389-56.4343s-25.2816-56.4467-56.4389-56.4467c-31.173,0-56.4415,25.2613-56.4415,56.4467s25.2685,56.4343,56.4415,56.4343Z"/><polygon class="uuid-9ebf0a30-6a6d-4322-a614-62ed3717ee55" points="769.6434 324.5014 769.6303 324.4818 664.5878 429.504 724.0271 488.9353 769.6434 443.319 769.6434 709.386 853.7012 709.386 853.7012 324.4876 769.6434 324.4876 769.6434 324.5014"/></g></svg>');
}

@media (min-width: 1100px) {
    .containerLogin {
        padding-top: 45px;
    }
}

@media (min-width: 768px) {
    .bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs {
        width: 38em;
    }
}

@media (min-width: 992px) {
    .bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs {
        width: 38em;
    }

    .containerLogin {
        padding-top: 35px;
    }
}

@media (min-width: 1200px) {
    .bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs {
        width: 38em;
    }

    .containerLogin {
        padding-top: 50px;
    }
}

@media screen and (max-width: 1255px) {
    .bookApptPopupBaseSettings {
        width: 70% !important;
        left: 15%;
    }
}

@media screen and (max-width: 1180px) {
    .worksheet-Width {
        min-width: 80%;
    }
}

@media screen and (max-width: 1080px) {
    .bookApptPopupBaseSettings {
        width: 80% !important;
        left: 10%;
    }

    .clickable tr {
        height: 45px !important;
    }

    .hoverTable tr {
        line-height: 25px;
    }

    .dropdown-menu li {
        margin: 5px !important;
    }

    .add-check > .btn {
        min-width: 120px;
    }

    html {
        -webkit-user-select: none;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }
}

@media screen and (max-width: 940px) {
    .bookApptPopupBaseSettings {
        width: 95% !important;
        left: 2%;
    }
}

@media only screen and (max-width: 1200px) {
    .deskingTable .mobileDesking {
        display: block;
    }

    .deskingTable .deskingLeaseFinance > div {
        width: 100%;
    }
}

@media screen and (-ms-high-contrast: active) {
    tr.strikeout > td {
        position: relative;
    }

        tr.strikeout > td:before {
            top: auto;
            height: 1em;
        }

    tr.strikeout td:after {
        content: "\00B7";
        font-size: 10px;
    }

    td.strikeout:before {
        top: auto;
        height: 1em;
    }
}

@media screen and (-ms-high-contrast: none) {
    tr.strikeout > td {
        position: relative;
    }

        tr.strikeout > td:before {
            top: auto;
            height: 1em;
        }

    tr.strikeout td:after {
        content: "\00B7";
        font-size: 10px;
    }

    td.strikeout:before {
        top: auto;
        height: 1em;
    }
}

h1 {
    font-family: "Open Sans", sans-serif;
}

h2 {
    font-family: "Open Sans", sans-serif;
}

h3 {
    font-family: "Open Sans", sans-serif;
}

h4 {
    font-family: "Open Sans", sans-serif;
}

h5 {
    font-family: "Open Sans", sans-serif;
}

h6 {
    font-family: "Open Sans", sans-serif;
}

a {
    font-family: "Open Sans", sans-serif;
}

p {
    font-family: "din-2014", sans-serif;
}
/* BOOTSTRAP-MIGRATION Phase 6e: These rules lived in bootstrap.css (BS3 custom
   additions) which is no longer loaded. Ported here so nav-communication-banner
   positioning continues to work with Bootstrap 5. */
.nav-communication-banner,
.nav-communication-banner-last-contact,
.nav-communication-banner-universal-tokens,
.nav-communication-banner-last-contact-universal-tokens {
    display: inline;
    position: absolute;
    right: 70px;
}
@media (min-width: 1395px) {
    .nav-communication-banner {
        right: 290px;
    }
    .nav-communication-banner-last-contact {
        right: 435px;
    }
    .nav-communication-banner-universal-tokens {
        right: 315px;
    }
    .nav-communication-banner-last-contact-universal-tokens {
        right: 460px;
    }
}

/* BOOTSTRAP-MIGRATION Phase 6e: hover rule removed — dropdown-toggle removed from
   communication banner button; rule is no longer needed. */
.blueHeader {
    color: var(--Blue-500, #0054A6);
    font-family: "Open Sans";
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px; 
}
.blackOpenSanHeader {
    color: #000;
    font-family: "Open Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 18px;
    white-space:nowrap;
}
.blackRoboto {
    font-family: "Roboto";
    color: #000;
}
.recServicebox {
    border-radius: 6px;
    background: #FFF;
    box-shadow: 0px 2px 6px 0px rgba(24, 26, 24, 0.25);
    padding:10px;
}
.btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus {
    outline: 0 !important;
    outline-offset: 0 !important;
}
.top-nav-btns {
    box-shadow: 1px 2px 5px 2px rgba(0, 0, 0, 0.1) !important;
}

/* BOOTSTRAP-MIGRATION Phase 6e: context-addup buttons have inline style="width:32px".
   BS5 .dropdown-toggle::after auto-inserts a caret via ::after (border-trick triangle).
   The FA icon (::before) + caret (::after) together need ~44px; 32px clips the caret.
   Allow width to grow to fit both while keeping height and padding from the inline style. */
button.context-addup.dropdown-toggle {
    width: auto !important;
    min-width: 44px;
}
.noBorders {
    border: none !important;
    background-color: transparent !important;
}
.userBtn {
    box-shadow: 1px 2px 5px 2px rgba(0, 0, 0, 0.1) !important;
    border: none !important;
}
.engage_card {
    border-radius: 6px;
    background: var(--Base-White, #FFF);
    box-shadow: 0px 2px 6px 0px rgba(24, 26, 24, 0.25);
    gap:10px;
    width:100%;
    padding:15px;
}
.engage_circle {
    width: 36px;
    height: 36px;
    line-height: 33px;
    border-radius: 50%;
    font-weight:700;
    font-size: 29px;
    color: #fff;
    text-align: center;
    background: #E0E0E1;
}
.engage_circle_active {
    background: #0054A6 !important;
}
.engage_circle_small {
    width: 15px;
    height: 15px;
    line-height: 14px;
    border-radius: 50%;
    font-weight: 700;
    font-size: 13px;
    color: #fff;
    text-align: center;
    background: #0054A6;
    margin-right:5px;
}
.vertical_line {
    border-right: 1px solid #E0E0E1;
    height: 60px;
    margin-top: 7px;
}
.ignite-progress {
    background-color: #D9D9D9;
    border-radius: 6px;
    height: 10px;
}
.ignite-progress-bar {
    border-radius: 6px;
    background-color: #0054A6;
    height: 10px;
    transition: width 1.5s ease;
}
.igniteItem {
    align-items: center;
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 6px;
    padding-right: 6px;
    color: #4C4E50;
}
.igniteItem:hover {
    background-color: #F5F5F5;
}
.selectedIgniteItem {
    color: white !important;
    background-color: #0054A6;
    border-radius: 6px;
    pointer-events: none;
}
.completedIgniteItem {
    pointer-events: none;
    color:#97999B;
}
.whiteText {
    color: white !important;
}
.panel-heading-worksheet {
    color: dimgray !important;
}
.empower_card {
    border-radius: 6px;
    background: var(--Base-White, #FFF);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    gap: 15px;
    font-size: 14px;
    font-weight: 400;
    padding: 15px;
    margin-right: 10px;
    margin-bottom: 20px;
}
.empower_current {
    border: 1px solid var(--Border-grey, #B6B8B9);
    background: var(--Font-Color-for-main-Theme-color, #FFF);
    height: 100%;
    padding:5px;
}
:focus-visible {
    outline:none;
}
.metrics_card {
    border-radius: 6px;
    background: var(--Base-White, #FFF);
    box-shadow: 0px 4px 8px 0px rgba(24, 26, 24, 0.25);
    height: 126px;
    width: 100%;
    padding: 12px;
    display: flex;
    flex-direction: column;
    /*justify-content: space-between;*/
}
.dashboardSectionHeader {
    display: flex;
    height: 84px;
    align-items: center;
    gap: 10px;
    border-radius: var(--3, 6px);
    background: var(--primary-color);
    color: var(--Font-Color-for-main-Theme-color, #FFF);
    font-family: "Open Sans";
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    width:100%;
}
.dashboardKPICard {
    display: flex;
    height: 132px;
    padding: 20px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 15px;
    border-radius: 6px;
    background: var(--Base-White, #FFF);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    color: #000;
    text-align: center;
    font-family: "Open Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 18px;
}
.kpiHeaders {
    color: var(--Light-Text-Secondary-Text, var(--Gray-Gray-500, #97999B));
    font-family: "DIN";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
}
.kpiValues {
    color: #000;
    font-family: "Open Sans";
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
}
.dashboardSectionBTN {
    border-radius: var(--3, 6px);
    background: var(--darker-active-background, #E0E0E1);
    height: 40px;
    color: var(--Form-text-default, #4C4E50);
    font-family: "Open Sans";
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    align-items: center;
    padding: 0 10px;
}
.dashboardSectionBTN.selected {
    background: var(--primary-color);
    color: var(--Font-Color-for-main-Theme-color, #FFF);
}
.dashboard_sectionBodyTitle {
    color: #000;
    font-family: "Open Sans";
    font-size: 15px;
    font-weight:600;
    padding-bottom:7px;
}
.dashboard_sectionBody {
    display: flex;
    padding:15px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    border-radius: 6px;
    background: var(--Base-White, #FFF);
    box-shadow: 0px 2px 6px 0px rgba(24, 26, 24, 0.25);
    width:100%;
    height:100%;
    margin-bottom:15px;
}
.dashboard_component {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
}
.selectedDashboardTab {
    border-top: solid 2px #0054A6;
    margin-top: -15px;
    padding-top: 13px;
    font-weight: 600;
}
.dashboard_loader {
    animation: rotate 1s infinite;
    height: 50px;
    width: 50px;
}

    .dashboard_loader:before,
    .dashboard_loader:after {
        border-radius: 50%;
        content: "";
        display: block;
        height: 20px;
        width: 20px;
    }

    .dashboard_loader:before {
        animation: ball1 1s infinite;
        background-color: #E0E0E1;
        box-shadow: 30px 0 0 #0054A6;
        margin-bottom: 10px;
    }

    .dashboard_loader:after {
        animation: ball2 1s infinite;
        background-color: #0054A6;
        box-shadow: 30px 0 0 #E0E0E1;
    }

@keyframes rotate {
    0% {
        transform: rotate(0deg) scale(0.8)
    }

    50% {
        transform: rotate(360deg) scale(1.2)
    }

    100% {
        transform: rotate(720deg) scale(0.8)
    }
}

@keyframes ball1 {
    0% {
        box-shadow: 30px 0 0 #0054A6;
    }

    50% {
        box-shadow: 0 0 0 #0054A6;
        margin-bottom: 0;
        transform: translate(15px, 15px);
    }

    100% {
        box-shadow: 30px 0 0 #0054A6;
        margin-bottom: 10px;
    }
}

@keyframes ball2 {
    0% {
        box-shadow: 30px 0 0 #E0E0E1;
    }

    50% {
        box-shadow: 0 0 0 #E0E0E1;
        margin-top: -20px;
        transform: translate(15px, 15px);
    }

    100% {
        box-shadow: 30px 0 0 #E0E0E1;
        margin-top: 0;
    }
}
  
    
.progress_dashboard {
    height: 8px;
    margin-bottom: 15px;
    overflow: hidden;
    background-color: #E0EAF4;
    border-radius: 5px;
}
.progress-bar_dashboard {
    border-radius: 5px;
    height:8px;
}
.dashboard_chartCard {
    border-radius: 6px;
    border: 1px solid var(--Border-grey, #B6B8B9);
    background: var(--Base-White, #FFF);
    display: flex;
    width: 320px;
    padding: 19px 49px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    font-family: "Open Sans";
    color: #000;
}
.engageGroup_inactive {
    background: var(--BlueGray-BlueGray-100, #DFE7EC) !important;
    box-shadow: 0px 2px 6px 0px rgba(24, 26, 24, 0.25) !important;
}
.switch {
    position: relative;
    display: inline-block;
    width: 24px;
    height: 14px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider_switch {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

    .slider_switch:before {
        position: absolute;
        content: "";
        height: 10px;
        width: 10px;
        left: 2px;
        bottom: 2px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }

input:checked + .slider_switch {
    background-color: #0054A6;
}

input:focus + .slider_switch {
    box-shadow: 0 0 1px #0054A6;
}

input:checked + .slider_switch:before {
    -webkit-transform: translateX(10px);
    -ms-transform: translateX(10px);
    transform: translateX(10px);
}

/* Rounded sliders */
.slider_switch.round {
    border-radius: 34px;
}

.slider_switch.round:before {
    border-radius: 50%;
}

/* Agent Book by Teams row — bordered card */
.agent-bbt-row {
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 8px 12px;
    margin-bottom: 8px;
}

/* Agent Book by Teams toggle — larger variant */
.agent-bbt-switch {
    display: flex;
    align-items: center;
    width: 32px;
    height: 18px;
    flex-shrink: 0;
    cursor: pointer;
    margin-bottom: 0;
}

.agent-bbt-switch .slider_switch {
    border-radius: 18px;
}

.agent-bbt-switch .slider_switch:before {
    height: 12px;
    width: 12px;
    left: 3px;
    bottom: 3px;
}

.agent-bbt-switch input:checked + .slider_switch:before {
    -webkit-transform: translateX(14px);
    -ms-transform: translateX(14px);
    transform: translateX(14px);
}

.engageSettings {
    border-radius: 6px;
    background: #F5F5F5;
    padding: 10px;
    gap: 10px;
}
.engageSettings_header {
    font-family: "Open Sans";
    font-weight: 600;
    color: #000;
    font-size: 14px;
    display:flex;
    margin-bottom:2px;
}
.engageSettings_item {
    font-family: "DIN";
    font-weight: 400;
    letter-spacing: -0.42px;
    color: #4C4E50;
    padding: 6px 0px 6px 0px;
    gap:1px;
}
.engageSettings_tooltip_icon {
    margin-top: -9px;
    margin-left: -2px;
    color: #0054A6;
    cursor:pointer;
    padding:5px;
}
.mandatoryTextBoxError {
    border: 1px solid red !important;
}
.engageYellow {
    color: #dea509;
}
.serviceHistoryTable td {
    vertical-align: top
}

.serviceHistoryTable div {
    height: 18px;
}
.textStatsHeaders {
    font-family:"Open Sans";
    font-size:15px;
    font-weight:600;
    color:black;
}
.StatsChartContainer {
    height:385px;
    display: flex;
    width:100%;
    padding: 15px;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    border-radius: 6px;
    background: var(--Base-White, #FFF);
    box-shadow: 0px 2px 6px 0px rgba(24, 26, 24, 0.25);
}
.StatsGridContainer {
    display: flex;
    width: 100%;
    padding: 15px;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    border-radius: 6px;
    background: var(--Base-White, #FFF);
    box-shadow: 0px 2px 6px 0px rgba(24, 26, 24, 0.25);
}
@font-face {
    font-family: DIN;
    src: url('../fonts/DIN-Medium.ttf');
}

.DIN {
    font-family: DIN;
}
.Roboto {
    font-family: "Roboto";
    font-weight: normal !important;
}
.engage_DataToProcess {
    color: #4C4E50;
    font-family:"Roboto";
}
/* Custom styles for the audio container */
.custom-audio {
    border-radius: 6px;
    background: #E5E8EA;
    padding-right: 10px;
    padding-left: 10px;
    width: 100%; /* Set a width for the player */
    height: 40px;
}

    /* Custom styles for text inside the audio player (e.g., time display) */
    /* Chrome and WebKit-based browsers */
    .custom-audio::-webkit-media-controls-current-time-display,
    .custom-audio::-webkit-media-controls-time-remaining-display {
        color: #4C4E50;
        font-family: 'DIN', sans-serif;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
    }

    /* Firefox - Custom styles for time display (fallback for other browsers) */
    .custom-audio::-moz-media-controls {
        color: #4C4E50;
        font-family: 'DIN', sans-serif;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
    }

    /* Customize the control bar */
    /* Chrome and WebKit-based browsers */
    .custom-audio::-webkit-media-controls-panel {
        background: #E5E8EA;
        border-radius: 6px;
    }

    /* Firefox - Control panel fallback */
    .custom-audio::-moz-media-controls {
        background: #E5E8EA;
        border-radius: 6px;
    }

    /* Custom styles for the play button */
    /* Chrome and WebKit-based browsers */
    .custom-audio::-webkit-media-controls-play-button {
        color: #4C4E50;
        border-radius: 50%; /* Circular button */
        font-family: 'DIN', sans-serif;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
    }

        .custom-audio::-webkit-media-controls-play-button:hover,
        .custom-audio::-webkit-media-controls-play-button:focus {
            background-color: #E5E8EA;
            border-radius: 20px;
        }

    /* Firefox - Custom styles for the play button */
    .custom-audio::-moz-media-controls-play-button {
        color: #4C4E50;
        background-color: #E5E8EA;
        border-radius: 20px;
        font-family: 'DIN', sans-serif;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
    }

        .custom-audio::-moz-media-controls-play-button:hover,
        .custom-audio::-moz-media-controls-play-button:focus {
            background-color: #E5E8EA;
            border-radius: 20px;
        }

    /* Additional fallback for unsupported pseudo-elements */
    .custom-audio:focus {
        outline: none; /* Removes default focus */
    }
/* Style the button */
#progressButton {
    background: #0054A6; /* Main button color */
    transition: background-color 0.3s ease;
}

/* Smooth gradient animation moving left-to-right and right-to-left */
#progressButton.gradient {
    background: linear-gradient(90deg, #0054A6, #80AAD3, #0054A6); /* Gradient colors */
    background-size: 300%; /* Extend gradient for smooth animation */
    animation: smoothGradient 3s linear infinite alternate; /* Alternate direction for back-and-forth motion */
}

/* Gradient animation keyframes */
@keyframes smoothGradient {
    0% {
        background-position: 0% 50%; /* Start from the left */
    }

    100% {
        background-position: 100% 50%; /* End at the right */
    }
}

/* Completed state */
#progressButton.complete {
    background: #009A5C; /* Solid green when complete */
    animation: none; /* Stop animation */
    color: white;
}
/* Completed state */
#progressButton.error {
    background: #E40008; /* Solid green when complete */
    animation: none; /* Stop animation */
    color: white;
}
/* Style the button */
#progressButton {
    background: #0054A6; /* Main button color */
    color: white;
    border: none;
    transition: background-color 0.3s ease;
}

    /* Smooth gradient animation moving left-to-right and right-to-left */
#progressButton.gradient {
    background: linear-gradient(90deg, #0054A6, #80AAD3, #0054A6); /* Gradient colors */
    background-size: 300%; /* Extend gradient for smooth animation */
    animation: smoothGradient 3s linear infinite alternate; /* Alternate direction for back-and-forth motion */
}

/* Gradient animation keyframes */
@keyframes smoothGradient {
    0% {
        background-position: 0% 50%; /* Start from the left */
    }

    100% {
        background-position: 100% 50%; /* End at the right */
    }
}

/* Completed state */
#progressButton.complete {
    background: #28a745; /* Solid green when complete */
    animation: none; /* Stop animation */
    color: white;
}
/* Completed state */
#progressButton.error {
    background: #E40008; /* Solid green when complete */
    animation: none; /* Stop animation */
    color: white;
}
.nav-tabs .disabled {
    pointer-events: none;
    opacity: 0.5;
    cursor: not-allowed;
}
.icon-container {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px; /* Adjust size as needed */
    height: 22px;
}

.icon-container i {
    font-size: 22px; /* Adjust icon size */
    color: red; /* Fills the circle with red */
}

.icon-text {
    position: absolute;
    font-size: 11px;
    font-weight: bold;
    color: white; /* Text color */
    text-align: center;
}
.italic {
    font-style: italic;
}
ul.list-dashboardFilters {
    max-height: 300px; /* Set max height for scroll */
    overflow-y: auto; /* Enable vertical scroll */
    border: 1px solid #ccc; /* Light border */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Soft shadow */
    border-radius: 6px; /* Rounded corners */
    padding-left: 0; /* Remove default ul padding */
    margin: 0; /* Optional: reset margin */
}
ul.list-dashboardFilters li {
    list-style: none;
}
    ul.list-dashboardFilters li.active {
        background-color: #0054A6;
        color: white;
        cursor: pointer; /* optional, to show it’s clickable */
        box-shadow: inset 0 0 5px rgba(0,123,255,0.3); /* subtle inner glow */        
    }

ul.list-dashboardFilters li.active a {
    color: inherit; /* keep link text same color */
}

ul.list-dashboardFilters li a {
    display: block; /* make the whole li area clickable */
    padding: 5px 10px; /* some padding for nicer click area */
    text-decoration: none;
}
.webchat-bot-avatar {
    width: 31px; /* match your avatarSize */
    height: 31px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff; /* or whatever you like */
}
.webchat-bot-avatar i {
    font-size: 16px;
}

#chatbot-popup {
    display: none;
    position: fixed;
    bottom: 32px;
    right: 32px;
    width: var(--chat-width);
    height: var(--chat-height);
    background: white;
    border-radius: var(--border-radius);
    box-shadow: 0 18px 40px -5px rgba(0, 0, 0, 0.2), 0 15px 20px -5px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    opacity: 0;
    transform-origin: bottom right;
    transform: scale(0.95);
    transition: all var(--transition-speed) ease-in-out;
    z-index: 999;
}

#chatbot-popup.visible {
    display: block;
    opacity: 1;
    transform: scale(1);
}

#chatbot-header {
    background: var(--primary-color);
    padding: 16px 20px;
    height: var(--header-height);
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--header-textColor);
}

.header-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
    font-weight: 500;
}

.header-buttons {
    display: flex;
    align-items: center;
}

.icon-button {
    background: none;
    border: none;
    color: var(--header-textColor);
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#webchat {
    height: calc(100% - var(--header-height));
    background-color: #f9fafb;
    position: relative;
}

.webchat-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.85);
    pointer-events: none;
    z-index: 1;
}

#webchat > div {
    position: relative;
    z-index: 2;
}

#webchat .webchat__basic-transcript__content {
    white-space: pre-wrap !important;
    word-break: break-word !important;
}

/* Bubble padding & width */
#webchat .webchat__bubble__content {
    padding: 0px !important;
}

#webchat .webchat__bubble {
    max-width: 85% !important;
    margin: 8px !important;
}

#webchat .webchat__basic-transcript__content ul,
#webchat .webchat__basic-transcript__content ol,
#webchat .webchat__bubble__content ul,
#webchat .webchat__bubble__content ol {
    padding-left: 24px !important;
    margin: 8px 0 !important;
    list-style-position: outside !important;
}

#webchat .webchat__basic-transcript__content li,
#webchat .webchat__bubble__content li {
    margin: 4px 0 !important;
    padding-left: 4px !important;
}

/* BOT AVATAR: keep circle at 31px, shrink SVG inside */
.webchat__defaultAvatar .webchat__imageAvatar__image img {
    width: 20px !important;
    height: 20px !important;
}

.webchat__defaultAvatar .webchat__imageAvatar__image {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* MESSAGE STACK: make room above bubble for status line */
.webchat__stacked-layout {
    position: relative;
    padding-top: 10px; /* room for "AI Assistant, time" line */
}

/* Reduce space between avatar and bubble */
/* BOT messages avatar gutter */
.webchat__stacked-layout--from-bot > .webchat__stacked-layout__main > .webchat__stacked-layout__avatar-gutter {
    width: 18px !important;
}

/* USER messages avatar gutter */
.webchat__stacked-layout--from-user > .webchat__stacked-layout__main > .webchat__stacked-layout__avatar-gutter {
    width: 0px !important;
}

/* STATUS ROW: always above message, full width */
.webchat__stacked-layout__status {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex !important;
    align-items: center;
    font-size: 11px;
    color: #8ea0c0;
    pointer-events: none;
}

    /* Remove extra gutters/pads inside the status row */
    .webchat__stacked-layout__status .webchat__stacked-layout__avatar-gutter,
    .webchat__stacked-layout__status .webchat__stacked-layout__nub-pad,
    .webchat__stacked-layout__status .webchat__stacked-layout__alignment-pad {
        display: none !important;
    }

/* Hide verbose "Sent at ..." line, keep only span[aria-hidden] text */
.webchat__activity-status--slotted > div {
    display: none !important;
}

/* Base status span uses flex so we can align left/right */
.webchat__activity-status--slotted {
    flex: 1 1 auto;
}

/* BOT STATUS: left, aligned roughly with bubble text */
.webchat__stacked-layout__status
.webchat__activity-status--slotted:not(.webchat__activity-status--self) {
    margin-left: 48px; /* avatar gutter (36px) + a bit; tweak as needed */
    margin-right: auto;
    text-align: left;
}

/* USER STATUS: right, near user bubble */
.webchat__stacked-layout__status
.webchat__activity-status--slotted.webchat__activity-status--self {
    margin-left: auto;
    margin-right: 16px; /* tweak to line up with right bubble */
    text-align: right;
}

/* PREFIXES: labels before the time */
.webchat__activity-status--slotted:not(.webchat__activity-status--self)
span[aria-hidden="true"]::before {
    content: "AI Assistant, ";
    font-weight: 600;
}

/* .webchat__activity-status--slotted.webchat__activity-status--self
    span[aria-hidden="true"]::before {
        content: "You, ";
        font-weight: 600;
    }*/

/* Tighten vertical spacing between messages */
.webchat__stacked-layout__message-row {
    margin: 6px 0 !important;
}
/* Force user messages to right side */
.webchat__stacked-layout--from-user .webchat__stacked-layout__main {
    margin-left: auto !important;
    margin-right: 0 !important;
}

/* Force bot messages to left side */
.webchat__stacked-layout--from-bot .webchat__stacked-layout__main {
    margin-right: 0 !important;
    margin-left: auto !important;
}

.webchat__stacked-layout__status .webchat__activity-status--slotted {
    display: inline;
}
/* Minimized state: header-only, docked bottom-right */
#chatbot-popup.minimized {
    height: var(--header-height); /* just the header */
    width: var(--chat-width); /* same width as full chat, or tweak */
    bottom: 32px;
    right: 32px;
    left: auto; /* ensure it's on the right, not left */
    border-radius: 12px;
    cursor: pointer;
}

    /* Hide the chat body when minimized */
    #chatbot-popup.minimized #webchat {
        display: none;
    }

    /* Optional: slightly dim the header when minimized */
    #chatbot-popup.minimized #chatbot-header {
        opacity: 0.95;
    }

/* 🔁 Toggle minimize/maximize buttons based on state */
#chatbot-popup .icon-maximize {
    display: none; /* default: only show minimize */
}

#chatbot-popup.minimized .icon-minimize {
    display: none; /* hide minimize when minimized */
}

#chatbot-popup.minimized .icon-maximize {
    display: inline-flex; /* show maximize when minimized */
}
/* 1. Target your specific custom button */
#customSendChatBotBtn {
    /* Keep padding small for the smaller height */
    padding: 2px 8px !important;
    /* Remove explicit height */
    height: auto !important;
    /* Force vertical alignment to the middle */
    vertical-align: middle !important;
    /* Ensure it behaves like an inline-block for vertical-align to work well */
    display: inline-block !important;
    /* Adjust font size if necessary to make the icon/text smaller */
    font-size: 13px;
    /* Remove default margins */
    margin: 0 !important;
    margin-right: 5px !important;
}

/* 2. Make sure the container is not overriding alignment */
.webchat__send-box__buttons, .webchat__send-box__main {
    /* Ensure the container is not setting an explicit height that interferes */
    height: auto !important;
    /* Ensure alignment properties are not forcing it up/down */
    align-items: center !important;
}

/* position the panel under your navbar, right-aligned */
.dm-settings-card {
    color: var(--Font-font-black, #181A18);
    /* DIN UI Kit/sm/normal-300 */
    font-family: DIN !important;
    font-size: 14px !important;
    font-style: normal;
    font-weight: 400;
    line-height: var(--line-height-font-sm-line-height, 16.5px); /* 117.857% */
    position: absolute;
    right: 15px;
    top: 80px; /* adjust for your navbar height */
    z-index: 1050;
    width:200px;
}

/* main list is always visible when collapse is open */
#cogSettings .dm-settings-menu.dropdown-menu {
    display: block;
    position: static;
    float: none;
    margin: 0;
    overflow: visible !important; /* important: let submenus escape */
    max-height: none !important;
    height: auto !important;
    /* BOOTSTRAP-MIGRATION Phase 6e: BS5 .dropdown-menu sets font-size:1rem (16px at
       default root size), which overrides the 13px set on the .dm-settings-card container.
       Restore the compact BS3 menu look by pinning font-size and weight here. */
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #333 !important;
    /* Match the container width so dividers span the full panel */
    width: 200px;
    /* Restore BS3 dropdown shadow — BS5 dropped the box-shadow from .dropdown-menu */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    background-color: #fff;
}

/* BOOTSTRAP-MIGRATION Phase 6e: BS5 removed the BS3 .divider class for <li> elements
   inside dropdown menus (BS5 uses <li><hr class="dropdown-divider"></li> instead).
   Restore the original horizontal-rule appearance for the existing li.divider markup
   without changing the HTML. Originally scoped to #cogSettings only, but the same
   li.divider markup is used unfixed in 21+ other files (scheduler.html, apptsched.html,
   portfolio.html, worksheetmodal.html, etc.) — broadened to match dropdown-menu li.divider
   generally, mirroring BS3's own .dropdown-menu .divider selector scope. */
.dropdown-menu li.divider {
    /* !important needed: .dropdown-menu > li:not(:has(a)) (the bare-<li>-without-<a>
       padding restore, added earlier for items like the Department picker) also matches
       this empty divider <li> and sets padding:5px 15px !important — without matching
       !important here, that padding wins and inflates this into a thick gray band
       instead of a crisp 1px line. */
    height: 1px !important;
    margin: 4px 0 !important;
    overflow: hidden;
    background-color: #e5e5e5;
    padding: 0 !important;
}

/* nested dropdowns inside settings menu */
.dm-settings-menu .dm-dropdown-submenu {
    position: relative;
}
    .dm-settings-menu .dm-dropdown-submenu > a {
        position: relative;
        padding-left: 18px;
    }


    .dm-settings-menu .dm-dropdown-submenu > .dropdown-menu {
        display: none;
        position: absolute;
        top: 0;
        right: 100%; /* open to the LEFT of parent */
        left: auto;
        margin-top: -1px;
        z-index: 2000;
    }
   
    .dm-settings-menu .dm-dropdown-submenu.open > .dropdown-menu {
        display: block !important;
        width: 160px;
        font-size: 13px !important;
        font-weight: 400 !important;
    }

    /* arrow indicator */
    /*.dm-settings-menu .dm-dropdown-submenu > a::before {
        content: "\f0d9";*/ /* FontAwesome caret-left */
        /*font-family: "FontAwesome";
        position: absolute;
        left: 5px;
        top: 50%;
        transform: translateY(-50%);
    }*/

/* version footer */
.dm-settings-info {
    color: var(--Font-font-gray, #4C4E50) !important;
    /* DIN UI Kit/xxs/normal-300 */
    font-family: DIN;
    font-size: 12px !important;
    font-style: normal;
    font-weight: 400;
    line-height: var(--line-height-font-xxs-line-height, 14.1px); /* 117.5% */
    letter-spacing: -0.36px;
    display: flex;
    padding: var(--Token-section-md, 10px) var(--Token-section-sm, 6px);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--Token-Vertical-gap-xs, 4px);
    align-self: stretch;
}
/* BOOTSTRAP-MIGRATION Phase 6e: .dropdown-menu > li:not(:has(a)) (added earlier to
   restore padding on bare-<li>-without-<a> dropdown items, e.g. the Department picker)
   also matches this <li> — it has no <a> child either — and its !important
   display:block/white-space:nowrap overrides this rule's own (non-!important)
   display:flex, which silently disables flex-direction:column above. That's why the
   4 stacked spans (date/machine/timezone/time) were collapsing onto one unwrapped
   line. Restore this element's own intended layout with matching !important + higher
   specificity. */
.dropdown-menu li.dm-settings-info {
    display: flex !important;
    white-space: normal !important;
    padding: var(--Token-section-md, 10px) var(--Token-section-sm, 6px) !important;
}
.dm-settingLiItem {
    display: flex;
    height: 30px;
    width:190px;
    padding: 0 var(--Token-section-sm, 6px);
    align-items: center;
    gap: var(--Token-space-between-base, 8px);
    align-self: stretch;
    cursor:pointer;
}
.dm-DropDownLiItem {
    height:24px;
    display: flex;
    padding: 4px 8px;
    align-items: center;
    align-self: stretch;
    cursor: pointer;
}
/* Hover background for all cog menu items */
#cogSettings .dm-DropDownLiItem:hover,
#cogSettings .dm-settingLiItem:hover {
    background-color: #e8e8e8;
    background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);
    background-image: -o-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#e8e8e8));
    background-image: linear-gradient(to bottom, #f5f5f5 0%, #e8e8e8 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0);
    background-repeat: repeat-x;
}
/* Active (selected) settings item — clear blue highlight with white text.
   Was a light-gray gradient: its background-image painted over the blue background-color
   set by the generic ".dropdown-menu > li.active" rule, leaving the white active text on
   near-white gray = barely visible. background-image:none removes that overlay. */
#cogSettings .dm-DropDownLiItem.active,
#cogSettings .dm-settingLiItem.active {
    background-color: var(--primary-color, #0054a6);
    background-image: none;
    color: #fff;
}
.dm-logo-wrapper {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.dm-logo {
    display: block;
}

.santa-hat {
    position: absolute;
    top: -76px; /* keep whatever you already dialed in */
    left: 237px; /* keep whatever you already dialed in */
    /* Flip horizontally, then tilt toward the pom-pom (right side now) */
   /* transform-origin: center bottom;*/
    transform: rotate(18deg);
    font-size: 30px;
    line-height: 1;
    z-index: 1;
    pointer-events: none;
    --fa-primary-color: #f7021b;
    --fa-secondary-color: cec0c0;
}
.youtube-thumbnail-wrapper {
    position: relative;
    display: inline-block;
}

    /* Overlay FA icon using a pseudo-element */
    .youtube-thumbnail-wrapper::after {
        /* TODO: put the right codepoint for fa-clapperboard-play here */
        content: "\f8f3"; /* example – replace with the correct one from FA docs */
        font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", "Font Awesome 5 Free";
        font-weight: 400; /* 'regular' weight */
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 3rem; /* similar to fa-lg / adjust as needed */
        line-height: 1;
        pointer-events: none; /* clicks go to the link/image underneath */
    }

.iframe-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.iframe-container iframe {
    width: 100%;
    height: 100%;
    border: none;
    overflow: hidden;
}


/* ============================================================
   WORKPLAN — Hybrid UI
   All wp-* styles have been extracted to style-workplan.css
   which is loaded immediately after this file in BundleConfig.
   Do not add wp-* rules here — edit style-workplan.css instead.
   ============================================================ */

/* ── CSS custom properties (kept here so other rules can use them) ── */
:root {
    --wp-red:        #CD4D4D;
    --wp-amber:      #d97706;
    --wp-green:      #2e7d32;
    --wp-blue:       #0054a6;
    --wp-blue-light: #e8f1fb;
    --wp-purple:     #7b2d8b;
}

/* ── END WORKPLAN (all rules are in style-workplan.css) ── */
/* TinyMCE inline table context toolbar -- hides the floating inline toolbar that
   appears when clicking inside a table. Table operations remain available via
   the Table menu in the main toolbar. */
.mce-tinymce-inline {
    display: none !important;
}

/* App-wide <b> label weight — slightly lighter and smaller than browser default bold */
b {
    font-weight: 600;
    font-size: 0.87em;
}

/* ──────────────────────────────────────────────────────────────────────────
   TASK CENTER (App/Pages/task_center/task_center.html)
   Bootstrap 5 migration fixes, scoped to the page via .task-center-page on the
   root container (and .tc-stats-filters on the Task Stats filter card-body).
   ────────────────────────────────────────────────────────────────────────── */

/* 1. Card-header titles (References / Filters) are <a> collapse toggles. BS5 gives
      anchors their own link color (dark/blue) + underline, overriding the header's
      white text and leaving them near-invisible on the colored header. Inherit the
      header color and drop the underline so they read as white again. */
.task-center-page .card-header a {
    color: inherit;
    text-decoration: none;
}

/* 2. Vertically center the non-tab controls (search box, refresh / back-to-top
      buttons, last-refresh label) against the taller tab labels. .nav-tabs-simple
      uses align-items:flex-end, so short controls otherwise sit flush at the bottom
      edge; a little padding-bottom lifts them to the tabs' vertical center. */
.task-center-page .nav-tabs-simple > li:not(:has(> a[role="tab"])) {
    padding-bottom: 6px;
}

/* 3. The References store / reference autocomplete inputs collapse to ~12px wide.
      .fillRowAuto > * forces display:table-cell on the .input-group, so BS5's
      .input-group > .form-control { width:1% } never gets its flex-grow and the
      input stays at 1% of the cell. Restore the input-group's flex layout (BS5's
      intended behavior) so the input fills the row and its value/placeholder show. */
.task-center-page .fillRowAuto > .input-group {
    display: flex;
}

/* 4. Task Stats filter dropdowns (Users / Stores / Task Types) are wrapped in a
      .dropdown-fill carrying an inline max-width:10px. Combined with BS5's
      .dropdown-fill { display:block; width:100% }, that collapses the whole control
      to ~10px so only the caret shows and the selected value is invisible. Drop the
      cap so the dropdown fills its filter row like the others. */
.task-center-page .fillRowAuto > .dropdown-fill {
    max-width: none !important;
}

/* 5. The clear (X, .fa-remove) icon sits as a sibling of the dropdown toggle, but the
      toggle is width:100% so the X wraps onto its own line below the dropdown. Lay the
      dropdown-fill out as a flex row so the toggle fills the width and the X sits on
      the same row, pinned to the far right. Applies to both the Task History user
      filter and the Task Stats Users/Stores/Task Types filters. */
.task-center-page .dropdown-fill:has(> .fa-remove) {
    display: flex !important;
    align-items: center;
}
.task-center-page .dropdown-fill:has(> .fa-remove) > .dropdown-toggle {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
}
.task-center-page .dropdown-fill > .fa-remove {
    flex: 0 0 auto;
    margin-left: 6px;
    cursor: pointer;
}

/* 6. Tidy up the filter rows (Task Stats "Filters" card, and the Task Center sidebar
      "Filters" collapse) into an aligned grid: a fixed-width label column and
      equal-width dropdowns whose right edges (and clear-X icons) line up. Each
      .fillRowAuto is its own independent table, so without this the labels and
      dropdowns size per-row and never line up. Lay each row out as a flex line with a
      fixed label column and a dropdown that fills the rest. Applied via .tc-filter-grid. */
.tc-filter-grid .fillRowAuto {
    display: flex !important;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}
.tc-filter-grid .fillRowAuto > *:first-child {   /* label column */
    flex: 0 0 96px;
    width: 96px;
    white-space: nowrap;
}
.tc-filter-grid .fillRowAuto > .dropdown-fill {  /* dropdown fills the rest */
    flex: 1 1 auto;
    min-width: 0;
    width: auto !important;
}
/* Users/Stores/Task Types wrap the toggle in an extra .dropdown-fill with an odd
   width:95%/padding — flatten it so every dropdown button has the same box. */
.tc-filter-grid .dropdown-fill .dropdown-fill {
    width: 100% !important;
    padding: 0 !important;
}
/* Task Stats only: the Time-sensitive row has no clear-X, so reserve the same right
   gutter (X icon + its margin) so its dropdown's right edge lines up with the
   X-bearing rows above it. (The sidebar Filters collapse has no X rows, so it keeps
   the full width and doesn't get this class.) */
.tc-stats-filters .fillRowAuto:not(:has(.fa-remove)) > .dropdown-fill {
    margin-right: 17px;
}