/* Custom Variables */
  :root {
      --colorPrimary: #032526 !important;
      --colorSecondary: #5FB980 !important;
  }

  /* ===============================
   SIDEBAR AND GENERAL STRUCTURE
================================ */

  /* Sidebar */
  .dashboard-widget {
      position: fixed;
      top: 0;
      left: 0;
      width: 260px;
      height: 100vh;
      background: #0b2f2b;
      overflow-y: auto;
      z-index: 1000;
      border-right: 1px solid #ccc;
      /* Light border for separation */
  }


  /* Shift everything except sidebar */
  /* Only dashboard pages should shift */
  .dashboard-area {
      margin-left: 260px;
      padding: 20px;
  }

  /* Banner should NOT shift */
  .banner-area {
      padding: 10px;
      /* margin-left: 150px; */


  }

  /* Dashboard content padding */
  .dashboard-area {
      padding: 30px 40px;
  }

  /* Banner spacing */

  /* Navbar */
  .header-area {
      background: #032526 !important;
      /* padding: 10px 0; */
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
      border-bottom: 1px solid #ffffff;
  }

  .d-headline {
      font-family: Okra, Helvetica, sans-serif;
      font-size: 40px;
  }

  .dash-head {
      font-family: Okra, Helvetica, sans-serif;
      font-size: 40px;
      color: white;
      padding-bottom: 20px;
  }

  /* Navbar align right */
  .header-area .row {
      justify-content: flex-end;
  }

  .header-info ul {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 25px;
  }

  .detail-dashboard {
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
      border-radius: 8px;
  }

  /* ===============================
   TABLE STYLES
================================ */

  /* Table Styles */
  .table-responsive {
      border: 1px solid #e0e0e0;
      border-radius: 8px;
      /* Rounded corners for the table */
      margin-top: 30px;
  }

  .dashboard-table {
      width: 100%;
      border-collapse: collapse;
      background: #fff;
      font-size: 14px;
      color: #333;
      /* Darker text for better readability */
  }

  .dashboard-table th,
  .dashboard-table td {
      padding: 15px;
      text-align: center;
      /* Center align for better structure */
      border-bottom: 1px solid #f1f1f1;
      /* Light border for row separation */
  }

  .dashboard-table th {
      background-color: #032526;
      color: #fff;
      font-weight: bold;
  }

  .dashboard-table td {
      background-color: #f9f9f9;
  }

  .dashboard-table tr:nth-child(even) {
      background-color: #f1f1f1;
      /* Stripe effect for readability */
  }

  /* ===============================
   CONTENT SPACING FIX
================================ */

  /* Fix main content wrapper */
  .detail-dashboard {
      padding: 15px !important;
      height: auto;
  }
  .detail-meeting {
      min-height: 77.2vh;
  }

  .detail-meeting h2 {
      color: white;
  }

  .detail-upcoming {

      min-height: 77.2vh;

  }
  .detail-upcoming h2 {
      color: white;
  }
  .detail-appointment {

      min-height: 77.2vh;

  }

  .detail-appointment h2 {
      color: white;
  }

  .detail-order {
      min-height: 77.2vh;
  }

  .detail-order h2 {
      color: white;
  }
  .detail-password {
      min-height: 77.2vh;
  }

  .detail-password h2 {
      color: white;
  }

  .detail-password .btn-primary {
      background-color: #5FB980;
      border-color: #5FB980;
      color: #fff;
      padding: 8px 22px;
      font-weight: 500;
      border-radius: 6px;
  }

  .detail-password .btn-primary:hover {
      background-color: #4aa86f;
      border-color: #4aa86f;
  }

  .detail-message h2 {
      color: white;
  }

  .user-wrapper {
      height: 600px;
      border-radius: 10px;
      border: 1px solid #dddddd;
      overflow-y: auto;
      background-color: #ffffff;
      /* added */
  }

  .send_text .btn-primary {
      background-color: #5FB980;
      border-color: #5FB980;
      color: #fff;
      font-weight: 500;
      border-radius: 6px;
  }

  .send_text .btn-primary:hover {
      background-color: #4aa86f;
      border-color: #4aa86f;
  }

  /* Make inner cards stretch properly */
  .profile_info_area,
  .wsus__profile_info {
      width: 100% !important;
  }

  /* Since sidebar is fixed, remove Bootstrap width only */
  .dashboard-area .col-lg-3 {
      width: 0;
      padding: 0;
  }

  /* Let message column take full width */
  .dashboard-area {
      flex: 1 1 100%;
      max-width: 100%;
      width: 100%;
      display: flex;
  }

  /* Control message card width */
  .detail-dashboard.add-form {
      width: 100%;
      max-width: 1000px;
  }

  /* ===============================
   LINK STYLES
================================ */
  a {
      color: #5FB980;

      text-decoration: none;

  }

  a:hover {
      text-decoration: underline;

  }

  /* ===============================
   BANNER AREA STYLING
================================ */

  .banner-text {
      padding: 5px 0;
      text-align: center;
      background-color: #032526;
      /* Dark background */
      color: #fff;
      border-radius: 8px;

      /* Rounded corners */
  }

  .banner-text h2 {
      font-size: 32px;
      font-weight: 700;
      color: #fff;
  }

  .banner-text ul {
      display: flex;
      justify-content: center;
      gap: 15px;
      margin-top: 10px;

  }

  .banner-text ul li {
      font-size: 14px;
  }

  .banner-text ul li a {
      color: #fff;
  }

  .banner-text ul li span {
      color: #5FB980;
      /* Highlighted text */
  }


  /* ===============================
   RESPONSIVE STYLES
================================ */

  @media (max-width: 768px) {
      .dashboard-area {
          margin-left: 0;
          /* Remove sidebar margin on small screens */
      }

      .dashboard-widget {
          position: static;
          /* Make sidebar static on small screens */
          width: 100%;
      }

      .header-area {
          padding: 10px 0;
      }
  }

  .dashboard-area .detail-dashboard ul li,
  .dashboard-area .detail-dashboard ul li span,
  .dashboard-area .detail-dashboard {
      color: #000 !important;
  }

  .single-column-profile .info-row {
      display: flex;
      margin-bottom: 14px;
  }

  .single-column-profile .label {
      width: 180px;
      font-weight: 600;
      color: #1e1e1e;
  }

  .single-column-profile .label::after {
      content: " :";
      margin-left: 4px;
  }

  .single-column-profile .value {
      flex: 1;
      color: #444;
  }

  .btn-green {
      background-color: #0d3f36;
      /* Dark Green */
      color: #fff;
      border: none;
      transition: 0.3s ease;
  }

  .btn-green:hover {
      background-color: #5FB980;
      ;
      /* Light Green on hover */
      color: #fff;
  }

  .banner-area {
      margin-left: 200px;
      /* same as sidebar width */
      padding: 10px 80px;
      width: 90% !important;
      /* Set width to 20% */
  }


  /* Banner Wrapper */
  .banner-inner {
      background: #003c37;
      padding: 5px 5px;
      /* reduced padding */
      margin: 0 auto;
      border-radius: 8px;
      max-width: 1200px;
      text-align: center;
  }

  /* Title */
  .banner-inner h2 {
      color: #ffffff !important;
      font-size: 28px;
      font-weight: 700;
      margin-bottom: 8px;
  }

  /* Breadcrumb */
  .banner-inner ul li {
      color: #ffffff;
      font-size: 14px;
  }

  .banner-inner ul li a {
      color: #ffffff;
  }

  .banner-inner ul li span {
      color: #5FB980;
      /* keep highlight green */
  }

  .login-banner-wrapper {
      width: 100%;
      background: #f5f5f5;
      /* page background */
      padding: 20px 0;
  }

  .login-banner-box {
      background: #003c37;
      /* dark green */
      color: #fff;
      max-width: 1200px;
      margin: auto;
      padding: 10px 10px;
      border-radius: 10px;
  }

  .login-banner-box h2 {
      margin-bottom: 10px;
      font-size: 28px;
  }

  .login-banner-box ul li {
      color: #cfd8dc;
  }

  .login-banner-box ul li a {
      color: #cfd8dc;
      text-decoration: none;
  }

  .login-banner-box ul li span {
      color: #6ed39c;
  }

  .login-banner-box h2 {
      margin-bottom: 10px;
      font-size: 28px;
      color: #fff;
      /* add this line */
  }

  .order-details-table tr:first-child th {
      background: #032526 !important;
      color: #fff !important;
      border-right: 1px solid #0d3f36;
      border-bottom: none;
  }

  .order-details-table td {
      border-right: 1px solid #e0e0e0;
  }

  .order-details-table th:last-child,
  .order-details-table td:last-child {
      border-right: none;
  }
.login-title{
    font-family: Okra, Helvetica, sans-serif;
    font-size: 40px;
}