/* Reserve the vertical scrollbar's width whether or not the page currently needs one.
   Without this, any interaction that changes page height by crossing the viewport boundary
   makes the scrollbar appear or vanish, and the entire layout jumps sideways by its width.
   Reported on /today/sales, where switching between the Who's Working and Sales tabs did
   exactly that, but it is a whole-site problem and the fix belongs here rather than being
   worked around by padding one page's content until it happens to be tall enough.

   scrollbar-gutter is the modern, no-side-effect answer; overflow-y:scroll is the fallback
   for anything that does not support it, which forces the gutter the old way. */
html {
    overflow-y: scroll;
}

/* scrollbar-gutter is the modern, no-side-effect way to reserve the space. It is applied
   ONLY where it is supported, and the overflow-y fallback is switched back off in the same
   breath: with both active, a browser that supports gutter reserves the width twice. */
@supports (scrollbar-gutter: stable) {
    html {
        overflow-y: auto;
        scrollbar-gutter: stable;
    }
}

body {
    padding-top: 45px;
    /*padding-bottom: 20px;*/
}

/* Admin Impersonation Notification Bar */
.impersonation-bar {
    background-color: #FF8500;
    color: white;
    padding: 8px 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    position: fixed;
    top: 45px;
    left: 0;
    right: 0;
    z-index: 1040;
    font-weight: 500;
}

.impersonation-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.impersonation-icon {
    font-size: 16px;
    margin-right: 8px;
    color: #fff;
}

.impersonation-text {
    flex: 1;
    font-size: 14px;
}

.impersonation-details {
    font-weight: normal;
    opacity: 0.9;
    margin-left: 10px;
}

.impersonation-actions {
    margin-left: 15px;
    display: flex;
    gap: 8px;
}

/* Force white text on the impersonation toolbar buttons — DevExpress's default
   Bootstrap button rendering leaves the inner <span> at the page's base color,
   which reads poorly on blue/orange backgrounds. */
.impersonation-btn-different,
.impersonation-btn-different:hover,
.impersonation-btn-different:focus,
.impersonation-btn-different:active,
.impersonation-btn-end,
.impersonation-btn-end:hover,
.impersonation-btn-end:focus,
.impersonation-btn-end:active,
.impersonation-btn-different .dxbs-button-text,
.impersonation-btn-end .dxbs-button-text,
.impersonation-btn-different .fas,
.impersonation-btn-end .fas,
.impersonation-btn-different span,
.impersonation-btn-end span {
    color: #fff !important;
}

/* Adjust body padding when impersonation bar is visible */
body.impersonating {
    padding-top: 88px !important;
}

/* Adjust content positioning when impersonation bar is shown */
body.impersonating #sidebar {
    top: 88px;
}

body.impersonating #content {
    margin-top: 0;
}

/* Mobile responsive styles */
@media (max-width: 767px) {
    .impersonation-bar {
        padding: 10px 0;
    }

    .impersonation-content {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }
    
    .impersonation-actions {
        margin-left: 8px;
        gap: 4px;
    }
    
    .impersonation-text {
        font-size: 13px;
        flex: 1;
    }
    
    /* Hide text labels on mobile, show only icons */
    .impersonation-label {
        display: none;
    }
    
    .impersonation-details {
        display: none;
    }
    
    /* Make buttons icon-only on mobile */
    .impersonation-btn-different,
    .impersonation-btn-end {
        min-width: 32px !important;
        width: 32px !important;
        padding: 4px !important;
        font-size: 0 !important; /* Hide text */
        overflow: hidden;
    }
    
    /* Show only the icons on mobile */
    .impersonation-btn-different .fas,
    .impersonation-btn-end .fas {
        font-size: 14px !important;
        display: inline-block !important;
    }
    
    /* Alternative approach - hide all text content except icons */
    .impersonation-btn-different * {
        font-size: 0;
    }
    
    .impersonation-btn-end * {
        font-size: 0;
    }
    
    .impersonation-btn-different .fas,
    .impersonation-btn-end .fas {
        font-size: 14px !important;
    }
}

/* Desktop styles - show full text */
@media (min-width: 768px) {
    .impersonation-label {
        display: inline;
    }
    
    .impersonation-details {
        display: inline;
    }
    
    .impersonation-btn-different .dxbs-button-text,
    .impersonation-btn-end .dxbs-button-text {
        display: inline;
    }
}

.body {
    font-family: 'Rubik', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Rubik', sans-serif !important;
    margin-top: 15px !important;
    margin-bottom: 15px !important;
}

p, div {
    font-family: 'Rubik', sans-serif !important;
}

/* ==========================================================================
   DevExtreme Global Overrides (dx.light.compact theme)
   These overrides make DevExtreme controls match Bootstrap 3 styling and
   Rain City Maids conventions. Loaded after dx.light.compact.css from CDN.
   ========================================================================== */

/* --- Force Rubik font on all DevExtreme widgets globally --- */
.dx-widget,
.dx-widget input,
.dx-widget textarea,
.dx-widget select,
.dx-texteditor-input,
.dx-list-item-content,
.dx-menu-item-text,
.dx-item-content {
    font-family: 'Rubik', sans-serif !important;
}

/* --- DXIcons font restoration (overridden by p,div Rubik rule above) --- */
.dx-icon:not(.fas):not(.far):not(.fab)::before,
.dx-dropdowneditor-icon::before {
    font-family: DXIcons !important;
}

/* --- Datebox: use same dropdown chevron as selectbox instead of calendar icon --- */
.dx-datebox .dx-dropdowneditor-icon::before {
    content: "\f001" !important;
}

/* --- Input sizing: match Bootstrap 3 input height (34px) --- */
.dx-selectbox,
.dx-textbox,
.dx-numberbox {
    border-radius: 0;
    height: 34px;
}

.dx-selectbox .dx-texteditor-input,
.dx-textbox .dx-texteditor-input,
.dx-numberbox .dx-texteditor-input,
.dx-datebox .dx-texteditor-input {
    height: 34px;
    min-height: 34px;
    padding: 5px 12px 7px 11px;
    font-size: 14px;
}

.dx-textarea .dx-texteditor-input {
    padding: 6px 12px 6px 12px;
    font-size: 14px;
}

/* --- Context menu / popup menu font size: match standard 14px --- */
.dx-context-menu .dx-menu-item-text,
.dx-context-menu .dx-item-content {
    font-size: 14px;
}

/* --- Checkbox checklist: reusable bordered scrollable list --- */
.rcm-checklist {
    min-height: 80px;
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid #ddd;
    padding: 0;
}

.rcm-checklist label {
    display: block;
    margin: 0;
    font-weight: normal;
    cursor: pointer;
    font-size: 14px;
    padding: 2px 8px 0;
}

.rcm-checklist label:hover {
    background-color: #f5f5f5;
}

.rcm-checklist input[type="checkbox"] {
    margin-right: 8px;
    position: relative;
    top: 1px;
}

/* --- Input focus/hover states: match Bootstrap 3 --- */
.dx-selectbox.dx-state-hover,
.dx-textbox.dx-state-hover,
.dx-numberbox.dx-state-hover {
    border-color: #66afe9;
}

.dx-selectbox.dx-state-focused,
.dx-textbox.dx-state-focused,
.dx-numberbox.dx-state-focused {
    border-color: #66afe9;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
}

/* --- Dropdown buttons: consistent 34px width across all editor types --- */
.dx-selectbox .dx-dropdowneditor-button {
    width: 34px !important;
}

.dx-selectbox .dx-dropdowneditor-button .dx-dropdowneditor-icon {
    width: 34px !important;
    height: 32px !important;
}

.dx-datebox .dx-dropdowneditor-button {
    width: 34px;
    min-width: 34px;
}

.dx-datebox .dx-dropdowneditor-icon {
    width: 34px;
}

/* --- Textareas: resizable with bottom-right grip handle --- */
.dx-textarea .dx-texteditor-input {
    resize: vertical;
}

.dx-textarea .dx-texteditor-container {
    overflow: visible !important;
}

/* --- Buttons: match Bootstrap 3 input height (only toolbar/popup buttons) --- */
.dx-popup-wrapper .dx-button,
.dx-toolbar .dx-button,
.dx-dropdownbutton .dx-button {
    height: 34px !important;
    min-width: 34px;
}

.dx-popup-wrapper .dx-button .dx-button-content,
.dx-toolbar .dx-button .dx-button-content,
.dx-dropdownbutton .dx-button .dx-button-content {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    height: 100%;
}

/* --- Button icons: constrain DXIcons, leave Font Awesome alone --- */
.dx-button .dx-icon:not(.fas):not(.far):not(.fab) {
    font-size: 14px !important;
    width: 14px !important;
    height: 14px !important;
    line-height: 14px !important;
}

.dx-button .dx-icon.fas,
.dx-button .dx-icon.far,
.dx-button .dx-icon.fab {
    font-size: 14px !important;
}

/* --- Calendar: reset popup/button overrides (datebox calendar renders inside popup DOM) --- */
.dx-calendar .dx-button {
    height: auto !important;
    min-width: auto !important;
}

.dx-calendar .dx-button .dx-button-content {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 4px 8px !important;
    height: auto !important;
}

.dx-calendar .dx-button .dx-icon:not(.fas):not(.far):not(.fab) {
    font-size: 16px !important;
    width: 16px !important;
    height: 16px !important;
    line-height: 16px !important;
}

.dx-calendar-navigator .dx-button {
    border: none !important;
    background: transparent !important;
}

/* --- Popup close button: shift up to vertically center in header --- */
.dx-popup-wrapper .dx-closebutton {
    margin-top: -3px;
}

/* --- Dropdown list items: compact padding --- */
.dx-list-item {
    padding: 2px 8px !important;
    font-size: 14px;
    white-space: pre;
}

.dx-list-item .dx-list-item-content {
    white-space: pre;
    padding: 2px 0 !important;
}

.dx-list-item.dx-state-active,
.dx-list-item.dx-state-focused {
    background-color: #0096D6 !important;
    color: #ffffff !important;
}

/* --- DataGrid: prevent icon-only cells from showing ellipsis --- */
.dx-datagrid .dx-row > td.EditButtonDataCell {
    overflow: visible;
}

/* --- dxPopup: match old BootstrapPopupControl modal styling --- */

/* Square corners, no blue focus outline */
.dx-popup-wrapper .dx-overlay-content {
    border-radius: 0 !important;
}

.dx-popup-wrapper .dx-overlay-content.dx-state-focused {
    border-color: #ddd !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Content: 15px padding, proper line-height, scrollable (only modal popups, not dropdown overlays) */
.dx-popup-wrapper:not(.dx-dropdowneditor-overlay) .dx-popup-content {
    padding: 15px !important;
    overflow-x: hidden;
    overflow-y: auto;
    line-height: 1.9;
}

/* Dropdown overlays (selectbox, datebox): no extra padding */
.dx-dropdowneditor-overlay .dx-popup-content {
    padding: 0 !important;
    overflow-x: hidden;
    line-height: normal;
}

/* Header: padding, bottom border separator, font */
.dx-popup-wrapper .dx-popup-title {
    padding: 12px 15px !important;
    border-bottom: 1px solid #e5e5e5 !important;
}

.dx-popup-wrapper .dx-popup-title .dx-toolbar-label > div {
    font-size: 14px;
    font-weight: 400;
}

/* Labels inside fieldsets: bold, matching old popup */
.dx-popup-wrapper fieldset > label {
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 4px;
    display: block;
}

/* Textarea min-height for Notes fields (excludes short memo fields like termination details) */
.dx-popup-wrapper .dx-textarea:not(.rcm-memo-short) .dx-texteditor-input {
    min-height: 118px;
}

/* Popup alerts: consistent font size and padding */
.dx-popup-wrapper .alert {
    font-size: 14px;
    padding: 15px;
}

/* Popup action buttons: consistent sizing */
.dx-popup-wrapper .dx-popup-content .dx-button {
    min-width: 80px;
    border-radius: 4px !important;
}

.dx-popup-wrapper .dx-popup-content .dx-button .dx-button-content {
    padding: 7px 18px !important;
}

/* Save button (type=default, contained): Rain City Maids blue */
.dx-popup-wrapper .dx-popup-content .dx-button-default.dx-button-mode-contained {
    background-color: #0096D6 !important;
    border-color: #0096D6 !important;
    margin-right: 10px;
}

.dx-popup-wrapper .dx-popup-content .dx-button-default.dx-button-mode-contained .dx-button-text {
    color: #fff !important;
}

.dx-popup-wrapper .dx-popup-content .dx-button-default.dx-button-mode-contained:hover,
.dx-popup-wrapper .dx-popup-content .dx-button-default.dx-button-mode-contained.dx-state-hover {
    background-color: #0092c7 !important;
    border-color: #0092c7 !important;
}

/* Delete button (type=danger, outlined): plain gray, NOT red */
.dx-popup-wrapper .dx-popup-content .dx-button-danger.dx-button-mode-outlined {
    background-color: transparent !important;
    border-color: #ddd !important;
}

.dx-popup-wrapper .dx-popup-content .dx-button-danger.dx-button-mode-outlined .dx-button-text {
    color: #333 !important;
}

.dx-popup-wrapper .dx-popup-content .dx-button-danger.dx-button-mode-outlined:hover,
.dx-popup-wrapper .dx-popup-content .dx-button-danger.dx-button-mode-outlined.dx-state-hover {
    background-color: #f5f5f5 !important;
    border-color: #ccc !important;
}

/* Cancel button (type=normal, outlined): gray border */
.dx-popup-wrapper .dx-popup-content .dx-button-normal.dx-button-mode-outlined {
    border-color: #ddd !important;
}

.dx-popup-wrapper .dx-popup-content .dx-button-normal.dx-button-mode-outlined .dx-button-text {
    color: #333 !important;
}

/* --- dx-btn-group: Bootstrap btn-group equivalent for dxButton widgets ---
   Specificity must beat .dx-popup-wrapper .dx-popup-content .dx-button (3 classes)
   so we use .dx-popup-content .dx-btn-group prefix where needed. */
.dx-btn-group {
    display: inline-flex;
    position: relative;
}

.dx-btn-group > .dx-button,
.dx-btn-group > div > .dx-button,
.dx-popup-content .dx-btn-group > .dx-button,
.dx-popup-content .dx-btn-group > div > .dx-button {
    border-radius: 0 !important;
    position: relative;
    min-width: 0 !important;
}

.dx-btn-group > .dx-button:first-child,
.dx-btn-group > div:first-child > .dx-button,
.dx-popup-content .dx-btn-group > .dx-button:first-child,
.dx-popup-content .dx-btn-group > div:first-child > .dx-button {
    border-top-left-radius: 4px !important;
    border-bottom-left-radius: 4px !important;
}

.dx-btn-group > .dx-button:last-child,
.dx-btn-group > div:last-child > .dx-button,
.dx-popup-content .dx-btn-group > .dx-button:last-child,
.dx-popup-content .dx-btn-group > div:last-child > .dx-button {
    border-top-right-radius: 4px !important;
    border-bottom-right-radius: 4px !important;
}

.dx-btn-group > .dx-button + .dx-button,
.dx-btn-group > div + div > .dx-button {
    margin-left: -1px;
}

.dx-btn-group > .dx-button.dx-state-hover,
.dx-btn-group > div > .dx-button.dx-state-hover,
.dx-btn-group > .dx-button.dx-btn-group-active,
.dx-btn-group > div > .dx-button.dx-btn-group-active {
    z-index: 1;
}

/* Active/selected state for toggle groups */
.dx-btn-group .dx-btn-group-active {
    background-color: #e0e0e0 !important;
    border-color: #bbb !important;
}

/* Global dxTagBox tag styling - blue pills with remove button */
.dx-tag {
    margin: 0 3px 0 0 !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    align-self: center !important;
}

.dx-tag-content {
    background-color: #0096D6 !important;
    color: #fff !important;
    border-radius: 3px !important;
    padding: 6px 28px 4px 10px !important;
    line-height: 1.2 !important;
}

.dx-tag-remove-button {
    background: transparent !important;
    border: none !important;
    margin-top: -1px !important;
}

.dx-tag-remove-button::before,
.dx-tag-remove-button::after {
    background-color: #fff !important;
}

.dx-tag-container {
    padding: 1px 8px 2px 2px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 2px 0 !important;
}

.dx-tagbox .dx-texteditor-container {
    overflow: visible !important;
    height: auto !important;
    min-height: 32px !important;
}

.dx-tagbox .dx-dropdowneditor-input-wrapper {
    overflow: visible !important;
    height: auto !important;
    min-height: 32px !important;
}

.dx-tagbox.dx-texteditor {
    height: auto !important;
    min-height: 34px !important;
}

/* === End DevExtreme Global Overrides === */

.panel {
    margin: 0;
}

.top-menu {
    display: inline-block;
    padding: 0 15px;
}

#mnuSiteHeaderNavigation .fa-user,
#mnuSiteHeaderNavigation_DXI0_T > span > i {
    color: #dddddd !important;
}


