/* start::sidebar css */
.iq-sidebar {
    width: 190px;
}
.iq-sidebar-logo img {
    height: 30px;
}
/* Sidebar logo: the team's uploaded logo or the ServaSW default, scaled to
   fit whatever its shape without stretching */
.iq-sidebar-logo img.brand-logo {
    height: auto;
    width: auto;
    max-height: 40px;
    max-width: 140px;
    object-fit: contain;
}
.iq-sidebar-logo img.brand-icon {
    display: none;
}
/* Middle tier (768-1299px, e.g. half-screen desktop, tablet): instead of
   hiding the menu entirely, keep an 80px icon rail; the menu button
   (body.sidebar-main) opens the full menu over the content. Under 768px the
   menu stays hidden behind the button; 1300px+ is unchanged. */
@media (min-width: 768px) and (max-width: 1299px) {
    body:not(.sidebar-main) .iq-sidebar {
        left: 0;
        width: 80px;
    }
    body:not(.sidebar-main) .iq-sidebar .iq-sidebar-menu .side-menu li a span,
    body:not(.sidebar-main) .iq-sidebar .iq-sidebar-menu .side-menu li a .iq-arrow-right,
    body:not(.sidebar-main) .iq-sidebar .iq-sidebar-menu .side-menu li a .badge,
    body:not(.sidebar-main) .iq-sidebar .sidebar-bottom,
    body:not(.sidebar-main) .iq-sidebar-logo a span,
    body:not(.sidebar-main) .side-menu-bt-sidebar-1 {
        display: none;
    }
    body:not(.sidebar-main) .iq-sidebar .submenu li a {
        font-size: 0;
    }
    body:not(.sidebar-main) .iq-sidebar-menu .side-menu li a i {
        margin: 0 auto;
        text-align: center;
    }
    body:not(.sidebar-main) .iq-sidebar-logo .has-default-logo img.brand-logo,
    body:not(.sidebar-main) .iq-sidebar-logo .team-logo-wide img.brand-logo {
        display: none !important;
    }
    body:not(.sidebar-main) .iq-sidebar-logo .has-default-logo img.brand-icon {
        display: block;
        height: 40px;
        width: 40px;
    }
    body:not(.sidebar-main) .iq-sidebar-logo .has-team-logo img.brand-logo {
        max-width: 50px;
    }
    body:not(.sidebar-main) .iq-sidebar-logo .team-logo-wide .brand-initial {
        display: flex;
    }
    .content-page {
        margin-left: 80px;
    }
    .iq-top-navbar {
        left: 80px;
        width: calc(100% - 80px);
    }
    /* the theme makes the bar 100% wide when the menu opens, which pushed the
       picture/initials and name off the right edge; keep it the same */
    body.sidebar-main .iq-top-navbar {
        width: calc(100% - 80px);
    }
    /* the rail already shows the logo */
    .iq-navbar-logo {
        display: none !important;
    }
}
/* Under 1300px the opened menu (body.sidebar-main) slides over the page;
   slide it in quicker than the theme's 0.6s. Esc closes it (layouts/master). */
@media (max-width: 1299px) {
    .iq-sidebar {
        transition: left 0.2s ease-out, width 0.2s ease-out;
    }
}
/* Top-bar logo (narrow windows, sidebar hidden) */
.iq-navbar-logo img.brand-logo {
    height: auto;
    width: auto;
    max-height: 36px;
    max-width: 150px;
    object-fit: contain;
}
/* Uploaded logos are often dark on transparent; a light backing keeps any
   logo readable on the dark sidebar */
.iq-sidebar-logo .has-team-logo img.brand-logo {
    background: #fff;
    padding: 4px 8px;
    border-radius: 6px;
}
@media (min-width: 1300px) {
    /* Collapsed (80px) sidebar: the ServaSW circle icon instead of the wide logo */
    body.sidebar-main .iq-sidebar-logo .has-default-logo img.brand-logo {
        display: none !important;
    }
    body.sidebar-main .iq-sidebar-logo .has-default-logo img.brand-icon {
        display: block;
        height: 40px;
        width: 40px;
    }
    body.sidebar-main .iq-sidebar-logo .has-team-logo img.brand-logo {
        max-width: 50px;
    }
    /* A wide uploaded logo is unreadable at icon width: show the team's initial */
    body.sidebar-main .iq-sidebar-logo .team-logo-wide img.brand-logo {
        display: none;
    }
    body.sidebar-main .iq-sidebar-logo .team-logo-wide .brand-initial {
        display: flex;
    }
}
.iq-sidebar-logo .brand-initial {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: #fff;
    color: #1e2a4a;
    font-size: 20px;
    font-weight: 700;
}
.iq-sidebar-logo a span {
    font-size: 16px;
}
.iq-sidebar-menu .side-menu li a {
    font-size: 12px;
}
.iq-sidebar-menu .side-menu li li a {
    font-size: 11px;
}
.schedule_sidebar {
    flex: 0 0 17.66667%;
    max-width: 14.66667%;
}
.card.schedule_page_card .calender {
    align-items: center;
    width: 100%;
    justify-content: space-between;
}
.schedule_sidebar .work_order_plaque {
    width: 165px !important;
}
.col, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-auto, .col-lg, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-auto, .col-md, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md-auto, .col-sm, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-auto {    
    padding-right: 10px;
    padding-left: 10px;
}

.container-fluid, .container-lg, .container-md, .container-sm, .container-xl {
    padding-right:3px;
    padding-left:3px;
}

.iq-sidebar-menu .side-menu li a i {
    font-size: 12px;
}
/* Phones: bigger menu text, and the small Finance sub-item icons the size of the others */
@media (max-width: 575px) {
    .iq-sidebar-menu .side-menu li a { font-size: 15px; }
    .iq-sidebar-menu .side-menu li li a { font-size: 14px; }
    .iq-sidebar-menu .side-menu li li a > i > svg { width: 18px; height: 18px; }
}
/* end::sidebar css */
/* .auto-save-date-note {
    display: none;
} */


.panel-default {
    border-color: #ddd;
}

.panel {
    margin-bottom: 20px;
    background-color: #fff;
    border: 1px solid transparent;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}

.panel-default>.panel-heading {
    color: #333;
    background-color: #f5f5f5;
    border-color: #ddd;
}

