@import url("https://fonts.googleapis.com/css2?family=Red+Hat+Display:ital,wght@0,300..900;1,300..900&display=swap");

/* img {
  width: 100%;
  height: 100%;
  border: none;
} */

a {
  text-decoration: none !important;
  outline: none !important;
}

/* 
img {
  width: 100%;
  height: 100%;
  border: none;
} */

/* p:last-of-type,
p:last-child {
  margin-bottom: 0;
} */
* {
  padding: 0;
  margin: 0;
}

body {
  font-family: "Red Hat Display", sans-serif;
}

/* ==========================================================================
   Therapist Profile Scoped Layout CSS
   ========================================================================== */

.therapist-profile-container {
  /* UI Kit Design Tokens */
  --tp-primary-plum: #74505c;
  --tp-primary-plum-hover: #563e49;
  --tp-olive-green: linear-gradient(180deg, #93996d 0%, #52553e 100%);
  --tp-olive-green-light: #f4f6f0;
  --tp-bg-gray: #fafafa;
  --tp-input-bg: #f4f5f07d;
  --tp-border-color: #eaeaea;
  --tp-text-dark: #3f3f3f;
  --tp-text-muted: #9e9e9e;

  /* Font Family Token */
  --tp-font-family: "Red Hat Display", system-ui, -apple-system, sans-serif;

  /* Radii Design System */
  --tp-radius-lg: 30px;
  --tp-radius-md: 20px;
  --tp-radius-sm: 12px;

  font-family: var(--tp-font-family);
  background-color: var(--tp-bg-gray);
  color: var(--tp-text-dark);
  min-height: 100vh;
}

/* Enforce font family across form elements within the container */
.therapist-profile-container input,
.therapist-profile-container button,
.therapist-profile-container textarea,
.therapist-profile-container select,
.therapist-profile-container span,
.therapist-profile-container label {
  font-family: var(--tp-font-family) !important;
}

/* Header Section */
.therapist-profile-container .tp-header mb-5 {
  margin-bottom: 3rem;
}

.therapist-profile-container .tp-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: #363636;
  font-weight: 600;
  font-size: 32px;
  font-size: 1.5rem;
  transition: opacity 0.2s;
}

/* .therapist-profile-container .tp-back-btn:hover {
  opacity: 0.8;
  color: var(--tp-text-dark);
} */

.therapist-profile-container .tp-subtitle {
  color: #858484;
  font-size: 0.875rem;
  font-weight: 400;
  font-size: 16px;
  margin-left: 2.2rem;
}

/* Section Controls */

.therapist-profile-container .tp-section-title {
  font-size: 20px;
  font-weight: 500;
  display: flex;
  align-items: center;
  color: #363636;
  gap: 10px;
  padding-bottom: 12px;
}

.therapist-profile-container .tp-label {
  font-size: 14px;
  font-weight: 600;
  color: #1A1A1A;
  margin-bottom: 8px;
  display: block;
}

/* Input Fields and Interactive Elements */
.therapist-profile-container .tp-input,
.therapist-profile-container .tp-select-trigger,
.therapist-profile-container .tp-multi-select-trigger {
  width: 100%;
  height: 48px;
  background-color: var(--tp-input-bg);
  border: 1px solid var(--tp-border-color);
  border-radius: var(--tp-radius-lg);
  padding: 0 20px;
  font-size: 0.9rem;
  color: var(--tp-text-dark);
  outline: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.2s ease-in-out;
  font-weight: 500;
  margin-bottom: 20px;
}

.therapist-profile-container .tp-input:focus {
  border-color: var(--tp-primary-plum);
  background-color: #ffffff;
}

.therapist-profile-container .tp-textarea {
  width: 100%;
  background-color: var(--tp-input-bg);
  border: 1px solid var(--tp-border-color);
  border-radius: var(--tp-radius-md);
  padding: 15px 20px;
  font-size: 0.9rem;
  outline: none;
  resize: none;
  font-weight: 500;
  transition: all 0.2s ease-in-out;
}

.therapist-profile-container .tp-textarea:focus {
  border-color: var(--tp-primary-plum);
  background-color: #ffffff;
}

/* Profile Photo Uploader */
.therapist-profile-container .tp-avatar-uploader {
  display: flex;
  align-items: center;
  gap: 15px;
}

.therapist-profile-container .avatar-preview {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: var(--tp-olive-green-light);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed #cdd5c0;
}

/* Action Buttons */
.therapist-profile-container .tp-btn-primary {
  background-color: var(--tp-primary-plum);
  color: #ffffff;
  border: none;
  border-radius: var(--tp-radius-lg);
  padding: 12px 35px;
  font-weight: 600;
  transition: background-color 0.2s;
  font-size: 0.95rem;
}

.therapist-profile-container .tp-btn-primary:hover {
  background-color: var(--tp-primary-plum-hover);
}

.therapist-profile-container .tp-btn-secondary {
  background-color: #ffffff;
  border: 1px solid var(--tp-border-color);
  border-radius: var(--tp-radius-lg);
  padding: 6px 18px;
  font-size: 0.85rem;
  color: var(--tp-text-dark);
  font-weight: 600;
  transition: background-color 0.2s;
}

.therapist-profile-container .tp-btn-secondary:hover {
  background-color: #f5f5f5;
}

.therapist-profile-container .tp-btn-action-enter {
  background-color: var(--tp-primary-plum);
  color: #ffffff;
  border: none;
  border-radius: var(--tp-radius-lg);
  padding: 0 25px;
  font-size: 0.9rem;
  font-weight: 600;
  transition: background-color 0.2s;
}

.therapist-profile-container .tp-btn-action-enter:hover {
  background-color: var(--tp-primary-plum-hover);
}

/* Dynamic Configuration Custom Dropdowns */
.therapist-profile-container .tp-custom-select-wrapper {
  position: relative;
}

.therapist-profile-container .tp-select-trigger {
  cursor: pointer;
}

.therapist-profile-container .tp-dropdown-menu {
  position: absolute;
  top: 105%;
  left: 0;
  right: 0;
  background: #ffffff;
  border-radius: var(--tp-radius-md);
  border: 1px solid var(--tp-border-color);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
  z-index: 100;
  display: none;
  overflow: hidden;
  padding: 10px 0;
}

.therapist-profile-container .tp-dropdown-menu.show {
  display: block;
}

.therapist-profile-container .tp-dropdown-item {
  padding: 10px 20px;
  font-size: 0.9rem;
  cursor: pointer;
  color: var(--tp-text-dark);
  font-weight: 500;
  transition: background-color 0.15s;
}

.therapist-profile-container .tp-dropdown-item:hover {
  background-color: var(--tp-olive-green-light);
}

.therapist-profile-container .tp-dropdown-item.active {
  background-color: var(--tp-olive-green-light);
  color: var(--tp-olive-green);
  font-weight: 600;
}

/* File Badge Subsystems */
.therapist-profile-container .tp-file-uploader-box {
  background: var(--tp-input-bg);
  border: 1px solid var(--tp-border-color);
  border-radius: var(--tp-radius-lg);
  padding: 6px;
  display: flex;
  align-items: center;
}

.therapist-profile-container .tp-btn-file-select {
  background: var(--tp-primary-plum);
  color: #ffffff;
  border: none;
  border-radius: var(--tp-radius-lg);
  padding: 6px 20px;
  font-size: 0.85rem;
  font-weight: 600;
  transition: background-color 0.2s;
}

.therapist-profile-container .tp-btn-file-select:hover {
  background-color: var(--tp-primary-plum-hover);
}

.therapist-profile-container .tp-file-badge {
  background-color: #eaeaea;
  border-radius: var(--tp-radius-sm);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.therapist-profile-container .tp-file-badge .file-name {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--tp-text-dark);
}

.therapist-profile-container .tp-file-badge .file-size {
  font-size: 0.7rem;
  color: var(--tp-text-muted);
  font-weight: 500;
}

.therapist-profile-container .btn-close-file {
  background: none;
  border: none;
  font-size: 1.2rem;
  color: var(--tp-text-dark);
  line-height: 1;
  padding: 0 4px;
  cursor: pointer;
  transition: color 0.15s;
}

.therapist-profile-container .btn-close-file:hover {
  color: #ff4d4d;
}

/* Internal Category Panels & Custom Micro-Pills */
.therapist-profile-container .tp-panel {
  background-color: var(--tp-olive-green-light);
  border-radius: var(--tp-radius-md);
}

.therapist-profile-container .tp-toggle-pill {
  background-color: #ffffff;
  color: var(--tp-text-dark);
  border: 1px solid var(--tp-border-color);
  border-radius: var(--tp-radius-lg);
  padding: 8px 22px;
  font-size: 0.85rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s;
}

.therapist-profile-container .tp-toggle-pill:hover {
  opacity: 0.9;
}

.therapist-profile-container .tp-toggle-pill.active {
  background: var(--tp-olive-green);
  border-color: var(--tp-olive-green);
  color: #ffffff;
}

.therapist-profile-container .tp-pill-outline {
  background: #ffffff;
  border: 1px solid var(--tp-border-color);
  border-radius: var(--tp-radius-lg);
  padding: 8px 22px;
  font-size: 0.85rem;
  color: var(--tp-text-dark);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.therapist-profile-container .tp-pill-outline:hover {
  border-color: var(--tp-olive-green);
  color: var(--tp-olive-green);
}

/* Multi-Select Tags System */
.therapist-profile-container .tp-multi-select-trigger {
  cursor: pointer;
  min-height: 48px;
  height: auto;
  padding: 6px 20px;
}

.therapist-profile-container .tp-tag {
  background: var(--tp-olive-green);
  color: #ffffff;
  padding: 4px 14px;
  border-radius: var(--tp-radius-lg);
  font-size: 0.8rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.therapist-profile-container .tag-close {
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
}

/* Dropdown Extended Selection Dashboard Box */
.therapist-profile-container .tp-dropdown-panel-box {
  position: absolute;
  top: 105%;
  left: 0;
  right: 0;
  background: #ffffff;
  border-radius: var(--tp-radius-md);
  border: 1px solid var(--tp-border-color);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
  z-index: 110;
  display: none;
}

.therapist-profile-container .tp-dropdown-panel-box.show {
  display: block;
}

.therapist-profile-container .tp-search-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.therapist-profile-container .tp-search-field {
  width: 100%;
  height: 40px;
  border: 1px solid var(--tp-border-color);
  border-radius: var(--tp-radius-lg);
  padding: 0 15px 0 38px;
  font-size: 0.85rem;
  outline: none;
  font-weight: 500;
}

.therapist-profile-container .tp-search-field:focus {
  border-color: var(--tp-olive-green);
}

.therapist-profile-container .search-icon {
  position: absolute;
  left: 14px;
  color: var(--tp-text-muted);
}

.therapist-profile-container .panel-options-list {
  max-height: 220px;
  overflow-y: auto;
  padding: 10px 0;
}

/* Custom Component Checkbox Realization */
.therapist-profile-container .tp-checkbox-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  position: relative;
  color: var(--tp-text-dark);
}

.therapist-profile-container .tp-checkbox-item:hover {
  background-color: var(--tp-olive-green-light);
}

.therapist-profile-container .tp-checkbox-item input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.therapist-profile-container .checkmark {
  width: 18px;
  height: 18px;
  border: 2px solid #bcbcbc;
  border-radius: 4px;
  display: inline-block;
  position: relative;
  transition: all 0.15s;
}

.therapist-profile-container .tp-checkbox-item input:checked ~ .checkmark {
  background-color: var(--tp-primary-plum);
  border-color: var(--tp-primary-plum);
}

.therapist-profile-container
  .tp-checkbox-item
  input:checked
  ~ .checkmark:after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Action Control items inside Dropdowns */
.therapist-profile-container .tp-panel-btn {
  border-radius: var(--tp-radius-lg);
  padding: 6px 22px;
  font-size: 0.85rem;
  font-weight: 600;
  border: 1px solid var(--tp-border-color);
  cursor: pointer;
  transition: all 0.2s;
}

.therapist-profile-container .btn-clear {
  background: #ffffff;
  color: var(--tp-text-dark);
}

.therapist-profile-container .btn-clear:hover {
  background-color: #f5f5f5;
}

.therapist-profile-container .btn-apply {
  background: var(--tp-primary-plum);
  color: #ffffff;
  border-color: var(--tp-primary-plum);
}

.therapist-profile-container .btn-apply:hover {
  background-color: var(--tp-primary-plum-hover);
}

/* Utilities */
.therapist-profile-container .tp-input-icon-wrapper {
  position: relative;
}

.therapist-profile-container .tp-input-icon-wrapper .tp-input {
  padding-left: 45px;
}

.therapist-profile-container .tp-input-icon-wrapper .icon-left {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--tp-text-muted);
}

.therapist-profile-container .arrow {
  transition: transform 0.2s ease;
}

/* Rotate indicator arrow when dropdown is open */
.therapist-profile-container .show ~ .arrow,
.therapist-profile-container .tp-custom-select-wrapper:has(.show) .arrow {
  transform: rotate(180deg);
}

/* Login Page Css */
/* ==========================================================================
   ONYBA LOGIN PAGE STYLES - START (No Grid, No Inline CSS, No Flex Shorthand)
   ========================================================================== */