@media (max-width: 767px) {
    .top-menu {
        top: 6px;
        right: 52px;
        width: 100%;
    }

    .top-menu > .navbar-nav > li {
        float: none !important;
    }

    #siteHeaderMenu {
        display: none;
    }
}

@media (min-width: 768px) {
    body {
        margin-top: 0px;
    }

    .top-menu {
        float: right !important;
        margin-right: -15px;
    }
}

.navbar-inverse {
    background-color: #0096D6 !important;
    /*background-color: #337ab7 !important;*/
}

/*@media (min-width: 0px) {
    .container {
        width: 100% !important;
    }
}*/

.container-fluid > .navbar-collapse, .container-fluid > .navbar-header, .container > .navbar-collapse, .container > .navbar-header {
    margin-left: 0 !important;
}

.container-fluid {
    
}

.navbar-inverse .navbar-toggle {
    border-color: white;
}

    .navbar-inverse .navbar-toggle:focus, .navbar-inverse .navbar-toggle:hover {
        background-color: #0096D6 !important;
    }

.navbar-inverse .navbar-nav > li > a {
    color: white !important;
}

.navbar-inverse {
    border-color: white !important;
}

    .navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:focus, .navbar-inverse .navbar-nav > .active > a:hover {
        background-color: transparent;
    }

    .user-menu {
        padding-top:8px;
    }

.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
    border-color: white !important;
}

.blue-icon {
    color: #0096D6;
}

.white-icon {
    color: #FFFFFF;
}

.button {
    border-color: #0096D6 !important;
    background: #0096D6 !important;
    color: #FFFFFF !important;
}

.button:hover {
    background: #0092c7 !important;
}

.link {
    cursor: pointer;
}

fieldset {
    margin: 20px 0 0 !important;
}

.employee-portal-link {
    font-size: 18px;
    vertical-align: text-bottom;
}

/* Popup z-index fixes - ensure popupNewQuote appears in front of navbar */
#popupNewQuote {
    z-index: 99999 !important;
}

#popupNewQuote .dxpc-mainDiv {
    z-index: 99999 !important;
}

.dxbsPopup_Bootstrap#popupNewQuote {
    z-index: 99999 !important;
}

/* Google Places autocomplete suggestions must sit ABOVE any popup that hosts an address
   field. Google appends .pac-container straight to document.body at z-index 1000, which
   loses to the DevExtreme/DevExpress popup overlays, so the suggestion list renders behind
   the popup and is unclickable. Covers every page on Site.Master (the office Timesheets
   editor and any future Places field); the phone tracker runs on Home.master, which does not
   load this file, so Home.master.css carries the same rule. */
.pac-container {
    z-index: 100000 !important;
}

#btnStartMonthlySurvey {
    border-radius: 4px 4px 0 0;
    padding: 7px 12px 5px;
}

.dxgvControl_MetropolisBlue,
.dxgvDisabled_MetropolisBlue 
.dxgvControl_MetropolisBlue,
.dxgvDisabled_MetropolisBlue {
    border: 1px Solid #c0c0c0;
    font-family: 'Rubik', sans-serif !important;
    font-size: 15px !important;
    background-color: White;
    color: #333333;
    cursor: default;
}

.dxgvAdaptiveHeaderPanel_MetropolisBlue {
    display:none;
}

.dxlpControl_MetropolisBlue.dxlpLoadingDiv_MetropolisBlue {
    opacity: 0;
}

#sidebar {
    position: fixed;
    top: 45px;
    bottom: 0;
    left: 0;
    z-index: 1000;
    overflow-x: hidden;
    padding: 0;
    background: #fafafa;
    display: block;
    width: 150px;
    /*transition: width 250ms;*/
    display:none;
    border-right:1px solid #ddd;
}

#content {
    /*transition: margin-left 250ms,width 250ms;*/
    margin-left: 0px;
    /*padding-right: 25px;*/
}

.toast-bottom-center {
    bottom: 50px;
}

#toast-container > div {
    opacity: 1;
}

.dxbs-tree > ul.nav ul.nav {
    margin: 0;
}

.nav > li > a {
    color: #333;
}

.nav > li > a > span > i {
    color: #666;
}

.nav-pills > li > a {
    border-radius: 0;
}

.nav-pills > li.active > a, .nav-pills > li.active > a:focus, .nav-pills > li.active > a:hover,
.nav-pills > li.active > a > span > i {
    /*background-color: #0096D6;*/
    background-color: transparent;
    color: #0096D6 !important;
}

.navbar {
    border: 0 none !important;
}

.MainNavItem {

}

.MainNavItem > a {
    color: #333333;
}

/*.navbar-toggle {
    float: left;
}*/

.navbar-header {
    margin:0 0 0 6px;
    /* width:100% + margin-left:6px overran the viewport by 6px on mobile (horizontal overflow on
       the fixed top bar). Subtract the margin so the header box stays within the screen. */
    width: calc(100% - 6px);
}

/*#sidebar {
    display:none !important;
}

#content {
    margin-left: 0 !important;
}*/

#tvNavigation {
    margin-top: 2px;
}

@media (min-width: 768px) {
    .navbar-toggle {
        display: block;
    }
}

@media (min-width: 1201px) {
    #sidebar {
        display: block;
    }

    #content {
        margin-left: 150px;
    }

    .navbar-toggle {
        display: none;
    }

    #tvNavigation > ul > li > ul > li > ul > li > a {
        width: 132px;
    }
}

@media(max-width: 1200px) {
    body:not(.collapse-nav) #content {
        margin-left: 150px
    }

    body:not(.collapse-nav) #sidebar {
        display: block;
        width: 100%;
    }
    .navbar-toggle {
        display: block;
        float: left;
    }
}

.table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {
    line-height: 1.25;
}

.BootstrapLabel {
    font-family: 'Rubik', sans-serif !important;
    font-size: 14px;
}

.btn-default {
    color: #666666;/*#2196F3;*/
}

.pagination > .active > a, .pagination > .active > a:focus, .pagination > .active > a:hover, .pagination > .active > span, .pagination > .active > span:focus, .pagination > .active > span:hover {
    background-color: #0096D6;
    border-color: #0096D6;
}

.dropdown-menu > .active > a, .dropdown-menu > .active > a:focus, .dropdown-menu > .active > a:hover {
    background-color: #0096D6;
}

.list-group-item.active, .list-group-item.active:focus, .list-group-item.active:hover {
    border-color: #0096D6;
    background-color: #dedede;
    color: #555;
}


.input-group .form-control {
    background-color: white;
    cursor: pointer;
}


i.EditButtonDataCell {
    color: #1494CC;
}

    i.EditButtonDataCell:hover {
        color: #0096D6;
    }

a.ListLink {
    color: #333333;
    text-decoration: none;
}

    a.ListLink:hover {
        text-decoration: underline;
    }

#steps {
    font-size: 14px;
    line-height: 20px;
    -webkit-box-shadow: none;
    box-shadow: none;
    background: transparent;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    margin: 28px -8px 30px -8px;
    padding-left: 10px;
    text-align: left;
    width: 100%;
}

.step {
    line-height: 1.35em;
    padding-left: 5px;
}

    .step:before {
        -webkit-transition: all 125ms ease-in-out;
        transition: all 125ms ease-in-out;
        color: inherit;
        content: counter(progress-bar-counter, decimal) ". ";
        left: 0.5em;
        line-height: 22px;
        display: inline;
    }

.step-wrapper:first-child .step {
    padding-left: 0;
}

.step-wrapper {
    -webkit-transition: all 125ms ease-in-out;
    transition: all 125ms ease-in-out;
    -webkit-box-flex: 1;
    -ms-flex: 1 0 0px;
    flex: 1 0 0px;
    margin-left: 5px;
    position: relative;
    counter-increment: progress-bar-counter;
    border-top: 8px solid #E7E7E9;
    color: #A5A6AC;
    padding-left: 0;
    padding-top: 8px;
}

    .step-wrapper:after {
        -webkit-transition: all 125ms ease-in-out;
        transition: all 125ms ease-in-out;
        top: -8px;
        border-radius: 50%;
        background-color: #E7E7E9;
        content: '';
        display: block;
        height: 8px;
        position: absolute;
        right: -4px;
        width: 24px;
        z-index: 2;
    }

    .step-wrapper:before {
        border-radius: 2px 50% 50% 2px;
        background-color: #FFFFFF;
        content: '';
        display: block;
        height: 10px;
        left: -16px;
        position: absolute;
        width: 22px;
        top: -9px;
        z-index: 1;
    }

    .step-wrapper:first-child:before, .step-wrapper:last-child:after {
        border-radius: 50%;
        background-color: #E7E7E9;
        height: 8px;
        width: 8px;
    }

    .step-wrapper:first-child:before {
        left: -4px;
        top: -8px;
        background-color: #E7E7E9;
    }

    .step-wrapper.done {
        border-color: #0096D6;
        color: #77B6E5;
    }

        .step-wrapper.done:after {
            background-color: #0096D6;
        }

        .step-wrapper.done a {
            color: #77B6E5;
        }

            .step-wrapper.done a:hover {
                color: #0096D6;
            }

    .step-wrapper.current {
        border-color: #0096D6;
        color: #0096D6;
        font-weight: 600;
    }

        .step-wrapper.current:after {
            background-color: #0096D6;
        }

        .step-wrapper.current a {
            color: #0096D6;
        }

            .step-wrapper.current a:hover {
                color: #0096D6;
            }

    .step-wrapper.error {
        border-color: #ef5638;
        color: #ef5638;
    }

        .step-wrapper.error:after {
            background-color: #ef5638;
        }

        .step-wrapper.error a {
            color: #ef5638;
        }

            .step-wrapper.error a:hover {
                color: #d73d1d;
            }

    .step-wrapper.done:first-child:before, .step-wrapper.done:first-child:after, .step-wrapper.current:first-child:before, .step-wrapper.current:first-child:after {
        background-color: #0096D6;
    }

    .step-wrapper.done:last-child:after, .step-wrapper.current:last-child:after {
        background-color: #0096D6;
    }

    .step-wrapper.error:first-child:before, .step-wrapper.error:first-child:after {
        background-color: #ef5638;
    }

#steps {
    font-size: 14px;
    line-height: 20px;
    -webkit-box-shadow: none;
    box-shadow: none;
    background: transparent;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    margin: 28px -8px 30px -8px;
    padding-left: 10px;
    text-align: left;
    width: 100%;
}

.step {
    line-height: 1.35em;
    padding-left: 5px;
}

    .step:before {
        -webkit-transition: all 125ms ease-in-out;
        transition: all 125ms ease-in-out;
        color: inherit;
        content: counter(progress-bar-counter, decimal) ". ";
        left: 0.5em;
        line-height: 22px;
        display: inline;
    }

.step-wrapper:first-child .step {
    padding-left: 0;
}

