/* Loader blocks for sidebar list */
.ef-shimmer-block {
  height: 16px;
  margin: 0.5rem 1rem;
  border-radius: 8px;
  background: -webkit-gradient(linear, left top, right top, color-stop(25%, #e0e0e0), color-stop(50%, #f8f8f8), color-stop(75%, #e0e0e0));
  background: linear-gradient(90deg, #e0e0e0 25%, #f8f8f8 50%, #e0e0e0 75%);
  background-size: 200% 100%;
  -webkit-animation: ef-shimmer 1.4s infinite;
          animation: ef-shimmer 1.4s infinite;
}

.ef-shimmer-block.w-100 { width: 100%; }
.ef-shimmer-block.w-75 { width: 75%; }
.ef-shimmer-block.w-60 { width: 60%; }

@keyframes ef-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}


/* Sidebar loader container */
.ef-sidebar-loader {
  padding: 2rem 1.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem;
}

/* Shimmer blocks */
.ef-shimmer-block {
  height: 16px;
  width: 100%;
  border-radius: 8px;
  background: -webkit-gradient(linear, left top, right top, color-stop(25%, #e0e0e0), color-stop(50%, #f8f8f8), color-stop(75%, #e0e0e0));
  background: linear-gradient(90deg, #e0e0e0 25%, #f8f8f8 50%, #e0e0e0 75%);
  background-size: 200% 100%;
  -webkit-animation: ef-shimmer 1.5s infinite;
          animation: ef-shimmer 1.5s infinite;
}

.ef-shimmer-block.w-75 { width: 75%; }
.ef-shimmer-block.w-50 { width: 50%; }
.ef-shimmer-block.w-90 { width: 90%; }

/* Shimmer animation keyframes */
@-webkit-keyframes ef-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@keyframes ef-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

  /* Base styles */
  .ef-card {
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    background: #fff;
    padding: 1.25rem;
    -webkit-transition: -webkit-box-shadow 0.3s;
    transition: -webkit-box-shadow 0.3s;
    transition: box-shadow 0.3s;
    transition: box-shadow 0.3s, -webkit-box-shadow 0.3s;
  }

  .ef-card:hover {
    -webkit-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  }

  .ef-card-title {
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: 1rem;
    color: #333;
  }

  .ef-form-control {
    border-radius: 8px;
    border-color: #ccc;
    padding: 0.55rem 0.85rem;
    font-size: 0.95rem;
  }

  .ef-form-control:focus {
    border-color: #5a5af3;
    -webkit-box-shadow: 0 0 0 2px rgba(90, 90, 243, 0.15);
            box-shadow: 0 0 0 2px rgba(90, 90, 243, 0.15);
  }

  .ef-btn {
    border-radius: 8px;
    padding: 0.6rem 1.2rem;
    font-weight: 600;
  }

  #resultsSection {
    background-color: #f9f9fb;
    border-left: 1px solid #ddd;
    padding-left: 1.5rem;
    border-radius: 12px 0 0 12px;
  }

  #resultsSection h5 {
    font-size: 1.1rem;
    font-weight: 600;
  }

  .ef-table th {
    font-weight: 500;
    background-color: #f5f5f5;
    font-size: 0.9rem;
  }

  .ef-table td {
    font-size: 0.95rem;
  }


 .opportunity-html-content {
        font-family: 'Rajdhani', sans-serif;
        color: #333;
        line-height: 1.6;
    }

    .opportunity-html-content h1,
    .opportunity-html-content h2,
    .opportunity-html-content h3 {
        font-family: 'Orbitron', sans-serif;
        color: #1a202c;
        margin-top: 1rem;
        margin-bottom: 0.5rem;
    }

    .opportunity-html-content li {
        margin-left: 1.2rem;
        list-style-type: disc;
    }

    .opportunity-html-content br {
        display: block;
        margin-bottom: 0.5rem;
    }

    <style>.deal-summary-html h1,
    .deal-summary-html h2 {
        font-weight: 600;
        color: #1a202c;
        margin-top: 1rem;
    }

    .deal-summary-html ul {
        padding-left: 1.2rem;
    }

    .deal-summary-html table {
        width: 100%;
        margin-top: 1rem;
        border-collapse: collapse;
    }

    .deal-summary-html table,
    .deal-summary-html th,
    .deal-summary-html td {
        border: 1px solid #ddd;
    }

    .deal-summary-html th,
    .deal-summary-html td {
        padding: 0.75rem;
    }

    .chart-container {
        width: 100%;
        min-height: 250px;
        max-height: 350px;
        position: relative;
    }

    .chart-container canvas {
        width: 100% !important;
        height: 100% !important;
    }
.status-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #ccc; /* Default grey */
    display: inline-block;
    -webkit-transition: background-color 0.3s ease;
    transition: background-color 0.3s ease;
}

.status-dot.active {
    background-color: #28a745; /* Bootstrap success green */
    -webkit-animation: pulse 1.2s infinite;
            animation: pulse 1.2s infinite;
}

@keyframes pulse {
    0% { -webkit-box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.5); box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.5); }
    70% { -webkit-box-shadow: 0 0 0 10px rgba(40, 167, 69, 0); box-shadow: 0 0 0 10px rgba(40, 167, 69, 0); }
    100% { -webkit-box-shadow: 0 0 0 0 rgba(40, 167, 69, 0); box-shadow: 0 0 0 0 rgba(40, 167, 69, 0); }
}

.animate-pulse {
    -webkit-animation: pulse 1.5s infinite;
            animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; }
    50% { -webkit-transform: scale(1.02); transform: scale(1.02); opacity: 0.85; }
    100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; }
}
.summary-card {
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.summary-card:hover {
    -webkit-transform: translateY(-2px);
            transform: translateY(-2px);
    -webkit-box-shadow: 0 8px 20px rgba(0,0,0,0.05);
            box-shadow: 0 8px 20px rgba(0,0,0,0.05);
}
.summary-card h4 {
    font-size: 1.6rem;
}
.summary-card i {
    font-size: 1.2rem;
}
    .admin-table th {
        font-weight: 600;
        font-size: 0.9rem;
    }

    .admin-table td {
        font-size: 0.9rem;
        vertical-align: middle;
    }

    .table-hover tbody tr:hover {
        background-color: #f9fafc;
    }
/* Step Tracker */
  .info-panel {
    background-color: #f9fafb;
    border: 1px solid #e0e6ed;
    border-radius: 12px;
    padding: 24px;
    /* max-width: 900px; */
    margin: auto;
    font-family: 'Segoe UI', sans-serif;
    color: #333;
  }

  .info-panel h5 {
    font-size: 20px;
    margin-bottom: 16px;
    font-weight: 600;
    color: #1a1a1a;
  }

  .info-panel p {
    font-size: 15px;
    margin-bottom: 16px;
    line-height: 1.6;
  }

  .info-box {
    background-color: #eaf4ff;
    border-left: 4px solid #409eff;
    padding: 16px;
    border-radius: 8px;
    font-size: 14px;
    margin-bottom: 24px;
  }

  .example-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 20px;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }

  .example-box {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    min-width: 260px;
    background-color: #ffffff;
    border: 1px solid #dce3ea;
    border-radius: 10px;
    padding: 16px;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    text-align: center;
  }

  .example-box .title {
    font-size: 13px;
    color: #777;
    margin-bottom: 8px;
  }

  .example-box .label {
    font-weight: 600;
    font-size: 15px;
    color: #222;
  }

  .example-box .value {
    font-size: 15px;
    color: #2e8b57;
    margin-top: 2px;
  }

  .example-box .note {
    font-size: 13px;
    color: #666;
    margin-top: 8px;
  }

  .footer-note {
    font-size: 13px;
    color: #888;
    text-align: center;
    margin-top: 24px;
  }
  
.is-invalid { border-color: #dc3545 !important; }

.inv-step-tracker {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 10px;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.inv-step {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding: 10px 12px;
  background: #f0f2f5;
  text-align: center;
  border-radius: 4px;
  font-weight: 500;
  color: #777;
}
.inv-step.active {
  background-color: #0d6efd;
  color: #fff;
}

/* Step Panels */
.inv-step-panel {
  display: none;
}
.inv-step-panel.active {
  display: block;
}

/* Navigation Buttons */
.inv-nav-buttons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}



.inv-tag {
  border: 1px solid #ddd;
  padding: 1rem;
  margin-bottom: 1rem;
  border-radius: 8px;
  background: #f9f9f9;
}
.selected-wrapper {
  border-top: 1px solid #ddd;
  padding-top: 1rem;
}
.inv-tag input {
  margin-bottom: 0;
}
.custom-tab-nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.5rem;
  border-bottom: 2px solid #e0e0e0;
  margin-bottom: 1.5rem;
  padding-left: 0;
}

.custom-tab-btn {
  background: none;
  border: none;
  padding: 0.75rem 1.25rem;
  font-weight: 500;
  font-size: 1rem;
  color: #6c757d;
  border-radius: 0.5rem 0.5rem 0 0;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  cursor: pointer;
  position: relative;
}

.custom-tab-btn:hover {
  background-color: #f8f9fa;
  color: #0d6efd;
}

.custom-tab-btn.active {
  color: #0d6efd;
  background-color: #fff;
  -webkit-box-shadow: inset 0 -2px 0 #0d6efd;
          box-shadow: inset 0 -2px 0 #0d6efd;
}