/* Main Section Wrapper - Resetting and handling background/scroll without body or * */
.onyba-login-section {
  width: 100%;
  height: 100vh;
  background: radial-gradient(
    201.07% 201.07% at 50% 50%,
    #ffffff 0%,
    #93996d 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  /* Strict: Top aur Bottom se scroll hatane ke liye */
  box-sizing: border-box;
}

/* Explicit resetting via class name to respect 'no universal selector' rule */
/* .onyba-login-section,
.onyba-login-wrapper,
.onyba-login-left-banner,
.onyba-login-right-content,
.onyba-form-card,
.onyba-header-logo,
.onyba-login-form,
.onyba-form-group,
.onyba-icon-circle {
  box-sizing: border-box;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
} */

/* Layout Wrapper */
.onyba-login-wrapper {
  display: flex;
  flex-direction: row;
  height: 100%;
  width: 100%;
  /* max-width: 1200px; */
  padding-left: 40px;
  padding-right: 40px;
  align-items: center;
  justify-content: space-between;
  z-index: 2;
}

/* Left Side Image Section (Brain Art) */
.onyba-login-left-banner {
  width: 50%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.onyba-brain-container {
  width: 100%;
  max-width: 500px;
  position: relative;
}

.onyba-brain-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

/* Right Side Form Section */
.onyba-login-right-content {
  width: 50%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Form Card White Box */
.onyba-form-card {
  width: 100%;
  max-width: 460px;
  background-color: #ffffffa1;
  border-radius: 40px;
  padding-top: 50px;
  padding-bottom: 50px;
  padding-left: 40px;
  padding-right: 40px;
  box-shadow: 12px 11px 32.2px 0px #0000001c;
  text-align: center;
}

.onyba-header-logo {
  display: flex;
}

.onyba-header-logo img {
  width: 265px;
  height: 171px;
  margin: auto;
}

/* Logo Styles */
.onyba-header-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 42px;
  font-weight: 700;
  /* margin-bottom: 35px; */
}

.onyba-logo-text.onyba-green {
  color: #798a66;
  /* Logo green shade */
}

.onyba-logo-icon {
  color: #6d4c56;
  /* Center icon/plum color */
}

/* Form Titles & Subtitles */
.onyba-form-title {
  font-size: 24px;
  font-weight: 600;
  color: #363636;
  margin-bottom: 8px;
}

.onyba-form-subtitle {
  font-size: 16px;
  font-weight: 400;
  color: #858484;
  margin-bottom: 35px;
  line-height: 1.5;
}

/* Form Controls & Inputs */
.onyba-login-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.onyba-form-group {
  width: 100%;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.onyba-input-field-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  gap: 15px;
  width: 100%;
}

/* Green Circle Icon Container */
.onyba-icon-circle {
  width: 46px;
  height: 46px;
  background-color: #93996d;
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-grow: 0;
  flex-shrink: 0;
}

/* Input Box Style */
.onyba-input-control {
  width: 100%;
  height: 48px;
  padding-left: 20px;
  padding-right: 20px;
  font-size: 15px;
  border: 1px solid #e4e4e4;
  background-color: #fcfcfb;
  border-radius: 25px;
  outline: none;
  color: #2d3129;
  box-sizing: border-box;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
  transition:
    border-color 0.3s,
    background-color 0.3s;
}

.onyba-input-control::placeholder {
  color: #74505c;
}

/* .onyba-input-control:focus {
  border-color: #849175;
  background-color: #ffffff;
} */

/* Action Button (Continue) */
.onyba-submit-btn {
  width: 100%;
  height: 50px;
  background-color: #74505c;
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  margin-top: 5px;
  transition: background-color 0.3s;
  box-shadow: 0px 3px 5.2px 0px #00000040 inset;
}

/* .onyba-submit-btn:hover {
  background-color: #553e46;
} */

/* Background Large Curve Decoration (Bottom Left) */
.onyba-bg-curve {
  position: absolute;
  bottom: -55%;
  left: 6%;
  width: 536px;
  height: 600px;
  background-color: rgba(255, 255, 255, 0.25);
  background: radial-gradient(
    57.18% 57.18% at 50% 50%,
    #93996d 0%,
    #ffffff 100%
  );
  border-radius: 50%;
  z-index: 1;
}

/* Responsive Styles for Tablets & Mobile Screens */
@media (max-width: 868px) {
  .onyba-login-section {
    overflow-y: auto;
    /* Mobile screen par content cut na ho isliye auto aur center flex change kiya */
    align-items: flex-start;
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .onyba-login-wrapper {
    flex-direction: column;
    gap: 40px;
  }

  .onyba-login-left-banner,
  .onyba-login-right-content {
    width: 100%;
  }

  .onyba-bg-curve {
    display: none;
  }
}

.onyba-icon-circle img {
  height: 27px;
  width: 27px;
}

/* ==========================================================================
   ONYBA LOGIN PAGE STYLES - END
   ========================================================================== */
/* Login Page Css */

/* otp */
/* ==========================================================================
   ONYBA VERIFICATION ELEMENT STYLES - NO REDUNDANCY
   ========================================================================== */

/* Form Layout Spacer */
.onyba-login-form {
  display: flex;
  flex-direction: column;
  gap: 30px;
  /* Base spacing inside form changed to 30px for OTP view */
}

/* 5-Inputs Wrapper Row */
.onyba-otp-inputs-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 10px;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Circle OTP Input Box Styling */
.onyba-otp-input-box {
  width: 50px;
  height: 50px;
  border: 1px solid #e9ebe6;
  background-color: #fcfcfb;
  border-radius: 50%;
  /* Perfect circle inputs as shown in design */
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  color: #2d3129;
  outline: none;
  box-sizing: border-box;
  margin: 0;
  transition:
    border-color 0.3s,
    background-color 0.3s;
}

/* Chrome, Safari, Edge, Opera se input arrows (spinners) hatane ke liye */
.onyba-otp-input-box::-webkit-outer-spin-button,
.onyba-otp-input-box::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox se input arrow hatane ke liye */
.onyba-otp-input-box[type="number"] {
  -moz-appearance: textfield;
}

.onyba-otp-input-box:focus {
  border-color: #849175;
  background-color: #ffffff;
}

.onyba-otp-input-box::placeholder {
  color: #a3a89e;
}

/* Footer Resend Area Styling */
.onyba-otp-resend-wrapper {
  font-size: 16px;
  color: #2e1302;
  font-weight: 400;
  margin: 0;
  padding: 0;
}

.onyba-otp-resend-wrapper .onyba-resend-text {
  color: #74505c;
  font-weight: 600;
}

.onyba-timer {
  font-weight: 500;
  color: #2d3129;
}

/* otp */

/* Dashboard header */
.db-card-wrapper-layout {
  display: flex;
  flex-wrap: wrap; 
  gap: 20px;
  width: 100%;
  /* max-width: 1200px; */
}

.card-wrapper {
    display: flex;
    flex-wrap: wrap;
    column-gap: 20px;
    row-gap: 0;
}

/* Unique Card Box Styling */
.db-card-item-box {
  background: #ffffff;
  border-radius: 24px;
  padding: 24px;
  width: calc(20% - 16px);
  min-height: 160px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 6px 6px 54px 0px #0000000d;
  gap:6px;
}

/* Alignment Classes */
.db-card-top-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.db-card-info-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Typography */
.db-card-label-text {
  font-size: 14px;
  color: #1a1a1a;
  font-weight: 600;
}

.db-card-main-value {
  font-size: 36px;
  font-weight: 700;
  line-height: 1;
}

/* Action Links */
.db-card-action-link {
  font-size: 14px;
  color: #4c2834;
  text-decoration: none;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 15px;
}

.db-card-action-link:hover {
  text-decoration: underline;
}

.db-card-link-arrow {
  font-size: 15px;
}

/* Icon Badges */
.db-card-icon-badge {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  font-weight: bold;
}

/* Specific Color Utilities (Highly Unique Names) */
.db-color-olive-dark {
  color: #93996d;
}

.db-color-alert-red {
  color: #c90101;
}

/* Background Specifics */
.db-bg-olive-light {
  background-color: #f1eef1;
  color: #606643;
}

.db-bg-alert-red-light {
  background-color: #fdeaea;
}

.db-text-alert-red-bold {
  background-color: #f9e4e4;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  font-size: 16px;
}

.db-bg-olive-net {
  background-color: #93996d33;
}

/* Dashboard Header */

/* dashboard Table */
/* Main Container: No Grid/No Flex, pure Table alignment logic using display: inline-block */
.dbt-main-wrapper {
  width: 100%;
  margin: 0 auto;
  font-size: 0;
  display: flex;
  gap: 20px;
  overflow-x: auto;
}

/* Left aur Right sections ko sizing aur inline-block se side-by-side kiya */
.dbt-section-left {
  display: inline-block;
  vertical-align: top;
  width: 50%;
  font-size: 14px;
  background: #fff;
  padding: 20px;
  border-radius: 15px;
  overflow-x: auto;
}

.rdbt-section-left{
  display: inline-block;
  vertical-align: top;
  width: 30%;
  font-size: 14px;
  background: #fff;
  padding: 20px;
  border-radius: 15px;
  overflow-x: auto;
}

.dbt-section-right {
  display: inline-block;
  vertical-align: top;
  width: 50%;
  font-size: 14px;
  background: #fff;
  padding: 20px;
  border-radius: 15px;
}

.rdbt-section-right{
  display: inline-block;
  vertical-align: top;
  width: 70%;
  font-size: 14px;
  background: #fff;
  padding: 20px;
  border-radius: 15px;
  overflow-x: auto;
}

/* Headers Styling */
.dbt-panel-header {
  width: 100%;
  margin-bottom: 20px;
}

.dbt-header-title {
  display: inline-block;
  vertical-align: middle;
}

.dbt-icon-circle {
  display: inline-block;
  vertical-align: middle;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  text-align: center;
  line-height: 40px;
  font-size: 16px;
}

.dbt-bg-olive {
  background: linear-gradient(180deg, #93996d 0%, #52553e 100%);
}

.dbt-heading-text {
  display: inline-block;
  vertical-align: middle;
  font-size: 20px;
  color: #1a1a1a;
  font-weight: 700;
  margin-left: 12px;
}

.dbt-view-all-link {
  float: right;
  font-size: 16px;
  color: #4c2834;
  text-decoration: none;
  font-weight: 600;
  line-height: 40px;
}

/* Pure HTML Table Reset and Rules */
.dbt-data-table {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
}

.dbt-table-row {
  border-bottom: 1px solid #e1e1e1;
  box-shadow: 0px -1px 0px 0px #e1e1e1 inset;
}

.dbt-table-row td {
  padding: 16px 0;
  vertical-align: middle;
}

/* Table Columns Width Custom Allocation */
/* .dbt-col-profile { width: 40%; }
.dbt-col-time    { width: 25%; }
.dbt-col-status  { width: 15%; }
.dbt-col-action  { width: 20%; text-align: right; } */

/* Sub elements styling */
.dbt-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: inline-block;
  vertical-align: middle;
}

.dbt-profile-info {
  display: inline-block;
  vertical-align: middle;
  margin-left: 12px;
}

.dbt-name {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #1a1a1a;
}

.dbt-subtext {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #1a1a1ab2;
  margin-top: 2px;
}

.dbt-day {
  display: block;
  font-weight: 700;
  font-size: 14px;
  color: #1a1a1a;
}

.dbt-time {
  display: block;
  font-weight: 700;
  font-size: 14px;
  color: #1a1a1a;
  margin-top: 2px;
  margin-left: 25px;
}

.dbt-badge-online {
  background-color: #93996d1a;
  color: #52553e;
}

span.dbt-day img {
  margin-right: 5px;
}

/* Status Badges */
.dbt-badge {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  width: 105px;
}

.dbt-badge-online {
  background-color: #f3f5ef;
  color: #606643;
}

.dbt-badge-inperson {
  background-color: #74505c33;
  color: #4c2834;
}

/* Standard Buttons */
.dbt-btn-filled {
  background: linear-gradient(180deg, #74505c 0%, #4c2834 100%);
  color: #fff;
  border: none;
  padding: 10px 18px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.dbt-btn-outlined {
  background-color: transparent;
  color: #5f5f5f;
  border: 1px solid #5f5f5f;
  padding: 10px 22px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

/* RIGHT SECTION: Cards Styling */
.dbt-notes-container {
  width: 100%;
}

.dbt-note-card {
  background-color: #f6f7f3;
  border-radius: 24px;
  padding: 16px 20px;
  margin-bottom: 12px;
}

.dbt-inner-note-layout {
  width: 100%;
  border-collapse: collapse;
}

.dbt-inner-note-layout td {
  vertical-align: middle;
}

.dbt-due-label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: #5f5f5f;
}

.dbt-due-countdown {
  display: block;
  font-size: 16px;
  color: #93996d;
  font-weight: 800;
}

.dbt-btn-maroon {
  background-color: #5c3843;
  color: white;
  border: none;
  padding: 10px 18px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

/* Footer Alert Banner */
.dbt-alert-banner {
  background-color: #eae5e7;
  border-radius: 30px;
  padding: 12px 16px;
  margin-top: 16px;
}

/* 
.dbt-alert-icon {
    background-color: #5c3843;
    color: white;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-block;
    text-align: center;
    line-height: 18px;
    font-size: 11px;
    font-weight: bold;
    vertical-align: middle;
} */

.dbt-alert-text {
  display: inline-block;
  font-size: 12px;
  color: #74505c;
  font-weight: 600;
  margin-left: 8px;
  vertical-align: middle;
}

/* Dashboard Table */

/* --- New Unique CSS for Screen 3 Only (No Conflict) --- */

/* Sub-heading brackets text color (e.g., Awaiting Payment) */
.dbt3-sub-heading-text {
  font-size: 14px;
  font-weight: 700;
  color: #5f5f5f;
  vertical-align: middle;
}

/* Left table custom countdown column */
.dbt3-col-countdown {
  width: 15%;
  vertical-align: middle;
}

.dbt3-expire-label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: #5f5f5f;
}

.dbt3-countdown-text {
  display: block;
  font-size: 16px;
  font-weight: 800;
  color: #93996d;
}

/* Urgent status color logic */
.dbt3-color-urgent {
  color: #93996d;
}

/* Right Table Header Styling (Gray background strip) */
.dbt3-th-row {
  background-color: #f1eeef;
}

.dbt3-th-cell {
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
  padding: 14px 0;
  border: none;
}

/* Corner radius rounding for table header row */
.dbt3-th-row th:first-child {
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
}

.dbt3-th-row th:last-child {
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
}

/* Amount formatting */
.dbt3-amount-cell {
  font-size: 15px;
  font-weight: 600;
  color: #211c1d;
  text-align: center;
  padding-right: 16px;
}

.dashboard-wrp-sec {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Patients  page CSS */

.dbt3-sub-heading-text {
  font-size: 14px;
  font-weight: 400;
  color: #707070;
  vertical-align: middle;
}

/* Filter Top Bar Styles */
.dbt4-filter-bar {
  width: 100%;
  clear: both;
  padding: 0 20px;
}

.dbt4-search-box {
  display: inline-block;
  background-color: #ffffff;
  border: 1px solid #93996d4d;
  border-radius: 24px;
  padding: 8px 16px;
  width: 240px;
  vertical-align: middle;
}

.dbt4-search-icon {
  font-size: 14px;
  color: #888888;
  vertical-align: middle;
}

.dbt4-search-input {
  border: none;
  outline: none;
  font-size: 14px;
  margin-left: 8px;
  width: 80%;
  vertical-align: middle;
}

.dbt4-right-filters {
  float: right;
}

.dbt4-filter-dropdown {
  display: inline-block;
  background-color: #ffffff;
  border: 1px solid #93996d4d;
  border-radius: 24px;
  padding: 10px 15px 10px 20px;
  font-size: 14px;
  color: #1a1a1ab2;
  cursor: pointer;
}

/* span.dbt4-cal-icon {
  margin-left: 20px;
} */

/* Global helper alignments for table body cells */
.dbt4-center-text {
  text-align: center;
}

.dbt4-right-text {
  text-align: right;
}

/* Table Header row layout */
.dbt3-th-row {
  background-color: #f1eeef;
}

.dbt3-th-row th:first-child {
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
}

.dbt3-th-row th:last-child {
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
}

/* Padding Helpers */
/* .dbt4-pad-left {
    padding-left: 20px !important;
    padding-right: 20px !important;
}
.dbt4-pad-right { padding-left: 20px!important;
    padding-right: 20px!important; } */
.dbt-main-wrapper-patients tbody td {
  padding: 10px 20px;
}

.dbt-main-wrapper-patients thead th {
  padding: 10px 20px;
}

/* Row item typographies */
.dbt4-sno-text {
  font-size: 14px;
  color: #4a4a4a;
  font-weight: 500;
}

.dbt4-regular-cell {
  font-size: 14px;
  color: #211c1d;
  font-weight: 500;
}

.dbt4-email-cell {
  font-size: 14px;
  color: #111111;
  font-weight: 600;
}

.dbt4-view-profile-btn {
  font-size: 14px;
  color: #4c2834;
  text-decoration: underline;
  font-weight: 600;
}

/* Badges Status */
.dbt4-status-badge {
  display: inline-block;
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  width: 85px;
}

.dbt4-badge-active {
  background-color: #93996d1a;
  color: #52553e;
}

.dbt4-badge-inactive {
  background-color: #be77da1a;
  color: #52553e;
}

.dbt4-badge-pending {
  background-color: #ffed9d66;
  color : #F68D2B;
}



.dbt4-badge-inactive {
  background-color: #74505c33;
  color: #4c2834;
}

.dbt4-badge-mutua{
  background-color:#DCF0FAB2;
  color: #0369A1;
}

/* Pagination style */
.dbt4-pagination-container {
  width: 100%;
  text-align: center;
}

.dbt4-pagination-list {
  display: inline-block;
}

.dbt4-page-num {
  display: inline-block;
  width: 36px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  font-size: 14px;
  color: #4a4a4a;
  cursor: pointer;
  margin: 0 4px;
  font-weight: 500;
}

.dbt4-page-active {
  background: linear-gradient(180deg, #93996d 0%, #52553e 100%);
  border: 1.5px solid #93996d;
  color: #ffffff;
  border-radius: 8px;
}

.dbt4-page-dots {
  display: inline-block;
  font-size: 14px;
  color: #888888;
  margin: 0 4px;
}

.dbt-main-wrapper.patients {
  display: flex;
  flex-direction: column;
}

.dbt-main-wrapper.patients {
  padding: 20px 0;
}

.dbt-main-wrapper.patients .dbt3-th-row th:first-child {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.dbt-main-wrapper.patients .dbt3-th-row th:last-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

/* Bootstrap Wrapper ko side-by-side (inline-block) rakhne ke liye */
.dbt4-bs-dropdown-wrapper {
  display: inline-block;
  vertical-align: middle;
}

/* Bootstrap ke default arrow (caret) ko hatane ke liye kyunki aapka custom arrow hai */
.dbt4-remove-arrow::after {
  display: none !important;
}

/* Dropdown menu ki styling aapke original font aur corners ke hisab se */
.dbt4-bs-menu-custom {
  border-radius: 12px !important;
  border: 1px solid #e0e0e0 !important;
  box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.05);
  padding: 6px 0 !important;
}

/* Dropdown ke andar ke links ki design */
.dbt4-bs-item {
  font-size: 14px !important;
  color: #4a4a4a !important;
  padding: 8px 16px !important;
}

/* Hover karne par aapka theme color (Sage Green tint) */
.dbt4-bs-item:hover {
  background-color: #f3f5ef !important;
  color: #606643 !important;
}

.dbt4-right-filters {
  float: right;
  align-items: center;
  display: flex;
  gap: 15px;
}

span.dbt4-arrow-icon {
  margin-left: 25px;
}

/* Wrapper par relative lagaya taaki andar ka menu iski width le sake */
.dbt4-bs-dropdown-wrapper {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  /* CRITICAL: Isse child menu ko alignment milti hai */
}

/* Button ko poori width (100%) di taaki wrapper ke barabar ho */
.dbt4-bs-dropdown-wrapper .dbt4-filter-dropdown {
  width: 100%;
  text-align: space-between;
  /* Text aur arrow ke gap ke liye */
}

/* Dropdown menu ki width parent wrapper ke barabar (100%) kar di */
.dbt4-bs-menu-custom {
  width: 100% !important;
  /* Button ke barabar width karne ke liye */
  min-width: 100% !important;
  border-radius: 12px !important;
  border: 1px solid #e0e0e0 !important;
  box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.05);
  padding: 6px 0 !important;
  left: 0 !important;
  /* Align edge to edge */
}

/* Dropdown items ki default padding reset */
.dbt4-bs-item {
  font-size: 14px !important;
  color: #4a4a4a !important;
  padding: 8px 16px !important;
  display: block;
  width: 100%;
}

.dbt4-bs-item:hover {
  background-color: #f3f5ef !important;
  color: #606643 !important;
}

.dbt4-remove-arrow::after {
  display: none !important;
}

.dbt-main-wrapper-patients {
  background: #fff;
  border-radius: 20px;
  padding: 20px 0;
}

.dbt-main-wrapper-patients tbody td {
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
}

td.dbt4-email-cell {
  font-weight: 700 !important;
}

td.dbt4-regular-cell {
  font-weight: 700 !important;
}

span.dbt-subtext.session {
  margin-left: 25px;
}

.dbt4-cta-add-patient {
  display: inline-block;
  vertical-align: middle;
  background: linear-gradient(180deg, #74505c 0%, #4c2834 100%);
  color: #ffffff;
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  padding: 10px 18px;
  border-radius: 24px;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

/* Patients  page CSS */

/* Calender Page  */
/* Page Container Wrapper */
.agd-page-wrapper {
  background-color: #ffffff;
  border-radius: 16px;
  padding: 24px 0 0 0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

/* Top Navigation Bar */
.agd-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 0 24px;
}

.agd-nav-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.agd-arrow-btn {
  background: #93996d1a;
  border: 1px solid #dfe1d4;
  border-radius: 50px;
  width: 36px;
  height: 36px;
  cursor: pointer;
}

.agd-date-indicator {
  background: #93996d1a;
  border: 1px solid #dfe1d4;
  padding: 8px 16px;
  border-radius: 20px;
  color: #1a1a1a;
  font-weight: 500;
  font-size: 14px;
}

.agd-filter-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.agd-drop-btn {
  background: #ffffff;
  border: 1px solid #e2e0da;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 14px;
  color: #4a4a4a;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}

.agd-calendar-btn {
  background: #ffffff;
  border: 1px solid #e2e0da;
  border-radius: 44px;
  padding: 6px 10px;
  cursor: pointer;
}

/* Main Container */
.agd-filter-group {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  background: #ffffff;
  padding: 10px;
}

/* Custom Bootstrap Dropdown Button Styling */
.agd-dropdown .agd-drop-btn {
  background-color: #93996d1a;
  color: #1a1a1a;
  border: 1px solid #93996d4d;
  padding: 8px 20px;
  font-size: 14px;
  font-weight: 400;
  border-radius: 50px;
  /* Perfect Pill Shape */
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.2s ease-in-out;
}

.agd-dropdown .agd-drop-btn:hover,
.agd-dropdown .agd-drop-btn:focus,
.agd-dropdown .agd-drop-btn.show {
  background-color: #f4f6f0;
  border-color: #cbd5e1;
  color: #1a1c1a;
  box-shadow: none !important;
}

/* Remove Default Bootstrap Caret */
.agd-dropdown .dropdown-toggle::after {
  display: none;
}

.agd-drop-arrow {
  display: inline-block;
  margin-left: 10px;
  font-size: 10px;
  transition: transform 0.2s ease;
}

.agd-dropdown .agd-drop-btn.show .agd-drop-arrow {
  transform: rotate(180deg);
}

.agd-dropdown .dropdown-menu {
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.05);
  padding: 8px;
  min-width: 210px;
  margin-top: 6px !important;
}

.agd-dropdown .dropdown-item {
  border-radius: 25px;
  padding: 8px 16px;
  font-size: 14px;
  color: #334155;
  transition: background 0.15s ease;
}

.agd-dropdown .dropdown-item:hover {
  background-color: #e9ece3;
  color: #1e293b;
}

.agd-dropdown .dropdown-item.active-filter {
  background-color: #e9ece3;
  font-weight: 500;
}

/* Calender Page */

.agd-scheduler-container {
  width: 100%;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  overflow: hidden;
}

/* --- 1. HEADER GRID STYLE --- */
.agd-grid-header {
  display: grid;

  /* grid-template-columns: 80px repeat(7, 1fr); */
  display: flex;
  border-bottom: 1px solid #e2e8f0;
  background: #ffffff;
  margin-left: 79px;
}

.agd-time-header-cell {
  border-right: 1px solid #e2e8f0;
}

.agd-day-header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 12px;
  border-right: 1px solid #e2e8f0;
  color: #64748b;
  width: 100%;
}

.agd-day-header:last-child {
  border-right: none;
}

.agd-day-name {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #71717a;
}

.agd-day-number {
  font-size: 22px;
  font-weight: 500;
  margin-top: 4px;
  color: #000;
}

/* Weekend Highlight Background */
.agd-highlight-bg {
  background-color: #f6f6f6;
}

/* --- 2. BODY GRID STYLE --- */
.agd-grid-body {
  display: grid;
  /* Same columns mapping header ke jaisi */
  grid-template-columns: 80px repeat(7, 1fr);
  position: relative;
}

/* --- 3. TIME COLUMN --- */
.agd-time-column {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-right: 1px solid #e2e8f0;
}

.agd-time-label {
  /* 15-min slots ki height 22px hai, taaki 1 hr (4 slots) = 88px bane */
  height: 22px;
  font-size: 11px;
  color: #94a3b8;
  text-align: right;
  padding-right: 10px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* Current Active Time Text (09:00 AM) */
.agd-current-time-text {
  color: #ffffff;
  background: linear-gradient(180deg, #93996d 0%, #52553e 100%);
  font-weight: 500;
  font-size: 14px;
  border-radius: 20px;
  padding: 2px 4px;
  height: 22px;
  display: inline-flex;
  align-items: center;
}

/* --- 4. DAYS GRID WITH AUTOMATIC HOUR BORDERS --- */
.agd-days-grid {
  /* 7 columns sub-grid automatic mapping ke liye */
  grid-column: span 7;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  position: relative;
}

/* Har day column panel */
.agd-day-column {
  border-right: 1px solid #e2e8f0;
  position: relative;
  height: 100%;
  display: grid;
  /* Isse pure column me 15-min ke rows banenge bina actual HTML elements badle */
  grid-template-rows: repeat(1, 22px);
}

.agd-day-column:last-child {
  border-right: none;
}

/* SCREENSHOT LOGIC: Har 4th slot ke baad border-bottom automatic lagegi.
           8:45 AM (4th), 9:45 AM (8th), 10:45 AM (12th)... ke baad border aayega.
        */
.agd-day-column::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  /* Har 88px (1 hour) par perfect solid horizontal border setup */
  background-image: linear-gradient(
    to bottom,
    transparent 87px,
    #e2e8f0 87px,
    #e2e8f0 88px
  );
  background-size: 100% 88px;
}

/* --- 5. RED CURRENT TIME LINE --- */
.agd-current-time-line {
  position: absolute;
  top: 98px;
  left: -2px;
  right: 0;
  height: 2px;
  background-color: #606c38;
  z-index: 10;
}

.agd-current-time-line::after {
  content: "";
  position: absolute;
  right: 0;
  top: -4px;
  width: 10px;
  height: 10px;
  background-color: #606c38;
  border-radius: 50%;
}

/* --- 6. EVENT CARDS STYLING --- */
.agd-event-card {
  position: absolute;
  left: 6px;
  right: 6px;
  padding: 8px;
  font-size: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 2;
  border-left: 4px solid transparent;
  width: max-content;
  min-width: 155px;
}

.agd-ev-header {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 4px;
}

.agd-ev-title {
  font-weight: 700;
  font-size: 10px;
  color: #1a1a1a;
}

.agd-ev-age {
  font-weight: 600;
  font-size: 10px;
  color: #1a1a1ab2;
}

.agd-ev-id {
  font-weight: 700;
  font-size: 10px;
  color: #1a1a1a;
  margin: 2px 0 6px 0;
}

.agd-ev-tags {
  display: flex;
  gap: 4px;
}

.agd-tag {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 12px;
  background: #fff;
  color: #1a1a1a;
  font-weight: 700;
  font-size: 10px;
}

/* Card Themes matching the screenshot colors */
.agd-ev-grey {
  background-color: #d9d9d9;
}
.agd-ev-pink {
  background-color: #f5d1d1;
}
.agd-ev-green {
  background-color: #e5e8d4;
}
.right-agenda-icon {
  border: none;
  background: transparent;
}
span.agd-ev-time {
  font-size: 10px;
  font-weight: 600;
}
span.agd-tag.online {
  background: #93996d;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  gap: 7px;
  align-items: center;
}
span.dot-wht {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fff;
}
span.agd-tag.person {
  background: #74505c;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 7px;
}
.msg-agd-btn {
  background: transparent;
  border: none;
}
.agd-event-card.agd-ev-light {
  background: #fae2c8;
}

.comment-container {
  position: relative;
  display: inline-block;
}

.comment-box-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 8px;
  background: #ffffff;
  padding: 24px;
  border-radius: 28px;
  width: 480px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  z-index: 99999;
  font-family: sans-serif;
}

.comment-box-dropdown.active {
  display: block;
}

.comment-box-dropdown h3 {
  margin-top: 0;
  margin-bottom: 16px;
  color: #000;
  font-size: 14px;
  font-weight: 400;
}

.comment-box-dropdown textarea {
  width: 100%;
  height: 120px;
  border: none;
  background-color: #f4f5f07d;
  border-radius: 16px;
  padding: 16px;
  box-sizing: border-box;
  resize: none;
  font-size: 14px;
  color: #4f4444;
  outline: none;
}

.box-actions {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 20px;
}

.box-actions button {
  flex: 1;
  padding: 12px 24px;
  border-radius: 25px;
  font-size: 16px;
  cursor: pointer;
  font-weight: 500;
  border: none;
}

.btn-cancel {
  background: transparent;
  border: 1px solid #74505c !important;
  color: #74505c;
}

.btn-submit {
  background: #74505c;
  color: #fff;
}

/* --- Custom Modal Styling --- */
.custom-modal-content {
  border-radius: 32px;
  border: none;
  padding: 30px 24px;
  box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.15);
  max-width: 414px;
  margin: auto;
}

.success-icon-box {
  background-color: #8ba074;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 40px;
}

.modal-custom-title {
  font-size: 20;
  font-weight: 500;
  color: #000;
  margin-bottom: 0px;
}

.modal-custom-text {
  font-size: 16px;
  font-weight: 400;
  color: #7d7d7d;
  margin-bottom: 0px;
}

.btn-custom-ok {
  background-color: #74505c;
  color: white;
  border: 1px solid #74505c;
  border-radius: 50px;
  padding: 12px 0;
  font-size: 16px;
  font-weight: 500;
  width: 100%;
  transition: background-color 0.2s ease;
  display: flex;
  justify-content: center;
}
.secondary-cta {
  background-color: #fff;
  color: #000;
  border: 1px solid #1a1a1a;
  border-radius: 50px;
  padding: 12px 0;
  font-size: 16px;
  font-weight: 500;
  width: 100%;
  transition: background-color 0.2s ease;
  display: flex;
  justify-content: center;
}

.btn-custom-ok:hover {
  background-color: #74505c;
  color: #fff;
}

.custom-modal-content {
  position: relative;
}

.profile-sub-close-btn {
  position: absolute;
  top: 24px;
  right: 24px;
  background: transparent;
  border: 1px solid #8ba074;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  z-index: 10;
}

.profile-sub-close-btn:hover {
  background-color: rgba(139, 160, 116, 0.1);
}
#welcomeModal .success-icon-box {
  margin-top: 0;
}
.success-icon-box.yellow {
  background-color: #eab84d;
}
.verification-issue {
  color: #ff3015;
  border: 1px solid #ff3015;
  background-color: #fff0f0;
  border-radius: 15px;
  padding: 7px 10px;
}
.modal-body.text-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
.success-icon-box.red {
  background-color: #ff3015;
}
/* Container jo alignment control karega */
.gl-notification-wrapper {
  position: relative;
  display: inline-block;
}

/* Notification Trigger Badge (Optional Styling) */
.gl-noti-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background-color: #704f5a;
  color: white;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 50%;
}

/* Main Notification Panel - Default Hidden State */
.gl-notification-panel {
  position: absolute;
  top: 110%;
  right: 0;
  width: 600px;
  background: #ffffff;
  border-radius: 24px;
  box-shadow: 0px 15px 35px rgba(0, 0, 0, 0.15);
  padding: 24px;
  z-index: 1000;
  display: none; /* Default me band rahega */
}

/* Active/Open State */
.gl-notification-panel.show {
  display: block; /* Class toggled by JavaScript */
}

/* Header Text */
.gl-noti-header h3 {
  font-size: 22px;
  color: #2b2b2b;
  font-weight: 700;
  margin-bottom: 16px;
  border-bottom: 1px solid #74505c;
  padding-bottom: 14px;
}

/* Filter Buttons Group */
.gl-noti-filters {
  display: flex;
  gap: 10px;
  margin-bottom: 18px;
}

.gl-filter-btn {
  border-radius: 50px;
  padding: 6px 20px;
  font-size: 0.85rem;
  border: 1px solid #74505c99;
  cursor: pointer;
  transition: all 0.2s ease;
  width: 120px;
  font-size: 14px;
  font-weight: 500;
}

.gl-filter-btn.active {
  background: linear-gradient(180deg, #93996d 0%, #52553e 100%);
  color: #fff;
  border: none;
}

.gl-filter-btn.outline {
  background-color: transparent;
  border-color: #d1cbd4;
  color: #a39ea6;
}

/* List Items Layout */
.gl-noti-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 380px;
  overflow-y: auto;
}

.gl-noti-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  background-color: #74505c0f;
  padding: 14px 18px;
  border-radius: 16px;
}

.gl-noti-item.unread {
  background-color: #74505c0f;
}

.gl-noti-title {
  font-size: 16px;
  color: #4c2834;
  margin-bottom: 4px;
  font-weight: 500;
}

.gl-noti-meta {
  font-size: 14px;
  font-weight: 500;
  color: #363636cc;
}

/* Active Unread Dot */
.gl-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  background: linear-gradient(180deg, #93996d 0%, #52553e 100%);
  border-radius: 50%;
  margin-left: 6px;
  vertical-align: middle;
}

/* Mark as Read Button text */
.gl-mark-read {
  background: transparent;
  border: none;
  color: #4c2834;
  font-size: 0.82rem;
  cursor: pointer;
  padding: 4px;
  font-size: 14px;
  font-weight: 400;
}

.gl-mark-read:hover {
  text-decoration: underline;
  color: #704f5a;
}

/* --- New Custom Elements Table CSS --- */

/* Typography & History Cell */
.dbt-history-text {
  font-size: 0.95rem;
  color: #1a1a1a;
  font-weight: 400;
}

/* Date and Time Stack */
.dbt-datetime-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dbt-date-main {
  font-size: 14;
  font-weight: 700;
  color: #1a1a1a;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.dbt-time-sub {
  font-size: 12px;
  color: #5f5f5f;
  padding-left: 20px;
}

/* Table Inline Vector Icons Alignment */
.dbt-table-inline-icon {
  width: 14px;
  height: 14px;
  vertical-align: middle;
}

/* Mode Badges Styling (Online / In-Person) */
.dbt-badge-mode {
  padding: 10px 16px;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
  width: 115px;
}
.dbt-badge-mode::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
}
.mode-online {
  background-color: #93996d1a;
  color: #52553e;
}
.mode-online::before {
  background-color: #52553e;
}
.mode-person {
  background-color: #74505c33;
  color: #4c2834;
}
.mode-person::before {
  background-color: #4c2834;
}

/* Session Status Badges (In Progress, Completed, Cancelled) */
.dbt-badge-status {
  padding: 10px 16px;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
  width: 115px;
}
.status-progress {
  background-color: #74505c33;
  color: #4c2834;
}
.status-completed {
  background-color: #93996d1a;
  color: #52553e;
}
.status-cancelled {
  background-color: #c9010114;
  color: #c90101;
}

.dbt-empty-cell {
  color: #b3b3b3;
  font-size: 0.95rem;
}

.dbt-state-text {
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.text-generating {
  color: #4c2834;
}
.text-ready {
  color: #52553e;
}
.text-pending {
  color: #f97316;
  position: relative;
  padding-left: 12px;
}
.text-pending::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  background-color: #ff8c00;
  border-radius: 50%;
}
.text-overdue {
  color: #c90101;
  position: relative;
  padding-left: 12px;
}
.text-overdue::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  background-color: #c90101;
  border-radius: 50%;
}

/* Stacked Layout inside Notes Column */
.dbt-state-notes {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dbt-notes-time-left {
  font-size: 12px;
  font-weight: 700;
  color: #5f5f5f;
}
.dbt-notes-time-left.grey-sub {
  color: #8c8c8c;
}

/* Actions Rounded Button Styling */
.dbt-action-btn {
  border: 1px solid #704f5a;
  color: #704f5a;
  padding: 8px 18px;
  border-radius: 30px;
  font-size: 0.88rem;
  font-weight: 500;
  text-decoration: none;
  display: inline-block;
  transition: all 0.2s ease-in-out;
}
.dbt-action-btn:hover {
  background-color: #704f5a;
  color: #ffffff !important;
}
th.dbt3-th-cell.dbt4-pad-right {
  text-align: left !important;
}

/* --- Patient Header Card Module --- */

/* Top Bar Navigation Styles */
.dbt-pcard-top-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0 4px;
}
.dbt-pcard-back-btn {
  font-size: 20px;
  font-weight: 600;
  color: #1a1a1a;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.dbt-pcard-action-top {
  background-color: #74505c;
  color: #ffffff;
  border: none;
  padding: 10px 24px;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.dbt-pcard-action-top:hover {
  background-color: #74505c;
}

/* Card Main Container Box */
.dbt-pcard-container {
  background-color: #ffffff;
  border-radius: 32px;
  padding: 30px 24px;
  display: flex;
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.02);
  width: 100%;
  gap: 0; /* Managed by segment borders */
}

/* Shared Sections / Columns setup */
.dbt-pcard-section {
  padding: 0 0 0 24px;
  display: flex;
  flex-direction: column;
}
.dbt-pcard-section:not(:last-child) {
  border-right: 1px solid #eceae6; /* Clean vertical dividers */
}

/* Column 1 Specifics (Profile Meta) */
.dbt-pcard-profile {
  flex: 1.2;
  flex-direction: row;
  gap: 20px;
  padding-left: 0; /* First box padding fix */
}
.dbt-pcard-avatar-wrapper {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}
.dbt-pcard-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.dbt-pcard-meta-main {
  display: flex;
  flex-direction: column;
}
.dbt-pcard-name {
  font-size: 20px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 6px 0;
}
.dbt-pcard-age-gender {
  font-size: 16px;
  color: #1a1a1ab2;
  margin: 0 0 12px 0;
  font-weight: 600;
}
.dbt-pcard-bullet {
  margin: 0 4px;
}
.dbt-pcard-ids p {
  font-size: 0.9rem;
  color: #8c8c8c;
  margin: 0 0 4px 0;
}
.dbt-pcard-ids p span {
  color: #1a1a1ab2;
  font-size: 16px;
  font-weight: 600;
}
.dbt-pcard-ids p {
  color: #1a1a1ab2;
  font-size: 16px;
  font-weight: 600;
}
/* Key-Value Structure Columns (Columns 2, 3 & 4) */
.dbt-pcard-details {
  flex: 1.1;
  gap: 8px;
}
.dbt-pcard-session-next {
  flex: 1;
  gap: 8px;
}
.dbt-pcard-session-last {
  flex: 1;
  gap: 12px;
  padding-right: 0; /* Last box padding fix */
}

.dbt-pcard-session-heading {
  font-size: 0.88rem;
  color: #8c8c8c;
  margin-bottom: 2px;
}

/* Generic Row Data Typography */
.dbt-pcard-info-row {
  font-size: 14px;
  font-weight: 500;
  color: #686868;
  white-space: nowrap;
}
.dbt-pcard-info-row span {
  color: #14171d;
  font-weight: 400;
  padding-left: 2px;
}
.patients-profile-wrp {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* --- AI Summary Popup Specific Styles --- */

/* Main Box container overriding */
.dbt-popup-content-box {
  border: none !important;
  border-radius: 32px !important;
  padding: 24px;
  background-color: #ffffff;
}

/* Header Elements Group */
.dbt-popup-header {
  border-bottom: none !important;
  padding: 0 0 20px 0 !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.dbt-popup-title-group {
  display: flex;
  align-items: center;
  gap: 14px;
}
.dbt-popup-ai-icon {
  width: 44px;
  height: 44px;
  background: linear-gradient(180deg, #74505c 0%, #4c2834 100%);
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dbt-popup-title {
  font-size: 16px;
  font-weight: 700;
  color: #1a1a1a;
}

/* Custom Outlined Circular Close Cross Toggle */
.dbt-popup-close-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid #dcdad5;
  background-color: transparent;
  color: #6d755d; /* Sage/Olive line tone */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}
.dbt-popup-close-btn:hover {
  background-color: #f6f5f2;
  color: #1a1a1a;
}

/* Gray Inner Data Body Block Card */
.dbt-popup-body {
  padding: 0 !important;
}
.dbt-popup-inner-card {
  background-color: #f0edee;
  border-radius: 24px;
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  justify-content: center;
  max-width: 795px;
  margin: auto;
}

/* Core Summary Text & Structure Formatting */
.dbt-summary-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: center; /* Centered alignment base on layout view */
}
.dbt-summary-heading {
  font-size: 16px;
  font-weight: 700;
  color: #1a1a1a;
  position: relative;
  display: inline-block;
}
/* Bullet dot dynamically rendered in front of text headers */
.dbt-summary-heading::before {
  content: "•";
  margin-right: 6px;
  color: #1a1a1a;
}
.dbt-summary-text {
  font-size: 16px;
  color: #1a1a1a;
  line-height: 1.6;
  font-weight: 400;
  margin: 0;
}
#aiSummaryModal .modal-dialog {
  max-width: 600px;
}

.acp-main-container {
  width: 100%;
  padding: 20px;
  background: #fff;
  border-radius: 20px;
}

/* Header Section */
.acp-header-area {
  margin-bottom: 32px;
}

.acp-title-flex {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #2d2526;
}

.acp-back-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: #2d2526;
  display: flex;
  align-items: center;
  transition: opacity 0.2s;
}

.acp-back-btn:hover {
  opacity: 0.7;
}

.acp-main-title {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.5px;
  margin-bottom: 0;
  color: #363636;
}

.acp-subtitle-text {
  font-size: 16px;
  font-weight: 400;
  color: #858484;
  margin-top: 4px;
  margin-left: 36px;
}

/* Section Subheading */
.acp-section-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #2d2526;
  font-weight: 500;
  font-size: 16px;
  margin-bottom: 32px;
}

/* Profile & Registration Row */
.acp-top-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 32px;
}