.step-wrapper {
    -webkit-transition: all 125ms ease-in-out;
    transition: all 125ms ease-in-out;
    -webkit-box-flex: 1;
    -ms-flex: 1 0 0px;
    flex: 1 0 0px;
    margin-left: 5px;
    position: relative;
    counter-increment: progress-bar-counter;
    border-top: 8px solid #E7E7E9;
    color: #A5A6AC;
    padding-left: 0;
    padding-top: 8px;
}

    .step-wrapper:after {
        -webkit-transition: all 125ms ease-in-out;
        transition: all 125ms ease-in-out;
        top: -8px;
        border-radius: 50%;
        background-color: #E7E7E9;
        content: '';
        display: block;
        height: 8px;
        position: absolute;
        right: -4px;
        width: 24px;
        z-index: 2;
    }

    .step-wrapper:before {
        border-radius: 2px 50% 50% 2px;
        background-color: #FFFFFF;
        content: '';
        display: block;
        height: 10px;
        left: -16px;
        position: absolute;
        width: 22px;
        top: -9px;
        z-index: 1;
    }

    .step-wrapper:first-child:before, .step-wrapper:last-child:after {
        border-radius: 50%;
        background-color: #E7E7E9;
        height: 8px;
        width: 8px;
    }

    .step-wrapper:first-child:before {
        left: -4px;
        top: -8px;
        background-color: #E7E7E9;
    }

    .step-wrapper.done {
        border-color: #0096D6;
        color: #77B6E5;
    }

        .step-wrapper.done:after {
            background-color: #0096D6;
        }

        .step-wrapper.done a {
            color: #77B6E5;
        }

            .step-wrapper.done a:hover {
                color: #0096D6;
            }

    .step-wrapper.current {
        border-color: #0096D6;
        color: #0096D6;
        font-weight: 600;
    }

        .step-wrapper.current:after {
            background-color: #0096D6;
        }

        .step-wrapper.current a {
            color: #0096D6;
        }

            .step-wrapper.current a:hover {
                color: #0096D6;
            }

    .step-wrapper.error {
        border-color: #ef5638;
        color: #ef5638;
    }

        .step-wrapper.error:after {
            background-color: #ef5638;
        }

        .step-wrapper.error a {
            color: #ef5638;
        }

            .step-wrapper.error a:hover {
                color: #d73d1d;
            }

    .step-wrapper.done:first-child:before, .step-wrapper.done:first-child:after, .step-wrapper.current:first-child:before, .step-wrapper.current:first-child:after {
        background-color: #0096D6;
    }

    .step-wrapper.done:last-child:after, .step-wrapper.current:last-child:after {
        background-color: #0096D6;
    }

    .step-wrapper.error:first-child:before, .step-wrapper.error:first-child:after {
        background-color: #ef5638;
    }

    .step-wrapper a {
        color: #A5A6AC;
    }



.FieldDisabled {
    background-color: #eeeeee !important;
}

fieldset.first {
    margin-top: 0 !important;
}

/* New Quote Popup Styles */
.newQuoteFieldset {
    margin: 15px 0 0 !important;
}

.newQuoteExtrasCheckboxes {
    margin: 5px 0;
    /*padding-left: 16px;*/
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

div.newQuoteExtrasCheckboxes > label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

/* New Quote Promo Code - Uppercase (matching BookingEdit exactly) */
#txtNewQuotePromo > div > input {
    text-transform: uppercase;
}

/* New Quote Pricing Table - Exact copy of BookingEdit styles */
#newQuoteSummaryTable {
    color: white;
    width: 100%;
}

#newQuoteSummaryTable > thead > tr > th {
    font-family: 'Rubik', sans-serif !important;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.1;
    color: inherit;
    padding-bottom: 5px;
    border-bottom: 1px solid #ffffff;
}

#newQuoteSummaryTableBody > tr > td {
    padding: 4px 0;
    max-width: 0;
    width: 50%;
}

#newQuoteSummaryTableBody > tr > td:nth-child(1) {
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#newQuoteSummaryTableBody > tr > td:nth-child(2) {
    text-align: right;
}

.newQuoteSummaryTotal {
    padding: 5px 0 0 !important;
    border-top: 1px solid #ffffff;
}

.newQuoteSummaryTotalLine2 {
    padding: 5px 0 0 !important;
}

#newQuoteSummaryDiv {
    background: #888;
    color: white;
    width: 100%;
    padding: 10px;
    border-radius: 4px;
}

.promoCodeStatus {
    padding-left: 7px;
}

    .promoCodeStatus.valid {
        color: #00BD47; /* green */
    }

    .promoCodeStatus.invalid {
        color: #FF2C00; /* red */
    }

.GridEditColumn {
    width: 30px;
    text-align: center;
}

.TokenEditIssueEmployees {
    border-radius: 4px;
    border: 1px solid #cccccc !important;
    /*padding: 4px;*/
    font-family: 'Rubik', sans-serif !important;
    font-size: 15px !important;
    background-color: #ffffff;
}

.TokenEditIssueEmployeesToken {
    border-radius: 4px;
    /*padding: 6px 6px 6px 6px;*/
}

.dxeFocused_Moderno {
    border: 1px solid #66AFE9 !important;
    box-shadow: 0px 0px 4px 0px #66AFE9 !important;
    -webkit-box-shadow: 0px 0px 4px 0px #66AFE9 !important;
}

.dxeButtonEdit_Moderno .dxeEditArea_Moderno {
    background-color: #ffffff !important;
}

.dxeButtonEdit_Moderno td.dxictb {
    padding: 0px 0px 3px 3px !important;
}

.navbar {
    min-height: 40px;
}

.navbar-toggle{
    margin-top:6px;
    margin-bottom:6px;
}

#tvNavigation > .nav > li > a {
    padding:7px 8px;
}

/*.btn-default.active.focus, .btn-default.active:focus, .btn-default.active:hover, .btn-default:active.focus, .btn-default:active:focus, .btn-default:active:hover, .open > .dropdown-toggle.btn-default.focus, .open > .dropdown-toggle.btn-default:focus, .open > .dropdown-toggle.btn-default:hover {
    outline-color: #0096D6 !important;
}*/

.btn:focus {
    outline-color: transparent !important;
}

.dxeListBoxItemHover_Moderno {
    background-color: #0096D6;
}

.dxgvDI.dxgvAIC {
    width:40px !important;
}

/* to prevent wrap in adaptive view detail text */
/*.dxbs-gridview .dxbs-fixed > thead > tr > th, .dxbs-gridview .dxbs-fixed > tbody > tr > td, .dxbs-gridview .dxbs-fixed > tfoot > tr > td {
    white-space: normal;
}*/
/*disabled for now because it also affects the main table wrap*/

/*.dxbs-gridview > .panel > table > tbody > tr > td, .dxbs-gridview > .panel > table > thead > tr > th {
    white-space: normal;
}*/

.dxgvADDC {
    white-space: normal;
}

.progress-bar {
    background-color: #0096D6 !important;
}

/* 20200310 removed because impact on maid money activities/perks label but may affect elsewhere */
/*#BootstrapPageControl1_CC {
    padding-top:0 !important;
}*/

:not(.modal) > .dxbs-popup {
    top: 0;
}

#lbEditEvaluationChecklist {
    min-height:80px;
}

#lbEditApplicationHiringChecklist > li > div {
    padding:7px 8px;
}

#sidebar #tvNavigation ul > li ul > li > a {
/*    padding-left: 20px;
    padding-right:4px;*/
    padding: 7px 4px 7px 20px;
}

#sidebar #tvNavigation ul > li ul > li > ul > li > a {
    padding-left: 30px;
}

#sidebar #tvNavigation ul > li ul > li > ul > li > ul > li > a {
    padding-left: 40px;
}

#tvNavigation > ul > li > ul > li > ul > li > a {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.headerMessage {
    padding: 3px 10px;
    /*background-color: #00BD47 !important;*/
    color: #dddddd !important;
    text-align:center;
}

.navicon {
    margin-right:6px;
}

#tvNavigation > ul > li > ul > li > a {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#tvNavigation > ul > li > a {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*.NavItemSeparatorTop {
    border-top:1px solid #ddd;
}

.NavItemSeparatorBottom {
    border-bottom: 1px solid #ddd;
}*/

.buttonOrange {
    border-color: #FF8500 !important;
    background-color: #FF8500 !important;
    color: #FFFFFF !important;
    margin-top: 10px;
}

.buttonOrange:hover {
    background-color: #CD6B00 !important;
}

.buttonBlue {
    border-color: #0096D6 !important;
    background-color: #0096D6 !important;
    color: #FFFFFF !important;
    margin-top: 10px;
}

    .buttonBlue:hover {
        background-color: #0092c7 !important;
    }

.buttonGreen {
    border-color: #00BD47 !important;
    background-color: #00BD47 !important;
    color: #FFFFFF !important;
    margin-top: 10px;
}

    .buttonGreen:hover {
        background-color: #00B142 !important;
    }

/*.buttonGray {
    border-color: #ddd !important;
    background-color: #ddd !important;
    color: #666 !important;
    margin-top: 10px;
    padding: 6px;
}

.buttonGray:hover {
    background-color: #ccc !important;
}*/

.buttonGray {
    border-color: #999999 !important;
    background-color: #999999 !important;
    color: #FFFFFF !important;
    margin-top: 10px;
}

.buttonGray:hover {
    background-color: #888888 !important;
}

.buttonRed {
    border-color: #FF2C00 !important;
    background-color: #FF2C00 !important;
    color: #FFFFFF !important;
    margin-top: 10px;
}

.buttonRed:hover {
    background-color: #C62200 !important;
}

.buttonYellow {
    border-color: #ffb600 !important;
    background-color: #ffb600 !important;
    color: #FFFFFF !important;
    margin-top: 10px;
}

.buttonYellow:hover {
    background-color: #C68D00 !important;
}

.buttonNone {
    margin-top: 10px;
}

.buttonRed:hover {
}

#content > div.container-fluid > div.titleRow {
    margin: 15px 0 15px;
}

#content > div.container-fluid > div.titleRow > div {
padding: 0;
}

#content > div.container-fluid > div.titleRow > div > h2 {
    margin: 0;
}

.tabcontrolEditEmployee_C1 {
    padding-bottom:0;
}

.siteHeaderLogo {
    float: left;
}

#siteHeaderMenu {
    float: right;
    text-align: right;
}

#siteHeaderMenuSearchBox {
    float: left;
    padding: 6px 0;
    width: 250px;
    margin-right: 12px;
}

.siteHeaderTipOfTheDay {
    float: right;
    padding: 8px 15px 0 0;
    font-size: 1.6em;
    color: #dddddd;
    cursor: pointer;
}

.siteHeaderTipOfTheDay:hover {
    color:#efefef;
}


.siteHeaderActionCenter {
    float: right;
    padding: 8px 15px 0 0;
    font-size: 1.6em;
    color: #dddddd;
    cursor: pointer;
    position: relative;
}

.siteHeaderActionCenter:hover {
    color: #efefef;
}

.ac-header-badge {
    position: absolute;
    top: 3px;
    right: 8px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: 10px;
    font-weight: 600;
    line-height: 16px;
    text-align: center;
    background: #d9534f;
    color: #fff;
    border-radius: 8px;
}

/* Deploy status indicator (header, ON only) — matches clock-in / search box palette */
.siteHeaderDeployStatus {
    float: right;
    height: 34px;
    margin: 6px 10px 0 0;
    display: flex;
    align-items: center;
    background: transparent;
    border: 1px solid #BFE2F9;
    border-radius: 3px;
    color: #BFE2F9;
    font-size: 14px;
    line-height: 1;
    position: relative;
    user-select: none;
}

.siteHeaderDeployStatus:hover {
    color: #ffffff;
    border-color: #ffffff;
}

/* Filled amber chip when the last prod deploy only partially succeeded.
   Azure DevOps fills the WHOLE stage badge orange rather than showing a small coloured dot, and
   that is exactly why it was obvious enough to catch Ben's eye on 2026-08-05 - he missed it only
   because it lives on a screen he no longer watches. A 12px dot beside text on a header you see a
   hundred times a day is easy to slide past; a filled chip is not. Reproduce the signal that
   worked. See Documentation/Projects/Deploy-Failure-Detection/. */
.siteHeaderDeployStatus.attention {
    background: #F5A623;
    border-color: #F5A623;
    color: #1A1A1A;
    font-weight: 600;
}

.siteHeaderDeployStatus.attention:hover {
    background: #FFB733;
    border-color: #FFB733;
    color: #1A1A1A;
}

.siteHeaderDeployStatus.attention .deployStatus-caret,
.siteHeaderDeployStatus.attention:hover .deployStatus-caret {
    border-left-color: rgba(0, 0, 0, 0.35);
}

/* The status dot would vanish into the fill; darken it so it reads as an icon instead. */
.siteHeaderDeployStatus.attention .deployStatus-dot {
    background: #7A4E00;
    box-shadow: none;
    animation: none;
}

.deployStatus-body {
    display: flex;
    align-items: center;
    padding: 0 10px 0 12px;
    height: 100%;
    cursor: pointer;
}

.deployStatus-caret {
    padding: 0 9px;
    height: 100%;
    display: flex;
    align-items: center;
    cursor: pointer;
    border-left: 1px solid #BFE2F9;
    color: inherit;
}

.siteHeaderDeployStatus:hover .deployStatus-caret {
    border-left-color: #ffffff;
}

.deployStatus-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 7px;
    background: #cccccc;
    flex-shrink: 0;
}

.deployStatus-dot.gray {
    background: #cccccc;
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.4);
}
.deployStatus-dot.green {
    background: #00ff7f;
    box-shadow: 0 0 8px rgba(0, 255, 127, 0.9), 0 0 0 0 rgba(0, 255, 127, 0.7);
    animation: deployStatusPulse 1.8s infinite;
}
.deployStatus-dot.yellow {
    background: #ffcc00;
    box-shadow: 0 0 8px rgba(255, 204, 0, 0.9);
}
.deployStatus-dot.red {
    background: #ff3b30;
    box-shadow: 0 0 8px rgba(255, 59, 48, 0.9);
    animation: deployStatusFlash 1.4s infinite;
}

@keyframes deployStatusPulse {
    0% { box-shadow: 0 0 8px rgba(0, 255, 127, 0.9), 0 0 0 0 rgba(0, 255, 127, 0.7); }
    70% { box-shadow: 0 0 8px rgba(0, 255, 127, 0.9), 0 0 0 9px rgba(0, 255, 127, 0); }
    100% { box-shadow: 0 0 8px rgba(0, 255, 127, 0.9), 0 0 0 0 rgba(0, 255, 127, 0); }
}

@keyframes deployStatusFlash {
    0%, 100% { box-shadow: 0 0 8px rgba(255, 59, 48, 0.9); }
    50% { box-shadow: 0 0 14px rgba(255, 59, 48, 1); }
}