.panel-heading {
    padding: 10px 15px;
    border-bottom: 1px solid transparent;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

.panel-body {
    padding: 15px;
}

.panel-body form .form-group {
    display: flex;
}
.service-total {
    display: flex;
    justify-content: space-between;
}

/* .form-horizontal .form-group {
    margin-right: -15px;
    margin-left: -15px;
} */

.form-group {
    margin-bottom: 15px;
}

.form-horizontal .control-label {
    padding-top: 7px;
    margin-bottom: 0;
    text-align: right;
}

.form-control {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

.edit_div {
    position: absolute;
    right: 5px;
    z-index: 99;
    top: 5px;
}

a.edit_btn svg {
    width: 35px;
    color: white;
}

/* service-pipeline-CSS_START */
.sale_pipeline h1 {
    font-size: 40px;
    font-weight: 500;
}

.sale_pipeline {
    padding: 20px;
}

.sale_pipeline .row {
    padding: 20px 0;
}

.sale_pipeline h5 {
    color: #fff;
    font-size: 18px;
    background: #0c2556;
    padding: 10px 3px;
    text-align: center;
    border-radius: 5px;
    font-weight: 500;
}

.create_new_task .col-sm-12,
.col-sm-6 {
    padding: 0;
}

/* Sharp_Mower-CSS_START */
.Sharp_Mower .img-flex {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.Sharp_Mower .jumbotron {
    padding: 25px;
}

.Sharp_Mower a.btn.btn-primary {
    margin: 11px 0px 0 0;
}

/*19-9-2014- work-order*/
.work_order_form label {
    padding-top: 15px;
}

.work_order_form .form-group {
    margin-bottom: 0px;
}

.work_order_form input.btn.btn-primary {
    margin: 12px 0 15px;
}

.work_order_form .check_tick {
    padding-top: 8px;
}

/*end-work-order-css*/


/* New_Work_Order-CSS_START */
.New_Work_Order .card {
    padding: 20px 20px 0;
}

.New_Work_Order .card-header {
    padding: 0;
}

.Work_order .form-horizontal .form-group {
    margin-right: 0px;
    margin-left: 0;
    padding: 0
}

#datatable-1_length label {
    padding: 0;
    font-weight: 500;
}

table.dataTable>thead .sorting:after {
    right: 0;
    top: 17px;
}

.table thead th {
    vertical-align: top;
}

table.dataTable>thead .sorting:before {
    top: 17px;
}

.btn {
    padding: 5px 20px;
}

.Work_order label {
    font-weight: 500;
}

.form-inline {
    align-items: end;
}

.row {
    margin: 0 !important;
    padding: 0 8px;
}

.modal-dialog {
    max-width: 620px;
}

.modal.show .modal-dialog h4.modal-title {
    padding: 10px 25px 0;
}

.modal.show .modal-dialog label {
    padding-top: 20px;
}

button.close {
    margin: 10px;
}

.Work_Order_Analyze .card-header {
    padding: 20px 0 0;
}

.Work_order .col-md-2 {
    padding: 0;
}

.submit_btn_align {
    text-align: end;
}

.form-group.check_boxx {
    display: flex;
    padding: 0 15px;
    column-gap: 10px;
    align-items: center;
}

.page-item.disabled .page-link {
    color: #fff;
    background-color: #0c2556;
}

.text-info {
    font-size: 28px;
    padding: 20px;
}

button.btn.btn-primary {
    margin-left: 10px;
}

.text-success {
    font-size: 20px;
}

.text-danger {
    font-size: 20px;
}


.Add_Customers .form-horizontal .form-group label {
    padding-top: 20px;
}

.Add_Customers .form-group {
    margin: 0;
}

.Add_Customers input.btn.btn-primary {
    margin-top: 14px;
}

.Add_Customers .check_tick input {
    margin-top: 17px;
}

.Add_Customers .card {
    padding: 20px;
}

.Add_Customers .card-header.d-flex.justify-content-between {
    padding: 0;
}

#newCustomerModal .modal-body .form-group.check_boxx .check_tick input {
    margin-top: 15px;
}

.list {
    padding: 20px 0;
}

.form-inline {
    align-items: end;
    padding: 15px 0px;
}

.panel-body form .form-group {
    display: flex;
}

.part_section {
    margin: 0 auto;
    padding: 20px;
}

.add_btnn {
    text-align: end;
    padding: 0;
}

.payroll_report .card {
    padding: 20px;
}

.payroll_report button.btn.btn-primary {
    margin: 0;
}

.payroll_report h1.text-info {
    padding: 0;
}

.payroll_report h3.text-primary {
    font-size: 24px;
    padding: 10px 0;
}

.payroll_report h4.text-secondary {
    font-size: 18px;
    padding: 0px 0 20px;
}

.payroll_report label {
    color: #213446;
    font-weight: 500;
}

.card.ledger_sect {
    display: -webkit-box;
    padding: 20px;
}

.timeframe .alert.alert-info {
    margin: 0 15px 10px;
}

.timeframe h4.text-secondary {
    padding: 15px;
}

.timeframe .alert.alert-info h3 {
    font-size: 26px;
}

.timeframe .text-info small {
    /* font-size: 20px; */
    font-weight: 600;
}

.timeframe h1 {
    font-size: 35px;
}

.part_head_sec {
    padding: 20px;
}

.add_team {
    text-align: end;
    padding: 0;
}

.remove_space {
    padding: 0;
}

.zip_code .form-group {
    margin: 0;
}

.zip_code label {
    padding: 0 !important;
    margin-top: 13px;
}

.zip_code input.btn.btn-primary {
    margin-top: 14px;
}

/* .zip_code .card {
    padding: 20px 0;
} */

.login_page {
    padding: 40px 20px;
}

.auth-logo img {
    height: 100px;
}
/* ServaSW logo on the login/sign-up pages: wide, so size by width */
.auth-logo img.brand-logo {
    height: auto;
    width: 100%;
    max-width: 260px;
}

.login_page label {
    color: #213446;
    font-weight: 600;
}

.login_page .font-size,
.register_page .font-size {
    font-size: 15px;
}

/* reset-Page-CSS */
.reset_passwrd .form-group {
    margin: 0 0 10px;
    padding: 0;
}

.reset_passwrd button.btn.btn-primary.btn-block {
    margin: 0;
}

.reset_passwrd h3.text-center {
    margin: 0 !important;
}


/* work-order */
.Work_order .card-body {
    padding: 0px;
}

.Work_order h2 {
    font-size: 26px;
}

.Work_order h3.schedule_page_text {
    font-size: 14px;
}

.Work_order .scheduleBox h4 {
    font-size: 15px;
    text-align: center;
}

.Work_order .scheduleBox {
    min-height: auto;
    margin: 0px;
    padding: 10px 0;
}

.Work_order .scheduleHeader {
    padding: 13px 0 1px;
}

.Work_order .scheduleBox {
    padding: 20px 0;
}

.Work_order .btn-info.btn-xs {
    padding: 4px 12px;
    margin-left: 10px;
}

/* form.unassign_box {
    margin-top: 30px;
} */

form.unassign_box select {
    width: 130px;
    padding: 5px;
}

/* .Work_order h3 {
    font-size: 14px;
} */

.Work_order textarea {
    overflow: auto;
    resize: vertical;
    font-size: 11px;
}

.Work_order label.search_work_order {
    text-align: end;
}

.leftBar table {
    width: 100%;
}

/* .scheduleBox .btn {
    padding: 0px 8px;
} */

.scheduleHeader textarea {
    float: unset !important;
    /* width: 25%; */
}

/* .scheduleHeader form.unassign_box {
    margin-top: 20px;
} */

.content-page .Work_order .jumbotron {
    padding: 20px;
    justify-content: space-between;
    display: flex;
    background-color: #eee;
}

.content-page .Work_order .scheduleBox h4 {
    font-size: 15px;
    text-align: left;
    /* flex-direction: column-reverse; */
    display: flex;
    gap: 6px;
}

.content-page .Work_order .scheduleBox .lock_status {
    padding: 2px 4px;
    height: max-content;
    font-size: 8px;
}

.content-page .Work_order .scheduleBox .modal-title {
    font-size: 1.563rem;
    font-weight: 600;
    text-align: center;
    flex-direction: column-reverse;
    display: flex;
    gap: 6px;
}

.content-page .Work_order .btn-info.btn-xs {
    padding: 1px 3px;
    margin-left: 10px;
    /* float: right; */
}

.tab-content .calender {
    justify-content: end;
    display: flex;
    align-items: center;
}

/* .Work_order .card .card-header {
    margin: 0 auto;
} */
/* .content-page .Work_order .card-body .scheduleBox {
    margin-bottom: 50px !important;
} */

.Work_order .form-horizontal .form-group {
    align-items: center;
}

.Work_order label {
    margin: 0px;
}

.Work_Order_Analyze .form-inline .form-control {
    width: 100%;
}

/* custom css */
.part_section .form-horizontal .control-label {
    text-align: left;
}

.part_section form .add_btnn {
    padding: 15px;
}

.scheduleWorkorder.New_Work_Order .card-header {
    padding: 20px 15px 0px 6px;
}

.content-page .Work_order .jumbotron {
    height: 80px;
}

.Work_order .jumbotron h2 {
    overflow-y: auto;
}

.Work_order .card .card-header {
    padding: 0px;
}

table.dataTable>thead .sorting:after {
    right: 2px !important;
}

table.dataTable>thead .sorting:before {
    right: 15px;
}

.work_order_analyze .card-body {
    padding: 10px;
}

.table-responsive .dataTables_info {
    padding: 20px 0 20px 0px;
}

.table-responsive .dataTables_paginate .pagination {
    padding: 20px 0px 20px 0;
}

.form-inline {
    justify-content: end;
}

.table-responsive form.delete {
    margin: 0px;
}

.updateStopOrdersBTN {
    margin: 0px 20px;
}



.listing_details {
    padding: 25px;
}

.listing_details h3 {
    color: #fff !important;
    background-color: #f42b3d !important;
    width: max-content;
    padding: 5px;
    font-size: 20px;
    border-radius: 6px;
    margin-bottom: 10px;
}

.work-order-modal .modal .close {
    margin: 0 0 0 auto;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #eef2f7;
    color: #495057;
    font-size: 22px;
    line-height: 32px;
    opacity: 1;
}
.work-order-modal .modal .close:hover { background: #e2e8f0; color: #212529; }

.work-order-modal .modal-header a.btn.btn-lg,
.work-order-modal .modal-header a.btn.btn-lg .modal-title {
    color: #0d6efd;
}

.work-order-modal h4.modal-title {
    padding: 0px;
}

.Work_order .scheduleBox {
    padding: 20px 0;
    /* height: 160px; */
    overflow-x: scroll;
    /* flex-direction: column; */
    /* align-items: center; */
    scrollbar-width: none;
}

/* .Work_order .scheduleBox::-webkit-scrollbar {
    display: none;
} */

.work_order_plaque {
    margin: 5px 0px 0px 0px !important;
    height: 45px !important;
    width: 140px !important;
    place-content: center;
}

.leftbar_plaque .work_order_plaque {
    margin: 10px 0;
    font-size: 11px;
    padding: 2px;
}

.team-edit-form div.form-group label {
    text-align: end;
}

.leftbar_plaque {
    width: 100%;
}


/* Billing page  */
.subscription-box {
    padding: 20px;
    text-align: center;
    width: 80%;
    margin: 0 auto;
}

.subscription-box h3 {
    color: blue;
    font-size: 30px;
    width: 80%;
    padding-bottom: 35px;
    text-align: left;
}

.subscription-box .row {
    padding: 0;
}

.subscription-details {
    text-align: left;
    padding: 0;
}

.subscription-details {
    margin-bottom: 20px;
}

.subscription-details p {
    margin: 0;
}

.subscription-box .btn-group {
    display: flex;
    justify-content: center;
    gap: 10px;
    width: 35%;
}

.subscription-details h5 {
    padding-bottom: 15px;
}

.subscription-details p {
    margin: 0;
    line-height: 30px;
}

.subscription-box .btn-cancel {
    color: red;
    border-color: red;
}

.subscription-box .btn-cancel:hover {
    background-color: #ffebeb;
}

.subscription-box .bg-secondary {
    color: black !important;
}

.error {
    color: red;
    font-size: 0.9em;
}



/* Tenanat Plans form CSS  */

#tenant-plans-form .feature-item {
    background-color: #f0f0f0;
    padding: 5px 10px;
    border-radius: 15px;
    margin-right: 10px;
    margin-bottom: 10px;
    position: relative;
    display: inline-flex;
    align-items: center;
    max-width: 200px;
}

#tenant-plans-form .feature-item .feature-text {
    display: inline-block;
    margin-right: 10px;
}