.acp-field-label {
  display: block;
  font-size: 16px;
  font-weight: 500;
  color: #363636;
  margin-bottom: 10px;
}

.acp-upload-flex-box {
  display: flex;
  align-items: center;
  gap: 16px;
}

.acp-avatar-circle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: #dedfd2;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #52553e;
  cursor: pointer;
  transition: opacity 0.2s;
}

.acp-avatar-circle:hover {
  opacity: 0.9;
}

.acp-photo-upload-btn {
  padding: 10px 20px;
  border: 1px solid #74505c;
  background-color: transparent;
  color: #74505c;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.acp-photo-upload-btn:hover {
  background-color: #74505c;
  color: #ffffff;
}

.acp-reg-date-box {
  display: flex;
  align-items: center;
  gap: 12px;
}

.acp-reg-date-badge {
  background-color: #f9f8f6;
  color: #2d2526;
  padding: 12px 24px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 500;
}

/* Custom Responsive Form Grids (No Bootstrap) */
.acp-grid-row {
  display: grid;
  gap: 16px;
  margin-bottom: 24px;
}

/* Layout grid specific columns structure */
.acp-grid-5cols {
  grid-template-columns: 3fr 3fr 2fr 2fr 2fr;
}

.acp-grid-4cols {
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

.acp-input-group {
  position: relative;
  display: flex;
  flex-direction: column;
}

.acp-form-input-field {
  width: 100%;
  background-color: #f4f5f07d;
  color: #1a1a1ab2;
  border: 1px solid transparent;
  border-radius: 16px;
  padding: 14px 20px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s;
}

.acp-form-input-field::placeholder {
  color: #1a1a1ab2;
}

.acp-form-input-field:focus {
  border-color: #f4f5f07d;
}

/* Custom Dropdown Styling */
select.acp-form-input-field {
  appearance: none;
  cursor: pointer;
}

.acp-select-custom-arrow {
  position: absolute;
  right: 16px;
  bottom: 16px;
  pointer-events: none;
  color: #586a4e;
  display: flex;
  align-items: center;
}

/* Form Action/Submit Section */
.acp-submit-action-area {
  padding-top: 16px;
}

.acp-main-submit-btn {
  background-color: #74505c;
  color: #ffffff;
  font-weight: 500;
  font-size: 15px;
  padding: 14px 40px;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: background-color 0.2s;
}

.acp-main-submit-btn:hover {
  background-color: #74505c;
}

/* Clean Media Queries for Responsive Handling */
@media (max-width: 900px) {
  .acp-body-layout {
    padding: 24px;
  }
  .acp-grid-5cols,
  .acp-grid-4cols {
    grid-template-columns: 1fr;
  }
  .acp-top-meta-row {
    flex-direction: column;
    align-items: flex-start;
  }
  .acp-reg-date-box {
    margin-left: 0;
    margin-top: 12px;
  }
}

.acp-hidden-file-input {
  display: none !important;
}

.acp-reg-date-box {
  display: flex;
  align-items: center;
  gap: 12px;
}

.acp-reg-date-input {
  max-width: 160px;
  text-align: center;
  border-radius: 50px !important;
}
.acp-section-heading span {
  font-size: 20px;
  font-weight: 500;
  color: #363636;
}
/* Main Card Layout */
.db-reserved-revenue-card-body {
  background-color: #ffffff;
  border-radius: 24px;
  padding: 24px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.02),
    0 1px 3px rgba(0, 0, 0, 0.01);
  border: 1px solid #f3f3f1;
}

/* Left Side Text Content Wrapper */
.db-reserved-revenue-main-data {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Top small title */
.db-reserved-revenue-title {
  font-size: 16px;
  font-weight: 600;
  color: #1a1a1a;
  letter-spacing: -0.1px;
}

/* Big Main Amount */
.db-reserved-revenue-amount {
  font-size: 36px;
  font-weight: 700;
  color: #93996d;
  line-height: 1.1;
  letter-spacing: -0.5px;
}

/* Bottom Subtext */
.db-reserved-revenue-subtext {
  font-size: 14px;
  font-weight: 600;
  color: #4c2834;
  margin-top: 2px;
}

/* Right Side Icon Container */
.db-reserved-revenue-icon-button {
  width: 56px;
  height: 56px;
  background-color: #f1eef1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Screen Icon Styling */
.db-reserved-revenue-icon-screen {
  color: #5d6b4f;
  width: 24px;
  height: 24px;
}
span.status {
  padding: 8px 5px;
  border-radius: 15px;
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  justify-content: center;
  width: 100px;
}
span.status.adult-text {
  color: #059691;
  background: #e8fdf2;
}
span.status.couple-text {
  color: #f6289b;
  background: #fef0fa;
}
span.status.Child-text {
  color: #6c49fc;
  background: #f6f4fe;
}
span.status.family-text {
  background: #fff9e3;
  color: #e07706;
}
span.status.coaching-text {
  color: #178dcc;
  background: #e0f2fe;
}
span.status.online {
  background: #93996d1a;
  color: #52553e;
}
span.status.online span {
  height: 7px;
  width: 7px;
  border-radius: 50%;
  background: linear-gradient(180deg, #93996d 0%, #52553e 100%);
}
span.status.online {
  background: #93996d1a;
  color: #52553e;
  display: flex;
  align-items: center;
  gap: 10px;
}
span.status.in-person {
  background: #74505c33;
  color: #4c2834;
}
span.status.in-person span {
  height: 7px;
  width: 7px;
  border-radius: 50%;
  background: linear-gradient(180deg, #74505c 0%, #4c2834 100%);
}
span.status.in-person {
  background: #74505c33;
  color: #4c2834;
  display: flex;
  align-items: center;
  gap: 10px;
}
span.status.paid {
  background: #93996d1a;
  color: #52553e;
}
span.status.partially-paid {
  background: #fff9e3;
  color: #f68d2b;
  width: 130px;
}
a.earnig-view-btn {
  border: 1px solid #4c2834;
  padding: 10px 20px;
  color: #4c2834;
  border-radius: 20px;
}
/* Main Card Layout Container */
.mbs-card-wrapper {
  background-color: #ffffff;
  border-radius: 24px;
  border: 1px solid #eaeae8;
  width: 100%;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}

/* Header Bar Section */
.mbs-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid #f0f0ee;
}

.mbs-title-side {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Circular Green Icon Wrapper */
.mbs-icon-circle {
  width: 44px;
  height: 44px;
  background: linear-gradient(180deg, #93996d 0%, #52553e 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
}

.mbs-main-heading {
  font-size: 20px;
  font-weight: 700;
  color: #1a1a1a;
  letter-spacing: -0.3px;
}

/* Top Action Button */
.mbs-action-btn {
  background: linear-gradient(180deg, #74505c 0%, #4c2834 100%);
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  padding: 10px 22px;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.mbs-action-btn:hover {
  background-color: #533843;
}

/* Data Rows Container */
.mbs-details-body {
  padding: 16px 24px 0 24px;
}

/* Individual Statement Rows */
.mbs-statement-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
}

.mbs-label-col {
  font-size: 16px;
  font-weight: 700;
  color: #1a1a1a;
}

.mbs-value-col {
  font-size: 20px;
  font-weight: 700;
  color: #1a1a1a;
}

/* Highlighted Footer Total Strip */
.mbs-total-highlight-strip {
  background-color: #93996d;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  margin-top: 12px;
  border-bottom-left-radius: 22px;
  border-bottom-right-radius: 22px;
}

.mbs-total-label {
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
}

.mbs-total-value {
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
}

/* Responsive Breakdown for Smaller Screen widths */
@media (max-width: 640px) {
  .mbs-header-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .mbs-action-btn {
    width: 100%;
    text-align: center;
  }
}

.pmr-header-wrapper {
  background-color: #ffffff;
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  border: none;
  width: 100%;
  padding: 20px 24px;
  display: flex;
  align-items: center;
}

/* Content Alignment Side */
.pmr-title-side {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Circular Green Icon Wrapper */
.pmr-icon-circle {
  width: 44px;
  height: 44px;
  background-color: #6e7a5d; /* Wahi exact sage green tone */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  flex-shrink: 0;
}

/* Heading Styling */
.pmr-main-heading {
  font-size: 18px;
  font-weight: 600;
  color: #2d2526;
  letter-spacing: -0.3px;
}
.earnings-wrp {
  display: flex;
  flex-direction: column;
}
.dbt-main-wrapper.patients.header-part {
  padding-top: 0;
}
.dbt-main-wrapper-patients.header-part {
  padding-top: 0;
}
.patient-nav-container {
  display: flex;
  gap: 12px;
  align-items: center;
}

/* 1. Start Session Button (Grey / Disabled State) */
.patient-link-start-session {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 28px;
  border-radius: 50px;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  background-color: #cecece;
  color: #838383;
  pointer-events: none; /* link click disabled */
  cursor: not-allowed;
}

/* 2. Back to Patients Button (White/Border State) */
.patient-link-back-to-patients {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: 50px;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  background-color: #f2f3ee;
  color: #1a1a1a;
  border: 1px solid #1a1a1a;
  transition: all 0.2s ease-in-out;
}
.patient-link-back-to-patients:hover {
  background-color: #ebebe9;
}
.patient-link-back-to-patients svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* 3. Cancel Button (Red State) */
.patient-link-cancel-session {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: 50px;
  font-size: 15px;
  font-weight: 500;
  color: #c90101;
  text-decoration: none;
  background-color: #fdeeed;
  border: 1px solid #c90101;
  transition: all 0.2s ease-in-out;
}
.patient-link-cancel-session:hover {
  background-color: #eededb;
  color: #c90101;
}
.patient-link-cancel-session svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}
/* Card Container */
.service-selection-card {
  background-color: #ffffff;
  border: 1px solid #eaeaea;
  border-radius: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

/* Header Styling */
.service-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  background-color: #ffffff;
}

.service-header-icon-wrapper {
  background-color: #583a42; /* Deep maroon/brown background from image */
  width: 45px;
  height: 45px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.service-header-icon-wrapper svg {
  width: 18px;
  height: 18px;
  fill: #ffffff;
}

.service-header-title {
  color: #2b2b2b;
  font-size: 14px;
  font-weight: 600;
  margin: 0;
}

/* Divider */
.service-card-divider {
  border: 0;
  border-top: 1px solid #f0f0f0;
  margin: 0;
}

/* Content Body */
.service-card-content {
  padding: 20px 24px 28px 24px;
}

.service-input-label {
  display: block;
  color: #2b2b2b;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 12px;
}

/* Tag/Badge Styling */
.service-tags-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.service-selected-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: #939a75; /* Olive green shade from image */
  color: #ffffff;
  padding: 6px 6px 6px 16px;
  border-radius: 50px;
}

.service-tag-text {
  font-size: 13px;
  font-weight: 500;
}

/* Cross Button Inside Tag */
.service-tag-remove-btn {
  background-color: #ffffff;
  border: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background-color 0.2s;
}

.service-tag-remove-btn:hover {
  background-color: #f0f0f0;
}

.service-tag-remove-btn svg {
  width: 12px;
  height: 12px;
  fill: #939a75; /* Matches tag background */
}
/* Card Container */
.financial-details-card {
  background-color: #ffffff;
  border: 1px solid #eaeaea;
  border-radius: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

/* Header Styling */
.financial-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  background-color: #ffffff;
}

.financial-header-icon-box {
  background-color: #583a42;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.financial-header-icon-box svg {
  width: 18px;
  height: 18px;
  fill: #ffffff;
}

.financial-header-title {
  color: #2b2b2b;
  font-size: 14px;
  font-weight: 600;
  margin: 0;
}

/* Divider */
.financial-card-divider {
  border: 0;
  border-top: 1px solid #f0f0f0;
  margin: 0;
}

/* Content Body */
.financial-card-content {
  padding: 20px 24px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px; /* Vertical gap between rows */
}

/* Row Layout */
.financial-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* For multi-line values (like row 3) */
.financial-info-row.financial-row-align-top {
  align-items: flex-start;
}

/* Typography styles matching image colors */
.financial-row-label {
  color: #666666;
  font-size: 14px;
  font-weight: 400;
}

.financial-row-value {
  color: #2b2b2b;
  font-size: 14px;
  font-weight: 500;
  text-align: right;
}

.financial-row-value-group {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.financial-row-subtext {
  color: #888888;
  font-size: 13px;
  font-weight: 400;
  margin-top: 2px;
}
/* Base Container */
.collect-payment-wrapper {
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid #eaeaea;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

/* Header Styles */
.cp-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
}

.cp-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cp-icon-circle {
  background-color: #583a42;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cp-icon-circle svg {
  width: 18px;
  height: 18px;
  fill: #ffffff;
}

.cp-header-left h2 {
  font-size: 16px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0;
}

.cp-remaining-badge {
  background-color: #f3e9eb;
  color: #583a42;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 20px;
}

.cp-divider {
  border: 0;
  border-top: 1px solid #f0f0f0;
  margin: 0;
}

/* Body Content */
.cp-body {
  padding: 24px;
}

/* Total Row */
.cp-total-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 24px;
}

.cp-total-label {
  font-size: 14px;
  font-weight: 600;
  color: #2b2b2b;
}

.cp-total-val {
  font-size: 14px;
  font-weight: 600;
  color: #2b2b2b;
}

/* Form Grid */
.cp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 24px;
}

.cp-form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cp-form-group label {
  font-size: 13px;
  font-weight: 500;
  color: #4a4a4a;
}

.cp-form-group input,
.cp-select-wrapper select {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #f5f5f5;
  background-color: #f9f9f9;
  border-radius: 24px;
  font-size: 14px;
  color: #2b2b2b;
  box-sizing: border-box;
  outline: none;
}

.cp-form-group input::placeholder {
  color: #a0a0a0;
}

/* Custom Select Dropdown Styling */
.cp-select-wrapper {
  position: relative;
  width: 100%;
}

.cp-select-wrapper select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: 40px;
}

.cp-select-wrapper::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-top-color: #7a827a; /* Olive grey down arrow from image */
  pointer-events: none;
}

/* Checkbox Style */
.cp-checkbox-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}

.cp-checkbox-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  border: 1px solid #583a42;
  border-radius: 4px;
  accent-color: #583a42;
  cursor: pointer;
}

.cp-checkbox-row label {
  font-size: 13px;
  font-weight: 500;
  color: #2b2b2b;
  cursor: pointer;
}

.cp-actions-row {
  display: flex;
  gap: 12px;
  margin-top: 24px;
  margin-bottom: 32px;
}

.cp-btn-primary,
.cp-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 24px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  box-sizing: border-box;
}

.cp-btn-primary {
  background-color: #583a42;
  color: #ffffff;
  border: 1px solid #583a42;
}

.cp-btn-secondary {
  background-color: #ffffff;
  color: #583a42;
  border: 1px solid #583a42;
}

.cp-info-cards-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cp-status-card {
  border-radius: 12px;
  padding: 16px 20px;
  border: 1px solid transparent;
}

.cp-status-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.cp-status-card-header h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

.cp-status-card p {
  margin: 0 0 10px 0;
  font-size: 13px;
  color: #555555;
}

.cp-card-amount {
  font-size: 14px;
  font-weight: 600;
}

.cp-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
}

.cp-card-green {
  background-color: #f7fcf9;
  border-color: #9ee1bd;
}
.cp-card-green h4,
.cp-card-green .cp-card-amount {
  color: #24b26b;
}
.cp-card-green .cp-dot {
  background-color: #24b26b;
}

.cp-card-yellow {
  background-color: #fffdf5;
  border-color: #ffd666;
}
.cp-card-yellow h4,
.cp-card-yellow .cp-card-amount {
  color: #dca300;
}
.cp-card-yellow .cp-dot {
  background-color: #dca300;
}