.deployStatus-spinner {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #ffcc00;
    border-top-color: transparent;
    margin-right: 7px;
    flex-shrink: 0;
    animation: deployStatusSpin 0.9s linear infinite;
    box-shadow: 0 0 6px rgba(255, 204, 0, 0.6);
}

@keyframes deployStatusSpin {
    to { transform: rotate(360deg); }
}

.deployStatus-dropdown {
    position: absolute;
    top: 38px;
    right: 0;
    width: 360px;
    background: #fff;
    color: #333;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1050;
    font-size: 13px;
    /* The dropdown hangs off a FIXED navbar, so without a cap it grows straight past the bottom
       of the viewport and the sections at the END become unreachable - including the smoke-gate
       override box, which is the only way to deploy when the gate blocks you. Adding the pending
       releases list made that reachable in ordinary use: 10 pending releases on 2026-08-25.
       Caught in review. calc leaves room for the navbar plus a margin. */
    max-height: calc(100vh - 80px);
    overflow-y: auto;
}

.deployStatus-dropdown-header {
    padding: 10px 12px;
    border-bottom: 1px solid #e0e0e0;
    background: #f9fafb;
}

.deployStatus-dropdown-detail {
    padding: 10px 12px;
    color: #555;
    line-height: 1.4;
    word-break: break-word;
}

.deployStatus-dropdown-detail .deployStatus-commit {
    font-family: Consolas, Menlo, monospace;
    font-size: 11px;
    color: #888;
    margin-top: 4px;
}

.deployStatus-dropdown-divider {
    height: 1px;
    background: #e0e0e0;
    margin: 0;
}

.deployStatus-dropdown-subheader {
    padding: 8px 12px 4px;
    font-size: 11px;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.deployStatus-dropdown-history {
    max-height: 220px;
    overflow-y: auto;
}

.deployStatus-history-entry {
    display: block;
    padding: 6px 12px;
    color: #333;
    text-decoration: none;
    border-top: 1px solid #f5f5f5;
}

.deployStatus-history-entry:first-child { border-top: none; }

.deployStatus-history-entry:hover {
    background: #f5f5f5;
    text-decoration: none;
    color: #333;
}

.deployStatus-history-name {
    font-weight: 600;
    color: #0096D6;
}

.deployStatus-history-meta {
    font-size: 11px;
    color: #888;
    margin-top: 2px;
}

.deployStatus-dropdown-footer {
    padding: 8px 12px;
    border-top: 1px solid #e0e0e0;
    background: #f9fafb;
    text-align: right;
}

.deployStatus-dropdown-footer a {
    color: #0096D6;
    font-size: 12px;
    text-decoration: none;
}

.deployStatus-dropdown-footer a:hover { text-decoration: underline; }

/* Full-page view: the primary action, directly under the state card. Either the button that
   ships the release, or the sentence saying why there isn't one. Never blank. */
.deployFull-action {
    margin: 0 0 18px 0;
}

.deployFull-deploy-btn {
    background: #0096D6;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 14px 28px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
}

.deployFull-deploy-btn:hover { background: #0077A8; }
.deployFull-deploy-btn:active { background: #006690; }

/* A prior half-finished production deploy, shown above the button rather than instead of it: the
   server may refuse because of it, and a refusal with nothing on screen explaining it is the
   failure this warning exists to prevent. */
.deployFull-action-warn {
    background: #FFF8E1;
    border: 1px solid #E6C36A;
    border-radius: 4px;
    color: #7A4E00;
    font-size: 13px;
    line-height: 1.4;
    padding: 10px 12px;
    margin-bottom: 12px;
}

/* Muted on purpose: it is an explanation, not an action, and must not read as a button that has
   stopped working. */
/* A broken build is the loudest fact on the page, so it is rendered as an alert rather than the
   muted "why" line it used to share with "nothing pending". */
.deployFull-action-failed {
    background: #FDEDED;
    border: 1px solid #E0A0A0;
    border-left: 4px solid #b00;
    border-radius: 4px;
    padding: 12px 14px;
    margin-bottom: 12px;
}

.deployFull-failed-head { color: #8a1f1f; font-size: 14px; font-weight: 600; line-height: 1.4; }
.deployFull-failed-msg  { color: #5f6b78; font-size: 13px; line-height: 1.5; margin-top: 5px; }

/* The sub-heading and the state card both go red when the state IS a failure. The page used to
   headline "11 READY TO DEPLOY" over a column of green buttons while the build was broken. */
.deployFull-sub.failed {
    color: #ffd7d7;
    font-weight: 700;
}

.deployFull-state.failed {
    border-left-color: #b00;
}

.deployFull-state.failed .deployFull-state-name { color: #8a1f1f; }

/* A deploy this session tried and was refused. Stays until superseded or dismissed, because a
   toast is gone in seconds and this is the answer to "I pressed Deploy and nothing shipped". */
.deployFull-action-refused {
    position: relative;
    background: #FDEDED;
    border: 1px solid #E0A0A0;
    border-left: 4px solid #b00;
    border-radius: 4px;
    padding: 12px 36px 12px 14px;
    margin-bottom: 12px;
}

.deployFull-refused-head { color: #8a1f1f; font-size: 13.5px; font-weight: 600; line-height: 1.4; }
.deployFull-refused-msg  { color: #5f6b78; font-size: 13px; line-height: 1.4; margin-top: 5px; word-break: break-word; }

.deployFull-refused-x {
    position: absolute;
    top: 6px; right: 8px;
    background: none; border: none;
    color: #8a1f1f; font-size: 20px; line-height: 1;
    cursor: pointer; padding: 2px 6px;
}

.deployFull-refused-x:hover { color: #b00; }

.deployFull-action-link {
    color: #0096D6;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.deployFull-action-link:hover { text-decoration: underline; }

.deployFull-action-why {
    color: #666;
    font-size: 13px;
    line-height: 1.4;
}

/* Per-release Deploy, on the rows the gate has cleared. Smaller than the primary button because
   an older release is the deliberate, secondary choice. */
.deployFull-rel-deploy {
    background: #0096D6;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.deployFull-rel-deploy:hover { background: #0077A8; }

/* The caret shows whether the full-page view is on screen, so "did my click land" has an answer
   in the header itself. */
.siteHeaderDeployStatus .deployStatus-caret i {
    transition: transform 0.12s ease-in-out;
}

.siteHeaderDeployStatus.menuOpen .deployStatus-caret i {
    transform: rotate(180deg);
}

/* Smoke-gate override panel: shown inside the dropdown when a deploy is blocked. */
.deployStatus-override-btn {
    background: #0096D6;
    color: #fff;
    border: none;
    border-radius: 0;
    padding: 5px 12px;
    font-size: 12px;
    cursor: pointer;
}

.deployStatus-override-btn:hover { background: #0077A8; }

.deployStatus-commit-list {
    max-height: 320px;
    overflow-y: auto;
}

.deployStatus-commit-row {
    display: block;
    padding: 6px 12px;
    color: #333;
    text-decoration: none;
    border-top: 1px solid #f5f5f5;
}

.deployStatus-commit-row:first-child { border-top: none; }

.deployStatus-commit-row:hover {
    background: #f5f5f5;
    text-decoration: none;
    color: #333;
}

.deployStatus-commit-msg {
    font-size: 12px;
    color: #333;
    line-height: 1.35;
    word-break: break-word;
}

.deployStatus-commit-meta {
    font-size: 11px;
    color: #888;
    margin-top: 2px;
}

.deployStatus-commit-sha {
    font-family: Consolas, Menlo, monospace;
    color: #666;
}

.deployStatus-commit-more {
    display: block;
    padding: 6px 12px;
    font-size: 11px;
    color: #0096D6;
    text-decoration: none;
    border-top: 1px solid #f5f5f5;
}

.deployStatus-commit-more:hover { text-decoration: underline; color: #0096D6; }

.deployStatus-commit-empty {
    padding: 8px 12px;
    color: #888;
    font-size: 12px;
    font-style: italic;
}

@media (max-width: 991px) {
    .siteHeaderDeployStatus { display: none !important; }
}

#siteHeaderMenuNewBookingButton {
    padding: 6px 12px 6px 10px;
    float: left;
}

#popupCancelBooking > div > div.modal-header {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cmbSiteSearch-Control {
    background-color:#0096D6;
}

.cmbSiteSearch-Input {
    background-color: #0096D6;
    color: #BFE2F9;
    border: 1px solid #BFE2F9;
}

.cmbSiteSearch-Input:focus {
    border-color: #FFFFFF;
    color: #FFFFFF;
    outline: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.cmbSiteSearch-Input:hover {
    border-color: #FFFFFF;
    outline: 0;
}

.cmbSiteSearch-NullText {
    color: #BFE2F9;
}

#cmbSiteSearch > div > span > span > span {
    color: #BFE2F9 !important;
}

.btnSiteNewBooking-Control {
    border-color: #BFE2F9 !important;
    background: #0096D6 !important;
    color: #BFE2F9 !important;
}

.btnSiteNewBooking-Control:hover {
    border-color: #FFFFFF !important;
    color: #FFFFFF !important;
    /*background: #0092c7 !important*/
}

#divSiteHeaderRightMenu {
    float: right;
    vertical-align: middle;
    height: 40px;
    text-align: right;
    padding-top: 10px;
    margin-right: 18px;
}

.mnuSiteHeaderNavigation-Control {
}

.mnuSiteHeaderNavigation-Menu {
}

.mnuSiteHeaderNavigation-MenuItem {

}

.mnuSiteHeaderNavigation-SubMenu {
}

.mnuSiteHeaderNavigation-SubMenuItem {
}

.mnuSiteHeaderNavigation-MenuItem > a {
    padding: 2px 0 0 !important;
    color: #dddddd !important;
    font-size: 18px;
}

    .mnuSiteHeaderNavigation-MenuItem > a:hover,
    .mnuSiteHeaderNavigation-MenuItem > a:focus {
        background-color: transparent !important;
    }


.CancelBookingTitle {
    font-size: 20px;
    margin: 10px 0;
}

.tableCancelBookingOptions {
    width: 100%;
}

.tdCancelBookingOptions {
    width: 100%;
}

.PageTitle {
    font-size: 30px;
    font-family: 'Rubik', sans-serif !important;
    margin: 10px 0;
}

.PageSubTitle {
    font-size: 14px;
}

#fsCancelBookingAlert {
    margin: 0 0 20px !important;
}

.divCancelBookingLateCancellationMessage {
    background-color: #FF2C00;
    color: white;
    border-radius: 4px;
    padding: 15px;
}

.nav-tabs > li.active {
    font-weight: bold;
}

.ratingGreen {
    color: #00BD47;
}

.ratingYellow {
    color: #F8CF1D;
}

.ratingRed {
    color: #FF2C00;
}

.ratingGray {
    color: #CCCCCC;
}

#cmbSiteSearch > div.dxbs-listbox.dxbs-dropdown-area.dxbs-dm.dropdown-menu.dx-dropdown-menu > ul {
    width:300px;
}

.dxbs-listbox > .list-group > li.list-group-item, .dxbs-listbox li > .list-group-item, .dxbs-listbox > .list-group li > .list-group-item {
    padding:5px 10px;
}
/*
div.dxbs-dropdown-edit > div.input-group > div.dxbs-input-cntr > input:hover {
    cursor: pointer;
}

.list-group > li {
    padding:5px 10px;
}

.list-group > li:hover {
    text-decoration: none;
    background-color:#eeeeee;
    cursor:pointer;
}

.list-group > li.active {
    background-color: #eeeeee;
}


.list-group > li > a {
    color:#555;
}*/

.logBadge {
    display: inline-block;
    min-width: 10px;
    padding: 3px 4px;
    font-size: 12px;
    /*font-weight: 700;*/
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    background-color: #aaa;
    border-radius: 4px;
}

.logBadge.red {
    background-color: #FF2C00;
}

.logBadge.blue {
    background-color: #0096D6;
}


.NavSeparator {
    border-top: 1px solid #CCCCCC;
}

/* ========================================
   DIRECT HTML NAVIGATION STYLES
   (Replaces DevExpress TreeView for performance)
   ======================================== */

/* Main navigation container */
.nav-tree {
    margin-top: 2px;
    font-family: 'Rubik', sans-serif;
}

/* Navigation sections (Sales, Operations, etc.) */
.nav-section {
    margin-bottom: 0;
}

.nav-section.NavItemSeparatorTop {
    border-top: 1px solid #ddd;
    margin-top: 8px;
    padding-top: 8px;
}

.nav-section.NavSeparator {
    border-top: 1px solid #CCCCCC;
    margin-top: 0;
    padding-top: 0;
}

/* Navigation headers (clickable section headers) */
.nav-header {
    display: block;
    padding: 7px 8px;
    font-weight: 500;
    color: #333333;
    text-decoration: none !important;
    background-color: transparent;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
}

.nav-header:hover {
    background-color: #f5f5f5;
    color: #333333;
    text-decoration: none;
}

.nav-header:focus {
    background-color: #f5f5f5;
    color: #333333;
    text-decoration: none;
    outline: none;
}

.nav-header.selected {
    background-color: transparent;
    color: #0096D6 !important;
    font-weight: normal;
}

/* Main navigation items (top-level links) */
.MainNavItem {
    display: block;
    padding: 7px 8px;
    color: #333333;
    text-decoration: none;
    background-color: transparent;
    border: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background-color 0.15s ease-in-out;
}

.MainNavItem:hover {
    background-color: #f5f5f5;
    color: #333333;
    text-decoration: none;
}

.MainNavItem:focus {
    background-color: #f5f5f5;
    color: #333333;
    text-decoration: none;
    outline: none;
}

.MainNavItem.selected {
    background-color: transparent;
    color: #0096D6 !important;
    font-weight: normal;
}

/* Sub-navigation items (under sections) */
.nav-sub-item {
    display: block;
    padding: 7px 4px 7px 20px;
    color: #333333;
    text-decoration: none;
    background-color: transparent;
    border: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background-color 0.15s ease-in-out;
}

.nav-sub-item:hover {
    background-color: #f5f5f5;
    color: #333333;
    text-decoration: none;
}

.nav-sub-item:focus {
    background-color: #f5f5f5;
    color: #333333;
    text-decoration: none;
    outline: none;
}

.nav-sub-item.selected {
    background-color: transparent;
    color: #0096D6 !important;
    font-weight: normal;
}

/* Sub-sub-navigation items (edit context items - more indented) */
.nav-sub-sub-item {
    display: block;
    padding: 7px 4px 7px 35px;
    color: #333333;
    text-decoration: none;
    background-color: transparent;
    border: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background-color 0.15s ease-in-out;
}

.nav-sub-sub-item:hover {
    background-color: #f5f5f5;
    color: #333333;
    text-decoration: none;
}

.nav-sub-sub-item:focus {
    background-color: #f5f5f5;
    color: #333333;
    text-decoration: none;
    outline: none;
}

.nav-sub-sub-item.selected {
    background-color: transparent;
    color: #0096D6 !important;
    font-weight: normal;
}

/* Navigation icons */
.nav-tree .navicon {
    margin-right: 6px;
    color: #666;
    width: 14px;
    text-align: center;
}

.nav-tree .selected .navicon {
    color: #0096D6;
}

/* Collapsible section chevron */
.nav-chevron {
    float: right;
    margin-right: 2px;
    margin-top: 3px;
    padding: 2px 4px;
    color: #888;
    font-size: 12px;
    transition: transform 0.15s ease-in-out;
    cursor: pointer;
}

.nav-chevron:hover {
    color: #333;
}

.nav-section.collapsed .nav-chevron {
    transform: rotate(-90deg);
}

/* Hide sub-items when section is collapsed */
.nav-section.collapsed .nav-sub-item,
.nav-section.collapsed .nav-sub-sub-item {
    display: none;
}

/* Hover-peek: a collapsed section reveals its items after the cursor lingers
   on it for ~250ms (JS adds the .peeking class via a delay timer). Chevron
   stays rotated to signal the section's pinned state is still collapsed. */
.nav-section.collapsed.peeking .nav-sub-item,
.nav-section.collapsed.peeking .nav-sub-sub-item {
    display: block;
}

/* Section headers (Sales/Operations/Marketing/Admin) are click-to-toggle */
.nav-section[data-section] .nav-header {
    cursor: pointer;
}

/* Responsive adjustments to match existing TreeView behavior */
@media (min-width: 1201px) {
    .nav-sub-item {
        width: 132px;
    }
}

/* Override any Bootstrap nav styles that might interfere */
.nav-tree a {
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
}

.nav-tree a:hover,
.nav-tree a:focus {
    border: none !important;
    border-radius: 0 !important;
}

.nav-pills > li + li {
    margin: 0;
}

.buttonClock {
    margin: 0 0 0 5px;
    padding: 6px 12px;
}

.buttonClock.green {
    border-color: #BFE2F9 !important;
    background: #45A657 !important;
    color: #FFFFFF !important;
}

.buttonClock.red {
    border-color: #BFE2F9 !important;
    background-color: #DE1F26 !important;
    color: #FFFFFF !important;
}

.buttonClock.blue {
    border-color: #BFE2F9 !important;
    background: #0096D6 !important;
    color: #BFE2F9 !important;
}

.buttonClock.blue:hover {
    border-color: #ffffff !important;
    background: #0096D6 !important;
    color: #ffffff !important;
}

.buttonClock.white {
    border-color: #BFE2F9 !important;
    background: #ffffffcf !important;
    color: #0096D6 !important;
}


.buttonClock.white:hover {
    border-color: #BFE2F9 !important;
    background: #ffffff !important;
    color: #0096D6 !important;
}

#siteFooterTimeTracking {
    position: fixed;
    bottom: 0;
    width: 100%;
    margin: 0;
    height: 46px;
    background: #0096D6;
    padding: 6px 0 0;
    z-index: 2;
}

@media (min-width: 1024px) {
    #siteFooterTimeTracking {
        display: none;
    }
}

#siteFooterClockStatus {
    height: 34px;
    padding: 7px 7px !important;
    border-radius: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0 6px;
    color:#FFFFFF;
}

/* FS "Now bar": the detailed bottom bar when a field supervisor is clocked in.
   Status block stacks above its own full-width action row so nothing truncates. */
#siteFooterTimeTracking.fs-nowbar {
    height: auto;
    padding: 9px 12px 11px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#siteFooterTimeTracking.fs-nowbar #siteFooterClockStatus {
    order: 1;
    height: auto;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    margin: 0;
    padding: 0 !important;
    line-height: 1.3;
}

#siteFooterTimeTracking.fs-nowbar #siteFooterClockButtons {
    order: 2;
    float: none;
    margin: 0;
    display: flex;
    gap: 8px;
}

#siteFooterTimeTracking.fs-nowbar #siteFooterClockButtons .buttonClock {
    flex: 1 1 0;
    width: auto !important;
}

.footer-now-line1 {
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.footer-now-line2 {
    font-size: 12px;
    opacity: 0.92;
    margin-top: 1px;
}

.footer-now-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #b6f0c4;
    margin-right: 5px;
    vertical-align: middle;
}

.footer-now-dot-idle {
    background: rgba(255,255,255,0.6);
}

#siteFooterClockStatus {
}

#siteFooterClockStatus.clockedOut {
}