#tenant-plans-form .remove-feature-btn {
    background-color: transparent;
    border: none;
    font-size: 14px;
    color: red;
    position: absolute;
    top: -13px;
    right: -25px;
    cursor: pointer;
}

#tenant-plans-form .remove-feature-btn:hover {
    background: transparent;
}

.finance-product-edit label.control-label,
.finance-service-edit label.control-label {
    padding-bottom: 10px;
}





.zip-input-bg {
    background: lightgray;
}

div.zip-update-buttons {
    width: 30px;
}

.zip_code .area-check-box {
    display: flex;
    align-items: center;
    gap: 10px;
}

.zip_code #active_status {
    height: 15px;
    width: 15px;
    margin-top: 5px;
}

.area-color-activity {
    gap: 35px;
    margin-top: 15px;
}

.area-zone-table .area-zone-td {
    width: calc(100% / 3);
}

.add_part_modal .modal.show .modal-dialog label {
    padding-top: 0 !important;
}

/* .add_part_modal input {
    margin-left: 15px;
} */
.add_part_modal .control-label {
    padding: 0 !important;
}

.add_part_modal .form-horizontal .control-label {
    padding-top: 7px;
    margin-bottom: 0;
    text-align: left;
}

.input-group {
    align-items: center;
}

span.input-group-addon {
    position: absolute;
    left: -16px;
}

.panel-body.add_part_modal {
    padding-bottom: 0;
}

.panel-body form .form-group {
    display: flex;
    align-items: center;
}

.labour_part {
    display: flex;
    padding: 21px;
    background-color: #3cb72c !important;
}

.gap-15 {
    gap: 15px;
}

ul#parts-list {
    padding: 0;
}
.table_user_role_form {
    display: inline-table;
}
br.mobile-break {
    display: none;
}

.invoice-page-container .invoice-table {
    border-width: 1px;
    border-spacing: 2px;
    border-style: outset;
    border-color: gray;
    border-collapse: collapse;
    background-color: white;
}

.invoice-page-container .invoice-table th {
    border-width: 1px;
    border-style: inset;
    border-color: black;
    background-color: white;
    padding: 8px;
    /* -moz-border-radius: ; */
}

.invoice-page-container .invoice-table td {
    border-width: 1px;
    padding: 8px;
    border-style: inset;
    border-color: black;
    background-color: white;
    /* -moz-border-radius: ; */
}

.invoice-page-container .twoBtn {
    position: relative;
}

.invoice-page-container .twoBtn form:first-child {
    position: absolute;
    left: 50%;
    transform: translate(-100%, 0px);
    top: 20px;
}

.invoice-page-container .twoBtn form:last-child {
    position: absolute;
    left: 50%;
    transform: translate(10px, 0px);
    top: 20px;
}

.invoice-page-container .invoice_title {
    margin-bottom: 10px;
}

.invoice-page-container .table_scroll {
    overflow: scroll;
}

/* Warranty text: full width, own line, and clearance from the page footer
   (Privacy Policy / Terms of Use links) so it never overlaps them. KAN-245 */
.invoice-warranty-text {
    width: 100%;
    margin-top: 24px;
    margin-bottom: 24px;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.invoice-page-container,
.invoice-content-page {
    padding-bottom: 48px;
}

.work_order_plaque .plaque_copy_icon{
    font-size:14px;
    color:red;
}

.workOrder_smallModal .work_order_plaque .plaque_copy_icon{
    font-size:14px;
}

.truck-form-calendar {
    display: flex;
    /* width: 50%; */
    justify-content: end;
}
/* 06-11-24 */
#search_customer_section .form-group {
    display: flex;
    margin-bottom: 20px;
}
div#search_customer_section {
    padding: 10px;
}
div#search_customer_section label {
    font-size: 15px;
    padding-right: 8px;
}
div#search_customer_section label {
    font-size: 15px;
    padding-right: 6px;
    font-weight: 600;
}
div#search_customer_section hr {
    margin-bottom: 2rem;
}



#switch_toggle .switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 26px;
}

#switch_toggle .switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

#switch_toggle .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.4s;
    border-radius: 20px;
}

#switch_toggle .slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.4s;
    border-radius: 50%;
}

#switch_toggle input:checked + .slider {
    background-color: #3378ff;
}

#switch_toggle input:checked + .slider:before {
    transform: translateX(24px);
}

#switch_toggle .label-toggle {
    margin-left: 10px;
    font-size: 16px;
}

ul#roleTabs a {
    font-weight: 600 !important;
}

.duplicate-customer-buttons{
    display: flex;
    justify-content: end;
    gap: 5px;
}

.labour_part .common-div{
    display: flex;
    justify-content: center;
    padding: 3px;
}

.iti.iti--allow-dropdown.iti--separate-dial-code {
    width: 100%;
}

#timeframes-list .timeframe {
    align-items: end;
}
#timeframes-container h6 {
    padding: 0 13px 10px;
}
button#add-timeframe {
    margin-left: 15px;
}

.truck_schedule_row {
    white-space: nowrap;
    overflow-x: scroll;
    overflow-y: hidden;
    display: flex;
    gap: 140px;
}

.truck_schedule_cols {
    max-width: 33%;
    width: 354px !important;
}

/* On narrow screens max-width:33% squeezed the column below its 354px content,
   so the stop content overflowed the <li> and the completed/shop-work
   background only covered part of the box. KAN-254 */
@media (max-width: 991px) {
    .truck_schedule_cols {
        max-width: none;
        width: 320px !important;
    }
}

.truck_schedule_cols .list-group-item {
    display: block;
    width: 100%;
    overflow-wrap: break-word;
}

.truck_schedule_cols .list-group-item.stop-completed {
    background-color: lightyellow !important;
}

.truck_schedule_cols .list-group-item.stop-shop-work {
    background-color: lightblue !important;
}


/* Style for the toggle switch */
.customer-settings, .customer-duplicate-settings  {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 60px;
    height: 30px;
    background: #ccc;
    border-radius: 30px;
    position: relative;
    transition: all 0.3s;
}

.customer-settings:checked ,  .customer-duplicate-settings:checked {
    background: #4CAF50;
}

.customer-settings:checked::before ,  .customer-duplicate-settings:checked::before {
    transform: translateX(30px);
}

.customer-settings::before ,  .customer-duplicate-settings::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: white;
    transition: all 0.3s;
}

.customer-field-div{
    display: flex;
    align-items: center;
    gap: 10px;
}

.customer-field-div label{
    margin: 0;
}


.common_invoice .about_team {
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
}

.common_invoice .invoice_table td {
    padding-right: 30px;
}

.common_invoice .form-group.pay_method {
    width: 100%;
    display: flex;
    font-size: 14px;
    color: #000;
    font-weight: 500;
}


.time-seprate-sign{
    display: none;
}


#newWOPanel .content-page {
    margin-left: 0px;
    padding: 0px 15px;
    min-height: 50vh;
}