/* Optional: remove default focus outline */
.custom-tab-btn:focus {
  outline: none;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.selected-list .inv-tag {
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 0.5rem;
  padding: 1rem;
  margin-bottom: 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
}

.inv-details {
  min-width: 160px;
}


.min-w-100 {
  min-width: 100px;
}
.min-w-150 {
  min-width: 150px;
}

.selected-list .form-control-sm {
  font-size: 0.875rem;
  padding: 0.25rem 0.5rem;
}

.inv-tag .btn-danger {
  padding: 0.25rem 0.5rem;
}

.inv-inputs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.inv-inputs input {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 150px;
          flex: 1 1 150px;
  padding: 6px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.inv-tag-remove {
  background: #dc3545;
  color: white;
  border: none;
  padding: 6px 10px;
  border-radius: 4px;
  cursor: pointer;
}

.inv-search {
  border: none;
  border-bottom: 2px solid #ccc;
  border-radius: 0;
  padding: 0.5rem 0;
  font-size: 1rem;
  width: 100%;
  outline: none;
}
.inv-search:focus {
  border-color: #007bff;
  -webkit-box-shadow: none;
          box-shadow: none;
}
.inv-card {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 1rem;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  background: white;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.05);
          box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  margin-bottom: 1rem;
}
.inv-card:hover {
  -webkit-box-shadow: 0 4px 6px rgba(0,0,0,0.1);
          box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.inv-add-btn {
  background-color: #0d6efd;
  border: none;
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 5px;
  font-size: 0.875rem;
}
.inv-add-btn:hover {
  background-color: #0b5ed7;
}
.inv-tag {
  background: #f8f9fa;
  border-radius: 5px;
  padding: 0.5rem 0.75rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
}
.inv-tag-remove {
  background: none;
  border: none;
  color: #dc3545;
  font-size: 1.2rem;
  cursor: pointer;
}
/* :root {
    --btn-primary-bg: #0abe00;
    --btn-primary-font: #ffffff;
    --btn-primary-border: #0abe00;
    --btn-primary-hover-bg: #099700;
    --btn-primary-hover-border: #099700;
} */

/* Override Bootstrap Primary Button Colors */
/* .btn-primary {
    background-color: var(--btn-primary-bg) !important;
    color: var(--btn-primary-font) !important;
    border-color: var(--btn-primary-border) !important;
}

.btn-primary:hover, 
.btn-primary:focus, 
.btn-primary:active {
    background-color: var(--btn-primary-hover-bg) !important;
    border-color: var(--btn-primary-hover-border) !important;
    color: var(--btn-primary-font) !important;
} */
.investor-add-card {
  background-color: #f9f9fb;
  border: 1px solid #e1e4ea;
  border-radius: 12px;
  padding: 32px 24px;
  text-align: center;
  -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  max-width: 480px;
  margin: 40px auto;
}

.investor-add-card h5 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 12px;
  color: #222;
}

.investor-add-card p {
  font-size: 0.95rem;
  color: #555;
  margin-bottom: 20px;
}

.investor-add-btn {
  background-color: white;
  color: #0d6efd;
  border: 1px solid #0d6efd;
  padding: 10px 20px;
  font-size: 0.95rem;
  font-weight: 500;
  border-radius: 8px;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.investor-add-btn:hover {
  background-color: #0d6efd;
  color: white;
  -webkit-box-shadow: 0 2px 8px rgba(13, 110, 253, 0.2);
          box-shadow: 0 2px 8px rgba(13, 110, 253, 0.2);
}


@-webkit-keyframes flashHighlight {
  0%, 100% { background-color: #fff3cd; }
  50% { background-color: #ffe8a1; }
}

@keyframes flashHighlight {
  0%, 100% { background-color: #fff3cd; }
  50% { background-color: #ffe8a1; }
}

.flash-highlight {
  -webkit-animation: flashHighlight 0.8s ease-in-out 5;
          animation: flashHighlight 0.8s ease-in-out 5;
}

.input-group-no-center {
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}


.style1 {
    max-width: 15%;
    min-width: 15%
}
.style2 {
    max-height: 25px
}
.style3 {
    max-height: 25px
}
.style4 {
    max-height: 25px
}
.style5 {
    max-width: 52px
}
.style6 {
    width: 150px;
    height: 50px
}
.style7 {
    width: 320px;
    height: 50px
}
.style8 {
    max-width: 700px;
    min-width: 300px
}
.style9 {}
.style10 {}
.style11 {
    max-width: 120px;
    min-width: 120px;
    width: 25%
}
.style12 {}
.style13 {
    min-width: 120px;
    max-width: 120px
}
.style14 {
    margin-top: 0px
}
.style15 {}
.style16 {
    height: 100vh
}
.style17 {}
.style18 {
    margin-top: 12px
}
.style19 {}

.iti__flag {background-image: url("path/to/flags.png");}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .iti__flag {background-image: url("path/to/flags@2x.png");}
}

.style20 {
    height: 100vh;
    background-color: #F0F1F5
}

.style21 {
    max-width: 250px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    margin-top: 20px;
    margin-left: 20px;
    height: 95vh
}

.style22 {
    color: 111111;
    margin-right: 7px
}

.style23 {
    color: #c5c6c6;
    margin-top: 5px;
    margin-bottom: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    font-size: 14px
}

.style23:active {
    background-color: #f6f9fc
}

.style23:hover {
    background-color: #F6F9FC
}

.style24 {
    margin-right: 10px
}

.style23.active {}

.style23.active:focus {
    background-color: #f6f9fc
}

.style25 {
    margin-top: 20px;
    margin-bottom: 20px;
    height: 95vh
}

.style26 {
}

.style23.active:visited {
    background-color: #f6f9fc
}

.style27 {
    border-bottom-width: 8px;
    border-left-width: 8px;
    border-right-width: 8px
}

.style28 {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px
}

.style29 {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px
}

.style29:hover {
    background-color: rgba(0, 0, 0, 0.03)
}

.style30 {
    max-width: 10%
}

.style31 {
    max-width: 15%
}

.style32 {
    margin-right: 8px
}

.style33 {
    margin-right: 8px
}

.style34 {
    margin-right: 8px
}

.style35 {
    margin-right: 8px
}

.style36 {
    margin-right: 8px
}

.style37 {
    margin-right: 10px
}

.style38 {
    margin-right: 6px
}

.style39 {
    margin-right: 8px
}

.style40 {
    margin-right: 7px
}

.style41 {
    margin-right: 8px
}

.style42 {
    margin-bottom: 5px}

.style43 {
    margin-top: 5px;
    margin-bottom: 5px
}

.style44 {
    margin-top: 5px;
    margin-bottom: 5px
}

.style45 {
    margin-top: 5px;
    margin-bottom: 5px
}

.style46 {
    margin-top: 5px;
    margin-bottom: 5px;
    background-color: #0d6efd;
    color:#fff;
}

.style47 {
    margin-top: 5px;
    margin-bottom: 5px
}

.style48 {
    margin-top: 5px;
    margin-bottom: 5px
}

.style49 {
    margin-top: 5px;
    margin-bottom: 5px
}

/* .active {
background-color: #000;
} */

.style50 {
    margin-right: 13px
}

.form {
    font-family: 'Roboto', sans-serif !important;
}

/* @font-face {
font-family: 'CalibreBlack';
src: url('/assets/fonts/CalibreBlack.ttf') format('truetype'), 
    url('/assets/fonts/CalibreBlack.otf') format("opentype");
}

@font-face {
font-family: 'CalibreBold';
src: url('/assets/fonts/CalibreBold.ttf') format('truetype'), 
    url('/assets/fonts/CalibreBold.otf') format("opentype");
} */

/* @font-face {
font-family: 'CalibreRegular';
src: url('/assets/fonts/CalibreRegular.ttf') format('truetype'), 
    url('/assets/fonts/CalibreRegular.otf') format("opentype");
}

h1 {
font-family: 'CalibreBold' !important; 
}

h2 {
font-family: 'CalibreRegular' !important; 
}

h3 {
font-family: 'CalibreRegular' !important; 
}

h4 {
font-family: 'CalibreRegular' !important; 
}

.col-form-label {
    font-family: 'CalibreRegular' !important;
    font-size: 14px; 
}

.form-label {
    font-family: 'CalibreRegular' !important; 
}


p {
font-family: 'CalibreRegular' !important; 
}

.row {
   font-family: 'CalibreRegular' !important;  
}

*/

h1 {
font-weight: 600;
}

p {
  font-family: 'Roboto', sans-serif;
}

.style51 {
    margin-top: 30px;
    max-width: 1440px
}

.style52 {
    font-family: 'Roboto', sans-serif;
    padding: 10px 10px 10px 11px;
    background-color: rgba(0, 0, 0, 0.1)
}

.style53 {
    font-size: 15px;
    /* color: #333333 !important; */
    color: #333333;
    margin-left: 20px;
}

.style54 {
    font-size: 15px
}

.style55 {}

.style56 {
    background-color: rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    padding: 20px
}

.style57 {
    background-color: #fff;
    z-index: 0;
}

.style58 {
    background-color: #fff
}

.style59 {
    background-color: #fff;
    max-width: 1440px
}

.style60 {}

.navbar-light .navbar-nav .nav-link {
    color: #333333;
    font-size: 16px;
}

.bg-light {
    background-color: #fff !important;
}

.style61 {
    max-width: 1440px
}

.style62 {
    max-width: 1440px;
    margin-top: 20px
}

.style63 {
    max-height: 30px;
    border-top-width: 0px;
    border-left-width: 0px;
    border-right-width: 0px;
    border-color: #000
}

.style64 {
    margin-top: 16px;
    color: #888
}

.style65 {
    max-height: 2px;
    min-height: 2px;
    height: 2px
}

.style66 {
    margin-right: 8px;
    color: #888888
}

.style67 {
}

.style68 {
    margin-top: 3px;
    margin-bottom: 3px
}

.style69 {
    max-height: 20px
}

.style70 {
    margin-top: -10px;
    color: #888888
}

.style71 {}

.style72 {}

.style73 {
    padding-top: 0px
}

.style74 {
    margin-top: -8px
}

.style75 {
    position: absolute;
    left: 10px;
    top: 10px
}

.style76 {
    margin-top: -5px}

.style77 {
    margin-left: 10px;
    margin-right: 10px
}

.style78 {
    max-width: 1440px
}

.style79 {
    background-size: auto;
    max-height: 447px;
    min-width: 200px
}

h6 {
    color: #888888;
}

.style80 {
    min-width: 300px
}

.style81 {
    text-align: center;
    margin-top: 3px;
    font-size: 0.8rem
}

.style82 {
    margin-bottom: 1rem;
    z-index:-1;
}

.style83 {
    max-width: 100px;
    max-height: 100px
}

.style84 {
    max-width: 50px;
    max-height: 50px
}

.style85 {
    max-width: 90px;
    max-height: 90px
}

.style86 {}

.style87 {
    clear: none
}

.style88 {
    margin-top: 6px
}

.style89 {
    text-align: left
}

.style90 {}

@supports (position: sticky) {
  .is-sticky {
    position: sticky;
    top: 0px;
    z-index: 1;
  }
}

.is-sticky {
    background-color: #fff;
    margin-top: 10px;
    margin-bottom: 10px;
    padding-top: 6px;
    padding-bottom: 20px;
        -webkit-box-shadow: rgb(0 0 0 / 10%) 0px 15px 10px -15px;
                box-shadow: rgb(0 0 0 / 10%) 0px 15px 10px -15px;
              
}


/* .nav-link.active, .nav-tabs .nav-item.show .nav-link {
   border-bottom: 4px;
border-color: blue !important;
}

.nav-tabs {
    border-bottom-width: 3px
   
} */

/* #tabs{
	background: #007b5e;
    color: #eee;
} */
/* #tabs h6.section-title{
    color: #eee;
} */

/* #tabs .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
 
    background-color: #fff;
    border-color: transparent transparent #f3f3f3;
    border-bottom: 4px solid #32bf6f !important;
    font-size: 20px;
    font-weight: bold;
    
} */
#tabs .nav-tabs .nav-link {
    border: 1px solid transparent;
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;
    color: #eee;
    font-size: 20px;
    
}

.nav-link{
    color: #000;
    border: 0 !important;

}

.nav-tabs {
    border-bottom-color: rgb(234, 234, 234);
    border-bottom-style: solid;
    padding-bottom: 0px;
}

.style91 {
    min-width: 100px;
    position: absolute;
    right: 0px
}

.style92 {
    border: 0px !important;
}

.style93 {
    left: 0px;
    top: 0px;
    float: none;
    clear: none;
    min-width: 300px
}

.style94 {
    padding: 20px;
    border-width: 1px;
    border-color: #eaeaea
}

.style95 {
    margin-bottom: 20px
}

.style96 {
    margin-left: 10px;
    margin-right: 10px
}

.style97 {
    margin-left: 10px;
    margin-right: 10px
}

.style98 {
    min-width: 350px;
    text-align: left
}

.style99 {
    height: 0.5rem
}

.style100 {
    height: 0.5rem
}

.style101 {
    margin-top: 3px
}

.style102 {
    max-width: 1440px
}

.style103 {
    min-width: 250px}

.style104 {
    text-align: right
}

.style105 {
    background-size: cover;
    background-image: url("../assets/images/registerbg.png")
}

.style106 {}

.style107 {
    color: #fff
}

.style108 {
    background-image: url("../assets/images/bg.png");
    height: 100%;
    min-height: 100%
}

.style109 {
    color: #fff
}

.style110 {
    height: 100vh;
    margin-left: 20px;
    margin-right: 20px
}

.style111 {
    text-align: left
}

.style112 {
    text-align: left
}

.style113 {
    width: 300px
}

.style114 {
    margin-top: 10px
}

.style115 {
    margin-bottom: 40px
}

.style116 {
    min-width: 190px;
    max-width: 190px
}

.style117 {
    margin-top: 1rem
}

.style118 {}

.style119 {}

.style120 {
    max-width: 1440px
}

.style121 {
    min-height: 70px;
    font-size: 2rem
}

.style122 {
    max-width: 1440px
}

.style123 {
    border-width: 2px;
    border-color: #0d6efd;
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    border-bottom-left-radius: 100px;
    border-bottom-right-radius: 100px;
    width: 40px;
    height: 40px
}

.style124 {
    border-width: 5px;
    border-color: #0d6efd;
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    border-bottom-left-radius: 100px;
    border-bottom-right-radius: 100px;
    width: 50px;
    height: 50px
}

.style125 {
    max-width: 40px
}

ol.list-steps {
  padding: 0;
  counter-reset: steps;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  position: relative;
  margin: 3rem 0;
}
ol.list-steps li {
  list-style: none;
  padding: 0;
  margin: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  color: #32bf6f61;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 100%;
          flex: 1 1 100%;
}
ol.list-steps li.active {
  color: #32Bf6f;
}
ol.list-steps li::before {
  counter-increment: steps;
  content: "";
  display: inline-block;
  background: #32bf6f5a;
  color: #fff;
  border-radius: 50%;
  border: 0.5rem solid #cdf4de;
  width: 2rem;
  height: 2rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 0.5rem;
}
ol.list-steps li.active::before {
  background: #32Bf6f;
  color: #fff;
  border: 0.3333333333rem solid #cdf4de;
  -webkit-animation: pulsate 1.5s infinite ease-in-out alternate;
          animation: pulsate 1.5s infinite ease-in-out alternate;
}
ol.list-steps li.done::before {
  background: #32Bf6f;
  color: #fff;
  border: 0.5rem solid #b3d7ff;
}
ol.list-steps li::after {
  position: absolute;
  z-index: -1;
  top: 0.75rem;
  display: block;
  content: "";
  width: 100%;
  height: 0.5rem;
  background: #caced1;
}
ol.list-steps li.active::after {
  background: #b3d7ff;
}
ol.list-steps li.done::after {
  background: #b3d7ff;
}
ol.list-steps li:first-child::after {
  border-top-left-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}
ol.list-steps li:last-child::after {
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
}
@-webkit-keyframes pulsate {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  to {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
}
@keyframes pulsate {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  to {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
}
.style126 {
    text-align: center
}
.style127 {}
.style128 {}
.style129 {
    line-height: 1px;
    letter-spacing: 0px
}
.style130 {
}
.style131 {
}
.style132 {
    margin-left: 20px
}
.style133 {
    margin-top: 80px;
    margin-left: 31px
}
.style134 {
    min-width: 586px
}
.style135 {
    max-width: 586px !important;
    min-width: 385px !important;
}
.style136 {
    padding-left: 30px
}
.style137 {
    margin-top: 20px
}
.style138 {
    padding-top: 80px
}
.style139 {
    height: 100%
}
.style140 {}
.style141 {
    margin-top: 50px}
.style142 {
    margin-top: 50px}
.style143 {
    padding-bottom: 9px
}
.style144 {}
.style145 {
    background-color: #fbf8f6;
    margin-top: 10px
}
.style146 {
    background-color: #fbf8f6;
    margin-top: 25px
}
.style147 {
    background-color: #fbf8f6
}
.style148 {
    max-width: 220px}
.style149 {
}
.style150 {
    max-width: 290px;
    width: 290px
}
.style151 {
    padding-top: 0.5em
}
.style152 {}
.style153 {
    max-height: 50%
}
.style154 {
    min-width: 500px
}

.big-checkbox {
    -webkit-transform: scale(2.5);
            transform: scale(2.5); /* Adjust this value to make the checkbox bigger or smaller */
    margin: 10px; /* Adds some space around the checkbox to avoid layout issues */
}

.nav-link {
    font-size: 0.88rem !important;
}

.big-select-button {
    display: inline-block;
    background-color: #007bff; /* Bootstrap primary color */
    color: white;
    padding: 10px 20px;
    margin: 5px;
    border-radius: 5px;
    -webkit-transition: background-color 0.3s ease;
    transition: background-color 0.3s ease;
}

.big-select-button:hover {
    background-color: #0056b3; /* Darker shade for hover effect */
}

.select-text {
    margin-left: 10px;
}

.custom-radio-input {
    opacity: 0;
    position: fixed;
    width: 0;
}

.custom-radio-label {
    display: inline-block;
    background-color: #f8f9fa;
    color: #212529;
    padding: 10px 20px;
    font-family: Arial, sans-serif;
    border: 2px solid #ced4da;
    border-radius: 4px;
    cursor: pointer;
    -webkit-transition: background-color 0.2s, color 0.2s;
    transition: background-color 0.2s, color 0.2s;
}

.custom-radio-input:checked + .custom-radio-label {
    background-color: #007bff;
    color: white;
    border-color: #007bff;
}

.card {
    cursor: pointer;
}
.custom-radio {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    cursor: pointer;
}

.custom-radio-input {
    opacity: 0;
    position: absolute;
}

.radio-box {
    display: inline-block;
    width: 35px; /* Increased size for a bigger radio box */
    height: 35px;
    background-color: #f8f9fa;
    border: 2px solid #ced4da;
    border-radius: 4px; /* Optional: for slightly rounded corners */
    position: relative;
    margin-right: 15px; /* Adjusted padding between the radio box and the text */
}

.custom-radio-input:checked + .radio-box {
    background-color: #007bff;
    border-color: #007bff;
}

.custom-radio-input:checked + .radio-box::after {
    content: "✓";
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    font-size: 24px; /* Increased size for a larger tick symbol */
    color: white;
}

.select-text {
    color: #212529; /* Default color for light backgrounds */
    font-family: Arial, sans-serif;
    font-size: 18px; /* Bigger text size */
    font-weight: bold; /* Bolder text */
}

/* Adjustments for dark background card */
.card.text-bg-dark .select-text {
    color: white; /* White text for dark backgrounds */
}
/* .card-body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
} */

.text-content h1, .text-content p {
    margin: 0; /* Adjust as needed */
}

.arrow-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding:10px;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.fa-arrow-right {
    color: #000; /* Adjust the color as needed */
    /* Additional styling if needed */
}

.style155 {
    min-width: 200px
}

.style156 {
    color: #32bf6f
}

.cardborder-secondary-hover:hover {
    border: 1px solid #32bf6f; /* Adjust the border color as needed */
}
 iframe {
            display: block; /* Removes the default iframe margin */
            width: 100%;
            height: 100%;
            border: none; /* Optional: Removes the default border */
        }
 .style157 {
    min-height: 500px
}
 .wappler-temp {}
 .wappler-temp {}
 .wappler-temp {}
 .wappler-temp {}
 .wappler-temp {}
 .wappler-temp {}
 .style158 {
    min-height: 900px
}
 .style159 {
    font-size: 8px
}
 
 .style160 {
    min-height: 55px
}
.mandatory {
    color: red;
}

.circle{
    width: 180px;
    height: 180px;
    border: 10px inset rgb(133,224,242);
    display: block;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-left: -100px;
    margin-top: -100px;
    border-radius: 200px;
    -webkit-animation: rotate 5s infinite linear;
    animation: rotate 5s infinite linear;
    -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.2);
            box-shadow: 0 0 5px rgba(0,0,0,0.2);
}

.circle-small{
    width: 150px;
    height: 150px;
    border: 6px outset rgb(133,224,242);
    display: block;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-left: -81px;
    margin-top: -81px;
    border-radius: 156px;
    -webkit-animation: rotate-rev 3s infinite linear;
    animation: rotate-rev 3s infinite linear;
    -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.2);
            box-shadow: 0 0 5px rgba(0,0,0,0.2);
}

.circle-big{
    width: 210px;
    height: 210px;
    border: 4px dotted rgb(133,224,242);
    display: block;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-left: -109px;
    margin-top: -109px;
    border-radius: 214px;
    -webkit-animation: rotate-rev 10s infinite linear;
    animation: rotate-rev 10s infinite linear;
}

.circle-inner{
    width: 80px;
    height: 80px;
    background-color: rgb(133,224,242);
    display: block;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-left: -40px;
    margin-top: -40px;
    border-radius: 80px;
    -webkit-animation: pulse 1.5s infinite ease-in;
    animation: pulse 1.5s infinite ease-in;
    opacity: 1;
    -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.2);
            box-shadow: 0 0 5px rgba(0,0,0,0.2);
}

.circle-inner-inner{
    width: 100px;
    height: 100px;
    background-color: rgb(74,124,134);
    display: block;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-left: -50px;
    margin-top: -50px;
    border-radius: 100px;
    -webkit-animation: pulse 1.5s infinite ease-in;
    animation: pulse 1.5s infinite ease-in;
    -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.2);
            box-shadow: 0 0 5px rgba(0,0,0,0.2);
}


/*==============ANIMATIONS=================*/

/*==============ROTATE=====================*/

@-webkit-keyframes rotate{
	0% {-webkit-transform: rotate(0deg);}
	100% {-webkit-transform: rotate(360deg);}
}

@keyframes rotate{
	0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
	100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);}
}

/*==============ROTATE-REV=================*/

@-webkit-keyframes rotate-rev{
	0% {-webkit-transform: rotate(0deg);}
	100% {-webkit-transform: rotate(-360deg);}
}

@keyframes rotate-rev{
	0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
	100% {-webkit-transform: rotate(-360deg);transform: rotate(-360deg);}
}

/*==============PULSE======================*/

@-webkit-keyframes pulse{
	0% {
        -webkit-transform: scale(0.1);
        opacity: 0.2;
    }
	50% {
        -webkit-transform: scale(1);
        opacity: 0.8;
    }
    100% {
        -webkit-transform: scale(0.1);
        opacity: 0.2;
    }
}

@keyframes pulse{
	0% {
        -webkit-transform: scale(0.1);
                transform: scale(0.1);
        opacity: 0.2;
    }
	50% {
        -webkit-transform: scale(1);
                transform: scale(1);
        opacity: 0.8;
    }
  100% {
        -webkit-transform: scale(0.1);
                transform: scale(0.1);
        opacity: 0.2;
    }
}

.style161 {
    background-color: rgba(0, 0, 0, 0.77)
}

.style162 {
    background-color: rgba(0, 0, 0, 0.77)
}

.style163 {
    max-height: 100%
}

.style164 {
}

.style165 {
    max-height: 100vh
}

.style166 {
}

.style167 {
    max-width: 1220px
}

.style168 {
    max-width: 20px;
    width: 20px
}

.style169 {
    max-width: 20px;
       -webkit-transform: scale(1.8);
               transform: scale(1.8);
    /* margin: 5px; */
}



.style170 {
    width: 20px
}

.style171 {}

.style172 {}

.sig {
    font-family: 'Pacifico', cursive;


}

.style173 {
    max-width: 900px
}

.container-fluid-dealpage {
    
  max-width: 1400px; /* Sets the maximum width of the container */
  margin: 0 auto; /* Centers the container horizontally */
  padding: 0 15px; /* Optional: Adds some padding on the sides */

}

.sectionwhite {
    background-color: #fff;
}

.style174 {
    min-height: 300px
}

.style175 {
    max-width: 60px;
}

/* .pac-container {
    z-index: 1051 !important;
}

.modal {
    overflow: visible !important;
} */

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


.style176 {
    min-height: 300px;
     z-index: 1000;
}

.style177 {
    margin: 5px
}

    /* For Firefox */
    input[type='number']::-webkit-inner-spin-button,
    input[type='number']::-webkit-outer-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }

    /* For Chrome, Safari, Edge, and Opera */
    input[type='number']::-webkit-inner-spin-button,
    input[type='number']::-webkit-outer-spin-button {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
    }
 
 /* Ensures table and cells allow content to overflow their boundaries */
table, tbody, tr, td {
    overflow: visible !important;
}

/* Positions the dropdown menu absolutely relative to its positioned ancestor */
/* .dropdown-menu {
   
    z-index: 2050; 
} */

.compact-input {
    height: 36px; /* Smaller height for a more compact look */
    font-size: 14px; /* Smaller font size for compactness */
    padding: 5px 12px; /* Reduced padding to save space yet keep text readable */
}


.modal-body {
  overflow: auto; /* Allow scrolling if needed */ background-color: #fff;
}

.table-responsive {
  overflow-x: visible !important; /* Allow horizontal scrolling */
  overflow-y: visible !important; /* Ensure dropdowns are visible */
  position: relative; /* Ensure relative positioning */
  max-width: 100%; /* Ensure table does not exceed modal width */
}

/* Ensure dropdown menus are visible within the modal */
.table-responsive .dropdown-menu {
  position: absolute; /* Position the dropdown menu absolutely */
  z-index: 1055; /* Higher than the modal's z-index */
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0); /* Ensure it appears above other elements */
}

.style178 {
    color: #dc3545
}


.style179 {
    margin-left: 10px;
    margin-right: 10px
}


.style180 {
    margin-left: 10px
}


.style181 {
    color: #f00;
}


.style182 {
  overflow: scroll !important; /* Allow horizontal scrolling */
  position: relative; /* Ensure relative positioning */
}




.style183 {
    background-color: transparent
}


.style184 {
}



.style185 {
    opacity: 0
}


.style186 {
    background-color: #f1f1f1;
    padding-top: 5px;
    padding-bottom: 5px
}


.style187 {
    font-size: 10px
}
.custom-list-item {
    border: none; /* Removes the border */
    padding: 0.5rem 0; /* Keeps padding for spacing */
    margin: 0;
}
.style188 {
}
.style189 {
    max-width: 200px
}
.style190 {
    max-width: 250px
}
/* Main Container Styling */
.main-container-wf {
    max-width: 1200px;
    margin: 0 auto; /* Centers the content */
}

/* Card Styling */
.card-option-wf {
    cursor: pointer;
    -webkit-transition: -webkit-transform 0.2s ease-in-out;
    transition: -webkit-transform 0.2s ease-in-out;
    transition: transform 0.2s ease-in-out;
    transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
    border: 2px solid #28a745;
}

.card-option-wf:hover {
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
    background-color: #e9f7ef;
}

/* Card Body Alignment */
.card-body-wf {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
}

/* Icon Styling */
.icon-wf {
    font-size: 2rem;
    margin-right: 1rem;
    color: #28a745;
}
    .card-option-wf {
            cursor: pointer;
            -webkit-transition: -webkit-transform 0.2s ease-in-out;
            transition: -webkit-transform 0.2s ease-in-out;
            transition: transform 0.2s ease-in-out;
            transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
            border: 2px solid transparent; /* Default border */
        }
        .card-option-wf.active {
            border-color: #28a745; /* Green border when selected */
        }

         .card-option-wf-selected {
            
              border-color: #28a745 !important;
            background-color: #e8f5e9 !important;
        }

        .card-option-wf:hover {
            -webkit-transform: scale(1.05);
                    transform: scale(1.05);
        }


        
        .icon-wf {
            font-size: 2rem;
            margin-right: 1rem;
        }

              .card-listing-type-selected {
                       -webkit-transition: all 0.3s ease;
            transition: all 0.3s ease;
            cursor: pointer;
     
            padding: 20px;
         
              border-color: #28a745 !important;
            background-color: #e8f5e9 !important;
              }

          .card-listing-type {
            -webkit-transition: all 0.3s ease;
            transition: all 0.3s ease;
            cursor: pointer;
            border: 2px solid #ddd;
            padding: 20px;
            background-color: #f8f9fa;
        }

        .card-listing-type:hover {
            border-color: #28a745;
            background-color: #e8f5e9;
        }

        .card-listing-type h3 {
            font-size: 1.75rem;
            margin-bottom: 1rem;
        }

        .card-listing-type button {
            font-size: 1rem;
            width: 100%;
        }

        .card-listing-type.active {
            border-color: #28a745;
            background-color: #e8f5e9;
        }

        /* Green Line beside Select Finance Option */
        .section-header {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            margin-bottom: 1.5rem;
        }

        .section-header h3 {
            margin-right: 1rem;
            font-size: 1.75rem;
        }

        .section-header .green-line {
            -webkit-box-flex: 1;
                -ms-flex-positive: 1;
                    flex-grow: 1;
            height: 3px;
            background-color: #28a745;
        }

        /* Custom class to ensure the dropdown is aligned at the top-right corner */
/* Custom class to ensure the dropdown is aligned at the top-right corner */
.dropdown-arrow-top {
    position: fixed;
    top: 10px;
    right: 20px;
    z-index: 100
}


/* Ensure dropdown menu appears aligned with the button */
.custom-dropdown-menu {
    position: fixed !important; /* Fixed positioning ensures it stays visible */
    width: 100px;  /* Adjust the width as needed for a slimmer dropdown */
    height: auto; /* This will allow for flexibility in the height depending on content */
    top: 50px !important;       /* Aligns the menu to be just below the button */
    right: 20px !important;     /* Aligns the menu with the right-hand side of the button */
    z-index: 101;               /* Ensures it is above other elements */
    width: auto;                /* Allows flexibility in the width */
    background-color: #fff;     /* Standard dropdown background */
    border-radius: 5px;         /* Softens the corners */
    -webkit-box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Adds shadow for better visibility */
}

/* Ensure dropdown closes outside of the specified area */
body.modal-open .custom-dropdown-menu {
    display: none !important; /* Dropdown will not display when modal is active */
}

