html,
     body {
         min-height: 100%;
         margin: 0;
         overflow-x: hidden;
         background: #eef4f7;
     }

     .auth-wrapper {
         display: flex;
         flex-direction: column;
         min-height: 100vh;
     }

     .auth-content {
         flex: 1;
         display: flex;
         align-items: flex-start;
         justify-content: center;
         background: #eef4f7;
         margin-top: 100px;
     }

     .containertest {
         width: 100%;
     }

     .auth-card {
         width: 100%;
         max-width: 980px;
         margin: 12px auto 0;
     }

     .grievance-page-card {
         overflow: hidden;
         border: 1px solid #d8e4ed;
         border-radius: 8px;
         background: #fff;
         box-shadow: 0 16px 38px rgba(26, 49, 70, 0.16);
         width: 100%%;
     }

     .grievance-page-header {
         display: flex;
         flex-wrap: wrap;
         align-items: center;
         gap: 14px;
         padding: 18px 22px;
         border-bottom: 4px solid #0d9488;
         background: #075b93;
         color: #fff;
     }

     .grievance-header-icon {
         position: relative;
         flex: 0 0 auto;
         width: 54px;
         height: 54px;
         border-radius: 10px;
         background: #eef7e9;
         color: #d95252;
         display: inline-flex;
         align-items: center;
         justify-content: center;
         font-size: 23px;
     }

     .grievance-header-icon .grievance-user-icon {
         color: #075b93;
     }

     .grievance-header-icon .grievance-alert-icon {
         position: absolute;
         right: 9px;
         top: 8px;
         color: #ef6b73;
         font-size: 17px;
     }

     .grievance-header-text {
         min-width: 0;
     }

     .grievance-page-kicker {
         display: inline-flex;
         margin-bottom: 4px;
         color: #d9f4ff;
         font-size: 12px;
         font-weight: 800;
         text-transform: uppercase;
     }

     .grievance-page-title {
         margin: 0;
         color: #fff;
         font-size: 24px;
         font-weight: 800;
         letter-spacing: 0;
     }

     .grievance-page-subtitle {
         margin: 4px 0 0;
         color: #eef7ff;
         font-size: 13px;
         line-height: 1.35;
     }

     .grievance-modal-close {
         flex: 0 0 auto;
         width: 38px;
         height: 38px;
         margin-left: auto;
         display: inline-flex;
         align-items: center;
         justify-content: center;
         border: 1px solid rgba(255, 255, 255, 0.62);
         border-radius: 50%;
         background: rgba(255, 255, 255, 0.12);
         color: #fff;
         font-size: 30px;
         line-height: 1;
         cursor: pointer;
     }

     .grievance-modal-close:hover,
     .grievance-modal-close:focus {
         background: rgba(255, 255, 255, 0.22);
         color: #fff;
         outline: none;
         text-decoration: none;
     }

     .grievance-modal-close span {
         display: block;
         line-height: 30px;
         margin-top: -3px;
     }

     .grievance-form-shell {
         padding: 20px 22px 6px;
     }

     .grievance-intro {
         display: flex;
         align-items: center;
         gap: 10px;
         margin-bottom: 16px;
         padding: 11px 13px;
         border: 1px solid #d7eceb;
         border-left: 4px solid #0d9488;
         border-radius: 6px;
         background: #f6fbfb;
         color: #31546a;
         font-size: 13px;
         font-weight: 700;
         line-height: 1.35;
     }

     .grievance-otp-box {
         margin-bottom: 18px;
         padding: 16px;
         border: 1px solid #dbeaf2;
         border-radius: 8px;
         background: #f8fbfd;
     }

     .grievance-otp-box.grievance-mobile-verified {
         border-color: #badfd5;
         background: #f7fcfa;
     }

     #grievanceForm label {
         display: block;
         margin-bottom: 6px;
         color: #233c55;
         font-size: 13px;
         font-weight: 700;
     }

     /* #grievanceForm label .grievance-required {
         display: inline;
         margin-left: 3px;
         color: #dc3545;
         font-weight: 800;
     } */

     #grievanceForm label.lang,
     #grievanceForm .grievance-required {
         display: inline;
     }

     #grievanceForm .grievance-required {
         margin-left: 3px;
         color: #dc3545;
         font-weight: 800;
     }

     #grievanceForm .form-control,
     #grievanceForm .form-select {
         min-height: 40px;
         border: 1px solid #cfdce7;
         border-radius: 6px;
         background-color: #fff;
         color: #15293b;
         font-size: 14px;
         box-shadow: none;
         cursor: text;
         transition: border-color 0.2s ease, box-shadow 0.2s ease;
     }

     #grievanceForm select.form-control,
     #grievanceForm .form-select,
     #grievanceForm input[type="file"] {
         cursor: default;
     }

     #grievanceForm textarea.form-control {
         min-height: 112px;
         resize: vertical;
         cursor: text;
     }

     #grievanceForm .form-control:focus,
     #grievanceForm .form-select:focus {
         border-color: #0067a8;
         box-shadow: 0 0 0 3px rgba(0, 103, 168, 0.13);
     }

     .grievance-mobile-inline,
     .grievance-otp-inline {
         display: flex;
         gap: 8px;
         align-items: stretch;
     }

     .grievance-mobile-inline .form-control,
     .grievance-otp-inline .form-control {
         flex: 1 1 auto;
     }

     .grievance-icon-btn,
     .grievance-primary-btn {
         min-height: 38px;
         border: 0;
         border-radius: 5px;
         background: #0067a8;
         color: #fff;
         font-size: 14px;
         font-weight: 700;
         display: inline-flex;
         align-items: center;
         justify-content: center;
         box-shadow: none;
         cursor: pointer;
         transition: background-color 0.2s ease;
     }

     .grievance-icon-btn {
         flex: 0 0 auto;
         width: 44px;
         min-width: 44px;
         padding: 0;
     }

     .grievance-primary-btn {
         min-width: 112px;
         padding: 0 16px;
     }

     .grievance-icon-btn:hover,
     .grievance-icon-btn:focus,
     .grievance-primary-btn:hover,
     .grievance-primary-btn:focus {
         background: #00558b;
         color: #fff;
         outline: none;
     }

     .grievance-icon-btn:disabled,
     .grievance-primary-btn:disabled {
         opacity: 0.65;
         cursor: not-allowed;
     }

     .grievance-verified-pill {
         display: none;
         flex: 0 0 auto;
         align-items: center;
         min-height: 38px;
         color: #087b5f;
         font-size: 12px;
         font-weight: 800;
         white-space: nowrap;
     }

     .grievance-mobile-verified .grievance-verified-pill {
         display: inline-flex;
     }

     .grievance-mobile-verified .mb-3 {
         margin-bottom: 0 !important;
     }

     .grievance-otp-message {
         display: none;
         margin-top: 7px;
         font-size: 12px;
         font-weight: 700;
     }

     .grievance-otp-message:not(:empty) {
         display: block;
     }

     .grievance-otp-message.success {
         color: #087b5f;
     }

     .grievance-otp-message.error,
     #grievanceForm .text-danger {
         color: #dc3545 !important;
     }

     .grievance-otp-timer {
         display: none;
         margin-top: 6px;
         color: #8a5a00;
         font-size: 12px;
         font-weight: 800;
     }

     .grievance-otp-timer.show {
         display: block;
     }

     .grievance-otp-timer.expired {
         color: #c0392b;
     }

     .grievance-counter,
     .grievance-file-help {
         margin-top: 5px;
         color: #6a7f91;
         font-size: 12px;
         font-weight: 700;
     }

     .grievance-form-actions {
         display: flex;
         justify-content: flex-end;
         gap: 10px;
         padding: 14px 22px 18px;
         border-top: 1px solid #e8eef4;
         background: #fbfcfe;
     }

     #grievanceForm .form-control+span.text-danger,
     #grievanceForm .form-select+span.text-danger,
     #grievanceForm .text-danger.server-error {
         display: block;
         margin-top: 5px;
         font-size: 12px;
         font-weight: 700;
     }

     .grievance-success-overlay {
         display: none;
         position: fixed;
         inset: 0;
         z-index: 1085;
         align-items: center;
         justify-content: center;
         background: rgba(8, 25, 46, 0.22);
     }

     .grievance-success-overlay.show {
         display: flex;
     }

     .grievance-success-card {
         width: min(360px, calc(100vw - 32px));
         padding: 22px 20px 18px;
         border-radius: 8px;
         background: #fff;
         text-align: center;
         box-shadow: 0 18px 44px rgba(8, 25, 46, 0.28);
     }

     .grievance-success-icon {
         width: 46px;
         height: 46px;
         margin: 0 auto 12px;
         display: inline-flex;
         align-items: center;
         justify-content: center;
         border-radius: 50%;
         background: #087b5f;
         color: #fff;
         font-size: 20px;
     }

     .grievance-success-title {
         margin: 0 0 6px;
         color: #17324d;
         font-size: 18px;
         font-weight: 800;
     }

     .grievance-success-message {
         margin: 0 0 16px;
         color: #4d6175;
         font-size: 14px;
     }

     #pageFooter {
         padding: 0.5rem 0;
     }

     #pageFooter img {
         width: 80px;
         height: 50px;
     }

     #pageFooter p {
         font-size: 1rem;
         margin: 1rem 0;
     }

     #pageFooter a {
         font-size: 1rem;
     }

     .toggle-password {
         top: 45%;
         right: 10px;
         transform: translateY(-50%);
         cursor: pointer;
     }

     .toggle-password i {
         color: #5682b3;
         transition: color 0.3s ease;
     }

     @media(max-width: 768px) {
         .auth-content {
             padding: 170px 10px 28px;
         }

         .grievance-page-header {
             align-items: flex-start;
             padding: 16px;
         }

         .grievance-header-icon {
             width: 48px;
             height: 48px;
         }

         .grievance-page-title {
             font-size: 20px;
         }

         .grievance-form-shell {
             padding: 16px 14px 4px;
         }

         .grievance-form-actions {
             padding: 12px 14px 16px;
         }

         .auth-card {
             max-width: calc(100vw - 24px);
         }
     }

     .auth-card {
         max-width: min(1480px, calc(100vw - 32px));
         margin-top: 0;
     }

     @media(max-width: 600px) {

         .grievance-mobile-inline,
         .grievance-otp-inline {
             display: block;
         }

         .grievance-icon-btn {
             width: 100%;
             margin-top: 8px;
         }

         .grievance-form-actions .grievance-primary-btn {
             flex: 1 1 0;
             min-width: 0;
         }

         .captcha-image {
             width: 100%;
             max-width: 250px !important;
             height: auto;
         }

         #pageFooter {
             padding: 0.4rem 0;
         }

         #pageFooter img {
             width: 60px;
             height: 60px;
         }

         #pageFooter p {
             font-size: 0.75rem;
             margin: 0rem 0;
         }

         #pageFooter a {
             font-size: 0.75rem;
         }

         /* .auth-card {
                max-width: calc(100vw - 24px);
            } */
     }





     /* Standalone grievance page style */
     .auth-content {
         padding: 145px 18px 36px;
         margin-top: 0;
         background: #edf3f6;
     }

     /* .auth-card {
            max-width: 1080px;
            margin-top: 0;
        } */

     .grievance-page-card {
         overflow: hidden;
         border: 1px solid #c8d8e2;
         border-radius: 8px;
         box-shadow: 0 12px 28px rgba(25, 44, 63, 0.14);
     }

     .grievance-page-header {
         position: relative;
         padding: 18px 22px;
         border-bottom: 4px solid #0d9488;
         background: #075b93;
         color: #fff;
     }

     .grievance-header-icon {
         width: 52px;
         height: 52px;
         border-radius: 8px;
         background: #eef7fb;
         color: #075b93;
         font-size: 23px;
         box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
     }

     .grievance-header-icon .grievance-alert-icon {
         color: #d44b4b;
     }

     .grievance-header-text {
         display: flex;
         flex-direction: column;
         justify-content: center;
     }

     .grievance-page-kicker {
         color: #d7f3ff;
         font-size: 11px;
         letter-spacing: 0;
     }

     .grievance-page-title {
         color: #fff;
         font-size: 23px;
         line-height: 1.2;
     }

     .grievance-page-subtitle {
         color: #e8f6fb;
     }

     .grievance-modal-close {
         border-color: #c8d6e0;
         background: #f7fafc;
         color: #51697c;
     }

     .grievance-modal-close:hover,
     .grievance-modal-close:focus {
         background: #e9f2f7;
         color: #183a53;
     }

     .grievance-form-shell {
         padding: 18px 20px 4px;
     }

     .grievance-intro {
         border-color: #d5e6ed;
         border-left-color: #075b93;
         background: #f7fbfd;
         color: #284b63;
     }

     .grievance-otp-box {
         padding: 18px;
         border-color: #cfdde7;
         border-radius: 6px;
         background: #ffffff;
     }

     .grievance-mobile-inline,
     .grievance-otp-inline {
         gap: 10px;
     }

     .grievance-icon-btn,
     .grievance-primary-btn {
         min-height: 40px;
         border-radius: 5px;
         background: #075b93;
     }

     .grievance-icon-btn {
         width: auto;
         min-width: 112px;
         padding: 0 14px;
         gap: 7px;
     }

     .grievance-primary-btn {
         min-width: 126px;
     }

     .grievance-icon-btn:hover,
     .grievance-icon-btn:focus,
     .grievance-primary-btn:hover,
     .grievance-primary-btn:focus {
         background: #064875;
     }

     #grievanceForm .form-control,
     #grievanceForm .form-select {
         min-height: 42px;
         border-color: #bdccd7;
     }

     .grievance-form-actions {
         padding: 14px 20px 18px;
         background: #f7fafc;
     }

     .grievance-verified-tabs {
         margin-top: 16px;
         padding: 12px;
         border: 1px solid #d4e1e9;
         border-radius: 8px;
         background: #f4f8fb;
     }

     .grievance-tab-list {
         display: flex;
         gap: 6px;
         margin-bottom: 12px;
         padding: 5px;
         border: 1px solid #d4e1e9;
         border-radius: 7px;
         background: #fff;
     }

     .grievance-tab-btn {
         flex: 1 1 0;
         min-height: 42px;
         padding: 0 18px;
         border: 0;
         border-radius: 5px;
         background: transparent;
         color: #31546a;
         font-size: 14px;
         font-weight: 800;
         cursor: pointer;
         transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
     }

     .grievance-tab-btn.active {
         background: #075b93;
         color: #fff;
         box-shadow: 0 6px 14px rgba(7, 91, 147, 0.22);
     }

     .grievance-tab-pane {
         display: none;
         padding: 16px;
         border: 1px solid #dbe7ee;
         border-radius: 7px;
         background: #fff;
         animation: grievanceSlideIn 0.22s ease;
     }

     .grievance-tab-pane.active {
         display: block;
     }

     @keyframes grievanceSlideIn {
         from {
             opacity: 0;
             transform: translateX(14px);
         }

         to {
             opacity: 1;
             transform: translateX(0);
         }
     }

     .grievance-status-tools {
         display: flex;
         align-items: center;
         justify-content: space-between;
         gap: 12px;
         margin-bottom: 10px;
     }

     .grievance-status-title {
         color: #17384f;
         font-size: 15px;
         font-weight: 800;
     }

     .grievance-light-btn {
         min-height: 36px;
         padding: 0 14px;
         border: 1px solid #b7cbd8;
         border-radius: 5px;
         background: #fff;
         color: #075b93;
         font-size: 13px;
         font-weight: 800;
         cursor: pointer;
     }

     .grievance-light-btn:hover,
     .grievance-light-btn:focus {
         background: #eef6fb;
         outline: none;
     }

     .grievance-status-table-wrap {
         overflow-x: auto;
         border: 1px solid #d5e1e9;
         border-radius: 8px;
         background: #fff;
         box-shadow: 0 8px 18px rgba(25, 44, 63, 0.08);
     }

     .grievance-status-table {
         width: 100%;
         margin: 0;
         border-collapse: collapse;
         color: #263f52;
         font-size: 13px;
     }

     .grievance-status-table th {
         padding: 12px;
         background: #075b93;
         color: #fff;
         font-weight: 800;
         white-space: nowrap;
         border-right: 1px solid rgba(255, 255, 255, 0.22);
         text-align: left;
     }

     .grievance-status-table th:last-child {
         border-right: 0;
     }

     .grievance-status-table td {
         padding: 11px 12px;
         border-top: 1px solid #e2ebf0;
         vertical-align: top;
         background: #fff;
     }

     .grievance-status-table tbody tr:nth-child(even) td {
         background: #f7fafc;
     }

     .grievance-status-table tbody tr:hover td {
         background: #eef7fb;
     }

     .grievance-status-table .status-col-ticket {
         width: 14%;
     }

     .grievance-status-table .status-col-date {
         width: 16%;
     }

     .grievance-status-table .status-col-dept {
         width: 24%;
     }

     .grievance-status-table .status-col-category {
         width: 32%;
     }

     .grievance-status-table .status-col-status {
         width: 14%;
     }

     .grievance-status-ticket {
         color: #075b93;
         font-weight: 800;
     }

     .grievance-status-badge {
         display: inline-flex;
         align-items: center;
         min-height: 24px;
         padding: 3px 10px;
         border-radius: 999px;
         background: #e9f7ef;
         color: #267348;
         font-size: 12px;
         font-weight: 800;
         white-space: nowrap;
     }

     .grievance-status-empty {
         color: #6b7f8e;
         font-weight: 700;
         text-align: center;
     }

     @media(max-width: 768px) {
         .auth-content {
             padding: 170px 10px 26px;
         }

         .grievance-page-header {
             gap: 10px;
             padding: 14px;
         }

         .grievance-tab-list {
             display: grid;
             grid-template-columns: 1fr 1fr;
         }

         .grievance-tab-btn {
             padding: 0 10px;
         }
     }

     @media(max-width: 600px) {
         .grievance-icon-btn {
             width: 100%;
             min-width: 0;
         }
     }

     .grievance-status-badge {
         padding: 5px 10px;
         border-radius: 15px;
         font-size: 12px;
         font-weight: 600;
     }

     .badge-registered {
         background-color: #ffc107;
         color: #000;
     }

     .badge-inprocess {
         background-color: #0d6efd;
         color: #fff;
     }

     .badge-closed {
         background-color: #198754;
         color: #fff;
     }

     .badge-secondary {
         background-color: #6c757d;
         color: #fff;
     }

     /* SOP -Modal */
     .citizen-modal {
         border-radius: 20px;
         overflow: hidden;
         border: none;
         box-shadow: 0 15px 50px rgba(0, 0, 0, .18);
     }

     .citizen-modal .modal-header {
         background: linear-gradient(135deg, #0d6efd, #4f9dfd);
         color: #fff;
         padding: 25px;
     }

     .info-icon {
         width: 65px;
         height: 65px;
         border-radius: 50%;
         background: rgba(255, 255, 255, .18);
         display: flex;
         align-items: center;
         justify-content: center;
         font-size: 30px;
     }

     .citizen-modal .modal-title {
         font-weight: 700;
     }

     .citizen-modal .modal-body {
         padding: 30px;
         background: #fafcff;
     }

     .instruction-list li {
         margin-bottom: 12px;
         font-size: 16px;
     }

     .citizen-note {
         background: #dce9fa;
         border-left: 5px solid #0d6efd;
         padding: 20px;
         border-radius: 10px;
         box-shadow: 0 4px 15px rgba(0, 0, 0, .05);
     }

     .citizen-note h5 {
         color: #0d6efd;
         font-weight: 600;
     }

     .citizen-note ul {
         padding-left: 20px;
     }

     .citizen-note li {
         margin-bottom: 10px;
     }

     .modal-footer {
         padding: 20px;
         background: #fff;
     }

     .modal-footer .btn {
         border-radius: 50px;
         font-weight: 600;
         min-width: 220px;
     }

     /* grievance marquee */

     .grievance-marquee {
         flex: 0 0 100%;
         /* Take full width */
         width: 100%;
         overflow: hidden;
         background: linear-gradient(90deg, #e3f4f7, #c6f1f7);
         color: #0f484d;
         border: 1px solid #5fc4f3;
         border-radius: 3px;
         padding: 3px 0;
         margin-bottom: 5px;
         white-space: nowrap;
         font-size: 15px;
         font-weight: 600;
     }

     .grievance-marquee-content {
         display: inline-block;
         padding-left: 100%;
         animation: grievance-scroll 28s linear infinite;
     }

     .grievance-marquee:hover .grievance-marquee-content {
         animation-play-state: paused;
     }

     @keyframes grievance-scroll {
         from {
             transform: translateX(0);
         }

         to {
             transform: translateX(-100%);
         }
     }

     .grievance-marquee i {
         color: #dc3545;
         margin-right: 8px;
     }

     /* redirect-link */

     .alternative-portal-note {
         background: linear-gradient(135deg, #fff3cd, #ffe8a1);
         border-left: 6px solid #f59e0b;
         border-radius: 10px;
         padding: 16px 18px;
         color: #7c4a03;
         font-size: 15px;
         line-height: 1.7;
         box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
     }

     .alternative-portal-note i {
         color: #dc3545;
         font-size: 18px;
     }

     .alternative-link {
         display: inline-block;
         margin-top: 8px;
         font-weight: 700;
         color: #0d6efd;
         text-decoration: none;
         word-break: break-all;
     }

     .alternative-link:hover {
         color: #084298;
         text-decoration: underline;
     }

     .alert_div {
         background: #f6e7e7c9;
         border-left: 5px solid #ff5c63d1;
         padding: 20px;
         border-radius: 10px;
         box-shadow: 0 4px 15px rgba(0, 0, 0, .05);
     }

     #downloadPdfBtn:disabled {
         cursor: not-allowed;
         opacity: 0.6;
         pointer-events: none;
     }

      /* remarks */
     /* =========================================================
   REMARKS BUTTON
   ========================================================= */

     .btn-see-remarks {
         border-radius: 20px;
         font-weight: 500;
         transition: all 0.2s ease;
     }

     .btn-see-remarks:hover {
         transform: translateY(-1px);
     }


     /* =========================================================
   CLOSURE REMARKS POPUP
   ========================================================= */

     .closure-remarks-view {
         padding: 5px 2px;
     }


     /* Header */

     .remarks-header {
         display: flex;
         align-items: center;
         gap: 12px;
         padding: 12px 15px;
         border-radius: 10px;
         background: #f1f8f5;
         margin-bottom: 15px;
     }

     .remarks-icon {
         width: 42px;
         height: 42px;
         min-width: 42px;
         display: flex;
         align-items: center;
         justify-content: center;
         border-radius: 50%;
         background: #198754;
         color: #fff;
         font-size: 18px;
     }

     .remarks-title {
         font-size: 16px;
         font-weight: 600;
         color: #212529;
     }

     .remarks-subtitle {
         font-size: 12px;
         color: #6c757d;
         margin-top: 2px;
     }


     /* Remarks box */

     .remarks-content-box {
         position: relative;
         padding: 16px;
         border: 1px solid #dee2e6;
         border-left: 4px solid #198754;
         border-radius: 8px;
         background: #fff;
     }


     /* Label */

     .remarks-label {
         font-size: 13px;
         font-weight: 600;
         color: #198754;
         margin-bottom: 8px;
     }


     /* Actual remarks */

     .remarks-text {
         font-size: 14px;
         line-height: 1.7;
         color: #343a40;
         text-align: justify;
         white-space: pre-wrap;
         word-break: break-word;
     }


     /* Footer */

     .remarks-footer {
         margin-top: 12px;
         padding: 8px 12px;
         border-radius: 6px;
         background: #f8f9fa;
         color: #6c757d;
         font-size: 12px;
     }