#siteFooterClockStatus.clockedIn {
}

i.fas.fa-clock.clockGreen {
    color: #32a54e;
}

i.fas.fa-clock.clockRed {
    color: #FF2C00;
}

i.fas.fa-clock.clockGray {
    color: #aaa;
}

#siteHeaderPresenceButtons {
    display: inline-block;
    vertical-align: middle;
    border-left: 1px solid rgba(255,255,255,0.3);
    padding-left: 8px;
}

#btnSiteHeaderAway,
#btnSiteHeaderBack {
    margin: 0 0 0 5px;
    padding: 6px 12px;
    font-size: 14px;
    font-family: inherit;
    font-weight: 400;
    line-height: 1.42857;
    border: 1px solid #BFE2F9;
    border-radius: 4px;
    cursor: pointer;
    background: #ffffffcf;
    color: #0096D6;
    vertical-align: middle;
}

#btnSiteHeaderAway:hover,
#btnSiteHeaderBack:hover {
    background: #ffffff;
}

#awayMenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 5px;
    margin-top: 4px;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    z-index: 9999;
    min-width: 160px;
    padding: 6px 0;
    border: 1px solid #e0e0e0;
}

#awayMenu button {
    display: block;
    width: 100%;
    padding: 9px 16px;
    border: none;
    background: none;
    color: #333;
    font-size: 14px;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
}

#awayMenu button:hover {
    background: #f5f5f5;
    color: #0096D6;
}

#awayMenu button i {
    width: 20px;
    margin-right: 8px;
    text-align: center;
    color: #888;
}

#awayMenu button:hover i {
    color: #0096D6;
}

/* Break Schedule Link */
.break-schedule-link {
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
    padding: 4px 8px;
    font-size: 12px;
    font-family: inherit;
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    cursor: pointer;
    border-left: 1px solid rgba(255,255,255,0.2);
    padding-left: 14px;
}

.break-schedule-link:hover {
    color: #fff;
    text-decoration: none;
}

.break-schedule-link i {
    margin-right: 4px;
}

/* Break Schedule Popup */
.break-schedule-table {
    border-collapse: collapse;
}

.break-schedule-table th {
    text-align: left;
    padding: 8px 10px;
    border-bottom: 2px solid #e0e0e0;
    font-size: 13px;
    font-weight: 600;
    color: #555;
}

.break-schedule-table td {
    padding: 8px 10px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 13px;
    color: #333;
}

.break-schedule-table tbody tr:last-child td {
    border-bottom: none;
}

.break-schedule-name {
    font-weight: 500;
}

.break-schedule-role {
    color: #888;
    font-weight: 400;
    font-size: 12px;
}

.break-schedule-hidden td {
    opacity: 0.4;
}

.break-schedule-hidden td:first-child {
    opacity: 1;
}

#breakSchedulePopup .dx-popup-content {
    overflow-y: auto;
}

/* Break & Lunch popup tabs. Only rendered when the second tab (Coverage) is
   available, so for everyone else the popup looks exactly as it did. */
.bs-tabs {
    display: flex;
    gap: 2px;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 14px;
}

.bs-tab {
    padding: 7px 16px;
    font-size: 14px;
    cursor: pointer;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    color: #666;
    margin-bottom: -1px;
}

.bs-tab.bs-tab-on {
    background: #fff;
    border-color: #e0e0e0;
    color: #333;
    font-weight: 600;
}

.bs-tab .bs-tab-note {
    color: #888;
    font-size: 11px;
    margin-left: 6px;
    font-weight: 400;
}

/* One member of a coverage group. */
.cov-chip {
    display: inline-block;
    border: 1px solid #cfe0ea;
    background: #eef6fb;
    color: #0077A8;
    border-radius: 4px;
    padding: 2px 9px;
    font-size: 12px;
    margin: 2px 4px 2px 0;
    white-space: nowrap;
}

.cov-chip .cov-chip-x {
    color: #888;
    margin-left: 6px;
    cursor: pointer;
}

.cov-chip .cov-chip-x:hover {
    color: #dc3545;
}

.cov-hint {
    color: #888;
    font-size: 12px;
}

/* Presence Toast Notification */
#presenceToast {
    position: fixed;
    top: 60px;
    right: 20px;
    z-index: 99999;
    display: flex;
    align-items: center;
    padding: 10px 16px;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    border-left: 4px solid #0096D6;
    font-size: 14px;
    font-family: 'Rubik', sans-serif;
    color: #333;
    opacity: 0;
    transform: translateX(100%);
    transition: opacity 0.3s, transform 0.3s;
    pointer-events: none;
}

#presenceToast.show {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

#presenceToast .toast-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 10px;
    flex-shrink: 0;
}

#presenceToast .toast-name {
    font-weight: 500;
    margin-right: 4px;
}

#siteFooterClockButtons {
    float:right;
    margin:0 6px;
}

#siteHeaderTimeTracking {
    top: 0;
    margin: 0;
    height: 46px;
    background: #0096D6;
    padding: 6px 0 0;
    z-index: 2;
    display:block;
    float:left;
}

@media (max-width: 1024px) {
    #siteHeaderTimeTracking {
        display: none;
    }
}

#siteHeaderClockStatus {
    height: 34px;
    padding: 7px 0 !important;
    border-radius: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0 0 0 20px;
    float: left;
    width: 110px;
    color: #BFE2F9;
}

#siteHeaderClockStatus.clockedOut {
}

#siteHeaderClockStatus.clockedIn {
}

i.fas.fa-clock.clockGreen {
    color: #32a54e;
}

i.fas.fa-clock.clockRed {
    color: #FF2C00;
}

i.fas.fa-clock.clockGray {
    color: #aaa;
}

#siteHeaderClockButtons {
    float: right;
    margin-right: 80px;
}

#siteHeaderClockButtonClockIn {
    float:right;
}

#siteHeaderClockButtonClockOut {
    float: right;
}

#siteHeaderSearch > div > div > div.dx-texteditor-input-container > input {
    background: #0096D6;
    padding: 6px 9px 6px;
    color: #BFE2F9;
}

#siteHeaderSearch > div > div > div.dx-texteditor-input-container > div {
    color: #BFE2F9;
}

#siteHeaderSearch.dx-texteditor.dx-state-focused.dx-editor-outlined {
    border: 1px solid #BFE2F9 !important;
}

#siteHeaderSearch:hover {
    border-color: #ffffff;
}

.dx-widget {
    font-family: 'Rubik', sans-serif;
    font-size:14px;
}

.dx-selectbox-popup-wrapper .dx-list-item {
    color: #333333;
    cursor: pointer;
}

.site-search-result {
    padding: 8px 12px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
}

.site-search-info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.site-search-name {
    font-weight: 600;
    font-size: 13px;
    color: #333;
}

.site-search-detail {
    font-size: 12px;
    color: #666;
    margin-top: 2px;
}

.site-search-type {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 2px 6px;
    border-radius: 2px;
    flex-shrink: 0;
    margin-top: 2px;
    white-space: nowrap;
}

.site-search-type-customer {
    color: #0b7dda;
    background-color: #e8f4fd;
}

.site-search-type-employee {
    color: #2e7d32;
    background-color: #e8f5e9;
}

.dx-placeholder {
    top:1px;
    left:4px;
}

.dx-autocomplete-popup-wrapper .dx-list-item:hover:not(.dx-state-focused) {
    background-color: #f5f5f5 !important;
    color: #333 !important;
}

.dx-autocomplete-popup-wrapper .dx-list-item:hover:not(.dx-state-focused) .site-search-name {
    color: #333 !important;
}

.dx-autocomplete-popup-wrapper .dx-list-item:hover:not(.dx-state-focused) .site-search-detail {
    color: #666 !important;
}

.dx-autocomplete-popup-wrapper .dx-list-item.dx-state-focused .site-search-name,
.dx-autocomplete-popup-wrapper .dx-list-item.dx-state-active .site-search-name {
    color: #fff !important;
}

.dx-autocomplete-popup-wrapper .dx-list-item.dx-state-focused .site-search-detail,
.dx-autocomplete-popup-wrapper .dx-list-item.dx-state-active .site-search-detail {
    color: rgba(255, 255, 255, 0.85) !important;
}

.dx-autocomplete-popup-wrapper .dx-list-item.dx-state-focused .site-search-type,
.dx-autocomplete-popup-wrapper .dx-list-item.dx-state-active .site-search-type {
    color: #fff !important;
    background-color: rgba(255, 255, 255, 0.2) !important;
}

#siteHeaderSearch {
    height: 34px;
    border: 1px solid #ddd;
    border-radius: 4px;
    max-width: 100%;
    text-align: left;
    background-color: #0096D6;
    color: #BFE2F9;
}

#siteHeaderSearch .dx-icon-clear {
    color: #fff !important;
}

#siteHeaderSearchPlaceholder {
    padding: 7px 8px;
}

#divTipOfTheDayHeader {
    font-size:28px;
    margin-bottom: 10px;
}

#divTipOfTheDayContent {
}

#divTipOfTheDayBottomButtons {
    margin-top: 15px;
}

#divTipOfTheDayBottomButtonsRight {
    float:right;
}

#divTipOfTheDayBottomButtonsLeft {
    float:left;
}

#popupTipOfTheDay > div > div.modal-header > span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#popupTipOfTheDay > div > div.modal-header {
    font-size: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#popupTipOfTheDay > div {
    max-width: 360px;
}