/* Schedule left column: zip color box, + Work Order, touch hint */
.leftbar_header .sched-zip { position: relative; margin: 2px 2px 6px; }
.leftbar_header .sched-zip .fa { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); color: #8a94a6; pointer-events: none; }
.leftbar_header .sched-zip input { padding-left: 24px; font-size: 13px; transition: background-color .2s; }
.leftbar_header .sched-zip input[style*="background-color"] + .fa, .leftbar_header .sched-zip input[style*="background-color"] { font-weight: 700; }
.leftbar_header .sched-new-wo { display: flex; align-items: center; justify-content: center; width: calc(100% - 4px); margin: 0 2px 8px !important; }
.leftbar_header .sched-hold-hint { display: none; margin: -4px 0 6px; text-align: center; font-size: 11px; color: #8a94a6; }
@media (hover: none) { .leftbar_header .sched-hold-hint { display: block; } }
/* Schedule left column on phones / tablets: desktop-width zip, button and zones;
   unscheduled placards the size of the scheduled ones, side by side; the tray
   (zones + placards) opens and closes */
.sched-tray-toggle { display: none; }
@media (max-width: 991px) {
    .schedule_page_card { height: auto !important; max-height: 62vh; padding: 8px !important; }
    .leftbar_header { display: flex; flex-direction: column; align-items: center; padding-top: 4px !important; }
    .leftbar_header > .sched-zip, .leftbar_header > .sched-new-wo, .leftbar_header > .leftBar, .leftbar_header > .sched-hold-hint { width: 180px !important; max-width: 180px; }
    .leftbar_header .sched-zip, .leftbar_header .sched-new-wo { margin: 0 0 6px !important; }
    .leftbar_header .leftBar { margin: 0 0 4px; }
    .sched-tray-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 10px 12px; margin: 0 0 8px; border: 0; border-radius: 8px; background: #eef2f7; font-weight: 700; color: #34495e; font-size: 14px; cursor: pointer; }
    .sched-tray-toggle .sched-tray-count { display: inline-block; min-width: 22px; margin-left: 6px; padding: 0 7px; border-radius: 10px; background: #3378ff; color: #fff; font-size: 12px; text-align: center; }
    .sched-tray-toggle .fa { transition: transform .2s; }
    body.sched-tray-closed .sched-tray-toggle .fa { transform: rotate(-90deg); }
    body.sched-tray-closed .leftbar_header .leftBar, body.sched-tray-closed .leftbar_plaque, body.sched-tray-closed .sched-hold-hint { display: none !important; }
    .leftbar_plaque { height: auto !important; min-height: 0 !important; overflow: visible !important; }
    .leftbar_plaque_ul { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 4px 0 0; margin: 0; list-style: none; }
    .leftbar_plaque_ul > li { flex: 0 0 auto; }
    .leftbar_plaque .work_order_plaque { width: 94px !important; height: 56px !important; margin: 0 !important; overflow: hidden; font-size: 12px; padding: 3px; }
}
@media (max-width: 575px) {
    .leftbar_plaque .work_order_plaque { width: 135px !important; height: 45px !important; font-size: 11px; padding: 2px; }
}
/* Touch: no copy menu on a long press; a held placard lifts */
.work_order_plaque { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.work_order_plaque.touch-armed { transform: scale(1.04); box-shadow: 0 6px 16px rgba(0, 0, 0, .25); transition: transform .12s, box-shadow .12s; }

.customer-profile-buttons{
    display: flex;
    column-gap: 10px;
}

.customer-profile-buttons button{
    padding: 8px 10px;
    margin-left: 0px !important;
}


.disabled-link {
    pointer-events: none;
    color: gray;
    text-decoration: none;
}

.Work_order .work_order_bigscreen, .Work_order .work_order_medium{
    display: none;
}

.Work_order .work_order_smallscreen, .Work_order .work_order_bigsmall{
    display: block;
}


.selected_appointment_ul .highlighted {
    background-color: yellow; /* Change this to your preferred highlight color */
    border: 2px solid #f39c12;
    transition: background-color 0.3s ease-in-out;
}

/* Flagged customers in the customer searches: can't be picked; tinted like the tables */
.disabled-customer {
    pointer-events: none;
    color: black;
    background-color: #f3d1ca;
    box-shadow: inset 5px 0 0 #c62828;
}

.prepay-customer {
    pointer-events: none;
    color: black;
    background-color: #d6d8dc;
    box-shadow: inset 5px 0 0 #212529;
}

.disabled-customer > div, .prepay-customer > div { display: flex; align-items: center; gap: 6px; }

.schedule_page_card{
    height: calc(100dvh - 140px);
    overflow-y: auto;
    scrollbar-width: none;
    padding-top: 0 !important;
}

.pac-container {
    z-index: 999999 !important;
}

.inactive_user_select {
    background-color:#a7a7a7;
}

.profile-card .user_name{
    position: relative;
    z-index: 99;
}

.wo_plaque_holder {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* Adjusts columns dynamically */
    gap: 10px; /* Space between grid items */
    border: 1px solid #ddd;
    padding: 10px;
    width: 118px !important;
    margin: 3px !important;
    height: max-content;
    background-color: transparent !important;
    border: none !important;
}

.row.schedule-right-row {
    /* flex-wrap: nowrap;
    gap: 10px; */
    padding:0 3px;
}

.row.schedule-right-row .truck-row {
    border: 1px solid #958c8c;
    margin-top: 10px;
    margin-right: 10px;
}

.wo_plaque_holder:nth-child(even) .workOrder_smallModal:nth-child(2) {
    margin-top: 15px;
}

.slot-timing.row b {
    font-size: 12px;
}

.truck-row .on_my_way {
    font-size: 12px;
}

.schedule_page_date{
    font-size: 20px !important;
}

.update-data-notes{
    /* position: absolute; */
    border: none !important;
    background: transparent !important;
}

.Work_order .card .card-header {
    margin: initial !important;
}
.schedule_sidebar .work_order_plaque {
    width: 100% !important;
}
.workOrder_smallModal .work_order_plaque {
    font-size: 12px;
    padding: 3px;
}
.wo_plaque_holder {
    margin: initial !important;
}
.row.scheduleBox {
    display: flex !important;
    overflow: scroll !important;
    flex-flow: initial;
    margin: initial !important;
    width: 100% !important;
    max-width: 100%;
}
.toggle-calendar-functionality .btn {
    padding: 0 !important;
}
.truck-form-calendar .form-group {
    margin: 0;
}


.toggle-schedule-items{
    display: none;
    font-size: 11px;
}

.total-area th, .total-area td {
    padding: 8px 9px;
}

.number_field {
    text-align: right;
}

.text-wrap-mode{
    text-wrap-mode: nowrap;
}

.gap-10{
    gap: 10px;
}

.schedule_card_custom{
    width: 100%;
    max-width: 100%;
}

.custom-table tr td, 
.custom-table tr th {
    padding-left: 7px !important;
    padding-right: 3px !important;
    font-size: 13px;
}

.work_order_table{
    font-size: 15px;
}

.schedule_page_header{
    position: sticky;
    top: 0px;
    background: white;
    padding: 20px 5px;
    z-index: 9 !important;
}

.leftbar_header{
    position: sticky;
    top: 0px;
    background: white;
    z-index: 9 !important;
}

.iti.iti--allow-dropdown {
    width: 100%;
}

.red-asterisk::after {
    content: ' *';
    color: red;
    font-weight: bold;
}


.help-icon {
    position: relative;
    display: inline-block;
    color: red;
    font-size: 20px;
    cursor: pointer;
    margin-left: 10px;
}
.help-box {
    border: 2px solid red;
    padding: 10px;
    color: red;
    font-size: 14px;
    position: absolute;
    background: white;
    width: 120px;
    top: 30px;
    left: 0;
    display: none;
    z-index: 10;
}
.help-icon:hover + .help-box {
    display: block;
}

.Work_order_map .work_order_details.mt-3 {
    height: calc(100dvh - 140px);
    overflow-y: auto;
}

#loadingscreen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    font-weight: bold;
    z-index: 1000;
}

.w-md-50{
    width: 50%;
}

/* start::media screen */

@media screen and (min-width:1650px) {

 .Work_order .work_order_bigscreen, .Work_order .work_order_bigsmall{
     display: block;
 }

 .Work_order .work_order_smallscreen{
     display: none;
 }

}


@media (min-width: 992px) and (max-width: 1450px) {

    .Work_order .work_order_medium{
        display: block;
    }
    .Work_order .work_order_bigsmall{
        display: none;
    }


}

@media (min-width: 992px) and (max-width: 1200px) {
    .profile-box .user_info{
        font-size: 12px;
    }
}

@media screen and (max-width:767px) {
    .schedule_sidebar {
        max-width: 100%;
        flex: 1;
    }
    .Work_order .card .card-header {
        margin: initial !important;
    }
    .schedule_sidebar .work_order_plaque {
        width: 100% !important;
    }
    .workOrder_smallModal .work_order_plaque {
        font-size: 12px;
        padding: 3px;
    }
    .wo_plaque_holder {
        margin: initial !important;
    }
    .row.scheduleBox {
        display: flex !important;
        overflow: scroll !important;
        flex-flow: initial;
        margin: initial !important;
        width: 100% !important;
        max-width: 100%;
    }
    .row.schedule-right-row {
        display: block;
    }
    .row.schedule-right-row .truck-row {
        border: 1px solid #958c8c;
        margin-top: 10px;
        width: 100%;
    }
        /* .schedule-right-row {
            flex-wrap: wrap;
        }
        .scheduleBox {
            display: flex;
            flex-flow: nowrap;
        } */
    #search_customer_section .form-group {
        display: block;
        margin-bottom: 0;
    }
    div#search_customer_section label {
        padding-top: 10px;
    }
    div#search_customer_section hr {
        margin-bottom: 15px;
    }
    div#search_customer_section {
        padding: 0px;
    }
    .header-title.customer-name-title h4.card-title {
        font-size: 20px;
    }
    .cutomer_mobile {
        padding: 0;
    }
    .Work_order .form-horizontal .form-group {
        flex-direction: column;
    }
    .export-user-info-form.form-horizontal .form-group {
        flex-direction: row;
        column-gap: 10px;
    }

    select#filter_by {
        margin-top: 20px;
        margin-bottom: 20px;
    }

    form.form-horizontal label.search_work_order {
        text-align: left;
        margin-bottom: 20px;
    }

    .form-group.d-flex .col-xs-12.col-sm-4 {
        padding: 0;
        margin-bottom: 20px;
    }

    .leftbar_plaque {
        width: 100%;
        height: 250px;
        overflow: scroll;
    }

    .Work_order .dataTables_filter {
        text-align: unset !important;
    }

    .dataTables_length {
        text-align: left !important;
        margin-bottom: 20px;
        padding-left: 15px;
    }

    .Work_order .col-md-2 {
        padding-left: 15px;
    }

    .Work_order .card .card-header,
    .Work_Order_Analyze .card-header,
    .sale_pipeline h1 {
        margin: 0 auto;
        text-align: center;
    }

    .container-fluid.Work_order {
        padding: 0px;
    }

    .dataTables_wrapper .dataTables_filter label {
        width: 100%;
    }

    .dataTables_wrapper .dataTables_filter input {
        width: 78% !important;
    }

    .sale_pipeline h5 {
        margin-bottom: 10px;
    }

    .tasks-row-div .card-body,
    .Sharp_Mower .card-body {
        padding: 20px 0px;
    }

    /* new-media-start */
    .sale_pipeline h5 {
        margin: 5px 0;
    }

    .tasks-row-div label {
        padding-left: 17px;
    }

    .Sharp_Mower .jumbotron h1 {
        font-size: 30px;
    }

    .sharp_mover .panel-body form .form-group {
        display: block;
        margin: 0;
    }

    .sharp_mover .team-edit-form div.form-group label {
        text-align: start;
        padding-left: 0;
        margin-top: 14px;
        padding-top: 0;
        padding-bottom: 0 !important;
        margin-bottom: 5px;
    }

    .p-custom {
        padding: 0px;
    }

    .save_btn {
        margin-top: 15px;
    }

    body.sidebar-main .side-menu-bt-sidebar-1 {
        display: block;
        position: absolute;
        right: 7px;
        top: 0;
    }

    .listing_details h2 {
        font-size: 30px;
    }

    .timeframe h1 {
        font-size: 26px;
        text-align: center;
    }

    .card.ledger_sect h1,
    .part_head_sec h1 {
        font-size: 30px;
    }
    .user-edit-form.form-horizontal .control-label {
        text-align: left !important;
        padding: 0 0 5px 0;
    }
    .user_edit_form .panel-body form .form-group {
        display: block;
        align-items: normal;
    }
    .form-inline {
        justify-content: center;
        gap: 10px;
    }
    br.mobile-break {
        display: block;
    }
    .new_transaction_add .panel-body form .form-group {
        display: block;
    }
    .part_section .form-horizontal .control-label {
        padding-bottom: 8px;
    }
    .finance_nav_bar h3 {
        font-size: 20px;
    }
    .finance_nav_bar a.nav_link {
        font-size: 16px;
    }
    .card.invoice_report_product {
        padding: 10px;
    }


    .tab-content .calender {
        display: block;
        text-align: center;
    }

    .truck-form-calendar {
        display: flex;
        width: 100%;
        justify-content: center;
        margin-top: 12px;
    }

    input.duplicate-customer-validation{
        width: 150px;
    }

    .duplicate-customer-buttons {
        display: flex;
        row-gap: 20px;
        flex-direction: column;
    }

    #timeframes-list .timeframe {
        flex-direction: column;
        row-gap: 14px;
        margin-bottom: 30px;
    }
    .remove-timeframe {
        padding: 1px 8px;
    }
    button#add-timeframe {
        padding: 3px 8px;
        font-size: 16px;
    }
    .add_btnn input {
        padding: 2px 8px;
    }

    .Work_order .scheduleBox{
        height: 180px !important;
        padding: 0 14px;
    }

    .content-page .Work_order .scheduleBox h4 {
        justify-content: space-between;
    }
    .common_invoice .form-group.pay_method, .common_invoice .service-total, .common_invoice .about_team{
        display: block;
    }
    .common_invoice .change-service-button {
        margin-bottom: 15px;
    }

    .truck-row{
        width: auto !important;
    }
    
    .address-inputs {
        margin: 7px 0;
    }
    
}