/* Standard dropdown item styling */
.custom-dropdown-menu .dropdown-item {
    padding: 8px 15px;
    color: #333;
    cursor: pointer;
}

/* Add hover effects */
.custom-dropdown-menu .dropdown-item:hover {
    background-color: #f0f0f0;
}

/* Set fixed dropdown width */
@media (max-width: 767px) {
    .custom-dropdown-menu {
        width: 50%; /* Make the dropdown take up full screen width on mobile */
        /* left: 0 !important;  */
        right: 10px !important;
        top: 60px !important; /* A little lower on mobile */
    }
}

.style191 {
    max-width: 10%
}
.style192 {
    margin-right: 8px
}

.style193 {
    margin-right: 2px
}
.style194 {
    max-width: 100px
}

.style195 {
    max-width: 150px
}


.form-check {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 10px; /* Adds space between checkbox and label */
    width: 100%; /* Ensures full width for the form group */
}

.form-check-input {
    min-width: 20px; /* Ensures checkbox has a minimum width */
    height: 20px; /* Gives checkbox a consistent height */
}

.form-check-label {
    width: 100%; /* Makes sure the label takes up the remaining space */
    word-wrap: break-word; /* Ensures long text wraps */
    margin-bottom: 0;
    line-height: 1.5;
}

.sticky-container {
    position: relative !important; /* Ensure the sticky element's container has a position defined */
}

.sticky-card {
    position: sticky !important;
    top: 20px !important; /* Adjust this to where you want the card to stick */
    z-index: 100 !important; /* Ensure it appears above other elements if necessary */
}

#preloader1 {
    z-index: 1000;
    position: fixed;
    width: 100vw;
    height: 100vh;
    pointer-events: none; /* Allow scrolling while the preloader is active */
}

.style196 {
    max-width: 150px
}

.style197 {
    max-width: 150px
}

.badge[role="button"] {
    cursor: pointer;
}

.badge[role="button"].active {
    background-color: #007bff;
    color: #fff;
}


.style198 {
    max-width: 200px
}

#filter-tabs .nav-link {
    color: #333; /* Normal text color */
    padding: 8px 16px;
    border-radius: 0.25rem;
}

#filter-tabs .nav-link.active {
    background-color: #e2e2e2; /* Light cyan color for active background */
    color: #141414; /* Active text color */
    font-weight: bold;
}

.style199 {
    margin-right: 20px
}

.style200 {
    margin-right: 20px
}

/* .offcanvas {
    width: 400px !important;
} */

.offcanvas.offcanvas-end {
    width: 500px !important;
}

.style201 {
    min-width: 150px
}

.style202 {
    max-height: 20px
}

.top-menu1 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 8px; /* Space between menu items */
    padding: 10px 0;
    background-color: #ededed;
    border-bottom: 1px solid #ddd;
     border-radius: 5px 5px 0px 0px;
}

.top-menu1 .btn-group .btn {
    color: #333;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 6px 12px;
    font-size: 14px;
}

.top-menu1 .btn-group .btn:hover {
    background-color: #e7e7e7;
}

.top-menu1 .dropdown-menu {
    border-radius: 5px;
}

.top-menu1 .dropdown-item {
    color: #333;
    font-size: 13px;
    padding: 8px 15px;
}

.top-menu1 .dropdown-item:hover {
    background-color: #f5f5f5;
}

.style203 {
    margin-left: 20px
}


.card-body1 {
  color: var(--bs-card-color);
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 0px 10px 10px;
}


.style204 {
    background-color: #ededed;
    padding: 10px 5px
}


.style205 {
    background-color: #ededed
}
.image-container {
    position: relative;
    display: inline-block;
}

.image-container img {
    display: block;
    border-radius: 4px;
}

.delete-btn {
    position: absolute;
    top: -8px;
    left: -8px;
    background-color: red;
    color: white;
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 14px;
    line-height: 18px;
    text-align: center;
    cursor: pointer;
    padding: 0;
    -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.style206 {
    margin-bottom: 20px
}

.style207 {
    margin-bottom: 20px
}

@keyframes pulse {
    0% { -webkit-transform: scale(1); transform: scale(1); }
    50% { -webkit-transform: scale(1.1); transform: scale(1.1); }
    100% { -webkit-transform: scale(1); transform: scale(1); }
}

/* #dropdownMenuButton {
    -webkit-animation: pulse 1.5s infinite;
            animation: pulse 1.5s infinite;
} */

.dropdown-hover:hover .dropdown-menu {
    display: block;
    opacity: 1;
    visibility: visible;
    -webkit-transition: opacity 0.2s ease-in-out;
    transition: opacity 0.2s ease-in-out;
}

.dropdown-hover .dropdown-menu {
    display: none;
    opacity: 0;
    visibility: hidden;
    position: absolute;
}

.dropdown-hover:hover .dropdown-menu {
    display: block;
    opacity: 1;
    visibility: visible;
    -webkit-transition: opacity 0.2s ease-in-out;
    transition: opacity 0.2s ease-in-out;
}

.dropdown-hover .dropdown-menu {
    display: none;
    opacity: 0;
    visibility: hidden;
    position: absolute;
}

.dropdown-menu {
    margin-top: 0;
    border-radius: 0;
    border: 1px solid #ddd;
}
/* Base button style */
.square-btn {
    width: 120px;
    height: 120px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    text-align: center;
    font-size: 14px;
    border-radius: 8px;
    border: none;
    background-color: #007B5F; /* Dark green */
    color: white;
    -webkit-transition: background-color 0.3s, -webkit-transform 0.2s;
    transition: background-color 0.3s, -webkit-transform 0.2s;
    transition: background-color 0.3s, transform 0.2s;
    transition: background-color 0.3s, transform 0.2s, -webkit-transform 0.2s;
}

/* Icon styling */
.square-btn i {
    font-size: 24px;
    margin-bottom: 8px;
}

/* Active button state */
.square-btn.active {
    background-color: #009970; /* Slightly lighter green */
    -webkit-box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
            box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

/* Hover effect */
.square-btn:hover {
    background-color: #005F47; /* Darker green for hover */
    -webkit-transform: scale(1.05);
            transform: scale(1.05); /* Slight zoom */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .square-btn {
        width: 100px;
        height: 100px;
        font-size: 12px;
    }

    .square-btn i {
        font-size: 20px;
    }
}
.style208 {
    max-width: 10%
}
.style209 {
    margin-top: 10px
}
.style210 {
    margin-bottom: 15px;
    padding-left: 10px;
    padding-right: 10px
}
.style211 {
    margin-top: 10px
}
.style212 {
    background-color: rgba(0, 0, 0, 0.1)
}
.style213 {
    margin-top: 10px
}
.style214 {
    margin-bottom: 15px
}

    .quick-access-card {
        cursor: pointer;
        -webkit-transition: -webkit-transform 0.2s, -webkit-box-shadow 0.2s;
        transition: -webkit-transform 0.2s, -webkit-box-shadow 0.2s;
        transition: transform 0.2s, box-shadow 0.2s;
        transition: transform 0.2s, box-shadow 0.2s, -webkit-transform 0.2s, -webkit-box-shadow 0.2s;
    }

    .quick-access-card:hover {
        -webkit-transform: translateY(-5px);
                transform: translateY(-5px);
        -webkit-box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
                box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }

    #chatContainer {
        background-color: #f8f9fa;
        padding: 15px;
        border-radius: 5px;
        font-size: 0.95rem;
    }

    .alert-primary {
        background-color: #cce5ff;
        color: #004085;
    }

    .alert-secondary {
        background-color: #f1f1f1;
        color: #6c757d;
    }

    .alert-danger {
        background-color: #f8d7da;
        color: #721c24;
    }

.dropdown-menu {
    scrollbar-width: thin;
    scrollbar-color: #ccc transparent;
}

.dropdown-menu::-webkit-scrollbar {
    width: 8px;
}

.dropdown-menu::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 4px;
}



.style215 {
    color: #32bf6f;
}
/* Modal Body */
.custom-modal-body {
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
}

/* Table Container */
.custom-table-container {
    border: 0px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    /* -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
            /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
}

/* Table */
.custom-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    font-size: 14px;
    color: #333;
}

.custom-table th,
.custom-table td {
    padding: 10px 15px;
    border-bottom: 1px solid #eee;
    vertical-align: top;
}

.custom-table th {
    background-color: #f4f4f4;
    font-weight: bold;
    text-align: left;
    color: #555;
    width: 30%;
}

.custom-table td {
    background-color: #fff;
    color: #555;
}

.custom-table td.text-wrap {
    word-wrap: break-word;
    word-break: break-word;
}

/* Hover Effects */
.custom-table tr:hover td {
    background-color: #f0f0f0;
}

