:root {
       --monitor-white-color: #FFFFFF;
       --monitor-primary-color: #00127A;
       --monitor-easter-sky: #F3FCFE;
       --monitor-midnight-haze: #475467;
       --monitor-slate-charcoal: #344054;
       --monitor-neutral-gray: #f1f1f1;
       --monitor-dark-grayish-blue: #6b7280;
       --monitor-cool-toned-gray: #e5e7eb;
       --monitor-alice-blue: #f7f9fc;
       --monitor-ultra-white: #fafcff;
       --monitor-muted: #6b7280;
       --monitor-navy-blue: #000d5a;
       --monitor-blue-ribbon: #2154ff;
       --monitor-very-pale: #eaf1ff;
       --monitor-azure-blue: #007bff;
       --monitor-very-light-soft-gray: #ecedef;
       --monitor-cool-toned: #f7f8ff;
       --monitor-red-color: #DC3545;
   }

   .monitor-btn {
       margin-top: 9px;
       padding: 12px 20px;
       background: var(--tech-dark-blue);
       border: 2px solid var(--tech-dark-blue);
       border-radius: 6px;
       font-size: 17px;
       font-weight: 700;
       cursor: pointer;
       transition: 0.3s ease;
   }

   /* Monitoring purchase required model */
   .monitoring-info-modal {
       border: 0;
       border-radius: 22px;
       overflow: hidden;
       background: var(--monitor-white-color);
       box-shadow: 0 20px 60px rgba(0, 18, 122, 0.12);
   }

   .monitoring-info-modal .modal-body {
       padding: 40px 35px;
   }

   .monitoring-message-wrapper {
       text-align: center;
   }

   .monitoring-icon {
       width: 84px;
       height: 84px;
       margin: 0 auto 24px;
       border-radius: 50%;
       background: var(--monitor-easter-sky);
       border: 1px solid rgba(0, 18, 122, 0.08);
       display: flex;
       align-items: center;
       justify-content: center;
   }

   .monitoring-title {
       color: var(--monitor-primary-color);
       font-size: 24px;
       font-weight: 700;
       margin-bottom: 16px;
   }

   .monitoring-description {
       color: var(--monitor-slate-charcoal);
       font-size: 15px;
       line-height: 1.8;
       margin-bottom: 20px;
   }

   .monitoring-description strong {
       color: var(--monitor-primary-color);
       font-weight: 600;
   }

   .monitoring-note {
       background: var(--monitor-easter-sky);
       border-left: 4px solid var(--monitor-primary-color);
       border-radius: 12px;
       padding: 16px 18px;
       color: var(--monitor-midnight-haze);
       font-size: 14px;
       line-height: 1.7;
       text-align: left;
   }

   /* monitoring success purchase */
   .monitoring-success-modal {
       border: 0;
       border-radius: 22px;
       overflow: hidden;
       background: var(--monitor-white-color);
       box-shadow: 0 20px 60px rgba(0, 18, 122, 0.12);
   }

   .monitoring-success-modal .modal-body {
       padding: 40px 35px;
   }

   .success-wrapper {
       text-align: center;
   }

   .success-icon {
       width: 84px;
       height: 84px;
       margin: 0 auto 24px;
       border-radius: 50%;
       background: var(--monitor-easter-sky);
       border: 1px solid rgba(0, 18, 122, 0.08);
       display: flex;
       align-items: center;
       justify-content: center;
   }

   .success-title {
       color: var(--monitor-primary-color);
       font-size: 24px;
       font-weight: 700;
       margin-bottom: 16px;
       line-height: 1.3;
   }

   .success-message {
       color: var(--monitor-slate-charcoal);
       font-size: 15px;
       line-height: 1.8;
       margin-bottom: 20px;
   }

   .success-message strong {
       color: var(--monitor-primary-color);
       font-weight: 600;
   }

   .success-note {
       background: var(--monitor-easter-sky);
       border-left: 4px solid var(--monitor-primary-color);
       border-radius: 12px;
       padding: 16px 18px;
       color: var(--monitor-midnight-haze);
       font-size: 14px;
       line-height: 1.7;
       text-align: left;
   }

   /* Monitor tooltip */
   .ui-tooltip {
       background: var(--monitor-white-color) !important;
       color: var(--monitor-primary-color) !important;
       border: 2px solid var(--monitor-primary-color) !important;
   }

   /* monitoring limit reach */
   .monitoring-limit-modal {
       border: 0;
       border-radius: 22px;
       overflow: hidden;
       background: var(--monitor-white-color);
       box-shadow: 0 20px 60px rgba(0, 18, 122, 0.12);
   }

   .monitoring-limit-modal .modal-body {
       padding: 40px 35px;
   }

   .limit-wrapper {
       text-align: center;
   }

   .limit-icon {
       width: 84px;
       height: 84px;
       margin: 0 auto 24px;
       border-radius: 50%;
       background: var(--monitor-easter-sky);
       border: 1px solid rgba(0, 18, 122, 0.08);
       display: flex;
       align-items: center;
       justify-content: center;
   }

   .limit-title {
       color: var(--monitor-primary-color);
       font-size: 24px;
       font-weight: 700;
       margin-bottom: 16px;
   }

   .limit-message {
       color: var(--monitor-slate-charcoal);
       font-size: 15px;
       line-height: 1.8;
       margin-bottom: 18px;
   }

   .limit-message strong {
       color: var(--monitor-primary-color);
       font-weight: 600;
   }

   .limit-note {
       background: var(--monitor-easter-sky);
       border-left: 4px solid var(--monitor-primary-color);
       border-radius: 12px;
       padding: 16px 18px;
       color: var(--monitor-midnight-haze);
       font-size: 14px;
       line-height: 1.7;
       text-align: left;
   }

   .icon-box {
       width: 60px;
       height: 60px;
       border-radius: 14px;
       background: #edf3ff;
       color: #00127A;

       display: flex;
       align-items: center;
       justify-content: center;
   }

   .icon-box i {
       font-size: 24px;
   }

   .purple {
       background: #f3e8ff;
       color: #9333ea;
   }

   /* monitoring list */
   .monitor-div {
       margin: 15rem auto 10rem auto !important;
       background: var(--monitor-white-color);
       border-radius: 20px;
       padding: 30px;
       box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
       border: 1px solid var(--monitor-neutral-gray);
   }

   .page-header h1 {
       margin: 0;
       color: var(--monitor-primary-color);
       font-size: 40px;
       font-weight: 700;
   }

   .page-header p {
       color: var(--monitor-dark-grayish-blue);
       margin-top: 10px;
   }

   .summary-grid {
       display: grid;
       grid-template-columns: repeat(2, 1fr);
       gap: 20px;
       margin-top: 30px;
   }

   .summary-card {
       background: var(--monitor-white-color);
       border-radius: 16px;
       padding: 25px;
       display: flex;
       align-items: center;
       gap: 20px;
       box-shadow: 0 5px 25px rgba(0, 0, 0, .05);
   }

   .summary-card h5 {
       margin: 0;
       color: var(--monitor-muted);
       font-size: 14px;
   }

   .summary-card h2 {
       margin-top: 8px;
       color: var(--monitor-primary-color);
       font-size: 20px;
       font-weight: 500;
   }

   .icon {
       width: 60px;
       height: 60px;
       border-radius: 14px;
       background: var(--monitor-easter-sky);
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 24px;
   }

   .toolbar {
       display: flex;
       gap: 15px;
       margin: 30px 0;
       position: relative;
       align-items: flex-start;
       justify-content: space-between;
       gap: 20px;
       flex-wrap: wrap;
   }

   .search-input {
       height: 50px;
       border: 1px solid var(--monitor-cool-toned-gray);
       border-radius: 12px;
       padding: 0 15px;
       font-size: 15px;
       background: var(--monitor-white-color);
       flex: 1;
   }

   .rows-per-page {
       display: flex;
       align-items: center;
       gap: 10px;
       flex: 1;
       justify-content: end;
   }

   .rows-per-page select {
       /* width: 80px; */
       height: 50px;
       border: 1px solid var(--monitor-cool-toned-gray);
       border-radius: 10px;
       padding: 0 10px;
       text-align: center;
       background: var(--monitor-white-color);
   }

   /* monitor list table */
   .table-wrapper {
       background: var(--monitor-white-color);
       border-radius: 18px;
       overflow: hidden;
       box-shadow: 0 5px 25px rgba(0, 0, 0, .05);
   }

   .monitor-table {
       width: 100%;
       border-collapse: collapse;
       white-space: nowrap;
   }

   .monitor-table thead {
       background: var(--monitor-alice-blue);
   }

   .monitor-table th {
       text-align: left;
       padding: 20px;
       font-size: 14px;
       color: var(--monitor-primary-color);
   }

   .monitor-table td {
       padding: 20px;
       border-bottom: 1px solid var(--monitor-easter-sky);
   }

   .monitor-table tbody tr:hover {
       background: var(--monitor-ultra-white);
   }

   .table-footer {
       display: flex;
       justify-content: space-between;
       align-items: center;
       margin: 25px 0px;
   }

   .business_name {
       color: var(--monitor-muted);
       font-weight: 700;
   }

   .btn-remove-primary {
       display: flex;
       align-items: center;
       /* justify-content: center;
        text-decoration: none;
        padding: 12px 10px; */
       /* border-radius: 12px; */
       font-weight: 600;
       /* font-size: 15px; */
       gap: 10px;
       background: var(--monitor-red-color);
       color: var(--monitor-white-color);
       margin: 0px;
       border: 2px solid var(--monitor-red-color);
   }

   .btn-remove-primary:hover {
       background: var(--monitor-red-color) !important;
       color: var(--monitor-white-color) !important;
       border: 2px solid var(--monitor-red-color) !important;
   }

   .btn-remove-primary:focus {
       background: var(--monitor-red-color) !important;
       color: var(--monitor-white-color) !important;
       border: 2px solid var(--monitor-red-color) !important;
   }

   .btn-remove-primary:focus:before {
       width: 0;
   }

   .btn-credit-report {
       display: flex;
       align-items: center;
       /* justify-content: center;
        text-decoration: none;
        padding: 12px 10px; */
       /* border-radius: 12px; */
       font-weight: 600;
       /* font-size: 15px; */
       gap: 10px;
       background: var(--monitor-primary-color);
       color: var(--monitor-white-color);
       margin: 0px;
   }

   .btn-credit-report:focus {
       background: var(--monitor-primary-color) !important;
       color: var(--monitor-white-color) !important;
   }

   .fa-trash-o {
       font-size: 15px;
   }

   /* remove button */
   .btn-remove-monitor {
       background: var(--monitor-red-color);
       color: var(--monitor-white-color);
       border: 2px solid var(--monitor-red-color);
       padding: 10px 24px;
       border-radius: 8px;
       font-weight: 600;
       margin-left: 10px;
   }

   .btn-remove-monitor:hover {
       background: var(--monitor-navy-blue);
   }

   .btn-cancel-monitor {
       background: var(--monitor-white-color);
       color: var(--monitor-primary-color);
       border: 2px solid var(--monitor-primary-color);
       padding: 10px 24px;
       border-radius: 8px;
       font-weight: 600;
   }

   .swal2-popup {
       border-radius: 15px;
   }

   .swal2-title {
       color: var(--monitor-primary-color);
       font-weight: 700;
   }

   /* list page business css */
   .business-info-monitor-page {
       display: flex;
       align-items: center;
       gap: 12px;
       font-weight: 600;
       white-space: normal;
   }

   .avatar {
       width: 42px;
       height: 42px;
       border-radius: 50%;
       background: var(--monitor-very-pale);
       color: var(--monitor-blue-ribbon);
       display: flex;
       align-items: center;
       justify-content: center;
       font-weight: 700;
       flex: 0 0 auto;
   }

   .action-button {
       display: flex;
       align-items: center;
       flex-wrap: wrap;
       gap: 10px;
   }

   /* business drop down */
   .company-search-wrapper {
       position: relative;
   }

   .business-suggestion-dropdown {
       position: absolute;
       /* width: 100%; */
       background: var(--monitor-white-color);
       border: 1px solid #ddd;
       border-radius: 8px;
       z-index: 999;
       box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
       top: 100%;
       color: var(--monitor-azure-blue);
   }

   .business-suggestion-item,
   .business-suggestion-empty {
       padding: 12px 14px;
       border-bottom: 1px solid #eee;
   }

   .business-suggestion-item {
       padding: 12px 14px;
       /* font-size: 23px; */
       font-weight: 400;
       line-height: 1.35;
       color: #0072ff;
       cursor: pointer;
       text-transform: uppercase;
       display: flex;
       justify-content: space-between;
       align-items: center;
       gap: 15px;
   }

   .business-suggestion-item:nth-child(odd) {
       background: var(--monitor-very-light-soft-gray);
   }

   .business-suggestion-item:nth-child(even) {
       background: var(--monitor-cool-toned);
   }

   /* .business-suggestion-item:hover {
       background: #eef2ff;
       color: #00127A;
   } */

   .business-suggestion-pagination {
       padding: 10px;
       display: flex;
       justify-content: space-between;
       align-items: center;
   }

   .business-page-btn {
       border: none;
       background: var(--monitor-primary-color);
       color: var(--monitor-white-color);
       padding: 6px 12px;
       border-radius: 5px;
   }

   .selected-business-box {
       margin: 0px 0px 30px 0px;
   }

   .add-monitor-business {
       margin: 0;
       flex: 0 0 auto;
       padding: 5px 20px;
   }

   /* Responsive */

   @media(max-width:991px) {
       .summary-grid {
           grid-template-columns: 1fr;
       }

       .toolbar {
           flex-direction: column;
       }

       .table-footer {
           flex-direction: column;
           gap: 20px;
       }

       .search-input {
           padding: 10px 15px;
       }
   }

   @media (max-width: 768px) {

       .monitor-table thead {
           display: none;
       }

       .monitor-table,
       .monitor-table tbody,
       .monitor-table tr,
       .monitor-table td {
           display: block;
           width: 100%;
       }

       .monitor-table tr {
           background: var(--monitor-white-color);
           border: 1px solid var(--monitor-easter-sky);
           border-radius: 12px;
           padding: 12px;
           margin-bottom: 16px;
       }

       .monitor-table td {
           display: flex;
           justify-content: space-between;
           align-items: flex-start;
           gap: 10px;
           padding: 8px 0;
           border: none;
           white-space: normal;
           text-align: right;
       }

       .monitor-table td::before {
           content: attr(data-label);
           font-weight: 600;
           color: var(--monitor-dark-grayish-blue);
           min-width: 110px;
           text-align: left;
       }

       .monitor-table td:last-child {
           padding-top: 12px;
       }

       .monitor-table td:last-child .btn {
           width: auto;
       }

       .business-info-monitor-page {
           justify-content: flex-end;
           text-align: right;
           flex-wrap: wrap;
       }
   }

   @media only screen and (max-width:767px) {
       .monitor-btn {
           text-align: center;
       }
   }

   @media(max-width:576px) {
       .table-wrapper {
           overflow-x: auto;
       }

       .monitor-table td:last-child {
           flex-direction: column;
       }

       .business_name {
           font-size: 13px;
       }

       .business-info-monitor-page {
           font-size: 13px;
       }
   }