@media (min-width: 1300px) {
.iq-top-navbar {
        width: calc(100% - 175px);
    } 
    .content-page {
        margin-left: 170px; 
        padding: 100px 3px 0;
    }
    .iq-footer{
        /* position: fixed; */
        padding: 5px;
        margin-top: 30px;
        margin-left: 177px;
        width: calc(100vw - 175px);
    }
}


@media (min-width: 767px) {

    .workOrder_smallModal .work_order_plaque{
        font-size: 12px;
        padding: 3px;
    }
    .content-page .Work_order .scheduleBox h4 {
        justify-content: space-evenly;
    }
    /* .iq-top-navbar {
        width: calc(100% - 210px);
    } */
    .content-page {
        /* margin-left: 210px; */
        padding: 100px 3px 0;
    }
    .slot-timing.row {
        font-size: 12px;
        padding-left: 1px;
        padding-right: 1px;
    }
   
}


@media screen and (min-device-width: 768px) and (max-device-width: 991px) { 

    .schedule_card_custom{
        flex: 1;
        max-width: 79%;
        }
        .schedule_sidebar {
            flex: 1;
            max-width: 21%;
        }
        .schedule_sidebar {
            max-width: 100%;
            flex: 1;
        }
        .toggle-calendar-functionality .btn {
    padding: 0;
}
       
}

@media (max-width: 992px) {

    .time-seprate-sign{
        display: inline-block;
    }
    .toggle-calendar-functionality .btn {
        padding: 0 !important;
    }
    
    .row.schedule-right-row {
        display: block;
    }

}

@media screen and (max-width:481px) {
    .customer-profile-buttons {
        display: grid;
        gap: 5px;
    }

    .profile-box .user_info{
        font-size: 12px;
    }
}

@media (max-width: 767px) {

    .col-mb-8 {
        flex: 0 0 66.66667% !important;
        max-width: 66.66667% !important;
    }
    .col-mb-4 {
        flex: 0 0 33.33333% !important;
        max-width: 33.33333% !important;
    }
    .col-mb-1 {
        flex: 0 0 8.33333% !important;
    max-width: 8.33333% !important;
    }
    .col-mb-2 {
        flex: 0 0 16.66667% !important;
        max-width: 16.66667% !important;
    }
    .col-mb-5 {
        flex: 0 0 41.66667% !important;
        max-width: 41.66667% !important;
    }
    .col-mb-12 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    .w-xs-100 {
        width: 100% !important;
    }

    /* Schedule page (mobile): stack timeslots vertically (no horizontal scroll) */
    .Work_order .row.scheduleBox {
        flex-wrap: wrap !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
    }

    /* Each timeslot column becomes full width */
    .Work_order .row.scheduleBox > div {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .Work_order .row.scheduleBox .slot-timing {
        align-items: center;
        justify-content: space-between;
        gap: 6px;
    }

    /* Override inline font-size on the <b> */
    .Work_order .row.scheduleBox .slot-timing b {
        font-size: 10px !important;
        line-height: 1.1;
        white-space: normal;
    }

    .Work_order .row.scheduleBox .lock_status {
        padding: 2px 4px;
        height: max-content;
        font-size: 10px;
    }

    .Work_order .workOrder_smallModal .work_order_plaque {
        font-size: 11px;
        padding: 2px;
    }
  }

/* Footer: theme primary blue with white text */
.iq-footer {
    background: #3378ff;
    color: #fff;
}
.iq-footer ul li a,
.iq-footer ul li a:hover {
    color: #fff;
}

/* Schedule page: truck columns. Width = number of time slots (--slots, set
   per truck in schedule.blade.php) x one time-slot width, so time-slot
   columns are the same width across trucks and trucks pack side by side:
   the slot width (--slot-unit) depends on the schedule area's width, see the
   container rules further down. 7+ slot trucks use --slots: 99 and always
   take the full row. */
.schedule-right-row .truck-col {
    position: relative;
    padding-left: 15px;
    padding-right: 15px;
    --slot-unit: 100%;
    flex: 0 0 min(100%, calc(var(--slots, 3) * var(--slot-unit)));
    max-width: min(100%, calc(var(--slots, 3) * var(--slot-unit)));
}

/* Schedule day header controls (Notes + assignment drop-down): side by side
   when the truck column has room, stacked on two lines when it doesn't,
   and never wider than the column (the drop-down used to stick out) */
.scheduleHeader .schedule-items > .d-flex {
    flex-wrap: wrap;
    gap: 6px 8px;
}
.scheduleHeader .schedule-items > .d-flex > form {
    display: flex;
    align-items: flex-start;
    flex: 1 1 140px;
    min-width: 0;
    max-width: 100%;
    margin-left: 0 !important;
}
.scheduleHeader textarea.auto-save-date-note,
.scheduleHeader form.unassign_box select.truck_user_id {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
}
/* Notes take the spare width; the driver drop-down stays compact. Both share
   one look: light border, rounded corners, 12px text. */
.scheduleHeader .schedule-items > .d-flex > form:first-child {
    flex: 2 1 160px;
}
.scheduleHeader .schedule-items > .d-flex > form.unassign_box {
    flex: 1 1 130px;
}
.scheduleHeader textarea.auto-save-date-note,
.scheduleHeader form.unassign_box select.truck_user_id {
    border: 1px solid #ccd5e1;
    border-radius: 6px;
    background-color: #fff;
    font-size: 12px;
    color: #34495e;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.scheduleHeader textarea.auto-save-date-note {
    float: none !important;
    height: 52px;
    min-height: 32px;
    padding: 4px 8px;
    line-height: 1.35;
}
.scheduleHeader form.unassign_box select.truck_user_id {
    height: 32px;
    padding: 2px 6px;
}
.scheduleHeader textarea.auto-save-date-note:focus,
.scheduleHeader form.unassign_box select.truck_user_id:focus {
    outline: none;
    border-color: #3378ff;
    box-shadow: 0 0 0 2px rgba(51, 120, 255, 0.2);
}
/* brief "saved" confirmation after a note saves (schedule.blade.php) */
.scheduleHeader textarea.auto-save-date-note.note-saved {
    border-color: #28a745;
    box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.25);
}

/* Schedule page: one-line text so every row of a truck has a fixed height
   and days line up on their own (full text on hover) */