/* Red Status Variant */
.cp-card-red {
  background-color: #fffbfa;
  border-color: #ffa39e;
}
.cp-card-red h4,
.cp-card-red .cp-card-amount {
  color: #f5222d;
}
.cp-card-red .cp-dot {
  background-color: #f5222d;
}
a.session-mode {
  padding: 8px 15px;
  background: #93996d1a;
  border-radius: 15px;
  color: #52553e;
}
a.session-mode span {
  height: 7px;
  width: 7px;
  display: inline-flex;
  background: linear-gradient(180deg, #93996d 0%, #52553e 100%);
  border-radius: 50%;
  margin-right: 7px;
}

.custom-payment-checkbox-wrapper {
  display: inline-block;
  padding: 5px;
}

.custom-payment-checkbox-input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.custom-payment-checkbox-label {
  display: inline-block;
  position: relative;
  cursor: pointer;
  user-select: none;
}

.custom-payment-checkbox-box {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid #74505c;
  border-radius: 5px;
  background-color: #ffffff;
  box-sizing: border-box;
}

/* Hover effect */
/* .custom-payment-checkbox-label:hover .custom-payment-checkbox-input ~ .custom-payment-checkbox-box {
  background-color: #fdfafb;
} */

.custom-payment-checkbox-input:checked ~ .custom-payment-checkbox-box {
  background-color: #74505c;
}

.custom-payment-checkbox-box::after {
  content: "";
  position: absolute;
  display: none;
  left: 8px;
  top: 4px;
  width: 4px;
  height: 9px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.custom-payment-checkbox-input:checked ~ .custom-payment-checkbox-box::after {
  display: block;
}
.service-card-header h4.service-header-title.choose {
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 8px;
  color: #1a1a1a;
}
.service-card-header.choose {
  align-items: flex-start;
}
.service-card-header.choose p {
  font-size: 14px;
  font-weight: 700;
  color: #5f5f5f;
}

.patient-faqs-accordion {
  width: 100%;
  background: #ffffff;
  padding: 0px 15px;
}

.patient-faqs-item {
  background-color: #ffffff;
  border: none;
  border-bottom: 1px solid #f0f0f0;
}

.patient-faqs-header {
  margin: 0;
  padding: 0;
}

.patient-faqs-button {
     position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 18px 16px;
    font-size: 16px;
    font-weight: 600;
    color: #14171D;
    text-align: left;
    background-color: #ffffff;
    border: none;
    outline: none;
    box-shadow: none !important;
    cursor: pointer;
    transition: color 0.15s ease-in-out;
}

.patient-faqs-button:hover {
  color: #583a42;
}

.patient-faqs-button:not(.collapsed) {
  color: #583a42;
  background-color: #ffffff;
  box-shadow: none;
}

.patient-faqs-button::after {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-left: auto;
  content: "";
  /* Custom Maroon SVG Arrow styling */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23583a42'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-size: 1.25rem;
  transition: transform 0.2s ease-in-out;
}

.patient-faqs-button:not(.collapsed)::after {
  transform: rotate(-180deg);
}

.patient-faqs-body {
  padding: 0px 16px 20px 16px;
  font-size: 13.5px;
  color: #666666;
  line-height: 1.6;
}
.service-card-header.choose {
  padding-bottom: 0;
  border-bottom: 1px solid #f0f0f0;
}

.ony-summary-v2-main-container {
  width: 100%;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 32px;
  box-sizing: border-box;
  padding: 20px;
  border-radius: 25px;
}

.ony-summary-v2-header-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.ony-summary-v2-icon-circle-maroon {
  background: linear-gradient(180deg, #74505c 0%, #4c2834 100%);
  width: 45px;
  height: 45px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ony-summary-v2-icon-circle-maroon svg {
  width: 18px;
  height: 18px;
  color: #ffffff;
}

.ony-summary-v2-main-title {
  color: #1a1a1a;
  font-size: 15px;
  font-weight: 600;
  margin: 0;
}

.ony-summary-v2-content-card {
  background-color: #f1eff1;
  border-radius: 20px;
  padding: 24px 28px;
}

.ony-summary-v2-bullet-list {
  list-style-type: disc;
  margin: 0;
  padding-left: 15px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ony-summary-v2-bullet-list li {
  color: #1a1a1a;
}

.ony-summary-v2-bullet-list strong {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 4px;
}

.ony-summary-v2-bullet-list p {
  margin: 0;
  font-size: 13.5px;
  color: #4a4a4a;
  line-height: 1.6;
}

.ony-summary-v2-service-section {
  border-top: 1px solid #eaeaea;
  padding-top: 24px;
}

.ony-summary-v2-divider {
  border: 0;
  border-top: 1px solid #f0f0f0;
  margin: 16px 0;
}

.ony-summary-v2-input-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ony-summary-v2-field-label {
  font-size: 13.5px;
  font-weight: 500;
  color: #1a1a1a;
}

.ony-summary-v2-select-box-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background-color: #f9f9f9;
  border: 1px solid #f5f5f5;
  border-radius: 30px;
  padding: 8px 16px;
  box-sizing: border-box;
  min-height: 52px;
}

.ony-summary-v2-selected-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: #939a75;
  color: #ffffff;
  padding: 6px 6px 6px 16px;
  border-radius: 50px;
}

.ony-summary-v2-tag-text {
  font-size: 13px;
  font-weight: 500;
}

.ony-summary-v2-tag-close-btn {
  background-color: #ffffff;
  border: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

.ony-summary-v2-tag-close-btn svg {
  width: 12px;
  height: 12px;
  color: #939a75;
}

.ony-summary-v2-dropdown-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #939a75;
  padding-right: 8px;
}

.ony-summary-v2-dropdown-arrow svg {
  width: 24px;
  height: 24px;
}

.ps-dashboard-v3-container {
  display: flex;
  gap: 32px;
  width: 100%;
  max-width: 1300px;
  background-color: #ffffff;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  box-sizing: border-box;
}

.ps-dashboard-v3-left-column,
.ps-dashboard-v3-right-column {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.ps-dashboard-v3-section-block {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.ps-dashboard-v3-block-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  width: 100%;
}

.ps-border-bottom-none {
  margin-bottom: 12px;
}

.ps-dashboard-v3-header-main {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ps-dashboard-v3-icon-circle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ps-bg-maroon {
  background-color: #583a42;
  color: #ffffff;
}

.ps-dashboard-v3-icon-circle svg {
  width: 16px;
  height: 16px;
}

.ps-dashboard-v3-title {
  font-size: 15px;
  font-weight: 600;
  color: #1a1a1a;
}

.ps-dashboard-v3-subtext {
  font-weight: 400;
  color: #666666;
  font-size: 13.5px;
}

.ps-dashboard-v3-badge {
  font-size: 12px;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 20px;
}

.ps-badge-lavender {
  background-color: #f1eff1;
  color: #583a42;
}

.ps-badge-rose {
  background-color: #f3e9eb;
  color: #583a42;
}

.ps-dashboard-v3-card-body {
  border-radius: 20px;
  padding: 24px;
  width: 100%;
  box-sizing: border-box;
}

.ps-bg-grey-tint {
  background-color: #f9f8f9;
}

.ps-flex-center-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.ps-dashboard-v3-empty-state {
  max-width: 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ps-dashboard-v3-empty-icon {
  width: 44px;
  height: 44px;
  color: #74505c;
  margin-bottom: 20px;
  opacity: 0.8;
}

.ps-dashboard-v3-primary-msg {
  font-size: 14px;
  font-weight: 600;
  color: #74505c;
  margin: 0 0 8px 0;
  line-height: 1.4;
}

.ps-dashboard-v3-secondary-msg {
  font-size: 13px;
  color: #74505c;
  margin: 0;
  line-height: 1.4;
  opacity: 0.9;
}

.ps-dashboard-v3-textarea-container {
  position: relative;
  width: 100%;
  border-radius: 20px;
  padding: 20px;
  box-sizing: border-box;
  min-height: 150px;
}

.ps-dashboard-v3-input-field {
  width: 100%;
  min-height: 110px;
  background: transparent;
  border: none;
  resize: none;
  outline: none;
  font-family: inherit;
  font-size: 14px;
  color: #1a1a1a;
  line-height: 1.6;
  padding: 0;
}

.ps-dashboard-v3-input-field::placeholder {
  color: #666666;
}

.ps-textarea-corner-icon {
  position: absolute;
  right: 20px;
  bottom: 20px;
}

.ps-textarea-corner-icon svg {
  width: 18px;
  height: 18px;
}

.ps-color-muted {
  color: #a5a5a5;
}
.ps-color-maroon {
  color: #74505c;
}

.ps-dashboard-v3-add-task-btn {
  background-color: #74505c;
  color: #ffffff;
  border: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

.ps-dashboard-v3-add-task-btn svg {
  width: 14px;
  height: 14px;
}

.ps-dashboard-v3-task-list-box {
  border-radius: 20px;
  padding: 12px 20px;
  display: flex;
  flex-direction: column;
}

.ps-dashboard-v3-task-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid #f0edf0;
}

.ps-dashboard-v3-task-row:last-child {
  border-bottom: none;
}

.ps-dashboard-v3-task-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ps-task-desc {
  font-size: 14px;
  color: #1a1a1a;
  font-weight: 500;
}

.ps-task-date {
  font-size: 13px;
  color: #666666;
}

.ps-dashboard-v3-checkbox-container {
  position: relative;
  display: inline-block;
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.ps-dashboard-v3-checkbox-container input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.ps-dashboard-v3-checkmark {
  position: absolute;
  top: 0;
  left: 0;
  width: 18px;
  height: 18px;
  border: 2px solid #74505c;
  border-radius: 4px;
  background-color: transparent;
  box-sizing: border-box;
}

.ps-dashboard-v3-checkbox-container input:checked ~ .ps-dashboard-v3-checkmark {
  background-color: #74505c;
}

.ps-dashboard-v3-checkmark::after {
  content: "";
  position: absolute;
  display: none;
  left: 4px;
  top: 1px;
  width: 3px;
  height: 7px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.ps-dashboard-v3-checkbox-container
  input:checked
  ~ .ps-dashboard-v3-checkmark::after {
  display: block;
}

.ps-dashboard-v3-tabs-row {
  display: flex;
  gap: 24px;
  border-bottom: 1px solid #f0edf0;
  margin-bottom: 16px;
}

.ps-dashboard-v3-tab {
  background: transparent;
  border: none;
  padding: 10px 0 14px 0;
  font-size: 14px;
  font-weight: 500;
  color: #666666;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
}

.ps-tab-active {
  color: #74505c;
  font-weight: 600;
}

.ps-tab-active::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #74505c;
}

.ps-tab-count {
  background-color: #f1eff1;
  color: #1a1a1a;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 12px;
  font-weight: 500;
}

.ps-dashboard-v3-attachment-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.ps-dashboard-v3-doc-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #eaeaea;
  border-radius: 12px;
  padding: 14px 20px;
  width: 100%;
  box-sizing: border-box;
}

.ps-dashboard-v3-doc-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ps-dashboard-v3-pdf-icon-box {
  color: #f5222d;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.ps-dashboard-v3-pdf-icon-box svg {
  width: 28px;
  height: 28px;
}

.ps-pdf-mini-text {
  font-size: 7px;
  font-weight: 800;
  position: absolute;
  top: 11px;
  left: 5px;
  color: #ffffff;
}

.ps-dashboard-v3-doc-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ps-doc-name {
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
}

.ps-doc-date {
  font-size: 12px;
  color: #888888;
}

.ps-dashboard-v3-view-link {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #1a1a1a;
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
}

.ps-dashboard-v3-view-link svg {
  width: 16px;
  height: 16px;
}

.ps-dashboard-v3-upload-zone {
  border-radius: 20px;
  background-color: #f1eff1;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
}

.ps-dashboard-v3-upload-icon {
  width: 32px;
  height: 32px;
  color: #74505c;
  margin-bottom: 8px;
}

.ps-upload-action-text {
  font-size: 14px;
  font-weight: 600;
  color: #74505c;
  margin-bottom: 6px;
}

.ps-upload-hint-text {
  font-size: 11.5px;
  color: #666666;
}

.ony-dashboard-wrapper {
  display: flex;
  gap: 32px;
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  /* flex-direction: column; */
}

.ony-dashboard-col-left,
.ony-dashboard-col-right {
  flex: 1;
  gap: 20px;
  display: flex;
  flex-direction: column;
}

.ony-dashboard-col-left > div:not(:first-child) {
  margin-top: 32px;
}

/* ================= PART 1: AI SUMMARY CSS ================= */
.ps-part1-section-block {
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
  padding: 20px;
  border-radius: 20px;
  background: #fff;
}
.ps-part1-block-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.ps-part1-header-main {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ps-part1-icon-circle {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ps-part1-bg-maroon {
  background: linear-gradient(180deg, #74505C 0%, #4C2834 100%);
  color: #ffffff;
}
.ps-part1-icon-circle svg {
  width: 16px;
  height: 16px;
}
.ps-part1-title {
  font-size: 16px;
  font-weight: 700;
  color: #1a1a1a;
}
.ps-part1-subtext {
  font-weight: 700;
  color: #5F5F5F;
  font-size: 14px;
}
.ps-part1-badge {
  font-size: 12px;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 20px;
}
.ps-part1-badge-lavender {
  background-color: #f1eff1;
  color: #583a42;
}
.ps-part1-card-body {
  border-radius: 20px;
  padding: 12px;
  width: 100%;
  box-sizing: border-box;
  min-height: 480px;
}
.ps-part1-bg-grey-tint {
  background-color: #f0edee;
}
.ps-part1-flex-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.ps-part1-empty-state {
  max-width: 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ps-part1-empty-icon {
  width: 44px;
  height: 44px;
  color: #74505c;
  margin-bottom: 20px;
  opacity: 0.8;
}
.ps-part1-primary-msg {
  font-size: 14px;
  font-weight: 700;
  color: #74505c;
  margin: 0 0 8px 0;
  line-height: 1.4;
}
.ps-part1-secondary-msg {
  font-size: 16px;
  font-weight: 700;
  color: #4C2834;
  margin: 0;
  line-height: 1.4;
  opacity: 0.9;
}

/* ================= PART 2: DOCUMENTS CSS ================= */
.ps-part2-section-block {
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
  background-color: #fff;
  border-radius: 20px;
  padding: 20px;
}
.ps-part2-block-header {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}
.ps-part2-header-main {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ps-part2-icon-circle {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: linear-gradient(180deg, #74505C 0%, #4C2834 100%);

}
.ps-part2-bg-maroon {
  background-color: #583a42;
  color: #ffffff;
}
.ps-part2-icon-circle svg {
  width: 16px;
  height: 16px;
}
.ps-part2-title {
  font-size: 15px;
  font-weight: 600;
  color: #1a1a1a;
}
.ps-part2-tabs-row {
  display: flex;
  gap: 24px;
  border-bottom: 1px solid #f0edf0;
  margin-bottom: 16px;
}
.ps-part2-tab {
  background: transparent;
  border: none;
  padding: 10px 0 14px 0;
  font-size: 14px;
  font-weight: 500;
  color: #666666;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
}
.ps-part2-tab-active {
  color: #74505c;
  font-weight: 600;
}
.ps-part2-tab-active::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #74505c;
}
.ps-part2-tab-count {
  background-color: #f1eff1;
  color: #1a1a1a;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 12px;
  font-weight: 500;
}
.ps-part2-attachment-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}
.ps-part2-doc-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #eaeaea;
  border-radius: 12px;
  padding: 14px 20px;
  box-sizing: border-box;
}
.ps-part2-doc-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ps-part2-pdf-icon-box {
  color: #f5222d;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.ps-part2-pdf-icon-box svg {
  width: 28px;
  height: 28px;
}
.ps-part2-pdf-text {
  font-size: 7px;
  font-weight: 800;
  position: absolute;
  top: 11px;
  left: 5px;
  color: #ffffff;
}
.ps-part2-doc-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ps-part2-doc-name {
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
}
.ps-part2-doc-date {
  font-size: 12px;
  color: #888888;
}
.ps-part2-view-link {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #1a1a1a;
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
}
.ps-part2-view-link svg {
  width: 16px;
  height: 16px;
}
.ps-part2-upload-zone {
  border-radius: 20px;
  background-color: #f1eff1;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
}
.ps-part2-upload-icon {
  width: 32px;
  height: 32px;
  color: #74505c;
  margin-bottom: 8px;
}
.ps-part2-upload-text {
  font-size: 14px;
  font-weight: 600;
  color: #74505c;
  margin-bottom: 6px;
}
.ps-part2-upload-hint {
  font-size: 11.5px;
  color: #666666;
}

/* ================= PART 3: PRIVATE & PUBLIC NOTES CSS ================= */
.ps-part3-wrapper {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.ps-part3-section-block {
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: #fff;
  padding: 20px;
  border-radius: 20px;
}
.ps-part3-block-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.ps-part3-header-main {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ps-part3-icon-circle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ps-part3-bg-maroon {
  background-color: #583a42;
  color: #ffffff;
}
.ps-part3-icon-circle svg {
  width: 16px;
  height: 16px;
}
.ps-part3-title {
  font-size: 15px;
  font-weight: 600;
  color: #1a1a1a;
}
.ps-part3-subtext {
  font-weight: 400;
  color: #666666;
  font-size: 13.5px;
}
.ps-part3-badge {
  font-size: 12px;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 20px;
}
.ps-part3-badge-rose {
  background-color: #f3e9eb;
  color: #583a42;
}
.ps-part3-textarea-container {
  position: relative;
  width: 100%;
  border-radius: 20px;
  padding: 20px;
  box-sizing: border-box;
  min-height: 150px;
  background-color: #f4f5f07d;
}
.ps-part3-input-field {
  width: 100%;
  min-height: 210px;
  background: transparent;
  border: none;
  resize: none;
  outline: none;
  font-family: inherit;
  font-size: 14px;
  color: #1a1a1a;
  line-height: 1.6;
  padding: 0;
}
.ps-part3-corner-icon {
  position: absolute;
  right: 20px;
  bottom: 20px;
}
.ps-part3-corner-icon svg {
  width: 18px;
  height: 18px;
}
.ps-part3-color-muted {
  color: #a5a5a5;
}
.ps-part3-color-maroon {
  color: #74505c;
}

/* ================= PART 4: TASKS CSS ================= */
.ps-part4-section-block {
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
  padding: 20px;
  border-radius: 20px;
  background-color: #fff;
}
.ps-part4-block-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.ps-part4-header-main {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ps-part4-icon-circle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ps-part4-bg-maroon {
  background-color: #583a42;
  color: #ffffff;
}
.ps-part4-icon-circle svg {
  width: 16px;
  height: 16px;
}
.ps-part4-title {
  font-size: 15px;
  font-weight: 600;
  color: #1a1a1a;
}
.ps-part4-badge {
  font-size: 12px;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 20px;
}
.ps-part4-badge-rose {
  background-color: #f3e9eb;
  color: #583a42;
}
.ps-part4-add-btn {
  background-color: #74505c;
  color: #ffffff;
  border: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.ps-part4-add-btn svg {
  width: 14px;
  height: 14px;
}
.ps-part4-list-box {
  border-radius: 20px;
  padding: 12px 20px;
  display: flex;
  flex-direction: column;
}
.ps-part4-bg-grey-tint {
  background-color: #f9f8f9;
}
.ps-part4-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid #f0edf0;
}
.ps-part4-row:last-child {
  border-bottom: none;
}
.ps-part4-row-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ps-part4-desc {
  font-size: 14px;
  color: #1a1a1a;
  font-weight: 500;
}
.ps-part4-date {
  font-size: 13px;
  color: #666666;
}
.ps-part4-checkbox-wrapper {
  position: relative;
  display: inline-block;
  width: 18px;
  height: 18px;
  cursor: pointer;
}
.ps-part4-checkbox-wrapper input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.ps-part4-checkmark {
  position: absolute;
  top: 0;
  left: 0;
  width: 18px;
  height: 18px;
  border: 2px solid #74505c;
  border-radius: 4px;
  box-sizing: border-box;
}
.ps-part4-checkbox-wrapper input:checked ~ .ps-part4-checkmark {
  background-color: #74505c;
}
.ps-part4-checkmark::after {
  content: "";
  position: absolute;
  display: none;
  left: 5px;
  top: 3px;
  width: 4px;
  height: 8px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.ps-part4-checkbox-wrapper input:checked ~ .ps-part4-checkmark::after {
  display: block;
}

@media (max-width: 991px) {
  .ony-dashboard-wrapper {
    flex-direction: column;
    gap: 32px;
  }
}

/* .pfd-wrapper-page {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
      background-color: #f9fafb;
      padding: 24px;
      display: flex;
      justify-content: center;
    } */

.pfd-main-container {
  width: 100%;
}

.pfd-card-wrapper {
  background-color: #ffffff;
  border: 1px solid #f3f4f6;
  border-radius: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  margin-bottom: 24px;
  overflow: hidden;
}

.pfd-card-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  border-bottom: 1px solid #f3f4f6;
}

.pfd-icon-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: #5c4350;
  color: #ffffff;
}

.pfd-icon-svg {
  width: 24px;
  height: 24px;
}

.pfd-header-title {
  font-size: 18px;
  font-weight: 600;
  color: #111827;
  margin: 0;
}

.pfd-card-body {
  padding: 24px;
}

.pfd-data-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.pfd-data-row-align-start {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0;
}

.pfd-text-column {
  display: flex;
  flex-direction: column;
}

.pfd-label-main {
  font-size: 16px;
  color: #6b7280;
}

.pfd-label-sub {
  font-size: 14px;
  color: #9ca3af;
  margin-top: 2px;
}

.pfd-value-text {
  font-size: 16px;
  font-weight: 500;
  color: #111827;
}

.pfd-btn-area {
  display: flex;
  justify-content: flex-end;
}

.pfd-action-trigger {
  background-color: #6b4e5e;
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  padding: 12px 24px;
  border: none;
  border-radius: 9999px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: background-color 0.2s ease;
}

.pfd-action-trigger:hover {
  background-color: #5c4350;
}
a.edit-icon-patients {
  background: linear-gradient(180deg, #74505c 0%, #4c2834 100%);
  padding: 6px 25px;
  border-radius: 26px;
  color: #fff;
}
a.edit-icon-patients img {
  margin-right: 10px;
}

/* .ps-part1-card-body.ps-part1-bg-grey-tint {
      background-color: #f3f4f6; 
      padding: 32px;
      display: flex;
    } */

.ps-part1-summary-card {
  color: #1f2937;
}

.ps-part1-section-title {
  font-size: 16px;
  font-weight: 700;
  color: #111827;
  margin: 0 0 8px 0;
  text-align: left;
}

.ps-part1-paragraph {
  font-size: 15px;
  line-height: 1.5;
  color: #374151;
  margin: 0 0 28px 0;
  text-align: left;
}

.ps-part1-sub-text {
  font-size: 15px;
  line-height: 1.5;
  color: #374151;
  margin: 0 0 12px 0;
  text-align: left;
}

.ps-part1-bullet-list {
  list-style-type: none;
  padding-left: 0;
  margin: 0 0 28px 0;
}

.ps-part1-bullet-list:last-child {
  margin-bottom: 0;
}

.ps-part1-list-item {
  font-size: 15px;
  line-height: 1.5;
  color: #374151;
  position: relative;
  padding-left: 16px;
  margin-bottom: 8px;
  text-align: left;
}

.ps-part1-list-item:last-child {
  margin-bottom: 0;
}

.ps-part1-list-item::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #374151;
}

.ps-part3-section-block {
  background-color: #ffffff;
  border-radius: 32px;
  padding: 32px;
  max-width: 615px;
  width: 100%;
  box-sizing: border-box;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}

.ps-part3-block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.ps-part3-header-main {
  display: flex;
  align-items: center;
  gap: 16px;
}

.ps-part3-icon-circle.ps-part3-bg-maroon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: #5c4350;
  color: #ffffff;
}

.ps-part3-icon-circle svg {
  width: 22px;
  height: 22px;
}

.ps-part3-title {
  font-size: 18px;
  font-weight: 600;
  color: #1a1a1a;
}

.ps-part3-inner-content-card {
  background-color: #f7f6f7;
  border-radius: 24px;
  padding: 24px;
  margin-bottom: 20px;
}

.ps-part3-content-label {
  font-size: 16px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0 0 12px 0;
}

.ps-part3-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: #bebcbe;
  color: #1a1a1a;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 20px;
  margin-bottom: 20px;
}

.ps-part3-badge-dot {
  width: 6px;
  height: 6px;
  background-color: #000000;
  border-radius: 50%;
}

.ps-part3-description {
  font-size: 15px;
  color: #595959;
  line-height: 1.4;
  margin: 0;
}

.ps-part3-action-btn {
  width: 100%;
  background-color: #5c4350;
  color: #ffffff;
  font-size: 15px;
  font-weight: 500;
  padding: 14px;
  border: none;
  border-radius: 24px;
  cursor: pointer;
  margin-bottom: 16px;
  transition: background-color 0.2s ease;
}

.ps-part3-action-btn:hover {
  background-color: #4a3540;
}
.ps-part3-footer-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #6b4e5e;
  font-size: 13px;
  font-weight: 500;
}

.ps-part3-footer-info svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.ps-part4-section-block {
  background-color: #ffffff;
  border-radius: 32px;
  padding: 32px;
  max-width: 580px;
  width: 100%;
  box-sizing: border-box;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}

.ps-part4-block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.ps-part4-header-main {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
}

.ps-part4-icon-circle.ps-part4-bg-maroon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(180deg, #74505C 0%, #4C2834 100%);
  color: #ffffff;
}

.ps-part4-icon-circle svg {
  width: 22px;
  height: 22px;
}

.ps-part4-title {
  font-size: 18px;
  font-weight: 600;
  color: #1a1a1a;
  flex-grow: 1;
}

.ps-part4-add-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: #595959;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ps-part4-add-btn svg {
  width: 24px;
  height: 24px;
}

.ps-part4-divider {
  border: 0;
  border-top: 1px solid #f3f4f6;
  margin: 24px 0;
}

.ps-part4-content-group {
  display: flex;
  flex-direction: column;
}

.ps-part4-section-subtitle {
  font-size: 16px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0 0 12px 0;
}

.ps-part4-mood-container {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.ps-part4-emoji-wrapper {
  font-size: 36px;
  line-height: 1;
}

.ps-part4-mood-status {
  font-size: 15px;
  color: #737373;
  font-weight: 500;
}

.ps-part4-rating-stars {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

.ps-part4-star {
  width: 32px;
  height: 32px;
}
.ps-part4-reflection-text {
  font-size: 14px;
  color: #404040;
  line-height: 1.5;
  margin: 0;
}

.ps-sessions-accordion .accordion-item {
  border-bottom: 1px solid #f3f4f6;
  border-radius: 24px !important;
  overflow: hidden;
  background-color: #ffffff;
  margin-bottom: 16px;
}

.ps-sessions-accordion .accordion-button {
  background-color: #ffffff !important;
  color: #1a1a1a !important;
  font-size: 18px;
  font-weight: 600;
  padding: 18px 0px;
  box-shadow: none !important;
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Arrow icon styling */
.ps-sessions-accordion .accordion-button::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%235C4350'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
  transform: scale(1.2);
}

.ps-sessions-accordion .accordion-button:not(.collapsed)::after {
  transform: rotate(-180deg) scale(1.2) !important;
}

.ps-sessions-header-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #5c4350;
  color: #ffffff;
  flex-shrink: 0;
}

.ps-sessions-header-icon svg {
  width: 20px;
  height: 20px;
}

.ps-sessions-accordion .accordion-body {
  padding: 24px;
  background-color: #ffffff;
  border-top: 1px solid #f3f4f6;
}

.ps-sessions-inner-box {
  border: 1px solid #e5e7eb;
  border-radius: 20px;
  padding: 20px;
  max-height: 280px;
  overflow-y: auto;
}

.ps-sessions-inner-box::-webkit-scrollbar {
  width: 6px;
}
.ps-sessions-inner-box::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}
.ps-sessions-inner-box::-webkit-scrollbar-thumb {
  background: #5c4350;
  border-radius: 10px;
}

.ps-sessions-search-wrapper {
  position: relative;
  margin-bottom: 20px;
}

.ps-sessions-search-input {
  width: 100%;
  padding: 10px 16px 10px 44px;
  border: 1px solid #e5e7eb;
  border-radius: 9999px;
  font-size: 14px;
  outline: none;
  color: #404040;
}

.ps-sessions-search-input::placeholder {
  color: #a3a3a3;
}

.ps-sessions-search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #a3a3a3;
  width: 18px;
  height: 18px;
}

.ps-sessions-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 8px;
  border-bottom: 1px solid #f3f4f6;
  font-size: 14px;
}

.ps-sessions-list-item:last-child {
  border-bottom: none;
}

.ps-sessions-col-name {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #6b4e5e;
  font-weight: 500;
  width: 30%;
}

.ps-sessions-dot {
  width: 6px;
  height: 6px;
  background-color: #6b4e5e;
  border-radius: 50%;
}

.ps-sessions-col-date {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #404040;
  width: 35%;
}

.ps-sessions-col-date svg {
  width: 16px;
  height: 16px;
  color: #595959;
}

.ps-sessions-col-details {
  color: #404040;
  width: 35%;
  text-align: left;
}

.ps-sessions-muted-prefix {
  color: #8c8c8c;
  margin-right: 4px;
}
.ps-sessions-header-main {
  display: flex;
  gap: 15px;
}
div#accordionExample .accordion-item {
  border: none;
}

.action-btn-container {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 20px;
}

/* Base Button Styling */
.action-btn-base {
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
  font-size: 14px;
  font-weight: 500;
  padding: 10px 24px;
  border-radius: 9999px; /* Pill shape */
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s ease;
  text-decoration: none;
  outline: none;
}

/* Left Button: View Filled Form (Solid Dark Plum Color) */
.action-btn-filled {
  background-color: #5c3d46;
  color: #ffffff;
  border: 1px solid #5c3d46;
}

.action-btn-filled:hover {
  background-color: #4a3038;
  border-color: #4a3038;
}

/* Right Button: End Session (Outline Red with Light Pink Tint) */
.action-btn-outline {
  background-color: #fff0f1;
  color: #c1272d;
  border: 1px solid #d9383a;
}

.action-btn-outline:hover {
  background-color: #ffe1e3;
  border-color: #c1272d;
}

/* Icon size control */
.action-btn-icon {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ps-session-info-block {
  display: inline-flex;
  flex-direction: column;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif;
  padding-left: 16px;
  border-left: 1px solid #e5e7eb; /* Soft vertical divider line on the left */
}

/* Main Title (Patient Name) */
.ps-session-info-title {
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 6px 0;
  letter-spacing: -0.01em;
}

/* Subtitle Container (Dot + Timer Text) */
.ps-session-info-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Live Status Red Dot */
.ps-session-info-dot {
  width: 6px;
  height: 6px;
  background-color: #dc2626; /* Vibrant status red */
  border-radius: 50%;
  flex-shrink: 0;
}

/* Time Text Wrapper */
.ps-session-info-text {
  font-size: 15px;
  color: #737373; /* Muted grey text */
  font-weight: 400;
}

/* Highlighted Timestamp Duration */
.ps-session-info-duration {
  color: #5c4350; /* Signature dark plum color from image */
  font-weight: 500;
}

.ps-dash-layout-wrapper {
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  background-color: #f8f7f8;
  padding: 24px;
  display: flex;
  justify-content: center;
}

.ps-dash-grid-container {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 24px;
  width: 100%;
}

@media (max-width: 992px) {
  .ps-dash-grid-container {
    grid-template-columns: 1fr;
  }
}

/* Common Card Styling */
.ps-dash-card {
  background-color: #ffffff;
  border-radius: 24px;
  padding: 24px;
  border: 1px solid #f1f0f1;
}

.ps-dash-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.ps-dash-header-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0;
}

.ps-dash-title-muted {
  font-size: 13px;
  color: #737373;
  font-weight: 400;
  margin-left: 4px;
}

.ps-dash-header-icon {
  width: 18px;
  height: 18px;
  color: #5c4350;
}

/* Left Side: Session Recording Content */
.ps-dash-recording-inner {
  background-color: #fcfbfa;
  border-radius: 20px;
  border: 1px solid #f3f2f1;
  height: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.ps-dash-timer-text {
  font-size: 15px;
  font-weight: 600;
  color: #1a1a1a;
}

.ps-dash-audio-waveform-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  width: 100%;
  justify-content: center;
}

.ps-dash-mic-circle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background-color: #f3eff0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.ps-dash-mic-circle svg {
  width: 28px;
  height: 28px;
  color: #4a5d4e;
}

.ps-dash-mic-status-dot {
  width: 12px;
  height: 12px;
  background-color: #4a5d4e;
  border: 2px solid #ffffff;
  border-radius: 50%;
  position: absolute;
  bottom: 4px;
  right: 4px;
}

.ps-dash-wave-svg {
  width: 100px;
  height: 40px;
  color: #d1c9cc;
}

.ps-dash-live-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #dc2626;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 12px;
}

.ps-dash-pulse-dot {
  width: 6px;
  height: 6px;
  background-color: #dc2626;
  border-radius: 50%;
}

.ps-dash-status-heading {
  font-size: 15px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0 0 6px 0;
}

.ps-dash-status-desc {
  font-size: 13px;
  color: #737373;
  margin: 0;
  text-align: center;
  line-height: 1.4;
}

/* Right Side Panel Flex Stack */
.ps-dash-right-col {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Private Notes Sub-elements */
.ps-dash-btn-clear {
  background-color: #f5f5f5;
  border: none;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  color: #5c4350;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
}

.ps-dash-textarea-box {
  width: 100%;
  height: 110px;
  border: 1px solid #e5e5e5;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  padding: 14px;
  font-size: 14px;
  resize: none;
  outline: none;
  color: #1a1a1a;
}

.ps-dash-textarea-box::placeholder {
  color: #a3a3a3;
}

.ps-dash-toolbar {
  border: 1px solid #e5e5e5;
  border-top: none;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #ffffff;
  margin-bottom: 16px;
}

.ps-dash-toolbar-left {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #595959;
}

.ps-dash-tool-item {
  font-size: 13px;
  cursor: pointer;
  font-weight: 500;
}

.ps-dash-tool-icon {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.ps-dash-btn-save {
  background-color: #5c4350;
  color: #ffffff;
  border: none;
  border-radius: 20px;
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  float: right;
}

/* Documents & Attachments Sub-elements */
.ps-dash-tabs-row {
  display: flex;
  gap: 24px;
  border-bottom: 1px solid #f3f4f6;
  margin-bottom: 16px;
}

.ps-dash-tab {
  font-size: 14px;
  padding-bottom: 10px;
  cursor: pointer;
  color: #737373;
  display: flex;
  align-items: center;
  gap: 6px;
}

.ps-dash-tab.ps-dash-active-tab {
  color: #442f3a;
  font-weight: 600;
  border-bottom: 2px solid #5c4350;
}

.ps-dash-tab-count {
  background-color: #f1f0f1;
  color: #595959;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 600;
}

.ps-dash-tab.ps-dash-active-tab .ps-dash-tab-count {
  background-color: #efece2;
  color: #4a5d4e;
}

.ps-dash-file-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #e5e5e5;
  border-radius: 14px;
  padding: 12px 16px;
  margin-bottom: 16px;
}

.ps-dash-file-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ps-dash-pdf-icon {
  width: 28px;
  height: 28px;
  color: #dc2626;
}

.ps-dash-file-name {
  font-size: 14px;
  font-weight: 500;
  color: #1a1a1a;
  margin: 0;
}

.ps-dash-file-date {
  font-size: 11px;
  color: #a3a3a3;
  margin: 2px 0 0 0;
}

.ps-dash-link-view {
  font-size: 13px;
  color: #404040;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
}

/* Upload Box UI */
.ps-dash-upload-dashed-box {
  border: 1px dashed #d1c9cc;
  background-color: #f7f5f6;
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.ps-dash-upload-icon-box {
  color: #a3969a;
  width: 24px;
  height: 24px;
  margin-bottom: 8px;
}

.ps-dash-upload-text {
  font-size: 14px;
  font-weight: 500;
  color: #5c4350;
  margin: 0 0 6px 0;
}

.ps-dash-upload-sub {
  font-size: 11px;
  color: #8c8c8c;
  margin: 0;
}

.ps-session-page-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 20px;
  max-width: 1400px;
  margin: 0 auto;
}

@media (max-width: 1024px) {
  .ps-session-page-grid {
    grid-template-columns: 1fr;
  }
}

/* Left Side: Video Window Panel */
.ps-session-video-panel {
  display: flex;
  flex-direction: column;
  background-color: #000000;
  border-radius: 28px;
  overflow: hidden;
  height: 640px;
  position: relative;
}

/* Video Stream Frame simulating a camera feed background color */
.ps-session-video-viewport {
  flex-grow: 1;
  background-color: #e5c5b5; /* Matching the soft warm wall tint of the image */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Patient Name Overlay on Top Left */
.ps-session-overlay-badge-top {
  position: absolute;
  top: 16px;
  left: 16px;
  background-color: rgba(0, 0, 0, 0.4);
  color: #ffffff;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  backdrop-filter: blur(4px);
}

.ps-session-mic-active-waves {
  color: #22c55e;
  display: inline-flex;
  align-items: center;
}

/* Floating Volume Slider on Left Wall */
.ps-session-volume-slider-container {
  position: absolute;
  left: 16px;
  top: 30%;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 20px;
  padding: 16px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 36px;
  backdrop-filter: blur(4px);
}

.ps-session-volume-track {
  width: 4px;
  height: 120px;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
  position: relative;
}

.ps-session-volume-fill {
  width: 100%;
  height: 70%;
  background-color: #ffffff;
  border-radius: 2px;
  position: absolute;
  bottom: 0;
}

.ps-session-volume-handle {
  width: 10px;
  height: 10px;
  background-color: #ffffff;
  border-radius: 50%;
  position: absolute;
  bottom: 70%;
  left: -3px;
}

.ps-session-volume-icon {
  color: #ffffff;
  width: 16px;
  height: 16px;
}

/* Small Picture-in-Picture Doctor Video Feed Box */
.ps-session-pip-doctor-box {
  position: absolute;
  bottom: 16px;
  right: 16px;
  width: 200px;
  height: 130px;
  background-color: #dfd5c6; /* Simulating secondary room light background */
  border-radius: 16px;
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 8px;
}

.ps-session-pip-label {
  background-color: rgba(0, 0, 0, 0.5);
  color: #ffffff;
  font-size: 10px;
  padding: 4px 8px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
}

/* Video Control Action Center Dock */
.ps-session-video-controls-dock {
  background-color: #000000;
  padding: 16px 24px;
  display: flex;
  justify-content: center;
  gap: 32px;
}

.ps-session-dock-btn {
  background: none;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: #8c8c8c;
  font-size: 11px;
  cursor: pointer;
}

.ps-session-dock-icon-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid #333333;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  transition: background 0.2s;
}

.ps-session-dock-icon-circle:hover {
  background-color: #222222;
}

.ps-session-dock-icon-circle svg {
  width: 18px;
  height: 18px;
}

.ps-session-dock-btn-end .ps-session-dock-icon-circle {
  background-color: #dc2626;
  border-color: #dc2626;
}

.ps-session-dock-btn-end .ps-session-dock-icon-circle:hover {
  background-color: #b91c1c;
}

/* Right Side Layout Stack */
.ps-session-right-sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Common Card Module Layout */
.ps-session-module-card {
  background-color: #ffffff;
  border-radius: 24px;
  padding: 20px;
  border: 1px solid #f1f0f1;
}

.ps-session-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.ps-session-card-title {
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ps-session-title-aside {
  font-size: 12px;
  color: #8c8c8c;
  font-weight: 400;
  margin-left: 2px;
}

.ps-session-head-icon-plum {
  color: #5c4350;
  width: 16px;
  height: 16px;
}

/* Sub-component: Private Notes */
.ps-session-btn-clear {
  background-color: #f5f5f5;
  border: none;
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 500;
  color: #5c4350;
  cursor: pointer;
}

.ps-session-notes-textarea {
  width: 100%;
  height: 90px;
  border: 1px solid #e5e5e5;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  padding: 12px;
  font-size: 13px;
  resize: none;
  outline: none;
}

.ps-session-notes-toolbar {
  border: 1px solid #e5e5e5;
  border-top: none;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  padding: 6px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #ffffff;
  margin-bottom: 12px;
}

.ps-session-toolbar-left-items {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: #595959;
}

.ps-session-btn-save-note {
  background-color: #5c4350;
  color: #ffffff;
  border: none;
  border-radius: 20px;
  padding: 8px 20px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  float: right;
}

/* Sub-component: Live Chat */
.ps-session-chat-timeline {
  height: 180px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-right: 2px;
}

.ps-session-chat-day-label {
  text-align: center;
  font-size: 11px;
  color: #a3a3a3;
  margin: 4px 0;
}

.ps-session-chat-msg-bubble-line {
  display: flex;
  gap: 8px;
}

.ps-session-chat-msg-bubble-line.ps-session-msg-row-user {
  flex-direction: row-reverse;
}

.ps-session-chat-sender-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-color: #d1c9cc;
}

.ps-session-msg-wrapper-inner {
  max-width: 80%;
}

.ps-session-msg-text-bubble {
  background-color: #f3f4f6;
  padding: 8px 12px;
  border-radius: 14px;
  font-size: 12.5px;
  color: #1a1a1a;
  line-height: 1.4;
}

.ps-session-msg-row-user .ps-session-msg-text-bubble {
  background-color: #656c5b; /* Soft warm muted olive grey shade matching user message */
  color: #ffffff;
}

.ps-session-chat-time-text {
  font-size: 9px;
  color: #a3a3a3;
  display: block;
  margin-top: 2px;
  text-align: right;
}

.ps-session-chat-input-row {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  border-top: 1px solid #f3f4f6;
  padding-top: 12px;
}

.ps-session-chat-text-input {
  flex-grow: 1;
  border: 1px solid #e5e5e5;
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 13px;
  outline: none;
}

.ps-session-chat-btn-send {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #5c4350;
  color: #ffffff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.ps-session-chat-btn-send svg {
  width: 14;
  height: 14px;
}

/* Sub-component: Documents & Attachments */
.ps-session-tabs-row {
  display: flex;
  gap: 16px;
  border-bottom: 1px solid #f3f4f6;
  margin-bottom: 12px;
}

.ps-session-tab {
  font-size: 13px;
  padding-bottom: 8px;
  cursor: pointer;
  color: #737373;
}

.ps-session-tab.ps-session-active-tab {
  color: #1a1a1a;
  font-weight: 600;
  border-bottom: 2px solid #5c4350;
}

.ps-session-badge-count {
  background-color: #f1f0f1;
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 8px;
  margin-left: 2px;
}

.ps-session-file-attachment-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 12px;
}

.ps-session-file-title {
  font-size: 13px;
  font-weight: 500;
  color: #1a1a1a;
}

.ps-session-file-meta {
  font-size: 11px;
  color: #a3a3a3;
}

.ps-session-view-link {
  font-size: 12px;
  color: #404040;
  text-decoration: none;
  font-weight: 500;
}

.ps-session-upload-dashed-dropzone {
  border: 1px dashed #c2b8bc;
  background-color: #fcfbfa;
  border-radius: 14px;
  padding: 14px;
  text-align: center;
  cursor: pointer;
}

.ps-session-upload-main-text {
  font-size: 13px;
  font-weight: 500;
  color: #5c4350;
}

.ps-session-upload-sub-text {
  font-size: 10px;
  color: #8c8c8c;
  margin-top: 2px;
}

/* Sub-component: Participants List */
.ps-session-participant-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #f9f9f9;
}

.ps-session-participant-line:last-child {
  border-bottom: none;
}

.ps-session-participant-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 500;
}