#popupTipOfTheDay > div > div.modal-body {
    padding-bottom: 10px;
}

#divFormFillRequestHeader {
    font-size: 28px;
    margin-bottom: 10px;
}

#divFormFillRequestContent {
}

#divFormFillRequestBottomButtons {
    margin-top: 15px;
}

#divFormFillRequestBottomButtonsRight {
    float: right;
}

#divFormFillRequestBottomButtonsLeft {
    float: left;
}

#popupFormFillRequest > div > div.modal-header > span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#popupFormFillRequest > div > div.modal-header {
    font-size: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#popupFormFillRequest > div {
    max-width: 360px;
}

#popupFormFillRequest > div > div.modal-body {
    /*padding-bottom: 10px;*/
}

#btnFormFillRequestCancel {
    min-width: 70px;
}

#btnFormFillRequestOK {
    min-width: 70px;
}

#divSalesFrequentlyAskedQuestionsBottomButtons {
    margin-top: 15px;
}

#divSalesFrequentlyAskedQuestionsBottomButtonsRight {
    float: right;
}

#divSalesFrequentlyAskedQuestionsBottomButtonsLeft {
    float: left;
}

#divSalesFrequentlyAskedQuestionsContent {
    max-height: 500px;
    overflow-x: hidden;
    overflow-y: auto;
}

.customerEmployeeRequestBadge {
    background: #0096D6;
    color: white;
    font-size: .8em;
    font-weight: bold;
    padding: 4px 6px 5px;
    vertical-align: top;
    position: relative;
    border-radius: 3px;
    white-space: nowrap;
    line-height: 26px;
}

.customerEmployeeRequestBadge.Red {
    background: #FF2C00;
}

.customerEmployeeRequestBadge.Green {
    background: #00BD47;
}

.customerEmployeeRequestBadge.Orange {
    background: #FF8500;
}

.hidePopupHeader {
    display:none;
}

#notificationContent {
    max-height: 400px;
    overflow-y: auto;
}

#notificationBottomButtons {
    margin-top: 15px;
}

#divMainContent {
    margin-bottom: 15px;
}

.GridIconLinkSpacer {
    display: inline;
    margin: 0 0 0 10px;
}

/* Quick Impersonation Popup Styles */
.quick-impersonation-content {
    padding: 15px;
}

.quick-impersonation-listbox {
    height: 400px !important;
    min-height: 400px !important;
}

/* Force the listbox to show more items */
.quick-impersonation-listbox .list-group {
    max-height: 400px !important;
    height: 400px !important;
}

.quick-impersonation-listbox .list-group-item {
    height: auto !important;
    min-height: 30px !important;
}

/* New Quote Team Display Styling (matching BookingEdit) */
#newQuoteTeamTable {
    background: #0096D6;
    color: white;
    width: 100%;
}

#newQuoteTeamTable > thead > tr > th {
    font-family: 'Rubik', sans-serif !important;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.1;
    color: inherit;
    padding-bottom: 5px;
    border-bottom: 1px solid #ffffff;
}

#newQuoteTeamTableBody > tr > td {
    padding: 4px 0;
    max-width: 0;
}

#newQuoteTeamTableBody > tr > td:nth-child(1) {
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#newQuoteTeamTableBody > tr > td:nth-child(2) {
    text-align: right;
    width: 60px;
}

#newQuoteTeamTable > tfoot > tr > td {
    padding-top: 5px;
    border-top: 1px solid #ffffff;
}

#newQuoteTeamTable > tfoot > tr > td:nth-child(2) {
    text-align: right;
}

#newQuoteTeamDiv {
    background: #0096D6;
    color: white;
    width: 100%;
    padding: 10px;
    border-radius: 4px;
}

/* ===========================================================================
   Shared Google Business Profile post preview card (renderGBPPostPreview in
   Site.Master.js). Used by the GBPManager review popup and the Owner Action
   Center inline approve cards. Light theme only.
   See Documentation/Architecture/GBP-Posts.md.
   =========================================================================== */
.gbp-preview-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    max-width: 340px;
    font-family: Roboto, Arial, sans-serif;
}

.gbp-preview-img {
    width: 100%;
    height: 170px;
    background-size: cover;
    background-position: center;
    background-color: #f5f5f5;
}

.gbp-preview-body {
    padding: 12px 14px 14px;
}

.gbp-preview-biz {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 10px;
}