/* Background */
.custom-bg {
    background: linear-gradient(135deg, #2a00ff, #6029d9);
    color: white;
}

/* Left Section */
.custom-left-section {
    padding: 5%;
    text-align: center;
    position: relative;
}

.custom-logo {
    position: absolute;
    top: 20px;
    left: 30px;
    width: 150px;
}

/* Login Card */
.custom-login-card {
    background: #fff;
    padding: 40px 30px;
    /* border-radius: 12px; */
    /* -webkit-box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2); */
            /* box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2); */
    width: 85%;
    max-width: 400px;
    text-align: center;
}

/* Login Button */
.custom-login-btn {
    background-color: #6c63ff;
    border: none;
    font-size: 1rem;
    font-weight: bold;
}

.custom-login-btn:hover {
    background-color: #534fbd;
}

/* Social Buttons */
.custom-social-btn {
    width: 48%;
    padding: 10px;
    border: 1px solid #ccc;
    font-size: 1rem;
    border-radius: 5px;
}

.google-btn {
    color: #4285f4;
    border-color: #4285f4;
}

.facebook-btn {
    color: #1877f2;
    border-color: #1877f2;
}

/* Input Fields */
.custom-input {
    padding: 10px;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 5px;
}

/* Links */
.custom-link {
    color: #6c63ff;
    text-decoration: none;
    font-weight: bold;
}

.custom-link:hover {
    text-decoration: underline;
}

/* App Icons */
.custom-app-icon {
    width: 40px;
    height: auto;
}
 /* .main-container {
      padding: 40px;
      max-width: 800px;
      margin: auto;
      background-color: #f9f9f9;
      border-radius: 8px;
      -webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
              box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    } */
    .input-field {
      margin-bottom: 20px;
    }
    .btn-primary-custom {
      background-color: #4CAF50;
      border-color: #4CAF50;
    }
    .result-box {
      margin-top: 20px;
      padding: 20px;
      background-color: #ffffff;
      border: 1px solid #ddd;
      border-radius: 5px;
    }

    .card-container {
      max-width: 800px;
      margin: 40px auto;
      background: white;
      border-radius: 10px;
      -webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
              box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      padding: 20px;
    }
    .social-card {
      border: 1px solid #ddd;
      border-radius: 8px;
      margin-bottom: 20px;
      padding: 20px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-box-pack: justify;
          -ms-flex-pack: justify;
              justify-content: space-between;
    }
    .social-card img {
      width: 40px;
      height: 40px;
    }
    .social-card-content {
      -webkit-box-flex: 1;
          -ms-flex-positive: 1;
              flex-grow: 1;
      margin-left: 15px;
    }
    .btn-disconnect {
      color: #d9534f;
      border-color: #d9534f;
    }
    .btn-disconnect:hover {
      background-color: #d9534f;
      color: white;
    }
    .btn-connect {
      color: #fff;
      background-color: #5cb85c;
      border-color: #5cb85c;
    }
    .btn-connect:hover {
      background-color: #4cae4c;
    }
    .status-text {
      font-size: 14px;
      color: #6c757d;
    }

     .step-header {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      gap: 20px;
      margin-bottom: 30px;
    }
    .step-item {
      text-align: center;
    }
    .step-item img {
      width: 40px;
      height: 40px;
      margin-bottom: 10px;
    }
    .step-item h6 {
      font-size: 14px;
      font-weight: 600;
      color: #666;
    }
    .hero-text {
      text-align: center;
      margin-bottom: 30px;
    }
    .hero-text h1 {
      font-size: 32px;
      font-weight: bold;
      color: #333;
      margin-bottom: 10px;
    }
    .hero-text p {
      font-size: 16px;
      color: #666;
      line-height: 1.5;
    }
    .template-preview {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      gap: 20px;
      margin: 30px 0;
    }
    .template-card {
      width: 120px;
      height: 160px;
      background-color: #f3f3f3;
      border-radius: 8px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      font-size: 14px;
      text-align: center;
      -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
              box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
      -webkit-transition: -webkit-transform 0.3s ease;
      transition: -webkit-transform 0.3s ease;
      transition: transform 0.3s ease;
      transition: transform 0.3s ease, -webkit-transform 0.3s ease;
    }
    .template-card:hover {
      -webkit-transform: scale(1.05);
              transform: scale(1.05);
    }
    .continue-button {
      display: block;
      width: 200px;
      margin: 30px auto 0;
      text-align: center;
      font-size: 16px;
      padding: 10px 20px;
      color: #fff;
      background-color: #333;
      border: none;
      border-radius: 25px;
      text-decoration: none;
      -webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
              box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      -webkit-transition: background-color 0.3s ease;
      transition: background-color 0.3s ease;
    }
    .continue-button:hover {
      background-color: #555;
    }    .card-container {
      background: #fff;
      padding: 20px;
      border-radius: 12px;
      -webkit-box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
              box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }
    .step-header {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
          -ms-flex-pack: justify;
              justify-content: space-between;
      margin-bottom: 30px;
    }
    .step-item {
      text-align: center;
      -webkit-box-flex: 1;
          -ms-flex: 1;
              flex: 1;
    }
    .step-item svg {
      width: 40px;
      height: 40px;
      color: #666;
    }
    .step-item h6 {
      font-size: 14px;
      font-weight: bold;
      margin-top: 10px;
    }
    .hero-text h1 {
      font-size: 24px;
      font-weight: bold;
      color: #333;
    }
    .hero-text p {
      font-size: 16px;
      color: #666;
      line-height: 1.5;
    }
    .template-preview {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      gap: 20px;
      margin: 30px 0;
    }
    .template-card {
      width: 120px;
      height: 160px;
      background-color: #f3f3f3;
      border-radius: 8px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      font-size: 14px;
      text-align: center;
      -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
              box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    }
    .continue-button {
      display: block;
      width: 200px;
      margin: 30px auto 0;
      text-align: center;
      font-size: 16px;
      padding: 10px 20px;
      color: #fff;
      background-color: #333;
      border: none;
      border-radius: 25px;
      text-decoration: none;
      -webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
              box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }
    .continue-button:hover {
      background-color: #555;
    }
    .social-card {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-box-pack: justify;
          -ms-flex-pack: justify;
              justify-content: space-between;
      border: 1px solid #ddd;
      border-radius: 8px;
      padding: 20px;
      margin-bottom: 20px;
    }
    .social-card h5 {
      margin: 0;
      font-size: 16px;
    }
    .social-card p {
      margin: 0;
      font-size: 14px;
      color: #666;
    }
    .social-card button {
      min-width: 100px;
    }

        .step-header {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
          -ms-flex-pack: justify;
              justify-content: space-between;
      margin-bottom: 30px;
    }
    .step-item {
      text-align: center;
      -webkit-box-flex: 1;
          -ms-flex: 1;
              flex: 1;
    }
    .step-item svg {
      width: 40px;
      height: 40px;
      color: #666;
    }
    .step-item h6 {
      font-size: 14px;
      font-weight: bold;
      margin-top: 10px;
    }
    .hero-text h1 {
      font-size: 24px;
      font-weight: bold;
      color: #333;
    }
    .hero-text p {
      font-size: 16px;
      color: #666;
      line-height: 1.5;
    }
    .hidden {
      display: none !important;
    }
    .action-buttons {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
          -ms-flex-pack: justify;
              justify-content: space-between;
      margin-top: 30px;
    }
    .action-buttons .btn {
      min-width: 100px;
    }
/* Banner Container */
.banner-container {
    background: -webkit-gradient(linear, left top, right top, from(#2c2c2e), to(#3c3c3e));
    background: linear-gradient(90deg, #2c2c2e, #3c3c3e); /* Subtle lighter gradient */
    color: #fff; /* White text for contrast */
    text-align: center;
    padding: 20px 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    -webkit-box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
            box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow for elevation */
}

/* Banner Heading */
.banner-container h4 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 10px;
    text-transform: uppercase; /* Bold, modern feel */
    letter-spacing: 1px;
}

/* Banner Subtext */
.banner-container p {
    font-size: 1.1rem;
    font-weight: 400;
    margin: 0 auto 15px;
    max-width: 600px;
    line-height: 1.6; /* Improve readability */
}

/* Contact Info Styling */
.banner-contact {
    font-size: 1.2rem;
    font-weight: 600;
    margin-top: 15px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 8px;
}

.banner-contact i {
    font-size: 1.5rem;
    color: #4caf50; /* Icon in green to stand out */
}

.banner-contact a {
    color: #fff; /* White text for contrast */
    font-weight: 600;
    text-decoration: none;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.banner-contact a:hover {
    color: #4caf50; /* Green hover effect for the email */
}

.banner-contact span {
    color: #fff; /* Ensures consistent white text */
}

.style216 {
    max-width: 10%
}

:root {
  --primary-color: #000; /* Default Monergise branding */
  --menu-font-color: #fff; /* Default text color */
}

/* .sidebar-content {
  background-color: var(--background-color);
}

.sidebar a {
  color: var(--menu-font-color) !important;
}

.sidebar-link, a.sidebar-link {
background-color: var(--background-color);
}


#sidebar,
.sidebar-content,
#lenderLogo {
    visibility: hidden;
    opacity: 0;
    display: block; 
    -webkit-transition: opacity 0.3s ease-in-out;
    transition: opacity 0.3s ease-in-out;
} */

/* Bigger toggle switch */
.form-switch .form-check-input {
    width: 2.5rem;
    height: 1.5rem;
    cursor: pointer;
}

/* Custom colors for switch */
.form-switch .form-check-input:checked {
    background-color: #00c853; /* Monergise Green */
    border-color: #00c853;
}

.form-switch .form-check-input:not(:checked) {
    background-color: #ff9800; /* Lender Orange */
    border-color: #ff9800;
}

/* Toggle Group Styling */
.toggle-group {
    background: #2b3947;
    border-radius: 50px;
    padding: 3px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 4px;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

/* Button Labels */
.toggle-group label {
    font-size: 12px;
    padding: 6px 14px;
    border-radius: 50px;
    cursor: pointer;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

/* Default (Unselected) */
.btn-outline-primary,
.btn-outline-success {
    background: transparent;
    color: #ffffff;
    border: none;
    opacity: 0.6;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

/* Selected (Active) */
.btn-check:checked + .btn {
    background: linear-gradient(135deg, #0abe00, #099700);
    color: #ffffff;
    font-weight: bold;
    opacity: 1;
    -webkit-box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.2);
            box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.2);
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
}

/* Hover Effect */
.btn:hover {
    opacity: 1;
}

/* Compact Layout */
.toggle-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 8px;
}
 /* Full Page Loader */
    #preloader {
      position: fixed;
      width: 100%;
      height: 100%;
      background: #ffffff;
      /* Match your branding */
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      z-index: 9999;
    }


.style217 {
    background-color: #fff
}



.style218 {
    max-width: 200px
}
/* 🔄 Default Fallback for `btn-guest` (Before Wappler branding loads) */
/* 🔄 Default Fallback for `btn-guest` (Before Wappler branding loads) */
/* 🔄 Default Fallback for `.btn-guest` (Before Wappler branding loads) */
/* ✅ Set a Default Fallback Before Branding Loads */
/* 🚀 Default Fallback Before Wappler Applies Branding */
/* 🌑 Default Fallback - Neutral Color Before Branding Loads */



 .sidebar {
    background-color: var(--menu-bg-color, #2b3947) !important;
    color: var(--menu-font-color, #ffffff) !important;
}
.sidebar-content {
    background-color: var(--menu-bg-color, #2b3947) !important;
}
.sidebar-nav {
    background-color: var(--menu-bg-color, #2b3947) !important;
    color: var(--menu-font-color, #ffffff) !important;
}

/* ✅ Ensure .sidebar-link inherits colors properly */
.sidebar-link {
    background-color: transparent !important;  /* Allow background to be inherited */
    color: var(--menu-font-color, #ffffff) !important;
}

/* ✅ Add hover effect */
.sidebar-link:hover {
    background-color: var(--menu-bg-color, #3c4b5e) !important; /* Slightly darker for effect */
    color: var(--menu-font-color, #ffffff) !important;
}
/* 🚀 Fully Hide Buttons Until Branding Loads */

/* 🚀 Fully Hide Buttons Until Branding Loads */
.btn-primary,
.btn-guest {
    opacity: 0 !important;
    visibility: hidden !important;
}
/* 🚀 Fully Hide Buttons Until Branding Loads */
.btn-primary,
.btn-guest {
    opacity: 0 !important; /* Hide buttons completely */
    visibility: hidden !important; /* Prevent them from showing at all */
    background-color: transparent !important; 
    border-color: transparent !important; 
    -webkit-transition: opacity 0.3s ease-in-out;
    transition: opacity 0.3s ease-in-out;
}

/* 🎨 Apply Branding Once Wappler Loads */
body[dmx-style] .btn-primary,
body[dmx-style] .btn-guest {
    opacity: 1 !important; /* Smooth fade-in */
    visibility: visible !important;
}

/* 🚀 Primary Button (After Branding Loads) */
body[dmx-style] .btn-primary {
    background-color: var(--btn-primary-bg, #0abe00) !important; 
    color: var(--btn-primary-font, #ffffff) !important;
    border-color: var(--btn-primary-bg, #0abe00) !important;
}

/* 🟢 Primary Button Hover */
body[dmx-style] .btn-primary:hover {
    background-color: var(--btn-primary-hover-bg, #099700) !important;
    border-color: var(--btn-primary-hover-border, #099700) !important;
}


/* 🟢 Secondary Button Hover */
/* .btn-outline-primary:hover {
    background-color: var(--btn-primary-bg, #0abe00) !important;
    color: var(--btn-primary-font, #ffffff) !important;
} */

/* 🚀 Guest Button - Prevent Flashing */
.btn-guest {
    opacity: 0 !important; /* Hide initially */
    visibility: hidden !important; /* Hide from layout */
    background-color: transparent !important;
    color: transparent !important; /* Prevent flicker */
    border: none !important;
    -webkit-transition: opacity 0.3s ease-in-out;
    transition: opacity 0.3s ease-in-out;
}

/* 🚀 Apply Branding for `btn-guest` on Non-Logged-in Pages */
body[dmx-style] .btn-guest {
    opacity: 1 !important;
    visibility: visible !important;
    background-color: var(--btn-guest-bg, #0abe00) !important;
    color: var(--btn-guest-font, #ffffff) !important;
}

/* 🟢 Guest Button Hover Effect */
body[dmx-style] .btn-guest:hover {
    background-color: var(--btn-guest-bg, #099700) !important;
    color: var(--btn-primary-font, #ffffff) !important;
}

/* a {
   color: var(--btn-primary-hover-bg, #099700) !important;
    text-decoration: none;
} */

/* 🎯 Only Applies to Referral & Sign-Up Links */
a.ref-link,
a.sign-up-link {
    color: var(--link-primary-color, #0abe00) !important; /* Lender’s Primary Color */
    text-decoration: none; /* Optional: Removes underline */
    font-weight: bold; /* Optional */
}

/* 🟢 Hover Effect */
a.ref-link:hover,
a.sign-up-link:hover {
   color: var(--link-primary-color, #0abe00) !important; /* Lender’s Primary Color */
    text-decoration: underline; /* Optional */
}

/* 🔹 Keep Other Links Unaffected */
a:not(.ref-link):not(.sign-up-link) {
    color: inherit !important;
    text-decoration: inherit !important;
}
/* Hide logo until Wappler styles are loaded */
#lenderLogo {
    visibility: hidden;
    opacity: 0;
    -webkit-transition: opacity 0.3s ease-in-out;
    transition: opacity 0.3s ease-in-out;
}

/* 🚀 Show logo once Wappler branding is applied */
body[dmx-style] #lenderLogo {
    visibility: visible;
    opacity: 1;
}
/* Sidebar Active Item - Dynamic Hover Effect */
.sidebar-item.active .sidebar-link:hover, 
.sidebar-item.active > .sidebar-link {
    background: -webkit-gradient(linear, left top, right top, from(var(--hover-overlay, rgba(255, 255, 255, 0.1))), 
                                    color-stop(50%, var(--hover-overlay-light, rgba(255, 255, 255, 0.05))), 
                                    to(transparent)) !important;
    background: linear-gradient(90deg, var(--hover-overlay, rgba(255, 255, 255, 0.1)), 
                                    var(--hover-overlay-light, rgba(255, 255, 255, 0.05)) 50%, 
                                    transparent) !important;
    border-left-color: var(--primary-color) !important; /* Using primary color directly */
    color: #e9ecef !important;
}

/* Ensures the hover overlay dynamically adapts to menu background */
body[dmx-style] {
    --hover-overlay: rgba(255, 255, 255, 0.1);  /* Light hover effect for dark menus */
    --hover-overlay-light: rgba(255, 255, 255, 0.05); /* Softer gradient shade */
}

/* If the sidebar has a light background, darken the hover effect */
.sidebar[dmx-style*="--menu-bg-color: #ffffff"] {
    --hover-overlay: rgba(0, 0, 0, 0.05); /* Dark shadow for white backgrounds */
    --hover-overlay-light: rgba(0, 0, 0, 0.02);
}
/* 🚀 Hide All Buttons Until Branding is Ready */
/* .btn-primary,
.btn-guest,
.btn-outline-primary,
button {
    opacity: 0 !important;
    visibility: hidden !important;
    background-color: transparent !important;
    -webkit-transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
} */

/* ✅ Show Buttons Once Branding is Ready */
body[dmx-style] .btn-primary,
body[dmx-style] .btn-guest,
body[dmx-style] .btn-outline-primary,
body[dmx-style] button {
    opacity: 1 !important;
    visibility: visible !important;
}
/* 🚀 Initially Hide Backgrounds Until Branding Loads */
.bg-dynamic {
    display: none !important; /* Prevents Monergise flicker */
}

/* ✅ Show Backgrounds Once Branding is Ready */
body.branding-loaded .bg-dynamic {
    display: block !important;
}

/* 🟢 Prevent Background Image Caching (Fix Chrome Issue) */
/* .bg-dynamic::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: inherit;
    background-size: cover;
    background-position: center;
    z-index: -1;
} */

/* 🌟 General Dropdown Styles */
.custom-dropdown {
    position: relative;
    display: inline-block;
}

/* 📌 Dropdown Toggle Button */
.custom-dropdown-toggle {
    background-color: #606060 !important; /* Darker neutral shade */
    color: #ffffff !important;
    border: none !important;
    padding: 8px 24px;
    border-radius: 25px;
    font-weight: 600;
    font-size: 16px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    min-width: 180px;
    max-width: 180px;
    -webkit-transition: background-color 0.3s ease, -webkit-box-shadow 0.3s ease;
    transition: background-color 0.3s ease, -webkit-box-shadow 0.3s ease;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    transition: background-color 0.3s ease, box-shadow 0.3s ease, -webkit-box-shadow 0.3s ease;
}

/* 🖱 Hover & Focus Effects */
.custom-dropdown-toggle:hover,
.custom-dropdown-toggle:focus {
    background-color: #777777 !important; /* Lighter gray */
    color: #ffffff !important;
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    outline: none;
}

/* 🎨 Dropdown Menu Styling */
.custom-dropdown-menu {
    position: absolute !important;
    left: 0 !important; /* Ensures it aligns under the button */
    right: auto !important; 
    top: 100%; /* Directly below the button */
    margin-top: 0.5rem; /* Space from button */
    border-radius: 10px;
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    min-width: 220px;
    max-width: 280px;
    padding: 0;
    background-color: #ffffff; /* White background */
    overflow: hidden;
    -webkit-animation: dropdownFadeIn 0.3s ease forwards;
            animation: dropdownFadeIn 0.3s ease forwards;
}

/* 📌 Dropdown Item Styles */
.custom-dropdown-item {
    padding: 10px 15px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    font-size: 14px;
    font-weight: 500;
    color: #333333 !important; /* Darker gray */
    -webkit-transition: background-color 0.3s ease;
    transition: background-color 0.3s ease;
}

/* 🖱 Hover Effect */
.custom-dropdown-item:hover {
    background-color: #eeeeee !important; /* Soft gray hover */
}

/* 🔥 Active Item */
.custom-dropdown-item.active {
    background-color: #cccccc !important; /* Subtle active state */
    font-weight: bold;
}

/* 🌟 Monergise Item */
.custom-dropdown-item-monergise {
    padding: 12px 15px;
    font-weight: 600;
    color: #333333 !important;
    -webkit-transition: background-color 0.3s ease;
    transition: background-color 0.3s ease;
}

/* 🟢 Monergise Hover */
.custom-dropdown-item-monergise:hover {
    background-color: #eaeaea !important; /* Soft hover */
}

/* 🚀 Separator Line */
.dropdown-divider {
    height: 1px;
    background-color: #dddddd; /* Light gray */
    margin: 8px 0;
}

/* 🎨 Lender Logo */
.lender-logo {
    width: 140px;
    height: 40px;
    -o-object-fit: contain;
       object-fit: contain;
    margin-left: auto; /* Pushes the logo to the right */
    padding-left: 12px; /* Spacing from the text */
}

/* 🔄 Dropdown Fade-In Animation */
@-webkit-keyframes dropdownFadeIn {
    from {
        opacity: 0;
        -webkit-transform: translateY(-10px);
                transform: translateY(-10px);
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0);
                transform: translateY(0);
    }
}
@keyframes dropdownFadeIn {
    from {
        opacity: 0;
        -webkit-transform: translateY(-10px);
                transform: translateY(-10px);
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0);
                transform: translateY(0);
    }
    
}



    /* 🚀 Force Darker, Blurred Modal Backdrop */
.modal-backdrop {
    background-color: rgba(0, 0, 0, 0.95) !important; /* Nearly black */
    -webkit-backdrop-filter: blur(18px);
            backdrop-filter: blur(18px); /* Heavy blur */
}

/* 🔄 Prevent Bootstrap From Replacing Your Backdrop */
.modal-backdrop.show {
    opacity: 0.95 !important;
            -webkit-backdrop-filter: blur(18px);
                backdrop-filter: blur(18px); /* Apply blur effect */
}


    /* 🌟 Custom Modal Styling */
    .custom-modal {
        max-width: 600px;
        margin: auto;
        border-radius: 10px;
        overflow: hidden;
    }

    /* ✨ Modal Content Enhancements */
    .custom-modal .modal-content {
        background: rgba(255, 255, 255, 0.95); /* Slight transparency */
        -webkit-backdrop-filter: blur(10px);
                backdrop-filter: blur(10px); /* Blurred background */
        border-radius: 10px;
        padding: 20px;
    }

    /* 🔹 Close Button Styling */
    .custom-modal .btn-close {
        -webkit-filter: invert(1);
                filter: invert(1);
        opacity: 0.7;
    }

    /* 🎨 Button Styling */
    .monergise-btn {
        background-color: #0abe00;
        color: white;
        border-radius: 25px;
        padding: 12px 20px;
        font-weight: 600;
        -webkit-transition: 0.3s;
        transition: 0.3s;
    }

    .monergise-btn:hover {
        background-color: #099700;
    }

    .style219 {
    max-width: 75px
}

    .style220 {
    max-width: 150px
}

    .style221 {
    max-width: 100px
}

    .style222 {
    max-width: 150px
}

    .style223 {
    max-width: 150px
}

    .style224 {
    max-width: 150px
}

    .style225 {
    margin-bottom: 10px
}

/* Card Styling */


/* Step icons */
.step-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    font-size: 1.8rem;
    -webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Step container */
.infographic-step {
    text-align: center;
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    max-width: 220px;
}

/* Dotted connectors */
.infographic-connector {
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    height: 4px;
    border-bottom: 2px dotted #bbb;
    margin: 0 15px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}
.style226 {
}

.loan-tabs {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        gap: 8px;
        background: #f8f9fa; /* Light background for contrast */
        padding: 12px;
        border-radius: 8px;
        -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .loan-tab-btn {
        -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1;
        min-width: 130px;
        max-width: 150px;
        height: 90px;
        text-align: center;
        background: white;
        color: #6c757d;
        border: 2px solid transparent;
        border-radius: 10px;
        -webkit-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        font-size: 14px;
        font-weight: 500;
        -webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .loan-tab-btn i {
        font-size: 22px;
        margin-bottom: 4px;
        color: #6c757d;
        -webkit-transition: color 0.3s ease-in-out;
        transition: color 0.3s ease-in-out;
    }

    .loan-tab-btn:hover,
    .loan-tab-btn.active {
        background: #007bff;
        color: white;
        border-color: #0056b3;
        -webkit-box-shadow: 0 4px 10px rgba(0, 123, 255, 0.3);
                box-shadow: 0 4px 10px rgba(0, 123, 255, 0.3);
    }

    .loan-tab-btn:hover i,
    .loan-tab-btn.active i {
        color: white;
    }

    @media (max-width: 768px) {
        .loan-tab-btn {
            min-width: 100px;
            max-width: 120px;
            height: 80px;
            font-size: 12px;
        }
        .loan-tab-btn i {
            font-size: 18px;
        }
    }

    button:disabled, 
.btn:disabled {
opacity: 0.5; /* Makes button appear faded */
    cursor: not-allowed; /* Changes cursor to indicate it's disabled */
    pointer-events: none; /* Prevents any interaction */
    -webkit-filter: grayscale(80%) brightness(90%);
            filter: grayscale(80%) brightness(90%); /* Adds slight grayscale and reduces brightness */
    -webkit-box-shadow: none !important;
            box-shadow: none !important; /* Removes any shadow effects */
    background-color: #ccc !important; /* Light grey background */
    border-color: #bbb !important; /* Slightly darker border */
}
/* Modern Card Styling */
.custom-card {
    background: #ffffff;
    border-radius: 8px;
    padding: 18px;
    border: 1px solid #e0e0e0; 
    -webkit-box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.08); 
            box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.08); 
    -webkit-transition: all 0.3s ease-in-out; 
    transition: all 0.3s ease-in-out;
    margin-bottom: 16px;
}

/* Header Styling */
.custom-card-header {
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
    background: #f8f9fa;
    padding: 12px;
    border-bottom: 1px solid #ddd;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

/* Input & Dropdown Styling */
.custom-input, .custom-select {
    border-radius: 6px;
    border: 1px solid #ccc;
    padding: 8px;
    font-size: 14px;
    -webkit-transition: border 0.2s ease-in-out;
    transition: border 0.2s ease-in-out;
    width: 100%;
}

.custom-input:focus, .custom-select:focus {
    border-color: #007bff;
    -webkit-box-shadow: 0px 0px 5px rgba(0, 123, 255, 0.3);
            box-shadow: 0px 0px 5px rgba(0, 123, 255, 0.3);
}

/* Compact Layout */
.custom-section {
    margin-bottom: 12px;
}

/* Subtle Hover Effect */
.custom-card:hover {
    -webkit-box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.1);
            box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.1);
}

/* Compact Date Input */
input[type="date"].custom-input {
    max-width: 180px;
}

/* Styles scoped to the Date Calculator component */
#dateCalc .card {
  border: none;
  border-radius: 8px;
  -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 1.5rem;
}
#dateCalc .card-header {
  background-color: #007bff;
  color: #fff;
  padding: 0.75rem 1.25rem;
  font-size: 1.1rem;
  font-weight: 600;
  border-bottom: none;
}
#dateCalc .card-body {
  padding: 1rem 1.25rem;
}
#dateCalc .form-control,
#dateCalc .form-select {
  border-radius: 4px;
  border: 1px solid #ced4da;
  -webkit-transition: border-color 0.3s, -webkit-box-shadow 0.3s;
  transition: border-color 0.3s, -webkit-box-shadow 0.3s;
  transition: border-color 0.3s, box-shadow 0.3s;
  transition: border-color 0.3s, box-shadow 0.3s, -webkit-box-shadow 0.3s;
}
#dateCalc .form-control:focus,
#dateCalc .form-select:focus {
  border-color: #80bdff;
  -webkit-box-shadow: 0 0 4px rgba(0, 123, 255, 0.25);
          box-shadow: 0 0 4px rgba(0, 123, 255, 0.25);
}
#dateCalc .btn {
  border-radius: 4px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  -webkit-transition: background 0.3s, border 0.3s;
  transition: background 0.3s, border 0.3s;
}
#dateCalc .btn-primary {
  background-color: #007bff;
  border-color: #007bff;
}
#dateCalc .btn-primary:hover {
  background-color: #0069d9;
  border-color: #0062cc;
}
#dateCalc .btn-secondary {
  background-color: #6c757d;
  border-color: #6c757d;
}
#dateCalc .btn-secondary:hover {
  background-color: #5a6268;
  border-color: #545b62;
}
#dateCalc .btn-dark {
  background-color: #343a40;
  border-color: #343a40;
}
#dateCalc .btn-dark:hover {
  background-color: #23272b;
  border-color: #1d2124;
}
#dateCalc .table {
  font-size: 0.9rem;
}
#dateCalc .modal-content {
  border-radius: 8px;
}

/* Scoped styling for the modal results */
.results-modal {
  padding: 1.5rem;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.results-modal .results-title {
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
  font-weight: 600;
}

.results-modal .results-table {
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 1.5rem;
}

.results-modal .results-table th,
.results-modal .results-table td {
  padding: 0.75rem;
  border: 1px solid #e0e0e0;
  text-align: left;
}

.results-modal .results-table thead {
  background-color: #f8f9fa;
}

.results-modal .results-breakdown-title {
  font-size: 1.25rem;
  font-weight: 500;
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}


#afe {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f7f7f7;
  overflow: hidden;
}

#afe h2 {
  text-align: center;
  margin: 10px 0;
}

#afe .afe-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: calc(100vh - 50px);
}

    /* Left panel: Folder tree with fixed width */
    .folder-tree {
      width: 420px;
      min-width: 420px;
      border-right: 1px solid #ddd;
      padding: 15px;
      overflow-y: auto;
      background-color: #fff;
    }

    /* Right panel: Files list */
    .files-list {
      -webkit-box-flex: 1;
          -ms-flex: 1;
              flex: 1;
      padding: 15px;
      overflow-y: auto;
      background-color: #fff;
    }

    /* Folder tree styles */
    ul.tree {
      list-style-type: none;
      padding-left: 20px;
    }

    ul.tree li {
      margin: 4px 0;
      position: relative;
    }

ul.tree li .folder {
  cursor: pointer;
  padding: 6px 12px;
  display: block;
  font-size: 1rem;
  font-weight: 500;
  border-radius: 6px;
  line-height: 1.6;
  -webkit-transition: background-color 0.2s, color 0.2s;
  transition: background-color 0.2s, color 0.2s;
}

ul.tree li .folder:hover {
  background-color: #f0f0f0;
  color: #007bff;
}
    /* Folder icon using Unicode */
    ul.tree li .folder::before {
      content: "\1F4C1";
      margin-right: 6px;
    }

    /* Toggle arrow for items with children */
    ul.tree li.has-children>.folder::after {
      content: "\25BA";
      /* right arrow */
      display: inline-block;
      margin-left: 6px;
      -webkit-transform: rotate(0deg);
              transform: rotate(0deg);
      -webkit-transition: -webkit-transform 0.2s;
      transition: -webkit-transform 0.2s;
      transition: transform 0.2s;
      transition: transform 0.2s, -webkit-transform 0.2s;
    }

    ul.tree li.expanded>.folder::after {
      -webkit-transform: rotate(90deg);
              transform: rotate(90deg);
    }

    ul.tree li ul {
      display: none;
      padding-left: 15px;
    }

    ul.tree li.expanded>ul {
      display: block;
    }

    /* Inline renaming input */
    .rename-input {
      font-size: 1em;
      padding: 2px;
      width: auto;
      min-width: 100px;
    }

    /* Files list header and search */
    .files-header {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
          -ms-flex-pack: justify;
              justify-content: space-between;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      margin-bottom: 10px;
    }

    .files-header h3 {
      margin: 0;
    }

    .files-header button {
      margin-left: 5px;
      padding: 5px 10px;
      font-size: 0.9em;
    }

    .search-bar {
      margin: 10px 0;
    }

    .search-bar input {
      width: 100%;
      padding: 6px;
      font-size: 1em;
      border: 1px solid #ccc;
      border-radius: 4px;
    }

    /* File item styling */
    .file-item {
      padding: 6px 10px;
      border-bottom: 1px solid #eee;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-box-pack: justify;
          -ms-flex-pack: justify;
              justify-content: space-between;
    }

    .file-info {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
    }

    .file-icon {
      margin-right: 10px;
      font-size: 1.2em;
    }

    .file-actions button {
      margin-left: 5px;
      padding: 3px 7px;
      font-size: 0.8em;
    }

    /* Create folder button on top of folder tree */
    .create-root {
      display: block;
      margin-bottom: 10px;
      width: 100%;
      padding: 8px;
      font-size: 1em;
    }
.folder-tree li.selected > span.folder {
  background-color: #e0f7e9; /* light green */
  font-weight: bold;
  border-radius: 4px;
  /* padding: 2px 6px; */
}
#renameAlert {
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  -webkit-transform: translateY(-20px);
          transform: translateY(-20px);
  opacity: 0;
}

#renameAlert.show {
  -webkit-transform: translateY(0);
          transform: translateY(0);
  opacity: 1;
}