.ps-session-status-icon-right {
  width: 16px;
  height: 16px;
}

.ps-session-status-icon-right.ps-session-mic-on {
  color: #8c8c8c;
}

.ps-session-status-icon-right.ps-session-mic-off {
  color: #dc2626;
}
/* Main Layout Wrapper update */
.ps-session-page-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 20px;
  max-width: 1400px;
  margin: 0 auto;
  /* Page level scroll rokne ke liye height fix */
  height: calc(100vh - 48px);
  overflow: hidden;
}

/* Right Side Layout Stack update */
.ps-session-right-sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
  /* Sidebar ke andar scroll lane ke liye properties */
  height: 100%;
  overflow-y: auto;
  padding-right: 8px; /* Scrollbar ke liye thoda gap */
}

/* Optional: Right side scrollbar ko thoda clean aur modern banane ke liye */
.ps-session-right-sidebar::-webkit-scrollbar {
  width: 6px;
}

.ps-session-right-sidebar::-webkit-scrollbar-track {
  background: transparent;
}

.ps-session-right-sidebar::-webkit-scrollbar-thumb {
  background: #c5b8bd;
  border-radius: 10px;
}

.ps-session-right-sidebar::-webkit-scrollbar-thumb:hover {
  background: #5c4350;
}

/* Responsive handling */
@media (max-width: 1024px) {
  .ps-session-page-grid {
    grid-template-columns: 1fr;
    height: auto;
    overflow: visible;
  }
  .ps-session-right-sidebar {
    height: auto;
    overflow-y: visible;
  }
}

/* Two Column Flex Layout (No Grid) */
.onyba-prof-page-wrapper {
  display: flex;
  width: 100%;
  margin: 0 auto;
  gap: 20px;
}

.onyba-prof-main-col {
  flex: 1.3;
  display: flex;
  flex-direction: column;
}

.onyba-prof-side-col {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Parent Container for Every Section */
.onyba-prof-section-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: #fff;
  padding: 20px;
  border-radius: 20px;
}

/* Section Headers */
.onyba-prof-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  margin-top: 5px;
}

.onyba-prof-header-title-box {
  display: flex;
  align-items: center;
  gap: 12px;
}

.onyba-prof-header-title-box h2 {
  font-size: 20px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0;
}