.gbp-preview-logo {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #0096D6;
    color: #fff;
    font-weight: 600;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.gbp-preview-bizname {
    font-size: 13px;
    font-weight: 600;
    color: #202124;
    line-height: 1.2;
}

.gbp-preview-bizsub {
    font-size: 11px;
    color: #5f6368;
}

.gbp-preview-title {
    font-size: 15px;
    font-weight: 600;
    color: #202124;
    margin-bottom: 6px;
    line-height: 1.3;
}

.gbp-preview-text {
    font-size: 13px;
    color: #3c4043;
    line-height: 1.45;
    white-space: pre-wrap;
    word-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 8;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.gbp-preview-empty {
    color: #9aa0a6;
    font-style: italic;
}

.gbp-preview-cta {
    margin-top: 12px;
    display: inline-block;
    color: #1a73e8;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid #dadce0;
    border-radius: 18px;
    padding: 6px 16px;
}

/* Office churn reason picker (ChurnInterception.OfficeEnabled) -- mirrors the portal reason options. */
.officeChurnReasonOption {
    display: block;
    width: 100%;
    margin: 0 0 6px 0;
    padding: 10px 14px;
    border: 1px solid #e2e6ea;
    border-left: 4px solid #e2e6ea;
    background: #fff;
    font-weight: normal;
    cursor: pointer;
    font-size: 15px;
    color: #333;
    transition: border-color .12s ease, background-color .12s ease;
}
.officeChurnReasonOption:hover {
    background: #fafdff;
    border-color: #0096D6;
}
.officeChurnReasonOption:has(input:checked) {
    border-color: #0096D6;
    background: #f0fbff;
    font-weight: 600;
}
.officeChurnReasonOption input[type="radio"] {
    margin-right: 10px;
    accent-color: #0096D6;
}
.officeChurnGuidance {
    margin: 4px 0 6px 0;
    padding: 10px 14px;
    background: #f0fbff;
    border: 1px solid #bfe9fb;
    border-left: 4px solid #0096D6;
    color: #333;
    font-size: 14px;
    line-height: 1.5;
}

/* ---------------------------------------------------------------------------
   Pending releases in the deploy dropdown.
   Each release not yet in production, deployable on its own, so another session's push
   no longer takes away the release you were waiting on. A row only carries a button when
   the server says it is genuinely deployable; otherwise it states why, quietly.
   --------------------------------------------------------------------------- */
/* No inner max-height: the DROPDOWN scrolls now. Two nested scroll regions meant the pending
   list scrolled inside itself while the sections below it stayed off-screen entirely. */
.deployStatus-pending-list { padding: 2px 0 4px; }

.deployStatus-pending-row {
    /* wrap, so the Contents toggle and its panel drop onto their OWN full-width lines below the
       name/chip/button line instead of becoming flex siblings squeezed in beside the button. */
    display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
    padding: 7px 12px; border-left: 3px solid transparent;
}
.deployStatus-pending-row + .deployStatus-pending-row { border-top: 1px solid #f2f2f2; }

/* The one row you can act on gets the only colour in the list. */
.deployStatus-pending-row.ready { border-left-color: #0096D6; background: #f7fbfe; }

.deployStatus-pending-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.deployStatus-pending-name { font-size: 12px; font-weight: 600; color: #333; white-space: nowrap; }

.deployStatus-pending-smoke {
    font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px;
    padding: 1px 6px; border-radius: 10px; white-space: nowrap;
}
.deployStatus-pending-smoke.pass    { background: #e6f4ea; color: #1a7f37; }
.deployStatus-pending-smoke.fail    { background: #fdecea; color: #b00; }
.deployStatus-pending-smoke.running { background: #fff4e5; color: #b26a00; }
.deployStatus-pending-smoke.notrun  { background: #f2f2f2; color: #888; }

/* Deliberately understated next to the smoke chip: the chip is the decision, the button
   is just the action once the decision is green. */
.deployStatus-pending-btn {
    border: 1px solid #0096D6; background: #0096D6; color: #fff;
    font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 4px;
    cursor: pointer; white-space: nowrap;
}
.deployStatus-pending-btn:hover { background: #0077A8; border-color: #0077A8; }

.deployStatus-pending-why {
    font-size: 10.5px; color: #999; text-align: right; line-height: 1.3;
    max-width: 190px;
}

/* Inside-48h marker on the office churn pause checklist. One definition shared by the initial
   render and by the re-prompt, so the two cannot drift into looking like different warnings. */
.officeChurnFeeTag {
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 4px;
    background: #fdf3e3;
    border: 1px solid #e9c893;
    color: #8a5a00;
    font-size: 12px;
    white-space: nowrap;
}



/* ============================================================================
   FULL-PAGE DEPLOY VIEW
   ============================================================================
   Swapped in over #divMainContent's children when the top-bar deploy caret is clicked.

   Deliberately shares the DEPLOYMENT PAGE's visual language (DeployCockpit.css): the navy
   gradient topbar with a brand-blue left rule, calm white cards on a light field, brand blue for
   actions only. Two surfaces showing the same information should not look like two products.

   Hierarchy: this page exists for ONE decision -- ship this release or not -- and the money-path
   smoke verdict gates it. The verdict is a coloured rail on the release card, readable before any
   text; the commit log is contained evidence, never the hero.

   Width and gutters: it SPANS the content area rather than hugging a narrow column, with equal
   breathing room on both sides. The left gutter is applied by JS on top of the measured nav
   overlap (deployStatus_FitAroundSidebar) -- it adds to the clearance rather than replacing it,
   which is the bug that kept leaving content flush against the nav.
   ============================================================================ */

.deployFull {
    padding: 18px 28px 48px 28px;
    color: #333;
    background: #f4f6f8;
    /* Fill the content area rather than stopping partway down and leaving a white band under it. */
    min-height: calc(100vh - 60px);
    box-sizing: border-box;
}

/* ---- topbar: matches the deployment page ------------------------------- */
.deployFull-topbar {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 14px 18px; margin-bottom: 18px;
    background: linear-gradient(90deg, #0a2540 0%, #143a5e 100%);
    color: #fff; border-left: 4px solid #0096D6;
}
.deployFull-topbar-left { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.deployFull-title { font-size: 20px; font-weight: 600; letter-spacing: 0.2px; }
.deployFull-sub {
    font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 1px;
    color: #9fc7e6; border-left: 1px solid #2c5277; padding-left: 10px;
}
.deployFull-close {
    flex: 0 0 auto; width: 34px; height: 34px; line-height: 1;
    background: transparent; color: #fff; border: 1px solid #2c5277; border-radius: 4px;
    font-size: 20px; cursor: pointer;
}
.deployFull-close:hover { background: rgba(255,255,255,0.08); border-color: #0096D6; }
.deployFull-close:focus-visible { outline: 2px solid #0096D6; outline-offset: 2px; }

/* ---- current state ----------------------------------------------------- */
.deployFull-state {
    display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
    background: #fff; border: 1px solid #e3e7eb; border-left: 4px solid #0096D6;
    border-radius: 4px; padding: 14px 18px; margin-bottom: 22px;
}
.deployFull-state-name { font-size: 15px; font-weight: 600; color: #14243a; }
.deployFull-state-detail { font-size: 13px; color: #5f6b78; }

/* ---- section labels ---------------------------------------------------- */
.deployFull-label {
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
    color: #8a97a6; margin: 0 0 10px;
}
.deployFull-block { margin-bottom: 26px; }

/* ---- release card: the hero ------------------------------------------- */
.deployFull-rel {
    position: relative; background: #fff;
    border: 1px solid #e3e7eb; border-radius: 4px;
    margin-bottom: 10px; overflow: hidden;
}
.deployFull-rel::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: #c7ced6;
}
.deployFull-rel.pass::before    { background: #1a7f37; }
.deployFull-rel.fail::before    { background: #b00020; }
.deployFull-rel.running::before { background: #d98a00; }
.deployFull-rel.notrun::before  { background: #b9bec4; }
/* 'error' means the verdict could not be READ. Without its own rule it fell through to the
   neutral default, so the state the page most needs to shout rendered as benign. */
.deployFull-rel.error::before   { background: #b26a00; }

.deployFull-rel-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 18px 14px 22px; }
.deployFull-rel-name { font-size: 16px; font-weight: 600; color: #14243a; }
.deployFull-rel-meta { font-size: 12px; color: #8a97a6; }

.deployFull-verdict {
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.7px;
    padding: 3px 8px; border-radius: 3px; white-space: nowrap;
}
.deployFull-verdict.pass    { background: #e6f4ea; color: #1a7f37; }
.deployFull-verdict.fail    { background: #fdecea; color: #b00020; }
.deployFull-verdict.running { background: #fff4e5; color: #b26a00; }
.deployFull-verdict.notrun  { background: #eef1f4; color: #6b7883; }
.deployFull-verdict.error   { background: #fff4e5; color: #8a5a00; border: 1px solid #f0d9b5; }

/* Status, not a control. This view is read-only (see the SCOPE NOTE in Site.Master.js); every
   row says where the release stands and where the deploy action lives. */
.deployFull-ready   { margin-left: auto; font-size: 12px; color: #1a7f37; text-align: right; max-width: 320px; }
.deployFull-blocked { margin-left: auto; font-size: 12px; color: #8a97a6; text-align: right; max-width: 320px; }

.deployFull-rel-commits { border-top: 1px solid #eef1f4; padding: 2px 18px 12px 22px; }
.deployFull-count { font-size: 11.5px; color: #8a97a6; padding: 9px 0 5px; }
.deployFull-scroll {
    max-height: 260px; overflow-y: auto;
    /* A hard cut mid-row reads as broken; fade the tail to say "there is more". */
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent 100%);
            mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent 100%);
}
.deployFull-rel-more {
    padding: 11px 18px 12px 22px; border-top: 1px solid #eef1f4;
    font-size: 12.5px; color: #0077A8; cursor: pointer;
}
.deployFull-rel-more:hover { background: #f7fbfd; text-decoration: underline; }

/* ---- context columns: what the width is for ---------------------------- */
.deployFull-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 1100px) { .deployFull-cols { grid-template-columns: 1fr; } }
.deployFull-panel {
    background: #fff; border: 1px solid #e3e7eb; border-radius: 4px;
    padding: 4px 16px 10px; max-height: 300px; overflow-y: auto;
}
.deployFull-empty { font-size: 13px; color: #8a97a6; padding: 12px 2px; }

.deployFull-hist { display: block; padding: 8px 2px; border-bottom: 1px solid #f2f4f6;
                   text-decoration: none; color: inherit; }
a.deployFull-hist:hover { background: #f9fafb; }
a.deployFull-hist:hover .deployFull-hist-name { text-decoration: underline; }
.deployFull-hist:last-child { border-bottom: none; }
.deployFull-hist-name { font-size: 13px; font-weight: 600; color: #0077A8; }
.deployFull-hist-meta { font-size: 11.5px; color: #8a97a6; display: block; margin-top: 1px; }

/* flex-basis 100% so it drops onto its own line under the row, which the flex-wrap on
   .deployStatus-pending-row is there to allow. Its cockpit counterpart already had this. */
.deployStatus-pending-view {
    flex: 0 0 100%; width: 100%;
    font-size: 11px; color: #0096D6; cursor: pointer; white-space: nowrap;
}
.deployStatus-pending-view:hover { text-decoration: underline; }

/* The machine a commit came from. A tag rather than plain meta text: when a smoke gate has just
   failed this is the field being scanned for, so it has to be findable at a glance. */
.deployStatus-commit-machine {
    display: inline-block;
    font-family: Consolas, "SF Mono", Menlo, monospace;
    font-size: 10px; font-weight: 600; letter-spacing: 0.3px;
    color: #4a5b6d; background: #eef2f6; border: 1px solid #dde4ea;
    border-radius: 3px; padding: 0 5px;
}

/* A failed status poll. Amber, not the calm blue of a normal state card: the whole point is that
   the page is NOT telling you everything is fine. */
.deployFull-state.deployFull-state-error {
    border-left-color: #d98a00; background: #fffaf2;
}
.deployFull-state-error .deployFull-state-name { color: #8a5a00; }

/* Topbar actions: the dropdown's Azure DevOps and Deployment links, which the full page inherited
   responsibility for the moment the caret stopped opening the dropdown. */
.deployFull-topbar-actions { display: flex; align-items: center; gap: 14px; }
.deployFull-link { color: #9fc7e6; font-size: 12px; text-decoration: none; white-space: nowrap; }
.deployFull-link:hover { color: #fff; text-decoration: underline; }


/* ============================================================================
   TIMESHEET ADJUSTMENTS: the clock time you can tap, and the sheet it opens.

   LIGHT MODE ONLY, per CLAUDE.md. Ben runs a browser extension that inverts the
   page for him, so nothing here hardcodes dark colours.
   ============================================================================ */


/* ---- The sheet ---------------------------------------------------------- */

/* IT RISES OUT OF THE CLOCK BAR. Bottom-anchored, not centred, and the dim fades in with it.
   Ben, 2026-09-22: "what i'd prefer to see is animation sliding up from bottom covering maybe
   half of the screen." Before this it was a full-screen panel that simply appeared, which reads
   as a page you navigated to - his word was "daunting". */
#tsaSheetOverlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0);
    z-index: 3000;
    display: flex;
    /* CENTRED ON A DESKTOP, bottom-docked on a phone (see the media query below). The sheet is
       reached from the footer clock bar, which only exists on a phone, so that is where it
       should look like it came out of the bar. On a monitor the same markup is a dialog, and
       docking it to the bottom edge of a large screen would just look misplaced - the existing
       comment on #tsaSheet is explicit that this surface has to look deliberate in both places,
       because the field supervisors use both. */
    align-items: center;
    justify-content: center;
    transition: background-color 240ms ease-out;
}
#tsaSheetOverlay.tsaUp { background: rgba(0,0,0,.45); }

#tsaSheet {
    background: #fff;
    border-radius: 4px;
    width: 100%;
    /* Wide enough on a desktop to read as a dialog rather than a phone screen pasted
       onto a monitor. Chris and the field supervisors use both, so this surface has to
       look deliberate in both places. */
    max-width: 480px;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,.3);
}

/* WHY A TRANSITION ON transform AND NOT A KEYFRAME. The two earlier bottom sheets in this app
   (#ccpBottomSheet and #pcpSheet, HomeSchedule.css) both shipped with NO entrance animation,
   and both carry a comment saying a keyframe fought a `transition: all` on the same node and
   left the element stuck half-faded. Transitioning one named property from an ID selector
   cannot hit that: there is no keyframe to compete with, and #tsaSheet is matched by no
   `transition: all` here (all six are scoped to .step / .step-wrapper, a stepper widget). */


/* ONLY THE SPINNER IS ALLOWED TO GIVE. Every child of a flex column can shrink by default, so
   once the sheet stopped being full height the browser crushed whatever it could: the hour-chip
   row measured 10px while the 46px chips inside it hung out of it. The full-screen sheet always
   had room, so this was latent until the sheet got short. */
#tsaSheetHead, #tsaSeg, #tsaRecord, #tsaNote, #tsaSheetFoot { flex-shrink: 0; }

/* On a phone it stops being the whole screen and becomes a half sheet.
   A PIXEL FLOOR, not a bare percentage: once the wheel and the MANDATORY note both have to stay
   on screen this form needs about 400px, and half of an iPhone SE's 568px viewport is 284px - a
   strict half pushed the note clean off the bottom there, which is the one field that cannot be
   hidden. So it reads as roughly half on the phones cleaners carry and grows on a small old one
   rather than dropping a required field, or squashing the wheel until it stops looking like a
   real control.
     Pixel 7 (839px) -> 436px, 52%    iPhone 13 (664px) -> 416px, 63%    iPhone SE -> 416px, 73%
     The floor went 400 -> 416px to give the note its full second line back.
   The 62vh fallback is for anything without max(), and it never clips either. */
@media (max-width: 480px) {
    /* Docked to the bottom edge, so it reads as a surface that came up out of the blue clock
       bar rather than a card floating in the middle of the screen. */
    #tsaSheetOverlay { align-items: flex-end; }

    #tsaSheet {
        max-width: none;
        height: auto;
        max-height: 66vh;
        border-radius: 14px 14px 0 0;   /* top corners only: the bottom meets the screen edge */
        box-shadow: 0 -10px 40px rgba(0,0,0,.3);
        transform: translateY(100%);
        transition: transform 260ms cubic-bezier(.32,.72,0,1);
        will-change: transform;
    }
    @supports (max-height: max(52vh, 416px)) {
        #tsaSheet { max-height: max(52vh, 416px); }
    }
    #tsaSheetOverlay.tsaUp #tsaSheet { transform: translateY(0); }

    /* A grab handle, phone only. Cheap, and it is what makes the panel read as something you
       can flick away rather than a page that has been cut off. */
    #tsaSheet::before {
        content: '';
        display: block;
        flex: 0 0 auto;
        width: 36px; height: 4px;
        border-radius: 2px;
        background: #d0d0d0;
        margin: 8px auto 0;
    }
}

#tsaSheetHead {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px 10px;
    border-bottom: 1px solid #e0e0e0;
}

#tsaSheetTitle { font-size: 17px; font-weight: 700; color: #333; }
#tsaSheetSub { font-size: 12px; color: #666; margin-top: 2px; }

#tsaSheetX {
    background: none;
    border: none;
    font-size: 26px;
    line-height: 1;
    color: #888;
    cursor: pointer;
    padding: 0 4px;
}

/* Which clock. Only rendered once there are two sides to choose between. */
#tsaSeg { display: flex; gap: 2px; padding: 10px 16px 0; }

#tsaSeg > div {
    flex: 1;
    text-align: center;
    padding: 8px 0;
    font-size: 14px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    color: #666;
    cursor: pointer;
}

#tsaSeg > div.tsaOn {
    background: #E8F5FC;
    border-color: #BFE2F9;
    color: #0077A8;
    font-weight: 600;
}

/* THE BODY SCROLLS, and without this the sheet loses the one field it cannot do without.
   Under the old design the body needed no scroller because exactly one child - the minute list -
   was allowed to flex, so it absorbed whatever was left over. The wheel that replaced it is a
   FIXED 132px (its columns are a hard height and its automatic minimum size is pinned by them),
   #tsaRecord / #tsaNote / #tsaSheetFoot are flex-shrink:0, and the sheet is now capped instead of
   being the whole screen. So the surplus had nowhere to go: it overflowed this box, got clipped by
   #tsaSheet{overflow:hidden}, and the footer was painted on top of it.
   The casualty was the NOTE, which this same branch made mandatory. With a partner row present -
   43% of clocked jobs in 30 days have two or more cleaners - the note rendered entirely below the
   sheet, so the request could not be filed at all and the cleaner was back to emailing, which is
   the one outcome this whole branch exists to prevent. Even solo, both iPhone sizes clipped its
   last 20px and put Send over it.
   overflow-y:auto rather than a taller sheet on purpose: a taller sheet fixes the cases somebody
   measured, and a scroller fixes the ones nobody did - a notice, a refusal, three partner rows.
   The wheel keeps its own scrolling; a touch on it turns the drum, a touch anywhere else moves
   the body, which is how every bottom sheet behaves. */
#tsaSheetBody {
    padding: 12px 16px 0;
    display: flex;
    flex-direction: column;
    min-height: 0;          /* lets children actually shrink inside the flex column */
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* THE SCROLL STOPS HERE. Without this, a drag that reaches the end of the body carries on
       into the document behind the sheet: measured 600px of the /home/work page moving under an
       open sheet, so the cleaner closes it somewhere other than where they left off. Adding a
       scroller is what made that routine rather than rare, because it invites the gesture. */
    overscroll-behavior-y: contain;
}

#tsaRecord { font-size: 14px; color: #333; margin-bottom: 10px; }

/* ---- The partner shortcuts, ABOVE and OUTSIDE the scrolling list ---------- */

#tsaMatesHead, #tsaOrPick {
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #8a8a8a;
    font-weight: 700;
    margin: 0 0 6px;
}

#tsaOrPick { margin: 10px 0 6px; }

.tsaMate {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #cfe0ea;
    background: #eef6fb;
    border-radius: 4px;
    padding: 9px 10px;
    margin-bottom: 6px;
    cursor: pointer;
}

.tsaMate .fas { color: #0077A8; }
.tsaMateWho { flex: 1; font-size: 14px; color: #0077A8; font-weight: 600; }

/* The spread is SHOWN, never hidden: a collapsed group applies the conservative end,
   and stating the range is what stops that reading as a precise time we invented. */
.tsaMateSpread { display: block; font-size: 11px; color: #666; font-weight: 400; }

.tsaMateTime { font-size: 15px; font-weight: 700; color: #333; }

.tsaMate.tsaOn {
    border-color: #0096D6;
    background: #d9edf9;
    box-shadow: inset 0 0 0 1px #0096D6;
}

/* ---- The time spinner ---------------------------------------------------- */

/* A WHEEL, NOT A LIST. This block replaced an hour-chip row plus a scrolling one-minute list.
   Ben, 2026-09-22: "i thought we were going to give them a spinner or something? makr it look
   professional", after "I like the half sheet, but there are just too many options."

   The chips-and-list version was itself a fix for "the big pop-up with all the times is a
   little overwhelming, too, on the phone" (2026-09-21) - it cut what was on screen from about
   300 rows to roughly a dozen, and a dozen was still too many. A wheel shows THREE rows with
   one under the band while leaving every minute reachable, and every minute has to stay
   reachable: of 623 times cleaners wrote across 180 days of clock-correction emails, only 17%
   land on a quarter hour and 54% are not even a multiple of 5, so coarser steps would be wrong
   more often than right.

   IT IS THE BROWSER'S OWN SCROLLER. scroll-snap-type: y mandatory plus scroll-snap-align:
   center gives real momentum and native-feeling detents, which is most of why this reads as a
   system control rather than something homemade. No library, and deliberately not an
   <input type="time">: on iOS that opens its OWN picker on top of the sheet, so the half sheet
   would be covered by a second overlay a moment after it arrived. */
.tsaSpin {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 2px;
    height: 132px;              /* one row either side of the 44px band */
    /* Fades the rows out top and bottom the way a physical drum would. This is most of what
       makes it read as a wheel rather than a short scrolling list. */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 28%, #000 72%, transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 28%, #000 72%, transparent 100%);
}

.tsaSpinCol {
    height: 132px;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;              /* Firefox */
    -ms-overflow-style: none;
    flex: 0 0 auto;
    min-width: 66px;
    text-align: center;
    /* THE DRUM KEEPS THE GESTURE. At either end of a column the scroll used to chain to the
       sheet body: measured a drag that left the value on "59" while the whole wheel slid 123px
       out from under the thumb, so the release could land on the note or on Send. The comment
       further up this file claimed "a touch on it turns the drum, a touch anywhere else moves the
       body" - that was only true away from the ends, and it is true everywhere now. */
    overscroll-behavior-y: contain;
}
.tsaSpinCol::-webkit-scrollbar { display: none; }   /* a wheel has no scrollbar */

/* 44px MUST match _TSA_ROW_H in Site.Master.js. The JS divides scrollTop by it to work out
   which row is under the band, so changing one without the other silently selects the wrong
   time. */
.tsaSpinRow {
    height: 44px;
    line-height: 44px;
    scroll-snap-align: center;
    font-size: 22px;
    font-weight: 500;
    color: #aaa;
    transition: color 120ms linear;
}

/* Only the row under the band is full strength, which is what says what is selected without
   anybody having to read a label. */
.tsaSpinRow.tsaSpinOn { color: #222; font-weight: 600; }

/* (132 - 44) / 2 = 44. MUST track the column height: these pad rows are the only reason the
   FIRST and LAST value can reach the centre band, and getting them wrong is the classic way a
   hand-rolled wheel ships looking fine and refusing to select its own ends. Asserted by
   testing/timesheet-sheet-test.js. */
.tsaSpinPad { height: 44px; }

.tsaSpinColon {
    align-self: center;
    font-size: 22px;
    font-weight: 600;
    color: #222;
    padding: 0 2px;
}

/* AM/PM AS ITS OWN KNOB. Ben, 2026-09-22: "The 5 am, though, is weird. Why wouldn't you put
   am/pm as a third knob, but then have it not be changeable because these are only am times? ...
   4 am:17 is just weird." The period used to ride along in the hour row, which put the colon
   after it and made the whole thing read "4 AM:17". Lifted out, the colon sits between the hour
   and the minute where it belongs, and the period reads as what it is. */
.tsaSpinColAp {
    min-width: 54px;
    margin-left: 4px;
}

/* LOCKED, when the window is all one period - which is nearly always, since a window is the
   recorded time plus or minus a couple of hours. A single-value wheel that still scrolled and
   snapped would invite a flick that cannot do anything, so it stops being a wheel: no drum fade
   reaching it, full-strength text, and the row is simply the answer sitting in the band.
   JS also sets overflow-y: hidden on it, because a locked control should not scroll at all. */
.tsaSpinColAp.tsaSpinLocked { pointer-events: none; }
.tsaSpinColAp.tsaSpinLocked .tsaSpinRow { color: #222; font-weight: 600; }

/* The selection band, drawn once across both columns and never intercepting a touch. */
.tsaSpinBand {
    position: absolute;
    top: 44px; left: 0; right: 0; height: 44px;
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
    background: rgba(0,150,214,.05);
    pointer-events: none;
}

/* Says in words what the wheel is about to ask for, or why it cannot. A wheel that lets
   somebody stop somewhere and then leaves Send dead with no explanation is indistinguishable
   from broken, and that is how a cleaner goes back to email. */
.tsaSpinRead {
    font-size: 12px;
    color: #2E7D32;
    margin: 4px 0 2px;
    min-height: 16px;
    text-align: center;
}
.tsaSpinRead.tsaSpinBad { color: #D93025; }

/* ---- Paying for the half sheet ------------------------------------------- */

/* Three small trims, all of them needed for the wheel, the note and the buttons to coexist in
   half a screen. Measured, not guessed: without them the form wanted about 470px and the
   MANDATORY note was the thing pushed off the bottom.

   THE SUBTITLE GOES. "Request a time entry adjustment" restated the title above it and told
   them what they had just tapped. The line directly under it already says the one fact that
   matters, "Clocked out: 5:15 AM", so this was the cheapest 18px in the sheet. */
#tsaSheetSub { display: none; }

/* TALL ENOUGH FOR THE SECOND LINE. Ben, 2026-09-22: "the text box below looks like it needs to
   be just a little bit larger because it's cutting off the second line." It was trimmed to 44px
   to buy height for the wheel, and 44px is two lines of text with no room for the descenders or
   the padding, so the placeholder ("What happened? e.g. forgot to clock out at the second
   house") wrapped and had its second line clipped. 60px holds two full lines; it still does not
   reserve a third empty one before anybody has typed. Still required, and the typing is the
   point - Ben, 2026-09-21: "having them type in the note (making them do it) is the friction we
   want." The sheet's height floor went up by the same amount to pay for it. */
#tsaSheet #tsaNote {
    min-height: 60px;
    height: 60px;
}

/* Keeps a 44px tap target on both buttons while giving back the surplus padding. */
#tsaSheetFoot {
    padding-top: 8px;
    padding-bottom: 8px;
}
#tsaSheetFoot button { min-height: 44px; }

/* A REFUSAL REPLACES THE FORM, it does not sit on top of one. Everything else in the
   body is hidden when this shows, so there is no empty list box, no notes field and no
   Send button on a screen where there is nothing to send. */
#tsaRefused {
    padding: 14px;
    font-size: 14px;
    line-height: 1.45;
    color: #6b5200;
    background: #FFF8E1;
    border: 1px solid #F3D98B;
    border-radius: 4px;
    margin-bottom: 14px;
}

#tsaHint { font-size: 11px; color: #888; margin: 6px 0 8px; }

#tsaNote {
    width: 100%;
    min-height: 54px;
    max-height: 90px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 8px;
    font-size: 14px;
    color: #333;
    resize: none;
    margin-bottom: 12px;
}

/* ---- Actions. Cancel rightmost, per the house rule. ---------------------- */

#tsaSheetFoot {
    display: flex;
    justify-content: flex-end;
    gap: 15px;
    padding: 12px 16px;
    border-top: 1px solid #e0e0e0;
    /* OPAQUE, deliberately. It had no background at all, so when the body overflowed - which it
       did, see #tsaSheetBody - the wheel's bottom row and the green read-out showed THROUGH the
       button row, and Send sat on top of the note it was refusing to accept. The body scrolls
       now, so nothing should reach here; a solid background means that if anything ever does, it
       is hidden rather than interleaved with the buttons. Light mode per house rule. */
    background: #fff;
}

#tsaSheetFoot button {
    border-radius: 4px;
    padding: 9px 16px;
    font-size: 14px;
    cursor: pointer;
}

#tsaSend { background: #0096D6; border: 1px solid #0096D6; color: #fff; font-weight: 600; }
#tsaSend[disabled] { background: #b9dff0; border-color: #b9dff0; cursor: default; }
#tsaCancel { background: #fff; border: 1px solid #e0e0e0; color: #555; }

/* A NOTICE, NOT A REFUSAL. Blue rather than amber, and the form stays fully usable beneath it:
   a closed payroll week changes how the office fixes the time, not whether the cleaner may ask.
   The refusal box above is amber and replaces the form; these two must never look alike. */
#tsaNotice {
    background: #E8F5FC;
    border: 1px solid #BFE2F9;
    color: #0077A8;
    border-radius: 4px;
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.45;
    margin-bottom: 10px;
}

/* A CLOCK TIME ON THE CLEANER'S OWN TIMESHEET, tappable so they can ask the office to correct
   it. This is the ONLY way into a time adjustment: the clock bars used to carry one too, but
   they could only ever offer today, so a mistake noticed the next morning had no door.

   House nameplate treatment: colour inherited, dotted underline, so it offers itself without
   turning a table of times into a wall of buttons. The rules live under .tsaTimeMark below,
   which is the same element wearing its outcome state as well.

   `.tsaTimeAsked` is the instant mark applied client-side after a submit, so the page agrees
   with what somebody just did without waiting for a reload. It matches the amber the server
   renders on the next load. */
.tsaTimeAsked {
    border-bottom: 2px solid #E8B10A !important;
    cursor: default;
}

/* WHAT HAPPENED TO WHAT THEY ASKED, on the cleaner's own timesheet.

   The office is forced to type a reason when it declines, on the stated grounds that the app
   is the only place the employee ever learns the outcome. Until this existed that reason
   reached no screen at all: they saw an unchanged time, were told nothing, and found out when
   the check was short.

   SPLIT IN TWO ON PURPOSE (Ben's pick, option 3 of the prototype, 2026-09-20). These clock
   columns are a hard 70px that must not wrap, so anything carrying WORDS inside them either
   clipped the time - measured at 104px of content in 70px of space, which is how Ben found it
   on his phone - or, stacked underneath, made every marked row taller than its neighbours and
   stopped a column of times reading as a column.

   So the time carries only a COLOUR, which costs the layout nothing, and the words live in a
   strip above the table where a decline cannot be scrolled past. */
.tsaTimeMark[data-entry] {
    cursor: pointer;
    border-bottom: 1px dotted currentColor;
}

.tsaTimeMark[data-entry]:hover {
    color: #0096D6;
}

/* Amber waiting, green done, red refused, blue paid elsewhere. The same four colours the
   strip uses, so a line and a row read as the same fact.

   DOUBLED-UP SELECTORS ON PURPOSE. A clock that is still askable keeps its data-entry, so
   `.tsaTimeMark[data-entry]` above matches it at specificity (0,2,0) and its `border-bottom`
   SHORTHAND sets the colour too. A single-class rule here would lose that fight and a
   declined time rendered plain grey - which it did, until this was measured rather than
   eyeballed. Matching the specificity and coming later wins it. */
.tsaTimeMark.tsaTimeMark-asked,
.tsaTimeMark.tsaTimeMark-fixed,
.tsaTimeMark.tsaTimeMark-declined,
.tsaTimeMark.tsaTimeMark-paid,
.tsaTimeMark.tsaTimeMark-sorted {
    border-bottom-width: 2px;
    border-bottom-style: solid;
}

.tsaTimeMark.tsaTimeMark-asked    { border-bottom-color: #E8B10A; }
.tsaTimeMark.tsaTimeMark-fixed    { border-bottom-color: #43A047; }
.tsaTimeMark.tsaTimeMark-declined { border-bottom-color: #D93025; }
.tsaTimeMark.tsaTimeMark-paid     { border-bottom-color: #0096D6; }
/* THE FOOTER CLOCK TIME IS TAPPABLE, as the short path into a correction: the clock-in while they
   are on the clock, the clock-out once they are off it. Dotted underline rather than a button: the
   bar is a status line first and a shortcut second, and a button there would compete with Clock
   Out right beside it.
   The tap target is the whole status element, which already spans the bar's height, so there is
   no need to pad it up to 44px. */
/* THE DOTS GO ON THE WORDS, NOT ON THE ELEMENT. Rule written 2026-09-17, before this was first
   built: "the dots must not run under the clock icon or the &nbsp;&nbsp; gap after it." The first
   version put border-bottom on #siteFooterClockStatus itself, which is a block spanning the whole
   status area, so the line ran the full width - under the icon, through the gap, stopping short of
   the Clock in button, with a pixel of lift at each end where it met them. The tap target is still
   the whole element; only the underline is scoped. */
#siteFooterClockStatus.tsaBarTappable { cursor: pointer; }
#siteFooterClockStatus.tsaBarTappable .tsaBarTapText {
    border-bottom: 1px dotted rgba(255, 255, 255, .65);
}

/* The clock-out time appended to "Clocked out", which otherwise carries no time for them to
   recognize as wrong. Slightly stronger than the label beside it because the TIME is the thing
   being offered, and the word "Clocked out" is just where it happened. */
#siteFooterClockStatus .tsaBarOutTime {
    font-weight: 600;
}

/* SORTED, BUT NOT PAID. Deliberately not the house blue: blue is the colour this table uses
   for money having moved, and a settle with no PayrollAdjustment behind it moved none. A
   neutral blue-grey reads as "the office handled this administratively", which is what
   happened, without the row asserting a payment that does not exist. */
.tsaTimeMark.tsaTimeMark-sorted   { border-bottom-color: #78909C; }

/* THE STRIP. Only requests the office has ANSWERED, and it renders nothing at all when there
   are none, which is most weeks. A pending one would be a row saying nothing; the amber
   underline on the time covers that. */
.tsaStrip {
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 12px;
    background: #fff;
}

/* NOT CLICKABLE. There is nothing behind a tap: an approval has nothing to explain, and a
   decline's reason is already printed in the row. align-items: flex-start so the dot lines up
   with the first line rather than floating in the middle of a three-line row. */
.tsaStripRow {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 9px 10px;
    font-size: 12px;
    line-height: 1.45;
    border-bottom: 1px solid #f0f0f0;
    color: #555;
}

.tsaStripRow:last-child { border-bottom: none; }

.tsaStripDot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: none;
    margin-top: 5px;
}

.tsaStripDot-fixed    { background: #43A047; }
.tsaStripDot-declined { background: #D93025; }
.tsaStripDot-paid     { background: #0096D6; }
.tsaStripDot-sorted   { background: #78909C; }   /* settled with no payment - see tsaTimeMark-sorted */

.tsaStripText { flex: 1; }
.tsaStripText b { font-weight: 600; color: #333; }

/* The office's own words, so they read as a quote rather than as the app talking. Only ever
   present on a decline. */
.tsaStripWhy {
    display: block;
    margin-top: 3px;
    padding-left: 9px;
    border-left: 2px solid #F1B0AB;
    color: #666;
    font-style: italic;
}

/* THE ONE-TIME INTRO CALLOUT, pinned above the blue footer.

   Ben, 2026-09-21: "i prefer the bottom nudge and maybe just show it once." Bottom, rather than
   a card at the top of the page: that is a separate REPEATING mechanism (Settings > Cleaner
   Nudges) which is now switched off. 54px clears the 46px footer, the same offset the original
   callout prototype established.

   Shown once per person ever, and only when the page actually has a tappable time. */
.tsaIntro {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: 54px;
    z-index: 4;
    background: #fff;
    border: 1px solid #BFE2F9;
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
    padding: 12px 14px 14px;
    max-width: 460px;
    margin: 0 auto;
}

.tsaIntroClose {
    position: absolute;
    top: 6px;
    right: 8px;
    padding: 4px 6px;
    color: #999;
    cursor: pointer;
    font-size: 14px;
}

.tsaIntroClose:active { color: #333; }

.tsaIntroBadge {
    display: inline-block;
    background: #0096D6;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .08em;
    padding: 2px 6px;
    border-radius: 3px;
    margin-bottom: 6px;
}

.tsaIntroTitle {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 2px;
}

.tsaIntroBody {
    font-size: 13px;
    color: #555;
    line-height: 1.45;
    padding-right: 14px;
}

/* Full width, because on a phone this is the one thing to press and a small link is a miss. */
.tsaIntroGotIt {
    margin-top: 10px;
    background: #0096D6;
    color: #fff;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    padding: 9px;
    border-radius: 4px;
    cursor: pointer;
}

.tsaIntroGotIt:active { background: #0077A8; }

/* THE NOTE IS REQUIRED NOW, so an empty one gets marked rather than silently refused.
   Ben, 2026-09-21: "having them type in the note (making them do it) is the friction we want." */
#tsaNote.tsaNoteMissing {
    border-color: #D93025;
    background: #fdf3f3;
}

/* "Tap a time to ask the office to correct it." Permanent, quiet, above the timesheet table.
   Nothing on that page previously said the underlined times were tappable, which made the
   dotted underline an affordance only to somebody who already knew. */
.tsaHowTo {
    margin: 0 0 12px;
    font-size: 13px;
    color: #666;
    line-height: 1.45;
}

/* Shows the reader the exact thing they are looking for, by looking like it. */
.tsaHowTo .tsaHowToEg {
    border-bottom: 2px solid #E8B10A;
    color: #333;
    font-weight: 600;
}