/* Full-screen overlay with high z-index */
#loadingOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.8); /* Semi-transparent white */
  z-index: 99999; /* Ensure it appears above modals */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

/* Simple spinner style */
.spinner { /* Light grey */
  border: 12px solid #f3f3f3;
  border-top-color: #3498db; /* Blue */
  border-radius: 50%;
  width: 80px;
  height: 80px;
  -webkit-animation: spin 1.5s linear infinite;
          animation: spin 1.5s linear infinite;
}

/* Animation for spinner */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes spin {
  0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
.style227 {
    width: 70%
}

  .saving-text {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #d1e7dd;
    border: 2px solid #0f5132;
    padding: 0.85rem 1.5rem;
    border-radius: 12px;
    -webkit-box-shadow: 0 0 12px rgba(15, 81, 50, 0.4);
            box-shadow: 0 0 12px rgba(15, 81, 50, 0.4);
    font-weight: 600;
    color: #0f5132;
    z-index: 9999;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 0.6rem;
    font-size: 1.1rem;
    -webkit-animation: popIn 0.4s ease-out;
            animation: popIn 0.4s ease-out;
  }

  .saving-text .dot {
    height: 10px;
    width: 10px;
    border-radius: 50%;
    background-color: #0f5132;
    -webkit-animation: blink 1.4s infinite both;
            animation: blink 1.4s infinite both;
  }

  .saving-text .dot.one {
    -webkit-animation-delay: 0s;
            animation-delay: 0s;
  }

  .saving-text .dot.two {
    -webkit-animation-delay: 0.2s;
            animation-delay: 0.2s;
  }

  .saving-text .dot.three {
    -webkit-animation-delay: 0.4s;
            animation-delay: 0.4s;
  }

  @-webkit-keyframes blink {
    0%, 80%, 100% {
      opacity: 0;
    }
    40% {
      opacity: 1;
    }
  }

  @keyframes blink {
    0%, 80%, 100% {
      opacity: 0;
    }
    40% {
      opacity: 1;
    }
  }

  @-webkit-keyframes popIn {
    0% {
      -webkit-transform: translateY(20px);
              transform: translateY(20px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateY(0px);
              transform: translateY(0px);
      opacity: 1;
    }
  }

  @keyframes popIn {
    0% {
      -webkit-transform: translateY(20px);
              transform: translateY(20px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateY(0px);
              transform: translateY(0px);
      opacity: 1;
    }
  }

  #syncDataBtn {
  -webkit-transition: background-color 0.3s, -webkit-box-shadow 0.3s;
  transition: background-color 0.3s, -webkit-box-shadow 0.3s;
  transition: background-color 0.3s, box-shadow 0.3s;
  transition: background-color 0.3s, box-shadow 0.3s, -webkit-box-shadow 0.3s;
}

#syncDataBtn:hover {
  background-color: #0056b3;
  -webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.style228 {
    min-width: 130px
}


/* Unique Card Styling */
.loan-summary-calculator-card {
    margin-bottom: 12px;
    border-radius: 8px;
    background-color: #ffffff;
    -webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 10px;
}

/* Card Header */
.loan-summary-calculator-header {
    background-color: #f8f9fa;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    padding: 8px;
}

/* Card Body */
.loan-summary-calculator-body {
    padding: 10px;
}

/* Form Elements */
.loan-summary-form-control,
.loan-summary-form-select {
    font-size: 0.75rem;
    padding: 6px;
    border-radius: 6px;
    border: 1px solid #ddd;
    margin-bottom: 8px;
    -webkit-transition: border-color 0.3s ease;
    transition: border-color 0.3s ease;
    height: 32px;
}

.loan-summary-form-control:focus,
.loan-summary-form-select:focus {
    border-color: #007bff;
    outline: none;
    -webkit-box-shadow: 0 0 0 0.25rem rgba(38, 143, 255, 0.5);
            box-shadow: 0 0 0 0.25rem rgba(38, 143, 255, 0.5);
}

/* Button Styles */
.loan-summary-btn {
    background-color: #007bff;
    color: #ffffff;
    border: none;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    -webkit-transition: background-color 0.3s ease;
    transition: background-color 0.3s ease;
    height: 36px;
}

.loan-summary-btn:hover {
    background-color: #0056b3;
}

.loan-summary-btn:disabled {
    background-color: #b0c4de;
    cursor: not-allowed;
}

/* Table Styles */
.loan-summary-table {
    width: 100%;
    border-radius: 6px;
    border-collapse: collapse;
}

.loan-summary-table th,
.loan-summary-table td {
    padding: 8px;
    text-align: left;
    font-size: 0.75rem;
    border-bottom: 1px solid #ddd;
}

.loan-summary-table th {
    background-color: #f1f1f1;
}

.loan-summary-table tbody tr:hover {
    background-color: #f9f9f9;
}

/* Modal Customization */
.loan-summary-custom-modal .modal-dialog {
    max-width: 400px;
    margin: 20px auto;
}

.loan-summary-custom-modal .modal-content {
    border-radius: 8px;
    padding: 10px;
}

.loan-summary-custom-modal-btn {
    background-color: #007bff;
    color: #fff;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 0.75rem;
    font-weight: 600;
    height: 32px;
}

.loan-summary-custom-results-table th,
.loan-summary-custom-results-table td {
    font-size: 0.75rem;
    padding: 8px;
    border-bottom: 1px solid #ddd;
}

/* Result Table */
.loan-summary-custom-results-table th {
    background-color: #f1f1f1;
}

.loan-summary-custom-results-table tbody tr:hover {
    background-color: #f9f9f9;
}

/* Input Focus Effect */
.loan-summary-form-control:focus {
    border-color: #007bff !important;
    -webkit-box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5) !important;
            box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5) !important;
}

/* Layout Adjustments for Columns */
.loan-summary-custom-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 8px;
}

.loan-summary-custom-col-md-4,
.loan-summary-custom-col-md-3,
.loan-summary-custom-col-md-5 {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 33%;
            flex: 1 1 33%;
    max-width: 33%;
}

.loan-summary-custom-col-md-5 {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 41%;
            flex: 1 1 41%;
    max-width: 41%;
}

.loan-summary-custom-col-md-3 {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 24%;
            flex: 1 1 24%;
    max-width: 24%;
}

.loan-summary-custom-col-md-12 {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 100%;
            flex: 1 1 100%;
    max-width: 100%;
}

/* Header and Title */
.loan-summary-card-title,
.loan-summary-results-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
}

/* Label Styles */
.loan-summary-form-label {
    font-size: 0.75rem;
    color: #555;
    font-weight: 500;
}

/* Modal Body and Footer */
.loan-summary-custom-modal-body {
    font-size: 0.75rem;
    padding: 10px;
}

.loan-summary-custom-modal-footer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
}

/* Calculation Results */
.loan-summary-custom-results-table td,
.loan-summary-custom-results-table th {
    font-size: 0.75rem;
    padding: 8px;
    border-bottom: 1px solid #ddd;
}

/* Row Styling for Results */
.loan-summary-results-table tbody tr:hover {
    background-color: #f9f9f9;
}
.mon-header-wrapper {
  background-color: #f8f9fb;
  border-bottom: 1px solid #e9ecef;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.mon-page-title {
  font-size: 1.75rem;
  font-weight: 600;
  color: #212529;
}