.onyba-prof-icon-badge {
  width: 40px;
  height: 40px;
  background: linear-gradient(180deg, #93996d 0%, #52553e 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 18px;
}

/* Custom Buttons */
.onyba-prof-btn-action {
  background: transparent;
  border: 1px solid #4C2834;
  padding: 8px 16px;
  border-radius: 20px;
  background: linear-gradient(180deg, #74505C 0%, #4C2834 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 14px;
  cursor: pointer;
  font-weight: 500;
}

.onyba-prof-btn-action:hover {
  background-color: #f0f1ee;
}

/* Profile Card component */
.onyba-prof-user-card {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 30px;
}

.onyba-prof-avatar-wrap {
  position: relative;
  width: 80px;
  height: 80px;
}

.onyba-prof-avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.onyba-prof-upload-icon {
  position: absolute;
  bottom: 0;
  right: 0;
  background: linear-gradient(180deg, #74505c 0%, #4c2834 100%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  border: 2px solid #74505c;
  cursor: pointer;
}

.onyba-prof-user-details h3 {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 4px;
}

.onyba-prof-user-subtitle {
  font-size: 12px;
  color: #1A1A1AB2;
  margin-bottom: 8px;
}

.onyba-prof-badge-row {
  display: flex;
  gap: 8px;
}

.onyba-prof-badge {
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
}

.onyba-prof-badge--exp {
  background-color: #74505C33;
  color: #4C2834;
}

.onyba-prof-badge--status {
  background-color: #E8FDF2;
  color: #059691;
}

/* Flexible Rows and Input Box sizing (No Grid) */
.onyba-prof-form-inline-row {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
}

.onyba-prof-field-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

/* Precision widths using flex-basis */
.onyba-prof-w-25 {
  flex: 1;
  min-width: 0;
}
.onyba-prof-w-33 {
  flex: 1;
  min-width: 0;
}
.onyba-prof-w-50 {
  flex: 1;
  min-width: 0;
}
.onyba-prof-w-100 {
  width: 100%;
}

.onyba-prof-field-box label {
  font-size: 16px;
  color: #363636;
  font-weight: 500;
}

.onyba-prof-field-box input[type="text"],
.onyba-prof-field-box input[type="email"],
.onyba-prof-field-box textarea,
.onyba-prof-field-box select {
  width: 100%;
  padding: 14px 16px;
  background-color: #F4F5F07D;
  border: 1px solid transparent;
  border-radius: 16px;
  font-size: 14px;
  color: #1A1A1AB2;
  outline: none;
}

.onyba-prof-field-box textarea {
  resize: none;
  line-height: 1.5;
}

/* Select Box Custom Arrow */
.onyba-prof-select-custom {
  position: relative;
}

.onyba-prof-select-custom select {
  appearance: none;
  cursor: pointer;
}

.onyba-prof-select-custom::after {
  content: ""; 
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    
    background-image: url('../images/dropdown-icon-select.svg'); 
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

    width: 25px;  
    height: 25px; 
    
    pointer-events: none;
}

/* Line separator */
.onyba-prof-separator {
  border: none;
  border-top: 1px solid #ededed;
  margin: 10px 0;
}

/* Certifications Block */
.onyba-prof-cert-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.onyba-prof-cert-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 16px;
  border-bottom: 1px solid #f1f1f1;
}

.onyba-prof-cert-card h4 {
  font-size: 16px;
  font-weight: 500;
  color: #1a1a1a;
  margin-bottom: 4px;
}

.onyba-prof-cert-card p {
  font-size: 12px;
  font-weight: 500;
  color: #5F5F5F;
}

.onyba-prof-status-tag {
  background-color:#74505C33;
  color: #363636;
  padding: 4px 12px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
}

/* Right Side Styles */
.onyba-prof-sub-title-text {
  font-size: 16px;
  color: #363636;
  margin-bottom: 12px;
  font-weight: 500;
}

.onyba-prof-mode-toggle-row {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
}

.onyba-prof-btn-mode {
  flex: 1;
  padding: 14px;
  border-radius: 25px;
  border: none;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.onyba-prof-btn-mode--active {
  background: linear-gradient(180deg, #93996D 0%, #52553E 100%);
  color: #fff;
}

.onyba-prof-btn-mode--inactive {
background: linear-gradient(180deg, #93996D 0%, #52553E 100%);
  color: #fff;
}

.onyba-prof-address-card {
  display: flex;
  gap: 12px;
  background-color: #FAFAF8;
  padding: 16px;
  border-radius: 16px;
  align-items: flex-start;
}

.onyba-prof-address-card p {
  font-size: 16px;
  color: #5F5F5F;
  font-weight: 500;
  line-height: 1.4;
}

/* Chips/Tags Cloud */
.onyba-prof-tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.onyba-prof-chip {
  background-color: #f8f8f7;
  color: #4a4f43;
  padding: 10px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
}

/* Tax Bar block */
.onyba-prof-tax-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f8f8f7;
  padding: 12px 20px;
  border-radius: 30px;
}

.onyba-prof-tax-text {
  font-size: 14px;
  color: #1a1a1a;
  font-weight: 500;
}

.onyba-prof-tax-options-wrap {
  display: flex;
  gap: 6px;
}

.onyba-prof-tax-item {
  padding: 8px 18px;
  border-radius: 20px;
  font-size: 13px;
  cursor: pointer;
  color: #4a4a4a;
}

.onyba-prof-tax-item--active {
  background-color: #512b32;
  color: white;
}

/* Admin block */
.onyba-prof-admin-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
}

.onyba-prof-admin-bar span {
  font-size: 14px;
  color: #4a4a4a;
}

.onyba-prof-admin-email-pill {
  background-color: #512b32;
  color: white !important;
  padding: 12px 24px;
  border-radius: 25px;
  font-size: 14px;
}

/* Responsive Support */
@media (max-width: 768px) {
  .onyba-prof-page-wrapper {
    flex-direction: column;
    gap: 40px;
  }
  .onyba-prof-form-inline-row {
    flex-direction: column;
    gap: 0;
  }
  .onyba-prof-w-25,
  .onyba-prof-w-33,
  .onyba-prof-w-50 {
    width: 100%;
  }
}
/* Upload Icon Container / Label */
.onyba-prof-upload-icon {
  position: absolute;
  bottom: 0;
  right: 0;
  background: linear-gradient(180deg, #74505c 0%, #4c2834 100%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #74505c;
  cursor: pointer;
  overflow: hidden; /* Bahar ka area hide karne ke liye */
}

/* Internal SVG/Image adjustments */
.onyba-prof-upload-icon img {
  width: 14px;
  height: 14px;
  object-fit: contain;
}

/* Main Native File Input ko completely hide karne ke liye */
.onyba-prof-upload-icon input[type="file"] {
  display: none;
}


/* Base Top Container Block */
.onyba-avail-page-wrapper {
        width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 30px;
    background: #fff;
    padding: 20px;
    border-radius: 20px;
    margin-top: 20px;
}

/* Header Container Parent Block */
.onyba-avail-header-container {
    width: 100%;
    border-bottom: 1px solid #ededed;
    padding-bottom: 20px;
}

.onyba-avail-title-box {
    display: flex;
    align-items: center;
    gap: 14px;
}

.onyba-avail-title-box h2 {
    font-size: 22px;
    font-weight: 600;
    color: #1a1a1a;
}

.onyba-avail-icon-circle {
    width: 44px;
    height: 44px;
    background: linear-gradient(180deg, #93996D 0%, #52553E 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
}

/* Main Body Rows Setup (Flexbox layout - No Grid) */
.onyba-avail-content-body {
    display: flex;
    width: 100%;
    gap: 80px;
}

/* Columns */
.onyba-avail-calendar-section {
    flex: 1.2;
    display: flex;
    flex-direction: column;
}

.onyba-avail-slots-section {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Month Control Header */
.onyba-avail-month-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.onyba-avail-month-title {
    font-size: 18px;
    font-weight: 600;
    color: #111111;
}

.onyba-avail-nav-arrows {
    display: flex;
    gap: 16px;
}

.onyba-avail-arrow-btn {
    background: transparent;
    border: none;
    font-size: 16px;
    color: #333;
    cursor: pointer;
    padding: 4px 8px;
}

/* Week Days Header Row (Flex Distribution) */
.onyba-avail-weekdays-row {
    display: flex;
    width: 100%;
    margin-bottom: 20px;
}

.onyba-avail-day-label {
    flex: 1;
    text-align: center;
    font-size: 13px;
    color: #999999;
    font-weight: 500;
}

/* Calendar Dates Layout Stack via Flex */
.onyba-avail-days-stack {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.onyba-avail-days-row {
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.onyba-avail-date-cell {
    /* flex: 1; */
    height: 65px;
    width: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: #333333;
    font-weight: 500;
    cursor: pointer;
    border-radius: 50%;
    transition: all 0.2s;
}

.onyba-avail-date-cell:hover:not(.onyba-avail-date-empty) {
    background-color: #f0f1ee;
}

.onyba-avail-date-empty {
    cursor: default;
}

/* Calendar Date Active State match to design circular token */
.onyba-avail-date--selected {
    background: linear-gradient(180deg, #93996D 0%, #52553E 100%);
    color: #ffffff !important;
    font-weight: 600;
}

/* Right Section Slots Element Typography */
.onyba-avail-section-title {
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 6px;
}

.onyba-avail-selected-day-text {
    font-size: 15px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 20px;
}

/* Slots Wrapper Container Rows */
.onyba-avail-slots-vertical-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 30px;
}

.onyba-avail-slot-item-row {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
}

/* Time Input component design */
.onyba-avail-input-time-wrap {
    position: relative;
    flex: 1.2;
}

.onyba-avail-time-field {
    width: 100%;
    padding: 12px 36px 12px 16px;
    border: 1px solid #b0b5a9;
    border-radius: 20px;
    font-size: 14px;
    color: #444;
    outline: none;
    background-color: #ffffff;
}

.onyba-avail-clock-icon {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #666;
    font-size: 13px;
    pointer-events: none;
}

/* Dropdown Period AM/PM block */
.onyba-avail-select-period-wrap {
    position: relative;
    flex: 1;
}

.onyba-avail-period-dropdown {
    width: 100%;
    padding: 12px 30px 12px 16px;
    border: 1px solid #b0b5a9;
    border-radius: 20px;
    font-size: 14px;
    color: #444;
    background-color: #ffffff;
    appearance: none;
    cursor: pointer;
    outline: none;
}

.onyba-avail-select-period-wrap::after {
    content: "▼";
    font-size: 8px;
    color: #444;
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

/* Control Add/Remove Buttons */
.onyba-avail-btn-remove {
    background: transparent;
    border: none;
    font-size: 18px;
    color: #555;
    cursor: pointer;
    padding: 0 4px;
}

.onyba-avail-btn-add-more {
    width: 36px;
    height: 36px;
    background: linear-gradient(180deg, #74505C 0%, #4C2834 100%);
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.onyba-avail-space-holder {
    width: 36px; /* Balance sizing layout row match spacing button */
}

/* Double Button row actions */
.onyba-avail-footer-actions-row {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    width: 100%;
}

.onyba-avail-btn-secondary {
    flex: 1;
    background-color: transparent;
    border: 1px solid #b0b5a9;
    padding: 14px;
    border-radius: 25px;
    color: #333;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.onyba-avail-btn-maroon {
    flex: 1;
    background: linear-gradient(180deg, #74505C 0%, #4C2834 100%);
    color: white;
    border: none;
    padding: 14px;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

/* Giant block bottom CTA button */
.onyba-avail-btn-block-submit {
    width: 100%;
    background: linear-gradient(180deg, #74505C 0%, #4C2834 100%);
    color: white;
    border: none;
    padding: 16px;
    border-radius: 25px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
}

/* Responsive Handling */
@media (max-width: 820px) {
    .onyba-avail-content-body {
        flex-direction: column;
        gap: 40px;
    }
}


/* popup */
/* Bootstrap dialog default structure overwrites */
.onyba-spec-bootstrap-dialog {
    max-width: 460px;
    width: 100%;
}

/* Overwriting standard white frame of Bootstrap content to look exactly like the design canvas tint */
.onyba-spec-bootstrap-content {
    background-color: #f6f5f1 !important;
    border-radius: 28px !important;
    border: none !important;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

/* Header Grid Row Control (Using pure flex box, no grid) */
.onyba-spec-pop-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.onyba-spec-pop-title-box {
    display: flex;
    align-items: center;
    gap: 14px;
}

.onyba-spec-pop-title-box h2 {
    font-size: 22px;
    font-weight: 600;
    color: #111111;
}

.onyba-spec-pop-icon-badge {
    width: 42px;
    height: 42px;
    background: linear-gradient(180deg, #93996D 0%, #52553E 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 18px;
}

/* Circle Close Button Wrapper Layout Asset */
.onyba-spec-pop-close-btn {
    width: 36px;
    height: 36px;
    background-color: #e9e8e2;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
    transition: background-color 0.2s;
}

.onyba-spec-pop-close-btn:hover {
    background-color: #dfded7;
}

.onyba-spec-pop-close-btn img {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

/* Main Core White Embedded Checklist Tray Card Container */
.onyba-spec-pop-main-card {
    background-color: #F5F5F1;
    border-radius: 24px;
    border: 1px solid #eadecc;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: 100%;
    padding: 20px;
}

/* Accordion Component Design Reference */
.onyba-spec-pop-accordion-bar {
        display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 20px;
    background-color: #ffffff;
    cursor: pointer;
    user-select: none;
    border-radius: 50px;
    margin-bottom: 10px;
}

.onyba-spec-pop-accordion-bar span {
    font-size: 15px;
    color: #555555;
    font-weight: 500;
}

/* Arrow default style and transition */
.onyba-spec-pop-arrow {
    font-size: 11px;
    color: #8c8c87;
    transition: transform 0.25s ease; /* Arrow rotational feedback */
}

/* Arrow rotation when collapsed (Bootstrap targets collapsed trigger automatically) */
.onyba-spec-pop-accordion-bar.collapsed .onyba-spec-pop-arrow {
    transform: rotate(180deg);
}

/* Core Container Dropdown Internal padding spec values */
.onyba-spec-pop-dropdown-body {
    display: flex;
    flex-direction: column;
    padding: 0 20px 20px 20px;
    background: #fff;
    padding: 15px;
    border-radius: 20px;
    border: 1px solid #E9E9E9;
}


.onyba-spec-pop-search-wrap {
    position: relative;
    width: 100%;
    margin-bottom: 16px;
}

.onyba-spec-pop-search-field {
    width: 100%;
    padding: 12px 16px 12px 42px;
    border: 1px solid #dcdbd3;
    border-radius: 25px;
    font-size: 14px;
    outline: none;
    color: #222222;
}

.onyba-spec-pop-search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #8c8c87;
    font-size: 14px;
}


.onyba-spec-pop-scroll-stack {
    display: flex;
    flex-direction: column;
    max-height: 200px;
    overflow-y: auto;
    padding-right: 6px;
    margin-bottom: 20px;
}


.onyba-spec-pop-scroll-stack::-webkit-scrollbar {
    width: 4px;
}
.onyba-spec-pop-scroll-stack::-webkit-scrollbar-track {
    background: transparent;
}
.onyba-spec-pop-scroll-stack::-webkit-scrollbar-thumb {
    background-color: #656d58;
    border-radius: 10px;
}


.onyba-spec-pop-checkbox-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    font-size: 14px;
    color: #1a1a1a;
    font-weight: 500;
    cursor: pointer;
    position: relative;
}

.onyba-spec-pop-checkbox-row input {
    position: absolute;
    opacity: 0;
    height: 0;
    width: 0;
}


.onyba-spec-pop-checkmark {
    height: 20px;
    width: 20px;
    border: 2px solid #6e6d68;
    border-radius: 6px;
    position: relative;
    transition: all 0.2s;
}


.onyba-spec-pop-checkbox-row input:checked ~ .onyba-spec-pop-checkmark {
    background-color: #512b32;
    border-color: #512b32;
}

.onyba-spec-pop-checkmark::after {
    content: "";
    position: absolute;
    display: none;
    left: 5px;
    top: 1px;
    width: 4px;
    height: 9px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.onyba-spec-pop-checkbox-row input:checked ~ .onyba-spec-pop-checkmark::after {
    display: block;
}


.onyba-spec-pop-actions-box {
    display: flex;
    justify-content: center;
    gap: 14px;
    width: 100%;
}

.onyba-spec-pop-btn-clear {
    flex: 1;
    max-width: 120px;
    background: transparent;
    border: 1px solid #111111;
    color: #111111;
    padding: 10px 0;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.onyba-spec-pop-btn-apply {
    flex: 1;
    max-width: 150px;
    background-color: #512b32;
    border: none;
    color: #ffffff;
    padding: 10px 0;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}


.onyba-spec-pop-custom-add-box {
    background-color: #ffffff;
    border-radius: 24px;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.onyba-spec-pop-custom-add-box p {
    font-size: 14px;
    color: #333333;
    font-weight: 500;
}

.onyba-spec-pop-input-group {
    display: flex;
    gap: 10px;
    width: 100%;
}

.onyba-spec-pop-input-group input {
    flex: 1;
    background-color: #f4f4f2;
    border: none;
    border-radius: 20px;
    padding: 10px 16px;
    font-size: 13px;
    outline: none;
    color: #222222;
}

.onyba-spec-pop-input-group button {
    background-color: #512b32;
    color: #ffffff;
    border: none;
    border-radius: 20px;
    padding: 0 22px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

/* logout popup */


.onyba-logout-dialog {
    max-width: 400px;
    width: 100%;
}


.onyba-logout-content {
    background-color: #ffffff !important;
    border-radius: 32px !important; 
    border: none !important;
    padding: 30px 24px;
    position: relative;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.12);
}


.onyba-logout-close-cross {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 38px;
    height: 38px;
    background-color: transparent;
    border: 1px solid #dcdcd8;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
    transition: background-color 0.2s, border-color 0.2s;
    z-index: 10;
}

.onyba-logout-close-cross:hover {
    background-color: #f6f5f1;
    border-color: #656d58;
}

.onyba-logout-close-cross img {
    width: 36px;
    height: 36px;
    object-fit: contain;
}


.onyba-logout-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 10px 0 0 0 !important;
}


.onyba-logout-icon-circle {
    width: 68px;
    height: 68px;
    background-color: #FB3A341A; 
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.onyba-logout-icon-circle img {
    width: 26px;
    height: 26px;
    object-fit: contain;
}

.onyba-logout-title {
    font-size: 24px;
    font-weight: 600;
    color: #111111;
    margin-bottom: 12px;
}


.onyba-logout-text {
    font-size: 15px;
    color: #777777;
    line-height: 1.5;
    max-width: 280px;
    margin-bottom: 28px;
}


.onyba-logout-actions-row {
    display: flex;
    gap: 14px;
    width: 100%;
}


.onyba-logout-btn-cancel {
    flex: 1;
    background-color: transparent;
    border: 1px solid #cccccc;
    color: #888888;
    padding: 14px 0;
    border-radius: 25px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.onyba-logout-btn-cancel:hover {
    background-color: #f8f9fa;
    color: #444444;
}


.onyba-logout-btn-confirm {
    flex: 1;
    background-color: #d10000; 
    border: none;
    color: #ffffff;
    padding: 14px 0;
    border-radius: 25px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
}

.onyba-logout-btn-confirm:hover {
    background-color: #b00000;
}
.onyba-cancel-dialog {
    max-width: 540px; /* Balanced wide frame proportion match to image content */
    width: 100%;
}

/* Overwriting default core frame parameters of Bootstrap box modal canvas */
.onyba-cancel-content {
    background-color: #ffffff !important;
    border-radius: 36px !important; /* Elegant premium round edges */
    border: none !important;
    padding: 36px 30px;
    position: relative;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
}

/* Floating exit cross circular indicator */
.onyba-cancel-close-cross {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 38px;
    height: 38px;
    background-color: transparent;
    border: 1px solid #e1e1dc;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
    transition: background-color 0.2s;
    z-index: 10;
}

.onyba-cancel-close-cross:hover {
    background-color: #f6f5f1;
}

.onyba-cancel-close-cross img {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

/* Internal body padding resets */
.onyba-cancel-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 !important;
}

/* Top soft red warning cross background frame decoration token */
.onyba-cancel-icon-circle {
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}

.onyba-cancel-icon-circle img {
    width: 56px;
    height: 56px;
    object-fit: contain;
}

/* Title Typography Specs */
.onyba-cancel-title {
    font-size: 22px;
    font-weight: 600;
    color: #111111;
    margin-bottom: 10px;
}

/* Description Text Spacings */
.onyba-cancel-desc {
    font-size: 14px;
    color: #777777;
    text-align: center;
    line-height: 1.5;
    margin-bottom: 24px;
}

/* Patient summary gray details badge block chip container */
.onyba-cancel-patient-chip {
    width: 100%;
    background-color: #f6f5f2; /* Smooth background shading tint */
    border-radius: 20px;
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

/* Profile Metadata row align group */
.onyba-cancel-meta-profile {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.onyba-cancel-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
}

.onyba-cancel-profile-text h6 {
    font-size: 15px;
    font-weight: 600;
    color: #111111;
    margin: 0;
}

.onyba-cancel-profile-text span {
    font-size: 13px;
    color: #666666;
}

/* Individual Data Blocks inside Patient Chip */
.onyba-cancel-meta-item {
    display: flex;
    gap: 10px;
    flex: 1.2;
}

.onyba-cancel-meta-icon {
    font-size: 16px;
    color: #656d58;
    margin-top: 2px;
    margin: auto;
}

.onyba-cancel-meta-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
        justify-content: center;
}

.onyba-cancel-meta-text strong {
    font-size: 13px;
    font-weight: 600;
    color: #444444;
}

.onyba-cancel-meta-text span {
    font-size: 13px;
    color: #666666;
}

.onyba-cancel-type-badge {
    font-size: 13px;
    color: #512b32 !important; /* Deep maroon styling link token value */
}

/* Input Form Elements Label Blocks */
.onyba-cancel-input-block {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 24px;
    align-items: flex-start;
}

.onyba-cancel-label {
    font-size: 15px;
    font-weight: 600;
    color: #111111;
}

.onyba-cancel-textarea {
    width: 100%;
    height: 110px;
    background-color: #fbfbfa;
    border: 1px solid #e1e1dc;
    border-radius: 16px;
    padding: 14px 16px;
    font-size: 14px;
    color: #222222;
    outline: none;
    resize: none;
}

.onyba-cancel-textarea::placeholder {
    color: #999999;
}

/* Soft grayish/purple policy warning alert message banner */
.onyba-cancel-notice-banner {
    width: 100%;
    background-color: #ede9eb; /* Exact design grayish maroon light shade blend */
    border-radius: 18px;
    padding: 14px 18px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 30px;
    text-align: left;
}

.onyba-cancel-notice-icon {
    font-size: 16px;
    color: #512b32;
    margin-top: 1px;
}

.onyba-cancel-notice-banner p {
    font-size: 13px;
    color: #512b32;
    line-height: 1.5;
    font-weight: 500;
}

/* Double footer block pill layouts (No Grid - standard multi flex align layout) */
.onyba-cancel-actions-row {
    display: flex;
    gap: 16px;
    width: 100%;
}

.onyba-cancel-btn-keep {
    flex: 1;
    background-color: transparent;
    border: 1px solid #512b32; /* Outlined tone */
    color: #512b32;
    padding: 14px 0;
    border-radius: 25px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
}

.onyba-cancel-btn-keep:hover {
    background-color: #fbf6f7;
}

.onyba-cancel-btn-confirm {
    flex: 1;
    background-color: #654d52; /* Core deep theme text color accent code match */
    border: none;
    color: #ffffff;
    padding: 14px 0;
    border-radius: 25px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
}

.onyba-cancel-btn-confirm:hover {
    background-color: #512b32;
}

.onyba-complete-content {
    background-color: #ffffff !important;
    border-radius: 36px !important; /* Premium fluid rounded border corners */
    border: none !important;
    padding: 36px 30px 30px 30px;
    position: relative;
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.1);
}

/* Top dynamic corner floating exit cross tracking badge */
.onyba-complete-close-cross {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 38px;
    height: 38px;
    background-color: transparent;
    border: 1px solid #e1e1dc;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
    transition: background-color 0.2s;
    z-index: 10;
}

.onyba-complete-close-cross:hover {
    background-color: #f6f5f1;
}

.onyba-complete-close-cross img {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

/* Centering context wrapper track alignment */
.onyba-complete-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 !important;
}

/* Circle Sage Green Theme Icon Badge background frame token */
.onyba-complete-icon-circle {
    width: 60px;
    height: 60px;
    background: linear-gradient(180deg, #93996D 0%, #52553E 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.onyba-complete-icon-circle img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

/* Header Text Typography specs */
.onyba-complete-title {
    font-size: 24px;
    font-weight: 600;
    color: #111111;
    margin-bottom: 12px;
}

/* Core description textual sub-nodes spacing specs */
.onyba-complete-desc {
    font-size: 15px;
    color: #777777;
    text-align: center;
    line-height: 1.6;
    margin-bottom: 26px;
}

/* Light Soft Grayish Maroon internal bulletin checklist card trace container */
.onyba-complete-info-panel {
    width: 100%;
    background-color: #ede9eb; /* Muted pastel tone match exactly */
    border-radius: 24px;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 32px;
}

/* Flex rows distribution inside bulletin panel track - No Grid */
.onyba-complete-log-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    text-align: left;
}

/* Circular thin double vector checklist icon trace mark */
.onyba-complete-check-icon {
    font-size: 14px;
    font-weight: bold;
    color: #512b32; /* Core dark purple accent token code */
    margin-top: 2px;
    display: inline-block;
}

.onyba-complete-log-row p {
    font-size: 14px;
    color: #512b32;
    line-height: 1.5;
    font-weight: 500;
}

/* Full Width Primary Confirmation Action Link Button Trigger */
.onyba-complete-btn-continue {
    width: 100%;
    background-color:#74505C; 
    border: none;
    color: #ffffff;
    padding: 15px 0;
    border-radius: 25px;
        display: flex;
    justify-content: center;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
}

.onyba-complete-btn-continue:hover {
    background-color: #512b32; /* Transitions to core dark maroon accent color on hover */
}

.onyba-end-dialog {
    max-width: 500px; /* Precise aspect proportion match to design canvas image */
    width: 100%;
}

/* Modifying Bootstrap white default structural element rules box */
.onyba-end-content {
    background-color: #ffffff !important;
    border-radius: 36px !important; /* Premium fluid rounded border corners */
    border: none !important;
    padding: 36px 30px 30px 30px;
    position: relative;
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.1);
}

/* Top dynamic corner floating exit cross tracking badge */
.onyba-end-close-cross {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 38px;
    height: 38px;
    background-color: transparent;
    border: 1px solid #e1e1dc;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
    transition: background-color 0.2s;
    z-index: 10;
}

.onyba-end-close-cross:hover {
    background-color: #f6f5f1;
}

.onyba-end-close-cross img {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

/* Centering context wrapper track alignment */
.onyba-end-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 !important;
}

/* Circle Red Call Disconnect Icon Badge background frame token */
.onyba-end-icon-circle {
    width: 60px;
    height: 60px;
    background-color: #C90101; 
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.onyba-end-icon-circle img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

/* Header Text Typography specs */
.onyba-end-title {
    font-size: 24px;
    font-weight: 600;
    color: #111111;
    margin-bottom: 12px;
}

/* Core description textual sub-nodes spacing specs */
.onyba-end-desc {
    font-size: 15px;
    color: #777777;
    text-align: center;
    line-height: 1.6;
    margin-bottom: 26px;
}

/* Light Soft Grayish Maroon internal bulletin checklist card trace container */
.onyba-end-info-panel {
    width: 100%;
    background-color: #ede9eb; /* Muted pastel tone match exactly */
    border-radius: 24px;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 32px;
}

/* Flex rows distribution inside bulletin panel track - No Grid */
.onyba-end-log-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    text-align: left;
}

/* Circular thin double vector checklist icon trace mark */
.onyba-end-check-icon {
    font-size: 14px;
    font-weight: bold;
    color: #512b32; /* Core dark purple accent token code */
    margin-top: 2px;
    display: inline-block;
}

.onyba-end-log-row p {
    font-size: 14px;
    color: #512b32;
    line-height: 1.5;
    font-weight: 500;
}

/* Double footer block pill layouts (No Grid - standard multi flex align layout) */
.onyba-end-actions-row {
    display: flex;
    gap: 16px;
    width: 100%;
}

.onyba-end-btn-cancel {
    flex: 1;
    background-color: transparent;
    border: 1px solid #512b32; /* Outlined tone */
    color: #512b32;
    padding: 14px 0;
    border-radius: 25px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
}

.onyba-end-btn-cancel:hover {
    background-color: #fbf6f7;
}

.onyba-end-btn-confirm {
    flex: 1;
    background-color: #654d52; 
    border: none;
    color: #ffffff;
    padding: 14px 0;
    border-radius: 25px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
}

.onyba-end-btn-confirm:hover {
    background-color: #512b32;
}

.onyba-ai-dialog {
    max-width: 500px; /* Precise aspect proportion match to design canvas image */
    width: 100%;
}

/* Modifying Bootstrap white default structural element rules box */
.onyba-ai-content {
    background-color: #ffffff !important;
    border-radius: 36px !important; /* Premium fluid rounded border corners */
    border: none !important;
    padding: 36px 30px 30px 30px;
    position: relative;
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.1);
}

/* Top dynamic corner floating exit cross tracking badge */
.onyba-ai-close-cross {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 38px;
    height: 38px;
    background-color: transparent;
    border: 1px solid #e1e1dc;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
    transition: background-color 0.2s;
    z-index: 10;
}

.onyba-ai-close-cross:hover {
    background-color: #f6f5f1;
}

.onyba-ai-close-cross img {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

/* Centering context wrapper track alignment */
.onyba-ai-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 !important;
}

/* --- ADVANCED CSS DOTTED SPINNER LOADER --- */
.onyba-ai-loader-container {
    position: relative;
    width: 60px;
    height: 60px;
    margin-bottom: 24px;
    animation: onybaAiRotation 2s linear infinite;
}

.onyba-ai-spinner-dot {
    position: absolute;
    width: 8px;
    height: 8px;
    background-color: #656d58; /* Premium core sage green matching color */
    border-radius: 50%;
}

/* Positioning 8 dots sequentially into a circular ring shape with gradual opacity mapping */
.onyba-ai-spinner-dot:nth-child(1) { top: 0; left: 26px; opacity: 1; }
.onyba-ai-spinner-dot:nth-child(2) { top: 8px; right: 8px; opacity: 0.85; }
.onyba-ai-spinner-dot:nth-child(3) { top: 26px; right: 0; opacity: 0.7; }
.onyba-ai-spinner-dot:nth-child(4) { bottom: 8px; right: 8px; opacity: 0.55; }
.onyba-ai-spinner-dot:nth-child(5) { bottom: 0; left: 26px; opacity: 0.4; }
.onyba-ai-spinner-dot:nth-child(6) { bottom: 8px; left: 8px; opacity: 0.3; }
.onyba-ai-spinner-dot:nth-child(7) { top: 26px; left: 0; opacity: 0.2; }
.onyba-ai-spinner-dot:nth-child(8) { top: 8px; left: 8px; opacity: 0.15; }

@keyframes onybaAiRotation {
    from { transform: rotate(0deg); }
    to { transform: rotate(36deg); }
}

/* Header Text Typography specs */
.onyba-ai-title {
    font-size: 24px;
    font-weight: 600;
    color: #111111;
    margin-bottom: 8px;
}

/* Subtitle loading caption indicator tracking spacing rules */
.onyba-ai-desc {
    font-size: 15px;
    color: #777777;
    margin-bottom: 28px;
}

/* Core status timeline display context panel background shading */
.onyba-ai-status-panel {
    width: 100%;
    background-color: #f3f3f0; /* Soft greenish off-white tint match exactly */
    border-radius: 24px;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 32px;
}

/* Row individual status log - Pure Flex box distribution (No Grid) */
.onyba-ai-status-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.onyba-ai-status-row p {
    font-size: 15px;
    font-weight: 500;
}

/* State 1: Completed State Color Mapping rules */
.onyba-ai-state-done p {
    color: #6e6e6a; /* Muted tone as per design layout */
}

.onyba-ai-icon-check {
    font-size: 14px;
    font-weight: bold;
    color: #656d58; /* Sage green success validation mark */
}

/* State 2: Active / Progress Loader Icons elements configuration rules */
.onyba-ai-state-loading p {
    color: #6e6e6a;
}

/* Small status circular ring progress spinner asset track */
.onyba-ai-icon-spin {
    width: 16px;
    height: 16px;
    border: 2px solid #ccd0c5;
    border-top: 2px solid #656d58; /* Core active accent highlight slice color */
    border-radius: 50%;
    /* animation: onybaAiSpin 1s linear infinite; */
}

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

/* Full Width Primary Confirmation Skip Button Action Link Trigger */
.onyba-ai-btn-skip {
    width: 100%;
    background-color: #654d52; /* Accent soft maroon layout theme tone */
    border: none;
    color: #ffffff;
    padding: 15px 0;
    border-radius: 25px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
    display: flex;
    justify-content: center;
}

.onyba-ai-btn-skip:hover {
    background-color: #512b32; /* Transitions to core deep dark maroon accent color on hover */
}


.agd-custom-modal .modal-content {
            border-radius: 20px;
            border: none;
            padding: 10px;
        }

        .agd-custom-modal .modal-header {
            border-bottom: none;
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
            text-align: center;
        }

        /* Position the close button properly inside standard header */
        .agd-custom-modal .modal-header .btn-close {
            position: absolute;
            top: 10px;
            right: 10px;
            border: 1px solid #dee2e6;
            border-radius: 50%;
            padding: 10px;
            background-size: 10px;
        }

        .agd-custom-modal .modal-footer {
            border-top: none;
            justify-content: flex-end;
        }

        /* Form Layout Elements (Flexbox - No Grid, No Bootstrap Spacing) */
        .agd-popup-form-group {
            margin-bottom: 20px;
        }

        .agd-popup-label {
            display: block;
            font-weight: 500;
            margin-bottom: 8px;
            color: #212529;
        }

        .agd-popup-select, 
        .agd-popup-textarea {
            width: 100%;
            background-color: #f1f3f0;
            border: none;
            padding: 12px 15px;
            border-radius: 10px;
            color: #212529;
            font-size: 0.95rem;
            outline: none;
        }

        .agd-popup-select:focus, 
        .agd-popup-textarea:focus {
            background-color: #e9ece7;
        }

        /* Flexbox Wrapper for Calendar and Time */
        .agd-popup-flex-row {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin-bottom: 20px;
        }

        .agd-popup-flex-col-left {
            flex: 1 1 55%;
            min-width: 280px;
        }

        .agd-popup-flex-col-right {
            flex: 1 1 38%;
            min-width: 220px;
        }

        /* Calendar Internal Styles */
        .agd-popup-calendar-box {
            border: 1px solid #eef0ed;
            border-radius: 15px;
            padding: 15px;
        }

        .agd-popup-calendar-nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            font-weight: 600;
        }

        .agd-popup-calendar-icons {
            display: flex;
            gap: 15px;
        }

        .agd-popup-calendar-icons i {
            cursor: pointer;
            font-size: 1rem;
        }

        .agd-popup-calendar-days-wrapper {
            display: flex;
            flex-wrap: wrap;
            width: 100%;
        }

        .agd-popup-day-cell {
            width: calc(100% / 7);
            text-align: center;
            padding: 8px 0;
            font-size: 0.85rem;
        }

        .agd-popup-day-header {
            font-weight: 600;
            color: #495057;
            font-size: 0.75rem;
            text-transform: uppercase;
        }

        .agd-popup-day-clickable {
            cursor: pointer;
            border-radius: 50%;
            transition: all 0.2s;
            color: #212529;
        }

        .agd-popup-day-clickable:hover:not(.agd-popup-day-disabled) {
            background-color: #e9ece7;
        }

        .agd-popup-day-disabled {
            color: #ccc;
            cursor: not-allowed;
        }

        .agd-popup-day-active {
            background-color: #6e7254 !important;
            color: #ffffff !important;
        }

        /* Styled Checkboxes for Time Slots */
        .agd-popup-time-slots-container {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .agd-popup-time-checkbox-wrapper {
            flex: 1 1 30%;
            min-width: 65px;
            position: relative;
        }

        .agd-popup-time-input {
            position: absolute;
            opacity: 0;
            width: 100%;
            height: 100%;
            cursor: pointer;
            margin: 0;
            z-index: 2;
        }

        .agd-popup-time-label {
            display: block;
            border: 1px solid #ccc;
            border-radius: 20px;
            padding: 8px 0;
            font-size: 0.85rem;
            color: #495057;
            text-align: center;
            transition: all 0.2s;
            user-select: none;
        }

        .agd-popup-time-input:hover + .agd-popup-time-label {
            border-color: #6e7254;
            background-color: #f8f9fa;
        }

        .agd-popup-time-input:checked + .agd-popup-time-label {
            background-color: #6e7254;
            color: #ffffff;
            border-color: #6e7254;
        }

        /* Summary Card Box */
        .agd-popup-summary-title {
            font-size: 1.1rem;
            font-weight: 700;
            margin-bottom: 12px;
            color: #212529;
        }

        .agd-popup-summary-card {
            background-color: #f5f6f2;
            border-radius: 15px;
            padding: 18px;
        }

        .agd-popup-summary-item {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            font-size: 0.92rem;
        }

        .agd-popup-summary-item:last-child {
            margin-bottom: 0;
        }

        .agd-popup-summary-lbl {
            color: #6c757d;
        }

        .agd-popup-summary-val {
            font-weight: 500;
            color: #212529;
        }

        /* Custom Main Button */
        .agd-popup-btn-submit {
            background-color: #6c525d;
            color: #ffffff;
            border: none;
            padding: 12px 32px;
            border-radius: 25px;
            font-weight: 500;
            cursor: pointer;
            transition: background 0.2s;
        }

        .agd-popup-btn-submit:hover {
            background-color: #56404a;
        }

        .agd-day-column-in{
             width: 100%;
    height: 100%;
        }


        .dbt4-filter-dropdown.date{
          padding: 0;
          border: none;
          outline: none;
        }

        .date-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid #ccc;
  border-radius: 15px;
  cursor: pointer;
}

.date-wrapper input {
  border: none;
  outline: none;
  background: transparent;
  width: 90px;
  cursor: pointer;
}




/* Container Box Styling */
.session-verify-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f4f0f1; 
    border: 1px solid #71505c;
    border-radius: 32px; 
    padding: 30px 60px;
    box-sizing: border-box;
    gap: 20px;
}

/* Left Content Alignment */
.session-verify-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Dark Circular Icon Wrapper */
.session-verify-icon-wrapper {
    background: linear-gradient(180deg, #74505C 0%, #4C2834 100%);
    color: #ffffff;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

.session-verify-icon {
    width: 24px;
    height: 24px;
}

/* Text Styling */
.session-verify-text-content {
    display: flex;
    flex-direction: column;
}

.session-verify-title {
    color: #111111;
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 4px 0;
}

.session-verify-subtitle {
    color: #555555;
    font-size: 13px;
    margin: 0;
}

/* Right Section Alignment */
.session-verify-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

/* Code Input Fields Container */
.session-code-inputs-container {
    display: flex;
    gap: 30px;
}

/* Round Input Boxes */
.session-code-field {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid #e0d9db;
    background-color: #ffffff;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    color: #71505c;
    outline: none;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

/* Focus and Active States */
.session-code-field:focus {
    border-color: #6a4d57;
    box-shadow: 0 0 4px rgba(106, 77, 87, 0.2);
}

/* Placeholder color light brown/grey */
.session-code-field::placeholder {
    color: #baadb1;
    opacity: 1;
}

/* Hide Spin Buttons for Firefox/Chrome */
.session-code-field::-webkit-outer-spin-button,
.session-code-field::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Verify Button */
.session-submit-btn {
    background-color: #74505C;
    color: #ffffff;
    border: none;
    border-radius: 25px;
    padding: 12px 36px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    width: 100%;
    max-width: 320px;
    transition: background-color 0.2s ease;
}

.session-submit-btn:hover {
    background-color: #74505C;
}

/* Resend Section Styling */
.session-resend-text {
    font-size: 13px;
    color: #333333;
    margin: 0;
}

.session-resend-link {
    color: #6a4d57;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}

.session-resend-link:hover {
    text-decoration: underline;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .session-verify-card {
        flex-direction: column;
        text-align: center;
        padding: 24px;
    }
    .session-verify-left {
        flex-direction: column;
    }
}

.onyba-complete-icon-circle.aisum {
    background: transparent;
}
.onyba-complete-icon-circle.aisum img {
    width: 46px;
    height: 46px;
    object-fit: contain;
}

/* Admin-CSS */
.dbt-pcard-info-row.address {
    display: flex;
}
.dropdown.dbt4-bs-dropdown-wrapper.download span.dbt4-arrow-icon {
    margin-left: 0;
    padding: 0;
    margin-right: 5px;
}
.dropdown.dbt4-bs-dropdown-wrapper.download button.dbt4-filter-dropdown.dropdown-toggle.dbt4-remove-arrow {
    border: none;
    color: #14171D;
    font-size: 14px;
    font-weight: 400;
}
span.dbt-badge-status.adult {
    background: #E8FDF2;
    color: #059691;
}
span.dbt-badge-status.couple {
    color: #F6289B;
    background: #FEF0FA;
}
span.dbt-badge-status.family {
    color: #E07706;
    background: #FFF9E3;
}
span.dbt-badge-status.coaching {
    color: #178DCC;
    background: #E0F2FE;
}
.profile-icon-pe {
    margin-bottom: 25px;
}
a.female-cta {
    background: linear-gradient(180deg, #93996D 0%, #52553E 100%);
    padding: 11px 20px;
    border-radius: 20px;
    color: #FFFFFF;
}
a.female-cta img {
    margin-left: 5px;
}
label.tp-label.fm {
    margin-bottom: 16px;
}
.col-md-2.width-gender {
    width: 150px;
}

p.patient-address-text {
    font-size: 14px;
    font-weight: 600;
    color: #1A1A1A;
    padding-bottom: 10px;
    border-bottom: 1px solid #93996D33;
    margin-top: 20px;
}
p.patient-address-invoice {
    color: #1A1A1A;
    font-size: 16px;
    font-weight: 600;
    margin-top: 30px;
}
.patient-age {
    background: #74505C33;
    padding: 10px 20px;
    border-radius: 20px;
    color: #74505C;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 20px;
}
.patient-age img {
    margin-right: 10px;
}
input.tp-input.icon-left {
    padding-left: 50px;
}
.text-field-icon {
    position: relative;
   
}
.text-field-icon img {
    width: 20px;
    height: 20px;
    position: absolute;
     top: -55px;
    left: 17px;
}
.right-add-paties {
    display: flex;
    gap: 20px;
}
a.dbt4-cta-add-patient span {
    background: #fff;
    color: #4C2834;
    border-radius: 50%;
    display: inline-block;
    height: 22px;
    width: 22px;
    margin-right: 5px;
    font-size: 14px;
    font-weight: 700;
}
span.status.active {
    background: #93996D1A;
    color: #52553E;
}

span.tbl-th {
    color: #1A1A1A;
    font-size: 14px;
    font-weight: 800;
    margin-left: 10px;
}

















.scheduler-container {
    width: 100%;
    max-width: 1300px;
    background: #ffffff;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    border: 1px solid #e2e2e2;
    overflow: hidden;
}

.scheduler-table {
    width: 100%;
    border-collapse: collapse;
   
}

.scheduler-container th {
    background-color: #ffffff;
    color: #2b2b2b;
    font-weight: 500;
    font-size: 14px;
    padding: 14px 12px;
    text-align: left;
    border-bottom: 1px solid #e2e2e2;
    border-right: 1px solid #f0f0f0;
}

.scheduler-container th.time-col {
    width: 85px;
}

.scheduler-container th:last-child, td:last-child {
    border-right: none;
}


table.scheduler-table td {
    height: 22px;
    
    border-right: 1px solid #f0f0f0;
    vertical-align: top;
    position: relative; 
    padding: 0;
    top: -10px;
}

.scheduler-container .time-label {
    font-size: 11px;
    color: #929292;
    text-align: right;
    padding-right: 10px;
    vertical-align: middle;
    background-color: #ffffff;
    border-right: 1px solid #e2e2e2;
}

.timeline-row {
    position: relative;
}

.timeline-row::after {
    content: '';
    position: absolute;
    left: 85px;
    top: 0;
    width: calc(100% - 85px);
    height: 2px;
    background-color: #646e54;
    z-index: 10;
    pointer-events: none;
}

.current-time-badge {
    background-color: #646e54 !important;
    color: #ffffff !important;
    font-weight: 600;
    border-radius: 12px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: 0;
    z-index: 15;
}

.scheduler-container .card {
    position: absolute;
    top: 20px;
    left: 4px;
    width: calc(100% - 8px);
    height: 80px; 
    border-radius: 6px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 11px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.06);
    z-index: 5;
}

.scheduler-container .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 10px;
    font-weight: 600;
}

.card-header .arrow { font-size: 12px; color: #777; }
.card-body { margin: 4px 0; color: #444; }
.card-footer { display: flex; gap: 4px; }


.scheduler-container .badge {
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 9px;
    font-weight: 500;
    display: flex;
    align-items: center;
}
.badge-light { background-color: rgba(255, 255, 255, 0.7); color: #444; }
.badge-green { background-color: #646e54; color: white; }
.badge-purple { background-color: #553a49; color: white; }


.card-grey { background-color: #e3e3e1; border-left: 4px solid #adadab; }
.card-green-light { background-color: #e5e8e0; border-left: 4px solid #a2ab93; }
.card-pink { background-color: #f6dbda; border-left: 4px solid #daa3a1; }
.card-orange { background-color: #fbe6d4; border-left: 4px solid #e3b996; }



.scheduler-container td {
    height: 32px; 
    border-bottom: none; 
    border-right: 1px solid #f0f0f0;
    vertical-align: top;
    position: relative;
    padding: 0;
}


.scheduler-container tr:nth-child(4n) {
    position: relative;
}

.scheduler-container tr:nth-child(4n) td::before {
    content: '';
    position: absolute;
    top: 7px; 
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #e1e0dc; 
    z-index: 1;
    pointer-events: none;
}


.scheduler-container .time-label {
    font-size: 11px;
    color: #929292;
    text-align: right;
    padding-right: 10px;
    vertical-align: middle;
    background-color: #ffffff;
    border-right: 1px solid #e2e2e2;
}


.scheduler-container tr.timeline-row td::before {
    display: none;
}
.scheduler-container .card-header {
    padding: 0;
    border: none;
}
.scheduler-container .card-body {
    padding: 0;
}
.scheduler-container .card-footer {
    padding: 0;
     border: none;
}
span.cricle {
    height: 5px;
    width: 5px;
    display: inline-block;
    background: #fff;
    border-radius: 50%;
    margin-right: 5px;
}
.scheduler-container tr:nth-child(4n) td:first-child::before {
    content: none; 
}
p.not-generate-text {
    margin: 0;
    padding: 3px 15px;
    background: #74505C33;
    border-radius: 40px;
    font-size: 14px;
    color: #4C2834;
    font-weight: 600;
    display: flex;
    align-items: center;
}
span.crile-dot-icon {
    height: 6px;
    margin-right: 6px;
    border-radius: 50%;
    width: 6px;
    align-items: center;
    display: inline-block;
    background: linear-gradient(180deg, #74505C 0%, #4C2834 100%);
}
.ps-part4-section-block.width {
    width: 100%;
    max-width: 100%;
}


/* Styling the upload zone (Label) */
.ps-part2-upload-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  border: 2px solid #00000040;
  border-radius: 8px;
  cursor: pointer; 
  transition: all 0.2s ease;
  outline: none;
}


#ps-part2-file-input {
  display: none;
}
a.dbt4-cta-add-patient.contact {
    width: 172px;
}
.ps-part2-icon-circle.ps-part2-bg-maroon img {
    width: 16px;
    height: 16px;
}


/* Container Layout */
.doc-pay-dashboard-wrapper {
  display: flex;
  gap: 30px;
}

.doc-pay-dashboard-col-left, 
.doc-pay-dashboard-col-right {
  flex: 1;
  min-width: 300px;
      display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
    padding: 20px;
    border-radius: 20px;
    background: #fff;
}

.doc-pay-card-container {
  background: #ffffff;
  border-radius: 8px;
}

/* ================= LEFT COLUMN (DOCTOR PROFILE) CSS ================= */
.doc-pay-profile-header {
  display: flex;
  align-items: flex-start;
  position: relative;
  margin-bottom: 25px;
}

.doc-pay-avatar {
  width: 75px;
  height: 75px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 15px;
}

.doc-pay-header-info {
  flex-grow: 1;
}

.doc-pay-name-row {
  display: flex;
  align-items: center;
  gap: 5px;
}

.doc-pay-name {
      font-size: 20px;
    font-weight: 700;
    margin: 0;
    color: #1A1A1A;
}

.doc-pay-arrow-icon {
  font-size: 14px;
  color: #666666;
  cursor: pointer;
}

.doc-pay-subheading {
  font-size: 13px;
  color: #666666;
  margin: 4px 0 8px 0;
}

.doc-pay-badge-verified {
  background-color: #f3f5f1;
  color: #5c6851;
  font-size: 12px;
  padding: 4px 12px;
  border-radius: 12px;
  font-weight: 500;
  display: inline-block;
}

.doc-pay-rating {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 16px;
  font-weight: 600;
  color: #111111;
}

.doc-pay-star {
  color: #ffb800;
  font-size: 18px;
}

/* Gray stats panel */
.doc-pay-stats-box {
  background-color: #93996D1A;
  border-radius: 16px;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.doc-pay-stats-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}

.doc-pay-stats-label {
  color: #686868;
}

.doc-pay-stats-value {
  font-weight: 400;
  color: #14171D;
  font-size: 16px;
}

/* ================= RIGHT COLUMN (PAYMENT DETAILS) CSS ================= */
.doc-pay-payment-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eeeeee;
  margin-bottom: 15px;
}

.doc-pay-payment-icon-circle {
  width: 46px;
  height: 46px;
  background: linear-gradient(180deg, #74505C 0%, #4C2834 100%);
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.doc-pay-payment-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  color: #111111;
}

.doc-pay-table-wrapper {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.doc-pay-table-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: #222222;
}

/* Special alignment for multi-line rows like Service Added */
.doc-pay-table-row.doc-pay-multiline {
  align-items: flex-start;
}

.doc-pay-table-label-group,
.doc-pay-table-value-group {
  display: flex;
  flex-direction: column;
}

.doc-pay-table-value-group {
  align-items: flex-end;
}

.doc-pay-table-label {
  color: #555555;
}

.doc-pay-table-value {
  font-weight: 500;
}

.doc-pay-light-text {
  color: #666666;
  font-weight: normal;
}

.doc-pay-sub-label {
  font-size: 12px;
  color: #777777;
  margin-top: 2px;
}

.doc-pay-text-muted {
  color: #7d8478;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .doc-pay-dashboard-wrapper {
    flex-direction: column;
    gap: 40px;
  }
}

span.status.cash {
    background: #F4F5F07D;
    color: #1A1A1AB2;
}
span.status.payment {
    background: #F4F5F07D;
    color: #1A1A1AB2;
}
.dbt-panel-header.dash {
    display: flex;
    justify-content: space-between;
}




.dash-right-text ul {
  list-style: none; 
  padding: 0;
  margin: 0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.dash-right-text li {
  position: relative;
  padding-left: 25px;
}


.dash-right-text li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px; 
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

/* Har ek list item ka alag color */
.dash-right-text li:nth-child(1)::before {
  background-color: #6a4a55;
}

.dash-right-text li:nth-child(2)::before {
  background-color: #70754d; 
}

.dash-right-text li:nth-child(3)::before {
  background-color: #e5dbdb;
}

.dash-right-text li:nth-child(4)::before {
  background-color: #e2e5d9; 
}

/* Text Styling */
.dash-right-text strong {
  display: block;
  font-size: 16px;
  color: #333333;
  font-weight: 600;
  margin-bottom: 4px;
}

.dash-right-text span {
  font-size: 15px;
  color: #555555;
}
.left-right-wrp-dash {
    display: flex;
    justify-content: space-around;
}
span.status.completed {
    color: #52553E;
    background: #93996D1A;
}
span.status.pending {
    color: #4C2834;
    background: #74505C33;
}
span.status.failed {
    background: #C9010114;
    color: #C90101;
}

.dbt-notification-list {
    list-style: none;
    padding: 0;
    margin: 0;
}


.dbt-notification-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0; 
    border-bottom: 1px solid #f0f0f0; 
}

/* Text styling */
.dbt-notification-text {
    font-size: 16px;
    color: #2b2b2b; 
    font-weight: 500;
}


.dbt-notification-badge {
    background-color: #f4f5f0; 
    color: #5d6b4f; 
    font-size: 14px;
    font-weight: 600;
    padding: 6px 16px;
    border-radius: 20px; 
    min-width: 20px;
    text-align: center;
}


.dbt-notification-item:last-child {
    border-bottom: none;
}
.dbt-main-wrapper-bottom {
    display: inline-block;
    vertical-align: top;
    width: 100%;
    font-size: 14px;
    background: #fff;
    padding: 20px;
    border-radius: 15px;
    overflow-x: auto;
}


.onyba-input-field-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}


.onyba-input-control {
    width: 100%;
    padding-right: 45px; 
}


.onyba-password-toggle {
    position: absolute;
    right: 15px; 
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.onyba-password-toggle img {
    width: 20px; 
    height: auto;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.onyba-password-toggle:hover img {
    opacity: 1;
}
.ps-part3-textarea-container textarea {
    width: 100%;
    min-height: 210px;
    background: transparent;
    border: none;
    resize: none;
    outline: none;
    font-family: inherit;
    font-size: 14px;
    color: #1a1a1a;
    line-height: 1.6;
    padding: 0;
}


.table-dropdown-container {
    position: relative;
    display: inline-block;
}

.table-dropdown-menu {
  display: none;
    position: absolute; 
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
    min-width: 200px;
}

/* Jab active ho */
.table-dropdown-menu.show {
    display: block;
}

.table-dropdown-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
    padding: 10px;
}

.table-dropdown-menu ul li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    color: #333;
    text-decoration: none;
}

.table-dropdown-menu ul li.active, 
.table-dropdown-menu ul li:hover {
    background-color: #edf0ec;
    border-radius: 15px;
}
span.view-filter a {
    color: #14171d;
    font-weight: 400;
    padding-left: 24px;
}
span.view-filter a img {
    margin-right: 7px;
}
p.payment-amount {
    font-size: 14px;
    font-weight: 700;
    color: #1A1A1A;
}
span.status.pending-the {
    color: #52553E;
    background: #93996D1A;
}
span.status.rejected-the {
    color: #4C2834;
    background: #74505C33;
}
span.status.review-the {
    color: #4C2834;
    background: #F4F5F0;
}
.check-cross-btn {
    display: flex;
    gap: 10px;
    align-items: center;
}
td.dbt4-pad-right.dbt4-right-text.the {
    text-align: left;
}

.earning-box{
    background:#ffffff;
    border-radius:24px;
    padding:24px;
    min-height:160px;
    box-shadow:6px 6px 54px 0px #0000000d;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    gap:18px;
    transition:transform .2s ease, box-shadow .2s ease;
}
.earning-box:hover{
    transform:translateY(-2px);
    box-shadow:8px 8px 60px 0px #00000014;
}

.earning-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
}

.earning-label{
    font-size:14px;
    color:#6b7280;
    margin:0 0 8px 0;
    font-weight:500;
}
.earning-label .muted{ color:#9ca3af; font-weight:400; }

.earning-value{
    font-size:34px;
    font-weight:700;
    color:#4a6b3a;      /* olive/green like the mock */
    margin:0;
    letter-spacing:-.5px;
}

.earning-icon{
    width:44px; height:44px;
    border-radius:50%;
    background:#f3f4f6;
    color:#4a6b3a;
    display:inline-flex;
    align-items:center; justify-content:center;
    font-size:18px;
    flex-shrink:0;
}
.earning-icon.outline{
    background:#fff;
    border:1.5px solid #e5e7eb;
}
.earning-icon.sm{ width:34px; height:34px; font-size:15px; }

.earning-icon-group{
    display:flex; align-items:center; gap:-6px; position:relative;
}
.earning-icon-group .avatar-badge{
    width:34px; height:34px; border-radius:50%;
    background:#0f3d2e; color:#fff;
    display:inline-flex; align-items:center; justify-content:center;
    font-weight:600; font-size:14px;
    border:2px solid #fff;
    margin-right:-8px;
    z-index:2;
}

.earning-trend{
    margin:0;
    font-size:13px;
    color:#6b7280;
    display:flex; align-items:center; gap:6px;
}
.earning-trend.up i{ color:#16a34a; }

.earning-link{
    color:#4a6b3a;
    font-size:14px;
    font-weight:500;
    text-decoration:none;
    display:inline-flex; align-items:center; gap:6px;
}
.earning-link:hover{ color:#2f4a24; text-decoration:underline; }

.earning-trend i {
    font-size: 12px;      /* or 0.75em to scale with text */
    line-height: 1;
    color: #16a34a;
}

.gl-tabs-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background-color: #f3f4f6; /* or your Figma background */
    border-radius: 9999px;
    padding: 4px;
    width:300px;
}

.gl-filter-btn {
    border: none;
    background: transparent;
    color: #6b7280;
    font-size: 14px;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 143px;
}

.gl-filter-btn.active1 {
    background-color: #ffffff;
    color: #1a1a1a;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    width: 143px;
}

.gl-tabs-pill .gl-filter-btn:not(.active):hover {
    color: #1a1a1a;
}

.dbt-data-table.dbt4-full-patients-table .dbt-table-row td {
  padding: 16px 20px;
}

.dbt-data-table.dbt4-full-patients-table .dbt3-th-cell {
  padding: 14px 20px;
}



.dbt4-mutua-badge {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}
.dbt4-mutua-insurance { background: #E9F3FB; color: #2F80B0; }
.dbt4-mutua-organization { background: #E9F3FB; color: #2F80B0; }

.dbt4-badge-paid { background: #EDEDED; color: #6B6B6B; }
.dbt4-badge-pending { background: #FDF1DC; color: #C98A1E; }

.dbt4-mark-paid-btn {
    background: #2B2B2B;
    color: #fff;
    border: none;
    border-radius: 20px;
    padding: 6px 16px;
    font-size: 12px;
    cursor: pointer;
}
.dbt4-mark-paid-btn[disabled] { opacity: 0.5; cursor: not-allowed; }

.dbt4-modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.4);
    display: flex; align-items: center; justify-content: center;
    z-index: 1050;
}
.dbt4-modal-box {
    background: #fff;
    border-radius: 16px;
    padding: 32px;
    width: 360px;
    text-align: center;
    position: relative;
}
.dbt4-modal-close {
    position: absolute; top: 16px; right: 16px;
    background: none; border: none; cursor: pointer;
}
.dbt4-modal-icon {
    width: 56px; height: 56px;
    background: #F3EAEA;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 16px;
}
.dbt4-modal-title { font-size: 18px; font-weight: 600; margin-bottom: 8px; }
.dbt4-modal-subtext { font-size: 13px; color: #6B6B6B; margin-bottom: 20px; }
.dbt4-modal-select {
    width: 100%;
    height: 43px;
    padding: 10px 20px;
    border: none;
    border-radius: 30px;
    background-color: #EDEBE4;
    color: #6B6B6B;
    font-size: 14px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B6B6B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 16px;
    cursor: pointer;
    margin-bottom: 20px;
}

.dbt4-modal-select:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(107, 68, 78, 0.25);
}

.dbt4-modal-select option {
    color: #333;
    background: #fff;
}
.dbt4-modal-actions { display: flex; gap: 12px; }
.dbt4-modal-actions button { flex: 1; padding: 10px; border-radius: 46px; border: none; cursor: pointer; }
.dbt4-modal-no { background: #F0F0F0; color: #333; }

.dbt4-modal-yes{
  width: 204.5;
  height: 55;
  border-radius: 45px;
  gap: 10px;
  opacity: 1;
  border-bottom-width: 2.5px;
  padding-top: 14px;
  padding-right: 63px;
  padding-bottom: 14px;
  padding-left: 63px;
}


/* service management */

/* ================= SERVICE MANAGEMENT PAGE ================= */
.svc-mgmt-wrp {
  display: flex;
  flex-direction: column;
  /* gap: 24px; */
}

.svc-mgmt-search-row {
  background: #ffffff;
  border-radius: 20px;
  padding: 16px 20px;
}

.svc-mgmt-search-section hr {
  border: none;
  border-top: 1px solid #ededed;
  margin: 20px 0 0 0;
}

.svc-mgmt-section {
  background: #ffffff;
  padding: 24px;
  position: relative; /* needed so Owl nav arrows can be absolutely positioned inside */
  margin-top: 5px;
}

.svc-mgmt-search-section {
  display: flex;
  flex-direction: column;
  margin-bottom:1px;
  background: #ffffff;  
  border-radius: 20px 20px 0 0;
  padding: 24px;
  position: relative; /* needed so Owl nav arrows can be absolutely positioned inside */
}

.svc-mgmt-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  margin-top: 35px;
}

.svc-mgmt-section-title {
  font-size: 18px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0;
}

.svc-mgmt-add-btn {
  background: linear-gradient(180deg, #74505c 0%, #4c2834 100%);
  color: #ffffff;
  border: none;
  border-radius: 30px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: opacity 0.2s;
}
.svc-mgmt-add-btn:hover { opacity: 0.9; }

.svc-mgmt-add-icon {
  font-size: 16px;
  line-height: 1;
}

/* ================= SESSION TYPES CAROUSEL ================= */
.svc-mgmt-cards-row {
  display: flex;
  gap: 16px;
  padding-bottom: 4px;
}

/* When Owl Carousel initializes it wraps everything in .owl-carousel;
   keep a fallback so it still looks fine before JS runs */
.svc-mgmt-cards-row.owl-carousel {
    position: relative;
  padding: 0 7px;

}

.svc-mgmt-cards-row .item {
  padding: 4px 8px;
  box-sizing: border-box;
}

.svc-mgmt-cards-row .owl-stage-outer {
  overflow: hidden;
}

/* Owl nav arrows: floating left/right circular buttons */
.svc-mgmt-cards-row .owl-nav {
  position: absolute;
  top: 50%;
  left: 26px;
  right: 36px;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  margin: 0;
  z-index: 5;
}

.svc-mgmt-cards-row .owl-nav .owl-prev,
.svc-mgmt-cards-row .owl-nav .owl-next {
  pointer-events: auto;
  width: 30px;
  height: 30px;
  background: linear-gradient(180deg, #74505c 0%, #4c2834 100%) !important;
  border: none !important;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: opacity 0.2s;
}

/* Pull each arrow half-outside the card row so it "sits inside" the edge like the Figma */
.svc-mgmt-cards-row .owl-nav .owl-prev {
  transform: translateX(-50%);
   margin-left: -16px;
}

.svc-mgmt-cards-row .owl-nav .owl-next {
  transform: translateX(50%);
   margin-right: -16px;
}

.svc-mgmt-cards-row .owl-nav .disabled {
  opacity:0.9;
  cursor: not-allowed;
}

.svc-mgmt-cards-row .owl-nav img {
  width: 14px;
  height: 14px;
  filter: brightness(0) invert(1);
}


.svc-mgmt-cards-row .owl-dots {
  margin-top: 12px;
}

.svc-mgmt-cards-row .owl-dot span {
  background: #e5e7eb !important;
}

.svc-mgmt-cards-row .owl-dot.active span {
  background: #74505c !important;
}

/* ================= SERVICES GRID ================= */
.svc-mgmt-services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

@media (max-width: 1100px) {
  .svc-mgmt-services-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .svc-mgmt-services-grid { grid-template-columns: 1fr; }
}

/* ================= SHARED CARD STYLE ================= */
.svc-mgmt-card {
  background: #F4F5F0;
  border: 1px solid #eceae6;
  border-radius: 16px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 130px;
  box-sizing: border-box;
  overflow: hidden;
  width: 100%;
}

.svc-mgmt-cards-row .svc-mgmt-card {
  width: 220px;
}

.svc-mgmt-card-body {
  margin-bottom: 16px;
}

.svc-mgmt-card-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 700;
}


.svc-mgmt-card-price {
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.svc-mgmt-duration-badge {
  background: linear-gradient(180deg, #93996d 0%, #52553e 100%);
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 20px;
  display: inline-block;
}

.svc-mgmt-card-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.svc-mgmt-icon-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s;
}
.svc-mgmt-icon-btn:hover { opacity: 0.85; }

.svc-mgmt-icon-btn img {
 width: 16px;
  height: 16px;
  display: block;
}

/* Force the edit icon white so it's visible against the maroon circle */
.svc-mgmt-icon-edit img {
  filter: brightness(0) invert(1);
}

.svc-mgmt-icon-edit {
  background: linear-gradient(180deg, #74505c 0%, #4c2834 100%);
}

.svc-mgmt-icon-delete {
  background: #F3EAEA;
  border : 1px solid #5F5F5F;
}

.owl-stage{
  display: flex;
}

.svmt-number-style-block{
  font-family: 'Red Hat Display', sans-serif;
  font-weight: 700;
  font-size: 21px;
  line-height: 100%;
  letter-spacing: 1px;
  vertical-align: middle;
  display: inline-block;
  background: linear-gradient(180deg, #93996D 0%, #52553E 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.svmt-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1050;
  overflow: hidden; /* stops body from scrolling behind the modal */
}

.svmt-modal-overlay.show {
  display: flex;
}

.svmt-modal-box {
  background: #ffffff;
  border-radius: 32px;
  padding: 40px;
  width: 100%;
  max-width: 460px;
  max-height: 90vh;   /* was missing — modal now respects viewport height */
  overflow-y: auto;   /* scroll happens inside the box, not on the page */
  position: relative;
  box-sizing: border-box;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
}

/* Themed scrollbar to match the Service modal */
.svmt-modal-box::-webkit-scrollbar {
  width: 6px;
}
.svmt-modal-box::-webkit-scrollbar-track {
  background: #f4f5f0;
  border-radius: 10px;
}
.svmt-modal-box::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #74505c 0%, #4c2834 100%);
  border-radius: 10px;
}
.svmt-modal-box::-webkit-scrollbar-thumb:hover {
  background: #4c2834;
}
/* .svmt-modal-box {
  scrollbar-width: thin;
  scrollbar-color: #74505c #f4f5f0;
} */

body.svmt-modal-open {
  overflow: hidden;
}
.svmt-service-modal-box {
  background: #ffffff;
  border-radius: 32px;
  padding: 24px;
  width: 100%;
  max-width: 488px;
  max-height: 90vh;      /* slightly less than 96vh so it never touches viewport edges */
  overflow-y: auto;      /* scroll happens HERE, inside the box */
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
  position: relative;
  box-sizing: border-box;
}

body.svmt-modal-open {
  overflow: hidden;
}

.svmt-modal-close {
    position: absolute;
    top: 11px;
    right: 12px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid #dcdcdc;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
}
.svmt-modal-close:hover {
  background-color: #f5f5f5;
}

.svmt-modal-title {
  font-family: 'Red Hat Display', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #1a1a1a;
  text-align: center;
  margin: 18px 0 28px 0;
}

.svmt-form-group {
  margin-bottom: 20px;
}

.svmt-label {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 10px;
}

.svmt-input {
  width: 100%;
  height: 52px;
  background-color: #f4f5f07d;
  border: 1px solid transparent;
  border-radius: 16px;
  padding: 0 20px;
  font-size: 14px;
  color: #1a1a1a;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.2s, background-color 0.2s;
}

.svmt-input::placeholder {
  color: #9e9e9e;
}

.svmt-input:focus {
  border-color: #74505c;
  background-color: #ffffff;
}

/* Remove native number spinner arrows since we render a custom icon */
.svmt-input[type="number"]::-webkit-outer-spin-button,
.svmt-input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.svmt-input[type="number"] {
  -moz-appearance: textfield;
}

.svmt-input-icon-wrap {
  position: relative;
}

.svmt-input-icon-wrap .svmt-input {
  padding-right: 44px;
}

.svmt-input-icon {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: #93996d;
  font-size: 16px;
  font-weight: 600;
  pointer-events: none;
}

.svmt-spinner-icon {
  display: flex;
  align-items: center;
}

.svmt-modal-actions {
  display: flex;
  gap: 16px;
  margin-top: 8px;
}

.svmt-btn-cancel {
  flex: 1;
  background: transparent;
  border: 1px solid #dcdcdc;
  border-radius: 50px;
  padding: 16px 0;
  font-size: 15px;
  font-weight: 600;
  color: #1a1a1a;
  cursor: pointer;
  transition: background-color 0.2s;
}
.svmt-btn-cancel:hover {
  background-color: #f5f5f5;
}

.svmt-btn-save {
  flex: 1;
  background: linear-gradient(180deg, #74505c 0%, #4c2834 100%);
  border: none;
  border-radius: 50px;
  padding: 16px 0;
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
  cursor: pointer;
  transition: opacity 0.2s;
}
.svmt-btn-save:hover {
  opacity: 0.9;
}


.svmt-checkbox-row {
  margin-bottom: 20px;
}

.svmt-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  color: #1a1a1a;
  cursor: pointer;
}

.svmt-checkbox-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.svmt-checkbox-box {
  width: 20px;
  height: 20px;
  border: 2px solid #74505c;
  border-radius: 5px;
  background-color: #ffffff;
  display: inline-block;
  position: relative;
  flex-shrink: 0;
  transition: background-color 0.2s;
}

.svmt-checkbox-input:checked ~ .svmt-checkbox-box {
  background-color: #74505c;
}

.svmt-checkbox-box::after {
  content: "";
  position: absolute;
  display: none;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.svmt-checkbox-input:checked ~ .svmt-checkbox-box::after {
  display: block;
}

.svmt-service-modal-box {
  background: #ffffff;
  border-radius: 32px;
  padding: 24px;
  width: 100%;
  max-width: 488px;
  position: relative;
  max-height: 96vh;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
  overflow-y: auto;
}

/* Themed scrollbar — WebKit (Chrome/Edge/Safari) */
.svmt-service-modal-box::-webkit-scrollbar {
  width: 6px;
}
.svmt-service-modal-box::-webkit-scrollbar-track {
  background: #f4f5f0;
  border-radius: 10px;
}
.svmt-service-modal-box::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #74505c 0%, #4c2834 100%);
  border-radius: 10px;
}
.svmt-service-modal-box::-webkit-scrollbar-thumb:hover {
  background: #4c2834;
}

/* Firefox */
.svmt-service-modal-box {
  scrollbar-width: thin;
  scrollbar-color: #74505c #f4f5f0;
}

.svc-mgmt-divider{
  border: none;
  border-top: 1px solid #ececec;
  margin: 20px 0 24px 0;
  width: 100%;
}


.pagination-service-management{
  margin-top:4px;
  border-radius:0 0 20px 20px;
}


.svmt-delete-modal-box {
  background: #ffffff;
  border-radius: 32px;
  padding: 40px 32px;
  width: 100%;
  max-width: 420px;
  position: relative;
  text-align: center;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
  box-sizing: border-box;
}

.svmt-delete-icon-circle {
  width: 64px;
  height: 64px;
  background: linear-gradient(180deg, #93996d 0%, #52553e 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px auto;
}

.svmt-delete-title {
  font-family: 'Red Hat Display', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 12px 0;
}

.svmt-delete-text {
  font-size: 14px;
  color: #8c8c8c;
  line-height: 1.5;
  margin: 0 0 28px 0;
}

.svmt-delete-actions {
  display: flex;
  gap: 16px;
}

.svmt-btn-delete {
  flex: 1;
  background: linear-gradient(180deg, #74505c 0%, #4c2834 100%);
  border: none;
  border-radius: 50px;
  padding: 16px 0;
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
  cursor: pointer;
  transition: opacity 0.2s;
}
.svmt-btn-delete:hover {
  opacity: 0.9;
}

.svmt-btn-cancel-outline {
  flex: 1;
  background: transparent;
  border: 1px solid #dcdcdc;
  border-radius: 50px;
  padding: 16px 0;
  font-size: 15px;
  font-weight: 600;
  color: #1a1a1a;
  cursor: pointer;
  transition: background-color 0.2s;
}
.svmt-btn-cancel-outline:hover {
  background-color: #f5f5f5;
}


/* ================= INVOICES PAGE ================= */
.inv-mgmt-wrp {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.inv-mgmt-panel {
  background: #ffffff;
  border-radius: 24px;
  padding: 24px;
}

.inv-mgmt-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 16px;
}

.inv-mgmt-toolbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.inv-mgmt-new-btn {
  background: linear-gradient(180deg, #74505c 0%, #4c2834 100%);
  color: #ffffff;
  border: none;
  border-radius: 30px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  transition: opacity 0.2s;
}
.inv-mgmt-new-btn:hover { opacity: 0.9; }

.inv-mgmt-new-icon {
  font-size: 16px;
  line-height: 1;
}

/* Table scroll wrapper — shows the olive horizontal scrollbar under header */
.inv-mgmt-table-scroll {
  width: 100%;
  overflow-x: auto;
  padding-bottom: 8px;
}

.inv-mgmt-table-scroll::-webkit-scrollbar {
  height: 8px;
}
.inv-mgmt-table-scroll::-webkit-scrollbar-track {
  background: #f1eeef;
  border-radius: 10px;
}
.inv-mgmt-table-scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #93996d 0%, #52553e 100%);
  border-radius: 10px;
}
.inv-mgmt-table-scroll {
  scrollbar-width: thin;
  scrollbar-color: #93996d #f1eeef;
}

.inv-mgmt-table {
  width: max-content;
  min-width: 100%;
}

/* Type badges (Client / Patient) */
.inv-mgmt-type-badge {
  display: inline-block;
  padding: 6px 18px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
}

.inv-mgmt-type-client {
  background-color: #dcf0fa;
  color: #0369a1;
}

.inv-mgmt-type-patient {
  background-color: #dcf0fa;
  color: #0369a1;
}

.svmt-invoice-modal-box {
  background: #ffffff;
  border-radius: 32px;
  padding: 32px;
  width: 100%;
  max-width: 604px;
  max-height: 92vh;
  overflow-y: auto;
  position: relative;
  box-sizing: border-box;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
}

.svmt-invoice-modal-box::-webkit-scrollbar { width: 6px; }
.svmt-invoice-modal-box::-webkit-scrollbar-track { background: #f4f5f0; border-radius: 10px; }
.svmt-invoice-modal-box::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #74505c 0%, #4c2834 100%);
  border-radius: 10px;
}
.svmt-invoice-modal-box { scrollbar-width: thin; scrollbar-color: #74505c #f4f5f0; }

.inv-modal-row {
  display: flex;
  gap: 16px;
  margin-bottom: 4px;
}
.inv-modal-half { flex: 1; min-width: 0; }

.inv-modal-required { color: #74505c; }

.inv-modal-select {
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2393996d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 14px;
  padding-right: 40px;
}

.inv-modal-dropdown-group {
  position: relative;
}

.inv-modal-dropdown-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  text-align: left;
  background-color: #f4f5f07d;
  border: 1px solid transparent;
}

.inv-modal-placeholder { color: #9e9e9e; }

.inv-modal-chevron { flex-shrink: 0; transition: transform 0.2s; }
.inv-modal-panel.open + .inv-modal-dropdown-trigger .inv-modal-chevron,
.inv-modal-dropdown-trigger.active .inv-modal-chevron { transform: rotate(180deg); }

/* Dropdown panel */
.inv-modal-panel {
  display: none;
  margin-top: 8px;
  padding: 16px;
  background: #ffffff;
  border: 1px solid #eceae6;
  border-radius: 20px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}
.inv-modal-panel.open { display: block; }

.inv-modal-panel-search {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f4f5f07d;
  border-radius: 20px;
  padding: 10px 16px;
  margin-bottom: 12px;
}
.inv-modal-search-input {
  border: none;
  outline: none;
  background: transparent;
  font-size: 14px;
  width: 100%;
}


.inv-modal-dropdown-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  text-align: left;
  background-color: #f4f5f07d;
  border: 1px solid transparent;
}

.inv-modal-chevron {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

/* Flip chevron up when this trigger's panel is open */
.inv-modal-dropdown-trigger.active .inv-modal-chevron {
  transform: rotate(180deg);
}

/* Scrollable list with visible themed scrollbar thumb */
.inv-modal-radio-list {
  position: relative;
  display: flex;
  flex-direction: column;
  max-height: 180px;
  overflow-y: auto;
  margin-bottom: 12px;
  padding-right: 14px; /* room for the thumb so text doesn't sit under it */
}

.inv-modal-radio-list::-webkit-scrollbar {
  width: 4px;
}
.inv-modal-radio-list::-webkit-scrollbar-track {
  background: transparent;
}
.inv-modal-radio-list::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #93996d 0%, #52553e 100%);
  border-radius: 10px;
}
.inv-modal-radio-list {
  scrollbar-width: thin;
  scrollbar-color: #93996d transparent;
}

.inv-modal-radio-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 4px;
  cursor: pointer;
  position: relative;
}

.inv-modal-radio-text {
  font-size: 15px;
  font-weight: 500;
  color: #1a1a1a;
}

.inv-modal-radio-date {
  font-size: 14px;
  color: #8c8c8c;
  margin-left: auto;
  margin-right: 14px;
}

.inv-modal-radio-row input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* Plain radio style (Patients list) */
.inv-modal-radio-mark {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #74505c;
  flex-shrink: 0;
  position: relative;
  background: #ffffff;
}
.inv-modal-radio-row input:checked ~ .inv-modal-radio-mark {
  background: #ffffff;
  border-color: #74505c;
}
.inv-modal-radio-row input:checked ~ .inv-modal-radio-mark::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #74505c;
}

/* Filled checkmark style (Appointment list — matches your screenshot's selected state) */
.inv-modal-check-mark {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #74505c;
  flex-shrink: 0;
  position: relative;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.inv-modal-radio-row input:checked ~ .inv-modal-check-mark {
  background: #74505c;
  border-color: #74505c;
}
.inv-modal-radio-row input:checked ~ .inv-modal-check-mark::after {
  content: "";
  width: 5px;
  height: 9px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-1px, -1px);
}

.inv-modal-panel-actions {
  display: flex;
  gap: 12px;
}
.inv-modal-btn-clear,
.inv-modal-btn-apply {
  flex: 1;
  padding: 10px 0;
  font-size: 14px;
}

.inv-modal-textarea {
  height: 90px;
  padding-top: 14px;
  resize: none;
}

.inv-modal-submit-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}

.inv-modal-submit-btn {
  width: auto;
  padding: 14px 32px;
}