.schedule-right-row .truck-title {
    padding: 1rem 1.25rem !important;
    /* pinned under the Schedule header while its truck's days scroll by;
       the next row of trucks pushes it away. --schedule-header-h is set in
       schedule.blade.php from the header's real height. */
    position: sticky;
    top: var(--schedule-header-h, 76px);
    z-index: 8; /* under the Schedule header (9) */
}
.schedule-right-row .truck-name {
    margin: 0;
    font-size: 1.6rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.schedule-right-row .scheduleHeader .schedule > a {
    min-width: 0;
}
.schedule-right-row .day-heading {
    white-space: nowrap;
}
.schedule-right-row .slot-timing > .p-0 {
    flex: 1 1 auto;
    min-width: 0;
}
.schedule-right-row .slot-timing > .mx-1 {
    flex: 0 0 auto;
}
.schedule-right-row .slot-label {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Placards: name, zip and phone each on one line, cut with "…" */
.work_order_plaque .d-flex {
    min-width: 0;
}
.work_order_plaque .customer-name,
.work_order_plaque .plaque-zip,
.work_order_plaque .plaque-phone {
    display: block;
    min-width: 0;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.work_order_plaque .plaque-phone {
    text-align: right;
}

/* Schedule truck columns, sized by the schedule area's own width (not the
   screen's), so a half-screen window gets fewer, wider trucks; a time slot
   is never narrower than about 110px. (Overrides --slot-unit set above.) */
.schedule-right-row {
    container-type: inline-size;
    container-name: trucks;
}
.schedule-right-row .truck-col { --slot-unit: calc(100% / 3); }
@container trucks (min-width: 660px) {
    .schedule-right-row .truck-col { --slot-unit: calc(100% / 6); }
}
@container trucks (min-width: 990px) {
    .schedule-right-row .truck-col { --slot-unit: calc(100% / 9); }
}
@container trucks (min-width: 1320px) {
    .schedule-right-row .truck-col { --slot-unit: calc(100% / 12); }
}
/* Time-slot columns inside a truck (up to 6 slots): always side by side,
   equal widths (1-2 slot trucks are laid out as 3) */
.schedule-right-row .truck-col.even-slots .scheduleBox > .slot-col {
    flex: 0 0 calc(100% / var(--inner-slots)) !important;
    max-width: calc(100% / var(--inner-slots)) !important;
}
/* Phones: when the schedule area is very narrow, a truck's time slots wrap
   two per row instead of shrinking below a readable width */
@container trucks (max-width: 439px) {
    .schedule-right-row .truck-col.even-slots .scheduleBox > .slot-col {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
}

/* Placards (Work_Order::style()): solid area-color body with contrasting
   text (--plaque-text); the appointment type / status pattern is a band
   down the left edge (--plaque-band): stripes, dots or checkerboard */
.work_order_plaque {
    color: var(--plaque-text, inherit);
    position: relative;
}
.work_order_plaque[style*="--plaque-band"] {
    padding-left: 24px !important;
    overflow: hidden;
}
.work_order_plaque[style*="--plaque-band"]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 20px;
    background: var(--plaque-band);
    border-right: 1px solid rgba(0, 0, 0, 0.2);
    pointer-events: none;
}
.work_order_plaque .plaque-walkup {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-left: 4px;
    border-radius: 50%;
    background: #34495e;
    color: #fff;
    font-size: 10px;
    box-shadow: 0 0 0 1px #fff;
}
.work_order_plaque .plaque-code {
    flex: 0 1 auto;
    min-width: 0;
    margin-left: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.work_order_plaque .plaque-zip {
    flex: 0 0 auto;
}

/* ===== Truck schedule (technician) page: phone-first stop cards ===== */
.truck-schedule-title {
    margin: 0;
    font-size: clamp(1.5rem, 6vw, 2.25rem);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Truck name with the + Customer button beside it; the name still truncates */
.truck-schedule-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.truck-schedule-title-row .truck-schedule-title {
    min-width: 0;
}
.truck-schedule-title-row .btn {
    flex-shrink: 0;
}
/* + Customer / + Work Order: labelled buttons beside the truck name... */
.truck-schedule-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
.truck-schedule-actions .ts-icon-round {
    display: none;
}
/* ...and on phones, round icon buttons in the section's top-right corner */
@media (max-width: 767px) {
    .truck-schedule-title-row {
        justify-content: space-between;
        align-items: flex-start;
    }
    .truck-schedule-actions {
        margin-left: auto;
    }
    .truck-schedule-actions .ts-action {
        position: relative;
        width: 42px;
        height: 42px;
        padding: 0;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 17px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    }
    .truck-schedule-actions .ts-label,
    .truck-schedule-actions .ts-icon-wide {
        display: none;
    }
    .truck-schedule-actions .ts-icon-round {
        display: inline-block;
        margin: 0;
    }
    /* small "+" on the work order icon (the customer icon already has one) */
    .truck-schedule-actions .ts-action-wo::after {
        content: "+";
        position: absolute;
        top: 3px;
        right: 5px;
        font-size: 13px;
        font-weight: 700;
        line-height: 1;
    }
}
.truck-schedule-date {
    margin: 0 0 4px;
    font-size: clamp(1.1rem, 4.5vw, 1.5rem);
}
/* The slot row scrolls sideways with nowrap; let card text wrap normally,
   and keep each column at its set width instead of shrinking to fit the row */
.truck_schedule_cols {
    white-space: normal;
    flex: 0 0 auto;
}
.stop-card .stop-line {
    margin-bottom: 4px;
}
/* Delivery / Installation / Revisit marker (no area colors on this page):
   a round icon badge with the type name under it. Floated, so long names
   and addresses wrap around it instead of running underneath. */
.truck_schedule_cols .list-group-item {
    position: relative;
    overflow: hidden;
}
.stop-type-badge {
    float: right;
    width: 76px;
    margin: 0 -4px 4px 8px;
    text-align: center;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: #34495e;
}
.stop-type-badge i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin: 0 auto 3px;
    border-radius: 50%;
    background: #34495e;
    color: #fff;
    font-size: 18px;
}
/* Tap targets */
.stop-order {
    display: flex;
    align-items: center;
    gap: 6px;
}
.stop-order input {
    width: 3.5em;
    height: 38px;
    font-size: 16px; /* 16px+ stops phones zooming in on focus */
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.stop-address {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    color: inherit !important;
    text-decoration: none !important;
}
.stop-address .fa-map {
    font-size: 20px;
    color: #3378ff;
    flex: 0 0 auto;
}
/* Google Maps address note under the address (work_orders/elements/stop) */
.stop-address-check {
    display: flex;
    gap: 5px;
    align-items: flex-start;
    font-size: 12px;
    line-height: 1.35;
    margin: -2px 0 4px;
}
.stop-address-check.is-warning { color: #9a5b00; }
.stop-address-check.is-note { color: #6c757d; }
.stop-address-check .fa { margin-top: 2px; flex: 0 0 auto; }
@media (min-width: 768px) {
    /* Two lines tall on every card (text cut with "…", full text on hover) */
    .stop-address-check { min-height: calc(2 * 1.35em); }
    .stop-address-check span {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}
/* Phone row: call button, then the label on one line (shrunk from JS if it
   would wrap; see truck_schedule.blade.php) */
.stop-phone {
    display: flex;
    align-items: center;
}
.stop-phone .stop-call {
    flex: 0 0 auto; /* never squeeze the number */
    white-space: nowrap;
}
.stop-phone small {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
}
.stop-call {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 6px 12px;
    margin-right: 6px;
}
button.btn.stop-on-my-way {
    min-height: 44px;
    margin-top: 8px;
    margin-left: 0; /* theme adds 10px to .btn, which pushed it past the card edge */
}
/* Empty optional rows (second phone, reason, code): hidden on phones; keep
   their space on tablet/PC so cards in side-by-side columns stay aligned */
@media (max-width: 767px) {
    .stop-field.is-empty { display: none; }
}
@media (min-width: 768px) {
    .stop-field.is-empty { visibility: hidden; }
}
/* Page layout: column sizes, wide-and-short notes, controls, pinned headings */
.truck-schedule-page {
    --slot-w: min(320px, calc(100vw - 80px)); /* phones: one column fills the width */
    --slot-gap: 18px;
    --sticky-top: 0px;
}
.truck-schedule-page .card-body {
    padding-left: 12px;
    padding-right: 12px;
}
.truck-schedule-page .truck-schedule-header {
    padding-bottom: 10px;
}
.truck-schedule-notes {
    margin-top: 8px;
    padding: 6px 12px;
    border-radius: 6px;
    white-space: pre-line;
}
.truck-schedule-notes.is-empty {
    font-style: italic;
    opacity: 0.85;
}
.truck-schedule-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    margin-bottom: 12px;
}
.truck-schedule-buttons {
    display: flex;
    gap: 8px;
}
.truck-schedule-buttons > * {
    margin: 0 !important; /* theme spacing on .btn doubled the gap */
}
.truck-route-field {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 100%;
    margin: 0;
}
.truck-route-field span {
    flex: 0 0 3em;
    font-weight: 600;
}
/* "overflow: hidden" made this wrapper a scroll box, which stops the slot
   headings pinning; "clip" still hides overflow without that side effect */
.content-page.truck-schedule-content {
    overflow: clip;
}
.truck-slot-headings {
    position: sticky;
    top: var(--sticky-top);
    z-index: 20;
    background: #fff;
}
.truck-slot-headings.is-stuck {
    box-shadow: 0 6px 6px -6px rgba(0, 0, 0, 0.25);
}
.truck-slot-headings-track {
    display: flex;
    gap: var(--slot-gap);
    overflow-x: hidden; /* follows the columns (set from JS) */
    scrollbar-width: none;
}
.truck-slot-headings-track::-webkit-scrollbar {
    display: none;
}
.truck-slot-heading {
    flex: 0 0 var(--slot-w);
    margin: 0;
    padding: 8px 0 6px;
    text-align: center;
    font-size: 1.4rem;
}
/* ‹ › arrows show only when there are more time slots than fit */
.truck-slot-nav {
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid #ccd5e1;
    border-radius: 50%;
    background: #fff;
    color: #34495e;
    font-size: 22px;
    line-height: 28px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}
.truck-slot-nav.is-prev { left: 4px; }
.truck-slot-nav.is-next { right: 4px; }
.truck-slot-headings.has-overflow .truck-slot-nav { display: block; }
.truck-slot-nav:disabled { opacity: 0.3; }
.truck_schedule_row {
    gap: var(--slot-gap);
    overflow-x: auto;
    padding-bottom: 8px;
}
.truck-schedule-page .truck_schedule_cols {
    width: var(--slot-w) !important;
    max-width: none;
    padding: 6px 6px 0;
}
.truck_schedule_cols .list-group-item {
    margin-bottom: 10px;
    border-radius: 6px;
}
.truck_schedule_cols .list-group-item + .list-group-item {
    border-top-width: 1px;
}
.truck-slot-empty {
    list-style: none;
    padding: 16px 0 22px;
    text-align: center;
    font-style: italic;
    color: #8a94a6;
}
/* Sideways scrolling always settles on a column edge (swipe, trackpad,
   touchscreen or the arrows) */
.truck_schedule_row {
    scroll-snap-type: x mandatory;
    scroll-padding-left: 0.5rem;
}
.truck_schedule_cols {
    scroll-snap-align: start;
}
/* Phones: a swipe moves exactly one time slot */
@media (max-width: 767px) {
    .truck_schedule_cols {
        scroll-snap-stop: always;
        padding-left: 0;
        padding-right: 0;
    }
}

/* Which cards belong to which time slot: a blue line under each heading and
   a solid divider between columns. Phones also shade every other column,
   since only one column shows at a time there. */
.truck-slot-heading {
    border-bottom: 3px solid #3378ff;
}
.truck-slot-heading,
.truck_schedule_cols {
    position: relative;
}
.truck-slot-heading + .truck-slot-heading::before,
.truck_schedule_cols + .truck_schedule_cols::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--slot-gap) / -2 - 1px);
    border-left: 2px solid #9aabc3;
}
@media (max-width: 767px) {
    .truck-slot-heading:nth-child(odd),
    .truck_schedule_cols:nth-child(odd) {
        background: #e9eff8;
    }
    .truck-slot-heading { border-radius: 8px 8px 0 0; }
    .truck_schedule_cols { border-radius: 0 0 8px 8px; }
}

/* Tablet / PC: smaller, denser text and controls. Phones keep the larger
   sizes above for touch and reading at arm's length. */
@media (min-width: 768px) {
    .truck-schedule-page {
        --slot-w: 290px;
        --slot-gap: 24px;
        font-size: 13px;
    }
    .truck-schedule-page .card-body {
        padding-left: 20px;
        padding-right: 20px;
    }
    .truck-schedule-page .truck-schedule-title {
        font-size: 1.6rem;
    }
    .truck-schedule-page .truck-schedule-date {
        font-size: 1.1rem;
    }
    .truck-schedule-page .truck-slot-heading {
        font-size: 1.1rem;
    }
    .truck-schedule-page .btn {
        font-size: 13px;
        padding: 4px 12px;
    }
    .truck-schedule-page .form-control {
        height: 32px;
        font-size: 13px;
    }
    /* Start / End sit next to the buttons at a sensible width instead of
       stretching across wide screens */
    .truck-route-field {
        flex: 0 1 320px;
    }
    .truck_schedule_cols .list-group-item {
        padding: 10px 12px;
    }
    .stop-card .stop-line {
        margin-bottom: 2px;
    }
    .stop-order input {
        height: 28px;
        font-size: 13px;
    }
    .stop-address {
        padding: 2px 0;
    }
    .stop-address .fa-map {
        font-size: 16px;
    }
    .stop-call {
        min-height: 28px;
        padding: 2px 8px;
        font-size: 12px;
    }
    button.btn.stop-on-my-way {
        min-height: 32px;
        margin-top: 6px;
    }
    .stop-type-badge {
        width: 70px;
        font-size: 9.5px;
    }
    .stop-type-badge i {
        width: 34px;
        height: 34px;
        font-size: 16px;
    }
}

/* Header avatar when the user has no profile picture: initials in a circle,
   same size as the picture (50px, 40px on small phones) */
.header-avatar-initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 50px;
    height: 50px;
    padding: 6px; /* ring in the navbar color: the circle looks smaller */
    background: #3378ff content-box;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.5px;
    line-height: 1;
}
@media (max-width: 479px) {
    .header-avatar-initials {
        width: 40px;
        height: 40px;
        padding: 5px;
        font-size: 12px;
    }
}

/* Paid work order notice on the work order page (KAN-267). Not an .alert:
   the layout fades every .alert out after a few seconds. */
.paid-lock-banner {
    display: flex;
    align-items: flex-start;
    margin: 0 0 16px;
    padding: 12px 16px;
    border: 1px solid #b7e1bf;
    border-radius: 6px;
    background: #e7f6ec;
    color: #1e5f2a;
}
.paid-lock-banner .fa-lock {
    margin-top: 3px;
}

/* Schedule page work order pop-up (work_orders/modal): compact so it fits a
   normal PC window before anything is typed */
.work-order-modal .modal-dialog { margin-top: 16px; }
.work-order-modal .modal-header { padding: 10px 16px; align-items: center; }
.work-order-modal .modal-header .btn-lg { padding: 0 8px; }
.work-order-modal .modal-header .modal-title { margin: 0; font-size: 1.25rem; font-weight: 700; }
.work-order-modal .modal-body { padding: 12px 20px 14px; font-size: 13px; }
.work-order-modal .modal-dialog { max-width: 680px; }
.work-order-modal .modal-footer { display: none; } /* always empty */
.work-order-modal .wo-modal-customer .cust-name { font-size: 15px; font-weight: 700; }
.work-order-modal .wo-modal-customer .cust-line { color: #34495e; line-height: 1.5; }
.work-order-modal .wo-modal-customer .sep { color: #8a94a6; margin: 0 4px; }
.work-order-modal .wo-modal-section { margin: 4px 0 2px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #6c757d; }
.work-order-modal .form-group { margin-bottom: 8px; }
.work-order-modal label { margin-bottom: 2px; font-size: 12px; font-weight: 600; color: #34495e; }
.work-order-modal .form-control { height: 32px; padding: 3px 8px; font-size: 13px; }
.work-order-modal textarea.form-control { height: auto; min-height: 64px; }
.work-order-modal hr { margin: 8px 0; }
.work-order-modal .appointments-holder { padding-top: 0 !important; }
.work-order-modal .appointments-holder ul { margin: 0; padding: 0; }
.work-order-modal .add-appointment { height: 32px; padding: 0 12px !important; margin-top: 0; }
.work-order-modal .col-1 > label.pt-2 { display: block; height: 18px; padding: 0 !important; margin-bottom: 2px; }
.work-order-modal .appointments-holder, .work-order-modal .appointments-holder + * { margin-top: 0; }
.work-order-modal .form-group > .col-12.pt-3 { padding-top: 4px !important; }
.work-order-modal .wo-modal-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.work-order-modal .wo-modal-fields .form-group > label,
.work-order-modal .wo-modal-fields .form-group > div { max-width: 100%; flex: none; padding: 0; }
@media (max-width: 575px) { .work-order-modal .wo-modal-fields { grid-template-columns: 1fr; } }
.work-order-modal .form-group > .col-xs-10.ml-2 { margin-left: 0 !important; }
.work-order-modal input[type=submit].btn { padding: 5px 16px; font-size: 14px; }
@media (max-width: 575px) {
    .work-order-modal .modal-body { text-align: left; }
}

/* Placard pop-up appointment rows (work_orders/partials/appointment_rows): one card per
   appointment with Unschedule and Delete on the right. The opened grid placard's row is
   marked "This placard". */
.work-order-modal .appt-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.work-order-modal .appt-row { display: grid; grid-template-columns: minmax(96px, 1fr) minmax(96px, 1.1fr) minmax(130px, 1.6fr) auto; align-items: center; gap: 4px 12px; padding: 7px 8px 7px 12px; border: 1px solid #e6ebf2; border-radius: 8px; background: #fff; font-size: 12.5px; color: #34495e; transition: background .15s, border-color .15s; }
.work-order-modal .appt-row.is-unscheduled { background: #fafbfc; border-style: dashed; }
.work-order-modal .appt-row.is-unscheduled .appt-unsched { grid-column: span 2; }
.work-order-modal .appt-row.is-this { background: #eef4ff; border-color: #3378ff; box-shadow: inset 3px 0 0 #3378ff; }
.work-order-modal .appt-type { font-weight: 600; min-width: 0; }
.work-order-modal .appt-type .appt-type-select { max-width: 150px; height: 28px; padding: 2px 6px; font-size: 13px; font-weight: 600; }
.work-order-modal .this-pill { display: none; margin-top: 2px; padding: 0 7px; border-radius: 999px; background: #3378ff; color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; white-space: nowrap; }
.work-order-modal .appt-row.is-this .this-pill { display: table; }
.work-order-modal .appt-cell { min-width: 0; overflow-wrap: anywhere; }
.work-order-modal .appt-when { display: flex; flex-wrap: wrap; gap: 0 8px; }
.work-order-modal .appt-date { font-weight: 600; white-space: nowrap; }
.work-order-modal .appt-slot { color: #6c757d; white-space: nowrap; }
.work-order-modal .appt-row.is-past .appt-date, .work-order-modal .appt-row.is-past .appt-truck { color: #8a94a6; }
.work-order-modal .unsched-tag { display: inline-block; padding: 1px 9px; border-radius: 999px; background: #fff4e5; color: #9a5b00; font-size: 11.5px; font-weight: 600; }
.work-order-modal .appt-actions { display: flex; gap: 6px; justify-content: flex-end; }
.work-order-modal .appt-btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 28px; min-width: 30px; padding: 0 9px; border: 1px solid #c9d2df; border-radius: 6px; background: #fff; color: #34495e; font-size: 12px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.work-order-modal .appt-btn:hover:not(:disabled), .work-order-modal .appt-btn:focus-visible { border-color: #3378ff; color: #3378ff; outline: 0; }
.work-order-modal .appt-btn-delete { color: #c62828; border-color: #f1c4c4; }
.work-order-modal .appt-btn-delete:hover:not(:disabled), .work-order-modal .appt-btn-delete:focus-visible { background: #c62828; border-color: #c62828; color: #fff; }
.work-order-modal .appt-btn:disabled { opacity: .45; cursor: default; }
.work-order-modal .appt-btn.is-busy { opacity: .6; pointer-events: none; }
.work-order-modal .appt-lock { color: #8a94a6; padding: 0 8px; }
.work-order-modal .appt-empty { color: #8a94a6; font-style: italic; padding: 6px 2px; }
/* Delete confirmation, shown over the pop-up */
.work-order-modal .modal-content { position: relative; }
.work-order-modal .appt-confirm-wrap { position: absolute; inset: 0; z-index: 5; display: flex; align-items: flex-start; justify-content: center; padding: 80px 12px 12px; background: rgba(15, 23, 42, .45); border-radius: inherit; }
.work-order-modal .appt-confirm { width: min(420px, 100%); background: #fff; border-radius: 10px; box-shadow: 0 12px 40px rgba(0, 0, 0, .25); padding: 18px 20px; }
.work-order-modal .appt-confirm h5 { margin: 0 0 10px; font-size: 17px; font-weight: 700; color: #c62828; display: flex; gap: 8px; align-items: center; }
.work-order-modal .appt-confirm .what { background: #f7f9fc; border: 1px solid #e6ebf2; border-radius: 8px; padding: 8px 12px; font-size: 14px; margin-bottom: 10px; color: #34495e; }
.work-order-modal .appt-confirm .note { font-size: 13px; color: #6c757d; margin: 0 0 14px; }
.work-order-modal .appt-confirm .warn { background: #fff4e5; color: #9a5b00; border-radius: 8px; padding: 8px 12px; font-size: 13px; margin-bottom: 14px; }
.work-order-modal .appt-confirm .btns { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.work-order-modal .appt-confirm .btns .btn { margin-left: 0; white-space: nowrap; }
@media (max-width: 575px) {
    .work-order-modal .appt-row { grid-template-columns: 1fr auto; gap: 2px 10px; }
    .work-order-modal .appt-row .appt-cell { grid-column: 1; }
    .work-order-modal .appt-row.is-unscheduled .appt-unsched { grid-column: 1; }
    .work-order-modal .appt-actions { grid-column: 2; grid-row: 1 / span 3; }
    .work-order-modal .appt-btn .lbl { display: none; }
    .work-order-modal .appt-btn { height: 34px; min-width: 36px; }
}
@media (hover: none) { .work-order-modal .appt-btn { height: 34px; min-width: 36px; } }
/* Customer flags (Customer::flagBadge / flagRowClass): a small round flag icon before
   the customer's name, and in tables the whole row tinted with a colored left edge.
   Staff screens only. */
.customer-flag { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; font-size: 10px; line-height: 1; vertical-align: middle; }
.customer-flag-red { background: #c62828; color: #fff; }
.customer-flag-black { background: #212529; color: #fff; }
.cust-with-flag { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; vertical-align: middle; }
.cust-with-flag > :last-child { min-width: 0; }
table tbody tr.row-flag-red > td, table tbody tr.row-flag-red > th { background: #f3d1ca !important; }
table tbody tr.row-flag-red:hover > td { background: #eebfb6 !important; }
table tbody tr.row-flag-red > td:first-child { box-shadow: inset 5px 0 0 #c62828; }
table tbody tr.row-flag-black > td, table tbody tr.row-flag-black > th { background: #d6d8dc !important; }
table tbody tr.row-flag-black:hover > td { background: #c9ccd1 !important; }
table tbody tr.row-flag-black > td:first-child { box-shadow: inset 5px 0 0 #212529; }
.customer-flag, .customer-flag i { color: #fff !important; }
.cust-with-flag { white-space: nowrap; }
/* On placards: smaller, with a white ring so it shows on any zone color */
.work_order_plaque .customer-flag { width: 14px; height: 14px; font-size: 7px; margin-right: 3px; box-shadow: 0 0 0 1.5px #fff; }
.work_order_plaque .customer-flag + .customer-name { margin-right: auto; min-width: 0; }
/* Warn-only flagged customers in the customer searches: tinted but can be picked */
.flag-warn-red { background-color: #f3d1ca; box-shadow: inset 5px 0 0 #c62828; }
.flag-warn-black { background-color: #d6d8dc; box-shadow: inset 5px 0 0 #212529; }
.flag-warn-red > div, .flag-warn-black > div { display: flex; align-items: center; gap: 6px; }
/* Flag notice (Customer::flagNotice): the flag's name, reason and what it means here */
.flag-notice { display: flex; align-items: flex-start; gap: 8px; padding: 8px 12px; border-radius: 8px; font-size: 13px; line-height: 1.4; color: #212529; }
.flag-notice-red { background: #f3d1ca; box-shadow: inset 4px 0 0 #c62828; }
.flag-notice-black { background: #d6d8dc; box-shadow: inset 4px 0 0 #212529; }
.flag-notice .customer-flag { margin-top: 1px; }
.flag-notice .flag-notice-effect { display: block; font-size: 12px; color: #495057; }

/* Schedule: each time slot's header is a light rounded box with the lock button
   first and the slot's time right after it, so the lock clearly belongs to its
   own slot at any width */
.schedule-right-row .slot-timing {
    align-items: center;
    background: #eef2f7;
    border-radius: 6px;
    padding: 2px 8px 2px 3px;
    margin-bottom: 4px;
}
.schedule-right-row .slot-timing > .mx-1 {
    order: -1;
    margin: 0 6px 0 0 !important;
}
.schedule-right-row .slot-timing > .p-0,
.schedule-right-row .slot-timing .slot-label {
    text-align: left !important;
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Bigger tap areas for small buttons and icons, without changing how they look:
   an invisible margin around each that also takes taps. Sized so it never
   reaches a neighbouring control (e.g. a slot's lock stops short of the placards). */
.lock_status, .toggle-calendar-functionality a, .map-link, .modal .close,
.settings-page .type-chip .chip-remove, .wo-actions, .roles-page .access-edit { position: relative; }
.lock_status::after, .toggle-calendar-functionality a::after, .map-link::after, .modal .close::after,
.settings-page .type-chip .chip-remove::after, .wo-actions::after, .roles-page .access-edit::after { content: ""; position: absolute; }
.lock_status::after { inset: -5px -6px; }                          /* 11px to the first placard */
.toggle-calendar-functionality a::after { inset: -8px -7px; }      /* week arrows are 16px apart */
.map-link::after { inset: -8px; }
.modal .close::after { inset: -10px; }
.settings-page .type-chip .chip-remove::after { inset: -8px -4px; }
.wo-actions::after, .roles-page .access-edit::after { inset: -6px -2px; }

/* A checkbox and its words, tappable together (only the box and the words) */
.check-tap { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; min-width: 32px; margin: 0; cursor: pointer; font-weight: inherit; }
.check-tap input { margin: 0; width: 16px; height: 16px; flex: 0 0 auto; }

/* Switch rows (Settings, Roles pop-ups): only the words and the switch flip it,
   not the empty space between them */
.settings-page .switch-row, .access-modal .access-row { pointer-events: none; }
.settings-page .switch-row > *, .access-modal .access-row > * { pointer-events: auto; }

/* Checkboxes and radio buttons show the hand like their words do; locked ones say so */
input[type="checkbox"], input[type="radio"] { cursor: pointer; }
input[type="checkbox"]:disabled, input[type="radio"]:disabled { cursor: not-allowed; }
label:has(> input[type="checkbox"]:disabled), label:has(> input[type="radio"]:disabled) { cursor: not-allowed; }