.mon-btn-primary {
  background-color: #0d6efd;
  border: none;
  color: #fff;
  font-weight: 500;
  font-size: 0.95rem;
  padding: 0.5rem 1.25rem;
  border-radius: 0.5rem;
  -webkit-transition: background-color 0.2s ease-in-out;
  transition: background-color 0.2s ease-in-out;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.mon-btn-primary:hover {
  background-color: #0b5ed7;
}
.mon-segmented-control {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.5rem;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

.mon-segment-btn {
  background: #f1f3f5;
  border: none;
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: #495057;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

.mon-segment-btn.active {
  background: #0d6efd;
  color: #fff;
}
./* Base segmented style for nav-tabs */
.mon-segmented-tabs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.5rem;
  border-bottom: none;
  padding: 0.5rem 0;
}

/* Tab button styling */
.mon-segmented-tabs .nav-link {
  background: #f1f3f5;
  border: none;
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: #495057;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.mon-segmented-tabs .nav-link i {
  font-size: 1rem;
  line-height: 1;
}

/* Active tab */
.mon-segmented-tabs .nav-link.active {
  background-color: #0d6efd;
  color: #fff;
}

/* Optional: hover effect */
.mon-segmented-tabs .nav-link:hover:not(.active) {
  background-color: #e2e6ea;
}
.table {
  font-size: 0.95rem;
  border-collapse: separate;
  border-spacing: 0 0.5rem;
}

.table thead th {
  font-weight: 600;
  background-color: #f9fafb;
  border: none;
}

.table tbody tr {
  background-color: #ffffff;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  border-radius: 0.5rem;
}

.table td {
  vertical-align: middle;
  border-top: none;
}

.input-group-navbar input {
  border-radius: 0.375rem 0 0 0.375rem;
}

.input-group-navbar .btn {
  border-radius: 0 0.375rem 0.375rem 0;
}

.mon-search-input-minimal {
  border: 1px solid #ced4da;
  border-radius: 0.375rem;
  padding: 0.4rem 0.75rem;
  font-size: 0.9rem;
  width: 220px;
  max-width: 100%;
  -webkit-transition: border-color 0.2s ease;
  transition: border-color 0.2s ease;
}

.mon-search-input-minimal:focus {
  border-color: #0d6efd;
  outline: none;
  -webkit-box-shadow: none;
          box-shadow: none;
}

/* Reset Bootstrap tab look */
.mon-segmented-control.nav-tabs {
  border-bottom: none;
  gap: 0.5rem;
}

.mon-segment-btn.nav-link {
  border: 1px solid #dee2e6;
  border-radius: 0.5rem;
  background-color: #f8f9fa;
  color: #212529;
  padding: 0.5rem 1rem;
  font-weight: 500;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

.mon-segment-btn.nav-link.active {
  background-color: #0d6efd;
  color: #fff;
  border-color: #0d6efd;
}

.mon-segment-btn.nav-link:hover {
  background-color: #e9ecef;
  color: #0d6efd;
  border-color: #0d6efd;
}

.mon-segment-btn.nav-link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0.5rem 1rem;
  cursor: pointer;
  text-align: center;
  border-radius: 0.5rem;
  border: 1px solid transparent;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.mon-segmented-control.nav-tabs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.5rem 0;
}

.mon-segmented-control .nav-item {
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none; /* or use flex: 1 if you want equal widths */
}

@media (max-width: 1024px) {
  input.form-control,
  textarea.form-control,
  select.form-select,
  input:not([type="checkbox"]):not([type="radio"]),
  textarea,
  select {
    font-size: 16px !important;
  }
}

@media (max-width: 1024px) {
  input.form-control,
  textarea.form-control,
  select.form-select {
    font-size: 16px !important;
    line-height: 1.5;
  }
}

.table-responsive .dropdown-menu {
    top:5px !important;
}

.style229 {}

.style230 {
    background-color: transparent
}

.custom-close-btn {
  position: absolute;
  top: 30px;
  right: 30px;
  background-color: #fff;
  color: #000;
  border: 1px solid #dee2e6;
  padding: 6px 14px;
  font-weight: 500;
  border-radius: 6px;
  -webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.1);
          box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  z-index: 1060;
}

.custom-close-btn:hover {
  background-color: #f8f9fa;
  color: #000;
}

/* Prevent clipping issues site-wide */
.table-responsive,
.card-body,
.modal-body,
body {
  overflow: visible !important;
  position: relative;
}

/* Consistent dropdown behavior */
.dropdown-menu {
  position: absolute !important;
  z-index: 9999 !important;
  border-radius: 6px;
  -webkit-box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
          box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
  min-width: 160px;
  padding: 8px 0;
  visibility: visible;
  -webkit-transform: none !important;
          transform: none !important;
  will-change: auto !important;
}

/* Dropdown items */
.dropdown-item {
  white-space: nowrap;
  font-size: 14px;
  padding: 8px 16px;
}

/* Optional: dark theme button styling */
.btn-dark.dropdown-toggle {
  background-color: #333;
  border-color: #333;
}
.style231 {
        min-width: 360px;
}
.style232 {
        max-width: 940px;
        text-align: center;
}
.style233 {
        color: #383838;
        text-align: center;
}


 :root{
  --su-bg:#fff;
  --su-text:#111827;
  --su-muted:#6b7280;
  --su-border:#e5e7eb;
  --su-soft:#f3f4f6;
  --su-accent:#4e8cff;         /* swap for brand color */
  --su-accent-ring:rgba(78,140,255,.25);
  --su-danger:#ef4444;
  --su-radius-lg:20px;
  --su-radius:12px;
  --su-shadow:0 8px 40px rgba(0,0,0,.12);
  --su-shadow-soft:0 4px 18px rgba(0,0,0,.10);
}

/* Typography + base */
body{ color:var(--su-text); }
small,.text-muted{ color:var(--su-muted)!important; }

/* Cards / sections */
.card, .accordion-item, .modal-content{
  border-radius:var(--su-radius-lg);
  border:1px solid var(--su-border);
  -webkit-box-shadow:var(--su-shadow-soft);
          box-shadow:var(--su-shadow-soft);
}

/* Modal */
.modal-content{ background:var(--su-bg); }
.modal-header,.modal-footer{
  /* background:#f9fafb; */
  border-color:var(--su-border);
}
.modal-title{ font-weight:600; letter-spacing:.2px; }

/* Forms */
.form-label{ font-size:.82rem; color:var(--su-muted); margin-bottom:.35rem; }
.form-control, .form-select, .input-group .form-control{
  border-radius:var(--su-radius);
  border:1px solid var(--su-border);
  background:#fff;
  padding:.55rem .75rem;
}
.form-control:focus, .form-select:focus{
  border-color:var(--su-accent);
  -webkit-box-shadow:0 0 0 .22rem var(--su-accent-ring);
          box-shadow:0 0 0 .22rem var(--su-accent-ring);
}

/* Buttons */
.btn{ border-radius:12px; font-weight:500; min-width: 60px; }
.btn-primary, .btn-accent{
  background:var(--su-accent);
  border-color:var(--su-accent);
}
.btn-primary:hover, .btn-accent:hover{ -webkit-filter:brightness(1.02); filter:brightness(1.02); -webkit-box-shadow:0 6px 24px rgba(78,140,255,.25); box-shadow:0 6px 24px rgba(78,140,255,.25); }
.btn-outline-danger{ border-color:var(--su-danger); color:var(--su-danger); }
.btn-outline-danger:hover{ background:var(--su-danger); color:#fff; }

/* Tables */
.table{ border-color:var(--su-border); }
.table thead{ background:var(--su-soft); }
.table th, .table td{ vertical-align:middle; }
.table-hover tbody tr:hover{ background:#fafafa; }

/* Accordion */
.accordion-button{
  border-radius:var(--su-radius);
  background:#fff;
}
.accordion-button:not(.collapsed){
  background:#f8fafc;
  -webkit-box-shadow:inset 0 -1px 0 var(--su-border);
          box-shadow:inset 0 -1px 0 var(--su-border);
}

/* Input + inline Save button helper (optional) */
.input-with-btn{ display:-webkit-box; display:-ms-flexbox; display:flex; gap:.5rem; }
.input-with-btn .form-control{ -webkit-box-flex:1; -ms-flex:1; flex:1; }

/* Utility chips */
.badge-soft{ background:#eef2ff; color:#334155; border:1px solid #e0e7ff; border-radius:999px; }

/* Compact spacing helpers */
.su-stack-sm>*+*{ margin-top:.5rem; }
.su-stack>*+*{ margin-top:1rem; }

/* Dark mode (optional) — add .su-dark to <body> to enable */
.su-dark{
  --su-bg:#0f1216; --su-text:#e6eaef; --su-muted:#9aa3ae; --su-border:rgba(255,255,255,.08);
  --su-soft:rgba(255,255,255,.05); --su-accent:#6aa6ff; --su-accent-ring:rgba(106,166,255,.28);
  background:#0b0d10; color:var(--su-text);
}
.su-dark .card, .su-dark .accordion-item, .su-dark .modal-content{ background:var(--su-bg); -webkit-box-shadow:var(--su-shadow); box-shadow:var(--su-shadow); }
.su-dark .modal-header,.su-dark .modal-footer{ background:transparent; border-color:var(--su-border); }
.su-dark .form-control,.su-dark .form-select{ background:#0c0f13; color:var(--su-text); }
.su-dark .table thead{ background:rgba(255,255,255,.05); }

/* subtle, modern look */
.reminder-card { background: #fff; }
.reminder-header { background: -webkit-gradient(linear,left top, left bottom,from(#fafafa),to(#f5f5f5)); background: linear-gradient(180deg,#fafafa,#f5f5f5); }
.section-title { font-size: .8rem; letter-spacing:.08em; color:#6c757d; text-transform:uppercase; font-weight:600; }
.form-hint { font-size:.8rem; color:#6c757d; margin-top:.25rem; }
.preview-line { padding:.4rem .6rem; background:#f8f9fa; border:1px dashed #e2e3e5; border-radius:.5rem; }

.reminder-status {
  background:#fafafa;
  border:1px solid #eee;
  border-radius:.75rem;
  padding:.6rem .8rem;
}
.status-chip {
  background:#fff;
  border:1px solid #eee;
  border-radius:.6rem;
  padding:.35rem .6rem;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex; gap:.5rem; -webkit-box-align:center; -ms-flex-align:center; align-items:center;
}
.status-label { color:#6c757d; font-size:.8rem; }
.status-value { font-weight:600; }
/* compact currency inputs in this card */
.reminder-card .input-group.override-amt { max-width: 260px; }
@media (max-width: 767.98px) {
  .reminder-card .input-group.override-amt { max-width: 100%; }
}
/* Layout + spacing */
.stack { display: grid; gap: 1.25rem; }
.row-section { margin-bottom: .25rem; }
.section-title { font-size:.8rem; letter-spacing:.08em; color:#6c757d; text-transform:uppercase; font-weight:600; }
.divider { margin: .25rem 0 1rem; border-color:#eee; }

/* Inputs feel calmer */
.control-quiet { background:#fafafa; border-color:#e9ecef; }
.control-quiet:focus { background:#fff; }

/* Compact currency fields */
.amt-compact { max-width: 260px; }

/* Hint text */
.hint { font-size:.8rem; color:#6c757d; margin-top:.25rem; }

/* Toolbar */
.toolbar { display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; gap:.75rem; padding-top:.25rem; }

/* Mini card for schedule */
.mini-card { border:1px solid #eee; border-radius:.75rem; }
.mini-card-head { display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between; padding:.5rem .75rem; background:#fafafa; border-bottom:1px solid #eee; }
.muted-pill { font-size:.75rem; color:#6c757d; background:#fff; border:1px solid #eee; border-radius:999px; padding:.15rem .5rem; }

/* Status bar chips */
.reminder-status { background:#fafafa; border:1px solid #eee; border-radius:.75rem; padding:.6rem .8rem; margin-top: .75rem; }
.status-chip { background:#fff; border:1px solid #eee; border-radius:.6rem; padding:.35rem .6rem; display:-webkit-box; display:-ms-flexbox; display:flex; gap:.5rem; -webkit-box-align:center; -ms-flex-align:center; align-items:center; }
.status-label { color:#6c757d; font-size:.8rem; }
.status-value { font-weight:600; }

/* Preview line */
.preview-line { padding:.5rem .75rem; background:#f8f9fa; border:1px dashed #e2e3e5; border-radius:.5rem; }
/* Wrap everything inside .invoices-section to avoid conflicts */
.invoices-section .page-header {
  margin-bottom: 1rem;
}
.invoices-section .page-header .title {
  font-weight: 600;
  color: #212529;
}
.invoices-section .page-header .subtitle {
  color: #6c757d;
}

/* Cards */
.invoices-section .invoice-card {
  background: #fff;
  border-radius: 12px;
  -webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.06);
          box-shadow: 0 2px 6px rgba(0,0,0,0.06);
  margin-bottom: 1.5rem;
  overflow: hidden;
}
.invoices-section .invoice-card-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #f0f0f0;
  background: #fafafa;
}
.invoices-section .invoice-card-header h5 {
  margin: 0;
  font-weight: 600;
  font-size: 1rem;
}
.invoices-section .invoice-card-body {
  padding: 1rem;
}

/* Toggle */
.invoices-section .invoice-type-toggle {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.5rem;
}
.invoices-section .invoice-type-toggle .toggle-option {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  text-align: center;
  padding: 0.6rem 1rem;
  border-radius: 8px;
  border: 1px solid #dee2e6;
  cursor: pointer;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  font-weight: 500;
  background: #f8f9fa;
  color: #495057;
}
.invoices-section .btn-check:checked + .toggle-option {
  background: #0d6efd;
  color: #fff;
  border-color: #0d6efd;
  -webkit-box-shadow: 0 0 0 2px rgba(13,110,253,0.25);
          box-shadow: 0 0 0 2px rgba(13,110,253,0.25);
}
.invoices-section .toggle-option:hover {
  background: #e9ecef;
}

/* Invoice panels */
.invoices-section .invoice-panel {
  background: #fdfdfd;
  border: 1px dashed #dee2e6;
  border-radius: 8px;
  padding: 1rem;
}
.invoices-section .invoice-panel .value {
  font-weight: 600;
  font-size: 0.95rem;
  color: #212529;
}

/* Buttons */
.invoices-section .btn-create {
  background: -webkit-gradient(linear, left top, right top, from(#0d6efd), to(#0b5ed7));
  background: linear-gradient(90deg, #0d6efd, #0b5ed7);
  border: none;
  color: #fff;
  font-weight: 500;
  border-radius: 30px;
  padding: 0.6rem 1.5rem;
  -webkit-transition: background 0.2s ease;
  transition: background 0.2s ease;
}
.invoices-section .btn-create:hover {
  background: -webkit-gradient(linear, left top, right top, from(#0b5ed7), to(#0a58ca));
  background: linear-gradient(90deg, #0b5ed7, #0a58ca);
}

/* Table */
.invoices-section .invoice-table thead {
  background: #f8f9fa;
}
.invoices-section .invoice-table th {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #6c757d;
}
.invoices-section .invoice-table td {
  font-size: 0.9rem;
}
.invoices-section .invoice-table tr:hover {
  background: #fdfdfe;
}
 /* ——— Modal polish ——— */
  .deal-modal .card {
    border: 0;
    border-radius: 1rem;
    -webkit-box-shadow: 0 6px 30px rgba(0,0,0,.06);
            box-shadow: 0 6px 30px rgba(0,0,0,.06);
  }
  .deal-modal .card-body {
    padding: 1.25rem;
  }
  .deal-modal .section-title {
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: .2px;
    color: #111827;
    margin-bottom: .25rem;
  }
  .deal-modal .section-subtitle {
    font-size: .85rem;
    color: #6b7280;
    margin-bottom: 1rem;
  }
  .deal-modal .label-quiet {
    font-size: .85rem;
    color: #6b7280;
    margin-bottom: .25rem;
  }
  .deal-modal .input-pill {
    border-radius: .75rem;
    padding: .65rem .9rem;
  }
  .deal-modal .hint {
    font-size: .8rem;
    color: #6b7280;
    margin-top: .4rem;
  }
  .deal-modal .badge-soft {
    background: #f3f4f6;
    color: #111827;
    border-radius: .5rem;
    padding: .25rem .55rem;
    font-weight: 500;
  }
  .deal-modal .divider {
    height: 1px;
    background: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(#e5e7eb), to(transparent));
    background: linear-gradient(90deg, transparent, #e5e7eb, transparent);
    margin: .5rem 0 1rem;
  }
  /* ===== Deal Header: Modern, clean, responsive ===== */
  .deal-header-card {
    border: 0;
    border-radius: 16px;
    padding: 18px 20px;
   
  }
  .deal-header {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .deal-title-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 10px 12px;
    min-width: 0; /* enables ellipsis */
  }
  .deal-title {
    margin: 0;
    font-size: clamp(1.15rem, 1.1rem + .5vw, 1.5rem);
    font-weight: 700;
    letter-spacing: 0;
    color: #0f172a; /* slate-900 */
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .chip {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: .5rem;
    padding: .35rem .7rem;
    border-radius: 999px;
    background: -webkit-gradient(linear,left top, left bottom,from(#eef2ff), to(#e6ebff));
    background: linear-gradient(180deg,#eef2ff 0%, #e6ebff 100%);
    border: 1px solid #dbe3ff;
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
            box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
  }
  .chip .chip-label {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 700;
    color: #4f46e5; /* indigo-600 */
    opacity: .9;
  }
  .chip .chip-value {
    font-size: .9rem;
    font-weight: 700;
    color: #1f2937; /* gray-800 */
  }
  .chip.mono { background: #f8fafc; border-color: #e2e8f0; }
  .chip.mono .chip-label { color: #64748b; }
  .chip.mono .chip-value { color: #334155; font-variant-numeric: tabular-nums; }
  .divider-dot {
    width: 4px; height: 4px; border-radius: 50%;
    background: #d1d5db; display: inline-block; margin: 0 .25rem;
  }
  .deal-actions .btn {
    border-radius: 10px;
    padding: .45rem .8rem;
  }
  .btn-ghost {
    background: #f8fafc; border: 1px solid #e2e8f0; color: #0f172a;
  }
  .btn-ghost:hover { background: #eef2f7; }

  /* Dark mode (optional, auto) */
  @media (prefers-color-scheme: dark) {
    .deal-header-card { background: #0b1220; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.5), 0 16px 40px rgba(0,0,0,.45); box-shadow: 0 1px 2px rgba(0,0,0,.5), 0 16px 40px rgba(0,0,0,.45); }
    .deal-title { color: #e5e7eb; }
    .chip { background: rgba(79,70,229,.15); border-color: rgba(79,70,229,.35); }
    .chip .chip-label { color: #a5b4fc; }
    .chip .chip-value { color: #e5e7eb; }
    .chip.mono { background: rgba(148,163,184,.12); border-color: rgba(148,163,184,.25); }
    .chip.mono .chip-label { color: #cbd5e1; }
    .chip.mono .chip-value { color: #f1f5f9; }
    .divider-dot { background: #475569; }
    .btn-ghost { background: #0f172a; border-color: #1f2937; color: #e5e7eb; }
    .btn-ghost:hover { background: #111827; }
}

.deal-cell .title {
font-weight: 700;
color: #0f172a;
margin: 0;
line-height: 1.2;
}

.deal-cell .chips {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: .35rem .5rem;
margin-top: .25rem;
}

.deal-chip {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
    align-items: center;
gap: .45rem;
padding: .28rem .55rem;
border-radius: 999px;
font-weight: 600;
background: #f8fafc;
border: 1px solid #e2e8f0;
}

.deal-chip .k {
font-size: .7rem;
text-transform: uppercase;
letter-spacing: .06em;
color: #64748b;
}

.deal-chip .v {
font-size: .86rem;
color: #0f172a;
font-variant-numeric: tabular-nums;
}

.deal-chip.mono {
background: #fff;
border-color: #e5e7eb;
}

.deal-chip.mono .k {
color: #9ca3af;
}

.deal-chip.mono .v {
color: #334155;
}

.deal-subtle {
font-size: .8rem;
color: #6b7280;
}
/* ===== Page header ===== */
.deals-header {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex; gap:12px; -webkit-box-align:center; -ms-flex-align:center; align-items:center; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between;
    padding:16px 20px 8px;
  }
  .deals-header h1 {
    margin:0; font-size:1.25rem; font-weight:800; color:#0f172a;
  }
  .deals-actions { display:-webkit-box; display:-ms-flexbox; display:flex; gap:8px; -webkit-box-align:center; -ms-flex-align:center; align-items:center; -ms-flex-wrap:wrap; flex-wrap:wrap; }

  .btn-ghost {
    border:1px solid #e2e8f0; background:#f8fafc; color:#0f172a; border-radius:10px; padding:.45rem .75rem;
  }
  .btn-ghost:hover { background:#eef2f7; }

  /* ===== Table look & feel ===== */
  .deals-table .table {
    --row-pad-y: .7rem; --row-pad-x: .8rem;
    border-radius:14px; overflow:hidden; border:1px solid #e5e7eb;
  }
  .deals-table thead th {
    background:#f8fafc; color:#0f172a; font-weight:700; font-size:.85rem; border-bottom:1px solid #e5e7eb;
  }
  .deals-table tbody tr { -webkit-transition: background .15s ease; transition: background .15s ease; }
  .deals-table tbody tr:hover { background:#fafafa; }
  .deals-table td, .deals-table th { padding: var(--row-pad-y) var(--row-pad-x); vertical-align:middle; }
  .deals-table .sorting { cursor:pointer; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; }

  /* ===== Deal cell (title + subtitle + chips) ===== */
  .deal-cell .title{font-weight:800;color:#0f172a;margin:0;line-height:1.2}
  .deal-subtle{display:inline-block;margin-top:.2rem;font-size:.85rem;color:#6b7280}
  .chips{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:.35rem .5rem;margin-top:.35rem}
  .deal-chip{
    display:-webkit-inline-box;
    display:-ms-inline-flexbox;
    display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:.45rem;
    padding:.28rem .55rem;border-radius:999px;font-weight:600;
    background:#f8fafc;border:1px solid #e2e8f0
  }
  .deal-chip .k{font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:#64748b}
  .deal-chip .v{font-size:.86rem;color:#0f172a;font-variant-numeric:tabular-nums}
  .deal-chip.mono{background:#fff;border-color:#e5e7eb}
  .deal-chip.mono .k{color:#9ca3af}.deal-chip.mono .v{color:#334155}

  /* ===== Search ===== */
  .search-wrap{display:-webkit-box;display:-ms-flexbox;display:flex;gap:8px;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin:8px 0 12px}
  .mon-search-input-minimal{
    max-width:280px;border:1px solid #e2e8f0;border-radius:10px;padding:.45rem .7rem;font-size:.9rem;
    background:#ffffff;
  }
  .mon-search-input-minimal:focus{outline:none;border-color:#cbd5e1; -webkit-box-shadow:0 0 0 4px rgba(99,102,241,.1); box-shadow:0 0 0 4px rgba(99,102,241,.1)}

  /* ——— Investor Snapshot v2 ————————————————————————————— */
.snapshot {
  --bg: #0b1020;                 /* page bg (only used for subtle shadows) */
  --card: #ffffff;
  --border: rgba(15, 23, 42, .08);
  --muted: #6b7280;              /* gray-500 */
  --label: #0f172a;              /* slate-900 */
  --accent: #2563eb;             /* blue-600 */
  --chip: #f1f5f9;               /* slate-100 */
  --ring: rgba(37, 99, 235, .15);

  font-synthesis-weight: none;
}

.snapshot .section-head {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between;
  margin-bottom: .75rem;
}
.snapshot .section-head .title {
  font-size: 14px; font-weight: 700; letter-spacing:.02em; color: var(--label);
}
.snapshot .chip {
  display:-webkit-inline-box;
  display:-ms-inline-flexbox;
  display:inline-flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; gap:.5rem;
  padding:.25rem .6rem; border-radius:999px; background:var(--chip);
  border:1px solid var(--border); font-size:12px; color:#334155;
}

/* Grid */
.snapshot .grid {
  display:grid; gap:14px; grid-template-columns:repeat(12, minmax(0,1fr));
}
@media (max-width: 1199.98px){ .snapshot .grid > * { grid-column: span 6; } }
@media (max-width: 767.98px){ .snapshot .grid > * { grid-column: span 12; } }

/* Cards */
.card-clean {
  background:var(--card); border:1px solid var(--border); border-radius:16px;
  -webkit-box-shadow: 0 1px 0 rgba(2,6,23,.04), 0 6px 16px rgba(2,6,23,.05);
          box-shadow: 0 1px 0 rgba(2,6,23,.04), 0 6px 16px rgba(2,6,23,.05);
}

/* Controls */
.ctrl-card { padding:14px; }
.ctrl-card .form-label { font-size:12px; color:var(--muted); margin-bottom:6px; }
.ctrl-card select.form-select-sm {
  border-radius:12px; border-color:var(--border);
}
.ctrl-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width: 767.98px){ .ctrl-row { grid-template-columns:1fr; } }

/* Metric cards */
.metric {
  padding:14px 14px 12px; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-direction:column; flex-direction:column; gap:8px;
  min-height:96px; position:relative;
}
.metric .meta {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; gap:6px; color:var(--muted); font-size:12px;
}
.metric .value {
  font-weight:800; font-size:24px; line-height:1.1; color:var(--label);
  letter-spacing:-.01em;
}
.metric .hint { font-size:11.5px; color:var(--muted); }

/* Width helpers */
.col-3 { grid-column: span 3; }   /* 4 per row desktop */
.col-4 { grid-column: span 4; }   /* 3 per row */
.col-6 { grid-column: span 6; }   /* half */
.col-12 { grid-column: span 12; } /* full */

/* Hidden backing inputs (keep values for posts) */
.metric input[type="number"].backing {
  position:absolute; inset:0; opacity:0; pointer-events:none;
}

/* Focus ring for keyboard nav */
select.form-select-sm:focus {
  -webkit-box-shadow: 0 0 0 .25rem var(--ring);
          box-shadow: 0 0 0 .25rem var(--ring);
  border-color: transparent;
}
  /* Force white text even if global <a> styles use !important */
  a.btn.pdf-btn,
  a.btn.pdf-btn:visited,
  a.btn.pdf-btn:hover,
  a.btn.pdf-btn:active,
  a.btn.pdf-btn i { color:#fff !important; }

  /* Button colors via CSS vars (Bootstrap 5) */
  .pdf-btn{
    --bs-btn-bg:#dc3545;
    --bs-btn-border-color:#dc3545;
    --bs-btn-hover-bg:#bb2d3b;
    --bs-btn-hover-border-color:#b02a37;
    --bs-btn-active-bg:#b02a37;
    --bs-btn-active-border-color:#a52834;
    --bs-btn-color:#fff;

    background:var(--bs-btn-bg) !important;
    border-color:var(--bs-btn-border-color) !important;
    font-weight:600;
    border-radius:.5rem;
    display:-webkit-inline-box;
    display:-ms-inline-flexbox;
    display:inline-flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center;
  }

    :root {
        --pipe-bg: #f6f8fb;
        --pipe-surface: #fff;
        --pipe-line: #e6e9ef;
        --pipe-muted: #6b7280;
        --pipe-text: #0f172a;
        --pipe-brand: #2563eb;
        --pipe-radius: 16px;
        --pipe-shadow: 0 8px 24px rgba(15, 23, 42, .06)
      }

      .content {
        background: var(--pipe-bg)
      }

      .pipe-header {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        margin-bottom: 16px
      }

      .pipe-actions {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        gap: 10px;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap
      }

      .pipe-search {
        position: relative;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        gap: 8px;
        background: var(--pipe-surface);
        border: 1px solid var(--pipe-line);
        border-radius: 999px;
        padding: 8px 12px
      }

      .pipe-input {
        border: 0;
        outline: 0;
        background: transparent;
        min-width: 240px;
        color: var(--pipe-text)
      }

      .pipe-btn {
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex;
        gap: 8px;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        background: var(--pipe-brand);
        color: #fff;
        border: 1px solid var(--pipe-brand);
        border-radius: 999px;
        padding: 8px 14px;
        font-weight: 600;
        -webkit-box-shadow: var(--pipe-shadow);
                box-shadow: var(--pipe-shadow)
      }

      .pipe-btn-outline {
        background: var(--pipe-surface);
        color: var(--pipe-text);
        border-color: var(--pipe-line)
      }

      .pipe-pills {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        gap: 12px;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        margin-bottom: 18px
      }

      .pipe-pill {
        background: var(--pipe-surface);
        border: 1px solid var(--pipe-line);
        border-radius: 12px;
        padding: 10px 14px;
        min-width: 160px;
        -webkit-box-shadow: var(--pipe-shadow);
                box-shadow: var(--pipe-shadow)
      }

      .pipe-board {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        gap: 16px;
        -webkit-box-align: start;
            -ms-flex-align: start;
                align-items: flex-start;
        overflow-x: auto;
        padding-bottom: 8px
      }

      .pipe-col {
        background: var(--pipe-surface);
        border: 1px solid var(--pipe-line);
        border-radius: var(--pipe-radius);
        min-width: 320px;
        max-width: 360px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-shadow: var(--pipe-shadow);
                box-shadow: var(--pipe-shadow)
      }

      .pipe-col-head {
        padding: 12px 14px;
        border-bottom: 1px solid var(--pipe-line);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        position: sticky;
        top: 0;
        background: var(--pipe-surface);
        z-index: 2;
        border-top-left-radius: var(--pipe-radius);
        border-top-right-radius: var(--pipe-radius)
      }

      .pipe-col-title {
        font-weight: 700;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        gap: 8px;
        color: var(--pipe-text)
      }

      .pipe-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: var(--dot, var(--pipe-brand));
        display: inline-block
      }

      .pipe-col-meta {
        color: var(--pipe-muted);
        font-size: .85rem
      }

      .pipe-col-body {
        padding: 12px;
        min-height: 220px
      }

      .pipe-col-foot {
        padding: 10px 12px;
        border-top: 1px solid var(--pipe-line);
        background: #fafbff
      }

      .pipe-add {
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex;
        gap: 6px;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        border: 0;
        background: transparent;
        color: var(--pipe-brand);
        font-weight: 600
      }

      .pipe-card {
        background: #fff;
        border: 1px solid var(--pipe-line);
        border-radius: 12px;
        padding: 12px;
        margin-bottom: 10px;
        cursor: -webkit-grab;
        cursor: grab;
        -webkit-transition: border-color .12s ease, -webkit-transform .12s ease, -webkit-box-shadow .12s ease;
        transition: border-color .12s ease, -webkit-transform .12s ease, -webkit-box-shadow .12s ease;
        transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
        transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, -webkit-transform .12s ease, -webkit-box-shadow .12s ease
      }

      .pipe-card.dragging {
        opacity: .7;
        -webkit-transform: scale(.99);
                transform: scale(.99);
        border-style: dashed
      }

      .pipe-badge {
        font-size: .68rem;
        font-weight: 800;
        letter-spacing: .03em;
        padding: 3px 8px;
        border-radius: 999px;
        border: 1px solid
      }

      .pipe-badge.lead {
        color: #92400e;
        background: #fffbeb;
        border-color: #fde68a
      }

      .pipe-badge.deal {
        color: #075985;
        background: #e0f2fe;
        border-color: #bae6fd
      }

      .pipe-status {
        color: var(--pipe-muted);
        font-size: .8rem
      }

      .pipe-card-title {
        font-size: .98rem;
        margin: 0 0 6px;
        color: var(--pipe-text)
      }

      .pipe-card-meta {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        color: var(--pipe-muted);
        font-weight: 600
      }

      .pipe-amount {
        color: #0f766e
      }

      .pipe-days {
        font-size: .85rem;
        padding: 2px 8px;
        border-radius: 999px;
        background: #f1f5f9;
        border: 1px solid #e2e8f0
      }

      .pipe-board::-webkit-scrollbar {
        height: 10px
      }

      .pipe-board::-webkit-scrollbar-thumb {
        background: #d6dae3;
        border-radius: 999px
      }

      .pipe-empty {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        min-height: 38vh;
        /* fills that big gap nicely */
      }

      .pipe-empty-card {
        background: var(--pipe-surface);
        border: 1px solid var(--pipe-line);
        border-radius: 16px;
        padding: 28px;
        text-align: center;
        max-width: 560px;
        -webkit-box-shadow: var(--pipe-shadow);
                box-shadow: var(--pipe-shadow);
      }

      .pipe-empty-emoji {
        font-size: 2rem;
        margin-bottom: 8px;
      }

      .pipe-empty-title {
        margin: 0 0 6px;
        color: var(--pipe-text);
      }

      .pipe-empty-sub {
        margin: 0 0 16px;
        color: var(--pipe-muted);
      }

      .pipe-empty-actions {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        gap: 10px;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
      }

      .stage-guide-accordion {
        background: #fff;
        border: 1px solid #e6e9ef;
        border-radius: 14px;
        padding: 20px 22px;
        -webkit-box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
                box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
        margin-top: 20px;
      }

      .stage-guide-title {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        gap: 8px;
        font-weight: 700;
        font-size: 0.95rem;
        color: #0f172a;
        margin-bottom: 12px;
      }

      .stage-guide-icon {
        width: 18px;
        height: 18px;
        color: #2563eb;
        stroke-width: 2.5;
      }

      .stage-guide-accordion .accordion-item {
        border: none;
        border-radius: 10px;
        margin-bottom: 8px;
        overflow: hidden;
        background: #f9fafb;
        -webkit-transition: all 0.2s ease;
        transition: all 0.2s ease;
      }

      .stage-guide-accordion .accordion-item:hover {
        background: #f1f5f9;
      }

      .stage-guide-accordion .accordion-button {
        background: transparent;
        font-size: 0.92rem;
        font-weight: 600;
        color: #0f172a;
        -webkit-box-shadow: none !important;
                box-shadow: none !important;
        border: none;
        padding: 10px 14px;
        gap: 6px;
      }

      .stage-guide-accordion .accordion-button::after {
        -webkit-filter: invert(0.3);
                filter: invert(0.3);
        -webkit-transform: scale(0.8);
                transform: scale(0.8);
      }

      .stage-guide-accordion .accordion-button:not(.collapsed) {
        color: #2563eb;
        background: #f0f7ff;
        font-weight: 700;
      }

      .stage-guide-accordion .accordion-body {
        font-size: 0.9rem;
        color: #475569;
        padding: 12px 16px 14px;
        border-top: 1px solid #e2e8f0;
        line-height: 1.6;
      }
      .stage-guide-wrapper {
  background: #fff;
  border: 1px solid #e6e9ef;
  border-radius: 14px;
  -webkit-box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
          box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
  margin-top: 20px;
  overflow: hidden;
}

/* Main guide header */
.stage-guide-main-btn {
  font-weight: 700;
  font-size: 0.95rem;
  color: #0f172a;
  background: #f8fafc;
  padding: 14px 18px;
  border-bottom: 1px solid #e6e9ef;
  gap: 8px;
}

.stage-guide-main-btn::after {
  -webkit-filter: invert(0.3);
          filter: invert(0.3);
  -webkit-transform: scale(0.9);
          transform: scale(0.9);
}

.stage-guide-main-btn:not(.collapsed) {
  background: #f0f7ff;
  color: #2563eb;
  font-weight: 700;
}

/* Info icon */
.stage-guide-icon {
  width: 18px;
  height: 18px;
  color: #2563eb;
  stroke-width: 2.5;
}

/* Inner accordion styling */
.stage-guide-inner .accordion-item {
  border: none;
  background: #f9fafb;
  border-radius: 10px;
  margin-bottom: 8px;
  -webkit-transition: background 0.2s ease;
  transition: background 0.2s ease;
}

.stage-guide-inner .accordion-item:hover {
  background: #f1f5f9;
}

.stage-guide-inner .accordion-button {
  background: transparent;
  font-size: 0.92rem;
  font-weight: 600;
  color: #0f172a;
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
  border: none;
  padding: 10px 14px;
  gap: 6px;
}

.stage-guide-inner .accordion-button:not(.collapsed) {
  color: #2563eb;
  background: #f0f7ff;
  font-weight: 700;
}

.stage-guide-inner .accordion-body {
  font-size: 0.9rem;
  color: #475569;
  padding: 12px 16px;
  border-top: 1px solid #e2e8f0;
  line-height: 1.6;
}
.item-panel { width: 480px; max-width: 100%; border-left:1px solid #e6e9ef; }
.item-pill { display:inline-block; font-size:.7rem; font-weight:800; letter-spacing:.04em;
  color:#2563eb; background:#eef4ff; border:1px solid #dbe7ff; padding:2px 8px; border-radius:999px; margin-bottom:6px;}
.item-summary { display:grid; grid-template-columns: repeat(4,1fr); gap:10px; margin-bottom:14px; }
.sum-card { background:#f8fafc; border:1px solid #eef2f7; border-radius:10px; padding:10px 12px; }
.sum-card .lbl { font-size:.75rem; color:#64748b; }
.sum-card .val { font-weight:700; color:#0f172a; }
.sum-card.warn .val { color:#b91c1c; }
.item-actions { display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:start; -ms-flex-align:start; align-items:flex-start; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between; gap:10px; margin-bottom:14px; }
.item-actions .contact .lbl { font-size:.75rem; color:#64748b; }
.item-actions .quick .btn { margin-left:6px; }
.item-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px; }
.item-grid > div { background:#fff; border:1px solid #eef2f7; border-radius:10px; padding:10px 12px; }
.item-grid span { display:block; font-size:.75rem; color:#64748b; }
.item-notes { margin-top:6px; }
.notes-head { display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between; margin-bottom:8px; }
.notes-list .note { background:#fff; border:1px solid #eef2f7; border-radius:10px; padding:10px 12px; margin-bottom:8px; }
.note-top { display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between; margin-bottom:4px; }
.note-compose { margin-top:10px; }
.note-compose textarea { resize:vertical; }
.compose-actions { display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between; margin-top:6px; }
.item-history { margin-top:16px; }
.item-history .hist-row { display:-webkit-box; display:-ms-flexbox; display:flex; gap:10px; padding:8px 0; border-top:1px dashed #e6e9ef; }
.item-history .hist-row:first-child { border-top:0; }
.item-history .when { width:120px; color:#475569; }
.item-history .stage { -webkit-box-flex:1; -ms-flex:1; flex:1; font-weight:600; }

.pipe-btn-danger {
  background-color: #dc3545; /* Bootstrap red */
  color: #fff;
  border: none;
  -webkit-transition: background-color 0.2s ease, -webkit-transform 0.1s ease;
  transition: background-color 0.2s ease, -webkit-transform 0.1s ease;
  transition: background-color 0.2s ease, transform 0.1s ease;
  transition: background-color 0.2s ease, transform 0.1s ease, -webkit-transform 0.1s ease;
}

.pipe-btn-danger:hover {
  background-color: #bb2d3b;
  -webkit-transform: translateY(-1px);
          transform: translateY(-1px);
}

.pipe-btn-danger i {
  margin-right: 6px;
}
.pipeline-switch.form-check-input {
  cursor: pointer;
}
.form-check-label.small {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
/* tiny button size to sit nicely beside Manage/Delete */
.btn.btn-xs { padding: .25rem .55rem; font-size: .75rem; border-radius: 9999px; line-height: 1; }

/* pill states */
.pipeline-pill { border: 1px solid transparent; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.pipeline-pill .feather { width: 14px; height: 14px; }
.pipeline-pill.on  { background: #ecfdf5; color: #065f46; border-color: #34d399; } /* green success */
.pipeline-pill.off { background: #f8fafc; color: #475569; border-color: #cbd5e1; } /* neutral */
.pipeline-pill:disabled { opacity: .7; }

/* keep the action row tidy on wrap */
.action-bar { row-gap: .35rem; }
/* keep icons tidy & match button height */
.btn-group .feather { width: 14px; height: 14px; }

/* optional: give the third button a consistent width so the set looks balanced */
.btn-pipeline { min-width: 168px; } /* tweak to taste */
.btn-pipeline {
  min-width: 165px;                 /* keeps all 3 buttons same width */
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: .35rem;
}

.btn-pipeline .feather { width: 15px; height: 15px; }

/* subtle hover for both states */
.btn-pipeline.btn-success:hover {
  background-color: #198754;
  border-color: #198754;
}

.btn-pipeline.btn-outline-secondary:hover {
  background-color: #e9ecef;
  color: #212529;
}
/* wrapper that looks like a small button */
.switch-btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0rem;
  padding: .25rem .6rem;
  border: 1px solid #cbd5e1;           /* subtle border like outline buttons */
  border-radius: .375rem;               /* same rounding as btn-sm */
  background: #fff;
  min-height: 31px;                     /* matches btn-sm height */
}

/* make it feel in the same family as your buttons */
.switch-btn:hover { background: #f8f9fa; }
.switch-btn .form-check-input { width: 2.2rem; height: 1.15rem; margin: 0; cursor: pointer; }
.switch-btn .form-check-input:checked { background-color: #198754; border-color: #198754; } /* success green */
.switch-btn .form-check-label { font-size: .8rem; line-height: 1; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: pointer; }
.switch-btn .spinner-border-sm { width: .9rem; height: .9rem; }

/* keep the bar tidy when buttons wrap */
.action-bar { row-gap: .35rem; }
/* wrapper — make it feel like a proper button */
.switch-btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: .5rem;
  border: 1px solid #dee2e6;
  border-radius: .375rem;
  padding: .35rem .75rem;
  background-color: #fff;
  -webkit-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
  min-height: 31px; /* same height as .btn-sm */
  cursor: pointer;
}

.switch-btn:hover {
  background-color: #f8f9fa;
  border-color: #adb5bd;
}

/* compact switch toggle */
.switch-compact {
  width: 2rem;
  height: 1rem;
  cursor: pointer;
  accent-color: #0d6efd; /* Bootstrap primary blue */
  margin-right: 0.4rem;
  border: 1px solid #adb5bd;
  background-color: #f1f3f5;
}

.switch-compact:checked {
  background-color: #198754; /* green when ON */
  border-color: #198754;
}

/* label styling */
.switch-label {
  font-size: .8rem;
  line-height: 1.1;
  color: #212529;
  white-space: nowrap;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

/* optional spinner sizing */
.switch-btn .spinner-border-sm {
  width: 0.9rem;
  height: 0.9rem;
}
/* /public/css/templates.css */

.page-title { font-weight: 600; letter-spacing: .2px; }
.page-subtitle { color: #6c757d; font-size: .95rem; }

.ui-input { border-radius: 12px; }
.ui-select { border-radius: 12px; }
.ui-btn    { border-radius: 12px; padding-inline: 14px; }

.ui-card {
  border: 1px solid #eef0f3; border-radius: 16px; padding: 14px 16px;
  background: #fff; -webkit-box-shadow: 0 2px 10px rgba(25, 35, 50, .04); box-shadow: 0 2px 10px rgba(25, 35, 50, .04);
}
.ui-modal { border-radius: 16px; overflow: hidden; }

.tpl-card .tpl-name { font-weight: 600; font-size: 1.05rem; }
.tpl-card .tpl-meta { color: #6c757d; font-size: .9rem; }
.tpl-card .tpl-key  { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
                      font-size: .85rem; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* --- Templates grid --- */
.tpl-grid {
  /* Use CSS Grid for perfect wrapping & centering */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1rem;                  /* same visual spacing as g-3 */
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;    /* center short rows (1–2 cards) */
}

/* Remove Bootstrap's column widths inside our grid row */
.tpl-grid > [class*="col-"] { width: 100%; }

/* --- Card layout --- */
.tpl-card {
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 1rem 1rem 0.875rem;
  border: 1px solid var(--bs-border-color, #e5e7eb);
  border-radius: 12px;                /* square? set to 0 if you prefer */
  background: #fff;
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.04);
          box-shadow: 0 1px 2px rgba(0,0,0,.04);
  max-width: 520px;                   /* prevents “stretched” look */
  margin-inline: auto;                /* center each card in its grid cell */
}

/* Tighten headings/meta */
.tpl-name { font-weight: 600; font-size: 1.05rem; line-height: 1.25rem; }
.tpl-meta { font-size: .875rem; color: var(--bs-gray-700, #4b5563); }

/* Long keys don’t explode layout */
.tpl-key {
  font: 500 .8rem ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  background: #f6f7fb;
  border: 1px dashed #e3e6ef;
  border-radius: 8px;
  padding: .4rem .55rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Push actions to the bottom; wrap gracefully */
.tpl-actions {
  margin-top: auto;           /* equal-height cards; buttons stick to bottom */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: .5rem;
}

/* Buttons adapt to width; no hovering across cards */
.tpl-actions > .btn {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;              /* share space evenly */
  min-width: 140px;            /* prevents teeny buttons on tight widths */
}

/* Prefer primary actions earlier in row on wrap */
.tpl-actions > .btn:nth-child(1) { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; }
.tpl-actions > .btn:nth-child(2) { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; }
.tpl-actions > .btn:nth-child(3) { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; }

/* Small screens: full-width buttons (stacked) */
@media (max-width: 576px) {
  .tpl-actions > .btn { -webkit-box-flex: 1; -ms-flex: 1 1 100%; flex: 1 1 100%; }
  .tpl-card { border-radius: 10px; }
}

/* Medium screens: two per row then wrap */
@media (min-width: 577px) and (max-width: 991.98px) {
  .tpl-actions > .btn { -webkit-box-flex: 1; -ms-flex: 1 1 calc(50% - .5rem); flex: 1 1 calc(50% - .5rem); }
}

/* Large screens: compact buttons on one line (when space allows) */
@media (min-width: 992px) {
  .tpl-actions > .btn { -webkit-box-flex: 0; -ms-flex: 0 1 auto; flex: 0 1 auto; }
}

/* Optional: match your light grey page gutters like the screenshot */
body, .tpl-grid:before, .tpl-grid:after { background-color: #f2f3f6; }
/* === FIX: use flex wrapper instead of CSS grid === */
.tpl-grid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 1rem;                 /* same visual spacing as g-3 */
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: left;   /* center when only 1–2 cards */
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}

/* Each card column becomes a flexible tile */
.tpl-grid > [class*="col-"] {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 320px;
          flex: 1 1 320px;           /* min width ~320px, grows as space allows */
  max-width: 520px;          /* stops the “stretched” look on wide screens */
  width: auto;               /* override Bootstrap's width inside flex */
}

/* Keep the rest from before (equal-height cards, action wrap, etc.) */
.tpl-card {
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 1rem 1rem 0.875rem;
  border: 1px solid var(--bs-border-color, #e5e7eb);
  border-radius: 12px;       /* set to 0 for square corners */
  background: #fff;
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.04);
          box-shadow: 0 1px 2px rgba(0,0,0,.04);
  margin-inline: auto;
}

.tpl-actions {
  margin-top: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: .5rem;
}
.tpl-actions > .btn { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; min-width: 140px; }

@media (max-width: 576px) { .tpl-actions > .btn { -webkit-box-flex: 1; -ms-flex: 1 1 100%; flex: 1 1 100%; } }
@media (min-width: 577px) and (max-width: 991.98px) { .tpl-actions > .btn { -webkit-box-flex: 1; -ms-flex: 1 1 calc(50% - .5rem); flex: 1 1 calc(50% - .5rem); } }
@media (min-width: 992px) { .tpl-actions > .btn { -webkit-box-flex: 0; -ms-flex: 0 1 auto; flex: 0 1 auto; } }
.style234 {
  max-width: 50%;
}
.style235 {
  max-width: 25%;
}
.style236 {}
.bespoke-tip {
    --bg: linear-gradient(135deg, #f7faff 0%, #eef5ff 100%);
    --border: #d9e6ff;
    --text: #0f172a;
    --accent: #1c89ff;
    --dot: #31c06f;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px 16px;
    -webkit-box-shadow: 0 4px 16px rgba(28,137,255,.06);
            box-shadow: 0 4px 16px rgba(28,137,255,.06);
    font-size: .95rem;
    color: var(--text);
    max-width: 1960px;
  }
  .bespoke-tip .tag {
    display:-webkit-inline-box;
    display:-ms-inline-flexbox;
    display:inline-flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; gap:8px;
    font-weight:600; color:var(--accent);
    background:#fff; border:1px solid var(--border);
    padding:4px 10px; border-radius:999px; margin-bottom:8px;
  }
  .bespoke-tip ul{
    list-style:none; margin:0; padding:0; display:block; gap:0;
  }
  .bespoke-tip li{
    /* FIX: use flex, not grid */
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex; -webkit-box-align:start; -ms-flex-align:start; align-items:flex-start; gap:10px;
    white-space:normal; word-break:normal; -webkit-writing-mode:horizontal-tb; -ms-writing-mode:lr-tb; writing-mode:horizontal-tb;
    line-height:1.35;
    margin:6px 0;
  }
  .bespoke-tip li::before{
    content:""; -webkit-box-flex:0; -ms-flex:0 0 10px; flex:0 0 10px; height:10px; margin-top:6px;
    border-radius:50%; background:var(--dot);
    -webkit-box-shadow:0 0 0 4px rgba(49,192,111,.12);
            box-shadow:0 0 0 4px rgba(49,192,111,.12);
  }
  .bespoke-tip .soft{ color:#475569; font-size:.88rem; }

  /* Keep the segmented tab bar clickable above any pane content */
.nav-tabs,
.mon-segmented-control {
  position: relative;   /* create stacking context */
  z-index: 1000;        /* higher than pane content */
  background: #fff;     /* optional: avoid bleed-through */
}

/* Pane containers should sit below the tabs */
.tab-content {
  position: relative;
  z-index: 1;
}

/* Ensure the overlapping row can't rise above the tabs */
#dealsIndefault {
  position: relative;   /* establish its own context */
  z-index: 0;           /* definitely below the tabs */
  /* remove any negative top margins if present */
}

/* Discharge Statements section (scoped under .ds-section) */
.ds-section {
  margin-top: 1.5rem;
}

/* Card shell */
.ds-section .ds-card {
  background-color: #ffffff;
  border-radius: 10px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  -webkit-box-shadow: 0 10px 25px rgba(15, 23, 42, 0.06);
          box-shadow: 0 10px 25px rgba(15, 23, 42, 0.06);
  overflow: hidden;
}

/* Header */
.ds-section .ds-card-header {
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  background-color: #ffffff;       /* plain white */
  color: #111827;                  /* dark text */
}


.ds-section .ds-title {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.ds-section .ds-subtitle {
  font-size: 0.8rem;
  opacity: 0.85;
}

/* Body */
.ds-section .ds-card-body {
  padding: 1rem 1.25rem 1.2rem;
}

.ds-section .ds-table-wrapper {
  margin-top: 0.25rem;
}

/* Table styling */
.ds-section .ds-table {
  margin-bottom: 0;
  border-collapse: separate;
  border-spacing: 0 4px;
}

.ds-section .ds-table thead th {
  border: none;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  color: #6b7280;
  background-color: #f9fafb;
}

.ds-section .ds-table thead tr th:first-child {
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}

.ds-section .ds-table thead tr th:last-child {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}

.ds-section .ds-table tbody tr {
  background-color: #ffffff;
  -webkit-box-shadow: 0 1px 0 rgba(15, 23, 42, 0.03);
          box-shadow: 0 1px 0 rgba(15, 23, 42, 0.03);
}

.ds-section .ds-table tbody tr td {
  border-top: none;
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
}

.ds-section .ds-table tbody tr:hover {
  background-color: #f3f4ff;
}

/* Title cell */
.ds-section .ds-title-cell {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.ds-section .ds-row-title {
  font-weight: 500;
  color: #111827;
}

/* Date input + button */
.ds-section .ds-date-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.4rem;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

.ds-section .ds-date-input {
  min-width: 150px;
  max-width: 180px;
  background-color: #f9fafb;
  border-color: #e5e7eb;
  font-size: 0.8rem;
}

.ds-section .ds-date-input:disabled {
  opacity: 1;
  color: #111827;
}

/* Actions */
.ds-section .ds-actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.35rem;
}

/* Buttons (scoped) */
.ds-section .ds-btn {
  border-radius: 999px;
  padding-inline: 0.8rem;
  font-size: 0.78rem;
  font-weight: 500;
  border-width: 1px;
}

/* Primary */
.ds-section .ds-btn-primary {
  background-color: #1d4ed8;
  border-color: #1d4ed8;
  color: #ffffff;
}

.ds-section .ds-btn-primary:hover {
  background-color: #1e40af;
  border-color: #1e40af;
}

/* Danger */
.ds-section .ds-btn-danger {
  background-color: #dc2626;
  border-color: #dc2626;
  color: #ffffff;
}

.ds-section .ds-btn-danger:hover {
  background-color: #b91c1c;
  border-color: #b91c1c;
}

/* Outline (PDF button) */
.ds-section .ds-btn-outline {
  background-color: transparent;
  border-color: #d1d5db;
  color: #374151;
}

.ds-section .ds-btn-outline:hover {
  background-color: #f3f4f6;
  border-color: #9ca3af;
}

/* Ghost (Change date) */
.ds-section .ds-btn-ghost {
  background-color: #f3f4ff;
  border-color: transparent;
  color: #1d4ed8;
}

.ds-section .ds-btn-ghost:hover {
  background-color: #e0e7ff;
}

/* Column widths on larger screens */
@media (min-width: 768px) {
  .ds-section .ds-date-col {
    width: 220px;
  }

  .ds-section .ds-action-col {
    width: 260px;
  }
}
 
.input-save-wrapper {
  position: relative;
}

/* Slightly reduce reserved space since button is small */
.input-save-wrapper .form-control,
.input-save-wrapper .form-select {
  padding-right: 3rem; /* adjust if needed */
}

/* Make inline save buttons tiny */
.btn-save-inline {
  position: absolute;
  top: 50%;
  right: 1.1rem;                 /* bring it inside a bit */
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  z-index: 2;

  padding: 0.3rem 0.15rem;       /* <-- MUCH smaller button */
  font-size: 0.6rem;              /* smaller text */
  line-height: 1;
}

/* Scope everything to the Edit Security modal */
#editSecurity .security-form {
  padding-top: 0.5rem;
}

/* Consistent spacing between rows/columns */
#editSecurity .security-form .row {
  --bs-gutter-x: 1.25rem;
  --bs-gutter-y: 0.75rem;
}

/* Label styling */
#editSecurity .security-form .form-label {
  font-size: 0.8rem;
  font-weight: 500;
  color: #6b7280; /* grey */
  margin-bottom: 0.25rem;
}

/* Unified pill-style input + Save button */
#editSecurity .security-form .input-group {
  border-radius: 999px;
  overflow: hidden;
  background-color: #f9fafb;
  border: 1px solid #e5e7eb;
}

/* Inputs & selects inside those groups */
#editSecurity .security-form .input-group > .form-control,
#editSecurity .security-form .input-group > .form-select {
  border: 0;
  background: transparent;
  -webkit-box-shadow: none;
          box-shadow: none;
  padding: 0.4rem 0.9rem;
  font-size: 0.9rem;
  height: 40px;            /* same height everywhere */
}

/* Fix currency inputs (they were taller before) */
#editSecurity .security-form .currencyInput.form-control {
  height: 40px;
  line-height: 1.5;
}

/* Save buttons on the right */
#editSecurity .security-form .input-group > .btn {
  border-radius: 0;
  border: 0;
  border-left: 1px solid #e5e7eb;
  padding: 0 1rem;
  height: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 0.8rem;
  font-weight: 500;
}

/* Textarea group: taller, but still tidy */
#editSecurity .security-form .security-textarea-group {
  border-radius: 20px;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}

#editSecurity .security-form .security-textarea-group textarea.form-control {
  min-height: 120px;
  padding: 0.75rem 0.9rem;
  resize: vertical;
}

/* Make the textarea's Save button stretch nicely */
#editSecurity .security-form .security-textarea-group .btn {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  padding-top: 0.75rem;
  height: auto;
}
.wappler-temp {}
.style237 {
  max-width: 450px;}


#editSecurity .input-group {
  max-width: 100% !important;
  margin: 0 !important;
}

  /* Wrapper */
  .appform-wrapper {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
  }

  /* Card shell */
  .appform-card {
    border-radius: 1.25rem;
    border: 1px solid rgba(15, 23, 42, 0.06);
    -webkit-box-shadow: 0 16px 40px rgba(15, 23, 42, 0.06);
            box-shadow: 0 16px 40px rgba(15, 23, 42, 0.06);
    overflow: hidden;
    background: #ffffff;
  }

  .appform-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.25);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    gap: 1rem;
    background: linear-gradient(135deg, #f9fafb, #eef2ff);
  }

  .appform-title-block h5 {
    margin: 0;
    font-weight: 600;
    letter-spacing: 0.01em;
  }

  .appform-title-block small {
    display: block;
    margin-top: 0.2rem;
    color: #6b7280;
  }

  .appform-deal-pill {
    font-size: 0.75rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.5);
    background: #ffffff;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 0.25rem;
    color: #4b5563;
    white-space: nowrap;
  }

  .appform-deal-pill span {
    font-weight: 600;
  }

  .appform-body {
    padding: 1.25rem 1.5rem 1.5rem;
  }

  /* Step pills */
  .appform-step-pill {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    background: #eef2ff;
    color: #4f46e5;
    font-weight: 500;
  }

  .appform-step-pill i {
    font-size: 0.85rem;
  }

  .appform-step-sub {
    font-size: 0.8rem;
    color: #6b7280;
  }

  /* Recipient toggle pills */
  .appform-toggle-group {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    gap: 0.4rem;
    padding: 0.2rem;
    border-radius: 999px;
    background: #f9fafb;
    border: 1px solid rgba(148, 163, 184, 0.4);
  }

  .appform-toggle-btn {
    border: 0;
    border-radius: 999px;
    padding: 0.35rem 0.9rem;
    font-size: 0.75rem;
    background: transparent;
    color: #6b7280;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 0.35rem;
    cursor: pointer;
    -webkit-transition: background-color 0.15s ease, color 0.15s ease, -webkit-box-shadow 0.15s ease;
    transition: background-color 0.15s ease, color 0.15s ease, -webkit-box-shadow 0.15s ease;
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, -webkit-box-shadow 0.15s ease;
  }

  .appform-toggle-btn i {
    font-size: 0.85rem;
  }

  .appform-toggle-btn:hover {
    background: #e5e7eb;
  }

  .appform-toggle-btn.active {
    background: #111827;
    color: #f9fafb;
    -webkit-box-shadow: 0 6px 18px rgba(15, 23, 42, 0.3);
            box-shadow: 0 6px 18px rgba(15, 23, 42, 0.3);
  }

  /* Generate button & helper text */
  .appform-generate-btn {
    border-radius: 999px;
    font-size: 0.8rem;
    padding-inline: 1.25rem;
  }

  .appform-helper {
    font-size: 0.75rem;
    color: #6b7280;
  }

  /* Latest link card */
  .appform-link-card {
    border-radius: 1rem;
    background: radial-gradient(circle at top left, #eef2ff 0, #f9fafb 35%, #ffffff 100%);
    border: 1px solid rgba(129, 140, 248, 0.35);
  }

  .appform-link-card-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
  }

  .appform-link-chip {
    font-size: 0.7rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: rgba(16, 185, 129, 0.08);
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.25);
  }

  .appform-link-input .form-control {
    border-radius: 999px 0 0 999px;
    font-size: 0.8rem;
    background: #f9fafb;
  }

  .appform-link-input .btn-copy {
    border-radius: 0 999px 999px 0;
    font-size: 0.8rem;
  }

  .appform-link-empty {
    font-size: 0.8rem;
    color: #9ca3af;
  }

  /* Previous links table */
  .appform-table-wrapper {
    margin-top: 1.5rem;
  }

  .appform-table-title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
  }

  .appform-table-title h6 {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
  }

  .appform-table-title small {
    font-size: 0.75rem;
    color: #6b7280;
  }

  .appform-table {
    font-size: 0.8rem;
  }

  .appform-table th {
    font-weight: 500;
    color: #6b7280;
  }

  .appform-recipient-pill {
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.5);
    padding: 0.1rem 0.5rem;
    font-size: 0.7rem;
    text-transform: capitalize;
  }

  .appform-status-pill {
    font-size: 0.7rem;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
  }

  .appform-status-pill.active {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
  }

  .appform-status-pill.inactive {
    background: rgba(148, 163, 184, 0.14);
    color: #4b5563;
  }

  .appform-link-text {
    max-width: 220px;
  }

  .appform-empty {
    font-size: 0.8rem;
    color: #9ca3af;
  }


  /* --- Borrower App Review modal styling --- */
  #appReview .modal-dialog {
    max-width: 1100px;
  }

  #appReview .modal-content.app-review-modal {
    border-radius: 1rem;
    border: none;
    -webkit-box-shadow: 0 18px 45px rgba(15, 23, 42, 0.18);
            box-shadow: 0 18px 45px rgba(15, 23, 42, 0.18);
  }

  #appReview .app-review-header-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 2px;
  }

  #appReview .app-review-header-sub {
    font-size: 0.8rem;
    color: #6b7280;
  }

  #appReview .app-review-summary-row {
    margin-bottom: 1rem;
  }

  #appReview .app-summary-card {
    border-radius: 0.75rem;
    border: 1px solid #e5e7eb;
    background-color: #f9fafb;
    padding: 0.75rem 0.9rem;
    font-size: 0.8rem;
  }

  #appReview .app-summary-card-label {
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.7rem;
    margin-bottom: 0.15rem;
  }

  #appReview .app-summary-card-value {
    font-weight: 600;
    font-size: 0.95rem;
    color: #111827;
  }

  #appReview .app-review-tabs .nav-link {
    font-size: 0.8rem;
    padding: 0.5rem 0.9rem;
  }

  #appReview .app-review-section-card {
    border-radius: 0.75rem;
    border: 1px solid #e5e7eb;
    background-color: #ffffff;
    padding: 0.85rem 0.9rem;
    margin-bottom: 0.9rem;
  }

  #appReview .app-review-section-title {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6b7280;
    margin-bottom: 0.45rem;
  }

  #appReview .app-review-dl dt {
    font-size: 0.8rem;
    color: #6b7280;
  }

  #appReview .app-review-dl dd {
    font-size: 0.8rem;
    margin-bottom: 0.2rem;
    color: #111827;
  }

  #appReview .app-review-table-title {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6b7280;
    margin-bottom: 0.3rem;
  }

  #appReview .app-review-doc-alert {
    font-size: 0.8rem;
  }

  #appReview .app-review-apply-card .form-check {
    font-size: 0.78rem;
  }

  #appReview .app-review-apply-card .text-muted {
    font-size: 0.78rem;
  }

  #appReview .app-review-signature-img {
    max-width: 260px;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    background: #fff;
    display: block;
  }

/* Overall layout */
.fc-layout {
  margin-top: 1rem;
}

/* Main cards */
.fc-card {
  background: #ffffff;
  border-radius: 18px;
  border: 1px solid #eef2f7;
  -webkit-box-shadow: 0 16px 40px rgba(15, 23, 42, 0.06);
          box-shadow: 0 16px 40px rgba(15, 23, 42, 0.06);
  padding: 1.5rem 1.5rem 1.25rem;
}

/* Card header */
.fc-card-header {
  border-bottom: 1px solid #f1f5f9;
  padding-bottom: 0.75rem;
  margin-bottom: 1rem;
}

.fc-card-title {
  font-size: 1rem;
  font-weight: 600;
  color: #111827;
  margin: 0 0 0.1rem;
}

.fc-card-subtitle {
  font-size: 0.85rem;
  color: #6b7280;
  margin: 0;
}

/* Card body */
.fc-card-body {
  padding-top: 0.25rem;
}

/* Chip in header */
.fc-chip {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  background: #eef2ff;
  color: #4b5563;
  font-size: 0.78rem;
}

.fc-chip strong {
  font-weight: 600;
  color: #1d4ed8;
}

/* Inner panels */
.fc-panel {
  border-radius: 14px;
  border: 1px solid #e5e7eb;
  padding: 0.9rem 1rem;
  background: #f9fafb;
  height: 100%;
}

.fc-panel-form {
  background: #f9fbff;
}

.fc-panel-list {
  background: #ffffff;
}

/* Panel titles */
.fc-panel-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: #111827;
  margin-bottom: 0.1rem;
}

.fc-panel-subtitle {
  font-size: 0.8rem;
  color: #6b7280;
  margin-bottom: 0.8rem;
}

/* Labels / help text */
.fc-label {
  font-size: 0.8rem;
  font-weight: 500;
  color: #374151;
}

.fc-help {
  font-size: 0.75rem;
  color: #9ca3af;
}

/* Inputs */
.fc-panel .form-control-sm,
.fc-panel .form-select-sm {
  font-size: 0.8rem;
  border-radius: 0.5rem;
}

/* Tables */
.fc-table {
  font-size: 0.8rem;
}

.fc-table thead th {
  color: #9ca3af;
  font-weight: 500;
  border-bottom-width: 1px;
}

.fc-table tbody td {
  vertical-align: middle;
}

/* Pills for basis / type */
.fc-pill {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: #f3f4f6;
  color: #4b5563;
  font-size: 0.7rem;
}

/* Buttons */
.fc-btn-primary {
  border-radius: 999px;
}

/* Responsive tweaks */
@media (max-width: 991.98px) {
  .fc-card {
    padding: 1.1rem 1.1rem 1rem;
  }
}
/* Root variables for easy theming */
.refdash-section {
  --refdash-bg: #f5f6fa;
  --refdash-card-bg: #ffffff;
  --refdash-border: #e1e4eb;
  --refdash-text-main: #1f2933;
  --refdash-text-muted: #6b7280;
  --refdash-accent: #2563eb;   /* primary blue */
  --refdash-accent-soft: rgba(37, 99, 235, 0.08);
  --refdash-accent-strong: rgba(37, 99, 235, 0.15);
  --refdash-shadow-soft: 0 8px 20px rgba(15, 23, 42, 0.06);
  --refdash-radius-lg: 16px;
  --refdash-radius-md: 12px;
  --refdash-radius-sm: 8px;
}

/* Section wrapper */
.refdash-section {
  background: var(--refdash-bg);
  padding: 1.5rem 1.5rem 2rem;
  border-radius: var(--refdash-radius-lg);
}

/* Filters */
.refdash-filters {
  margin-bottom: 1.5rem;
}

.refdash-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--refdash-text-muted);
}

.refdash-input {
  min-width: 180px;
  border-radius: var(--refdash-radius-sm);
  border-color: var(--refdash-border);
  font-size: 0.875rem;
}

.refdash-input:focus {
  border-color: var(--refdash-accent);
  -webkit-box-shadow: 0 0 0 1px var(--refdash-accent-soft);
          box-shadow: 0 0 0 1px var(--refdash-accent-soft);
}

/* Primary button */
.refdash-btn-primary {
  border-radius: 999px;
  padding-inline: 1.25rem;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--refdash-accent);
  border: none;
  color: #fff;
  -webkit-box-shadow: 0 8px 16px rgba(37, 99, 235, 0.25);
          box-shadow: 0 8px 16px rgba(37, 99, 235, 0.25);
  -webkit-transition:
    background 0.15s ease,
    -webkit-box-shadow 0.15s ease,
    -webkit-transform 0.08s ease;
  transition:
    background 0.15s ease,
    -webkit-box-shadow 0.15s ease,
    -webkit-transform 0.08s ease;
  transition:
    background 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.08s ease;
  transition:
    background 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.08s ease,
    -webkit-box-shadow 0.15s ease,
    -webkit-transform 0.08s ease;
}

.refdash-btn-primary:hover {
  background: #1d4ed8;
  -webkit-box-shadow: 0 10px 22px rgba(37, 99, 235, 0.35);
          box-shadow: 0 10px 22px rgba(37, 99, 235, 0.35);
  -webkit-transform: translateY(-1px);
          transform: translateY(-1px);
}

.refdash-btn-primary:active {
  background: #1e40af;
  -webkit-box-shadow: 0 4px 10px rgba(15, 23, 42, 0.3);
          box-shadow: 0 4px 10px rgba(15, 23, 42, 0.3);
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

/* KPI cards */
.refdash-card {
  border: none;
  border-radius: var(--refdash-radius-md);
  background: var(--refdash-card-bg);
  -webkit-box-shadow: var(--refdash-shadow-soft);
          box-shadow: var(--refdash-shadow-soft);
}

.refdash-card-body {
  padding: 0.85rem 1rem;
}

.refdash-kpi-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--refdash-text-muted);
  margin-bottom: 0.25rem;
}

.refdash-kpi-value {
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--refdash-text-main);
}

/* Panels (left/right cards) */
.refdash-panel {
  border: none;
  border-radius: var(--refdash-radius-md);
  background: var(--refdash-card-bg);
  -webkit-box-shadow: var(--refdash-shadow-soft);
          box-shadow: var(--refdash-shadow-soft);
  overflow: hidden;
}

.refdash-panel-header {
  border-bottom: 1px solid var(--refdash-border);
  background: linear-gradient(135deg, #ffffff, #f9fafb);
  padding: 0.6rem 0.9rem;
}

.refdash-panel-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--refdash-text-main);
}

.refdash-subtitle {
  font-size: 0.75rem;
  color: var(--refdash-text-muted);
}

/* Tables */
.refdash-table-wrapper {
  max-height: 420px;
  overflow: auto;
}

.refdash-table {
  font-size: 0.8rem;
  margin-bottom: 0;
}

.refdash-table thead.refdash-table-head {
  background: #f9fafb;
}

.refdash-table-head th {
  border-bottom: 1px solid var(--refdash-border) !important;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--refdash-text-muted);
}

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

/* Rows */
.refdash-row {
  cursor: pointer;
  -webkit-transition:
    background 0.12s ease,
    -webkit-box-shadow 0.12s ease,
    -webkit-transform 0.08s ease;
  transition:
    background 0.12s ease,
    -webkit-box-shadow 0.12s ease,
    -webkit-transform 0.08s ease;
  transition:
    background 0.12s ease,
    box-shadow 0.12s ease,
    transform 0.08s ease;
  transition:
    background 0.12s ease,
    box-shadow 0.12s ease,
    transform 0.08s ease,
    -webkit-box-shadow 0.12s ease,
    -webkit-transform 0.08s ease;
}

.refdash-row:hover {
  background: #f3f4ff;
}

.refdash-row-active {
  background: var(--refdash-accent-soft) !important;
  -webkit-box-shadow: inset 2px 0 0 var(--refdash-accent);
          box-shadow: inset 2px 0 0 var(--refdash-accent);
}

/* Cells */
.refdash-cell-primary {
  font-weight: 500;
  color: var(--refdash-text-main);
}

.refdash-cell-number {
  -webkit-font-feature-settings: "tnum" 1, "lnum" 1;
          font-feature-settings: "tnum" 1, "lnum" 1;
}

.refdash-empty {
  font-size: 0.8rem;
  color: var(--refdash-text-muted);
  padding: 1.1rem 0.5rem !important;
}

/* Scrollbars (modern subtle look) */
.refdash-table-wrapper::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.refdash-table-wrapper::-webkit-scrollbar-track {
  background: transparent;
}

.refdash-table-wrapper::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.7);
  border-radius: 999px;
}

.refdash-table-wrapper:hover::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, 0.9);
}

/* Responsive tweaks */
@media (max-width: 991.98px) {
  .refdash-section {
    padding: 1rem;
  }

  .refdash-table-wrapper {
    max-height: 360px;
  }
}

@media (max-width: 767.98px) {
  .refdash-kpi-value {
    font-size: 1.35rem;
  }

  .refdash-panel-header {
    padding-inline: 0.75rem;
  }
}