.loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.8);
            z-index: 9999;
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
        }

        /* CSP Phase 3: Utility classes replacing inline styles */
        /* Note: no !important — original inline styles didn't have it either */
        .w-100 { width: 100%; }
        .w-15p { width: 15%; }
        .w-10p { width: 10%; }
        .w-20p { width: 20%; }
        .w-30p { width: 30%; }
        .w-70p { width: 70%; }
        .w-50px { width: 50px; }
        .w-100px { width: 100px; }
        .w-222 { width: 222px; }
        .w-15p-dn { width: 15%; display: none; }
        .w-11p-dn { width: 11%; display: none; }
        .w-20p-dn { width: 20%; display: none; }
        .w-30p-dn { width: 30%; display: none; }
        .w-100-tl { width: 100%; text-align: left; }
        .ml-35p { margin-left: 35%; }
        .ml-37p { margin-left: 37%; }
        .ml-40p { margin-left: 40%; }
        .ml-30p-bold { margin-left: 30%; font-weight: bold; }
        .ml-20 { margin-left: 20px; }
        .ml-15 { margin-left: 15px; }
        .ml-7 { margin-left: 7px; }
        .ml-10p-mt-14p { margin-left: 10%; margin-top: 14%; }
        .ml-35p-dn { margin-left: 35%; display: none; }
        .mt-32 { margin-top: 32px; }
        .mt-20 { margin-top: 20px; }
        .mt-17 { margin-top: 17px; }
        .mt-5 { margin-top: 5px; }
        .mt-5p { margin-top: 5%; }
        .mt-n18 { margin-top: -18px; }
        .mt-2p-dn { margin-top: 2%; display: none; }
        .mt-20-dn { margin-top: 20px; display: none; }
        .mt-32-ml-n45 { margin-top: 32px; margin-left: -45px; }
        .mb-2 { margin-bottom: 10px; }
        .mb-14 { margin-bottom: 14px; }
        .mb-15 { margin-bottom: 15px; }
        .my-20-mb40 { margin: 20px 0 40px; }
        .mx-auto { margin: 0 auto; }
        .mx-auto-overflow { margin: 0 auto; overflow: auto; }
        .m-0 { margin: 0; }
        .p-0 { padding: 0; }
        .p-0i { padding: 0; }
        .pt-1 { padding-top: 5px; }
        .pt-5 { padding-top: 5px; }
        .pt-20 { padding: 20px 0 0 0; }
        .pt-20-dn { padding: 20px 0 0 0; display: none; }
        .dn-m-0 { display: none; margin: 0; }
        .dn-mt-7 { display: none; margin-top: 7px; }
        .d-none { display: none; }
        .text-center { text-align: center; }
        .text-left { text-align: left; }
        .text-right { text-align: right; }
        .font-weight-bold { font-weight: bold; }
        .fw-bold-i { font-weight: bold; }
        .fs-17 { font-size: 17px; }
        .fs-11 { font-size: 11px; }
        .fs-large { font-size: large; }
        .fs-17-ml30 { font-size: 17px; margin-left: 30%; }
        .fs-17-ml-37p { font-size: 17px; margin-left: 37%; }
        .font-arial { font-family: Arial, sans-serif; }
        .font-arial-fs-17 { font-family: Arial, sans-serif; font-size: 17px; }
        .link-blue { color: blue; text-decoration: underline; }
        .text-blue-light { color: rgb(105, 170, 254); }
        .text-green { color: #4CAF50; }
        .section-bg { background-color: #8080800d; }
        .section-bg-center { background-color: #8080800d; text-align: center; }
        .section-bg-arial { background-color: #8080800d; font-family: Arial, sans-serif; font-size: 17px; }
        .section-bg-arial-m20 { background-color: #8080800d; font-family: Arial, sans-serif; margin: 20px; }
        .section-title { font-size: 18px; font-weight: 600; margin-top: 10px; margin-bottom: 10px; }
        .label-bold { padding-top: 5px; font-weight: bold; }
        .modal-header-bg { background-color: #8080804a; height: 65px; display: flex; justify-content: center; align-items: center; }
        .modal-header-bg2 { background-color: #8080804a; height: 65px; }
        .btn-lg-custom { width: 200px; height: 45px; }
        .btn-primary-custom { background-color: #007bff; color: white; border-color: white; }
        .btn-danger-custom { background-color: red; color: white; border-color: white; }
        #btnAddPerson { background-color: #007bff; margin: 20px 0 40px; height: 44px; width: 280px; font-size: large; }
        .btn-small { width: 87px; font-size: 11px; margin-left: -15px; }
        .btn-small2 { width: 85px; font-size: 11px; }
        .canvas-container { width: 100%; height: 30px; background: #eee; clear: both; }
        .title-line { height: 3px; background-color: blue; line-height: 3px; }
        .title-text { display: inline-block; margin-left: 20px; font-size: 30px; font-weight: bold; line-height: 60px; }
        .logo-img { width: 4%; margin-left: 40px; margin-top: -18px; }
        .float-left-ml35 { float: left; margin-left: 35%; }
        .wide-table { width: 800px; overflow: scroll; max-width: unset; min-width: 1500px; margin-bottom: 0; }
        .h-110p-dn { height: 110%; display: none; }
        .h-210p-dn { height: 210%; display: none; }
        .h-94 { height: 94px; }
        .h-44 { height: 44px; }
        .h-20 { height: 20px; }
        .shim-hidden { position: absolute; top: 0px; left: 0px; display: none; }
        .suggest-box { overflow-y: auto; height: 300px; z-index: 1001; width: 97%; margin-top: 287px; }
        .suggest-box-hidden { display: none; overflow-y: auto; height: 300px; z-index: 1001; width: 97%; margin-top: 287px; }
        .suggest-box2 { display: none; overflow-y: auto; height: 300px; z-index: 1001; width: 97%; }
        .pos-abs-mt14 { position: absolute; margin-top: 14px; }
        .lh-60 { line-height: 60px; }
        .overflow-y-scroll { overflow-y: scroll; }
        .overflow-x-scroll { overflow-x: scroll; clear: both; }
        .mh-510-oy-scroll { max-height: 510px; overflow-y: scroll; }
        .flex-center-gap { display: flex; justify-content: center; align-items: center; gap: 5%; }
        .list-decimal { list-style-type: decimal; padding-left: 20px; font-size: 17px; }
        .m-0-h110p-dn { margin: 0; height: 110%; display: none; }

/* Fix select2 wrapper width - select2 reads element.style.width which is empty after removing inline styles */
.select2-container { width: 100% !important; }

/* Daterangepicker button alignment fix */
.daterangepicker .drp-buttons {
    text-align: center;
    padding: 8px 12px;
}
.daterangepicker .drp-buttons .btn {
    margin: 0 4px;
    font-size: 12px;
    padding: 4px 16px;
    float: none;
    display: inline-block;
}
.daterangepicker .drp-selected {
    display: none;
}
.daterangepicker .applyBtn {
    margin-right: 0;
}

        .loading-content {
            text-align: center;
            padding: 20px;
            background: #333;
            border-radius: 8px;
        }

        .spinner {
            border: 4px solid #f3f3f3;
            border-top: 4px solid #3498db;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
            margin: 0 auto 15px;
        }

        .signatureCon {
            display: flex;
            gap: 20px;
            padding-left: 0px;
        }

        #signatureCanvas {
            border: 1px solid black;
            cursor: crosshair;
            width: 100%;
            height: 200px;
            padding: 10px;
            box-sizing: border-box;
            border-radius: 5px;
            position: relative;
            margin-top: 10px;
        }

        .controls {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            min-width: 104px;
            width: 15%;
        }

        .clear-button {
            background-color: white;
            border: 1px solid #ccc;
            padding: 5px 10px;
            cursor: pointer;
            margin-bottom: 10px;
        }

        .tabs span {
            padding: 5px 10px;
            margin-right: 5px;
            cursor: pointer;
        }

        .active-tab {
            border-bottom: 2px solid green;
        }

        .date-input {
            width: 400px;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            margin-top: 10px;
        }

        .name-input {
            width: 400px;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            margin-top: 10px;
            position: relative;
            top: 0;
            left: 0;
            display: none; /* Use 'display' instead of 'visibility' */
        }

        .canvas-controls {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 10px;
        }

        .signature-label {
            margin-top: 0px;
        }



        .table {
            /*  width: 1000px;*/
        }

        .table-container {
            position: relative;
            overflow: scroll;
        }

        .table .table-container table {
            width: max-content;
        }

        .table table tr {
            position: relative;
        }

        .table table td {
            border-bottom: 1px solid #ebeef5;
            height: 38px;
            font-size: 14px;
            color: #666;
            padding: 2px;
        }

        .table .table-container .fixed {
            position: sticky;
            right: 0;
            background-color: #fff;
        }

            .table .table-container .fixed::before {
                position: absolute;
                top: 0;
                bottom: -1px;
                left: 0;
                width: 30px;
                transform: translateX(-100%);
                transition: box-shadow .3s;
                content: '';
                pointer-events: none;
            }

        .table .table-container .box-shadow::before {
            box-shadow: rgba(0,0,0,0.12) -10px 0 8px -8px inset;
        }

        .cityCon {
            gap: 1%;
        }

        .personCityBox {
            display: flex;
            justify-content: space-between;
            align-items: end;
            width: 23.5%;
        }

        .cityCon .select2-selection {
            height: 38px;
            padding: 8px 12px;
        }

        #SearchAddressBody {
            padding: 15px 30px;
        }

        .modal-SearchAddress .col-md-2 {
            display: flex;
            align-items: center;
            height: 34px;
            margin: 0;
        }

        .modal-SearchAddress .modal-footer .btn {
            margin: 0;
        }

        #search_suggest_home_address, #search_suggest_report_address {
            z-index: 100;
            position: absolute;
            background-color: #ffffff;
            text-align: left;
            border: 1px solid #000000;
        }
    
    
        th {
            background: #eee;
            height: 40px;
            padding-left: 15px;
        }

        table, tr, td, .table > tbody > tr > th {
            border: 1px solid #bfbfbf
        }

        hr {
            margin-top: 60px;
        }

        .headCon {
            text-align: center;
            padding: 5px;
            background: #8080800d;
        }

        input[type="text"], textarea {
            width: 100%;
        }

        .radioLabel {
            width: 10%;
        }

        .report-menu {
            margin-bottom: 30px;
            height: auto;
            padding: 10px;
            background: #f5f5f5;
        }

        #btnAddressReporting {
            /*margin: 20px 0 0;*/
            height: 40px;
            line-height: 1;
        }
        /* p ,ol li{
            text-transform: lowercase !important;
        }

        p:first-letter.ol li:first-letter {
            /*text-transform: uppercase !important;*/
        }

        */
        #selContactAwaitFeedback {
            width: 65% !important;
        }

        .info .addressRow {
            width: 65%;
        }

        .mandatory-field::first-letter {
            text-transform: uppercase !important;
        }

        @media (max-width:700px) {
            .info .addressRow {
                width: 100%;
            }

            #btnAddressReporting {
                margin: 5px 0;
            }
        }

        .incidentCon .col-md-3 {
            text-transform: lowercase;
            display: inline-block;
        }

            .incidentCon .col-md-3::first-letter {
                text-transform: uppercase;
            }

        .pubCustConInfo {
            overflow: hidden !important;
            margin-top: 0 !important;
        }

            .pubCustConInfo .modal-content {
                max-height: 600px;
                overflow: auto;
            }
    
    
        .btmfooter {
            width: 100%;
            /* left: 14%; */
            /* height: 9%; */
            background: #ffffff;
            border-top: 1px solid #dee2e6;
            color: #869099;
            padding: 1rem 0.5rem;
            position: fixed;
            bottom: 0;
            text-align: center;
            right: 0;
        }

        .case-body {
            margin-left: -39px;
            margin-top: 20px;
        }

        .report-menu-new {
        }

        .menu-li-new {
            list-style: none;
            /* height: 50px;
                            line-height: 50px; */
            border: 1.5px solid #3c8dbc;
            margin: 15px 0;
            color: #3c8dbc;
            text-align: center;
            background-color: white;
            border-radius: 5px;
            font-weight: bold;
            padding: 14px 5px;
            display: flex;
            justify-content: center;
            align-items: center;
            line-height: 1.2;
        }

        .menu-li-new-activer {
            background-color: #3c8dbc;
            color: white;
            cursor: pointer;
        }

        .table > thead > tr > th {
            border-bottom: 1px solid #bfbfbf;
        }

        th {
            background: #eee;
            height: 40px;
            padding-left: 15px;
            border-right: 1px solid #bfbfbf;
            background: -webkit-linear-gradient(#f2f1f9,#dfe6ee);
            background: -o-linear-gradient(#f2f1f9,#dfe6ee);
            background: -moz-linear-gradient(#f2f1f9,#dfe6ee);
            background: linear-gradient(#f2f1f9,#dfe6ee);
        }

        .btnEdit {
            background-image: url('/assets/dist/images/bj.png');
            height: 34px;
            width: 34px;
            border: 0px;
            background-size: 100%;
            margin-right: 10px;
            border-radius: 8px;
        }

        .btnRemove {
            background-image: url('/assets/dist/images/sc.png');
            height: 34px;
            width: 34px;
            border: 0px;
            background-size: 100%;
            border-radius: 8px;
        }

        .btnDownd {
            background-image: url('/assets/dist/images/xz.png');
            height: 34px;
            width: 34px;
            border: 0px;
            background-size: 100%;
            border-radius: 8px;
            margin-right: 6px;
        }

        .info div {
            /* display: inline-block; */
        }

        .info {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            /*margin-bottom: 15px;*/
            /*justify-content: space-between;*/
            gap: 5%;
        }

            .info div {
                box-sizing: border-box;
            }

        .modal-footer {
            padding: 15px 0;
            text-align: center;
        }

        .report-content {
            width: 80%;
        }

        .report-menu {
            width: 17%;
        }

        .btmfooter .btn {
            margin: 0 !important;
            width: 100px;
            font-size: 16px;
        }

        .infoRow {
            display: flex;
            width: 30%;
            align-items: center;
            margin: 0 0 15px;
        }


        /* .infoRow1 {
            width: 23%;
        }

        .infoRow2 {
            width: 46%;
        }*/

        .info .col-form-label {
            width: 160px;
            margin: 0;
        }

        .info .form-control {
            height: 38px;
        }

        .btnGroup {
            text-align: center;
            margin-top: 20px;
        }

            .btnGroup .btn {
                width: 100px;
                margin: 10px;
            }

        .modal-footer .btn {
            width: 100px;
            margin: 0 20px;
            font-size: 16px;
        }

        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 0;
        }

        .modal-title {
            width: 90%;
        }

        .close {
            float: none;
            margin: 0 !important;
            color: #fff;
            opacity: 1;
        }

        .personCityBox {
            display: flex;
            justify-content: space-between;
            align-items: end;
        }

        .personCitySpan {
            display: contents;
            width: 14px;
            text-align: right;
        }

        .validateTxt {
            overflow: auto;
        }

        .businessRow {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 48%;
            margin-bottom: 15px;
        }

            .businessRow .col-form-label {
                width: 170px;
            }

        .businessBox {
            margin: 0;
        }

        .report-content a {
            white-space: pre-wrap;
            overflow-wrap: break-word;
            word-break: keep-all;
        }

        .report-menu h1 {
            font-size: 26px;
        }

        .modal-body .form-group {
            overflow: auto;
        }

        td {
            font-size: 14px;
        }

        .report-content h2 {
            font-size: 24px;
            margin: 8px 0;
        }

        .report-content p {
            line-height: 1.2;
            margin-bottom: 5px;
        }

        .table-owner {
            width: 100%;
            overflow: auto;
            border: none !important;
        }

            .table-owner tr, thead, tbody, td, th {
                border: none !important;
            }

            .table-owner thead, th {
                background-color: white !important;
            }

        .cityCon {
            gap: 2%;
        }

        .info .infoRow {
            margin-bottom: 10px;
        }
    
    
        @media (max-width:800px) {
            .info > div:nth-child(5),
            .info > div:nth-child(6) {
                width: 100% !important;
                padding-left: 0 !important;
                padding-right: 0 !important;
            }

                .info > div:nth-child(5) label,
                .info > div:nth-child(6) input {
                    width: 100%;
                }

            .form-group.row .col-md-2, .form-group.row .col-sm-2 {
                width: 100% !important;
                float: none !important;
                margin-left: 0 !important;
                margin-top: 10px !important;
            }

            .form-group.row .col-md-4, .form-group.row .col-sm-4 {
                width: 100% !important;
                float: none !important;
                margin-left: 0 !important;
            }

            .modal-SearchAddress .row .col-md-2 {
                width: 16.66666667% !important;
            }

            .modal-SearchAddress .col-md-10 {
                width: 100% !important;
            }

            .modal-SearchAddress .row .col-md-2 {
                margin-top: 0 !important;
            }
        }

        @media (min-width:420px) and (max-width:800px) {
            .report-menu, .report-content {
                width: 100%;
                float: none;
            }

            #customer_reportlist {
                display: flex;
                flex-wrap: wrap;
            }

            .menu-li-new {
                width: 30%;
                margin: 1.5%;
            }
        }

        @media (min-width:246px) and (max-width:419px) {
            .report-menu, .report-content {
                width: 100%;
                float: none;
            }

            #customer_reportlist {
                display: flex;
                flex-wrap: wrap;
            }

            .menu-li-new {
                width: 47%;
                margin: 1.5%;
            }
        }

        @media (max-width:700px) {
            .info {
                flex-direction: column;
            }

            .infoRow {
                width: 100%;
                margin: 0 0 10px 0;
            }

            .info .col-form-label {
                width: 160px;
            }

            .businessRow {
                width: 100%;
                margin-bottom: 15px;
            }

            .personCityBox {
                width: 100%;
                margin: 0 0 10px 0;
            }

            .mainCon {
                height: 120%;
            }

            .cityCon .personCityBox {
                width: 100%;
            }

            .searchAddressBox {
                text-align: center;
            }

            @media (max-width:576px) {
                .signatureCon {
                    flex-direction: column;
                    padding-bottom: 100px;
                }
            }

            @media (max-width:245px) {
                .report-menu, .report-content {
                    width: 100%;
                    float: none;
                }

                #customer_reportlist {
                    display: flex;
                    flex-wrap: nowrap;
                    height: 55px;
                    overflow: auto;
                }

                .menu-li-new {
                    width: 100%;
                    margin: 3px 2px 3px 0 !important;
                }
            }

            @media (max-width:319px) {
                .btmfooter .btn {
                    width: 83px;
                    padding: 10px 10px;
                    margin: 5px 0 !important;
                }
            }

            @media (max-width:450px) {
                #modal-addContactInfo .modal-dialog {
                    width: 90% !important;
                }

                #h3title {
                    line-height: 1.3 !important;
                    margin-top: 0;
                }

                #customer_reportlist {
                    margin: 0;
                }

                .report-menu {
                    padding: 5px;
                    margin-bottom: 0;
                }

                .report-content li {
                    line-height: 1.2;
                    margin-bottom: 3px !important;
                    font-size: 15px;
                }

                .btmfooter {
                    padding: 0;
                }

                    .btmfooter .btn {
                        padding: 5px 10px !important;
                    }

                #div_reportpersoninfo_text p {
                    line-height: 1.2;
                    margin: 0 0 3px;
                    font-size: 15px;
                }

                .info {
                    margin-bottom: 0;
                }

                .case-body {
                    margin-top: 10px;
                }

                .infoRow {
                    margin: 0 0 5px;
                }

                .report-main {
                    margin-top: 5px !important;
                }

                .menu-li-new {
                    margin: 2px 1.5%;
                }

                .form-group.row .col-sm-2 {
                    margin-top: 5px !important;
                }

                .report-content h1 {
                    margin: 5px 0;
                }

                .report-content p {
                    font-size: 15px;
                }

                .validateTxt p {
                    margin: 0 0 3px;
                }

                .signatureCon {
                    gap: 0;
                }

                #signatureCanvas {
                    height: 120px;
                }
            }

            @media (max-width:336px) {
                #h3title {
                    margin-left: 0 !important;
                    font-size: 22px !important;
                }
            }
        }

        @media (min-width:701px) and (max-width:1440px) {
            .personCityBox {
                width: 49%;
                margin: 0 0 15px;
            }
        }
    
.ml-0 { margin-left: 0; }
input[type="file"].d-none { display: none !important; }