@charset "UTF-8";.custom-loading {
  position: fixed;
  top: 70px;
  left: 0;
  width: 100%;
  height: 90%;
  height: calc(100% - 70px);
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
  z-index: 9999999999;
}

.custom-loading-full {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.custom-loading-spinner {
  width: 60px;
  height: 60px;
  position: relative;
  display: inline-block;
  animation: yogaRotate 2s ease-in-out infinite;
  box-sizing: border-box;
}

.custom-loading-spinner::before {
  content: '🧘';
  font-size: 50px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  line-height: 1;
  filter: drop-shadow(0 0 8px rgba(204, 85, 0, 0.4));
}

.custom-loading-spinner.spinner-small {
  width: 40px;
  height: 40px;
}

.custom-loading-spinner.spinner-small::before {
  font-size: 32px;
}

.custom-loading-spinner.spinner-large {
  width: 80px;
  height: 80px;
}

.custom-loading-spinner.spinner-large::before {
  font-size: 70px;
  filter: drop-shadow(0 0 12px rgba(204, 85, 0, 0.5));
}

@keyframes yogaRotate {
  0%,
  100% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(180deg);
  }
}
.spinner-reusable {
  /* Safari */
  animation: spinner-reusable 2s linear infinite;
}

.spinner-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  /* border: 1px solid; */
  height: 15px;
  animation: dots 1s linear infinite;
}

.spinner-dots-circle {
  margin: 0 5px 0 5px;
  width: 10px;
  height: 10px;
  border-radius: 10px;
  background: #576ce4;
}

.custom-spinner-full-page {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgb(0, 0, 0, 0.5);
  z-index: 99999;
}

.big-dot {
  width: 15px;
  height: 15px;
  border-radius: 15px;
}

.medium-dot {
  width: 12px;
  height: 12px;
  border-radius: 12px;
}

#dot1 {
  animation: dot1 1s linear infinite;
}

#dot2 {
  animation: dot2 1s linear infinite;
}

#dot3 {
  animation: dot3 1s infinite;
}

@keyframes dot1 {
  0% {
    width: 15px;
    height: 15px;
    border-radius: 15px;
  }

  50% {
    width: 10px;
    height: 10px;
    border-radius: 10px;
  }

  100% {
    width: 5px;
    height: 5px;
    border-radius: 5px;
  }
}

@keyframes dot2 {
  0% {
    width: 5px;
    height: 5px;
    border-radius: 5px;
  }

  50% {
    width: 15px;
    height: 15px;
    border-radius: 15px;
  }

  100% {
    width: 10px;
    height: 10px;
    border-radius: 10px;
  }
}

@keyframes dot3 {
  0% {
    width: 10px;
    height: 10px;
    border-radius: 10px;
  }

  50% {
    width: 5px;
    height: 5px;
    border-radius: 5px;
  }

  100% {
    width: 15px;
    height: 15px;
    border-radius: 15px;
  }
}

@keyframes spinner-reusable {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* Safari */

@keyframes spinner-reusable {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
.login-container {
  width: 100% !important;
  height: 100vh !important;
  min-height: 100vh !important;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(
    135deg,
    #cc5500 0%,
    #ea580c 25%,
    #fb923c 50%,
    #fdba74 75%,
    #fed7aa 100%
  ) !important;
  background-size: 200% 200% !important;
  animation: gradientShift 8s ease infinite !important;
  color: white;
  padding: 20px;
  box-sizing: border-box;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  z-index: 1;
  overflow: hidden;
}

.login-container::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
  animation: pulse 15s ease-in-out infinite;
  pointer-events: none;
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.5;
  }

  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
}

.login-card {
  width: 100%;
  max-width: 450px;
  background: #ffffff;
  border-radius: 24px;
  padding: 56px 48px;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.15),
    0 0 0 1px rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 2;
  animation: cardSlideIn 0.6s ease-out;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

@keyframes cardSlideIn {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.login-logo {
  margin-bottom: 32px;
  display: flex;
  justify-content: center;
  animation: logoFadeIn 0.8s ease-out 0.2s both;
}

@keyframes logoFadeIn {
  from {
    opacity: 0;
    transform: scale(0.8) translateY(-10px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.login-logo img {
  width: 96px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(204, 85, 0, 0.2));
  transition: transform 0.3s ease;
}

.login-logo:hover img {
  transform: scale(1.05) rotate(5deg);
}

.login-title {
  font-size: 36px;
  font-weight: 700;
  margin: 0 0 12px 0;
  text-align: center;
  color: #1f2937;
  letter-spacing: -0.8px;
  animation: titleFadeIn 0.6s ease-out 0.3s both;
  background: linear-gradient(135deg, #1f2937 0%, #374151 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

@keyframes titleFadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

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

.login-subtitle {
  font-size: 16px;
  margin: 0 0 40px 0;
  text-align: center;
  color: #6b7280;
  font-weight: 400;
  animation: subtitleFadeIn 0.6s ease-out 0.4s both;
}

@keyframes subtitleFadeIn {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }

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

.login-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: formFadeIn 0.6s ease-out 0.5s both;
}

@keyframes formFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

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

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

.input-label {
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  margin: 0;
  letter-spacing: 0.2px;
  transition: color 0.2s ease;
}

.input-group:focus-within .input-label {
  color: #cc5500;
}

.password-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.login-input {
  width: 100%;
  height: 52px;
  padding: 0 18px;
  border-radius: 12px;
  border: 2px solid #e5e7eb;
  outline: none;
  background: #f9fafb;
  color: #111827;
  font-size: 15px;
  box-sizing: border-box;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-weight: 400;
}

.login-input:hover {
  border-color: #d1d5db;
  background: #ffffff;
}

.login-input::placeholder {
  color: #9ca3af;
  font-weight: 400;
}

.login-input:focus {
  border-color: #cc5500;
  background: #ffffff;
  box-shadow:
    0 0 0 4px rgba(204, 85, 0, 0.1),
    0 4px 12px rgba(204, 85, 0, 0.08);
  transform: translateY(-1px);
}

.password-input-wrapper .login-input {
  padding-right: 48px;
}

.password-toggle {
  position: absolute;
  right: 14px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
  transition: all 0.2s ease;
  outline: none;
  border-radius: 8px;
}

.password-toggle:hover {
  color: #cc5500;
  background: rgba(204, 85, 0, 0.08);
  transform: scale(1.1);
}

.password-toggle:focus {
  color: #cc5500;
  outline: 2px solid rgba(204, 85, 0, 0.3);
  outline-offset: 2px;
  background: rgba(204, 85, 0, 0.08);
}

.password-toggle:active {
  transform: scale(0.95);
}

.login-button {
  width: 100%;
  height: 52px;
  margin-top: 12px;
  background: linear-gradient(135deg, #cc5500 0%, #ea580c 100%);
  color: #ffffff;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
  box-shadow:
    0 4px 14px rgba(204, 85, 0, 0.35),
    0 0 0 0 rgba(204, 85, 0, 0.2);
  letter-spacing: 0.3px;
  position: relative;
  overflow: hidden;
}

.login-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.login-button:hover:not(:disabled)::before {
  left: 100%;
}

.login-button:hover:not(:disabled) {
  background: #ffffff;
  color: #000000;
  border: 2px solid #cc5500;
  box-shadow:
    0 6px 20px rgba(204, 85, 0, 0.25),
    0 0 0 2px rgba(204, 85, 0, 0.1);
  transform: translateY(-2px);
}

.login-button:hover:not(:disabled) .button-loading * {
  border-color: #cc5500;
  border-top-color: #cc5500;
}

.login-button:active:not(:disabled) {
  transform: translateY(0);
  box-shadow:
    0 2px 8px rgba(204, 85, 0, 0.3),
    0 0 0 2px rgba(204, 85, 0, 0.1);
}

.login-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: 0 2px 8px rgba(204, 85, 0, 0.2);
}

.button-loading {
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-error {
  color: #dc2626;
  font-size: 14px;
  margin-top: -4px;
  padding: 12px 16px;
  background: #fef2f2;
  border-radius: 10px;
  border-left: 4px solid #ef4444;
  animation: errorShake 0.4s ease;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.1);
}

@keyframes errorShake {
  0%,
  100% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-5px);
  }

  75% {
    transform: translateX(5px);
  }
}

.login-loading {
  width: 100%;
  display: flex;
  justify-content: center;
  position: absolute;
  bottom: -70px;
}

.login-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 40px;
  animation: paginationFadeIn 0.6s ease-out 0.7s both;
}

@keyframes paginationFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

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

.pagination-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #cc5500;
  opacity: 0.3;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.pagination-dot:hover {
  opacity: 0.6;
  transform: scale(1.2);
}

.pagination-dot.active {
  width: 12px;
  height: 12px;
  opacity: 1;
  box-shadow: 0 0 0 4px rgba(204, 85, 0, 0.2);
  animation: dotPulse 2s ease-in-out infinite;
}

@keyframes dotPulse {
  0%,
  100% {
    box-shadow: 0 0 0 4px rgba(204, 85, 0, 0.2);
  }

  50% {
    box-shadow: 0 0 0 8px rgba(204, 85, 0, 0.1);
  }
}

/* Divider */
.login-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}

.login-divider-line {
  flex: 1;
  height: 1px;
  background: #e5e7eb;
}

.login-divider-text {
  font-size: 13px;
  color: #9ca3af;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Google Sign-In Container */
.google-signin-container {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 4px;
}

/* Responsive design */
@media (max-width: 480px) {
  .login-card {
    padding: 40px 28px;
    border-radius: 20px;
  }

  .login-title {
    font-size: 30px;
  }

  .login-subtitle {
    font-size: 15px;
  }

  .login-input,
  .login-button {
    height: 48px;
  }

  .login-logo img {
    width: 80px;
  }
}

@media (max-width: 360px) {
  .login-card {
    padding: 32px 24px;
  }

  .login-title {
    font-size: 28px;
  }
}
.main-drawer {
  width: 100%;
  height: 100%;
  background: var(--surface-nav);
  border-right: 1px solid var(--border-nav);
  overflow: hidden;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
}

.main-drawer-profile {
  display: none;
}

/* Hridaya has no global border-box; without it the full-width rows overflow and the panel scrolls sideways. */
.main-drawer *,
.main-drawer *::before,
.main-drawer *::after {
  box-sizing: border-box;
}

.main-drawer-inner {
  width: 100%;
  height: calc(100% - 30px);
  overflow-x: hidden;
  overflow-y: auto;
  padding: 10px 0 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--surface-nav-active) transparent;
}

/* Search box at the top of the sidebar. */
.drawer-search {
  position: relative;
  margin: 2px 8px 6px;
}

.drawer-search input {
  width: 100%;
  background: var(--surface-nav-input);
  border: 1px solid var(--border-nav-input);
  color: var(--text-on-nav);
  border-radius: 8px;
  margin: 0;
  padding: 8px 10px 8px 30px;
  font-size: 13px;
  outline: none;
}

.drawer-search input::placeholder {
  color: var(--text-on-nav-muted);
}

.drawer-search input:focus {
  border-color: var(--brand-primary);
}

.drawer-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-on-nav-muted);
  font-size: 13px;
  pointer-events: none;
}

/* Section headings. */
.drawer-section-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 14px 20px 8px;
  color: var(--text-on-nav-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
}

.drawer-section-btn:disabled {
  cursor: default;
}

.drawer-section-btn:focus-visible,
.drawer-item:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: -2px;
}

.drawer-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Icon column: 16px icon + 8px gap, so section text and page names start 44px in. */
.drawer-section-icon {
  flex: none;
  color: var(--text-on-nav-muted);
}

.drawer-section-btn.has-current .drawer-section-icon {
  color: var(--brand-primary);
}

.drawer-section-btn.has-current {
  color: var(--text-on-nav);
}

.drawer-section-count {
  opacity: 0.7;
}

.drawer-section-chev {
  font-size: 10px;
  transform: rotate(-90deg);
  transition: transform 0.15s ease;
}

.drawer-section-chev.is-open {
  transform: none;
}

.drawer-sublabel {
  /* In line with the section text, after the icon column. */
  padding: 10px 20px 4px 44px;
  color: var(--text-on-nav-muted);
  font-size: 11.5px;
}

/* Menu rows: compact, with the current page marked. */
.drawer-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: calc(100% - 16px);
  margin: 1px 8px;
  padding: 7px 12px 7px 36px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--text-on-nav);
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease;
}

.drawer-item:hover {
  background: var(--surface-nav-hover);
}

.drawer-item.is-active {
  background: var(--surface-nav-active);
  box-shadow: inset 3px 0 0 var(--brand-primary);
}

.drawer-item-ext {
  margin-left: auto;
  color: var(--text-on-nav-muted);
  font-size: 11px;
}

.drawer-empty {
  padding: 10px 20px;
  color: var(--text-on-nav-muted);
  font-size: 13px;
}

.drawer-app-ver {
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-on-nav-muted);
  font-size: 11px;
  font-weight: 400;
  border-top: 1px solid var(--border-nav);
}

/* Shared expand-arrow helpers used by other pages (class details, reports). */
.reverse-expand {
  transform: rotate(180deg);
  transition: 0.2s linear;
}

.normal-expand {
  transition: 0.2s linear;
}

@media (prefers-reduced-motion: reduce) {
  .drawer-item,
  .drawer-section-chev {
    transition: none;
  }
}

@media (max-width: 700px) {
  .main-drawer-profile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 10px 20px;
    color: var(--text-on-nav);
  }
}

@media (max-width: 400px) {
  .header-timezone-title {
    display: none;
  }
}
.dashboard {
  width: 90%;
  padding: 20px 30px;
  width: calc(90% - 60px);
  margin: 20px 5%;
  background: var(--surface-card);
  border-radius: 10px;
}

p {
  font-size: 14px;
}

.dashboard-users {
  width: 100%;
}

.dashboard-users h1 {
  color: #6f6f6f;
}

.dashboard-users-container {
  width: 100%;
  display: flex;
  justify-content: space-evenly;
}

.dashboard-users-box {
  width: 20%;
  border: 1px solid var(--border-default);
  text-align: center;
  border-radius: 10px;
}

.dashboard-users-box p {
  opacity: 0.7;
}

.dashboard-chart {
  width: 100%;
  padding: 20px;
  width: calc(100% - 40px);
  border: 1px solid var(--border-default);
  border-radius: 10px;
}

.dashboard-sub-charts {
  margin: 20px 0;
  display: flex;
  justify-content: space-between;
}

.dashboard-sub-chart {
  width: 48%;
}

@media (max-width: 700px) {
  .dashboard-users-container {
    flex-direction: column;
  }
  .dashboard-users-box {
    width: 100%;
    margin: 10px 0;
  }
  .dashboard-sub-charts {
    flex-direction: column;
  }
  .dashboard-sub-chart {
    width: 100%;
    margin: 10px 0;
  }
}
.custom-checkbox {
  display: flex;
  flex-direction: row;
  align-items: center;
  cursor: pointer;
}

.custom-checkbox input {
  margin: 0;
  cursor: pointer;
}

.custom-checkbox-label {
  margin-left: 10px;
  font-size: 14px;
  color: var(--text-primary);
}
.custom-modal-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--overlay-modal-strong);
  z-index: 999999999;
}

.custom-modal-inner-container {
  position: relative;
  background: var(--surface-card);
  color: var(--text-primary);
  width: 50%;
  max-height: 90%;
  max-width: 600px;
  min-width: 250px;
  padding: 20px;
  overflow: auto;
}

.custom-modal-inner-container-close {
  position: relative;
  background: var(--surface-card);
  color: var(--text-primary);
  width: 50%;
  max-height: 90%;
  max-width: 600px;
  min-width: 250px;
  padding: 20px;
}

.custom-modal-inner-container-myt {
  position: relative;
  background: var(--surface-card);
  color: var(--text-primary);
  width: auto;
  max-height: 90%;
  max-width: 100%;
  min-width: 250px;
  padding: 20px;
  overflow: auto;
  margin: 0px 20px;
  border-radius: 8px;
}

.custom-modal-inner-container img {
  position: absolute;
  top: 0;
  right: -30px;
  width: 15px;
  cursor: pointer;
}

.custom-modal-inner-container-close img {
  position: absolute;
  top: -10px;
  right: -24px;
  width: 15px;
  cursor: pointer;
}
.teachers-invite {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 5px 0;
}

.teachers-invite button {
  margin-left: 5px;
  padding: 0 10px;
  height: 30px;
}

.teachers-invite input {
  margin: 0 10px;
  padding: 0 10px;
  height: 30px;
  width: 250px;
}

.teachers-count {
  margin: 10px 0;
}

.duplicate-warning {
  padding: 10px 12px;
  border-radius: 4px;
  background: var(--state-warning-bg);
  color: var(--state-warning-text);
  font-size: 14px;
}

.duplicate-teacher-list {
  margin: 16px 0;
  max-height: 320px;
  overflow-y: auto;
}

.duplicate-teacher-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-default);
}

.duplicate-teacher-row img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.duplicate-teacher-info {
  flex: 1;
  min-width: 0;
}

.duplicate-teacher-name {
  color: var(--text-primary);
  font-weight: 600;
}

.duplicate-teacher-meta {
  color: var(--text-muted);
  font-size: 12px;
}

.duplicate-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.teachers-details-row {
  border: 2px solid #afbff8;
}

.teachers-details-row td {
  padding: 0 10px;
  height: 60px;
}

.teachers-details-row td input {
  height: 30px;
  width: 100%;
  font-size: 14px;
  font-family: Avenir;
  font-weight: 500;
  color: var(--text-primary);
  border: 1px solid #000;
  padding-left: 10px;
}

.teachers-details-row td select {
  height: 30px;
  width: 100%;
}
.rdrCalendarWrapper {
  box-sizing: border-box;
  background: #ffffff;
  display: inline-flex;
  flex-direction: column;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.rdrDateDisplay{
  display: flex;
  justify-content: space-between;
}

.rdrDateDisplayItem{
  flex: 1 1;
  width: 0;
  text-align: center;
  color: inherit;
}

.rdrDateDisplayItem + .rdrDateDisplayItem{
    margin-left: 0.833em;
  }

.rdrDateDisplayItem input{
    text-align: inherit
  }

.rdrDateDisplayItem input:disabled{
      cursor: default;
    }

.rdrDateDisplayItemActive{}

.rdrMonthAndYearWrapper {
  box-sizing: inherit;
  display: flex;
  justify-content: space-between;
}

.rdrMonthAndYearPickers{
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.rdrMonthPicker{}

.rdrYearPicker{}

.rdrNextPrevButton {
  box-sizing: inherit;
  cursor: pointer;
  outline: none;
}

.rdrPprevButton {}

.rdrNextButton {}

.rdrMonths{
  display: flex;
}

.rdrMonthsVertical{
  flex-direction: column;
}

.rdrMonthsHorizontal > div > div > div{
  display: flex;
  flex-direction: row;
}

.rdrMonth{
  width: 27.667em;
}

.rdrWeekDays{
  display: flex;
}

.rdrWeekDay {
  flex-basis: calc(100% / 7);
  box-sizing: inherit;
  text-align: center;
}

.rdrDays{
  display: flex;
  flex-wrap: wrap;
}

.rdrDateDisplayWrapper{}

.rdrMonthName{}

.rdrInfiniteMonths{
  overflow: auto;
}

.rdrDateRangeWrapper{
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.rdrDateInput {
  position: relative;
}

.rdrDateInput input {
    outline: none;
  }

.rdrDateInput .rdrWarning {
    position: absolute;
    font-size: 1.6em;
    line-height: 1.6em;
    top: 0;
    right: .25em;
    color: #FF0000;
  }

.rdrDay {
  box-sizing: inherit;
  width: calc(100% / 7);
  position: relative;
  font: inherit;
  cursor: pointer;
}

.rdrDayNumber {
  display: block;
  position: relative;
}

.rdrDayNumber span{
    color: #1d2429;
  }

.rdrDayDisabled {
  cursor: not-allowed;
}

@supports (-ms-ime-align: auto) {
  .rdrDay {
    flex-basis: 14.285% !important;
  }
}

.rdrSelected, .rdrInRange, .rdrStartEdge, .rdrEndEdge{
  pointer-events: none;
}

.rdrInRange{}

.rdrDayStartPreview, .rdrDayInPreview, .rdrDayEndPreview{
  pointer-events: none;
}

.rdrDayHovered{}

.rdrDayActive{}

.rdrDateRangePickerWrapper{
  display: inline-flex;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.rdrDefinedRangesWrapper{}

.rdrStaticRanges{
  display: flex;
  flex-direction: column;
}

.rdrStaticRange{
  font-size: inherit;
}

.rdrStaticRangeLabel{}

.rdrInputRanges{}

.rdrInputRange{
  display: flex;
}

.rdrInputRangeInput{}
.rdrCalendarWrapper{
  color: #000000;
  font-size: 12px;
}

.rdrDateDisplayWrapper{
  background-color: rgb(239, 242, 247);
}

.rdrDateDisplay{
  margin: 0.833em;
}

.rdrDateDisplayItem{
  border-radius: 4px;
  background-color: rgb(255, 255, 255);
  box-shadow: 0 1px 2px 0 rgba(35, 57, 66, 0.21);
  border: 1px solid transparent;
}

.rdrDateDisplayItem input{
    cursor: pointer;
    height: 2.5em;
    line-height: 2.5em;
    border: 0px;
    background: transparent;
    width: 100%;
    color: #849095;
  }

.rdrDateDisplayItemActive{
  border-color: currentColor;
}

.rdrDateDisplayItemActive input{
    color: #7d888d
  }

.rdrMonthAndYearWrapper {
  align-items: center;
  height: 60px;
  padding-top: 10px;
}

.rdrMonthAndYearPickers{
  font-weight: 600;
}

.rdrMonthAndYearPickers select{
    -moz-appearance: none;
         appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: transparent;
    padding: 10px 30px 10px 10px;
    border-radius: 4px;
    outline: 0;
    color: #3e484f;
    background: url("data:image/svg+xml;utf8,<svg width='9px' height='6px' viewBox='0 0 9 6' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><g id='Artboard' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' transform='translate(-636.000000, -171.000000)' fill-opacity='0.368716033'><g id='input' transform='translate(172.000000, 37.000000)' fill='%230E242F' fill-rule='nonzero'><g id='Group-9' transform='translate(323.000000, 127.000000)'><path d='M142.280245,7.23952813 C141.987305,6.92353472 141.512432,6.92361662 141.219585,7.23971106 C140.926739,7.5558055 140.926815,8.06821394 141.219755,8.38420735 L145.498801,13 L149.780245,8.38162071 C150.073185,8.0656273 150.073261,7.55321886 149.780415,7.23712442 C149.487568,6.92102998 149.012695,6.92094808 148.719755,7.23694149 L145.498801,10.7113732 L142.280245,7.23952813 Z' id='arrow'></path></g></g></g></svg>") no-repeat;
    background-position: right 8px center;
    cursor: pointer;
    text-align: center
  }

.rdrMonthAndYearPickers select:hover{
      background-color: rgba(0,0,0,0.07);
    }

.rdrMonthPicker, .rdrYearPicker{
  margin: 0 5px
}

.rdrNextPrevButton {
  display: block;
  width: 24px;
  height: 24px;
  margin: 0 0.833em;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: #EFF2F7
}

.rdrNextPrevButton:hover{
    background: #E1E7F0;
  }

.rdrNextPrevButton i {
    display: block;
    width: 0;
    height: 0;
    padding: 0;
    text-align: center;
    border-style: solid;
    margin: auto;
    transform: translate(-3px, 0px);
  }

.rdrPprevButton i {
    border-width: 4px 6px 4px 4px;
    border-color: transparent rgb(52, 73, 94) transparent transparent;
    transform: translate(-3px, 0px);
  }

.rdrNextButton i {
    margin: 0 0 0 7px;
    border-width: 4px 4px 4px 6px;
    border-color: transparent transparent transparent rgb(52, 73, 94);
    transform: translate(3px, 0px);
  }

.rdrWeekDays {
  padding: 0 0.833em;
}

.rdrMonth{
  padding: 0 0.833em 1.666em 0.833em;
}

.rdrMonth .rdrWeekDays {
    padding: 0;
  }

.rdrMonths.rdrMonthsVertical .rdrMonth:first-child .rdrMonthName{
  display: none;
}

.rdrWeekDay {
  font-weight: 400;
  line-height: 2.667em;
  color: rgb(132, 144, 149);
}

.rdrDay {
  background: transparent;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  border: 0;
  padding: 0;
  line-height: 3.000em;
  height: 3.000em;
  text-align: center;
  color: #1d2429
}

.rdrDay:focus {
    outline: 0;
  }

.rdrDayNumber {
  outline: 0;
  font-weight: 300;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  top: 5px;
  bottom: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rdrDayToday .rdrDayNumber span{
  font-weight: 500
}

.rdrDayToday .rdrDayNumber span:after{
    content: '';
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translate(-50%, 0);
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: #3d91ff;
  }

.rdrDayToday:not(.rdrDayPassive) .rdrInRange ~ .rdrDayNumber span:after,.rdrDayToday:not(.rdrDayPassive) .rdrStartEdge ~ .rdrDayNumber span:after,.rdrDayToday:not(.rdrDayPassive) .rdrEndEdge ~ .rdrDayNumber span:after,.rdrDayToday:not(.rdrDayPassive) .rdrSelected ~ .rdrDayNumber span:after{
      background: #fff;
    }

.rdrDay:not(.rdrDayPassive) .rdrInRange ~ .rdrDayNumber span,.rdrDay:not(.rdrDayPassive) .rdrStartEdge ~ .rdrDayNumber span,.rdrDay:not(.rdrDayPassive) .rdrEndEdge ~ .rdrDayNumber span,.rdrDay:not(.rdrDayPassive) .rdrSelected ~ .rdrDayNumber span{
          color: rgba(255, 255, 255, 0.85);
        }

.rdrSelected, .rdrInRange, .rdrStartEdge, .rdrEndEdge{
  background: currentColor;
  position: absolute;
  top: 5px;
  left: 0;
  right: 0;
  bottom: 5px;
}

.rdrSelected{
  left: 2px;
  right: 2px;
}

.rdrInRange{}

.rdrStartEdge{
  border-top-left-radius: 1.042em;
  border-bottom-left-radius: 1.042em;
  left: 2px;
}

.rdrEndEdge{
  border-top-right-radius: 1.042em;
  border-bottom-right-radius: 1.042em;
  right: 2px;
}

.rdrSelected{
  border-radius: 1.042em;
}

.rdrDayStartOfMonth .rdrInRange, .rdrDayStartOfMonth .rdrEndEdge, .rdrDayStartOfWeek .rdrInRange, .rdrDayStartOfWeek .rdrEndEdge{
    border-top-left-radius: 1.042em;
    border-bottom-left-radius: 1.042em;
    left: 2px;
  }

.rdrDayEndOfMonth .rdrInRange,  .rdrDayEndOfMonth .rdrStartEdge,  .rdrDayEndOfWeek .rdrInRange,  .rdrDayEndOfWeek .rdrStartEdge{
    border-top-right-radius: 1.042em;
    border-bottom-right-radius: 1.042em;
    right: 2px;
  }

.rdrDayStartOfMonth .rdrDayInPreview, .rdrDayStartOfMonth .rdrDayEndPreview, .rdrDayStartOfWeek .rdrDayInPreview, .rdrDayStartOfWeek .rdrDayEndPreview{
    border-top-left-radius: 1.333em;
    border-bottom-left-radius: 1.333em;
    border-left-width: 1px;
    left: 0px;
  }

.rdrDayEndOfMonth .rdrDayInPreview, .rdrDayEndOfMonth .rdrDayStartPreview, .rdrDayEndOfWeek .rdrDayInPreview, .rdrDayEndOfWeek .rdrDayStartPreview{
   border-top-right-radius: 1.333em;
   border-bottom-right-radius: 1.333em;
   border-right-width: 1px;
   right: 0px;
 }

.rdrDayStartPreview, .rdrDayInPreview, .rdrDayEndPreview{
  background: rgba(255, 255, 255, 0.09);
  position: absolute;
  top: 3px;
  left: 0px;
  right: 0px;
  bottom: 3px;
  pointer-events: none;
  border: 0px solid currentColor;
  z-index: 1;
}

.rdrDayStartPreview{
  border-top-width: 1px;
  border-left-width: 1px;
  border-bottom-width: 1px;
  border-top-left-radius: 1.333em;
  border-bottom-left-radius: 1.333em;
  left: 0px;
}

.rdrDayInPreview{
  border-top-width: 1px;
  border-bottom-width: 1px;
}

.rdrDayEndPreview{
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-top-right-radius: 1.333em;
  border-bottom-right-radius: 1.333em;
  right: 0px;
}

.rdrDefinedRangesWrapper{
  font-size: 12px;
  width: 226px;
  border-right: solid 1px #eff2f7;
  background: #fff;
}

.rdrDefinedRangesWrapper .rdrStaticRangeSelected{
    color: currentColor;
    font-weight: 600;
  }

.rdrStaticRange{
  border: 0;
  cursor: pointer;
  display: block;
  outline: 0;
  border-bottom: 1px solid #eff2f7;
  padding: 0;
  background: #fff
}

.rdrStaticRange:hover .rdrStaticRangeLabel,.rdrStaticRange:focus .rdrStaticRangeLabel{
      background: #eff2f7;
    }

.rdrStaticRangeLabel{
  display: block;
  outline: 0;
  line-height: 18px;
  padding: 10px 20px;
  text-align: left;
}

.rdrInputRanges{
  padding: 10px 0;
}

.rdrInputRange{
  align-items: center;
  padding: 5px 20px;
}

.rdrInputRangeInput{
  width: 30px;
  height: 30px;
  line-height: 30px;
  border-radius: 4px;
  text-align: center;
  border: solid 1px rgb(222, 231, 235);
  margin-right: 10px;
  color: rgb(108, 118, 122)
}

.rdrInputRangeInput:focus, .rdrInputRangeInput:hover{
    border-color: rgb(180, 191, 196);
    outline: 0;
    color: #333;
  }

.rdrCalendarWrapper:not(.rdrDateRangeWrapper) .rdrDayHovered .rdrDayNumber:after{
  content: '';
  border: 1px solid currentColor;
  border-radius: 1.333em;
  position: absolute;
  top: -2px;
  bottom: -2px;
  left: 0px;
  right: 0px;
  background: transparent;
}

.rdrDayPassive{
  pointer-events: none;
}

.rdrDayPassive .rdrDayNumber span{
    color: #d5dce0;
  }

.rdrDayPassive .rdrInRange, .rdrDayPassive .rdrStartEdge, .rdrDayPassive .rdrEndEdge, .rdrDayPassive .rdrSelected, .rdrDayPassive .rdrDayStartPreview, .rdrDayPassive .rdrDayInPreview, .rdrDayPassive .rdrDayEndPreview{
    display: none;
  }

.rdrDayDisabled {
  background-color: rgb(248, 248, 248);
}

.rdrDayDisabled .rdrDayNumber span{
    color: #aeb9bf;
  }

.rdrDayDisabled .rdrInRange, .rdrDayDisabled .rdrStartEdge, .rdrDayDisabled .rdrEndEdge, .rdrDayDisabled .rdrSelected, .rdrDayDisabled .rdrDayStartPreview, .rdrDayDisabled .rdrDayInPreview, .rdrDayDisabled .rdrDayEndPreview{
    filter: grayscale(100%) opacity(60%);
  }

.rdrMonthName{
  text-align: left;
  font-weight: 600;
  color: #849095;
  padding: 0.833em;
}
/*
 * Styles for the shared DateRangePicker util. All colors come from theme tokens
 * (src/theme/tokens.css) so the same rules render correctly in light and dark.
 *
 * react-date-range renders its sidebar, nav, and day grid as native <button>s. The
 * host CMS's global `button { background: var(--brand-secondary); color: #fff }`
 * rule would color every day and hide the sidebar text, so the .rdr* resets below
 * use !important to re-assert the library's neutral look (same approach as
 * views/reminders/reminders.css), scoped to .udr-scope.
 */

.udr-root {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Trigger button */
.udr-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 14px;
  border-radius: 8px;
  font-size: 15px;
  cursor: pointer;
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  color: var(--text-primary);
}
.udr-trigger-icon {
  color: var(--text-muted);
}

/* Compact pill variant (e.g. Request Session Dashboard) */
.udr-trigger--compact {
  height: auto;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-muted);
}

/* Portal popover shell */
.udr-popover {
  position: fixed;
  z-index: 10000;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid var(--border-default);
  background: var(--surface-card);
  box-shadow: var(--shadow-modal);
}

/* ---- react-date-range theming (scoped, token-driven) ---- */
.udr-scope .rdrCalendarWrapper,
.udr-scope .rdrDateRangeWrapper,
.udr-scope .rdrDefinedRangesWrapper,
.udr-scope .rdrStaticRanges,
.udr-scope .rdrMonthAndYearWrapper,
.udr-scope .rdrMonths {
  background: var(--surface-card);
  color: var(--text-primary);
}
.udr-scope .rdrDefinedRangesWrapper {
  border-right-color: var(--border-default);
}

/* Neutralize the global button background for library-rendered buttons */
.udr-scope .rdrStaticRange,
.udr-scope .rdrDay,
.udr-scope .rdrNextPrevButton,
.udr-scope .rdrMonthAndYearPickers select {
  background: transparent !important;
  border: 0 !important;
  color: var(--text-primary) !important;
}

/* The global `button` rule (common.css) also leaks padding + margin into the day cells,
   overflowing the 7-column week so it wraps and the Sat column falls out of alignment.
   Reset the box model so react-date-range's own 1/7 day sizing holds. */
.udr-scope .rdrDay {
  padding: 0 !important;
  margin: 0 !important;
  font-size: inherit !important;
}

/* Presets sidebar */
.udr-scope .rdrStaticRange {
  border-bottom: 1px solid var(--border-default) !important;
  padding: 0 !important;
}
.udr-scope .rdrStaticRangeLabel {
  padding: 12px 20px !important;
  color: var(--text-primary);
}
.udr-scope .rdrStaticRange:hover .rdrStaticRangeLabel,
.udr-scope .rdrStaticRange:focus .rdrStaticRangeLabel {
  background: var(--surface-sunken);
}
.udr-scope .rdrStaticRangeSelected .rdrStaticRangeLabel {
  color: var(--brand-primary) !important;
  font-weight: 600;
}

/* Month header + nav */
.udr-scope .rdrMonthName,
.udr-scope .rdrMonthAndYearPickers {
  color: var(--text-primary);
  font-weight: 700;
}
.udr-scope .rdrNextPrevButton {
  background: var(--surface-sunken) !important;
  width: 26px;
  height: 26px;
  border-radius: 6px !important;
}
.udr-scope .rdrPprevButton i {
  border-color: transparent var(--text-primary) transparent transparent;
}
.udr-scope .rdrNextButton i {
  border-color: transparent transparent transparent var(--text-primary);
}

/* Weekday header + day numbers */
.udr-scope .rdrWeekDay {
  color: var(--text-muted);
}
.udr-scope .rdrDayNumber span {
  color: var(--text-primary) !important;
}
.udr-scope .rdrDayPassive .rdrDayNumber span,
.udr-scope .rdrDayDisabled .rdrDayNumber span {
  color: var(--text-muted) !important;
}
.udr-scope .rdrDayDisabled {
  background: transparent !important;
}
/* White numbers sit better on the solid orange range endpoints */
.udr-scope .rdrStartEdge ~ .rdrDayNumber span,
.udr-scope .rdrEndEdge ~ .rdrDayNumber span,
.udr-scope .rdrSelected ~ .rdrDayNumber span {
  color: #fff !important;
}

/* ---- Footer: draft range text + Cancel / Apply ---- */
.udr-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--border-default);
  background: var(--surface-card);
}
.udr-footer-range {
  color: var(--text-secondary);
  font-size: 14px;
}
.udr-footer-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.udr-cancel {
  background: transparent;
  border: none;
  padding: 8px 14px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
}
.udr-cancel:hover {
  color: var(--text-primary);
}
.udr-apply {
  background: var(--brand-primary);
  border: none;
  border-radius: 8px;
  padding: 9px 20px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}
.udr-apply:hover {
  background: var(--brand-primary-hover);
}
/* Trial-points pages (PROD-6998). Scoped layout classes — Tailwind layout utilities are NOT
   generated in this repo's build (see known-issues.md), so all layout is explicit here. */

/* ---------- page scaffolding ---------- */

.tp-page-head {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  text-align: left;
}

.tp-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
}

.tp-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}

.tp-actions-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.tp-filter {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  margin-bottom: 14px;
  text-align: left;
}

.tp-search {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start; /* beats the global form{justify-content:center} leak */
  gap: 12px;
  margin-bottom: 16px;
}

.tp-tiles {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 12px;
  margin-bottom: 20px;
  text-align: left;
}

.tp-tiles-divider {
  width: 1px;
  background: var(--border-default);
  align-self: stretch;
}

.tp-section-head {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 8px;
  margin: 20px 0 8px;
  text-align: left;
}

.tp-section-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
}

.tp-section-count {
  color: var(--text-muted);
}

.tp-pagination {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  color: var(--text-primary);
}

/* ---------- add/deduct points modal ---------- */

.tp-modal-form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 12px;
  text-align: left;
}

.tp-modal-label {
  display: block;
  font-weight: 600;
  color: var(--text-primary);
  font-size: 14px;
}

.tp-modal-input {
  display: block;
  width: 100%;
  margin-top: 6px;
  height: 40px;
  padding: 0 12px;
  box-sizing: border-box;
  border: 1px solid var(--input-border);
  border-radius: 8px;
  background: var(--input-bg);
  color: var(--input-text);
  font-size: 15px;
  font-weight: 400;
}

/* ---------- tables ---------- */

.tp-table {
  border: 1px solid var(--border-default);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface-card);
  text-align: left;
}

.tp-row {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.tp-row + .tp-row {
  border-top: 1px solid var(--border-default);
}

.tp-head {
  background: var(--surface-sunken);
  font-weight: 600;
}

.tp-col {
  flex: 1;
  /* min-width 0 lets cells shrink below their content width — without it, unbreakable content
     (emails) forces per-row column widths and the columns zigzag between rows */
  min-width: 0;
  box-sizing: border-box;
  padding: 16px;
  font-size: 14px;
  color: var(--text-primary);
  text-align: center;
}

.tp-col.tp-left {
  text-align: left;
}

.tp-col.tp-wide {
  flex: 1.6;
}

/* Status multi-select dropdown */
.tp-multiselect {
  position: relative;
  display: inline-block;
}
.tp-multiselect-toggle {
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--input-text);
  padding: 0 14px;
  border-radius: 10px;
  height: 44px;
  font-size: 15px;
  cursor: pointer;
  /* explicit width: a global rule stretches bare selects full-width, and flex squeezes the
     status button into wrapping — pin both filters to the same size */
  width: 220px;
  white-space: nowrap;
  text-align: left;
}
.tp-search-input {
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--input-text);
  padding: 0 14px;
  border-radius: 10px;
  height: 44px;
  width: 260px;
  font-size: 15px;
  box-sizing: border-box;
}
.tp-search-input::placeholder {
  color: var(--input-placeholder);
}
.tp-search-input:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(238, 115, 27, 0.15);
}
/* Match the row's buttons to the 44px inputs/dropdowns (direct children only, so the
   Status menu's Clear button keeps its default size) */
.tp-search > .link-btn {
  height: 44px;
  padding-top: 0;
  padding-bottom: 0;
}
.tp-multiselect-menu {
  position: absolute;
  top: 48px;
  left: 0;
  z-index: 30;
  min-width: 260px;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: 10px;
  padding: 8px;
  box-shadow: var(--shadow-modal);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tp-multiselect-option {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 14px;
  cursor: pointer;
}
.tp-multiselect-option:hover {
  background: var(--surface-page);
}
.tp-multiselect-option input {
  margin: 0;
}
.tp-multiselect-clear {
  align-self: flex-start;
  margin: 4px 0 0 8px;
}

/* Profile status badge */
.tp-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}
.tp-badge-visible {
  background: var(--state-success-bg);
  color: var(--state-success-text);
}
.tp-badge-hidden {
  background: var(--state-error-bg);
  color: var(--state-error-text);
}

/* Teacher email subtext in the list table — single line so row heights stay even */
.tp-subtext {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Name links: single line with ellipsis (wrapping names made rows uneven) */
.tp-col.tp-left.tp-wide a {
  display: inline-block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}

/* Uniform row height regardless of cell content */
.tp-row:not(.tp-head) {
  min-height: 72px;
}
.custom-input-label {
  font-size: 14px;
}

.custom-input input {
  width: 100%;
  margin: 10px 0;
  height: 30px;
  font-size: 16px;
}
.radio-container {
  display: flex;
  cursor: pointer;
  align-items: center;
}

.radio-container:focus-visible {
  outline: 2px solid var(--state-info);
  outline-offset: 2px;
}

.custom-radio-circle {
  width: 1.5em;
  height: 1.5em;
  border-radius: 8px;
  border: 2px solid var(--border-emphasis);
  opacity: 0.5;
}

.custom-radio-selected {
  opacity: 1;
  border: 2px solid var(--state-info);
}

.radio-selected {
  margin-top: 25%;
  margin-left: 25%;
  width: 50%;
  height: 50%;
  border-radius: 50%;
  background: var(--state-info);
}

.custom-radio-text {
  margin-left: 10px;
  opacity: 1;
  font-family: PierSans-Regular;
  font-size: 13px;
  text-align: left;
  line-height: 22px;
  color: var(--text-secondary);
}

.radio-container:hover .custom-radio-circle {
  opacity: 1;
  border: 2px solid var(--state-info);
}

.radio-container:hover .radio-selected {
  opacity: 1;
  background: var(--state-info);
}

.radio-container:hover .custom-radio-text {
  opacity: 1;
}
.custom-single-select-label {
  font-size: 14px;
}

.custom-single-select select {
  margin: 10px 0;
  width: 200px;
  height: 30px;
  font-size: 14px;
  background: var(--input-bg);
  color: var(--input-text);
}

.custom-single-select-inner {
  display: flex;
  align-items: center;
}

.custom-single-select-inner img {
  width: 20px;
  height: 20px;
  border: 1px solid var(--state-error);
  border-radius: 50%;
  margin-left: 5px;
  cursor: pointer;
}
.custom-date-picker-label {
  font-size: 14px;
}

.custom-date-picker {
  margin-left: 10px;
}

.react-datepicker__input-container input {
  margin: 10px 0;
  width: 200px;
  height: 30px;
  font-size: 16px;
}

/* ---- Dark theme for react-datepicker (applies to every CustomDatePicker instance) ---- */
.dark .react-datepicker {
  background-color: var(--surface-card);
  color: var(--text-primary);
  border-color: var(--border-default);
}

.dark .react-datepicker__header {
  background-color: var(--surface-sunken);
  border-bottom-color: var(--border-default);
}

.dark .react-datepicker__current-month,
.dark .react-datepicker-year-header,
.dark .react-datepicker-time__header,
.dark .react-datepicker__day-name,
.dark .react-datepicker__day,
.dark .react-datepicker__time-name {
  color: var(--text-primary);
}

.dark .react-datepicker__day--disabled,
.dark .react-datepicker__day--outside-month {
  color: var(--text-muted);
}

.dark .react-datepicker__day:not(.react-datepicker__day--disabled):hover,
.dark .react-datepicker__month-text:hover,
.dark .react-datepicker__year-text:hover {
  background-color: var(--surface-sunken);
  color: var(--text-primary);
}

.dark .react-datepicker__day--selected,
.dark .react-datepicker__day--keyboard-selected,
.dark .react-datepicker__day--in-range,
.dark .react-datepicker__day--in-selecting-range {
  background-color: var(--brand-primary);
  color: var(--text-inverse);
}

.dark .react-datepicker__triangle::before,
.dark .react-datepicker__triangle::after {
  border-top-color: var(--surface-sunken) !important;
  border-bottom-color: var(--surface-sunken) !important;
}

.dark .react-datepicker__navigation-icon::before,
.dark .react-datepicker__year-read-view--down-arrow,
.dark .react-datepicker__month-read-view--down-arrow {
  border-color: var(--text-secondary);
}

.dark .react-datepicker__month-dropdown,
.dark .react-datepicker__year-dropdown {
  background-color: var(--surface-card);
  border-color: var(--border-default);
  color: var(--text-primary);
}

.dark .react-datepicker__month-option:hover,
.dark .react-datepicker__year-option:hover {
  background-color: var(--surface-sunken);
}
.edit-profile {
  width: 90%;
  padding: 20px 30px;
  width: calc(90% - 60px);
  margin: 20px 5%;
  background: var(--surface-card);
  border-radius: 4px;
}

.edit-profile-details {
  width: 100%;
  display: flex;
}

.edit-profile-profile-pic {
  width: 20%;
  word-wrap: break-word;
}

.edit-profile-profile-pic img {
  width: 100%;
}

.edit-profile-personal-details {
  border: 1px solid;
  width: 80%;
  width: calc(80% - 40px);
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
}

.edit-profile-single-detail {
  margin-right: 50px;
  margin-bottom: 20px;
}

.edit-profile-yoga {
  width: 100%;
  margin: 10px 0;
}

.edit-profile-yoga textarea {
  width: 100%;
  height: 200px;
  font-size: 15px;
  line-height: 20px;
}

.edit-error {
  color: var(--state-error);
  font-size: 14px;
  padding-left: 10px;
}

.edit-cert-cont {
  padding: 10px;
}

.edit-cert-ed-del span {
  margin-right: 10px;
  cursor: pointer;
}

.edit-cert-del {
  color: var(--state-error);
}

.edit-cert-ed {
  color: var(--state-info);
}

.edit-add-cert-but {
  padding: 5px;
}

.edit-profile-textarea {
  width: 100%;
  margin-bottom: 20px;
}

.edit-profile-textarea-label {
  font-size: 14px;
}

.edit-profile-textarea textarea {
  margin: 10px 0;
  width: 400px;
  height: 60px;
  font-size: 16px;
  line-height: 20px;
}

.edit-older-goals-title {
  margin-top: 15px;
}

.edit-older-goals-cont {
  display: flex;
  margin: 10px 0;
}
.edit-older-goals-single {
  font-family: PierSans-Regular;
  font-size: 14px;
  color: #1b2437;
  margin-right: 5px;
  padding: 3px 10px;
  border: 1px solid rgb(151, 151, 151, 0.3);
  border-radius: 10px;
  display: flex;
  align-items: center;
}

.edit-older-goals-single img {
  width: 12px;
  margin-left: 5px;
  cursor: pointer;
}

.teacher-story-edit-content {
  width: 80%;
}

.teacher-story-del-icon {
  cursor: pointer;
}

.edit-adj {
  display: flex;
  margin: 10px 0;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.edit-adj-single {
  margin-bottom: 10px;
}

.edit-profile-checkbox-list-arr {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 30px;
}

.edit-profile-checkbox-list-arr .custom-checkbox {
  margin-right: 25px;
}

/* Speciality multi-selects (react-multi-select-component). The library is themed
   purely through its own CSS variables, so map them onto the theme tokens rather
   than restyling its internals — same approach as other/cms_users.css. */
.edit-speciality-select .rmsc {
  --rmsc-main: var(--brand-primary);
  --rmsc-hover: var(--surface-sunken);
  --rmsc-selected: var(--surface-row-highlight);
  --rmsc-border: var(--input-border);
  --rmsc-gray: var(--text-muted);
  --rmsc-bg: var(--input-bg);
  --rmsc-p: 8px;
  --rmsc-radius: 4px;
  --rmsc-h: 30px;
  margin: 10px 0;
  font-size: 14px;
  color: var(--input-text);
}

/* The panel is absolutely positioned, so it must paint above the fields below it. */
.edit-speciality-select .rmsc .dropdown-content {
  z-index: 30;
}
.upload-image {
  width: 100% !important;
  position: relative !important;
  right: 0 !important;
}
.cst-container {
  margin: 20px 0;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  border-top: 1px solid #cfcfcf;
  border-left: 1px solid #cfcfcf;
  font-size: 14px;
}

.cst-single-row {
  display: flex;
  width: 50%;
}

.cst-single-row-full {
  width: 100%;
}

.cst-single-td {
  width: 50%;
  /* border-right: 1px solid; */
  border-bottom: 1px solid #cfcfcf;
  padding: 10px;
  word-break: break-all;
}

.cst-second-td {
  border-right: 1px solid #cfcfcf;
}

.cst-first-td {
  color: rgb(125, 125, 125);
  border-color: 1px solid #cfcfcf;
}

.cst-second-td ul {
  margin: 0;
  padding: 0;
}

.cst-second-td li {
  padding: 0;
}

@media (max-width: 900px) {
  .cst-single-row {
    width: 100%;
  }
}

.cst-single-row a {
  color: blue;
}
.teacher-avilability {
  width: 100%;
  background: var(--surface-card);
  padding: 10px;
  overflow: scroll;
}

.availability-table {
  margin: 20px 0;
}

.availability-table p {
  margin-top: 20px;
  color: var(--state-info);
}

.single-table-column.day-format {
  text-align: left;
  font-size: 10px;
}

.single-available-bg-color {
  background: rgba(0, 0, 255, 0.75);
}

.single-available-booked-color {
  background: rgba(255, 0, 0, 0.75);
  cursor: pointer;
}

.single-table-trial-availability {
  position: absolute;
  background: rgb(10, 154, 173);
  height: 7px;
  width: 7px;
  border-radius: 100%;
  top: 3px;
  right: 3px;
}
.single-non-available-booked-color {
  background: #f4d03f;
  cursor: pointer;
}
.single-less-than-lead-time-booked-color {
  background: #8e0000bf;
  cursor: pointer;
}
.single-non-available-repeat-booked-color {
  background: #7f8c8d;
  cursor: pointer;
}

.tooltiptexts {
  display: none;
  /* width: 120px; */
  background-color: #555;
  color: var(--text-inverse);
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  top: 20px;
  left: -50px;
  position: absolute;
  z-index: 1000000;
  transition: opacity 0.3s;
  font-size: 11px;
}

.tooltiptexts a {
  color: var(--text-inverse);
}

.single-table-column {
  position: relative;
}

.single-table-column:hover .tooltiptexts {
  display: block;
  opacity: 1;
}

.single-table-column .color-blue {
  color: var(--state-info);
  font-size: 10px;
}

.single-table-column a {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.availability-table td.total-table-column {
  text-align: right;
}

.availability-table table {
  padding: 10px;
}

.availability-table th {
  min-width: 18px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  text-align: center;
  font-size: 10px;
}

.availability-table td {
  position: relative;
  /* min-width: 20px; */
  border: 1px solid rgba(0, 0, 0, 0.1);
  text-align: center;
  white-space: nowrap;
}

.teacher-availability-filters {
  display: flex;
  margin: 20px 0;
}

.teacher-availability-block {
  margin-right: 30px;
}

.teacher-availability-submit {
  margin-top: 23px;
  height: 30px;
}

.teacher-availability-checkbox {
  cursor: pointer;
}

.single-table-column.total-heading {
  font-size: 10px;
}

.total-heading {
  font-weight: bold;
}

.availability-table-legend {
  margin: 20px 0;
  display: flex;
  align-items: center;
}

.avail-leg-blue {
  background: rgba(0, 0, 255, 0.75);
  width: 20px;
  height: 20px;
}

.availability-table-legend span {
  margin-right: 50px;
}

.avail-leg-red {
  background: rgba(255, 0, 0, 0.75);
  width: 20px;
  height: 20px;
}

.teacher-availability-legend-box {
  display: flex;
}

.legend {
  display: flex;
  align-items: center;
  margin-right: 15px;
}

.legend-color {
  height: 15px;
  width: 15px;
  margin-right: 5px;
}

.legend-text {
  font-size: 15px;
}

.react-datepicker__navigation-icon::before, .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view--down-arrow {
  border-color: #ccc;
  border-style: solid;
  border-width: 3px 3px 0 0;
  content: "";
  display: block;
  height: 9px;
  position: absolute;
  top: 6px;
  width: 9px;
}
.react-datepicker-wrapper {
  display: inline-block;
  padding: 0;
  border: 0;
}

.react-datepicker {
  font-family: "Helvetica Neue", helvetica, arial, sans-serif;
  font-size: 0.8rem;
  background-color: #fff;
  color: #000;
  border: 1px solid #aeaeae;
  border-radius: 0.3rem;
  display: inline-block;
  position: relative;
  line-height: initial;
}

.react-datepicker--time-only .react-datepicker__time-container {
  border-left: 0;
}
.react-datepicker--time-only .react-datepicker__time,
.react-datepicker--time-only .react-datepicker__time-box {
  border-bottom-left-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem;
}

.react-datepicker-popper {
  z-index: 1;
  line-height: 0;
}
.react-datepicker-popper .react-datepicker__triangle {
  stroke: #aeaeae;
}
.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle {
  fill: #f0f0f0;
  color: #f0f0f0;
}
.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle {
  fill: #fff;
  color: #fff;
}

.react-datepicker__header {
  text-align: center;
  background-color: #f0f0f0;
  border-bottom: 1px solid #aeaeae;
  border-top-left-radius: 0.3rem;
  padding: 8px 0;
  position: relative;
}
.react-datepicker__header--time {
  padding-bottom: 8px;
  padding-left: 5px;
  padding-right: 5px;
}
.react-datepicker__header--time:not(.react-datepicker__header--time--only) {
  border-top-left-radius: 0;
}
.react-datepicker__header:not(.react-datepicker__header--has-time-select) {
  border-top-right-radius: 0.3rem;
}

.react-datepicker__year-dropdown-container--select,
.react-datepicker__month-dropdown-container--select,
.react-datepicker__month-year-dropdown-container--select,
.react-datepicker__year-dropdown-container--scroll,
.react-datepicker__month-dropdown-container--scroll,
.react-datepicker__month-year-dropdown-container--scroll {
  display: inline-block;
  margin: 0 15px;
}

.react-datepicker__current-month,
.react-datepicker-time__header,
.react-datepicker-year-header {
  margin-top: 0;
  color: #000;
  font-weight: bold;
  font-size: 0.944rem;
}

h2.react-datepicker__current-month {
  padding: 0;
  margin: 0;
}

.react-datepicker-time__header {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.react-datepicker__navigation {
  align-items: center;
  background: none;
  display: flex;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  position: absolute;
  top: 2px;
  padding: 0;
  border: none;
  z-index: 1;
  height: 32px;
  width: 32px;
  text-indent: -999em;
  overflow: hidden;
}
.react-datepicker__navigation--previous {
  left: 2px;
}
.react-datepicker__navigation--next {
  right: 2px;
}
.react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {
  right: 85px;
}
.react-datepicker__navigation--years {
  position: relative;
  top: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.react-datepicker__navigation--years-previous {
  top: 4px;
}
.react-datepicker__navigation--years-upcoming {
  top: -4px;
}
.react-datepicker__navigation:hover *::before {
  border-color: rgb(165.75, 165.75, 165.75);
}

.react-datepicker__navigation-icon {
  position: relative;
  top: -1px;
  font-size: 20px;
  width: 0;
}
.react-datepicker__navigation-icon--next {
  left: -2px;
}
.react-datepicker__navigation-icon--next::before {
  transform: rotate(45deg);
  left: -7px;
}
.react-datepicker__navigation-icon--previous {
  right: -2px;
}
.react-datepicker__navigation-icon--previous::before {
  transform: rotate(225deg);
  right: -7px;
}

.react-datepicker__month-container {
  float: left;
}

.react-datepicker__year {
  margin: 0.4rem;
  text-align: center;
}
.react-datepicker__year-wrapper {
  display: flex;
  flex-wrap: wrap;
  max-width: 180px;
}
.react-datepicker__year .react-datepicker__year-text {
  display: inline-block;
  width: 4rem;
  margin: 2px;
}

.react-datepicker__month {
  margin: 0.4rem;
  text-align: center;
}
.react-datepicker__month .react-datepicker__month-text,
.react-datepicker__month .react-datepicker__quarter-text {
  display: inline-block;
  width: 4rem;
  margin: 2px;
}

.react-datepicker__input-time-container {
  clear: both;
  width: 100%;
  float: left;
  margin: 5px 0 10px 15px;
  text-align: left;
}
.react-datepicker__input-time-container .react-datepicker-time__caption {
  display: inline-block;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container {
  display: inline-block;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input {
  display: inline-block;
  margin-left: 10px;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input {
  width: auto;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-inner-spin-button,
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time] {
  -moz-appearance: textfield;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__delimiter {
  margin-left: 5px;
  display: inline-block;
}

.react-datepicker__time-container {
  float: right;
  border-left: 1px solid #aeaeae;
  width: 85px;
}
.react-datepicker__time-container--with-today-button {
  display: inline;
  border: 1px solid #aeaeae;
  border-radius: 0.3rem;
  position: absolute;
  right: -87px;
  top: 0;
}
.react-datepicker__time-container .react-datepicker__time {
  position: relative;
  background: white;
  border-bottom-right-radius: 0.3rem;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {
  width: 85px;
  overflow-x: hidden;
  margin: 0 auto;
  text-align: center;
  border-bottom-right-radius: 0.3rem;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list {
  list-style: none;
  margin: 0;
  height: calc(195px + 1.7rem / 2);
  overflow-y: scroll;
  padding-right: 0;
  padding-left: 0;
  width: 100%;
  box-sizing: content-box;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item {
  height: 30px;
  padding: 5px 10px;
  white-space: nowrap;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover {
  cursor: pointer;
  background-color: #f0f0f0;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {
  background-color: #216ba5;
  color: white;
  font-weight: bold;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover {
  background-color: #216ba5;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled {
  color: #ccc;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover {
  cursor: default;
  background-color: transparent;
}

.react-datepicker__week-number {
  color: #ccc;
  display: inline-block;
  width: 1.7rem;
  line-height: 1.7rem;
  text-align: center;
  margin: 0.166rem;
}
.react-datepicker__week-number.react-datepicker__week-number--clickable {
  cursor: pointer;
}
.react-datepicker__week-number.react-datepicker__week-number--clickable:not(.react-datepicker__week-number--selected):hover {
  border-radius: 0.3rem;
  background-color: #f0f0f0;
}
.react-datepicker__week-number--selected {
  border-radius: 0.3rem;
  background-color: #216ba5;
  color: #fff;
}
.react-datepicker__week-number--selected:hover {
  background-color: rgb(28.75, 93.2196969697, 143.75);
}

.react-datepicker__day-names {
  white-space: nowrap;
  margin-bottom: -8px;
}

.react-datepicker__week {
  white-space: nowrap;
}

.react-datepicker__day-name,
.react-datepicker__day,
.react-datepicker__time-name {
  color: #000;
  display: inline-block;
  width: 1.7rem;
  line-height: 1.7rem;
  text-align: center;
  margin: 0.166rem;
}

.react-datepicker__day,
.react-datepicker__month-text,
.react-datepicker__quarter-text,
.react-datepicker__year-text {
  cursor: pointer;
}
.react-datepicker__day:not([aria-disabled=true]):hover,
.react-datepicker__month-text:not([aria-disabled=true]):hover,
.react-datepicker__quarter-text:not([aria-disabled=true]):hover,
.react-datepicker__year-text:not([aria-disabled=true]):hover {
  border-radius: 0.3rem;
  background-color: #f0f0f0;
}
.react-datepicker__day--today,
.react-datepicker__month-text--today,
.react-datepicker__quarter-text--today,
.react-datepicker__year-text--today {
  font-weight: bold;
}
.react-datepicker__day--highlighted,
.react-datepicker__month-text--highlighted,
.react-datepicker__quarter-text--highlighted,
.react-datepicker__year-text--highlighted {
  border-radius: 0.3rem;
  background-color: #3dcc4a;
  color: #fff;
}
.react-datepicker__day--highlighted:not([aria-disabled=true]):hover,
.react-datepicker__month-text--highlighted:not([aria-disabled=true]):hover,
.react-datepicker__quarter-text--highlighted:not([aria-disabled=true]):hover,
.react-datepicker__year-text--highlighted:not([aria-disabled=true]):hover {
  background-color: rgb(49.8551020408, 189.6448979592, 62.5632653061);
}
.react-datepicker__day--highlighted-custom-1,
.react-datepicker__month-text--highlighted-custom-1,
.react-datepicker__quarter-text--highlighted-custom-1,
.react-datepicker__year-text--highlighted-custom-1 {
  color: magenta;
}
.react-datepicker__day--highlighted-custom-2,
.react-datepicker__month-text--highlighted-custom-2,
.react-datepicker__quarter-text--highlighted-custom-2,
.react-datepicker__year-text--highlighted-custom-2 {
  color: green;
}
.react-datepicker__day--holidays,
.react-datepicker__month-text--holidays,
.react-datepicker__quarter-text--holidays,
.react-datepicker__year-text--holidays {
  position: relative;
  border-radius: 0.3rem;
  background-color: #ff6803;
  color: #fff;
}
.react-datepicker__day--holidays .overlay,
.react-datepicker__month-text--holidays .overlay,
.react-datepicker__quarter-text--holidays .overlay,
.react-datepicker__year-text--holidays .overlay {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 4px;
  border-radius: 4px;
  white-space: nowrap;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.3s ease-in-out;
}
.react-datepicker__day--holidays:not([aria-disabled=true]):hover,
.react-datepicker__month-text--holidays:not([aria-disabled=true]):hover,
.react-datepicker__quarter-text--holidays:not([aria-disabled=true]):hover,
.react-datepicker__year-text--holidays:not([aria-disabled=true]):hover {
  background-color: rgb(207, 82.9642857143, 0);
}
.react-datepicker__day--holidays:hover .overlay,
.react-datepicker__month-text--holidays:hover .overlay,
.react-datepicker__quarter-text--holidays:hover .overlay,
.react-datepicker__year-text--holidays:hover .overlay {
  visibility: visible;
  opacity: 1;
}
.react-datepicker__day--selected, .react-datepicker__day--in-selecting-range, .react-datepicker__day--in-range,
.react-datepicker__month-text--selected,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--selected,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--selected,
.react-datepicker__year-text--in-selecting-range,
.react-datepicker__year-text--in-range {
  border-radius: 0.3rem;
  background-color: #216ba5;
  color: #fff;
}
.react-datepicker__day--selected:not([aria-disabled=true]):hover, .react-datepicker__day--in-selecting-range:not([aria-disabled=true]):hover, .react-datepicker__day--in-range:not([aria-disabled=true]):hover,
.react-datepicker__month-text--selected:not([aria-disabled=true]):hover,
.react-datepicker__month-text--in-selecting-range:not([aria-disabled=true]):hover,
.react-datepicker__month-text--in-range:not([aria-disabled=true]):hover,
.react-datepicker__quarter-text--selected:not([aria-disabled=true]):hover,
.react-datepicker__quarter-text--in-selecting-range:not([aria-disabled=true]):hover,
.react-datepicker__quarter-text--in-range:not([aria-disabled=true]):hover,
.react-datepicker__year-text--selected:not([aria-disabled=true]):hover,
.react-datepicker__year-text--in-selecting-range:not([aria-disabled=true]):hover,
.react-datepicker__year-text--in-range:not([aria-disabled=true]):hover {
  background-color: rgb(28.75, 93.2196969697, 143.75);
}
.react-datepicker__day--keyboard-selected,
.react-datepicker__month-text--keyboard-selected,
.react-datepicker__quarter-text--keyboard-selected,
.react-datepicker__year-text--keyboard-selected {
  border-radius: 0.3rem;
  background-color: rgb(186.25, 217.0833333333, 241.25);
  color: rgb(0, 0, 0);
}
.react-datepicker__day--keyboard-selected:not([aria-disabled=true]):hover,
.react-datepicker__month-text--keyboard-selected:not([aria-disabled=true]):hover,
.react-datepicker__quarter-text--keyboard-selected:not([aria-disabled=true]):hover,
.react-datepicker__year-text--keyboard-selected:not([aria-disabled=true]):hover {
  background-color: rgb(28.75, 93.2196969697, 143.75);
}
.react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--in-range),
.react-datepicker__month-text--in-selecting-range:not(.react-datepicker__day--in-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--in-range),
.react-datepicker__quarter-text--in-selecting-range:not(.react-datepicker__day--in-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--in-range),
.react-datepicker__year-text--in-selecting-range:not(.react-datepicker__day--in-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--in-range) {
  background-color: rgba(33, 107, 165, 0.5);
}
.react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range), .react-datepicker__year--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__month--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__year--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__month--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__year--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__month--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__year--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range) {
  background-color: #f0f0f0;
  color: #000;
}
.react-datepicker__day--disabled,
.react-datepicker__month-text--disabled,
.react-datepicker__quarter-text--disabled,
.react-datepicker__year-text--disabled {
  cursor: default;
  color: #ccc;
}
.react-datepicker__day--disabled .overlay,
.react-datepicker__month-text--disabled .overlay,
.react-datepicker__quarter-text--disabled .overlay,
.react-datepicker__year-text--disabled .overlay {
  position: absolute;
  bottom: 70%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 4px;
  border-radius: 4px;
  white-space: nowrap;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.3s ease-in-out;
}

.react-datepicker__input-container {
  position: relative;
  display: inline-block;
  width: 100%;
}
.react-datepicker__input-container .react-datepicker__calendar-icon {
  position: absolute;
  padding: 0.5rem;
  box-sizing: content-box;
}

.react-datepicker__view-calendar-icon input {
  padding: 6px 10px 5px 25px;
}

.react-datepicker__year-read-view,
.react-datepicker__month-read-view,
.react-datepicker__month-year-read-view {
  border: 1px solid transparent;
  border-radius: 0.3rem;
  position: relative;
}
.react-datepicker__year-read-view:hover,
.react-datepicker__month-read-view:hover,
.react-datepicker__month-year-read-view:hover {
  cursor: pointer;
}
.react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow,
.react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow {
  border-top-color: rgb(178.5, 178.5, 178.5);
}
.react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view--down-arrow {
  transform: rotate(135deg);
  right: -16px;
  top: 0;
}

.react-datepicker__year-dropdown,
.react-datepicker__month-dropdown,
.react-datepicker__month-year-dropdown {
  background-color: #f0f0f0;
  position: absolute;
  width: 50%;
  left: 25%;
  top: 30px;
  z-index: 1;
  text-align: center;
  border-radius: 0.3rem;
  border: 1px solid #aeaeae;
}
.react-datepicker__year-dropdown:hover,
.react-datepicker__month-dropdown:hover,
.react-datepicker__month-year-dropdown:hover {
  cursor: pointer;
}
.react-datepicker__year-dropdown--scrollable,
.react-datepicker__month-dropdown--scrollable,
.react-datepicker__month-year-dropdown--scrollable {
  height: 150px;
  overflow-y: scroll;
}

.react-datepicker__year-option,
.react-datepicker__month-option,
.react-datepicker__month-year-option {
  line-height: 20px;
  width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.react-datepicker__year-option:first-of-type,
.react-datepicker__month-option:first-of-type,
.react-datepicker__month-year-option:first-of-type {
  border-top-left-radius: 0.3rem;
  border-top-right-radius: 0.3rem;
}
.react-datepicker__year-option:last-of-type,
.react-datepicker__month-option:last-of-type,
.react-datepicker__month-year-option:last-of-type {
  -webkit-user-select: none;
  user-select: none;
  border-bottom-left-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem;
}
.react-datepicker__year-option:hover,
.react-datepicker__month-option:hover,
.react-datepicker__month-year-option:hover {
  background-color: #ccc;
}
.react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming,
.react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming,
.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming {
  border-bottom-color: rgb(178.5, 178.5, 178.5);
}
.react-datepicker__year-option:hover .react-datepicker__navigation--years-previous,
.react-datepicker__month-option:hover .react-datepicker__navigation--years-previous,
.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous {
  border-top-color: rgb(178.5, 178.5, 178.5);
}
.react-datepicker__year-option--selected,
.react-datepicker__month-option--selected,
.react-datepicker__month-year-option--selected {
  position: absolute;
  left: 15px;
}

.react-datepicker__close-icon {
  cursor: pointer;
  background-color: transparent;
  border: 0;
  outline: 0;
  padding: 0 6px 0 0;
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  display: table-cell;
  vertical-align: middle;
}
.react-datepicker__close-icon::after {
  cursor: pointer;
  background-color: #216ba5;
  color: #fff;
  border-radius: 50%;
  height: 16px;
  width: 16px;
  padding: 2px;
  font-size: 12px;
  line-height: 1;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  content: "×";
}
.react-datepicker__close-icon--disabled {
  cursor: default;
}
.react-datepicker__close-icon--disabled::after {
  cursor: default;
  background-color: #ccc;
}

.react-datepicker__today-button {
  background: #f0f0f0;
  border-top: 1px solid #aeaeae;
  cursor: pointer;
  text-align: center;
  font-weight: bold;
  padding: 5px 0;
  clear: left;
}

.react-datepicker__portal {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.8);
  left: 0;
  top: 0;
  justify-content: center;
  align-items: center;
  display: flex;
  z-index: 2147483647;
}
.react-datepicker__portal .react-datepicker__day-name,
.react-datepicker__portal .react-datepicker__day,
.react-datepicker__portal .react-datepicker__time-name {
  width: 3rem;
  line-height: 3rem;
}
@media (max-width: 400px), (max-height: 550px) {
  .react-datepicker__portal .react-datepicker__day-name,
  .react-datepicker__portal .react-datepicker__day,
  .react-datepicker__portal .react-datepicker__time-name {
    width: 2rem;
    line-height: 2rem;
  }
}
.react-datepicker__portal .react-datepicker__current-month,
.react-datepicker__portal .react-datepicker-time__header {
  font-size: 1.44rem;
}

.react-datepicker__children-container {
  width: 13.8rem;
  margin: 0.4rem;
  padding-right: 0.2rem;
  padding-left: 0.2rem;
  height: auto;
}

.react-datepicker__aria-live {
  position: absolute;
  -webkit-clip-path: circle(0);
          clip-path: circle(0);
  border: 0;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  width: 1px;
  white-space: nowrap;
}

.react-datepicker__calendar-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
}
.updates-row {
  width: 100%;
  overflow: auto;
  word-break: break-word;
}

.updates-column {
  width: 25%;
  text-align: left;
}
.teachers-profile {
  width: 90%;
  padding: 20px 30px;
  width: calc(90% - 60px);
  margin: 20px 5%;
  background: var(--surface-card);
  border-radius: 4px;
}

.custom-page-center {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.teacher-profile-content {
  width: 100%;
  margin: 20px 0;
  /* border: 1px solid; */
}

.teacher-profile-links {
  width: 100%;
  display: flex;
}

.teacher-profile-image-container {
  width: 300px;
  flex-shrink: 0;
  text-align: center;
}

.teacher-profile-links-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.teacher-profile-image {
  position: relative;
  width: 60%;
  margin: 0 auto;
}

.teacher-profile-image-change {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 10px 0;
  background: rgba(0, 0, 0, 0.5);
  color: var(--text-inverse);
  cursor: pointer;
}

.teacher-profile-image-change input {
  display: none;
}

.teacher-profile-image img {
  width: 100%;
  object-fit: cover;
}

.teacher-profile-details {
  width: 100%;
}

.teachers-intro-text {
  line-height: 24px;
}

.teachers-intro-text span {
  color: var(--brand-secondary);
  cursor: pointer;
}

table {
  border-radius: 10px;
  margin-top: 10px;
}

ol {
  padding: 0 15px;
}

li {
  margin-bottom: 5px;
}

.teacher-table-detail {
  opacity: 0.5;
}

.care-msg-table th,
.care-msg-table td {
  text-align: left;
}

.care-msg-name:hover {
  color: var(--state-info);
  opacity: 0.9;
  text-decoration: underline;
}

.care-msg-name {
  color: var(--text-primary);
  opacity: 0.5;
  text-decoration: none;
}

.care-msg {
  opacity: 0.7;
  font-size: 14px;
  text-align: left;
}

.care-msg-time {
  opacity: 0.5;
  font-size: 11px;
}

#resume-input {
  display: none;
}

#video-input {
  display: none;
}

.user-profile-table td {
  text-align: left;
  font-size: 14px;
}

.user-profile-table tr {
  border: 1px solid var(--border-default);
}

.teacher-story-con {
  display: flex;
  margin-top: 10px;
  width: 100%;
  align-items: center;
  overflow-wrap: break-word;
}

.teacher-story-img img {
  height: auto;
  width: 150px;
  border-radius: 0;
  margin-right: 20px;
}

.teacher-story-link {
  margin-top: 10px;
}

@media (max-width: 700px) {
  .teacher-profile-links {
    flex-direction: column;
    align-items: center;
  }
  .teacher-video {
    flex-direction: column;
  }
}

.teacher-video {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.teacher-video-block {
}

.teacher-video img {
  object-position: center center;
  object-fit: contain;
  width: 100%;
  height: 100%;
}

.teacher-stories {
  width: 100%;
  display: flex;
}

.teacher-stories a {
  width: 46%;
  margin: 0 2%;
  display: block;
  text-decoration: none;
}

.teacher-stories a img {
  object-position: center bottom;
  object-fit: contain;
  width: 100%;
  height: 100%;
}

.teacher-stories a p {
  margin: 0;
}

.teacher-gallery {
  margin-top: 20px;
}

.teacher-gallery-photos {
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

.similar-teachers-modal {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.similar-teachers-subtitle {
  color: var(--text-secondary);
  font-size: 14px;
}

.similar-teachers-fixed-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 8px 16px;
  padding: 12px;
  background: var(--surface-sunken);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  word-break: break-word;
}

.similar-teachers-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 220px));
  gap: 16px;
}

.similar-teachers-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  color: var(--text-primary);
}

.similar-teachers-field select,
.similar-teachers-field input {
  min-height: 40px;
  border: 1px solid var(--input-border);
  color: var(--input-text);
  border-radius: 6px;
  padding: 8px 10px;
  background: var(--input-bg);
}

.similar-teachers-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.similar-teachers-error {
  color: var(--state-error-text);
  background: var(--state-error-bg);
  border: 1px solid var(--state-error);
  border-radius: 6px;
  padding: 10px 12px;
}

.similar-teachers-empty {
  color: var(--text-muted);
  font-size: 14px;
}

.similar-teachers-table-wrap {
  overflow: auto;
  border: 1px solid var(--border-default);
  border-radius: 8px;
}

.similar-teachers-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 980px;
}

.similar-teachers-table th,
.similar-teachers-table td {
  border-bottom: 1px solid var(--border-default);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
}

.similar-teachers-table th {
  background: var(--surface-sunken);
  font-weight: 600;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

.similar-teachers-thumb {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 9999px;
  border: 1px solid var(--border-default);
}

.similar-teachers-link {
  color: var(--state-info);
  text-decoration: none;
  font-weight: 600;
}

.similar-teachers-link:hover {
  text-decoration: underline;
}

.teacher-gallery-photos-single {
  width: 400px;
  margin-left: 20px;
  margin-bottom: 20px;
}
.content-tag-header {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 30px;
}

.content-tag-header input {
  margin: 0 !important;
}

.content-width-full {
  width: 100%;
}

.content-width-half {
  width: 50%;
}

.content-border {
  border: 1px solid #bfbfbf;
}

.category-template-div {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  text-align: left;
  margin-top: 30px;
}

.content-div {
  width: 100%;
  /* border-bottom: 1px solid #bfbfbf; */
  padding: 10px 30px 30px 30px;
}

.inner-div {
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
}

.category-button {
  float: right;
  margin: 0px 0px 10px 0px;
}
.save-button {
  margin-left: auto;
  margin-top: 50px;
}

.create-tag-name h4 {
  text-align: center;
  font-size: 20px;
  margin-top: 0;
}

.content-search-input {
  height: 30px;
  width: 50%;
}

.create-tag-name-button {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 10px;
}

.md-chip {
  display: inline-block;
  background: #e0e0e0;
  padding: 0 12px;
  border-radius: 32px;
  font-size: 13px;
}
.md-chip-hover:hover {
  background: #ccc;
}

.md-chip-clickable {
  cursor: pointer;
}

.md-chip,
.md-chip-icon {
  height: 32px;
  line-height: 32px;
}

.md-chip-icon {
  display: block;
  float: left;
  background: #009587;
  width: 32px;
  border-radius: 50%;
  text-align: center;
  color: var(--text-inverse);
  margin: 0 8px 0 -12px;
}

.md-chip-remove {
  display: inline-block;
  background: #aaa;
  border: 0;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  padding: 0;
  margin: 0 -4px 0 4px;
  cursor: pointer;
  font: inherit;
  line-height: 20px;
}

.md-chip-remove:after {
  color: #e0e0e0;
  content: 'x';
}

.md-chip-remove:hover {
  background: #999;
}

.md-chip-remove:active {
  background: #777;
}

.md-chips {
  padding: 12px 0;
}

.md-chip {
  margin: 0 5px 3px 0;
}

.md-chip-raised {
  box-shadow:
    0 2px 2px 0 rgba(0, 0, 0, 0.14),
    0 1px 5px 0 rgba(0, 0, 0, 0.12),
    0 3px 1px -2px rgba(0, 0, 0, 0.2);
}

input[type='checkbox'] {
  display: none;
}

input[type='checkbox'] + label {
}

:checked + label:before {
  content: '✓';
  transform: scale(1);
  margin-right: 4px;
}

input[type='checkbox']:checked + label {
  transition: all 500ms ease;
  background-color: #1579b3;
  color: var(--text-inverse);
  border-color: #fc6c27;
}

.blog-frame {
  width: 50%;
}

.blog-frame iframe {
  width: 100%;
  height: 100%;
}

.blog-details-link {
  margin: 10px 0 !important;
}
/* PROD-7828 Teacher Payments module — token-based, container-query responsive.
   All colors via src/theme/tokens.css (dark mode works for free). */

.tp-page {
  padding: 16px 20px 40px;
  min-height: 100%;
}

/* ── Header / month bar ── */
.tp-header {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.tp-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin-right: auto;
}
/* ── Tab strip with badges ── */
.tp-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--border-default);
  margin-bottom: 14px;
  overflow-x: auto;
}
.tp-tab {
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  border: none;
  background: transparent;
  border-bottom: 2.5px solid transparent;
  white-space: nowrap;
}
.tp-tab:hover {
  color: var(--brand-primary);
}
.tp-tab.on {
  color: var(--brand-primary);
  border-bottom-color: var(--brand-primary);
  font-weight: 700;
}
.tp-tab-ct {
  display: inline-block;
  background: var(--brand-primary);
  color: var(--text-inverse);
  font-size: 10px;
  font-weight: 700;
  border-radius: 9px;
  padding: 1px 6px;
  margin-left: 6px;
  vertical-align: 1px;
}

/* ── Stat cards ── */
/* flex-wrap, not a stretch-to-fill grid: a card is sized to its content (min/max width) so a short
   row of cards (e.g. 4) doesn't stretch full-width, and a longer row (e.g. Penalties' per-type cards)
   wraps onto the next line with no big leftover gap instead of a mostly-empty second grid row. */
.tp-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}
.tp-stat {
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  padding: 12px 14px;
  flex: 0 1 auto;
  min-width: 130px;
  max-width: 220px;
}
.tp-stat-brand {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
}
.tp-stat-label {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.tp-stat-brand .tp-stat-label {
  color: var(--text-inverse);
  opacity: 0.85;
}
.tp-stat-value {
  font-size: 19px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
}
.tp-stat-brand .tp-stat-value {
  color: var(--text-inverse);
}
.tp-stat-chip {
  display: inline-block;
  background: var(--surface-sunken);
  color: var(--text-muted);
  border-radius: 4px;
  padding: 2px 7px;
  font-size: 10px;
  font-weight: 700;
  margin-top: 6px;
}
.tp-stat-brand .tp-stat-chip {
  background: transparent;
  border: 1px solid var(--text-inverse);
  color: var(--text-inverse);
}

/* ── Cards / section boxes ── */
.tp-card {
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  margin-bottom: 14px;
  overflow: hidden;
}
/* A card holding a lookup: its dropdown must not be clipped at the card edge. */
.tp-card-overflow {
  overflow: visible;
}
.tp-card-overflow > .tp-card-hd {
  border-radius: 8px 8px 0 0;
}
.tp-card-hd {
  padding: 10px 14px;
  background: var(--surface-sunken);
  border-bottom: 1px solid var(--border-default);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.tp-card-hd-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}
.tp-card-hd-sub {
  font-size: 11px;
  color: var(--text-muted);
}

/* ── Filters ── */
.tp-frow {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
  align-items: center;
}
.tp-frow-right {
  margin-left: auto;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.tp-select,
.tp-input,
.tp-textarea {
  padding: 7px 10px;
  border: 1px solid var(--input-border);
  border-radius: 6px;
  font-size: 12px;
  color: var(--input-text);
  background: var(--input-bg);
}
.tp-textarea {
  min-height: 60px;
  resize: vertical;
  width: 100%;
}
.tp-input:focus,
.tp-select:focus,
.tp-textarea:focus {
  background: var(--input-focus-bg);
  border-color: var(--input-focus-border);
  outline: none;
}
/* Hridaya's global select/input base styling is width: 100%; every raw filter-row control would
   otherwise stretch to fill the row and stack as one full-width control per line. A filter control
   takes its natural width and wraps with the rest of the row (module-scoped; global rule untouched). */
.tp-frow > select.tp-select {
  width: auto;
  min-width: 150px;
  flex: 0 1 200px;
}
.tp-frow > input.tp-input {
  width: auto;
  min-width: 180px;
  flex: 0 1 240px;
}

/* ── Buttons ── */
.tp-btn {
  padding: 7px 14px;
  background: var(--brand-primary);
  color: var(--text-inverse);
  border: none;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  font-weight: 600;
  min-height: 32px;
}
.tp-btn:hover {
  background: var(--brand-primary-hover);
}
.tp-btn:disabled,
.tp-btn[aria-disabled='true'],
.tp-btn-out[aria-disabled='true'],
.tp-btn-ghost[aria-disabled='true'] {
  opacity: 0.45;
  cursor: not-allowed;
}
.tp-btn-out {
  padding: 6px 13px;
  background: var(--surface-card);
  color: var(--brand-primary);
  border: 1.5px solid var(--brand-primary);
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  font-weight: 600;
  min-height: 32px;
}
.tp-btn-out:hover {
  background: var(--state-warning-bg);
}
.tp-btn-ghost {
  padding: 6px 12px;
  background: var(--surface-card);
  color: var(--text-secondary);
  border: 1px solid var(--border-default);
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  min-height: 32px;
}
.tp-btn-ghost:hover {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}
.tp-btn-danger {
  background: var(--state-error);
}
.tp-btn-danger:hover {
  background: var(--state-error);
  opacity: 0.9;
}
.tp-link {
  color: var(--brand-primary);
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  background: none;
  border: none;
  font-size: 12px;
  padding: 0;
}

/* ── Pills ── */
.tp-pill {
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 20px;
  font-weight: 600;
  display: inline-block;
  white-space: nowrap;
}

/* ── Banners ── */
.tp-banner {
  border-radius: 7px;
  padding: 9px 13px;
  font-size: 12px;
  margin-bottom: 12px;
  border: 1px solid;
}
.tp-banner-warn {
  background: var(--state-warning-bg);
  border-color: var(--state-warning);
  color: var(--state-warning-text);
}
.tp-banner-error {
  background: var(--state-error-bg);
  border-color: var(--state-error);
  color: var(--state-error-text);
}
.tp-banner-ok {
  background: var(--state-success-bg);
  border-color: var(--state-success);
  color: var(--state-success-text);
}
.tp-banner-info {
  background: var(--state-info-bg);
  border-color: var(--state-info);
  color: var(--state-info-text);
}

/* ── Table + card dual render (container query — concierge_v3 precedent) ── */
.tp-tablewrap {
  container-type: inline-size;
  overflow-x: auto;
}
.tp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.tp-table th {
  padding: 9px 12px;
  text-align: left;
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
  background: var(--surface-sunken);
  border-bottom: 1px solid var(--border-default);
  white-space: nowrap;
}
.tp-table td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--border-default);
  vertical-align: middle;
  color: var(--text-secondary);
  /* The global `td { text-align: center }` (src/common.css) would otherwise center every unaligned
     (text) column; module tables default left, money columns override via tp-col-align-right below. */
  text-align: left;
}
/* Money/number columns: right-aligned, tabular figures, and never split mid-value ("-" / "₹190" on
   separate lines) at narrow widths. */
.tp-table .tp-col-align-right {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* A teacher-identity cell (name + slug line) or any cell with a sub-label wraps awkwardly if left to shrink. */
.tp-table td:has(.tp-card-field-label) {
  min-width: 120px;
}
.tp-table tr:last-child td {
  border-bottom: none;
}
.tp-table tbody tr:hover td {
  background: var(--surface-sunken);
}
/* The entry an IDEMPOTENCY_MISMATCH says was already saved (additional payments). */
.tp-table tbody tr.tp-row-hl td,
.tp-card-item.tp-row-hl {
  background: var(--state-warning-bg);
}
.tp-card-item.tp-row-hl,
.tp-table tbody tr.tp-row-hl td:first-child {
  box-shadow: inset 3px 0 0 var(--state-warning);
}
.tp-cards {
  display: none;
}
@container (max-width: 819px) {
  .tp-table {
    display: none;
  }
  .tp-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
  }
}
.tp-card-item {
  border: 1px solid var(--border-default);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--surface-card);
}
.tp-card-item-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--text-primary);
  font-size: 13px;
  margin-bottom: 8px;
}
.tp-card-item-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 6px 12px;
}
.tp-card-field {
  display: flex;
  flex-direction: column;
  font-size: 12px;
  color: var(--text-secondary);
}
.tp-card-field-label {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.tp-empty {
  padding: 28px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

/* ── Amounts ── */
.tp-pos {
  color: var(--state-success);
  font-weight: 600;
}
.tp-neg {
  color: var(--state-error);
  font-weight: 600;
}
.tp-strong {
  font-weight: 700;
  color: var(--text-primary);
}

/* ── L2 teacher header meta grid ── */
.tp-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  border: 1px solid var(--border-default);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 14px;
  background: var(--surface-card);
}
.tp-meta-field {
  padding: 10px 13px;
  border-right: 1px solid var(--border-default);
  border-bottom: 1px solid var(--border-default);
}
.tp-meta-k {
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 3px;
}
.tp-meta-v {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}

/* ── Final payable ── */
.tp-fpt {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.tp-fpt td {
  padding: 8px 14px;
  border-bottom: 1px solid var(--border-default);
  color: var(--text-secondary);
}
.tp-fpt td:last-child {
  text-align: right;
  font-weight: 600;
  color: var(--text-primary);
}
.tp-fpt tr.tp-fpt-total td {
  font-weight: 800;
  font-size: 14px;
  background: var(--state-warning-bg);
  color: var(--brand-secondary);
}

/* ── Segmented toggle (session review) ── */
.tp-seg {
  display: inline-flex;
  background: var(--surface-sunken);
  border-radius: 9px;
  padding: 3px;
  margin-bottom: 12px;
  gap: 2px;
  /* D110: the run panel's five buckets wrap on a phone rather than overflow. */
  flex-wrap: wrap;
  max-width: 100%;
}
.tp-seg button {
  border: none;
  background: transparent;
  padding: 7px 16px;
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  min-height: 32px;
}
.tp-seg button.on {
  background: var(--surface-card);
  color: var(--brand-primary);
  box-shadow: var(--shadow-card);
}

/* D110: the month run's progress bar. */
.tp-run-progress {
  width: 100%;
  accent-color: var(--brand-primary);
}

/* ── Bulk bar ── */
.tp-bulkbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  background: var(--state-warning-bg);
  border-bottom: 1px solid var(--state-warning);
  font-size: 12px;
  color: var(--state-warning-text);
  flex-wrap: wrap;
}

/* ── Upload zone ── */
.tp-upz {
  border: 2px dashed var(--brand-primary);
  border-radius: 10px;
  padding: 26px 22px;
  text-align: center;
  background: var(--surface-sunken);
  color: var(--text-secondary);
  font-size: 12px;
}

/* ── CSV preview counters ── */
.tp-pvg {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 10px;
}
.tp-pv {
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: 7px;
  padding: 12px;
  text-align: center;
}
.tp-pv-n {
  font-size: 22px;
  font-weight: 800;
}
.tp-pv-l {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* ── Report cards ── */
.tp-reports {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}
.tp-report {
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  padding: 14px;
}
.tp-report-t {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 3px;
}
.tp-report-s {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 10px;
  line-height: 1.4;
}

/* ── Modal internals (rendered inside CustomModal / shared/tp_dialog) ── */
.tp-dialog-x {
  background: none;
  border: none;
  padding: 0 2px;
  font-size: 16px;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
}
.tp-dialog-x:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}
.tp-modal {
  padding: 4px 6px 6px;
  max-height: 76vh;
  overflow-y: auto;
  min-width: min(520px, 88vw);
}
.tp-modal-wide {
  min-width: min(680px, 90vw);
}
.tp-modal h4 {
  font-size: 14px;
  font-weight: 700;
  color: var(--brand-primary);
  margin: 0 0 12px;
}
.tp-ctx {
  background: var(--state-warning-bg);
  border: 1px solid var(--state-warning);
  border-radius: 6px;
  padding: 9px 12px;
  font-size: 12px;
  color: var(--state-warning-text);
  margin-bottom: 12px;
}
.tp-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}
.tp-field label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
}
.tp-field-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
/* Paired fields stack when their form or modal is narrower than a desktop modal (the tables use the
   same container-query approach); 519px is one below .tp-modal's 520px minimum. */
.tp-form,
.tp-modal {
  container-type: inline-size;
}
@container (max-width: 519px) {
  .tp-field-2 {
    grid-template-columns: 1fr;
  }
}
.tp-modal-ft {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--border-default);
  margin-top: 4px;
}
.tp-fpd-box {
  border: 1px solid var(--state-success);
  background: var(--state-success-bg);
  border-radius: 7px;
  padding: 10px 12px;
  margin-bottom: 12px;
  font-size: 12px;
  color: var(--state-success-text);
}

/* Full-screen modals on mobile (pairs with util `.mobile-shell` conventions) */
@media (max-width: 1024px) {
  .tp-modal,
  .tp-modal-wide {
    min-width: 0;
    width: 86vw;
  }
}

/* ── Email preview ── */
.tp-email-preview {
  border: 1px solid var(--border-default);
  border-radius: 7px;
  padding: 16px;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.7;
  background: var(--surface-card);
}
.tp-email-preview table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  margin: 10px 0;
}
.tp-email-preview th,
.tp-email-preview td {
  padding: 6px 10px;
  border: 1px solid var(--border-default);
  text-align: left;
}
.tp-email-preview th {
  background: var(--state-warning-bg);
  color: var(--state-warning-text);
}

/* ── Lifecycle badge ── */
.tp-lifecycle {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 5px;
  letter-spacing: 0.4px;
}
.tp-lifecycle-OPEN {
  background: var(--state-success-bg);
  color: var(--state-success-text);
}
.tp-lifecycle-REVIEW {
  background: var(--state-warning-bg);
  color: var(--state-warning-text);
}
.tp-lifecycle-CLOSED {
  background: var(--surface-sunken);
  color: var(--text-muted);
}

/* ── Month-close switch chip (header) ── */
.tp-switch {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 5px;
  letter-spacing: 0.4px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.tp-switch-on {
  background: var(--state-success-bg);
  color: var(--state-success-text);
}
.tp-switch-off {
  background: var(--surface-sunken);
  color: var(--text-muted);
}
.tp-switch-btn {
  cursor: pointer;
  font-family: inherit;
}
.tp-switch-btn:hover {
  border-color: currentColor;
}
.tp-switch-btn:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}
@media (max-width: 768px) {
  .tp-switch-btn {
    min-height: 44px;
  }
}

/* ── Drill-down day group header ── */
.tp-daygroup {
  background: var(--surface-sunken);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.6px;
}

/* ── "Why this amount?" popover (D-8) — portaled to <body>, fixed at the amount's rect (F5) ── */
.tp-why {
  position: relative;
  display: inline-block;
}
.tp-why-trigger {
  background: none;
  border: none;
  padding: 0;
  cursor: help;
  border-bottom: 1px dotted currentColor;
  font: inherit;
  color: inherit;
}
.tp-why-pop {
  position: fixed;
  /* above CustomModal (999999999), same tier as the portaled date pickers in index.css */
  z-index: 1000000000;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: calc(100vw - 16px);
  box-sizing: border-box;
  padding: 10px 12px;
  text-align: left;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  box-shadow: 0 6px 20px var(--overlay-modal);
}
.tp-why-pop-hd {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-primary);
}
.tp-why-line {
  display: flex;
  gap: 8px;
  font-size: 11px;
  color: var(--text-primary);
}
.tp-why-k {
  flex: 0 0 38%;
  color: var(--text-muted);
  word-break: break-word;
}
.tp-why-v {
  flex: 1;
  word-break: break-word;
}
.tp-why-ft {
  font-size: 10px;
  color: var(--text-muted);
  border-top: 1px solid var(--border-default);
  padding-top: 5px;
}

/* ── R5 contract fix: informational final-payable lines, sign column, uuid text ── */
.tp-fpt tr.tp-fpt-info td {
  font-style: italic;
  color: var(--text-muted);
}
.tp-fpt-sign {
  display: inline-block;
  width: 12px;
  color: var(--text-muted);
}
.tp-mono {
  font-family: monospace;
}

/* ── R5b "Needs attention": readiness header, close/reopen dialogs, daily report ── */
.tp-na-headline {
  font-weight: 700;
  margin-bottom: 3px;
}
/* One teacher-month in the close dialog, or one result row after the batch. */
.tp-na-row {
  border-bottom: 1px solid var(--border-default);
  padding: 8px 2px;
  font-size: 12px;
  color: var(--text-primary);
}
.tp-na-row:last-child {
  border-bottom: none;
}
.tp-na-row-main {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
/* Why a close was refused, and how to fix it — always readable, never truncated. */
.tp-na-blocker {
  font-size: 11.5px;
  color: var(--text-secondary);
  padding: 4px 0 0 22px;
  line-height: 1.45;
}
.tp-na-result {
  font-size: 12px;
  color: var(--text-primary);
  padding: 5px 0;
  border-bottom: 1px solid var(--border-default);
}
.tp-na-scroll {
  max-height: 40vh;
  overflow-y: auto;
  margin-bottom: 12px;
}

/* ── R8 Additional payments: entry form, lookups, row actions ── */
.tp-form {
  padding: 14px;
}
.tp-hint {
  font-size: 10.5px;
  color: var(--text-muted);
}
.tp-err {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--state-error);
}
.tp-picked {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid var(--border-default);
  border-radius: 6px;
  background: var(--surface-sunken);
  font-size: 12px;
  color: var(--text-primary);
}
.tp-lookup {
  position: relative;
}
/* A lookup in a filter row sits level with the selects beside it. */
.tp-frow .tp-field {
  margin-bottom: 0;
}
.tp-lookup-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 20;
  max-height: 240px;
  overflow-y: auto;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: 6px;
  box-shadow: var(--shadow-card);
}
.tp-lookup-opt {
  display: block;
  width: 100%;
  text-align: left;
  padding: 7px 10px;
  font-size: 12px;
  color: var(--text-primary);
  background: none;
  border: none;
  border-bottom: 1px solid var(--border-default);
  cursor: pointer;
}
.tp-lookup-opt:last-child {
  border-bottom: none;
}
.tp-lookup-opt:hover {
  background: var(--surface-sunken);
}
.tp-lookup-empty {
  padding: 8px 10px;
  font-size: 11.5px;
  color: var(--text-muted);
}
.tp-actions {
  display: inline-flex;
  gap: 10px;
  flex-wrap: wrap;
}
.tp-card-amt {
  margin-left: 8px;
}
.tp-dup-list {
  margin: 0 0 12px;
  padding-left: 18px;
  font-size: 12px;
  color: var(--text-secondary);
}

/* ── Reports (R10) ── */
.tp-rp-note {
  font-size: 12px;
  color: var(--text-secondary);
}
.tp-rp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.tp-rp-card {
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tp-rp-card-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}
.tp-rp-card-desc {
  font-size: 12px;
  color: var(--text-muted);
  flex: 1;
}
.tp-rp-card-error {
  font-size: 12px;
  color: var(--state-error-text);
}
.tp-rp-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.tp-rp-blocked {
  border-color: var(--state-error);
}
.tp-rp-blocked-body,
.tp-rp-preview-body {
  padding: 10px 14px;
}
.tp-rp-blockers {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
}
.tp-rp-blocker {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 0;
  border-top: 1px solid var(--border-default);
}
.tp-rp-blocker-main {
  flex: 1;
  min-width: 200px;
}
.tp-rp-blocker-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-primary);
}
.tp-rp-outcome {
  font-size: 12px;
  margin-top: 2px;
}
.tp-rp-outcome-done {
  color: var(--state-success-text);
}
.tp-rp-outcome-skipped {
  color: var(--state-warning-text);
}
.tp-rp-outcome-failed {
  color: var(--state-error-text);
}
.tp-rp-totals {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 8px;
  margin: 12px 0 0;
}
.tp-rp-total {
  background: var(--surface-sunken);
  border-radius: 6px;
  padding: 8px 10px;
}
.tp-rp-total dt {
  font-size: 11px;
  color: var(--text-muted);
}
.tp-rp-total dd {
  margin: 2px 0 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}
/* Phones: 44px touch targets on the report, recalculation, audit and issues-CSV controls. */
@media (max-width: 768px) {
  .tp-rp-actions button,
  .tp-rp-blocked button,
  .tp-rp-close,
  .tp-rp-audit-link,
  .tp-au .tp-select,
  .tp-au .tp-btn-out,
  .tp-au .tp-input,
  .tp-au .tp-link,
  .tp-au .tp-lookup-opt,
  .tp-na-csv {
    min-height: 44px;
  }
  .tp-rp-actions button {
    flex: 1;
  }
}

/* ── D111: sortable table headers (shared/data_table.jsx) ── */
.tp-th-sort {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: none;
  background: transparent;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.tp-th-sort:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}
.tp-th-sort-arrow {
  font-size: 9px;
  min-width: 9px;
}
.tp-row-click {
  cursor: pointer;
}

/* ── D111: Close versions tab ── */
.tp-cv {
  container-type: inline-size;
}
.tp-cv-note {
  display: block;
  font-size: 11px;
}
.tp-cv-warn {
  color: var(--state-warning-text);
}
.tp-cv-reason {
  display: inline-block;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}
.tp-cv-reason-open {
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: left;
}
.tp-cv-recalc {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.tp-cv-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--text-secondary);
  cursor: pointer;
}
.tp-cv-sortbar,
.tp-cv-pairpick {
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
/* The table headers sort on wide screens; the cards get this select instead. */
.tp-cv-sortbar {
  display: none;
}
.tp-cv-pairpick {
  display: flex;
}
@container (max-width: 819px) {
  .tp-cv-sortbar {
    display: flex;
  }
}

/* The versions dialog: every version side by side; one pair at a time when narrow. */
.tp-cv-dialog {
  container-type: inline-size;
}
/* These tables have no card form, so the list's narrow-container rule must not hide them. */
.tp-cv-dialog .tp-table {
  display: table;
}
.tp-cv-versions {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.tp-cv-version {
  border: 1px solid var(--border-default);
  border-radius: 8px;
  padding: 8px 10px;
  background: var(--surface-card);
  font-size: 12px;
  color: var(--text-secondary);
}
.tp-cv-version-hd {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  color: var(--text-primary);
}
.tp-cv-source {
  font-size: 11px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--surface-sunken);
  color: var(--text-muted);
}
.tp-cv-meta {
  overflow-wrap: anywhere;
}
.tp-cv-changes {
  margin: 4px 0 0;
  padding-left: 16px;
}
.tp-table td.tp-cv-changed {
  background: var(--state-warning-bg);
  color: var(--state-warning-text);
  font-weight: 600;
}
.tp-cv-pair {
  display: none;
}
@container (max-width: 639px) {
  .tp-cv-full {
    display: none;
  }
  .tp-cv-pair {
    display: block;
  }
}

/* Phones: 44px touch targets on the Close versions controls. */
@media (max-width: 768px) {
  .tp-cv .tp-seg button,
  .tp-cv .tp-select,
  .tp-cv .tp-input,
  .tp-cv .tp-btn-out,
  .tp-cv .tp-link,
  .tp-cv-check {
    min-height: 44px;
  }
}

/* R14 P4 Rules tab. */
.tp-rx-stage {
  margin: 18px 0 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}
.tp-rx-actions {
  display: inline-flex;
  gap: 12px;
  flex-wrap: wrap;
}
.tp-rx-head {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.tp-rx-ref {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  text-align: left;
}
.tp-rx-actions .tp-link:disabled {
  color: var(--text-muted);
  cursor: not-allowed;
  text-decoration: none;
}

/* Phones: 44px touch targets on the Rules tab controls. */
@media (max-width: 768px) {
  .tp-rx-actions .tp-link,
  .tp-rx-change .tp-btn,
  .tp-rx-change .tp-btn-out,
  .tp-rx-change .tp-link,
  .tp-rx-ref {
    min-height: 44px;
  }
}
.ch-cws {
  position: fixed;
  right: 0;
  bottom: 0;
  height: 0;
  max-width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  z-index: 51;
}

/* On phones/tablets the single chat window goes full-screen (see chat_window.css);
   raise the container's stacking context so it sits above page content. */
@media (max-width: 1024px) {
  .ch-cws {
    z-index: 100000;
  }
}
.c-c-window.ch_new button {
  cursor: pointer;
  font-family: 'Rubik', sans-serif !important;
  font-weight: 400;
}

.open-chat-attach-overlay {
  position: fixed;
  top: 0;
  left: 0;
  background-color: transparent;
  z-index: 9;
  width: 100%;
  height: 100vh;
}

.open-attachment-div button img {
  width: 14px;
  margin-right: 6px;
}

.pin-it {
  right: 8px;
  position: absolute;
  top: 40%;
  width: 20px;
}

.my-chat .pin-it {
  left: 15px;
  right: auto;
  top: 30%;
}

.c-c-window.ch_new {
  position: relative;
  width: 320px;
  margin: 0 30px;
  height: 560px;
  background: var(--surface-card);

  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  font-family: 'Rubik', sans-serif !important;
  font-weight: 400;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.05);
  border: 1px solid rgb(0 0 0 / 0.08);
}

.c-c-window.ch_new.cur_chat_focus {
  border: 1px solid var(--state-success);
}

.ch_status_text {
  opacity: 0.6;
  margin-top: 2px;
  display: block;
  font-size: 12px;
  font-family: 'Rubik', sans-serif !important;
}

.parting-date::before {
  display: inline-block;
  content: '';
  width: 30%;
  height: 1px;
  background: linear-gradient(to right, var(--surface-card) 0%, rgb(151 151 151 / 0.4) 100%);
  margin-right: 6px;
}

.parting-date {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 400;
  color: rgb(0 0 0 / 0.2);
  margin-bottom: 18px;
  margin-top: 18px;
  font-family: 'Rubik', sans-serif !important;
}

.parting-date::after {
  display: inline-block;
  content: '';
  width: 30%;
  height: 1px;
  background: linear-gradient(to right, rgb(151 151 151 / 0.4) 0%, var(--surface-card) 100%);
  margin-left: 6px;
}

/* date divider text is near-black (rgb(0 0 0 / 0.2)) — invisible on dark surface */
.dark .parting-date {
  color: rgb(255 255 255 / 0.45);
}

.common-overlay-close {
  position: fixed;
  width: 100%;
  height: 100vh;
  background-color: transparent;
  z-index: 3;
  top: 0;
  left: 0;
}

.emoji-cont {
  width: 100% !important;
  position: absolute !important;
  z-index: 999999;
  bottom: 56px;
  left: 0;
  background-color: var(--surface-card);
}

.emoji-cont::after {
  content: '';
  width: 0;
  height: 0;
  float: right;
  border: 10px solid var(--state-error);
  border-color: transparent transparent #ffffff00 var(--surface-card);
  transform-origin: 0 0;
  transform: rotate(-270deg);
  right: -5px;
  position: absolute;
  bottom: -17px;
  border-radius: 7px;
}

.open-attachment-div {
  position: absolute !important;
  z-index: 999999;
  bottom: 56px;
  right: 5px;
  background-color: var(--surface-card);
  border: 1px solid var(--surface-sunken);
  border-radius: 5px;
  box-sizing: border-box;
  box-shadow: 0 5px 10px var(--surface-sunken);
}

.open-attachment-div::after {
  content: '';
  width: 0;
  height: 0;
  float: right;
  border: 10px solid var(--state-error);
  border-color: transparent transparent #ffffff00 var(--surface-card);
  transform-origin: 0 0;
  transform: rotate(-270deg);
  right: -12px;
  position: absolute;
  bottom: -17px;
  border-radius: 7px;
}

.open-attachment-div button {
  position: relative;
  width: 100%;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background-color: transparent;
  box-shadow: none;
  border: 0px;
  outline: 0px;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0px 10px;
  border-bottom: 1px solid rgb(129 138 150 / 0.1);
}

.open-attachment-div button input {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  height: 34px;
  background-color: transparent;
  box-shadow: none;
  border: 0px;
  outline: 0px;
  z-index: 0;
  opacity: 0;
  cursor: pointer;
}

.emoji-head {
  position: relative;
}

.emoji-head button {
  background-color: #fff4e4;
  box-shadow: none;
  outline: 0px;
  padding: 0px;
  border: 0px;
  position: absolute;
  right: 6px;
  border: 1px solid #5b5b5b24;
  width: 28px;
  height: 28px;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  top: -14px;
  /* box-shadow: 0 5px 10px #00000029; */
  z-index: 9;
}

.emoji-head button img {
  width: 10px;
  filter: invert(1);
  opacity: 0.4 !important;
}

aside.emoji-picker-react {
  margin: auto;
  width: 310px !important;
  /* width: 100% !important;
    position: absolute !important;
    z-index: 999999;
    bottom: 65px;
    left: 0; */
  border-radius: 8px !important;
}

.c-c-window-min.ch_new {
  width: 320px;
  margin: 0 30px;
  background: var(--surface-card);
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.05);
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  font-family: 'Rubik', sans-serif !important;
  font-weight: 400;
  font-size: 14px;
  color: var(--text-secondary);
  cursor: pointer;
}

.ch_new .c-c-header {
  width: 100%;
  height: 50px;
  background: var(--surface-card);
  display: flex;
  align-items: center;
  font-family: 'Rubik', sans-serif !important;
  font-weight: 400;
  font-size: 14px;
  position: relative;
  z-index: 9;
  border-bottom: 1px solid rgb(0 0 0 / 14%);
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}

.ch_new .c-c-header.c-c-header-o {
  background: var(--surface-card);
  border-bottom: 1px solid rgb(0 0 0 / 14%);
  font-family: 'Rubik', sans-serif !important;
  font-weight: 400;
  font-size: 14px;
  color: var(--text-secondary);
}

.ch_new .c-c-header-c {
  width: calc(100% - 70px);
  height: 100%;
  display: flex;
  align-items: center;
  overflow: visible;
  font-family: 'Rubik', sans-serif !important;
  font-weight: 400;
  font-size: 14px;
  color: var(--text-secondary);
}

.c-c-header-c p.desk-chat-p {
  width: calc(100% - 30px);
  padding-left: 0px;
}

.ch_new .c-c-header-c p b {
  color: var(--text-secondary);
  font-family: 'Rubik', sans-serif !important;
  font-weight: 500;
  font-size: 14px;
  display: flex;
  align-items: center;
  position: relative;
  display: block;
  white-space: nowrap;
  width: 260px;
  text-overflow: ellipsis;
  overflow: hidden;
}

.ch_new .c-c-header-c p.desk-chat-p b {
  width: 100%;
  overflow: visible;
}

.ch_new .c-c-header-c p.ch-sender-name b {
  cursor: pointer;
}

.ch_new .c-c-header-c p.ch-sender-name:hover b {
  background: rgb(4 179 148 / 0.1);
}

.ch_new .c-c-header-c p.ch-sender-name.pt_no b {
  pointer-events: none;
}

.ch_new .c-c-header-c p b img {
  /* position: absolute; */
  /* right: -12px; */
  display: block;
  /* top: 4px; */
  vertical-align: middle;
  margin-left: 4px;
}

.ch_new .c-c-header-c p.desk-chat-p b img {
  display: inline-block;
  margin-left: 4px;
  position: relative;
  top: -1px;
}

.ch_new .c-c-header-c p.desk-chat-p b i {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  width: 100%;
  font-style: normal;
  display: inline-block;
}

.ch_new .c-c-header-c p span {
  opacity: 0.6;
  color: var(--text-secondary);
  font-weight: 400;
  font-family: 'Rubik', sans-serif !important;
}

.ch_new .c-c-header-img {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--surface-card);
  margin-left: 16px;
  cursor: pointer;
}

.ch_new .c-c-header-img.pt_no {
  pointer-events: none;
}

.ch_new .c-c-header-img img {
  width: 30px;
  height: 30px;
  border-radius: 100%;
}

.ch_new .c-c-header-i {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  padding-right: 6px;
  width: 70px;
}

.ch_new .c-c-header-i img {
  cursor: pointer;
  padding: 0px;
  opacity: 0.5;
}

.chat-c-btn {
  background: transparent;
  border: 0px;
  outline: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0px;
  border-radius: 100%;
  position: relative;
  /* margin-right: 10px; */
}

.chat-tooltip-ic {
  visibility: hidden;
  width: auto;
  background-color: #2c3956;
  color: rgb(255 255 255 / 0.85);
  text-align: center;
  border-radius: 6px;
  padding: 12px 10px;
  position: absolute;
  z-index: 1;
  top: -50px;
  left: -40px;
  /* margin-left: -60px; */
  font-size: 12px;
  opacity: 0;
  min-width: 100px;
  font-weight: 400;
  font-family: 'Rubik', sans-serif !important;
  width: -webkit-max-content;
  width: max-content;
}

.chat-tooltip-ic::after {
  content: '';
  position: absolute;
  bottom: -14px;
  left: 50%;
  margin-left: -5px;
  border-width: 8px;
  border-style: solid;
  border-color: transparent transparent #2c3956 transparent;
  transform: rotate(-180deg);
  border-radius: 4px;
}

.chat-tooltip-ic.pin-tooltip-cls::before {
  content: '';
  position: absolute;
  top: -14px;
  right: 8px;
  margin-left: -5px;
  border-width: 8px;
  border-style: solid;
  border-color: transparent transparent #2c3956 transparent;
  transform: rotate(0deg);
  border-radius: 4px;
}

.chat-c-btn:hover {
  background-color: rgb(4 179 148 / 0.1);
}

.chat-c-btn:hover .chat-tooltip-ic {
  visibility: visible;
  animation: ch-tooli-ani ease-in 0.3s 0s 1 forwards;
}

.c-c-header-c:hover .chat-tooltip-ic {
  visibility: visible;
  animation: ch-tooli-ani ease-in 0.3s 0s 1 forwards;
}

.chat-tooltip-ic.open-profile {
  left: -26px;
  font-weight: 400 !important;
}

.chat-tooltip-ic.pin-tooltip {
  left: -70px;
}

.chat-tooltip-ic.pin-tooltip-cls {
  left: initial;
  right: 0;
  top: initial;
}

.chat-tooltip-ic.pin-tooltip-cls::after {
  display: none;
}

.chat-tooltip-ic.pin-tooltip::after {
  left: 64%;
}

.pin-chat-head button.pin-club:hover .chat-tooltip-ic.pin-tooltip.open_tl {
  visibility: visible;
  animation: ch-tooli-ani ease-in 0.3s 0s 1 forwards;
}

.pin-chat-head button.pin-close:hover .chat-tooltip-ic.pin-tooltip-cls {
  visibility: visible;
  animation: ch-tooli-ani-btm ease-in 0.3s 0s 1 forwards;
}

.c-c-header-c .ch-sender-name b:hover .chat-tooltip-ic.open-profile {
  visibility: visible;
  animation: ch-tooli-ani-pic ease-in 0.3s 0s 1 forwards;
}

@keyframes chat-scroll-ani {
  0% {
    opacity: 0;
    transform: scale(2);
  }

  100% {
    opacity: 1;

    transform: scale(1);
  }
}

@keyframes ch-tooli-ani {
  from {
    top: -29px;
    opacity: 0;
  }

  to {
    top: -49px;
    opacity: 1;
  }
}

@keyframes ch-tooli-ani-btm {
  from {
    bottom: -29px;
    opacity: 0;
  }

  to {
    bottom: -44px;
    opacity: 1;
  }
}

@keyframes ch-tooli-ani-pic {
  from {
    top: -29px;
    opacity: 0;
  }

  to {
    top: -46px;
    opacity: 1;
  }
}

.chat-c-btn.last-btn {
  margin-right: 0px;
}

.ch_new .c-c-header-i img.c-c-min {
  width: 24px;
}

.ch_new .c-c-header-i img.c-c-expand {
  width: 17px;
}

.ch_new .c-c-header-i img.close_min_chat {
  width: 12px;
}

.ch_new .c-c-badge {
  height: 25px;
  width: 25px;
  border-radius: 25px;
  background-color: var(--state-error);
  color: var(--text-inverse);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-family: 'Rubik', sans-serif !important;
  font-weight: 400;
}

.ch_new .c-c-badge-null {
  opacity: 0;
}

.ch_new .c-i-o {
  filter: invert(1);
}

.ch_new .close_min_chat {
  filter: invert(1);
  opacity: 0.4 !important;
}

.ch_new .c-c-content {
  width: 100%;
  height: calc(100% - 50px);
  position: relative;
  display: flex;
  flex-direction: column;
  padding-top: 6px;
  font-family: 'Rubik', sans-serif !important;
  font-weight: 400;
}

.chat-content {
  height: calc(100% - 50px);
  font-family: 'Rubik', sans-serif !important;
}

.ch_new .c-c-loading {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ch_new .c-c-loading div {
  /* width: 30px; */
  /* height: 30px; */
  animation: loading 1s linear infinite;
  -webkit-animation: loading 1s linear infinite;
  border-radius: 50%;
  border: 40px solid rgb(66, 84, 222, 0.2);
}

@keyframes loading {
  0% {
    border: 0px solid rgb(66, 84, 222, 0.2);
  }

  50% {
  }

  100% {
    border: 40px solid rgb(66, 84, 222, 0.2);
  }
}

.ch_new .c-c-i-c {
  min-height: 56px;
  border-top: 1px solid #d4d5d6;
  height: auto;
  position: relative;
  width: 100%;
  bottom: 0px;
  background-color: var(--surface-card);
  z-index: 9;
  display: flex;
  align-items: flex-end;
  padding: 8px;
  padding-right: 0px;
}

.chat-tooltip {
  visibility: hidden;
  width: auto;
  background-color: #2c3956;
  color: rgb(255 255 255 / 0.85);
  text-align: center;
  border-radius: 6px;
  padding: 12px 14px;
  position: absolute;
  z-index: 1;
  top: -39px;
  left: 37%;
  margin-left: -60px;
  font-size: 12px;
  opacity: 0;
}

.chat-tooltip-emoji {
  visibility: hidden;
  width: auto;
  background-color: #2c3956;
  color: rgb(255 255 255 / 0.85);
  text-align: center;
  border-radius: 6px;
  padding: 12px 14px;
  position: absolute;
  z-index: 1;
  top: -39px;
  right: 44px;
  margin-left: -60px;
  font-size: 12px;
  opacity: 0;
  font-weight: 400;
  font-family: 'Rubik', sans-serif !important;
}

.chat-tooltip-attachment {
  visibility: hidden;
  width: auto;
  background-color: #2c3956;
  color: rgb(255 255 255 / 0.85);
  text-align: center;
  border-radius: 6px;
  padding: 12px 10px;
  position: absolute;
  z-index: 1;
  top: -39px;
  right: 6px;
  margin-left: -60px;
  font-size: 12px;
  opacity: 0;
  font-weight: 400;
  font-family: 'Rubik', sans-serif !important;
  min-width: 167px;
}

.chat-tooltip.show {
  visibility: visible;
  animation: ch-tool-ani ease-in 0.3s 0s 1 forwards;
}

.ch_emoji:hover .chat-tooltip-emoji {
  visibility: visible;
  animation: ch-tool-ani ease-in 0.3s 0s 1 forwards;
}

.ch_attahment:hover .chat-tooltip-attachment {
  visibility: visible;
  animation: ch-tool-ani ease-in 0.3s 0s 1 forwards;
}

@keyframes ch-tool-ani {
  from {
    top: -29px;
    opacity: 0;
  }

  to {
    top: -39px;
    opacity: 1;
  }
}

.chat-tooltip::after,
.chat-tooltip-emoji::after,
.chat-tooltip-attachment::after {
  content: '';
  position: absolute;
  bottom: -14px;
  left: 50%;
  margin-left: -5px;
  border-width: 8px;
  border-style: solid;
  border-color: transparent transparent #2c3956 transparent;
  transform: rotate(-180deg);
  border-radius: 4px;
}

.chat-tooltip-emoji::after,
.chat-tooltip-attachment::after {
  left: initial;
  right: 10px;
}

.ch_new .textarea-cont {
  width: calc(100% - 84px);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  border: 1px solid #d4d5d6;
  border-radius: 25px;
  /* overflow: hidden; */
}

.ch_new .c-c-i-c .textarea {
  display: block;
  overflow: auto;
  resize: vertical;
  min-height: 38px;
  max-height: 80px;
  width: calc(100% - 50px);
  font-size: 12px;
  padding: 2px;
  border: 0px;
  outline: 0px;
  padding: 11px 14px;
  line-height: 1.2;
  background-color: transparent;
  margin: 0px;
  box-sizing: border-box;
  font-family: 'Rubik', sans-serif !important;
  resize: none;
  font-weight: 400;
}

.ch_new .textarea-cont:focus-within {
  border: 1px solid #6db5ff !important;
  background-color: rgba(194, 208, 228, 0.1);
  outline: 0px;
}

.ch_new textarea::first-letter {
  text-transform: capitalize !important;
}

.ch_new .textarea-cont .send-btn-c {
  position: absolute;
  width: 50px;
  height: 16px;
  border-left: 1px solid #cccccc73;
  padding-left: 8px;
  color: var(--state-success);
  display: flex;
  align-items: center;
  right: 0;
  font-size: 13px;
  cursor: pointer;
  bottom: 11px;
  opacity: 0;
  font-weight: 400;
  font-family: 'Rubik', sans-serif !important;
  animation: sanip 0.2s linear 1 forwards;
}

@keyframes sanip {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.ch_new .c-c-i-c .textarea.reply_focus {
  border: 1px solid var(--state-success);
}

.ch_new .c-c-i-c .textarea span {
  font-size: 12px !important;
  opacity: 0.8 !important;
  font-family: 'Rubik', sans-serif !important;
  line-height: 1.4;
}

.ch-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
}

.ch-btn.ch_send {
  background-color: #ccc;
}

.ch-btn img {
  width: 8px;
}

.ch_emoji {
  margin-right: 0px;
  margin-left: 4px;
  cursor: pointer;
  width: 38px;
  height: 38px;
  border-radius: 100%;
}

.ch_attahment {
  margin-right: 4px;
  margin-left: 0px;
  cursor: pointer;
  width: 38px;
  height: 38px;
  border-radius: 100%;
  position: relative;
}

.ch_attahment input {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-color: transparent;
  box-shadow: none;
  border: 0px;
  outline: 0px;
  z-index: 1;
  opacity: 0;
  cursor: pointer;
}

.ch_emoji img {
  width: 28px;
}

.ch_attahment img {
  width: 20px;
}

.ch_emoji:hover,
.ch_attahment:hover {
  background-color: rgb(4 179 148 / 0.1);
}

.ch_emoji.ch_emoji-clicked,
.ch_attahment.ch_attach_clicked {
  background-color: rgb(4 179 148 / 0.2);
}

.emoji-picker-react input.emoji-search {
  border: 1px solid #6db5ff !important;
  border-radius: 30px !important;
  background-color: rgba(194, 208, 228, 0.1);
}

.ch_new .c-c-i-c-s {
  width: 20%;
  height: 73%;
  text-align: center;
  margin-top: 10px;
  cursor: pointer;
  color: #4945de;
}

.ch_new .c-c-messages {
  width: 100%;
  min-height: 80px;
  /* min-height: calc(100% - 65px); */
  overflow: auto;
  padding: 0px 6px 0px;
  margin-top: 6px;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 80px;
  background-image: url('https://images.myyogateacher.com/bg_chat_a.png');
  background-size: 200px;
  background-repeat: repeat;
  overflow-y: auto;
  overflow-x: hidden;
  /* position: relative; */
}

/* The bg_chat_a.png watermark is a light asset; in dark mode drop it for a
   proper dark surface so the message area isn't blinding. */
.dark .ch_new .c-c-messages {
  background-image: none;
  background-color: var(--surface-page);
}

.ch_new .chat-virtuoso {
  width: 100%;
  height: 100%;
  min-height: 80px;
}

.c-c-load-older {
  display: flex;
  justify-content: center;
  padding: 8px 0 10px;
}

.c-c-load-older button {
  border: 1px solid var(--border-default);
  border-radius: 14px;
  background: var(--surface-card);
  color: var(--brand-primary);
  font-size: 13px;
  font-weight: 600;
  padding: 5px 14px;
  cursor: pointer;
}

.c-c-load-older button:hover:enabled {
  color: var(--brand-primary-hover);
}

.c-c-load-older button:disabled {
  color: var(--text-muted);
  cursor: default;
}

.ch_new .c-c-messages::-webkit-scrollbar,
.pinned-mess-tab.open::-webkit-scrollbar {
  width: 6px;
  background-color: transparent;
}

.ch_new .c-c-messages::-webkit-scrollbar-thumb,
.pinned-mess-tab.open::-webkit-scrollbar-thumb {
  /* background: #ebebeb; */
  height: 56px;
  border-radius: 20px;
  background: #adadad70;
}

.ch_new .c-c-messages::-webkit-scrollbar-thumb:hover,
.pinned-mess-tab.open::-webkit-scrollbar-thumb:hover {
  background: #586383;
}

.ch_new .c-c-messages.cc-stop-back-scroll {
  overflow: hidden;
}

.pinned-mess-tab {
  width: calc(100% - 12px);
  padding: 0px 0px;
  background-color: #fff7ea;
  border-radius: 8px;
  z-index: 9;
  height: 47px;
  position: relative;
  top: 0;
  margin: auto;
}

.pinned-mess-tab.open {
  position: absolute;
  /* width: 100%; */
  left: 6px;
  top: 6px;
  height: 98%;
  overflow-x: hidden;
  overflow-y: scroll;
  padding-bottom: 100px;
}

.pin-chat-head {
  width: 100%;
  display: flex;
  align-items: center;
  background-color: #fff7ea;
  font-size: 13px;
  padding: 12px 10px;
  position: -webkit-sticky;
  position: sticky;
  border-radius: 8px;
  cursor: pointer;
  top: 0;
  z-index: 9;
  color: var(--text-secondary);
  font-weight: 400;
  font-family: 'Rubik', sans-serif !important;
}

.pin-head-text {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  font-family: 'Rubik', sans-serif !important;
}

.pinned-mess-tab.open .pin-chat-head {
  border-bottom: 1px solid rgb(151 151 151 / 0.3);
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  font-family: 'Rubik', sans-serif !important;
}

.pin-chat-head span {
  display: flex;
  background-color: #fbe9ca;
  min-width: 22px;
  min-height: 22px;
  border-radius: 20px;
  margin-right: 9px;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  color: var(--text-secondary);
  /* padding: 4px 7px; */
  line-height: 1;
}

.pin-chat-head button {
  box-shadow: none;
  background: transparent;
  border: 0px;
  outline: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  position: absolute;
  right: 7.5px;
  cursor: pointer;
  padding: 0px;
  top: 7.5px;
  border-radius: 100%;
}

.pinned-mess-tab.open button {
  position: absolute;
  right: 0px;
}

.pin-chat-head button:hover {
  background-color: rgb(4 179 148 / 0.1);
}

.pin-chat-head button img.close-pin {
  width: 12px;
  filter: invert(1);
  opacity: 0.4 !important;
}

.pin-chat-head button img.club {
  width: 12px;
  display: block;
  vertical-align: middle;
  top: 1px;
  position: relative;
}

.open-all-pins {
  width: 100%;
  padding: 5px 5px;
  /* border-top: 1px solid rgb(151 151 151 / 0.3); */
}

.pin-remove-btn {
  position: absolute;
  right: 8px !important;
  background-color: #b3b0c0;
  color: var(--text-inverse);
  padding: 3px 9px;
  font-size: 10px;
  border-radius: 14px;
  font-weight: 300;
  border: 0px;
  outline: 0px;
  box-shadow: none;
}

.my-chat .pin-remove-btn {
  right: auto;
  left: 8px;
}

.open-all-pins .friend-chat:hover .pin-remove-btn,
.open-all-pins .my-chat:hover .pin-remove-btn {
  background-color: var(--state-error);
}

.ch_new .c-c-m-l {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 30px;
  margin-bottom: 6px;
  position: relative;
  width: 100%;
}

.ch_new .c-c-m-l.pos-abs {
  position: absolute;
  bottom: 6px;
}

.ch_new .c-c-m-l.pos-rel {
  position: absolute;
  margin-bottom: 6px;
}

.ch_new .c-c-m-l .c-c-m-l p {
  margin: 10px 0;
}

.ch_new .c-c-m-l-p {
  width: 30px;
  height: 30px;
  margin-right: 0px;
  margin-left: 0;
  flex-shrink: 0;
  border-radius: 100%;
}

.ch_new .c-c-m-l-n-p {
  display: flex;
}

.ch_new .c-c-m-r {
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
}

.ch_new .c-c-m-r p {
  margin: 10px 0;
}

.ch_new .c-c-m-l-typ {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0px 0 0px;
  padding: 0px 0;
  /* color: #8f8f8f;
      font-size: 12px; */
}

.ch_new .chat-scroll-to {
  height: 50px;
  width: 50px;
  /* background-color: var(--surface-card); */
  box-shadow: 0 0 14px 0 rgba(171, 171, 171, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 20px;
  bottom: 10px;
  z-index: 4;
  border-radius: 100%;
  cursor: pointer;
  /* animation: chat-scroll-ani 0.5s ease-in 0s 1 forwards; */
  animation: slide-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.ch_new .chat-scroll-to img {
  transform: rotate(90deg);
  opacity: 0.5;
  position: relative;
  top: 2px;
  width: 12px;
  display: block;
}

/**
   * ----------------------------------------
   * animation slide-top
   * ----------------------------------------
   */

@keyframes slide-top {
  0% {
    background-color: rgb(153 217 205);
    transform: translateY(0);
  }

  100% {
    background-color: var(--surface-card);
    transform: translateY(-70px);
  }
}

.friend-chat {
  width: 100%;
  padding: 10px 10px 22px;
  border-radius: 4px;
  position: relative;
  margin-bottom: 10px;
}

.ch_new .c-c-messages div.sel:last-child {
  margin-bottom: 50px;
}

.open-all-pins .friend-chat {
  /* cursor: pointer; */
  padding: 10px 5px 22px;
}

.friend-chat.reply_f_chat {
  background-color: #e9e9e9;
  border-left: 3px solid var(--state-success);
  position: -webkit-sticky;
  position: sticky;
  /* left: 6px; */
  /* bottom: 65px; */
  width: calc(100% - 12px);
  padding: 0px;
  bottom: 0;
  left: 0;
  margin: 0px auto 6px;
  z-index: 2;
}

.friend-chat.reply_f_chat:hover {
  background-color: #e9e9e9;
}

.reply_f_chat .chat-cmt-box {
  padding: 4px 8px 4px;
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.reply_f_chat .chat-user-name {
  margin: 6px 0px 6px;
}

.close_rep_chat {
  padding: 0px;
  width: 20px;
  height: 20px;
  background-color: var(--surface-card);
  border-radius: 100%;
  border: 0px;
  outline: 0px;
  margin: 0px;
  position: absolute;
  right: 8px;
  top: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close_rep_chat img {
  width: 8px;
  filter: invert(1);
  opacity: 0.4;
}

.rep-rep-frnd {
  background-color: #ffffff30;
  border-left: 3px solid #ffffff8a;
  width: 100%;
  padding: 1px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}

.rep_from_name {
  margin: 0px 0px 0px;
  font-size: 12px;
  color: #006b61;
  font-weight: 400;
}

.my-chat {
  width: 100%;
  padding: 10px 10px 22px;
  margin-bottom: 10px;
  border-radius: 4px;
  position: relative;
  display: flex;
  justify-content: flex-end;
}

.my-chat.row-it {
  display: flex;
  flex-direction: row;
}

.open-all-pins .my-chat {
  cursor: pointer;
  padding: 6px 5px;
}

.chat-dot-btn {
  background-color: rgb(4 179 148 / 0.1);
  border: 0px;
  outline: 0px;
  display: flex;
  align-items: center;
  padding: 0px;
  color: rgba(0, 0, 0, 0.75);
  opacity: 0;
  top: 0px;
  width: 30px;
  height: 30px;
  line-height: 30px;
  border-radius: 100%;
  justify-content: center;
  margin-right: 10px;
}

.chat-dot-btn img {
  width: 14px;
}

.friend-chat:hover,
.my-chat:hover {
  background-color: rgb(204 204 204 / 0.1);
}

.open-all-pins .friend-chat:hover,
.open-all-pins .my-chat:hover {
  background-color: #ffffffa3;
}

.friend-chat.sel,
.my-chat.sel {
  background-color: rgb(204 204 204 / 0.1);
  z-index: 3;
}

.friend-chat.sel-pin,
.my-chat.sel-pin {
  background-color: rgb(204 204 204 / 0.1);
  z-index: 2;
}

.friend-chat.sel-pin.sel,
.my-chat.sel-pin.sel {
  z-index: 3;
}

.friend-chat:hover .chat-dot-btn,
.my-chat:hover .chat-dot-btn.chat-me {
  opacity: 1;
}

.friend-chat.sel .chat-dot-btn {
  opacity: 1;
}

.my-chat.sel .chat-dot-btn.chat-me {
  opacity: 1;
}

.chat-frnd-div {
  width: calc(80% + 60px);
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

.chat-my-div {
  width: 100%;
  max-width: calc(80% + 30px);
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

.open-all-pins .chat-frnd-div,
.open-all-pins .chat-my-div {
  width: calc(80%);
}

.chat-bt-div {
  position: relative;
  z-index: 2;
}

.chat-frnd-cond {
  width: 100%;
}

.chat-frnd-cond.row-it {
  /* display: flex;
      flex-direction: row-reverse; */
}

.chat-frnd-cond.row-it .frnd-cmt-outer {
  position: absolute;
  right: 2px;
  top: 40px;
}

.frnd-cmt-outer .chat-bt-div {
  margin-left: 10px;
  margin-right: 0px;
}

.chat-user-pic {
  width: 30px;
  height: 30px;
  border-radius: 100%;
  background-color: #f3f4fd;
}

.chat-frnd-mess {
  width: 100%;
  max-width: calc(100% - 30px);
  padding-left: 8px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.frnd-cmt-up {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.frnd-cmt-outer {
  display: flex;
  flex-direction: row;
}

.my-cmt-outer {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}

.chat-my-mess {
  width: 100%;
  /* position: relative;
      display: flex;
      flex-direction: column;
      align-items: flex-end; */
}

.chat-my-mess.row-it {
  /* display: flex;
      flex-direction: row; */
}

.chat-my-mess.row-it .my-cmt-outer {
  position: absolute;
  left: 25px;
}

.chat-user-name {
  margin: 5px 0px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  opacity: 0.5;
}

/* On the dark message surface the 0.5 opacity washes out — raise it for legibility. */
.dark .chat-user-name {
  opacity: 0.8;
}

.chat-user-name.chat-me {
  text-align: right;
}

.chat-cmt-box {
  font-size: 14px;
  margin: 0px 0 6px;
  max-width: 100%;
  background: var(--surface-sunken);
  color: var(--text-primary);
  padding: 10px;
  border-radius: 10px;
  border-top-left-radius: 0;
  text-align: left;
  word-wrap: break-word;
  line-height: 1.4;
  word-break: break-word;
  cursor: pointer;
  font-weight: 400;
  font-family: 'Rubik', sans-serif !important;
}

.chat-cmt-box a {
  color: var(--text-primary) !important;
}

.chat-cmt-box a:active {
  color: var(--text-primary) !important;
}

.chat-cmt-box.chat-me a {
  color: var(--text-inverse) !important;
}

.chat-cmt-box.chat-me a:active {
  color: var(--text-inverse) !important;
}

.chat-cmt-box.chat-me {
  border-top-left-radius: 10px;
  border-top-right-radius: 0;
  background-color: var(--state-success);
  color: var(--text-inverse);
  border: 0px;
}

.open-all-pins .chat-cmt-box.chat-me {
  display: -webkit-inline-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 7;
  overflow: hidden;
  padding: 3px 10px;
}

.open-all-pins .chat-cmt-box {
  display: -webkit-inline-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 7;
  overflow: hidden;
  padding: 3px 10px;
}

.chat-time {
  color: #0000003d;
  font-weight: 400;
  font-size: 10px;
  margin: 6px 0px 0px;
  text-align: left;
  padding-left: 0px;
  min-width: 55px;
  position: absolute;
  left: 52px;
  display: flex;
  align-items: center;
  text-transform: uppercase;
  bottom: 4px;
}

.chat-time img {
  margin-left: 6px;
}

.chat-time.chat-me {
  text-align: right;
  right: 10px;
  padding-left: 0px;
  left: initial;
}

.chat-frnd-cond .chat-time {
  bottom: 4px;
}

/* timestamp is near-black (#0000003d) — invisible on dark surface */
.dark .chat-time {
  color: rgb(255 255 255 / 0.5);
}

.chat-act-popup {
  position: absolute;
  top: 42px;
  z-index: 2;
  /* height: 114px; */
  width: 110px;
  border: 1px solid var(--border-default);
  background-color: var(--surface-card);
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.05);
  right: 10px;
  border-radius: 8px;
  padding: 0px 0px;
  left: auto;
}

.chat-act-popup.frnd-it {
  right: initial;
  left: -157%;
}

.chat-act-popup.chat-me {
  right: initial;
  left: -75%;
}

.chat-act-popup::before {
  content: '';
  width: 0;
  height: 0;
  left: 62%;
  border-color: transparent transparent var(--surface-card) var(--surface-card);
  top: -9px;
  position: absolute;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid var(--surface-card);
}

.chat-act-popup.chat-me::before {
  left: 40%;
}

.chat-act-popup button {
  background-color: transparent;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border: 0px;
  outline: 0px;
  font-size: 12px;
  padding: 12px 10px;
  border-bottom: 1px solid rgb(129 138 150 / 0.1);
}

.chat-act-popup button:hover,
.chat-act-popup button:focus {
  background-color: rgb(4 179 148 / 0.1);
}

.chat-act-popup button:first-child:hover .chat-act-popup::before {
  border-color: transparent transparent rgb(4 179 148 / 0.1) rgb(4 179 148 / 0.1);
  border-bottom: 10px solid rgb(4 179 148 / 0.1);
}

.chat-act-popup button:last-child {
  border-bottom: 0px;
}

.chat-act-popup button img {
  width: 12px;
}

.chat-act-popup button span {
  width: calc(100% - 12px);
  display: block;
  padding-left: 6px;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-secondary);
  text-align: left;
}

.ch_new .c-c-m-r-n-p {
  display: flex;
}

.ch_new .c-c-m-r-c {
  /* width: 100%; */
  font-size: 14px;
  margin: 10px 0;
  max-width: 60%;
  background: #f4f4fb;
  padding: 10px;
  border-radius: 10px;
  border-top-right-radius: 0;
  text-align: justify;
  word-wrap: break-word;
}

.ch_new .c-c-m-t {
  margin-right: 5px;
  color: #6d6d6d;
  font-weight: 600;
  font-size: 11px;
  margin-bottom: 5px;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
}

.ch_new .c-c-m-t img {
  margin-right: 5px;
  width: 10px;
  height: 8px;
}

.ch-sc-indi {
  position: absolute;
  display: block;
  width: 10px !important;
  height: 10px !important;
  top: -2px;
  right: -1px;
  border-radius: 100%;
  background-color: #57c303;
  border: 1px solid var(--surface-card);
  /* margin-left: 42px !important; */
  /* margin-top: -10px !important; */
  padding: 0;
  line-height: 1;
  font-size: 0px;
}

.add-new-person-grp-sec {
  width: 100%;
  margin: 20px 0px;
  text-align: center;
}

.dp-new-add-grp {
  width: 40px;
  height: 40px;
  border-radius: 100%;
  margin: 0px auto;
  text-align: center;
  background-color: #92a1bf;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-inverse);
  font-family: 'Rubik', sans-serif;
  font-weight: 300;
  font-size: 14px;
}

.dp-new-add-grp-div {
  width: 40px;
  height: 40px;
  border-radius: 100%;
  margin: 0px auto;
  text-align: center;
  background-color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-inverse);
}

.text-new-add-grp {
  font-family: 'Rubik', sans-serif !important;
  font-weight: 400;
  font-style: italic;
  font-size: 13px;
  margin: 6px 0px 4px;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.text-new-add-grp span.em {
  font-size: 22px;
  margin: 0px 5px;
  display: block;
}

/* Attachments css*/
.chat-atch {
  width: calc(100% - 25px);
  overflow: hidden;
  border-radius: 8px;
  margin-top: 0px;
  text-align: right;
  cursor: pointer;
  margin-left: 25px;
  margin-bottom: 8px;
}

.friend-chat .chat-atch {
  margin-left: 0px;
  width: calc(100% - 40px);
}

.pin-f-wid {
  width: 100%;
}

.friend-chat .pin-f-wid .chat-atch {
  width: calc(100%);
}

.chat-atch img {
  width: 100%;
  display: block;
}

.chat-atch .chat-atch-media {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  background: #eef1f7;
}

.chat-atch.chat-atch-shimmer {
  background: linear-gradient(90deg, #eef1f7 25%, #f7f8fb 37%, #eef1f7 63%);
  background-size: 400% 100%;
  animation: chatImageShimmer 1.2s ease-in-out infinite;
}

@keyframes chatImageShimmer {
  0% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0 50%;
  }
}

.pdf-style {
  margin-top: 0px;
  background-color: rgb(223 240 241);
  border-radius: 8px;
  display: block;
  padding: 8px;
  color: var(--text-secondary);
  text-decoration: none;
  margin-left: 25px;
  width: calc(100% - 25px);
  margin-bottom: 8px;
}

.friend-chat .pdf-style {
  width: calc(100% - 40px);
  margin-left: 0px;
}

.friend-chat .pin-f-wid .pdf-style {
  width: 100%;
}

.pdf-style span.pdf-wh {
  width: 100%;
  background-color: var(--surface-card);
  padding: 10px;
  display: flex;
  align-items: center;
}

.pdf-style span.pdf-wh img {
  width: 28px;
}

.pdf-style span.pdf-wh b.pdf-title {
  width: calc(100% - 45px);
  padding-left: 14px;
  font-size: 12px;
  color: rgb(88 99 131 / 80%);
  font-family: 'Rubik', sans-serif !important;
  font-weight: 500;
  text-decoration: none;
}

.pdf-style span.pdf-t {
  margin-top: 8px;
  opacity: 0.5;
  display: block;
  text-align: center;
  font-size: 11px;
  font-weight: 400;
  color: var(--text-secondary);
  font-family: 'Rubik', sans-serif !important;
  line-height: 1;
}

.chat-video-cont {
  width: calc(100% - 25px);
  position: relative;
  height: 126px;
  /* border-radius: 16px; */
  background-image: url(https://images.myyogateacher.com/mysession-video2.png);
  margin-top: 0px;
  margin-bottom: 6px;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  margin-left: 25px;
  background-position: center center;
  background-repeat: no-repeat;
  cursor: pointer;
}

.chat-v-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: url(https://images.myyogateacher.com/chat/ic_chat_play.svg);
  background-size: 54px;
  background-position: center center;
  background-repeat: no-repeat;
}

.friend-chat .chat-video-cont {
  margin-left: 0px;
  width: calc(100% - 40px);
}

.friend-chat .pin-f-wid .chat-video-cont {
  width: calc(100%);
}

.chat-player-bg {
  position: absolute;
  top: 0;
  left: 0;
  background-image: url(https://images.myyogateacher.com/mysession-video2.png);
  width: 100%;
  height: 100%;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}

.chat-player-bg button {
  width: 34px;
  height: 34px;
  border-radius: 25px;
  background-color: rgba(255, 255, 255, 0.75);
  position: absolute;
  /* top: 20%; */
  border: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  outline: 0px;
  cursor: pointer;
  background-image: url('https://images.myyogateacher.com/chat/ic_chat_play.svg');
  background-size: cover;
}

.chat_play_btn {
  width: 34px;
  display: block;
}

.chat-player-bg button img {
  width: 11px;
  left: 1px;
  position: relative;
  top: 0px;
}

.chat-video-cont .video-react {
  padding-top: 0;
  width: 100%;
  position: relative;
  min-height: 120px;
  border-radius: 16px;
}

.upload-bar-div {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 2px 6px 8px;
}

.upload-bar {
  width: calc(100% - 56px);
  border-radius: 4px;
  background-color: rgb(4 179 148 / 0.1);
  height: 14px;
  display: flex;
  overflow: hidden;
}

.upload-bar-in {
  background-color: rgb(4 179 148 / 0.4);
  height: 100%;
  display: block;
}

.upload-bar-percent {
  width: 56px;
  padding-left: 10px;
  color: var(--text-secondary);
  font-weight: 400;
  font-family: 'Rubik', sans-serif !important;
  font-size: 12px;
  overflow: hidden;
}

@media (max-width: 1024px) {
  .pinned-mess-tab.open {
    top: 56px;
  }

  /*
   * Full-screen chat on phones/tablets. Height is viewport-based (100dvh), NOT a
   * percentage of the zero-height .ch-cws parent (the old bug). `top:0` + `height`
   * (with bottom:auto) lets the window shrink above the keyboard via --kbd-inset,
   * which is set by attachKeyboardInset() in index.tsx.
   */
  .c-c-window.ch_new {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: auto;
    width: 100%;
    max-width: 100%;
    margin: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    /* fallbacks: vh (universal) -> svh (>= Safari 15.4) -> dvh + kbd inset (best) */
    height: 100vh;
    height: 100svh;
    height: calc(100dvh - var(--kbd-inset, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    z-index: 100000;
  }

  /* if a window is somehow minimized on mobile, keep its bar usable (full width) */
  .c-c-window-min.ch_new {
    width: 100%;
    margin: 0;
  }

  /* header fixed, content fills, messages scroll, composer stays put */
  .ch_new .c-c-header {
    flex-shrink: 0;
  }

  .ch_new .chat-content {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
  }

  .ch_new .c-c-messages {
    flex: 1 1 auto;
    min-height: 0;
  }

  .ch_new .c-c-i-c {
    flex-shrink: 0;
  }

  /* full-screen uses close, not minimize */
  .ch_new .c-c-min {
    display: none;
  }

  /* comfortable touch targets (>= 44px) */
  .ch_new .chat-c-btn,
  .ch_new .chat-dot-btn,
  .ch_new .ch_emoji,
  .ch_new .ch_attahment {
    min-width: 44px;
    min-height: 44px;
  }

  .ch_new .close_rep_chat {
    min-width: 36px;
    min-height: 36px;
  }
}

.vjs-modal-dialog .vjs-modal-dialog-content, .video-js .vjs-modal-dialog, .vjs-button > .vjs-icon-placeholder:before, .video-js .vjs-big-play-button .vjs-icon-placeholder:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.vjs-button > .vjs-icon-placeholder:before, .video-js .vjs-big-play-button .vjs-icon-placeholder:before {
  text-align: center;
}

@font-face {
  font-family: VideoJS;
  src: url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAABDkAAsAAAAAG6gAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADsAAABUIIslek9TLzIAAAFEAAAAPgAAAFZRiV3hY21hcAAAAYQAAADaAAADPv749/pnbHlmAAACYAAAC3AAABHQZg6OcWhlYWQAAA3QAAAAKwAAADYZw251aGhlYQAADfwAAAAdAAAAJA+RCLFobXR4AAAOHAAAABMAAACM744AAGxvY2EAAA4wAAAASAAAAEhF6kqubWF4cAAADngAAAAfAAAAIAE0AIFuYW1lAAAOmAAAASUAAAIK1cf1oHBvc3QAAA/AAAABJAAAAdPExYuNeJxjYGRgYOBiMGCwY2BycfMJYeDLSSzJY5BiYGGAAJA8MpsxJzM9kYEDxgPKsYBpDiBmg4gCACY7BUgAeJxjYGS7wTiBgZWBgaWQ5RkDA8MvCM0cwxDOeI6BgYmBlZkBKwhIc01hcPjI+FGJHcRdyA4RZgQRADK3CxEAAHic7dFZbsMgAEXRS0ycyZnnOeG7y+qC8pU1dHusIOXxuoxaOlwZYWQB0Aea4quIEN4E9LzKbKjzDeM6H/mua6Lmc/p8yhg0lvdYx15ZG8uOLQOGjMp3EzqmzJizYMmKNRu27Nhz4MiJMxeu3Ljz4Ekqm7T8P52G8PP3lnTOVk++Z6iN6QZzNN1F7ptuN7eGOjDUoaGODHVsuvU8MdTO9Hd5aqgzQ50b6sJQl4a6MtS1oW4MdWuoO0PdG+rBUI+GejLUs6FeDPVqqDdDvRvqw1CfhpqM9At0iFLaAAB4nJ1YDXBTVRZ+5/22TUlJ8we0pHlJm7RJf5O8F2j6EymlSPkpxaL8U2xpa3DKj0CBhc2IW4eWKSokIoLsuMqssM64f+jA4HSdWXXXscBq67IOs3FXZ1ZYWVyRFdo899yXtIBQZ90k7717zz3v3HPPOfd854YCCj9cL9dL0RQFOqCbGJnrHb5EayiKIWN8iA/hWBblo6hUWm8TtCDwE80WMJus/irwyxOdxeB0MDb14VNJHnXYoLLSl6FfCUYO9nYPTA8Epg9090LprfbBbZ2hY0UlJUXHQp3/vtWkS6EBv8+rPMq5u9692f/dNxJNiqwC1xPE9TCUgCsSdQWgE3XQD25lkG4CN2xmTcOXWBOyser6RN6KnGbKSbmQ3+d0OI1m2W8QzLLkI2sykrWAgJJEtA8vGGW/2Q+CmT3n8zS9wZwu2DCvtuZKZN3xkrLh36yCZuUomQSqGpY8t/25VfHVhw8z4ebGBtfLb0ya9PCaDc+8dGTvk2dsh6z7WzvowlXKUSWo9MJ15a3KrEP2loOr2Ojhw6iW6hf2BDdEccQvZGpaAy7YovSwq8kr7HGllxpd71rkS6G0Sf11sl9OvMK1+jwPPODxjUwkOim9CU3ix1wNjXDfmJSEn618Bs6lpWwUpU+8PCqLMY650zjq8VhCIP17NEKTx3eaLL+s5Pi6yJWaWjTHLR1jYzPSV9VF/6Ojdb/1kO3Mk3uhHC0x6gc1BjlKQ+nQFxTYdaJkZ7ySVxLBbhR1dsboNXp1tCYKW2LRaEzpYcIx2BKNxaL0ZaUnSqfFoiNhHKR/GkX6PWUSAaJelQaqZL1EpoHNsajSEyPSoJ9IjhIxTdjHLmwZvhRDOiFTY/YeQnvrVZmiTQtGncECXtFTBZLOVwwMRgoXHAkXzMzPn1nAJJ8jYSbMDaqN2waGLzNhih/bZynUBMpIWSg7VYi7DRx2m8ALkIdRCJwI6ArJx2EI8kaDWeTQKeAFk9fjl/1AvwktjQ1P7NjyMGQyfd4vjipX6M/i52D7Cq80kqlcxEcGXRr/FEcgs0u5uGgB4VWuMFfpdn2Re6Hi3PqzmxWKsz6+ae2Pn9hXXw/fqM859UiGC0oKYYILJBqJrsn1Z1E5qOs9rQCiUQRREjm8yJcbHF5cUJufX1vAHlefw0XgUoboS3ETfQlTxBC4SOtuE8VPRJTBSCQSjZCpk7Gqzu+masaZ2y7Zjehho4F3g82BNDkAHpORG4+OCS+f6JTPmtRn/PH1kch6d04sp7AQb25aQ/pqUyXeQ8vrebG8OYQdXOQ+585u0sdW9rqalzRURiJ+9F4MweRFrKUjl1GUYhH1A27WOHw5cTFSFPMo9EeUIGnQTZHIaJ7AHLaOKsOODaNF9jkBjYG2QEsQ2xjMUAx2bBEbeTBWMHwskBjngq56S/yfgkBnWBa4K9sqKtq2t1UI8S9He5XuBRbawAdatrQEAi30Aks2+LM8WeCbalVZkWNylvJ+dqJnzVb+OHlSoKW8nPCP7Rd+CcZ2DdWAGqJ2CBFOphgywFFCFBNtfAbGtNPBCwxvygHeYMZMY9ZboBqwq/pVrsbgN5tkv152ODlbMfiqwGMBgxa4Exz3QhovRIUp6acqZmQzRq0ypDXS2TPLT02YIkQETnOE445oOGxOmXAqUJNNG7XgupMjPq2ua9asrj5yY/yuKteO1Kx0YNJTufrirLe1mZnat7OL6rnUdCWenpW6I8mAnbsY8KWs1PuSovCW9A/Z25PQ24a7cNOqgmTkLmBMgh4THgc4b9k2IVv1/g/F5nGljwPLfOgHAzJzh45V/4+WenTzmMtR5Z7us2Tys909UHqrPY7KbckoxRvRHhmVc3cJGE97uml0R1S0jdULVl7EvZtDFVBF35N9cEdjpgmAiOlFZ+Dtoh93+D3zzHr8RRNZQhnCNMNbcegOvpEwZoL+06cJQ07h+th3fZ/7PVbVC6ngTAV/KoLFuO6+2KFcU651gEb5ugPSIb1D+Xp8V4+k3sEIGnw5mYe4If4k1lFYr6SCzmM2EQ8iWtmwjnBI9kTwe1TlfAmXh7H02by9fW2gsjKwtv0aaURKil4OdV7rDL1MXIFNrhdxohcZXYTnq47WisrKitaObbf5+yvkLi5J6lCNZZ+B6GC38VNBZBDidSS/+mSvh6s+srgC8pyKMvDtt+de3c9fU76ZPfuM8ud4Kv0fyP/LqfepMT/3oZxSqpZaTa1DaQYLY8TFsHYbWYsPoRhRWfL5eSSQbhUGgGC3YLbVMk6PitTFNGpAsNrC6D1VNBKgBHMejaiuRWEWGgsSDBTJjqWIl8kJLlsaLJ2tXDr6xGfT85bM2Q06a46x2HTgvdnV8z5YDy/27J4zt6x2VtkzjoYpkq36kaBr4eQSg7tyiVweWubXZugtadl58ydapfbORfKsDTuZ0OBgx4cfdjCf5tbWNITnL120fdOi1RV1C3uKGzNdwYLcMvZ3BxoPyTOCD1XvXTp7U10gWCVmTV9b3r2z0SkGWovb2hp9I89O8a2smlyaO8muMU+dRmtzp60IzAoFpjLr1n388boLyf0dRvxhsHZ0qbWqDkwqvvpkj4l0fY6EIXRi5sQSrAvsVYwXRy4qJ2EVtD1AN7a0HWth9ymvL1xc3WTUKK/TAHA/bXDVtVWfOMfuGxGZv4Ln/jVr9jc3j1yMv0tndmyt9Vq88Y9gH1wtLX3KWjot5++jWHgAoZZkQ14wGQ20Fli71UmKJAy4xKMSTGbVdybW7FDDAut9XpD5AzWrYO7zQ8qffqF8+Ynd/clrHcdyxGy3a/3+mfNnzC/cBsveTjnTvXf1o6vzOlZw7WtqtdmPK/Errz/6NNtD72zmNOZfbmYdTGHfoofqI79Oc+R2n1lrnL6pOm0Up7kwxhTW12Amm7WYkXR2qYrF2AmgmbAsxZjwy1xpg/m1Je2vrp8v/nz2xpmlBg4E9hrMU341wVpTOh/OfmGvAnra8q6uctr60ZQHV3Q+WMQJykMj8ZsWn2QBOmmHMB+m5pDIpTFonYigiaKAhGEiAHF7EliVnQkjoLVIMPtJpBKHYd3A8GYH9jJzrWwmHx5Qjp7vDAX0suGRym1vtm/9W1/HyR8vczfMs6Sk8DSv855/5dlX9oQq52hT8syyp2rx5Id17IAyAM3wIjQPMOHzytEB64q6D5zT91yNbnx3V/nqnd017S9Y0605k3izoXLpsxde2n38yoOV9s1LcjwzNjbdX6asnBVaBj/6/DwKwPkpcqbDG7BnsXoSqWnUAmottYF6jMSdVyYZh3zVXCjwTiwwHH6sGuRiEHQGzuRX6whZkp123oy1BWE2mEfJ/tvIRtM4ZM5bDXiMsPMaAKOTyc5uL57rqyyc5y5JE5pm1i2S2iUX0CcaQ6lC6Zog7JqSqZmYlosl2K6pwNA84zRnQW6SaALYZQGW5lhCtU/W34N6o+bKfZ8cf3/Cl/+iTX3wBzpOY4mRkeNf3rptycGSshQWgGbYt5jFc2e0+DglIrwl6DVWQ7BuwaJ3Xk1J4VL5urnLl/Wf+gHU/hZoZdKNym6lG+I34FaNeZKcSpJIo2IeCVvpdsDGfKvzJnAwmeD37Ow65ZWwSowpgwX5T69s/rB55dP5BcpgDKFV8p7q2sn/1uc93bVzT/w6UrCqDTWvfCq/oCD/qZXNoUj8BL5Kp6GU017frfNXkAtiiyf/SOCEeLqnd8R/Ql9GlCRfctS6k5chvIBuQ1zCCjoCHL2DHNHIXxMJ3kQeO8lbsUXONeSfA5EjcG6/E+KdhN4bP04vBhdi883+BFBzQbxFbvZzQeY9LNBZc0FNfn5NwfDn6rCTnTw6R8o+gfpf5hCom33cRuiTlss3KHmZjD+BPN+5gXuA2ziS/Q73mLxUkpbKN/eqwz5uK0X9F3h2d1V4nGNgZGBgAOJd776+iue3+crAzc4AAje5Bfcg0xz9YHEOBiYQBQA8FQlFAHicY2BkYGBnAAGOPgaG//85+hkYGVCBMgBGGwNYAAAAeJxjYGBgYB8EmKOPgQEAQ04BfgAAAAAAAA4AaAB+AMwA4AECAUIBbAGYAcICGAJYArQC4AMwA7AD3gQwBJYE3AUkBWYFigYgBmYGtAbqB1gIEghYCG4IhAi2COh4nGNgZGBgUGYoZWBnAAEmIOYCQgaG/2A+AwAYCQG2AHicXZBNaoNAGIZfE5PQCKFQ2lUps2oXBfOzzAESyDKBQJdGR2NQR3QSSE/QE/QEPUUPUHqsvsrXjTMw83zPvPMNCuAWP3DQDAejdm1GjzwS7pMmwi75XngAD4/CQ/oX4TFe4Qt7uMMbOzjuDc0EmXCP/C7cJ38Iu+RP4QEe8CU8pP8WHmOPX2EPz87TPo202ey2OjlnQSXV/6arOjWFmvszMWtd6CqwOlKHq6ovycLaWMWVydXKFFZnmVFlZU46tP7R2nI5ncbi/dDkfDtFBA2DDXbYkhKc+V0Bqs5Zt9JM1HQGBRTm/EezTmZNKtpcAMs9Yu6AK9caF76zoLWIWcfMGOSkVduvSWechqZsz040Ib2PY3urxBJTzriT95lipz+TN1fmAAAAeJxtkMl2wjAMRfOAhABlKm2h80C3+ajgCKKDY6cegP59TYBzukAL+z1Zsq8ctaJTTKPrsUQLbXQQI0EXKXroY4AbDDHCGBNMcYsZ7nCPB8yxwCOe8IwXvOIN7/jAJ76wxHfUqWX+OzgumWAjJMV17i0Ndlr6irLKO+qftdT7i6y4uFSUvCknay+lFYZIZaQcmfH/xIFdYn98bqhra1aKTM/6lWMnyaYirx1rFUQZFBkb2zJUtoXeJCeg0WnLtHeSFc3OtrnozNwqi0TkSpBMDB1nSde5oJXW23hTS2/T0LilglXX7dmFVxLnq5U0vYATHFk3zX3BOisoQHNDFDeZnqKDy9hRNawN7Vh727hFzcJ5c8TILrKZfH7tIPxAFP0BpLeJPA==) format("woff");
  font-weight: normal;
  font-style: normal;
}
.vjs-icon-play, .video-js .vjs-play-control .vjs-icon-placeholder, .video-js .vjs-big-play-button .vjs-icon-placeholder:before {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}
.vjs-icon-play:before, .video-js .vjs-play-control .vjs-icon-placeholder:before, .video-js .vjs-big-play-button .vjs-icon-placeholder:before {
  content: "\f101";
}

.vjs-icon-play-circle {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}
.vjs-icon-play-circle:before {
  content: "\f102";
}

.vjs-icon-pause, .video-js .vjs-play-control.vjs-playing .vjs-icon-placeholder {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}
.vjs-icon-pause:before, .video-js .vjs-play-control.vjs-playing .vjs-icon-placeholder:before {
  content: "\f103";
}

.vjs-icon-volume-mute, .video-js .vjs-mute-control.vjs-vol-0 .vjs-icon-placeholder {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}
.vjs-icon-volume-mute:before, .video-js .vjs-mute-control.vjs-vol-0 .vjs-icon-placeholder:before {
  content: "\f104";
}

.vjs-icon-volume-low, .video-js .vjs-mute-control.vjs-vol-1 .vjs-icon-placeholder {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}
.vjs-icon-volume-low:before, .video-js .vjs-mute-control.vjs-vol-1 .vjs-icon-placeholder:before {
  content: "\f105";
}

.vjs-icon-volume-mid, .video-js .vjs-mute-control.vjs-vol-2 .vjs-icon-placeholder {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}
.vjs-icon-volume-mid:before, .video-js .vjs-mute-control.vjs-vol-2 .vjs-icon-placeholder:before {
  content: "\f106";
}

.vjs-icon-volume-high, .video-js .vjs-mute-control .vjs-icon-placeholder {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}
.vjs-icon-volume-high:before, .video-js .vjs-mute-control .vjs-icon-placeholder:before {
  content: "\f107";
}

.vjs-icon-fullscreen-enter, .video-js .vjs-fullscreen-control .vjs-icon-placeholder {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}
.vjs-icon-fullscreen-enter:before, .video-js .vjs-fullscreen-control .vjs-icon-placeholder:before {
  content: "\f108";
}

.vjs-icon-fullscreen-exit, .video-js.vjs-fullscreen .vjs-fullscreen-control .vjs-icon-placeholder {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}
.vjs-icon-fullscreen-exit:before, .video-js.vjs-fullscreen .vjs-fullscreen-control .vjs-icon-placeholder:before {
  content: "\f109";
}

.vjs-icon-square {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}
.vjs-icon-square:before {
  content: "\f10a";
}

.vjs-icon-spinner {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}
.vjs-icon-spinner:before {
  content: "\f10b";
}

.vjs-icon-subtitles, .video-js .vjs-subs-caps-button .vjs-icon-placeholder,
.video-js.video-js:lang(en-GB) .vjs-subs-caps-button .vjs-icon-placeholder,
.video-js.video-js:lang(en-IE) .vjs-subs-caps-button .vjs-icon-placeholder,
.video-js.video-js:lang(en-AU) .vjs-subs-caps-button .vjs-icon-placeholder,
.video-js.video-js:lang(en-NZ) .vjs-subs-caps-button .vjs-icon-placeholder, .video-js .vjs-subtitles-button .vjs-icon-placeholder {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}
.vjs-icon-subtitles:before, .video-js .vjs-subs-caps-button .vjs-icon-placeholder:before,
.video-js.video-js:lang(en-GB) .vjs-subs-caps-button .vjs-icon-placeholder:before,
.video-js.video-js:lang(en-IE) .vjs-subs-caps-button .vjs-icon-placeholder:before,
.video-js.video-js:lang(en-AU) .vjs-subs-caps-button .vjs-icon-placeholder:before,
.video-js.video-js:lang(en-NZ) .vjs-subs-caps-button .vjs-icon-placeholder:before, .video-js .vjs-subtitles-button .vjs-icon-placeholder:before {
  content: "\f10c";
}

.vjs-icon-captions, .video-js:lang(en) .vjs-subs-caps-button .vjs-icon-placeholder,
.video-js:lang(fr-CA) .vjs-subs-caps-button .vjs-icon-placeholder, .video-js .vjs-captions-button .vjs-icon-placeholder {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}
.vjs-icon-captions:before, .video-js:lang(en) .vjs-subs-caps-button .vjs-icon-placeholder:before,
.video-js:lang(fr-CA) .vjs-subs-caps-button .vjs-icon-placeholder:before, .video-js .vjs-captions-button .vjs-icon-placeholder:before {
  content: "\f10d";
}

.vjs-icon-chapters, .video-js .vjs-chapters-button .vjs-icon-placeholder {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}
.vjs-icon-chapters:before, .video-js .vjs-chapters-button .vjs-icon-placeholder:before {
  content: "\f10e";
}

.vjs-icon-share {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}
.vjs-icon-share:before {
  content: "\f10f";
}

.vjs-icon-cog {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}
.vjs-icon-cog:before {
  content: "\f110";
}

.vjs-icon-circle, .vjs-seek-to-live-control .vjs-icon-placeholder, .video-js .vjs-volume-level, .video-js .vjs-play-progress {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}
.vjs-icon-circle:before, .vjs-seek-to-live-control .vjs-icon-placeholder:before, .video-js .vjs-volume-level:before, .video-js .vjs-play-progress:before {
  content: "\f111";
}

.vjs-icon-circle-outline {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}
.vjs-icon-circle-outline:before {
  content: "\f112";
}

.vjs-icon-circle-inner-circle {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}
.vjs-icon-circle-inner-circle:before {
  content: "\f113";
}

.vjs-icon-hd {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}
.vjs-icon-hd:before {
  content: "\f114";
}

.vjs-icon-cancel, .video-js .vjs-control.vjs-close-button .vjs-icon-placeholder {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}
.vjs-icon-cancel:before, .video-js .vjs-control.vjs-close-button .vjs-icon-placeholder:before {
  content: "\f115";
}

.vjs-icon-replay, .video-js .vjs-play-control.vjs-ended .vjs-icon-placeholder {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}
.vjs-icon-replay:before, .video-js .vjs-play-control.vjs-ended .vjs-icon-placeholder:before {
  content: "\f116";
}

.vjs-icon-facebook {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}
.vjs-icon-facebook:before {
  content: "\f117";
}

.vjs-icon-gplus {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}
.vjs-icon-gplus:before {
  content: "\f118";
}

.vjs-icon-linkedin {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}
.vjs-icon-linkedin:before {
  content: "\f119";
}

.vjs-icon-twitter {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}
.vjs-icon-twitter:before {
  content: "\f11a";
}

.vjs-icon-tumblr {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}
.vjs-icon-tumblr:before {
  content: "\f11b";
}

.vjs-icon-pinterest {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}
.vjs-icon-pinterest:before {
  content: "\f11c";
}

.vjs-icon-audio-description, .video-js .vjs-descriptions-button .vjs-icon-placeholder {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}
.vjs-icon-audio-description:before, .video-js .vjs-descriptions-button .vjs-icon-placeholder:before {
  content: "\f11d";
}

.vjs-icon-audio, .video-js .vjs-audio-button .vjs-icon-placeholder {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}
.vjs-icon-audio:before, .video-js .vjs-audio-button .vjs-icon-placeholder:before {
  content: "\f11e";
}

.vjs-icon-next-item {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}
.vjs-icon-next-item:before {
  content: "\f11f";
}

.vjs-icon-previous-item {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}
.vjs-icon-previous-item:before {
  content: "\f120";
}

.vjs-icon-picture-in-picture-enter, .video-js .vjs-picture-in-picture-control .vjs-icon-placeholder {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}
.vjs-icon-picture-in-picture-enter:before, .video-js .vjs-picture-in-picture-control .vjs-icon-placeholder:before {
  content: "\f121";
}

.vjs-icon-picture-in-picture-exit, .video-js.vjs-picture-in-picture .vjs-picture-in-picture-control .vjs-icon-placeholder {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
}
.vjs-icon-picture-in-picture-exit:before, .video-js.vjs-picture-in-picture .vjs-picture-in-picture-control .vjs-icon-placeholder:before {
  content: "\f122";
}

.video-js {
  display: block;
  vertical-align: top;
  box-sizing: border-box;
  color: #fff;
  background-color: #000;
  position: relative;
  padding: 0;
  font-size: 10px;
  line-height: 1;
  font-weight: normal;
  font-style: normal;
  font-family: Arial, Helvetica, sans-serif;
  word-break: initial;
}
.video-js:-moz-full-screen {
  position: absolute;
}
.video-js:-webkit-full-screen {
  width: 100% !important;
  height: 100% !important;
}

.video-js[tabindex="-1"] {
  outline: none;
}

.video-js *,
.video-js *:before,
.video-js *:after {
  box-sizing: inherit;
}

.video-js ul {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  list-style-position: outside;
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
  margin-bottom: 0;
}

.video-js.vjs-fluid,
.video-js.vjs-16-9,
.video-js.vjs-4-3,
.video-js.vjs-9-16,
.video-js.vjs-1-1 {
  width: 100%;
  max-width: 100%;
}

.video-js.vjs-fluid:not(.vjs-audio-only-mode),
.video-js.vjs-16-9:not(.vjs-audio-only-mode),
.video-js.vjs-4-3:not(.vjs-audio-only-mode),
.video-js.vjs-9-16:not(.vjs-audio-only-mode),
.video-js.vjs-1-1:not(.vjs-audio-only-mode) {
  height: 0;
}

.video-js.vjs-16-9:not(.vjs-audio-only-mode) {
  padding-top: 56.25%;
}

.video-js.vjs-4-3:not(.vjs-audio-only-mode) {
  padding-top: 75%;
}

.video-js.vjs-9-16:not(.vjs-audio-only-mode) {
  padding-top: 177.7777777778%;
}

.video-js.vjs-1-1:not(.vjs-audio-only-mode) {
  padding-top: 100%;
}

.video-js.vjs-fill:not(.vjs-audio-only-mode) {
  width: 100%;
  height: 100%;
}

.video-js .vjs-tech {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.video-js.vjs-audio-only-mode .vjs-tech {
  display: none;
}

body.vjs-full-window {
  padding: 0;
  margin: 0;
  height: 100%;
}

.vjs-full-window .video-js.vjs-fullscreen {
  position: fixed;
  overflow: hidden;
  z-index: 1000;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
}

.video-js.vjs-fullscreen:not(.vjs-ios-native-fs) {
  width: 100% !important;
  height: 100% !important;
  padding-top: 0 !important;
}

.video-js.vjs-fullscreen.vjs-user-inactive {
  cursor: none;
}

.vjs-hidden {
  display: none !important;
}

.vjs-disabled {
  opacity: 0.5;
  cursor: default;
}

.video-js .vjs-offscreen {
  height: 1px;
  left: -9999px;
  position: absolute;
  top: 0;
  width: 1px;
}

.vjs-lock-showing {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.vjs-no-js {
  padding: 20px;
  color: #fff;
  background-color: #000;
  font-size: 18px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  width: 300px;
  height: 150px;
  margin: 0px auto;
}

.vjs-no-js a,
.vjs-no-js a:visited {
  color: #66A8CC;
}

.video-js .vjs-big-play-button {
  font-size: 3em;
  line-height: 1.5em;
  height: 1.63332em;
  width: 3em;
  display: block;
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 0;
  cursor: pointer;
  opacity: 1;
  border: 0.06666em solid #fff;
  background-color: #2B333F;
  background-color: rgba(43, 51, 63, 0.7);
  border-radius: 0.3em;
  transition: all 0.4s;
}
.vjs-big-play-centered .vjs-big-play-button {
  top: 50%;
  left: 50%;
  margin-top: -0.81666em;
  margin-left: -1.5em;
}

.video-js:hover .vjs-big-play-button,
.video-js .vjs-big-play-button:focus {
  border-color: #fff;
  background-color: #73859f;
  background-color: rgba(115, 133, 159, 0.5);
  transition: all 0s;
}

.vjs-controls-disabled .vjs-big-play-button,
.vjs-has-started .vjs-big-play-button,
.vjs-using-native-controls .vjs-big-play-button,
.vjs-error .vjs-big-play-button {
  display: none;
}

.vjs-has-started.vjs-paused.vjs-show-big-play-button-on-pause .vjs-big-play-button {
  display: block;
}

.video-js button {
  background: none;
  border: none;
  color: inherit;
  display: inline-block;
  font-size: inherit;
  line-height: inherit;
  text-transform: none;
  text-decoration: none;
  transition: none;
  -webkit-appearance: none;
  appearance: none;
}

.vjs-control .vjs-button {
  width: 100%;
  height: 100%;
}

.video-js .vjs-control.vjs-close-button {
  cursor: pointer;
  height: 3em;
  position: absolute;
  right: 0;
  top: 0.5em;
  z-index: 2;
}
.video-js .vjs-modal-dialog {
  background: rgba(0, 0, 0, 0.8);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.8), rgba(255, 255, 255, 0));
  overflow: auto;
}

.video-js .vjs-modal-dialog > * {
  box-sizing: border-box;
}

.vjs-modal-dialog .vjs-modal-dialog-content {
  font-size: 1.2em;
  line-height: 1.5;
  padding: 20px 24px;
  z-index: 1;
}

.vjs-menu-button {
  cursor: pointer;
}

.vjs-menu-button.vjs-disabled {
  cursor: default;
}

.vjs-workinghover .vjs-menu-button.vjs-disabled:hover .vjs-menu {
  display: none;
}

.vjs-menu .vjs-menu-content {
  display: block;
  padding: 0;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  overflow: auto;
}

.vjs-menu .vjs-menu-content > * {
  box-sizing: border-box;
}

.vjs-scrubbing .vjs-control.vjs-menu-button:hover .vjs-menu {
  display: none;
}

.vjs-menu li {
  list-style: none;
  margin: 0;
  padding: 0.2em 0;
  line-height: 1.4em;
  font-size: 1.2em;
  text-align: center;
  text-transform: lowercase;
}

.vjs-menu li.vjs-menu-item:focus,
.vjs-menu li.vjs-menu-item:hover,
.js-focus-visible .vjs-menu li.vjs-menu-item:hover {
  background-color: #73859f;
  background-color: rgba(115, 133, 159, 0.5);
}

.vjs-menu li.vjs-selected,
.vjs-menu li.vjs-selected:focus,
.vjs-menu li.vjs-selected:hover,
.js-focus-visible .vjs-menu li.vjs-selected:hover {
  background-color: #fff;
  color: #2B333F;
}

.video-js .vjs-menu *:not(.vjs-selected):focus:not(:focus-visible),
.js-focus-visible .vjs-menu *:not(.vjs-selected):focus:not(.focus-visible) {
  background: none;
}

.vjs-menu li.vjs-menu-title {
  text-align: center;
  text-transform: uppercase;
  font-size: 1em;
  line-height: 2em;
  padding: 0;
  margin: 0 0 0.3em 0;
  font-weight: bold;
  cursor: default;
}

.vjs-menu-button-popup .vjs-menu {
  display: none;
  position: absolute;
  bottom: 0;
  width: 10em;
  left: -3em;
  height: 0em;
  margin-bottom: 1.5em;
  border-top-color: rgba(43, 51, 63, 0.7);
}

.vjs-menu-button-popup .vjs-menu .vjs-menu-content {
  background-color: #2B333F;
  background-color: rgba(43, 51, 63, 0.7);
  position: absolute;
  width: 100%;
  bottom: 1.5em;
  max-height: 15em;
}

.vjs-layout-tiny .vjs-menu-button-popup .vjs-menu .vjs-menu-content,
.vjs-layout-x-small .vjs-menu-button-popup .vjs-menu .vjs-menu-content {
  max-height: 5em;
}

.vjs-layout-small .vjs-menu-button-popup .vjs-menu .vjs-menu-content {
  max-height: 10em;
}

.vjs-layout-medium .vjs-menu-button-popup .vjs-menu .vjs-menu-content {
  max-height: 14em;
}

.vjs-layout-large .vjs-menu-button-popup .vjs-menu .vjs-menu-content,
.vjs-layout-x-large .vjs-menu-button-popup .vjs-menu .vjs-menu-content,
.vjs-layout-huge .vjs-menu-button-popup .vjs-menu .vjs-menu-content {
  max-height: 25em;
}

.vjs-workinghover .vjs-menu-button-popup.vjs-hover .vjs-menu,
.vjs-menu-button-popup .vjs-menu.vjs-lock-showing {
  display: block;
}

.video-js .vjs-menu-button-inline {
  transition: all 0.4s;
  overflow: hidden;
}

.video-js .vjs-menu-button-inline:before {
  width: 2.222222222em;
}

.video-js .vjs-menu-button-inline:hover,
.video-js .vjs-menu-button-inline:focus,
.video-js .vjs-menu-button-inline.vjs-slider-active,
.video-js.vjs-no-flex .vjs-menu-button-inline {
  width: 12em;
}

.vjs-menu-button-inline .vjs-menu {
  opacity: 0;
  height: 100%;
  width: auto;
  position: absolute;
  left: 4em;
  top: 0;
  padding: 0;
  margin: 0;
  transition: all 0.4s;
}

.vjs-menu-button-inline:hover .vjs-menu,
.vjs-menu-button-inline:focus .vjs-menu,
.vjs-menu-button-inline.vjs-slider-active .vjs-menu {
  display: block;
  opacity: 1;
}

.vjs-no-flex .vjs-menu-button-inline .vjs-menu {
  display: block;
  opacity: 1;
  position: relative;
  width: auto;
}

.vjs-no-flex .vjs-menu-button-inline:hover .vjs-menu,
.vjs-no-flex .vjs-menu-button-inline:focus .vjs-menu,
.vjs-no-flex .vjs-menu-button-inline.vjs-slider-active .vjs-menu {
  width: auto;
}

.vjs-menu-button-inline .vjs-menu-content {
  width: auto;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

.video-js .vjs-control-bar {
  display: none;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3em;
  background-color: #2B333F;
  background-color: rgba(43, 51, 63, 0.7);
}

.vjs-has-started .vjs-control-bar,
.vjs-audio-only-mode .vjs-control-bar {
  display: flex;
  visibility: visible;
  opacity: 1;
  transition: visibility 0.1s, opacity 0.1s;
}

.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {
  visibility: visible;
  opacity: 0;
  pointer-events: none;
  transition: visibility 1s, opacity 1s;
}

.vjs-controls-disabled .vjs-control-bar,
.vjs-using-native-controls .vjs-control-bar,
.vjs-error .vjs-control-bar {
  display: none !important;
}

.vjs-audio.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar,
.vjs-audio-only-mode.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.vjs-has-started.vjs-no-flex .vjs-control-bar {
  display: table;
}

.video-js .vjs-control {
  position: relative;
  text-align: center;
  margin: 0;
  padding: 0;
  height: 100%;
  width: 4em;
  flex: none;
}

.video-js .vjs-control.vjs-visible-text {
  width: auto;
  padding-left: 1em;
  padding-right: 1em;
}

.vjs-button > .vjs-icon-placeholder:before {
  font-size: 1.8em;
  line-height: 1.67;
}

.vjs-button > .vjs-icon-placeholder {
  display: block;
}

.video-js .vjs-control:focus:before,
.video-js .vjs-control:hover:before,
.video-js .vjs-control:focus {
  text-shadow: 0em 0em 1em white;
}

.video-js *:not(.vjs-visible-text) > .vjs-control-text {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.vjs-no-flex .vjs-control {
  display: table-cell;
  vertical-align: middle;
}

.video-js .vjs-custom-control-spacer {
  display: none;
}

.video-js .vjs-progress-control {
  cursor: pointer;
  flex: auto;
  display: flex;
  align-items: center;
  min-width: 4em;
  touch-action: none;
}

.video-js .vjs-progress-control.disabled {
  cursor: default;
}

.vjs-live .vjs-progress-control {
  display: none;
}

.vjs-liveui .vjs-progress-control {
  display: flex;
  align-items: center;
}

.vjs-no-flex .vjs-progress-control {
  width: auto;
}

.video-js .vjs-progress-holder {
  flex: auto;
  transition: all 0.2s;
  height: 0.3em;
}

.video-js .vjs-progress-control .vjs-progress-holder {
  margin: 0 10px;
}

.video-js .vjs-progress-control:hover .vjs-progress-holder {
  font-size: 1.6666666667em;
}

.video-js .vjs-progress-control:hover .vjs-progress-holder.disabled {
  font-size: 1em;
}

.video-js .vjs-progress-holder .vjs-play-progress,
.video-js .vjs-progress-holder .vjs-load-progress,
.video-js .vjs-progress-holder .vjs-load-progress div {
  position: absolute;
  display: block;
  height: 100%;
  margin: 0;
  padding: 0;
  width: 0;
}

.video-js .vjs-play-progress {
  background-color: #fff;
}
.video-js .vjs-play-progress:before {
  font-size: 0.9em;
  position: absolute;
  right: -0.5em;
  top: -0.3333333333em;
  z-index: 1;
}

.video-js .vjs-load-progress {
  background: rgba(115, 133, 159, 0.5);
}

.video-js .vjs-load-progress div {
  background: rgba(115, 133, 159, 0.75);
}

.video-js .vjs-time-tooltip {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 0.3em;
  color: #000;
  float: right;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1em;
  padding: 6px 8px 8px 8px;
  pointer-events: none;
  position: absolute;
  top: -3.4em;
  visibility: hidden;
  z-index: 1;
}

.video-js .vjs-progress-holder:focus .vjs-time-tooltip {
  display: none;
}

.video-js .vjs-progress-control:hover .vjs-time-tooltip,
.video-js .vjs-progress-control:hover .vjs-progress-holder:focus .vjs-time-tooltip {
  display: block;
  font-size: 0.6em;
  visibility: visible;
}

.video-js .vjs-progress-control.disabled:hover .vjs-time-tooltip {
  font-size: 1em;
}

.video-js .vjs-progress-control .vjs-mouse-display {
  display: none;
  position: absolute;
  width: 1px;
  height: 100%;
  background-color: #000;
  z-index: 1;
}

.vjs-no-flex .vjs-progress-control .vjs-mouse-display {
  z-index: 0;
}

.video-js .vjs-progress-control:hover .vjs-mouse-display {
  display: block;
}

.video-js.vjs-user-inactive .vjs-progress-control .vjs-mouse-display {
  visibility: hidden;
  opacity: 0;
  transition: visibility 1s, opacity 1s;
}

.video-js.vjs-user-inactive.vjs-no-flex .vjs-progress-control .vjs-mouse-display {
  display: none;
}

.vjs-mouse-display .vjs-time-tooltip {
  color: #fff;
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.8);
}

.video-js .vjs-slider {
  position: relative;
  cursor: pointer;
  padding: 0;
  margin: 0 0.45em 0 0.45em;
  /* iOS Safari */
  -webkit-touch-callout: none;
  /* Safari */
  -webkit-user-select: none;
  /* Konqueror HTML */
  /* Firefox */
  /* Internet Explorer/Edge */
  /* Non-prefixed version, currently supported by Chrome and Opera */
  user-select: none;
  background-color: #73859f;
  background-color: rgba(115, 133, 159, 0.5);
}

.video-js .vjs-slider.disabled {
  cursor: default;
}

.video-js .vjs-slider:focus {
  text-shadow: 0em 0em 1em white;
  box-shadow: 0 0 1em #fff;
}

.video-js .vjs-mute-control {
  cursor: pointer;
  flex: none;
}
.video-js .vjs-volume-control {
  cursor: pointer;
  margin-right: 1em;
  display: flex;
}

.video-js .vjs-volume-control.vjs-volume-horizontal {
  width: 5em;
}

.video-js .vjs-volume-panel .vjs-volume-control {
  visibility: visible;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin-left: -1px;
}

.video-js .vjs-volume-panel {
  transition: width 1s;
}
.video-js .vjs-volume-panel.vjs-hover .vjs-volume-control, .video-js .vjs-volume-panel:active .vjs-volume-control, .video-js .vjs-volume-panel:focus .vjs-volume-control, .video-js .vjs-volume-panel .vjs-volume-control:active, .video-js .vjs-volume-panel.vjs-hover .vjs-mute-control ~ .vjs-volume-control, .video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active {
  visibility: visible;
  opacity: 1;
  position: relative;
  transition: visibility 0.1s, opacity 0.1s, height 0.1s, width 0.1s, left 0s, top 0s;
}
.video-js .vjs-volume-panel.vjs-hover .vjs-volume-control.vjs-volume-horizontal, .video-js .vjs-volume-panel:active .vjs-volume-control.vjs-volume-horizontal, .video-js .vjs-volume-panel:focus .vjs-volume-control.vjs-volume-horizontal, .video-js .vjs-volume-panel .vjs-volume-control:active.vjs-volume-horizontal, .video-js .vjs-volume-panel.vjs-hover .vjs-mute-control ~ .vjs-volume-control.vjs-volume-horizontal, .video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active.vjs-volume-horizontal {
  width: 5em;
  height: 3em;
  margin-right: 0;
}
.video-js .vjs-volume-panel.vjs-hover .vjs-volume-control.vjs-volume-vertical, .video-js .vjs-volume-panel:active .vjs-volume-control.vjs-volume-vertical, .video-js .vjs-volume-panel:focus .vjs-volume-control.vjs-volume-vertical, .video-js .vjs-volume-panel .vjs-volume-control:active.vjs-volume-vertical, .video-js .vjs-volume-panel.vjs-hover .vjs-mute-control ~ .vjs-volume-control.vjs-volume-vertical, .video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active.vjs-volume-vertical {
  left: -3.5em;
  transition: left 0s;
}
.video-js .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-hover, .video-js .vjs-volume-panel.vjs-volume-panel-horizontal:active, .video-js .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active {
  width: 10em;
  transition: width 0.1s;
}
.video-js .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-mute-toggle-only {
  width: 4em;
}

.video-js .vjs-volume-panel .vjs-volume-control.vjs-volume-vertical {
  height: 8em;
  width: 3em;
  left: -3000em;
  transition: visibility 1s, opacity 1s, height 1s 1s, width 1s 1s, left 1s 1s, top 1s 1s;
}

.video-js .vjs-volume-panel .vjs-volume-control.vjs-volume-horizontal {
  transition: visibility 1s, opacity 1s, height 1s 1s, width 1s, left 1s 1s, top 1s 1s;
}

.video-js.vjs-no-flex .vjs-volume-panel .vjs-volume-control.vjs-volume-horizontal {
  width: 5em;
  height: 3em;
  visibility: visible;
  opacity: 1;
  position: relative;
  transition: none;
}

.video-js.vjs-no-flex .vjs-volume-control.vjs-volume-vertical,
.video-js.vjs-no-flex .vjs-volume-panel .vjs-volume-control.vjs-volume-vertical {
  position: absolute;
  bottom: 3em;
  left: 0.5em;
}

.video-js .vjs-volume-panel {
  display: flex;
}

.video-js .vjs-volume-bar {
  margin: 1.35em 0.45em;
}

.vjs-volume-bar.vjs-slider-horizontal {
  width: 5em;
  height: 0.3em;
}

.vjs-volume-bar.vjs-slider-vertical {
  width: 0.3em;
  height: 5em;
  margin: 1.35em auto;
}

.video-js .vjs-volume-level {
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: #fff;
}
.video-js .vjs-volume-level:before {
  position: absolute;
  font-size: 0.9em;
  z-index: 1;
}

.vjs-slider-vertical .vjs-volume-level {
  width: 0.3em;
}
.vjs-slider-vertical .vjs-volume-level:before {
  top: -0.5em;
  left: -0.3em;
  z-index: 1;
}

.vjs-slider-horizontal .vjs-volume-level {
  height: 0.3em;
}
.vjs-slider-horizontal .vjs-volume-level:before {
  top: -0.3em;
  right: -0.5em;
}

.video-js .vjs-volume-panel.vjs-volume-panel-vertical {
  width: 4em;
}

.vjs-volume-bar.vjs-slider-vertical .vjs-volume-level {
  height: 100%;
}

.vjs-volume-bar.vjs-slider-horizontal .vjs-volume-level {
  width: 100%;
}

.video-js .vjs-volume-vertical {
  width: 3em;
  height: 8em;
  bottom: 8em;
  background-color: #2B333F;
  background-color: rgba(43, 51, 63, 0.7);
}

.video-js .vjs-volume-horizontal .vjs-menu {
  left: -2em;
}

.video-js .vjs-volume-tooltip {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 0.3em;
  color: #000;
  float: right;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1em;
  padding: 6px 8px 8px 8px;
  pointer-events: none;
  position: absolute;
  top: -3.4em;
  visibility: hidden;
  z-index: 1;
}

.video-js .vjs-volume-control:hover .vjs-volume-tooltip,
.video-js .vjs-volume-control:hover .vjs-progress-holder:focus .vjs-volume-tooltip {
  display: block;
  font-size: 1em;
  visibility: visible;
}

.video-js .vjs-volume-vertical:hover .vjs-volume-tooltip,
.video-js .vjs-volume-vertical:hover .vjs-progress-holder:focus .vjs-volume-tooltip {
  left: 1em;
  top: -12px;
}

.video-js .vjs-volume-control.disabled:hover .vjs-volume-tooltip {
  font-size: 1em;
}

.video-js .vjs-volume-control .vjs-mouse-display {
  display: none;
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: #000;
  z-index: 1;
}

.video-js .vjs-volume-horizontal .vjs-mouse-display {
  width: 1px;
  height: 100%;
}

.vjs-no-flex .vjs-volume-control .vjs-mouse-display {
  z-index: 0;
}

.video-js .vjs-volume-control:hover .vjs-mouse-display {
  display: block;
}

.video-js.vjs-user-inactive .vjs-volume-control .vjs-mouse-display {
  visibility: hidden;
  opacity: 0;
  transition: visibility 1s, opacity 1s;
}

.video-js.vjs-user-inactive.vjs-no-flex .vjs-volume-control .vjs-mouse-display {
  display: none;
}

.vjs-mouse-display .vjs-volume-tooltip {
  color: #fff;
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.8);
}

.vjs-poster {
  display: inline-block;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
  background-color: #000000;
  cursor: pointer;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
}

.vjs-has-started .vjs-poster,
.vjs-using-native-controls .vjs-poster {
  display: none;
}

.vjs-audio.vjs-has-started .vjs-poster,
.vjs-has-started.vjs-audio-poster-mode .vjs-poster {
  display: block;
}

.video-js .vjs-live-control {
  display: flex;
  align-items: flex-start;
  flex: auto;
  font-size: 1em;
  line-height: 3em;
}

.vjs-no-flex .vjs-live-control {
  display: table-cell;
  width: auto;
  text-align: left;
}

.video-js:not(.vjs-live) .vjs-live-control,
.video-js.vjs-liveui .vjs-live-control {
  display: none;
}

.video-js .vjs-seek-to-live-control {
  align-items: center;
  cursor: pointer;
  flex: none;
  display: inline-flex;
  height: 100%;
  padding-left: 0.5em;
  padding-right: 0.5em;
  font-size: 1em;
  line-height: 3em;
  width: auto;
  min-width: 4em;
}

.vjs-no-flex .vjs-seek-to-live-control {
  display: table-cell;
  width: auto;
  text-align: left;
}

.video-js.vjs-live:not(.vjs-liveui) .vjs-seek-to-live-control,
.video-js:not(.vjs-live) .vjs-seek-to-live-control {
  display: none;
}

.vjs-seek-to-live-control.vjs-control.vjs-at-live-edge {
  cursor: auto;
}

.vjs-seek-to-live-control .vjs-icon-placeholder {
  margin-right: 0.5em;
  color: #888;
}

.vjs-seek-to-live-control.vjs-control.vjs-at-live-edge .vjs-icon-placeholder {
  color: red;
}

.video-js .vjs-time-control {
  flex: none;
  font-size: 1em;
  line-height: 3em;
  min-width: 2em;
  width: auto;
  padding-left: 1em;
  padding-right: 1em;
}

.vjs-live .vjs-time-control {
  display: none;
}

.video-js .vjs-current-time,
.vjs-no-flex .vjs-current-time {
  display: none;
}

.video-js .vjs-duration,
.vjs-no-flex .vjs-duration {
  display: none;
}

.vjs-time-divider {
  display: none;
  line-height: 3em;
}

.vjs-live .vjs-time-divider {
  display: none;
}

.video-js .vjs-play-control {
  cursor: pointer;
}

.video-js .vjs-play-control .vjs-icon-placeholder {
  flex: none;
}

.vjs-text-track-display {
  position: absolute;
  bottom: 3em;
  left: 0;
  right: 0;
  top: 0;
  pointer-events: none;
}

.video-js.vjs-controls-disabled .vjs-text-track-display,
.video-js.vjs-user-inactive.vjs-playing .vjs-text-track-display {
  bottom: 1em;
}

.video-js .vjs-text-track {
  font-size: 1.4em;
  text-align: center;
  margin-bottom: 0.1em;
}

.vjs-subtitles {
  color: #fff;
}

.vjs-captions {
  color: #fc6;
}

.vjs-tt-cue {
  display: block;
}

video::-webkit-media-text-track-display {
  transform: translateY(-3em);
}

.video-js.vjs-controls-disabled video::-webkit-media-text-track-display,
.video-js.vjs-user-inactive.vjs-playing video::-webkit-media-text-track-display {
  transform: translateY(-1.5em);
}

.video-js .vjs-picture-in-picture-control {
  cursor: pointer;
  flex: none;
}
.video-js.vjs-audio-only-mode .vjs-picture-in-picture-control {
  display: none;
}

.video-js .vjs-fullscreen-control {
  cursor: pointer;
  flex: none;
}
.video-js.vjs-audio-only-mode .vjs-fullscreen-control {
  display: none;
}

.vjs-playback-rate > .vjs-menu-button,
.vjs-playback-rate .vjs-playback-rate-value {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.vjs-playback-rate .vjs-playback-rate-value {
  pointer-events: none;
  font-size: 1.5em;
  line-height: 2;
  text-align: center;
}

.vjs-playback-rate .vjs-menu {
  width: 4em;
  left: 0em;
}

.vjs-error .vjs-error-display .vjs-modal-dialog-content {
  font-size: 1.4em;
  text-align: center;
}

.vjs-error .vjs-error-display:before {
  color: #fff;
  content: "X";
  font-family: Arial, Helvetica, sans-serif;
  font-size: 4em;
  left: 0;
  line-height: 1;
  margin-top: -0.5em;
  position: absolute;
  text-shadow: 0.05em 0.05em 0.1em #000;
  text-align: center;
  top: 50%;
  vertical-align: middle;
  width: 100%;
}

.vjs-loading-spinner {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -25px 0 0 -25px;
  opacity: 0.85;
  text-align: left;
  border: 6px solid rgba(43, 51, 63, 0.7);
  box-sizing: border-box;
  background-clip: padding-box;
  width: 50px;
  height: 50px;
  border-radius: 25px;
  visibility: hidden;
}

.vjs-seeking .vjs-loading-spinner,
.vjs-waiting .vjs-loading-spinner {
  display: block;
  animation: vjs-spinner-show 0s linear 0.3s forwards;
}

.vjs-loading-spinner:before,
.vjs-loading-spinner:after {
  content: "";
  position: absolute;
  margin: -6px;
  box-sizing: inherit;
  width: inherit;
  height: inherit;
  border-radius: inherit;
  opacity: 1;
  border: inherit;
  border-color: transparent;
  border-top-color: white;
}

.vjs-seeking .vjs-loading-spinner:before,
.vjs-seeking .vjs-loading-spinner:after,
.vjs-waiting .vjs-loading-spinner:before,
.vjs-waiting .vjs-loading-spinner:after {
  animation: vjs-spinner-spin 1.1s cubic-bezier(0.6, 0.2, 0, 0.8) infinite, vjs-spinner-fade 1.1s linear infinite;
}

.vjs-seeking .vjs-loading-spinner:before,
.vjs-waiting .vjs-loading-spinner:before {
  border-top-color: white;
}

.vjs-seeking .vjs-loading-spinner:after,
.vjs-waiting .vjs-loading-spinner:after {
  border-top-color: white;
  animation-delay: 0.44s;
}

@keyframes vjs-spinner-show {
  to {
    visibility: visible;
  }
}
@keyframes vjs-spinner-spin {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes vjs-spinner-fade {
  0% {
    border-top-color: #73859f;
  }
  20% {
    border-top-color: #73859f;
  }
  35% {
    border-top-color: white;
  }
  60% {
    border-top-color: #73859f;
  }
  100% {
    border-top-color: #73859f;
  }
}
.video-js.vjs-audio-only-mode .vjs-captions-button {
  display: none;
}

.vjs-chapters-button .vjs-menu ul {
  width: 24em;
}

.video-js.vjs-audio-only-mode .vjs-descriptions-button {
  display: none;
}

.video-js .vjs-subs-caps-button + .vjs-menu .vjs-captions-menu-item .vjs-menu-item-text .vjs-icon-placeholder {
  vertical-align: middle;
  display: inline-block;
  margin-bottom: -0.1em;
}

.video-js .vjs-subs-caps-button + .vjs-menu .vjs-captions-menu-item .vjs-menu-item-text .vjs-icon-placeholder:before {
  font-family: VideoJS;
  content: "";
  font-size: 1.5em;
  line-height: inherit;
}

.video-js.vjs-audio-only-mode .vjs-subs-caps-button {
  display: none;
}

.video-js .vjs-audio-button + .vjs-menu .vjs-main-desc-menu-item .vjs-menu-item-text .vjs-icon-placeholder {
  vertical-align: middle;
  display: inline-block;
  margin-bottom: -0.1em;
}

.video-js .vjs-audio-button + .vjs-menu .vjs-main-desc-menu-item .vjs-menu-item-text .vjs-icon-placeholder:before {
  font-family: VideoJS;
  content: " ";
  font-size: 1.5em;
  line-height: inherit;
}

.video-js.vjs-layout-small .vjs-current-time,
.video-js.vjs-layout-small .vjs-time-divider,
.video-js.vjs-layout-small .vjs-duration,
.video-js.vjs-layout-small .vjs-remaining-time,
.video-js.vjs-layout-small .vjs-playback-rate,
.video-js.vjs-layout-small .vjs-volume-control, .video-js.vjs-layout-x-small .vjs-current-time,
.video-js.vjs-layout-x-small .vjs-time-divider,
.video-js.vjs-layout-x-small .vjs-duration,
.video-js.vjs-layout-x-small .vjs-remaining-time,
.video-js.vjs-layout-x-small .vjs-playback-rate,
.video-js.vjs-layout-x-small .vjs-volume-control, .video-js.vjs-layout-tiny .vjs-current-time,
.video-js.vjs-layout-tiny .vjs-time-divider,
.video-js.vjs-layout-tiny .vjs-duration,
.video-js.vjs-layout-tiny .vjs-remaining-time,
.video-js.vjs-layout-tiny .vjs-playback-rate,
.video-js.vjs-layout-tiny .vjs-volume-control {
  display: none;
}
.video-js.vjs-layout-small .vjs-volume-panel.vjs-volume-panel-horizontal:hover, .video-js.vjs-layout-small .vjs-volume-panel.vjs-volume-panel-horizontal:active, .video-js.vjs-layout-small .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active, .video-js.vjs-layout-small .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-hover, .video-js.vjs-layout-x-small .vjs-volume-panel.vjs-volume-panel-horizontal:hover, .video-js.vjs-layout-x-small .vjs-volume-panel.vjs-volume-panel-horizontal:active, .video-js.vjs-layout-x-small .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active, .video-js.vjs-layout-x-small .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-hover, .video-js.vjs-layout-tiny .vjs-volume-panel.vjs-volume-panel-horizontal:hover, .video-js.vjs-layout-tiny .vjs-volume-panel.vjs-volume-panel-horizontal:active, .video-js.vjs-layout-tiny .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active, .video-js.vjs-layout-tiny .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-hover {
  width: auto;
  width: initial;
}
.video-js.vjs-layout-x-small .vjs-progress-control, .video-js.vjs-layout-tiny .vjs-progress-control {
  display: none;
}
.video-js.vjs-layout-x-small .vjs-custom-control-spacer {
  flex: auto;
  display: block;
}
.video-js.vjs-layout-x-small.vjs-no-flex .vjs-custom-control-spacer {
  width: auto;
}

.vjs-modal-dialog.vjs-text-track-settings {
  background-color: #2B333F;
  background-color: rgba(43, 51, 63, 0.75);
  color: #fff;
  height: 70%;
}

.vjs-text-track-settings .vjs-modal-dialog-content {
  display: table;
}

.vjs-text-track-settings .vjs-track-settings-colors,
.vjs-text-track-settings .vjs-track-settings-font,
.vjs-text-track-settings .vjs-track-settings-controls {
  display: table-cell;
}

.vjs-text-track-settings .vjs-track-settings-controls {
  text-align: right;
  vertical-align: bottom;
}

@supports (display: grid) {
  .vjs-text-track-settings .vjs-modal-dialog-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    padding: 20px 24px 0px 24px;
  }

  .vjs-track-settings-controls .vjs-default-button {
    margin-bottom: 20px;
  }

  .vjs-text-track-settings .vjs-track-settings-controls {
    grid-column: 1/-1;
  }

  .vjs-layout-small .vjs-text-track-settings .vjs-modal-dialog-content,
.vjs-layout-x-small .vjs-text-track-settings .vjs-modal-dialog-content,
.vjs-layout-tiny .vjs-text-track-settings .vjs-modal-dialog-content {
    grid-template-columns: 1fr;
  }
}
.vjs-track-setting > select {
  margin-right: 1em;
  margin-bottom: 0.5em;
}

.vjs-text-track-settings fieldset {
  margin: 5px;
  padding: 3px;
  border: none;
}

.vjs-text-track-settings fieldset span {
  display: inline-block;
}

.vjs-text-track-settings fieldset span > select {
  max-width: 7.3em;
}

.vjs-text-track-settings legend {
  color: #fff;
  margin: 0 0 5px 0;
}

.vjs-text-track-settings .vjs-label {
  position: absolute;
  clip: rect(1px 1px 1px 1px);
  clip: rect(1px, 1px, 1px, 1px);
  display: block;
  margin: 0 0 5px 0;
  padding: 0;
  border: 0;
  height: 1px;
  width: 1px;
  overflow: hidden;
}

.vjs-track-settings-controls button:focus,
.vjs-track-settings-controls button:active {
  outline-style: solid;
  outline-width: medium;
  background-image: linear-gradient(0deg, #fff 88%, #73859f 100%);
}

.vjs-track-settings-controls button:hover {
  color: rgba(43, 51, 63, 0.75);
}

.vjs-track-settings-controls button {
  background-color: #fff;
  background-image: linear-gradient(-180deg, #fff 88%, #73859f 100%);
  color: #2B333F;
  cursor: pointer;
  border-radius: 2px;
}

.vjs-track-settings-controls .vjs-default-button {
  margin-right: 1em;
}

@media print {
  .video-js > *:not(.vjs-tech):not(.vjs-poster) {
    visibility: hidden;
  }
}
.vjs-resize-manager {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  z-index: -1000;
}

.js-focus-visible .video-js *:focus:not(.focus-visible) {
  outline: none;
}

.video-js *:focus:not(:focus-visible) {
  outline: none;
}
.chat-popup {
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 999999;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: showpopbackin 0.2s linear 0s 1 forwards;
}

@keyframes showpopbackin {
  from {
    background: rgba(6, 7, 47, 0.4);
  }

  to {
    background: rgba(6, 7, 47, 0.8);
  }
}

.chat-pop-overlay {
  position: absolute;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  background: rgba(6, 7, 47, 0.82);
}

.chat-pop-body {
  position: relative;
  border-radius: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--surface-card);
  width: 500px;
  min-height: 400px;
}
.chat-pop-body.chat-v-pop {
  min-height: initial;
}
.chat-pop-body.chat-img-pop {
  min-height: initial;
  width: 400px;
}
.chat-pop-single-img-cont {
  width: 100%;
  overflow: hidden;
  border-radius: 8px;
  background-color: #000;
}
.chat-pop-single-img-cont img {
  width: 100%;
  max-height: 600px;
  display: block;
  margin: auto;
}
.chat-pop-body .cpop-close-btn {
  width: 25px;
  height: 25px;
  background-color: transparent;
  border: 0;
  outline: 0;
  position: absolute;
  top: -4px;
  right: -26px;
  cursor: pointer;
}
.chat-pop-body .cpop-close-btn img {
  width: 15px;
}
.chat-pop-video {
  width: 100%;
}
.chat-pop-video .video-js {
  width: 100% !important;
  max-height: 500px !important;
  background-color: #000 !important;
  border-radius: 8px !important;
}
.chat-pop-video .video-react {
  border-radius: 8px !important;
}
@media (max-width: 768px) {
  .chat-pop-body {
    width: 80%;
  }
  .chat-pop-body.chat-img-pop {
    width: 80%;
  }
  .chat-pop-video .video-js {
    max-height: 450px !important;
  }
  .chat-pop-single-img-cont {
    max-height: initial;
  }
  .chat-pop-single-img-cont img {
    width: 100%;
    max-height: 700px;
  }
}

@media (max-width: 668px) {
  .chat-pop-body {
    width: 80%;
  }
  .chat-pop-video .video-js {
    max-height: 400px !important;
  }

  .chat-pop-single-img-cont img {
    max-height: 600px;
  }
}
@media (max-width: 375px) {
  .chat-pop-single-img-cont img {
    max-height: 400px;
  }
}
/*
 * The host CMS has a global rule in common.css:
 *     button { background: var(--brand-secondary); color: var(--text-inverse); border:1px solid #aa4400; ... }
 *
 * That orange MYT default looks great in the rest of the app, but inside
 * our reminders feature we want plain dropdown rows, dashed pills, and
 * silent icon buttons — not orange buttons.
 *
 * We use narrow `.reminders-*-btn` helper classes (one per button shape)
 * instead of a blanket `.reminders-scope button` reset, because that would
 * also wipe out our own primary CTAs (`bg-mytPrimary`) — the global element
 * selector has lower specificity but a class-on-element scope reset would
 * be 0,1,1 vs Tailwind utility 0,1,0 and would clobber them.
 *
 * The class names have intentionally weird casing so they can't collide
 * with anything else in the codebase.
 */

/*
 * The host's global `button { margin: 5px }` rule pushes every <button>
 * 5px right and down from its container — which misaligned our filter
 * triggers from their labels and added odd gaps between toolbar buttons.
 * Reset margin for all our scoped button helpers in one place.
 */
.reminders-neutral-btn,
.reminders-neutral-btn-create,
.reminders-trigger-btn,
.reminders-primary-btn,
.reminders-secondary-btn,
.reminders-dashed-btn,
.reminders-icon-btn,
.reminders-attachment-remove-btn,
.reminders-pill,
.reminders-close-btn {
  margin: 0 !important;
}

.reminders-neutral-btn {
  background: var(--surface-card) !important;
  color: var(--text-primary) !important;
  border: none;
  padding: 0;
  margin: 0;
  border-radius: 0;
}
.reminders-neutral-btn:hover {
  background: var(--surface-sunken) !important;
}
.reminders-neutral-btn[data-selected='true'] {
  background: var(--surface-sunken) !important;
}

.reminders-neutral-btn-create {
  background: var(--surface-card) !important;
  color: var(--brand-primary) !important;
  border: none;
  border-top: 1px solid var(--surface-sunken);
  padding: 6px 10px;
  border-radius: 0;
}
.reminders-neutral-btn-create:hover {
  background: rgba(238, 115, 27, 0.06) !important;
}

.reminders-trigger-btn {
  background: var(--surface-card) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-default);
  border-radius: 6px;
  padding: 6px 10px;
}
.reminders-trigger-btn:hover {
  background: var(--surface-sunken) !important;
}

.reminders-primary-btn {
  background: var(--brand-primary) !important;
  color: var(--text-inverse) !important;
  border: none;
  border-radius: 6px;
  padding: 6px 16px;
}
.reminders-primary-btn:hover {
  opacity: 0.95;
}
.reminders-primary-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.reminders-secondary-btn {
  background: var(--surface-card) !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--border-default);
  border-radius: 6px;
  padding: 6px 12px;
}
.reminders-secondary-btn:hover {
  background: var(--surface-sunken) !important;
}

.reminders-dashed-btn {
  background: var(--surface-card) !important;
  color: var(--text-secondary) !important;
  border: 1px dashed var(--border-default);
  border-radius: 6px;
  padding: 6px 10px;
}
.reminders-dashed-btn:hover {
  background: var(--surface-sunken) !important;
}

.reminders-icon-btn {
  background: transparent !important;
  color: var(--text-muted) !important;
  border: none;
  border-radius: 6px;
  padding: 6px;
}
.reminders-icon-btn:hover {
  background: var(--surface-sunken) !important;
  color: var(--text-secondary) !important;
}

.reminders-attachment-remove-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  min-width: 20px;
  padding: 0 !important;
  border: 1px solid var(--border-default);
  border-radius: 999px;
  background: var(--surface-card) !important;
  color: var(--text-secondary) !important;
  box-shadow: var(--shadow-card);
}

.reminders-attachment-remove-btn:hover {
  background: var(--surface-card) !important;
  color: var(--text-primary) !important;
}

.reminders-pill {
  background: var(--surface-card) !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--border-default);
  border-radius: 999px;
  padding: 4px 12px;
}
.reminders-pill:hover {
  background: var(--surface-sunken) !important;
}
.reminders-pill-active,
.reminders-pill-active:hover {
  background: var(--brand-primary) !important;
  color: var(--text-inverse) !important;
  border-color: var(--brand-primary);
}

/*
 * SearchableSelect popover.
 *
 * The container previously used Tailwind `bg-white border-gray-200 shadow-lg`,
 * which stayed white in dark mode while the option rows (.reminders-neutral-btn,
 * which paint --surface-card) went dark — a glaring white frame around dark
 * content. Token-based here so it themes in both light and dark.
 */
.reminders-popover {
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow-modal);
}
.reminders-popover-searchbar {
  border-bottom: 1px solid var(--border-default);
}
/*
 * Search box: a borderless field over the popover surface, using the input
 * text/placeholder tokens. The focus affordance is a token-coloured bottom
 * border on the bar (--input-focus-border) rather than the host CMS's leaked
 * global purple focus glow — which we neutralise with `!important` (the same
 * technique the button helpers above use to beat global element rules).
 */
.reminders-search-input {
  background: transparent;
  color: var(--input-text);
}
.reminders-search-input::placeholder {
  color: var(--input-placeholder);
}
.reminders-search-input:focus {
  outline: none !important;
  box-shadow: none !important;
}
.reminders-popover-searchbar:focus-within {
  border-bottom-color: var(--input-focus-border);
}

/* Bordered text input for the presets save popover (distinct from the borderless
   search field above). Token-based so it themes in light and dark. */
.reminders-preset-input {
  background: var(--input-bg);
  color: var(--input-text);
  border: 1px solid var(--input-border);
  border-radius: 6px;
  padding: 6px 8px;
}
.reminders-preset-input::placeholder {
  color: var(--input-placeholder);
}
.reminders-preset-input:focus {
  outline: none !important;
  box-shadow: none !important;
  background: var(--input-focus-bg);
  border-color: var(--input-focus-border);
}

/*
 * react-date-range overrides.
 *
 * The library renders its predefined-range sidebar, input fields, and the
 * day-grid as native <button> elements with no background of their own. The
 * host CMS's global `button { background: var(--brand-secondary); color:#fff }` rule makes
 * the sidebar text invisible (white on white) and turns every calendar day
 * orange. We re-apply the library's defaults — scoped to .reminders-scope so
 * we don't break the rest of the app.
 */
.reminders-scope .rdrStaticRange,
.reminders-scope .rdrStaticRangeLabel,
.reminders-scope .rdrInputRangeInput,
.reminders-scope .rdrNextPrevButton,
.reminders-scope .rdrDay,
.reminders-scope .rdrMonthAndYearPickers select,
.reminders-scope .rdrDateDisplayItem input {
  background: transparent !important;
  color: var(--text-primary) !important;
  border: 0 !important;
}
.reminders-scope .rdrStaticRange {
  border-bottom: 1px solid var(--border-default) !important;
  padding: 0 !important;
}
.reminders-scope .rdrStaticRangeLabel {
  padding: 10px 20px !important;
}
.reminders-scope .rdrStaticRange:hover .rdrStaticRangeLabel,
.reminders-scope .rdrStaticRange:focus .rdrStaticRangeLabel {
  background: var(--surface-sunken) !important;
}
.reminders-scope .rdrStaticRangeSelected .rdrStaticRangeLabel {
  color: var(--brand-primary) !important;
  font-weight: 600;
}
.reminders-scope .rdrInputRangeInput {
  border: 1px solid var(--border-default) !important;
  border-radius: 4px !important;
  padding: 0 !important;
  width: 30px;
  height: 30px;
}
.reminders-scope .rdrNextPrevButton {
  background: var(--surface-sunken) !important;
  width: 24px;
  height: 24px;
  border-radius: 5px !important;
}
.reminders-scope .rdrNextPrevButton i {
  border-color: transparent var(--text-primary) transparent transparent;
}
.reminders-scope .rdrPprevButton i {
  border-color: transparent var(--text-primary) transparent transparent;
}
.reminders-scope .rdrDay {
  height: 3em;
  /* Drop the leaked global `button { margin: 5px }` (common.css) — it overflows
     the 1/7-width day grid and wraps it to ~5 columns, misaligning the dates
     from the 7 weekday headers. */
  margin: 0;
}
.reminders-scope .rdrDayNumber span {
  color: var(--text-primary) !important;
}
.reminders-scope .rdrDayPassive .rdrDayNumber span {
  color: var(--border-default) !important;
}

/*
 * Row currently being edited from the profile Reminders modal. Replaces the
 * old `bg-mytPrimary/5 ring-1 ring-inset ring-mytPrimary/30` utilities —
 * Tailwind 3 can't apply an `/opacity` modifier to our var()-backed brand
 * color, so the tint lives on tokens that flip with the theme instead.
 */
.reminders-row-editing {
  background: var(--brand-primary-soft);
  box-shadow: inset 0 0 0 1px var(--brand-primary-ring);
}

/*
 * Native <select> option lists: Chrome/Firefox paint the popup from the
 * select's own background, but only when it is set explicitly — otherwise the
 * options fall back to the OS light palette (white-on-white in dark mode).
 */
.reminders-scope select option {
  background: var(--surface-card);
  color: var(--text-primary);
}

/*
 * Date/time pickers render their calendar/clock glyph and the native picker
 * panel from the UA color scheme. Without this the icon is near-invisible
 * against the dark input surface.
 */
.dark .reminders-scope input[type='date'],
.dark .reminders-scope input[type='time'] {
  color-scheme: dark;
}

.reminders-close-btn {
  background: var(--brand-primary-soft) !important;
  color: var(--brand-primary) !important;
  border: none;
  border-radius: 999px;
  padding: 8px;
}
.reminders-close-btn:hover {
  background: rgba(238, 115, 27, 0.2) !important;
}

.reminders-attachment-media-link {
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: 6px;
  background: var(--surface-card);
  color: inherit;
}

.reminders-attachment-media-link:hover {
  color: inherit;
}

.reminders-attachment-image-link {
  width: 50%;
}

.reminders-attachment-media {
  position: static !important;
  top: auto !important;
  right: auto !important;
  display: block;
  width: 100% !important;
  max-width: 100%;
  height: auto;
  cursor: pointer;
}

.reminders-attachment-download-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--overlay-modal);
  color: var(--text-inverse);
  opacity: 0;
  transition: opacity 150ms ease;
  pointer-events: none;
}

.reminders-attachment-media-link:hover .reminders-attachment-download-overlay,
.reminders-attachment-media-link:focus-visible .reminders-attachment-download-overlay {
  opacity: 1;
}

.reminders-attachment-file-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid var(--border-default);
  border-radius: 6px;
  background: var(--surface-card);
  color: var(--text-secondary);
  font-size: 12px;
}

.reminders-attachment-file-row:hover {
  background: var(--surface-sunken);
  color: var(--text-primary);
}

/* ---- Dark theme for react-date-range (DUE DATE range picker) ---- */
.dark .rdrCalendarWrapper,
.dark .rdrDateRangeWrapper {
  background: var(--surface-card);
  color: var(--text-primary);
}

.dark .rdrDefinedRangesWrapper {
  background: var(--surface-card);
  border-right-color: var(--border-default);
}

.dark .rdrStaticRange {
  background: transparent;
  border-bottom-color: var(--border-default);
}

.dark .rdrStaticRangeLabel {
  color: var(--text-secondary);
}

.dark .rdrStaticRange:hover .rdrStaticRangeLabel,
.dark .rdrStaticRange:focus .rdrStaticRangeLabel {
  background: var(--surface-sunken);
  color: var(--text-primary);
}

.dark .rdrInputRanges {
  border-top-color: var(--border-default);
}

.dark .rdrInputRangeInput {
  background: var(--input-bg);
  border-color: var(--input-border);
  color: var(--text-primary);
}

.dark .rdrDateDisplayWrapper {
  background-color: var(--surface-sunken);
}

.dark .rdrDateDisplayItem {
  background-color: var(--input-bg);
  border-color: var(--input-border);
  box-shadow: none;
}

.dark .rdrDateDisplayItem input {
  color: var(--text-primary);
}

.dark .rdrDateDisplayItemActive {
  border-color: var(--brand-primary);
}

.dark .rdrMonthAndYearPickers select {
  color: var(--text-primary);
}

.dark .rdrMonthAndYearPickers select option {
  background: var(--surface-card);
  color: var(--text-primary);
}

.dark .rdrMonthName,
.dark .rdrWeekDay {
  color: var(--text-secondary);
}

.dark .rdrDayNumber span {
  color: var(--text-primary);
}

.dark .rdrDayPassive .rdrDayNumber span,
.dark .rdrDayDisabled .rdrDayNumber span {
  color: var(--text-muted);
}

.dark .rdrNextPrevButton {
  background: var(--surface-sunken);
}

.dark .rdrNextPrevButton:hover {
  background: var(--border-default);
}

.dark .rdrPprevButton i {
  border-color: transparent var(--text-primary) transparent transparent;
}

.dark .rdrNextButton i {
  border-color: transparent transparent transparent var(--text-primary);
}

/* Overrides common.css's width:calc(90% - 60px) + 5% side margins on wide screens,
   toggled by index.jsx on mount/unmount. Same pattern as concierge_v3's fullwidth. */
.common-page-container.reminders-fullwidth {
  width: auto;
  margin: 16px 24px;
}
.teacher-marker {
  position: relative;
}

.teacher-marker-name {
  display: none;
  position: absolute;
  width: 50;
  left: 20;
  margin-left: 20;
  border: 1px solid;
  background-color: wheat;
  z-index: 20;
}

.teacher-marker:hover .teacher-marker-name {
  display: block;
}
@font-face {
  font-family: "Twemoji Mozilla";
  src: url(/assets/TwemojiMozilla-BSQKJ6aF.ttf) format("truetype");
  font-weight: normal;
  font-style: normal;
}
.stdropdown-container {
  text-align: left;
  border: 1px solid #ccc;
  position: relative;
  border-radius: 5px;
  font-family: Arial, Helvetica, sans-serif;
}

.stdropdown-input input {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif, "Twemoji Mozilla" !important;
}

.stdropdown-flag {
  font-family: "Twemoji Mozilla" !important;
}

.stdropdown-menu::-webkit-scrollbar {
  width: 2px;
}

.stdropdown-menu::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.stdropdown-menu::-webkit-scrollbar-thumb {
  background: #888;
}

.stdropdown-menu::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.stdropdown-input {
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  -webkit-user-select: none;
          user-select: none;
}

.stdropdown-menu {
  position: absolute;
  transform: translateY(4px);
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 5px;
  overflow: auto;
  max-height: 150px;
  background-color: #fff;
  z-index: 99;
}

.stdropdown-item {
  padding: 5px;
  cursor: pointer;
}

.stdropdown-item:hover {
  background-color: rgba(159, 195, 248, 0.4392156863);
}

.stdropdown-item.selected {
  background-color: #0d6efd;
  color: #fff;
}

.stdropdown-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.stdropdown-tag-item {
  background-color: #ddd;
  padding: 2px 4px;
  border-radius: 2px;
  display: flex;
  align-items: center;
}

.stdropdown-tag-close {
  display: flex;
  align-items: center;
}

.stsearch-box {
  padding: 5px;
  background-color: transparent;
}

.stsearch-box input {
  width: 100%;
  box-sizing: border-box;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
}.teacher-match-page {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: calc(100% - 48px);
  max-width: 1280px;
  margin: 20px auto;
  /* Containing block for absolutely-positioned descendants (e.g. the visually
     hidden checkbox <input>s). Without this they anchor to <body> and inflate
     its scroll height, so focusing one scrolls the whole shell away (blank). */
  position: relative;
}

.teacher-match-filter-panel,
.teacher-match-results {
  box-sizing: border-box;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--surface-card);
  box-shadow: var(--shadow-card);
}

.teacher-match-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.teacher-match-search {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 260px;
  max-width: 620px;
  height: 42px;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  padding: 0 14px;
  color: var(--text-muted);
  background: var(--surface-card);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.teacher-match-search:focus-within {
  border-color: var(--state-info);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.teacher-match-page .teacher-match-search input {
  width: 100%;
  height: auto;
  max-width: none;
  border: 0 !important;
  outline: 0 !important;
  color: var(--text-primary);
  -webkit-appearance: none;
  appearance: none;
  background: transparent !important;
  font-size: 15px;
  font-family: inherit;
  font-weight: 500;
  line-height: 1;
  margin: 0;
  padding: 0;
  box-shadow: none !important;
}

.teacher-match-page .teacher-match-search input:focus,
.teacher-match-page .teacher-match-search input:hover {
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.teacher-match-page .teacher-match-search input::placeholder {
  color: #94a3b8;
}

/* Segmented All-words / Any-word toggle living inside the search bar. */
.teacher-match-search-mode {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 2px;
  border: 1px solid var(--border-default);
  border-radius: 9999px;
  padding: 2px;
  background: #f8fafc;
}

.teacher-match-page .teacher-match-search-mode-btn {
  height: 22px;
  border: 0;
  border-radius: 9999px;
  margin: 0;
  padding: 0 10px;
  color: var(--text-secondary);
  background: transparent;
  font-size: 12px;
  font-family: inherit;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition:
    color 0.15s ease,
    background 0.15s ease;
}

.teacher-match-page .teacher-match-search-mode-btn:hover {
  color: #1d4ed8;
}

.teacher-match-page .teacher-match-search-mode-btn.is-active {
  color: #1d4ed8;
  background: #eff6ff;
  box-shadow: inset 0 0 0 1px #bfdbfe;
}

/* Dark: the pill track becomes a sunken dark surface (mirroring the light
   #f8fafc-on-white relationship) so the unselected segment's --text-secondary
   reads as light grey on dark instead of pale grey on white. The active
   segment reuses the same blue treatment as .dark .teacher-match-filter-chip. */
.dark .teacher-match-search-mode {
  background: var(--surface-sunken);
}

.dark .teacher-match-page .teacher-match-search-mode-btn:hover {
  color: #93c5fd;
}

.dark .teacher-match-page .teacher-match-search-mode-btn.is-active {
  color: #bfdbfe;
  background: #1e3a5f;
  box-shadow: inset 0 0 0 1px #2563eb;
}

.teacher-match-filter-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
  font-size: 13px;
  white-space: nowrap;
}

.teacher-match-active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.teacher-match-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  min-height: 26px;
  border: 1px solid #bfdbfe;
  border-radius: 9999px;
  margin: 0;
  padding: 3px 8px 3px 10px;
  color: #1d4ed8;
  background: #eff6ff;
  font-size: 12px;
  line-height: 1.2;
  text-shadow: none;
  box-shadow: none;
}

.teacher-match-filter-chip:hover,
.teacher-match-filter-chip:focus {
  border-color: #93c5fd;
  background: #dbeafe;
  outline: none;
}

.teacher-match-filter-chip-label {
  flex: 0 0 auto;
  color: #2563eb;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.teacher-match-filter-chip-value {
  min-width: 0;
  overflow: hidden;
  color: #1e3a8a;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dark .teacher-match-filter-chip {
  border-color: #2563eb;
  color: #bfdbfe;
  background: #1e3a5f;
}

.dark .teacher-match-filter-chip-label,
.dark .teacher-match-filter-chip-value {
  color: #bfdbfe;
}

.teacher-match-clear-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 30px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid var(--border-default);
  border-radius: 6px;
  background: var(--surface-card);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  text-shadow: none;
  box-shadow: none;
}

.teacher-match-clear-btn:hover {
  border-color: var(--border-emphasis);
  background: var(--surface-sunken);
  color: var(--text-primary);
}

.teacher-match-grid {
  display: grid;
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.teacher-match-filter-panel {
  display: flex;
  flex-direction: column;
  padding: 0;
  border-radius: 12px;
  border-color: var(--border-emphasis);
  /* Layered elevation: tight contact shadow + soft ambient shadow. */
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.06),
    0 14px 30px rgba(15, 23, 42, 0.12);
}

.teacher-match-panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex: 0 0 auto;
  padding: 14px 14px 12px;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  border-bottom: 1px solid var(--border-default);
  background: var(--surface-card);
}

.teacher-match-panel-title {
  color: var(--text-primary);
  font-size: 16px;
  font-weight: 700;
}

.teacher-match-recommendation,
.teacher-match-card,
.teacher-match-empty {
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--surface-card);
}

.teacher-match-filter-group {
  padding-top: 16px;
}

.teacher-match-filter-group:first-child {
  padding-top: 0;
}

.teacher-match-operational-group {
  margin-top: 15px;
  padding-top: 13px;
  border-top: 1px solid var(--border-default);
}

.teacher-match-filter-scroll {
  padding: 14px 14px 16px;
}

.teacher-match-filter-heading {
  margin-bottom: 12px;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 700;
}

.teacher-match-field {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 11px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
}

.teacher-match-field:last-child {
  margin-bottom: 0;
}

.teacher-match-field-open {
  z-index: 90;
}

.teacher-match-field-disabled {
  opacity: 0.45;
  pointer-events: none;
}

.teacher-match-field-hint {
  margin-top: -4px;
  font-size: 11px;
  color: var(--text-muted);
}

/* Score breakdown tooltip */
.teacher-match-score {
  cursor: help;
}

.teacher-match-score-tooltip-box.teacher-match-score-tooltip-box {
  background: var(--surface-card);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.18);
  opacity: 1;
  padding: 10px 12px;
  z-index: 1000;
}

.teacher-match-score-tooltip-box .react-tooltip-arrow {
  background: var(--surface-card);
  border-right: 1px solid var(--border-default);
  border-bottom: 1px solid var(--border-default);
}

.teacher-match-score-tooltip {
  min-width: 200px;
}

.teacher-match-score-tooltip-title {
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 700;
}

.teacher-match-score-tooltip-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 2px 0;
  font-size: 12px;
}

.teacher-match-score-tooltip-label {
  color: var(--text-muted);
}

.teacher-match-score-tooltip-value {
  font-weight: 600;
}

.teacher-match-score-tooltip-note {
  margin-top: 6px;
  font-size: 11px;
  font-style: italic;
  color: var(--text-muted);
}

.teacher-match-field-label {
  color: var(--text-secondary);
}

.teacher-match-filter-group:first-child .teacher-match-field-label {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
}

.teacher-match-range-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 2px 8px;
  margin-bottom: 6px;
}

/* Keep label and readout at full width so a long readout (e.g. the Years on
   Platform step labels) wraps to its own line instead of being clipped. */
.teacher-match-range-header .teacher-match-field-label {
  flex-shrink: 0;
  white-space: nowrap;
}

.teacher-match-range-readout {
  flex-shrink: 0;
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.teacher-match-range-scale {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  color: var(--text-muted);
  font-size: 11px;
}

.teacher-match-range {
  position: relative;
  display: flex;
  align-items: center;
  height: 30px;
  /* room for the thumbs so they aren't clipped at the ends */
  padding: 0 9px;
}

.teacher-match-range-track {
  position: absolute;
  left: 9px;
  right: 9px;
  top: 50%;
  height: 4px;
  border-radius: 999px;
  background: var(--border-default);
  transform: translateY(-50%);
}

.teacher-match-range-fill {
  position: absolute;
  top: 0;
  height: 100%;
  border-radius: 999px;
  background: var(--brand-primary);
}

.teacher-match-range-input {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  height: 30px;
  margin: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}

.teacher-match-range-input::-webkit-slider-runnable-track {
  background: transparent;
  border: none;
}

.teacher-match-range-input::-moz-range-track {
  background: transparent;
  border: none;
}

.teacher-match-range-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  pointer-events: auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--brand-primary);
  background: var(--surface-card);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.25);
  cursor: pointer;
}

.teacher-match-range-input::-moz-range-thumb {
  pointer-events: auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--brand-primary);
  background: var(--surface-card);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.25);
  cursor: pointer;
}

/* The app applies a global purple border + box-shadow to <input>s on hover and
   focus. The range input is invisible (track/thumb are separate elements), so
   suppress all of it in every state — otherwise a purple rectangle highlights
   the slider on hover/focus and washes out the orange fill. */
.teacher-match-range-input,
.teacher-match-range-input:hover,
.teacher-match-range-input:focus,
.teacher-match-range-input:focus-visible {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
  /* Global input styles set a white background on hover/focus, which would
     paint over the track/fill sitting below this transparent input. */
  background: transparent !important;
}

/* Keyboard-only focus ring on the thumb (on-brand orange), so mouse clicks
   leave no lingering highlight. */
.teacher-match-range-input:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px rgba(204, 85, 0, 0.3);
}

.teacher-match-range-input:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 3px rgba(204, 85, 0, 0.3);
}

.teacher-match-availability-section {
  margin: 15px 0 12px;
  padding-top: 13px;
  border-top: 1px solid var(--border-default);
}

.teacher-match-availability-section > .teacher-match-field {
  margin-bottom: 10px;
}

.teacher-match-availability-title {
  margin-bottom: 9px;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 800;
}

.teacher-match-availability-field {
  z-index: 45;
}

.teacher-match-availability-field .teacher-match-field-label {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
}

.teacher-match-availability-popover {
  position: fixed;
  z-index: 1000;
  width: min(360px, calc(100vw - 32px));
  max-height: calc(100vh - 96px);
  overflow: visible;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  padding: 16px 18px;
  color: var(--text-primary);
  background: var(--surface-card);
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.2);
}

.teacher-match-availability-popover-title {
  margin-bottom: 10px;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 800;
}

.teacher-match-time-choice-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.teacher-match-time-choice {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 22px;
  margin: 0;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  /* Global label styles uppercase these; keep the title-case labels as written. */
  text-transform: none;
}

.teacher-match-time-choice input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.teacher-match-time-choice-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border: 1px solid transparent;
  border-radius: 5px;
  color: #ffffff;
  background: #eeeeee;
}

.teacher-match-time-choice:hover .teacher-match-time-choice-box {
  border-color: #bfdbfe;
  background: #e5e7eb;
}

.teacher-match-time-choice-selected {
  color: #1d4ed8;
}

.teacher-match-time-choice-selected .teacher-match-time-choice-box {
  border-color: #2563eb;
  background: #2563eb;
}

/* Keep the selected (blue) checkbox blue on hover — the generic hover rule
   above would otherwise gray it out and make it look deselected. */
.teacher-match-time-choice-selected:hover .teacher-match-time-choice-box {
  border-color: #2563eb;
  background: #2563eb;
}

.teacher-match-exact-time-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  min-height: 30px;
  border: 0;
  margin: 18px 0 12px;
  padding: 0;
  color: var(--text-primary);
  background: transparent;
  font-size: 14px;
  font-weight: 800;
  text-align: left;
  text-shadow: none;
  box-shadow: none;
}

.teacher-match-exact-time-toggle:hover,
.teacher-match-exact-time-toggle:focus {
  color: var(--state-info);
  background: transparent;
  outline: none;
}

.teacher-match-exact-time-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: min(250px, calc(100vh - 460px));
  overflow-y: auto;
  padding: 4px 4px 4px 8px;
  scrollbar-gutter: stable;
}

.teacher-match-availability-apply {
  width: 100%;
  height: 42px;
  border: 0;
  border-radius: 7px;
  margin: 18px 0 0;
  color: #ffffff;
  background: #2563eb;
  font-size: 15px;
  font-weight: 800;
  text-shadow: none;
  box-shadow: none;
}

.teacher-match-availability-apply:hover,
.teacher-match-availability-apply:focus {
  background: #1d4ed8;
  outline: none;
}

.teacher-match-availability-subfilters {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-left: 0;
  padding-left: 0;
}

.teacher-match-availability-subfilters .teacher-match-field,
.teacher-match-availability-subfilters .teacher-match-checkbox {
  margin-bottom: 0;
}

.teacher-match-availability-subfilters .teacher-match-field-label,
.teacher-match-availability-subfilters .teacher-match-checkbox-text {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
}

/* Joined multi-select for days of the week — styled like the segmented
   Session Duration control, with a green selected state. */
.teacher-match-day-toggle {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  min-height: 34px;
  border: 1px solid var(--input-border);
  border-radius: 6px;
  padding: 3px;
  background: var(--input-bg);
}

.teacher-match-day {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 26px;
  margin: 0;
  padding: 0 6px;
  border: 0;
  border-radius: 5px;
  color: var(--text-secondary);
  background: transparent;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease;
}

.teacher-match-day-selected,
.teacher-match-day-selected:hover,
.teacher-match-day-selected:focus {
  color: #ffffff;
  background: var(--state-success);
  box-shadow: 0 1px 4px rgba(22, 163, 74, 0.35);
}

.teacher-match-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  height: 34px;
  border: 1px solid var(--input-border);
  border-radius: 6px;
  margin: 0;
  padding: 0 9px 0 10px;
  color: var(--text-secondary);
  background: var(--input-bg);
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  text-shadow: none;
  box-shadow: none;
}

.teacher-match-select-trigger:hover,
.teacher-match-select-trigger:focus {
  border-color: var(--border-emphasis);
  background: var(--input-focus-bg);
  color: var(--text-primary);
  outline: none;
}

.teacher-match-select-trigger span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.teacher-match-geo-select {
  position: relative;
}

.teacher-match-geo-select .stdropdown-container {
  width: 100%;
}

.teacher-match-geo-select .stdropdown-input {
  display: flex;
  align-items: center;
  min-height: 34px;
  height: 34px;
  border: 1px solid var(--input-border);
  border-radius: 6px;
  color: var(--text-secondary);
  background: var(--input-bg);
  box-shadow: none;
}

.teacher-match-geo-select .stdropdown-input:focus-within,
.teacher-match-geo-select .stdropdown-input:hover {
  border-color: var(--border-emphasis);
  background: var(--input-focus-bg);
}

.teacher-match-page .teacher-match-geo-input {
  box-sizing: border-box;
  width: 100%;
  height: 32px;
  max-height: 32px;
  min-height: 0;
  border: 0 !important;
  outline: 0 !important;
  color: var(--text-secondary);
  background: transparent !important;
  font-size: 13px;
  font-family: inherit;
  font-weight: 600;
  line-height: 1;
  padding: 0 8px 0 10px !important;
  box-shadow: none !important;
}

.teacher-match-geo-select .stdropdown-tools {
  height: 32px;
}

.teacher-match-geo-select .stdropdown-tool {
  display: flex;
  align-items: center;
  height: 32px;
}

.teacher-match-page .teacher-match-geo-input:disabled {
  color: var(--text-muted);
  cursor: not-allowed;
}

.teacher-match-geo-select .stdropdown-menu {
  z-index: 40;
  overflow: auto;
  max-height: 220px;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--surface-card);
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.16);
}

.teacher-match-geo-select .stdropdown-item {
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
}

.teacher-match-geo-select .stdropdown-item:hover,
.teacher-match-geo-select .stdropdown-item.selected {
  color: var(--state-info);
  background: #eff6ff;
}

.teacher-match-selected {
  border-color: #93c5fd;
  color: #1d4ed8;
  background: #eff6ff;
}

.dark .teacher-match-selected {
  border-color: #2563eb;
  color: #bfdbfe;
  background: #1e3a5f;
}

.teacher-match-chevron-open {
  transform: rotate(180deg);
}

.teacher-match-options {
  position: absolute;
  z-index: 30;
  top: calc(100% + 5px);
  left: 0;
  right: 0;
  overflow: auto;
  max-height: 220px;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  padding: 4px;
  background: var(--surface-card);
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.16);
}

.teacher-match-options-up {
  top: auto;
  bottom: calc(100% + 5px);
}

.teacher-match-timezone-options {
  max-height: 260px;
}

.teacher-match-timezone-search {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  border: 1px solid var(--input-border);
  border-radius: 6px;
  margin: 0 0 4px;
  padding: 0 8px;
  color: var(--text-muted);
  background: var(--input-bg);
}

.teacher-match-datepicker-control {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  border: 1px solid var(--input-border);
  border-radius: 6px;
  padding: 0 8px;
  color: var(--text-muted);
  background: var(--input-bg);
}

.teacher-match-datepicker-control:focus-within,
.teacher-match-datepicker-control:hover {
  border-color: var(--border-emphasis);
  background: var(--input-focus-bg);
}

.teacher-match-datepicker-wrapper,
.teacher-match-datepicker-wrapper .react-datepicker__input-container {
  display: block;
  width: 100%;
}

.teacher-match-datepicker-wrapper .react-datepicker__input-container {
  height: 32px;
  padding-right: 18px;
}

.teacher-match-page .teacher-match-datepicker-input {
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: 32px !important;
  max-height: 32px;
  min-height: 0;
  border: 0 !important;
  outline: 0 !important;
  color: var(--text-secondary);
  background: transparent !important;
  font-size: 13px;
  font-family: inherit;
  font-weight: 600;
  line-height: 32px;
  margin: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.teacher-match-page .teacher-match-datepicker-input::placeholder {
  color: var(--text-muted);
}

.teacher-match-datepicker-popper {
  z-index: 50;
}

.teacher-match-datepicker-control .react-datepicker__close-icon {
  right: -3px;
  top: 7px;
  width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;
  background: transparent;
  line-height: 18px;
  text-align: center;
  transform: none;
  vertical-align: initial;
}

.teacher-match-datepicker-control .react-datepicker__close-icon::after {
  box-sizing: border-box;
  display: inline-block;
  width: 14px;
  height: 14px;
  margin: 0;
  padding: 0;
  color: #ffffff;
  background: var(--text-muted);
  content: '×';
  font-size: 10px;
  line-height: 14px;
  vertical-align: middle;
}

.teacher-match-datepicker-control .react-datepicker__close-icon:hover::after {
  background: var(--text-secondary);
}

.teacher-match-page .teacher-match-timezone-search input {
  width: 100%;
  /* Override the app's global fixed input height + bottom margin, both of which
     otherwise top-shift the text within the 32px search box. */
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  color: var(--text-primary);
  background: transparent !important;
  font-size: 13px;
  font-family: inherit;
  font-weight: 600;
  line-height: normal;
  padding: 0 !important;
  box-shadow: none !important;
}

.teacher-match-timezone-option > span {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.teacher-match-timezone-option-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.teacher-match-timezone-option-value {
  overflow: hidden;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.teacher-match-option-empty {
  padding: 8px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
}

.teacher-match-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 32px;
  border: 0;
  border-radius: 6px;
  margin: 0;
  padding: 7px 8px;
  color: var(--text-secondary);
  background: transparent;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.25;
  text-align: left;
  text-shadow: none;
  box-shadow: none;
}

.teacher-match-option:hover,
.teacher-match-option:focus {
  color: var(--text-primary);
  background: var(--surface-sunken);
  outline: none;
}

.teacher-match-option[aria-selected='true'] {
  color: #1d4ed8;
  background: #eff6ff;
  font-weight: 700;
}

.dark .teacher-match-option[aria-selected='true'] {
  color: #bfdbfe;
  background: #1e3a5f;
}

.teacher-match-checkbox {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 24px;
  border: 0;
  border-radius: 0;
  margin: 0 0 11px;
  padding: 0;
  color: var(--text-secondary);
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  /* Global label styles uppercase these; keep the title-case labels as written. */
  text-transform: none;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    color 0.15s ease;
}

.teacher-match-checkbox:last-child {
  margin-bottom: 0;
}

.teacher-match-checkbox:hover {
  background: transparent;
  color: var(--text-primary);
}

.teacher-match-checkbox input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.teacher-match-checkbox-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  border: 1px solid var(--border-emphasis);
  border-radius: 4px;
  color: #ffffff;
  background: var(--surface-card);
}

.teacher-match-checkbox-selected {
  color: #1d4ed8;
  background: transparent;
}

.teacher-match-checkbox-selected .teacher-match-checkbox-control {
  border-color: #2563eb;
  background: #2563eb;
}

.teacher-match-checkbox-text {
  min-width: 0;
}

.dark .teacher-match-checkbox-selected {
  color: #bfdbfe;
  background: transparent;
}

.teacher-match-segmented {
  display: grid;
  grid-template-columns: repeat(var(--segment-count), minmax(0, 1fr));
  gap: 4px;
  min-height: 34px;
  border: 1px solid var(--input-border);
  border-radius: 6px;
  padding: 3px;
  background: var(--input-bg);
}

.teacher-match-segment {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 26px;
  border: 0;
  border-radius: 5px;
  margin: 0;
  padding: 0 8px;
  color: var(--text-secondary);
  background: transparent;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  text-shadow: none;
  box-shadow: none;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease;
}

.teacher-match-segment:hover,
.teacher-match-segment:focus {
  color: var(--text-primary);
  background: var(--surface-sunken);
  outline: none;
}

.teacher-match-segment-selected,
.teacher-match-segment-selected:hover,
.teacher-match-segment-selected:focus {
  color: #ffffff;
  background: #2563eb;
  box-shadow: 0 1px 4px rgba(37, 99, 235, 0.35);
}

.dark .teacher-match-segment-selected,
.dark .teacher-match-segment-selected:hover,
.dark .teacher-match-segment-selected:focus {
  color: #ffffff;
  background: #3b82f6;
  box-shadow: 0 1px 4px rgba(59, 130, 246, 0.35);
}

.teacher-match-results {
  display: flex;
  flex-direction: column;
  position: -webkit-sticky;
  position: sticky;
  top: 20px;
  min-width: 0;
  max-height: calc(100vh - 40px);
  overflow: hidden;
  padding: 0;
}

.teacher-match-results-top {
  flex: 0 0 auto;
  padding: 14px;
  border-bottom: 1px solid var(--border-default);
  background: var(--surface-card);
}

.teacher-match-results-title {
  margin-bottom: 12px;
  color: var(--text-primary);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
}

.teacher-match-results-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px 10px 88px 14px;
  scrollbar-gutter: stable;
}

.teacher-match-recommendation {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding: 14px;
  border-color: #bfdbfe;
  background: #eff6ff;
}

.dark .teacher-match-recommendation {
  border-color: #1d4ed8;
  background: #172554;
}

.teacher-match-recommendation-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 6px;
  color: #1d4ed8;
  background: #dbeafe;
}

.dark .teacher-match-recommendation-icon {
  color: #bfdbfe;
  background: #1e3a8a;
}

.teacher-match-eyebrow {
  color: #1d4ed8;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.dark .teacher-match-eyebrow {
  color: #93c5fd;
}

.teacher-match-recommendation-title,
.teacher-match-section-title {
  color: var(--text-primary);
  font-size: 16px;
  font-weight: 700;
}

.teacher-match-results-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.teacher-match-muted {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.45;
}

.teacher-match-header-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.teacher-match-header-actions-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
}

.teacher-match-reasons-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-primary);
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
}

.teacher-match-reasons-toggle input {
  cursor: pointer;
}

.teacher-match-select-all {
  font-size: 13px;
  color: var(--text-primary);
}

/* Reads as a label for the rest of the row, so it keeps a little extra gap. */
.teacher-match-selected-count {
  margin-right: 4px;
}

/* Keep the control labels on one line; they wrap awkwardly otherwise. */
.teacher-match-header-actions-row .teacher-match-reasons-toggle,
.teacher-match-header-actions-row .teacher-match-select-all,
.teacher-match-header-actions-row .teacher-match-clear-btn,
.teacher-match-header-actions-row .teacher-match-muted {
  white-space: nowrap;
}

.teacher-match-copy-ids-btn {
  cursor: pointer;
}

.teacher-match-select-all input:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.teacher-match-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.teacher-match-card {
  padding: 14px;
}

.teacher-match-card-selected {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 1px var(--brand-primary);
}

.teacher-match-card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
}

.teacher-match-select {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
}

.teacher-match-select input {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--brand-primary);
  cursor: pointer;
}

.teacher-match-copy-btn {
  cursor: pointer;
}

.teacher-match-copy-id-btn {
  cursor: pointer;
}

.teacher-match-copy-id-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.teacher-match-selection-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.teacher-match-copy-selected-btn {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}

.teacher-match-copy-selected-btn:hover {
  color: var(--brand-primary);
}

.teacher-match-card-main {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 12px;
}

.teacher-match-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 8px;
  color: #ffffff;
  background: #0f766e;
  font-size: 14px;
  font-weight: 700;
}

.teacher-match-avatar-img {
  object-fit: cover;
  background: var(--surface-muted, #e5e7eb);
}

.teacher-match-card-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.teacher-match-video-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--brand-primary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.teacher-match-video-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--overlay-modal, rgba(15, 23, 42, 0.6));
}

.teacher-match-video-modal {
  width: min(820px, 100%);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface-card);
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.35);
}

.teacher-match-video-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-default);
}

.teacher-match-video-modal-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}

.teacher-match-video-close {
  display: inline-flex;
  padding: 4px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

.teacher-match-video-player {
  display: block;
  width: 100%;
  height: min(460px, 60vh);
  border: none;
  background: #000;
}

.teacher-match-name {
  color: var(--state-info);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}

.teacher-match-name:hover {
  text-decoration: underline;
}

.teacher-match-score {
  flex: 0 0 auto;
  border-radius: 9999px;
  padding: 3px 9px;
  color: var(--state-success-text);
  background: var(--state-success-bg);
  font-size: 12px;
  font-weight: 700;
}

.teacher-match-rank-score {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

.teacher-match-rank {
  border-radius: 9999px;
  padding: 3px 9px;
  color: var(--text-muted);
  background: var(--surface-muted, rgba(148, 163, 184, 0.18));
  font-size: 12px;
  font-weight: 700;
}

.teacher-match-tags,
.teacher-match-goals {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.teacher-match-reasons {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}

.teacher-match-reason {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--surface-page);
  border: 1px solid var(--border-default);
}

.teacher-match-reason-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
}

.teacher-match-reason-text {
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-primary);
}

.teacher-match-labeled-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-height: 28px;
  border-radius: 9999px;
  padding: 4px 10px;
  line-height: 1.2;
  white-space: normal;
}

.teacher-match-labeled-pill-dimension {
  color: #075985;
  background: #e0f2fe;
}

.teacher-match-labeled-pill-goal {
  color: #475569;
  background: #f1f5f9;
}

.teacher-match-labeled-pill-meta {
  min-height: 34px;
  border-radius: 8px;
  background: var(--surface-sunken);
}

.teacher-match-pill-icon {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  color: var(--text-secondary);
}

.teacher-match-pill-label {
  flex: 0 0 auto;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.teacher-match-pill-value {
  min-width: 0;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.teacher-match-labeled-pill-dimension .teacher-match-pill-label,
.teacher-match-labeled-pill-dimension .teacher-match-pill-value {
  color: #075985;
}

.teacher-match-labeled-pill-goal .teacher-match-pill-label,
.teacher-match-labeled-pill-goal .teacher-match-pill-value {
  color: #475569;
}

.dark .teacher-match-labeled-pill-dimension {
  color: #bae6fd;
  background: #0c4a6e;
}

.dark .teacher-match-labeled-pill-goal {
  color: #cbd5e1;
  background: #334155;
}

.dark .teacher-match-labeled-pill-dimension .teacher-match-pill-label,
.dark .teacher-match-labeled-pill-dimension .teacher-match-pill-value {
  color: #bae6fd;
}

.dark .teacher-match-labeled-pill-goal .teacher-match-pill-label,
.dark .teacher-match-labeled-pill-goal .teacher-match-pill-value {
  color: #cbd5e1;
}

/* The two evidence-free conversion buckets (NO_DATA = 1–9 trials, NONE = never
   staffed on a trial) carry no score. They get a flat grey pill with muted text
   so they read as "we cannot say" — deliberately NOT the same treatment as
   POOR, which keeps the standard meta pill. */
.teacher-match-labeled-pill-unscored {
  background: var(--surface-muted, rgba(148, 163, 184, 0.18));
  box-shadow: inset 0 0 0 1px var(--border-default);
}

.teacher-match-labeled-pill-unscored .teacher-match-pill-value,
.teacher-match-labeled-pill-unscored .teacher-match-pill-icon {
  color: var(--text-muted);
  font-weight: 600;
}

/* Dark: same mechanism as the search-mode toggle — a `.dark`-prefixed override
   swapping the flat light grey for the sunken dark surface. */
.dark .teacher-match-labeled-pill-unscored {
  background: var(--surface-sunken);
}

.teacher-match-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
  gap: 8px;
  margin-top: 12px;
  color: var(--text-secondary);
  font-size: 12px;
}

.teacher-match-meta .teacher-match-labeled-pill {
  justify-content: flex-start;
  padding: 6px 9px;
}

/* Conversion badge + its trial-exposure caption occupy a single grid cell so
   the caption does not shift the other meta pills out of their columns. */
.teacher-match-conversion-cell {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

/* Trial exposure (12-month trial-student count). Ops signal, kept quiet: this
   is not a quality stat and must not compete with the conversion bucket. */
.teacher-match-trials-note {
  padding-left: 2px;
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1.3;
  letter-spacing: 0;
}

.teacher-match-trials-summary {
  margin-top: 2px;
  font-size: 11px;
  opacity: 0.9;
}

.teacher-match-empty {
  padding: 28px;
  color: var(--text-muted);
  text-align: center;
}

@media (max-width: 1100px) {
  .teacher-match-grid {
    grid-template-columns: 1fr;
  }

  .teacher-match-results {
    position: static;
    max-height: none;
    overflow: visible;
  }

  .teacher-match-results-scroll {
    overflow: visible;
    overscroll-behavior: auto;
    padding: 14px 14px 16px;
  }
}

@media (max-width: 780px) {
  .teacher-match-toolbar,
  .teacher-match-card-title-row {
    align-items: stretch;
    flex-direction: column;
  }

  .teacher-match-filter-panel,
  .teacher-match-meta {
    grid-template-columns: 1fr;
  }

  .teacher-match-search {
    max-width: none;
  }
}

/* Session date range picker */
.teacher-match-date-trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.teacher-match-daterange-popover {
  position: fixed;
  z-index: 1000;
  overflow: visible;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--surface-card);
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.2);
}

.teacher-match-daterange-body {
  display: flex;
  align-items: stretch;
}

/* Hide the shared top "Month Year" header; each calendar keeps its own label. */
.teacher-match-daterange-popover .rdrMonthAndYearWrapper {
  display: none;
}

/* common.css defines a global `button { margin: 5px; ... }`. react-date-range's
   theme already resets padding/border/background on its day <button>s (.rdrDay)
   but never sets margin, so that 5px leaks in: 10px of horizontal margin per
   cell overflows the 1/7-width flex row and wraps the date grid to ~5 columns,
   while the <span> weekday headers (no margin) stay at 7 — hence the misaligned
   columns. Dropping the leaked margin restores the library's default layout. */
.teacher-match-daterange-popover .rdrDay {
  margin: 0;
}

.teacher-match-daterange-presets {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 8px;
  border-right: 1px solid var(--border-default);
  min-width: 132px;
}

.teacher-match-daterange-preset {
  border: none;
  border-radius: 6px;
  padding: 8px 10px;
  text-align: left;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  background: transparent;
  cursor: pointer;
}

.teacher-match-daterange-preset:hover,
.teacher-match-daterange-preset:focus {
  background: var(--input-focus-bg);
  color: var(--text-primary);
  outline: none;
}

.teacher-match-daterange-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 8px 10px 10px;
}

.teacher-match-daterange-clear,
.teacher-match-daterange-done {
  font-size: 12px;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: 6px;
  cursor: pointer;
}

.teacher-match-daterange-clear {
  background: transparent;
  border: 1px solid var(--border-default);
  color: var(--text-muted);
}

.teacher-match-daterange-done {
  background: var(--brand-primary);
  border: 1px solid var(--brand-primary);
  color: #fff;
}

/* Muted note at the top of a multi-select option list (AND-match semantics). */
.teacher-match-option-hint {
  padding: 6px 8px;
  font-size: 11px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-default);
}
/*!
 * Quill Editor v1.3.7
 * https://quilljs.com/
 * Copyright (c) 2014, Jason Chen
 * Copyright (c) 2013, salesforce.com
 */
.ql-container {
  box-sizing: border-box;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 13px;
  height: 100%;
  margin: 0px;
  position: relative;
}
.ql-container.ql-disabled .ql-tooltip {
  visibility: hidden;
}
.ql-container.ql-disabled .ql-editor ul[data-checked] > li::before {
  pointer-events: none;
}
.ql-clipboard {
  left: -100000px;
  height: 1px;
  overflow-y: hidden;
  position: absolute;
  top: 50%;
}
.ql-clipboard p {
  margin: 0;
  padding: 0;
}
.ql-editor {
  box-sizing: border-box;
  line-height: 1.42;
  height: 100%;
  outline: none;
  overflow-y: auto;
  padding: 12px 15px;
  tab-size: 4;
  -moz-tab-size: 4;
  text-align: left;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.ql-editor > * {
  cursor: text;
}
.ql-editor p,
.ql-editor ol,
.ql-editor ul,
.ql-editor pre,
.ql-editor blockquote,
.ql-editor h1,
.ql-editor h2,
.ql-editor h3,
.ql-editor h4,
.ql-editor h5,
.ql-editor h6 {
  margin: 0;
  padding: 0;
  counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
}
.ql-editor ol,
.ql-editor ul {
  padding-left: 1.5em;
}
.ql-editor ol > li,
.ql-editor ul > li {
  list-style-type: none;
}
.ql-editor ul > li::before {
  content: '\2022';
}
.ql-editor ul[data-checked=true],
.ql-editor ul[data-checked=false] {
  pointer-events: none;
}
.ql-editor ul[data-checked=true] > li *,
.ql-editor ul[data-checked=false] > li * {
  pointer-events: all;
}
.ql-editor ul[data-checked=true] > li::before,
.ql-editor ul[data-checked=false] > li::before {
  color: #777;
  cursor: pointer;
  pointer-events: all;
}
.ql-editor ul[data-checked=true] > li::before {
  content: '\2611';
}
.ql-editor ul[data-checked=false] > li::before {
  content: '\2610';
}
.ql-editor li::before {
  display: inline-block;
  white-space: nowrap;
  width: 1.2em;
}
.ql-editor li:not(.ql-direction-rtl)::before {
  margin-left: -1.5em;
  margin-right: 0.3em;
  text-align: right;
}
.ql-editor li.ql-direction-rtl::before {
  margin-left: 0.3em;
  margin-right: -1.5em;
}
.ql-editor ol li:not(.ql-direction-rtl),
.ql-editor ul li:not(.ql-direction-rtl) {
  padding-left: 1.5em;
}
.ql-editor ol li.ql-direction-rtl,
.ql-editor ul li.ql-direction-rtl {
  padding-right: 1.5em;
}
.ql-editor ol li {
  counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
  counter-increment: list-0;
}
.ql-editor ol li:before {
  content: counter(list-0, decimal) '. ';
}
.ql-editor ol li.ql-indent-1 {
  counter-increment: list-1;
}
.ql-editor ol li.ql-indent-1:before {
  content: counter(list-1, lower-alpha) '. ';
}
.ql-editor ol li.ql-indent-1 {
  counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-2 {
  counter-increment: list-2;
}
.ql-editor ol li.ql-indent-2:before {
  content: counter(list-2, lower-roman) '. ';
}
.ql-editor ol li.ql-indent-2 {
  counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-3 {
  counter-increment: list-3;
}
.ql-editor ol li.ql-indent-3:before {
  content: counter(list-3, decimal) '. ';
}
.ql-editor ol li.ql-indent-3 {
  counter-reset: list-4 list-5 list-6 list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-4 {
  counter-increment: list-4;
}
.ql-editor ol li.ql-indent-4:before {
  content: counter(list-4, lower-alpha) '. ';
}
.ql-editor ol li.ql-indent-4 {
  counter-reset: list-5 list-6 list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-5 {
  counter-increment: list-5;
}
.ql-editor ol li.ql-indent-5:before {
  content: counter(list-5, lower-roman) '. ';
}
.ql-editor ol li.ql-indent-5 {
  counter-reset: list-6 list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-6 {
  counter-increment: list-6;
}
.ql-editor ol li.ql-indent-6:before {
  content: counter(list-6, decimal) '. ';
}
.ql-editor ol li.ql-indent-6 {
  counter-reset: list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-7 {
  counter-increment: list-7;
}
.ql-editor ol li.ql-indent-7:before {
  content: counter(list-7, lower-alpha) '. ';
}
.ql-editor ol li.ql-indent-7 {
  counter-reset: list-8 list-9;
}
.ql-editor ol li.ql-indent-8 {
  counter-increment: list-8;
}
.ql-editor ol li.ql-indent-8:before {
  content: counter(list-8, lower-roman) '. ';
}
.ql-editor ol li.ql-indent-8 {
  counter-reset: list-9;
}
.ql-editor ol li.ql-indent-9 {
  counter-increment: list-9;
}
.ql-editor ol li.ql-indent-9:before {
  content: counter(list-9, decimal) '. ';
}
.ql-editor .ql-indent-1:not(.ql-direction-rtl) {
  padding-left: 3em;
}
.ql-editor li.ql-indent-1:not(.ql-direction-rtl) {
  padding-left: 4.5em;
}
.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right {
  padding-right: 3em;
}
.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right {
  padding-right: 4.5em;
}
.ql-editor .ql-indent-2:not(.ql-direction-rtl) {
  padding-left: 6em;
}
.ql-editor li.ql-indent-2:not(.ql-direction-rtl) {
  padding-left: 7.5em;
}
.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right {
  padding-right: 6em;
}
.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right {
  padding-right: 7.5em;
}
.ql-editor .ql-indent-3:not(.ql-direction-rtl) {
  padding-left: 9em;
}
.ql-editor li.ql-indent-3:not(.ql-direction-rtl) {
  padding-left: 10.5em;
}
.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right {
  padding-right: 9em;
}
.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right {
  padding-right: 10.5em;
}
.ql-editor .ql-indent-4:not(.ql-direction-rtl) {
  padding-left: 12em;
}
.ql-editor li.ql-indent-4:not(.ql-direction-rtl) {
  padding-left: 13.5em;
}
.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right {
  padding-right: 12em;
}
.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right {
  padding-right: 13.5em;
}
.ql-editor .ql-indent-5:not(.ql-direction-rtl) {
  padding-left: 15em;
}
.ql-editor li.ql-indent-5:not(.ql-direction-rtl) {
  padding-left: 16.5em;
}
.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right {
  padding-right: 15em;
}
.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right {
  padding-right: 16.5em;
}
.ql-editor .ql-indent-6:not(.ql-direction-rtl) {
  padding-left: 18em;
}
.ql-editor li.ql-indent-6:not(.ql-direction-rtl) {
  padding-left: 19.5em;
}
.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right {
  padding-right: 18em;
}
.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right {
  padding-right: 19.5em;
}
.ql-editor .ql-indent-7:not(.ql-direction-rtl) {
  padding-left: 21em;
}
.ql-editor li.ql-indent-7:not(.ql-direction-rtl) {
  padding-left: 22.5em;
}
.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right {
  padding-right: 21em;
}
.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right {
  padding-right: 22.5em;
}
.ql-editor .ql-indent-8:not(.ql-direction-rtl) {
  padding-left: 24em;
}
.ql-editor li.ql-indent-8:not(.ql-direction-rtl) {
  padding-left: 25.5em;
}
.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right {
  padding-right: 24em;
}
.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right {
  padding-right: 25.5em;
}
.ql-editor .ql-indent-9:not(.ql-direction-rtl) {
  padding-left: 27em;
}
.ql-editor li.ql-indent-9:not(.ql-direction-rtl) {
  padding-left: 28.5em;
}
.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right {
  padding-right: 27em;
}
.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right {
  padding-right: 28.5em;
}
.ql-editor .ql-video {
  display: block;
  max-width: 100%;
}
.ql-editor .ql-video.ql-align-center {
  margin: 0 auto;
}
.ql-editor .ql-video.ql-align-right {
  margin: 0 0 0 auto;
}
.ql-editor .ql-bg-black {
  background-color: #000;
}
.ql-editor .ql-bg-red {
  background-color: #e60000;
}
.ql-editor .ql-bg-orange {
  background-color: #f90;
}
.ql-editor .ql-bg-yellow {
  background-color: #ff0;
}
.ql-editor .ql-bg-green {
  background-color: #008a00;
}
.ql-editor .ql-bg-blue {
  background-color: #06c;
}
.ql-editor .ql-bg-purple {
  background-color: #93f;
}
.ql-editor .ql-color-white {
  color: #fff;
}
.ql-editor .ql-color-red {
  color: #e60000;
}
.ql-editor .ql-color-orange {
  color: #f90;
}
.ql-editor .ql-color-yellow {
  color: #ff0;
}
.ql-editor .ql-color-green {
  color: #008a00;
}
.ql-editor .ql-color-blue {
  color: #06c;
}
.ql-editor .ql-color-purple {
  color: #93f;
}
.ql-editor .ql-font-serif {
  font-family: Georgia, Times New Roman, serif;
}
.ql-editor .ql-font-monospace {
  font-family: Monaco, Courier New, monospace;
}
.ql-editor .ql-size-small {
  font-size: 0.75em;
}
.ql-editor .ql-size-large {
  font-size: 1.5em;
}
.ql-editor .ql-size-huge {
  font-size: 2.5em;
}
.ql-editor .ql-direction-rtl {
  direction: rtl;
  text-align: inherit;
}
.ql-editor .ql-align-center {
  text-align: center;
}
.ql-editor .ql-align-justify {
  text-align: justify;
}
.ql-editor .ql-align-right {
  text-align: right;
}
.ql-editor.ql-blank::before {
  color: rgba(0,0,0,0.6);
  content: attr(data-placeholder);
  font-style: italic;
  left: 15px;
  pointer-events: none;
  position: absolute;
  right: 15px;
}
.ql-snow.ql-toolbar:after,
.ql-snow .ql-toolbar:after {
  clear: both;
  content: '';
  display: table;
}
.ql-snow.ql-toolbar button,
.ql-snow .ql-toolbar button {
  background: none;
  border: none;
  cursor: pointer;
  display: inline-block;
  float: left;
  height: 24px;
  padding: 3px 5px;
  width: 28px;
}
.ql-snow.ql-toolbar button svg,
.ql-snow .ql-toolbar button svg {
  float: left;
  height: 100%;
}
.ql-snow.ql-toolbar button:active:hover,
.ql-snow .ql-toolbar button:active:hover {
  outline: none;
}
.ql-snow.ql-toolbar input.ql-image[type=file],
.ql-snow .ql-toolbar input.ql-image[type=file] {
  display: none;
}
.ql-snow.ql-toolbar button:hover,
.ql-snow .ql-toolbar button:hover,
.ql-snow.ql-toolbar button:focus,
.ql-snow .ql-toolbar button:focus,
.ql-snow.ql-toolbar button.ql-active,
.ql-snow .ql-toolbar button.ql-active,
.ql-snow.ql-toolbar .ql-picker-label:hover,
.ql-snow .ql-toolbar .ql-picker-label:hover,
.ql-snow.ql-toolbar .ql-picker-label.ql-active,
.ql-snow .ql-toolbar .ql-picker-label.ql-active,
.ql-snow.ql-toolbar .ql-picker-item:hover,
.ql-snow .ql-toolbar .ql-picker-item:hover,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected {
  color: #06c;
}
.ql-snow.ql-toolbar button:hover .ql-fill,
.ql-snow .ql-toolbar button:hover .ql-fill,
.ql-snow.ql-toolbar button:focus .ql-fill,
.ql-snow .ql-toolbar button:focus .ql-fill,
.ql-snow.ql-toolbar button.ql-active .ql-fill,
.ql-snow .ql-toolbar button.ql-active .ql-fill,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill,
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill,
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill,
.ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill,
.ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill,
.ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill,
.ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill,
.ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill,
.ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill {
  fill: #06c;
}
.ql-snow.ql-toolbar button:hover .ql-stroke,
.ql-snow .ql-toolbar button:hover .ql-stroke,
.ql-snow.ql-toolbar button:focus .ql-stroke,
.ql-snow .ql-toolbar button:focus .ql-stroke,
.ql-snow.ql-toolbar button.ql-active .ql-stroke,
.ql-snow .ql-toolbar button.ql-active .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
.ql-snow.ql-toolbar button:hover .ql-stroke-miter,
.ql-snow .ql-toolbar button:hover .ql-stroke-miter,
.ql-snow.ql-toolbar button:focus .ql-stroke-miter,
.ql-snow .ql-toolbar button:focus .ql-stroke-miter,
.ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,
.ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter {
  stroke: #06c;
}
@media (pointer: coarse) {
  .ql-snow.ql-toolbar button:hover:not(.ql-active),
  .ql-snow .ql-toolbar button:hover:not(.ql-active) {
    color: #444;
  }
  .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-fill,
  .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-fill,
  .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill,
  .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill {
    fill: #444;
  }
  .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke,
  .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke,
  .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter,
  .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter {
    stroke: #444;
  }
}
.ql-snow {
  box-sizing: border-box;
}
.ql-snow * {
  box-sizing: border-box;
}
.ql-snow .ql-hidden {
  display: none;
}
.ql-snow .ql-out-bottom,
.ql-snow .ql-out-top {
  visibility: hidden;
}
.ql-snow .ql-tooltip {
  position: absolute;
  transform: translateY(10px);
}
.ql-snow .ql-tooltip a {
  cursor: pointer;
  text-decoration: none;
}
.ql-snow .ql-tooltip.ql-flip {
  transform: translateY(-10px);
}
.ql-snow .ql-formats {
  display: inline-block;
  vertical-align: middle;
}
.ql-snow .ql-formats:after {
  clear: both;
  content: '';
  display: table;
}
.ql-snow .ql-stroke {
  fill: none;
  stroke: #444;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}
.ql-snow .ql-stroke-miter {
  fill: none;
  stroke: #444;
  stroke-miterlimit: 10;
  stroke-width: 2;
}
.ql-snow .ql-fill,
.ql-snow .ql-stroke.ql-fill {
  fill: #444;
}
.ql-snow .ql-empty {
  fill: none;
}
.ql-snow .ql-even {
  fill-rule: evenodd;
}
.ql-snow .ql-thin,
.ql-snow .ql-stroke.ql-thin {
  stroke-width: 1;
}
.ql-snow .ql-transparent {
  opacity: 0.4;
}
.ql-snow .ql-direction svg:last-child {
  display: none;
}
.ql-snow .ql-direction.ql-active svg:last-child {
  display: inline;
}
.ql-snow .ql-direction.ql-active svg:first-child {
  display: none;
}
.ql-snow .ql-editor h1 {
  font-size: 2em;
}
.ql-snow .ql-editor h2 {
  font-size: 1.5em;
}
.ql-snow .ql-editor h3 {
  font-size: 1.17em;
}
.ql-snow .ql-editor h4 {
  font-size: 1em;
}
.ql-snow .ql-editor h5 {
  font-size: 0.83em;
}
.ql-snow .ql-editor h6 {
  font-size: 0.67em;
}
.ql-snow .ql-editor a {
  text-decoration: underline;
}
.ql-snow .ql-editor blockquote {
  border-left: 4px solid #ccc;
  margin-bottom: 5px;
  margin-top: 5px;
  padding-left: 16px;
}
.ql-snow .ql-editor code,
.ql-snow .ql-editor pre {
  background-color: #f0f0f0;
  border-radius: 3px;
}
.ql-snow .ql-editor pre {
  white-space: pre-wrap;
  margin-bottom: 5px;
  margin-top: 5px;
  padding: 5px 10px;
}
.ql-snow .ql-editor code {
  font-size: 85%;
  padding: 2px 4px;
}
.ql-snow .ql-editor pre.ql-syntax {
  background-color: #23241f;
  color: #f8f8f2;
  overflow: visible;
}
.ql-snow .ql-editor img {
  max-width: 100%;
}
.ql-snow .ql-picker {
  color: #444;
  display: inline-block;
  float: left;
  font-size: 14px;
  font-weight: 500;
  height: 24px;
  position: relative;
  vertical-align: middle;
}
.ql-snow .ql-picker-label {
  cursor: pointer;
  display: inline-block;
  height: 100%;
  padding-left: 8px;
  padding-right: 2px;
  position: relative;
  width: 100%;
}
.ql-snow .ql-picker-label::before {
  display: inline-block;
  line-height: 22px;
}
.ql-snow .ql-picker-options {
  background-color: #fff;
  display: none;
  min-width: 100%;
  padding: 4px 8px;
  position: absolute;
  white-space: nowrap;
}
.ql-snow .ql-picker-options .ql-picker-item {
  cursor: pointer;
  display: block;
  padding-bottom: 5px;
  padding-top: 5px;
}
.ql-snow .ql-picker.ql-expanded .ql-picker-label {
  color: #ccc;
  z-index: 2;
}
.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
  fill: #ccc;
}
.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
  stroke: #ccc;
}
.ql-snow .ql-picker.ql-expanded .ql-picker-options {
  display: block;
  margin-top: -1px;
  top: 100%;
  z-index: 1;
}
.ql-snow .ql-color-picker,
.ql-snow .ql-icon-picker {
  width: 28px;
}
.ql-snow .ql-color-picker .ql-picker-label,
.ql-snow .ql-icon-picker .ql-picker-label {
  padding: 2px 4px;
}
.ql-snow .ql-color-picker .ql-picker-label svg,
.ql-snow .ql-icon-picker .ql-picker-label svg {
  right: 4px;
}
.ql-snow .ql-icon-picker .ql-picker-options {
  padding: 4px 0px;
}
.ql-snow .ql-icon-picker .ql-picker-item {
  height: 24px;
  width: 24px;
  padding: 2px 4px;
}
.ql-snow .ql-color-picker .ql-picker-options {
  padding: 3px 5px;
  width: 152px;
}
.ql-snow .ql-color-picker .ql-picker-item {
  border: 1px solid transparent;
  float: left;
  height: 16px;
  margin: 2px;
  padding: 0px;
  width: 16px;
}
.ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg {
  position: absolute;
  margin-top: -9px;
  right: 0;
  top: 50%;
  width: 18px;
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=''])::before,
.ql-snow .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=''])::before,
.ql-snow .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=''])::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=''])::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=''])::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=''])::before {
  content: attr(data-label);
}
.ql-snow .ql-picker.ql-header {
  width: 98px;
}
.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
  content: 'Normal';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  content: 'Heading 1';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  content: 'Heading 2';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  content: 'Heading 3';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  content: 'Heading 4';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  content: 'Heading 5';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  content: 'Heading 6';
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  font-size: 2em;
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  font-size: 1.5em;
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  font-size: 1.17em;
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  font-size: 1em;
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  font-size: 0.83em;
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  font-size: 0.67em;
}
.ql-snow .ql-picker.ql-font {
  width: 108px;
}
.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
  content: 'Sans Serif';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
  content: 'Serif';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
  content: 'Monospace';
}
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
  font-family: Georgia, Times New Roman, serif;
}
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
  font-family: Monaco, Courier New, monospace;
}
.ql-snow .ql-picker.ql-size {
  width: 98px;
}
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
  content: 'Normal';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
  content: 'Small';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
  content: 'Large';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
  content: 'Huge';
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
  font-size: 10px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
  font-size: 18px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
  font-size: 32px;
}
.ql-snow .ql-color-picker.ql-background .ql-picker-item {
  background-color: #fff;
}
.ql-snow .ql-color-picker.ql-color .ql-picker-item {
  background-color: #000;
}
.ql-toolbar.ql-snow {
  border: 1px solid #ccc;
  box-sizing: border-box;
  font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  padding: 8px;
}
.ql-toolbar.ql-snow .ql-formats {
  margin-right: 15px;
}
.ql-toolbar.ql-snow .ql-picker-label {
  border: 1px solid transparent;
}
.ql-toolbar.ql-snow .ql-picker-options {
  border: 1px solid transparent;
  box-shadow: rgba(0,0,0,0.2) 0 2px 8px;
}
.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
  border-color: #ccc;
}
.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
  border-color: #ccc;
}
.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item.ql-selected,
.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item:hover {
  border-color: #000;
}
.ql-toolbar.ql-snow + .ql-container.ql-snow {
  border-top: 0px;
}
.ql-snow .ql-tooltip {
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: 0px 0px 5px #ddd;
  color: #444;
  padding: 5px 12px;
  white-space: nowrap;
}
.ql-snow .ql-tooltip::before {
  content: "Visit URL:";
  line-height: 26px;
  margin-right: 8px;
}
.ql-snow .ql-tooltip input[type=text] {
  display: none;
  border: 1px solid #ccc;
  font-size: 13px;
  height: 26px;
  margin: 0px;
  padding: 3px 5px;
  width: 170px;
}
.ql-snow .ql-tooltip a.ql-preview {
  display: inline-block;
  max-width: 200px;
  overflow-x: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
}
.ql-snow .ql-tooltip a.ql-action::after {
  border-right: 1px solid #ccc;
  content: 'Edit';
  margin-left: 16px;
  padding-right: 8px;
}
.ql-snow .ql-tooltip a.ql-remove::before {
  content: 'Remove';
  margin-left: 8px;
}
.ql-snow .ql-tooltip a {
  line-height: 26px;
}
.ql-snow .ql-tooltip.ql-editing a.ql-preview,
.ql-snow .ql-tooltip.ql-editing a.ql-remove {
  display: none;
}
.ql-snow .ql-tooltip.ql-editing input[type=text] {
  display: inline-block;
}
.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
  border-right: 0px;
  content: 'Save';
  padding-right: 0px;
}
.ql-snow .ql-tooltip[data-mode=link]::before {
  content: "Enter link:";
}
.ql-snow .ql-tooltip[data-mode=formula]::before {
  content: "Enter formula:";
}
.ql-snow .ql-tooltip[data-mode=video]::before {
  content: "Enter video:";
}
.ql-snow a {
  color: #06c;
}
.ql-container.ql-snow {
  border: 1px solid #ccc;
}
.sms-window {
  position: fixed;
  bottom: 0;
  right: 0;
  height: 628px;
  width: 436px;
  background-color: var(--surface-card);
  border: 1px solid;
  z-index: 10000;
  display: flex;
  flex-direction: column;
}

/* Mobile Responsive Styles */
@media (max-width: 1024px) {
  .sms-window {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    /* bottom:auto + height (not bottom:0) so the panel shrinks above the keyboard */
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    /* fallbacks: vh (universal) -> svh (>= Safari 15.4) -> dvh + kbd inset (best) */
    height: 100vh !important;
    height: 100svh !important;
    height: calc(100dvh - var(--kbd-inset, 0px)) !important;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    border: none !important;
    border-radius: 0 !important;
    z-index: 10000 !important;
  }
}

.c-c-window {
  /* position: fixed; */
  /* right: 10px; */
  /* bottom: 0; */
  width: 320px;
  margin: 0 30px;
  height: 360px;
  background: var(--surface-card);
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
  z-index: 9999999;
}

.c-c-content {
  width: 100%;
  height: 90%;
  height: calc(100% - 30px);
  overflow: auto;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Mobile adjustments for content: fill remaining height, let .c-c-messages scroll */
@media (max-width: 1024px) {
  .c-c-content {
    height: auto !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
}

.ch_new .textarea-cont {
  width: 97%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  border: 1px solid #d4d5d6;
  border-radius: 25px;
  /* overflow: hidden; */
}

/* Mobile textarea container */
@media (max-width: 1024px) {
  .ch_new .textarea-cont {
    width: 100% !important;
    margin: 0 !important;
    border-radius: 20px !important;
    min-height: 50px !important;
  }
}

.c-c-messages {
  width: 100%;
  height: 90%;
  height: calc(100% - 50px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px;
  box-sizing: border-box;
}

/* Mobile messages container */
@media (max-width: 1024px) {
  .c-c-messages {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 12px 16px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}

.c-c-window-min {
  width: 320px;
  margin: 0 30px;
  background: var(--surface-card);
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
  z-index: 9999999;
}

.c-c-window {
  /* position: fixed; */
  /* right: 10px; */
  /* bottom: 0; */
  width: 320px;
  margin: 0 30px;
  height: 360px;
  background: var(--surface-card);
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
  z-index: 9999999;
}

.c-c-header {
  width: 100%;
  height: 40px;
  background: #4354de;
  color: var(--text-inverse);
  display: flex;
  align-items: center;
  padding-left: 10px;
  flex-shrink: 0;
}

/* Mobile header adjustments */
@media (max-width: 1024px) {
  .c-c-header {
    height: 50px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
  }
}

.ch_new .c-c-header.c-c-header-o {
  background: var(--surface-card);
  border-bottom: 1px solid rgb(0 0 0 / 14%);
  font-family: 'Rubik', sans-serif !important;
  font-weight: 400;
  font-size: 14px;
  color: var(--text-secondary);
}

.c-c-header-c {
  width: 80%;
  height: 100%;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.my-sms {
  width: 100%;
  padding: 10px 10px 22px;
  margin-bottom: 10px;
  border-radius: 4px;
  position: relative;
  display: flex;
  justify-content: flex-end;
}

.friend-sms {
  width: 100%;
  padding: 10px 10px 22px;
  border-radius: 4px;
  position: relative;
  margin-bottom: 10px;
}

/* Mobile message container adjustments */
@media (max-width: 1024px) {
  .my-sms {
    padding: 8px 16px 16px !important;
    margin-bottom: 8px !important;
  }

  .friend-sms {
    padding: 8px 16px 16px !important;
    margin-bottom: 8px !important;
  }
}

.sms-time {
  color: #0000003d;
  font-weight: 400;
  font-size: 10px;
  margin: 10px 0px 0px;
  text-align: left;
  padding-left: 0px;
  min-width: 55px;
  left: 52px;
  display: flex;
  align-items: flex-start;
  text-transform: uppercase;
  bottom: 4px;
  flex-direction: column;
}

.sms-time.chat-me {
  text-align: right;
  right: 10px;
  padding-left: 0px;
  left: initial;
  align-items: flex-end;
}

/* timestamp + sender label are near-black (#0000003d) — invisible on dark bubbles */
.dark .sms-time {
  color: rgb(255 255 255 / 0.55);
}

.chat-cmt-box {
  font-size: 14px;
  margin: 0px 0 6px;
  max-width: 100%;
  background: var(--surface-sunken);
  color: var(--text-primary);
  padding: 10px;
  border-radius: 10px;
  border-top-left-radius: 0;
  text-align: left;
  word-wrap: break-word;
  line-height: 1.4;
  word-break: break-word;
  /* Preserve newlines in the message body (SMS/WhatsApp are composed with line
     breaks); without this the browser collapses them into single spaces. */
  white-space: pre-wrap;
  cursor: pointer;
  font-weight: 500;
  font-family: 'Rubik', sans-serif !important;
}

/* Mobile message box adjustments */
@media (max-width: 1024px) {
  .chat-cmt-box {
    font-size: 15px !important;
    padding: 12px !important;
    max-width: 85% !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }

  .my-sms .chat-cmt-box {
    max-width: 85% !important;
    margin-left: auto !important;
  }

  .friend-sms .chat-cmt-box {
    max-width: 85% !important;
    margin-right: auto !important;
  }
}

.send-btn-c {
  position: absolute;
  width: 50px;
  height: 20px;
  border: none;
  border-left: 1px solid #cccccc73;
  padding-left: 8px;
  color: var(--state-success);
  display: flex;
  align-items: center;
  right: 0;
  font-size: 13px;
  cursor: pointer;
  bottom: 11px;
  opacity: 0;
  font-weight: 400;
  font-family: 'Rubik', sans-serif !important;
  animation: sanip 0.2s linear 1 forwards;
  /* reset native <button> chrome (bg still comes from whatsapp_bg / sms_bg) */
  -webkit-appearance: none;
  appearance: none;
}

.ch_new .textarea-cont .send-btn-c {
  position: absolute;
  width: 50px;
  height: 16px;
  border-left: 1px solid #cccccc73;
  padding-left: 8px;
  color: var(--state-success);
  display: flex;
  align-items: center;
  right: 0;
  font-size: 13px;
  cursor: pointer;
  bottom: 11px;
  opacity: 0;
  font-weight: 400;
  font-family: 'Rubik', sans-serif !important;
  animation: sanip 0.2s linear 1 forwards;
}

.c-c-i-c {
  display: flex;
  border-top: 1px solid;
  width: 100%;
  height: 40px;
  flex-shrink: 0;
  padding: 8px;
  box-sizing: border-box;
}

/* Mobile footer adjustments */
@media (max-width: 1024px) {
  .c-c-i-c {
    height: auto !important;
    min-height: 60px !important;
    padding: 12px 16px !important;
    position: -webkit-sticky !important;
    position: sticky !important;
    bottom: 0 !important;
    background: var(--surface-card) !important;
    border-top: 1px solid var(--border-default) !important;
    z-index: 10 !important;
  }
}

textarea {
  box-sizing: border-box;
  width: 100%;
  border: none;
  outline: none;
  padding: 12px 50px 12px 16px;
  font-size: 14px;
  font-family: 'Rubik', sans-serif;
  resize: none;
  background: transparent;
}

/* Mobile textarea adjustments */
@media (max-width: 1024px) {
  textarea {
    padding: 14px 60px 14px 16px !important;
    font-size: 16px !important;
    min-height: 50px !important;
    max-height: 120px !important;
    overflow-y: auto !important;
  }
}

.ch_send_btn {
  height: 46px !important;
  border-bottom-right-radius: 30px;
  border-top-right-radius: 30px;
  bottom: 0px !important;
  color: var(--text-inverse) !important;
}

/* Mobile send button */
@media (max-width: 1024px) {
  .ch_new .textarea-cont .send-btn-c {
    width: 60px !important;
    height: 46px !important;
    font-size: 14px !important;
    opacity: 1 !important;
    bottom: 2px !important;
    right: 2px !important;
  }

  .ch_send_btn {
    height: 46px !important;
    min-width: 60px !important;
    font-size: 14px !important;
  }
}

.whatsapp_bg {
  background: var(--state-success);
}

.sms_bg {
  background: var(--brand-primary);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-color: transparent;
  padding: 0.5rem 1rem;
  border-radius: 40px;
  font-weight: 600;
  font-family: Inter;
  transition: all 0.2s ease-in-out;
  font-smooth: auto;
  -webkit-appearance: none;
  cursor: pointer;
}

.btn-primary {
  background-color: var(--state-success);
  box-shadow: 0 2px 4px #f8662426;
  cursor: pointer;
  color: var(--text-inverse);
}

/* Mobile button adjustments */
@media (max-width: 1024px) {
  .btn-primary {
    min-height: 48px !important;
    font-size: 15px !important;
    padding: 12px 20px !important;
  }

  /* Close button adjustments */
  .c-c-header-i {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 50px !important;
    height: 100% !important;
  }

  .chat-c-btn {
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
  }

  .close_min_chat {
    width: 24px !important;
    height: 24px !important;
  }

  /* Header content adjustments */
  .c-c-header-c {
    width: calc(100% - 50px) !important;
    padding-right: 12px !important;
  }

  .c-c-header-c span {
    font-size: 16px !important;
    font-weight: 500 !important;
  }

  /* Timer banner adjustments */
  .border-t.border-b {
    padding: 12px 16px !important;
    font-size: 13px !important;
  }
}

/* Schedule-for-later datetime picker (react-datepicker) */
.sms-window .react-datepicker__input-container input {
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--input-text);
  border-radius: 4px;
  padding: 2px 6px;
  width: 170px;
  font-size: 12px;
}

.sms-window .react-datepicker__children-container {
  width: 100%;
  margin: 0;
  padding: 0;
}

/* Composer: auto-growing input pill with the send button beside it */
.sms-window .composer-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  width: 100%;
}

.sms-window .composer-row .textarea-cont {
  flex: 1;
  width: auto;
  min-width: 0;
}

.sms-window .composer-row .textarea {
  display: block;
  padding: 12px 16px;
  min-height: 46px;
  max-height: 140px;
  overflow-y: auto;
  line-height: 1.4;
}

/* The pill (.textarea-cont) draws the border — suppress the global
   textarea:hover/:focus chrome (2px purple border + lavender ring). */
.sms-window .composer-row .textarea:hover,
.sms-window .composer-row .textarea:focus,
.sms-window .composer-row .textarea:focus-visible {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.sms-window .composer-send-btn {
  flex-shrink: 0;
  height: 46px;
  padding: 0 18px;
  border: none;
  border-radius: 23px;
  color: var(--text-inverse, #fff);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Keep the brand color + white text on hover — the global button:hover in
   common.css (dark-orange bg) would otherwise wash out the label. */
.sms-window .composer-send-btn.whatsapp_bg:hover {
  background: var(--state-success);
  color: var(--text-inverse, #fff);
  border-color: transparent;
  filter: brightness(0.93);
}
.sms-window .composer-send-btn.sms_bg:hover {
  background: var(--brand-primary);
  color: var(--text-inverse, #fff);
  border-color: transparent;
  filter: brightness(0.93);
}

/* Scheduled (not yet sent) ghost bubbles in the thread */
.sms-window .sched-bubble {
  background: var(--surface-sunken);
  border: 1.5px dashed var(--input-border);
  color: var(--text-primary);
}
.sms-window .sched-bubble-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}
.sms-window .sched-bubble-cancel {
  background: none;
  border: none;
  padding: 0;
  font-size: 11px;
  color: var(--state-error);
  cursor: pointer;
}
.sms-window .sched-bubble-cancel:hover {
  background: none;
  border: none;
  text-decoration: underline;
  color: var(--state-error);
}
/* ------------------------------------------------------------------ *
 * Support Inbox wireframe — in-house email support (Zendesk replacement)
 * 4-column shell: nav rail | conversation list | thread | details panel.
 * Colors come from src/theme/tokens.css — no hardcoded hex here.
 * ------------------------------------------------------------------ */

/* Neutralise the global `button { margin: 5px }` (common.css) so our buttons
   sit flush — otherwise the split Send halves and toolbar icons drift apart. */
.si-shell button,
.si-modal button {
  margin: 0;
}

.si-shell {
  position: relative;
  display: grid;
  grid-template-columns: 252px 340px minmax(0, 1fr) 320px;
  height: calc(100vh - 60px);
  min-height: 520px;
  background: var(--surface-page);
  color: var(--text-primary);
  font-size: 14px;
  overflow: hidden;
}

.si-shell.si-nav-collapsed {
  grid-template-columns: 340px minmax(0, 1fr) 320px;
}

.si-shell.si-details-collapsed {
  grid-template-columns: 252px 340px minmax(0, 1fr);
}

.si-shell.si-nav-collapsed.si-details-collapsed {
  grid-template-columns: 340px minmax(0, 1fr);
}

/* Search overlay spans everything to the right of the nav rail. */
.si-shell.si-search-open {
  grid-template-columns: 252px minmax(0, 1fr);
}

.si-shell.si-search-open.si-nav-collapsed {
  grid-template-columns: minmax(0, 1fr);
}

.si-rot180 {
  transform: rotate(180deg);
}

.si-details-collapse {
  margin-left: auto;
}

.si-details-expand {
  position: absolute;
  top: 72px;
  right: 12px;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 6px;
  border: 1px solid var(--border-default);
  background: var(--surface-card);
  color: var(--text-secondary);
  cursor: pointer;
  box-shadow: var(--shadow-card);
}

.si-details-expand:hover {
  background: var(--surface-sunken);
  color: var(--text-primary);
}

.si-col {
  min-width: 0;
  height: 100%;
  overflow-y: auto;
  border-right: 1px solid var(--border-default);
  display: flex;
  flex-direction: column;
}

.si-col:last-child {
  border-right: none;
}

/* ---------- shared bits ---------- */
.si-section-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  padding: 10px 16px 4px;
}

.si-section-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.si-section-left {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.si-section-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  border: none;
  border-radius: 5px;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
}

.si-section-add:hover {
  background: var(--surface-sunken);
  color: var(--text-primary);
}

.si-pill {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--state-success);
  color: var(--text-inverse);
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.si-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 7px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  background: var(--state-error-bg);
  color: var(--state-error-text);
}

.si-tag-neutral {
  background: var(--surface-sunken);
  color: var(--text-secondary);
}

/* ---------- col 1: nav rail ---------- */
.si-nav {
  background: var(--surface-card);
}

.si-nav-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 18px;
  font-weight: 700;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-default);
}

/* Breathing room between the header and the first folder item. */
.si-nav-brand + .si-nav-item {
  margin-top: 12px;
}

.si-nav-brand-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.si-nav-search {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
}

.si-nav-search:hover {
  background: var(--surface-sunken);
  color: var(--text-primary);
}

/* "New conversation" — first row above the folder list. Matches the flat
   .si-nav-item look; the brand accent is carried only by the icon + weight. */
.si-nav-new {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-top: 20px;
  padding: 12px 16px;
  border: none;
  background: none;
  color: var(--brand-primary);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}

.si-nav-new:hover {
  background: var(--surface-sunken);
}

.si-nav-new .si-nav-label {
  flex: 1;
}

.si-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5.76px 16px;
  cursor: pointer;
  color: var(--text-secondary);
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  font-size: 14px;
}

.si-nav-item:hover {
  background: var(--surface-sunken);
}

.si-nav-item.si-active {
  background: var(--surface-sunken);
  color: var(--text-primary);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--brand-primary);
}

.si-nav-item .si-nav-label {
  flex: 1;
}

.si-nav-count {
  font-size: 12px;
  color: var(--text-muted);
}

.si-nav-emoji {
  width: 18px;
  text-align: center;
}

/* Grouped nav sections (Inboxes, Views) get a vertical section line to
   the left so the items read as one bracketed group. */
.si-nav-group {
  margin-left: 24px;
  border-left: 1.5px solid var(--border-default);
}

.si-nav-group .si-nav-item {
  padding-top: 3.6px;
  padding-bottom: 3.6px;
  padding-left: 14px;
  gap: 8px;
}

/* The active brand marker would collide with the section line; drop it inside
   groups and lean on the background tint alone. */
.si-nav-group .si-nav-item.si-active {
  box-shadow: none;
}

/* Saved-view row: label fills the row and the trash control sits at the far
   right edge (space-between). The trash is muted by default, only revealed on
   row hover/focus, and turns red on its own hover — a subtle destructive cue. */
.si-nav-view {
  justify-content: space-between;
}

.si-nav-view-del,
.si-nav-view-edit {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  padding: 2px;
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 4px;
  opacity: 0;
  transition:
    opacity 0.12s ease,
    color 0.12s ease,
    background 0.12s ease;
}

.si-nav-view:hover .si-nav-view-del,
.si-nav-view:focus-within .si-nav-view-del,
.si-nav-view:hover .si-nav-view-edit,
.si-nav-view:focus-within .si-nav-view-edit {
  opacity: 1;
}

.si-nav-view-del:hover,
.si-nav-view-del:focus-visible {
  opacity: 1;
  color: var(--state-error);
  background: var(--state-error-bg);
}

.si-nav-view-edit:hover,
.si-nav-view-edit:focus-visible {
  opacity: 1;
  color: var(--brand-primary);
  background: var(--surface-hover, var(--state-info-bg));
}

/* ---------- col 2: conversation list ---------- */
.si-list {
  background: var(--surface-card);
}

.si-list-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  font-weight: 600;
  border-bottom: 1px solid var(--border-default);
}

.si-collapse-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  margin: -4px 2px -4px -4px;
  border: none;
  border-radius: 6px;
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
}

.si-collapse-btn:hover {
  background: var(--surface-sunken);
  color: var(--text-primary);
}

.si-list-filters {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-default);
}

.si-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border: 1px solid var(--border-default);
  border-radius: 6px;
  background: var(--surface-card);
  color: var(--text-secondary);
  font-size: 12px;
  cursor: pointer;
}

/* Engaged state for toggle-style filter pills (Unread). */
.si-filter-btn.si-active {
  border-color: var(--brand-primary);
  background: var(--state-info-bg);
  color: var(--brand-primary);
  font-weight: 600;
}

.si-conv {
  display: flex;
  gap: 9px;
  padding: 7px 16px;
  border-bottom: 1px solid var(--border-default);
  cursor: pointer;
  border-left: 3px solid transparent;
}

.si-conv:hover {
  background: var(--surface-sunken);
}

.si-conv.si-active {
  background: var(--surface-sunken);
  border-left-color: var(--brand-primary);
}

/* Unread row: bolder sender + preview and a small accent dot on the left,
   colour-matched to the .si-pill count badge (var(--state-success)). */
.si-conv.si-unread {
  position: relative;
}

.si-conv.si-unread::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--state-success);
}

.si-conv.si-unread .si-conv-name {
  font-weight: 700;
}

.si-conv.si-unread .si-conv-preview {
  color: var(--text-primary);
  font-weight: 600;
}

.si-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.si-conv-body {
  flex: 1;
  min-width: 0;
}

.si-conv-top {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.si-conv-name {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.si-conv-channel {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}

.si-conv-time {
  margin-left: auto;
  font-size: 12px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.si-conv-preview {
  color: var(--text-muted);
  font-size: 12.5px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}

.si-conv-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
}

/* Hide the meta row entirely when a conversation has no tags/unread so
   tagless rows collapse to two tight lines instead of leaving a gap. */
.si-conv-meta:empty {
  display: none;
}

.si-conv-meta .si-pill {
  margin-left: auto;
}

/* ---------- col 3: thread ---------- */
.si-thread {
  background: var(--surface-page);
}

.si-thread-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  background: var(--surface-card);
  border-bottom: 1px solid var(--border-default);
}

.si-thread-title {
  font-size: 16px;
  font-weight: 600;
}

.si-thread-ticket {
  margin-left: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
}

.si-thread-headinfo {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.si-thread-subject {
  display: block;
  max-width: 100%;
  font-size: 13px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.si-thread-assignee {
  font-size: 12px;
  color: var(--text-muted);
}

.si-thread-actions {
  display: flex;
  gap: 8px;
}

.si-btn {
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid var(--border-default);
  background: var(--surface-card);
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.si-btn-primary {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: var(--text-inverse);
}

.si-btn-primary:hover {
  background: var(--brand-primary-hover);
}

.si-thread-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.si-divider {
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
  margin: 6px 0;
}

.si-event {
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
}

.si-msg {
  display: flex;
  flex-direction: column;
  max-width: 78%;
}

.si-msg-agent {
  align-self: flex-end;
  align-items: flex-end;
}

.si-msg-author {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.si-bubble {
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  line-height: 1.5;
}

.si-msg-agent .si-bubble {
  background: var(--state-info-bg);
  border-color: var(--state-info-bg);
  color: var(--text-primary);
}

/* Rendered email HTML (the auto-acknowledgement and any inbound/outbound mail)
   carries inline colours tuned for a light email background — e.g. the auto-ack
   wraps its body in `color:#1f2933`. DOMPurify keeps those inline styles, and an
   inline colour beats the bubble's themed `color`, so in dark mode the body
   renders dark-on-dark and is unreadable. Force every element inside a rendered
   message body to inherit the bubble's themed foreground (and drop foreign
   backgrounds) so any email HTML stays legible in both themes. Links keep a
   themed accent colour so they remain distinguishable. `!important` is required
   to override the element-level inline styles. */
.si-msg-body,
.si-msg-body * {
  color: inherit !important;
  background-color: transparent !important;
  /* Defence in depth behind cleanMessageHtml's FORBID_ATTR: ['style'] — .si-bubble
     is not a containing block, so a `position: fixed` rule that ever reached the
     DOM could overlay the whole CMS (clickjacking), and a background-image is a
     tracking pixel. */
  position: static !important;
  background-image: none !important;
  max-width: 100% !important;
  z-index: auto !important;
}

.si-msg-body a {
  color: var(--state-info) !important;
}

/* The agent signature the server appends to every outbound email (wrapper class
   from goserver services/support/signature.go — DOMPurify keeps the class). The
   stored body is byte-identical to what the customer received, so it renders here
   too; de-emphasise it so the reply itself still leads. Colour must come from
   opacity: the rules above force `color: inherit !important` on everything inside
   a message body. */
.si-msg-body .support-agent-signature {
  opacity: 0.7;
  font-size: 13px;
}

/* Tailwind preflight (src/index.css `@tailwind base`) resets `ol, ul` to
   `list-style: none; margin: 0; padding: 0` and zeroes the margins on
   `p, blockquote, pre, h1-h6`. Email clients have no such reset, which is why a
   rich-text reply looks right in the customer's inbox and flat here. Re-assert
   the defaults, scoped to the rendered body only — unscoping these would undo
   preflight app-wide. */
.si-msg-body ol {
  list-style: decimal;
}

.si-msg-body ul {
  list-style: disc;
}

.si-msg-body ol,
.si-msg-body ul {
  margin: 0.5em 0;
  padding-left: 1.5em;
}

.si-msg-body li {
  margin: 0.15em 0;
}

.si-msg-body p,
.si-msg-body pre,
.si-msg-body h1,
.si-msg-body h2,
.si-msg-body h3,
.si-msg-body h4,
.si-msg-body h5,
.si-msg-body h6 {
  margin: 0.5em 0;
}

/* Quote bar must be a border, not a background: the rules above force
   `background-color: transparent !important` on everything in the body. */
.si-msg-body blockquote {
  margin: 0.5em 0;
  padding-left: 10px;
  border-left: 3px solid var(--border-default);
}

/* Quill encodes nesting depth as `ql-indent-N` classes, and quill.snow.css
   styles them only under `.ql-editor` — outside the composer they are inert. */
.si-msg-body .ql-indent-1 {
  padding-left: 3em;
}

.si-msg-body .ql-indent-2 {
  padding-left: 6em;
}

.si-msg-body .ql-indent-3 {
  padding-left: 9em;
}

.si-msg-body .ql-indent-4 {
  padding-left: 12em;
}

.si-msg-body .ql-indent-5 {
  padding-left: 15em;
}

/* Email HTML is untrusted layout: keep wide tables, long URLs and full-size
   images inside the bubble. */
.si-msg-body {
  overflow-wrap: anywhere;
}

.si-msg-body img {
  max-width: 100%;
  height: auto;
}

.si-msg-body table {
  max-width: 100%;
  table-layout: fixed;
}

/* Text-format bodies are raw `\n`-separated text — pre-wrap is the only newline
   mechanism they get, so one newline renders as exactly one line break. */
.si-msg-text {
  white-space: pre-wrap;
}

.si-msg-time {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* WhatsApp-style outbound delivery tick, sits right after the timestamp. The
   glyph is vertically centred with the time text; colour is state-driven. */
.si-tick {
  display: inline-flex;
  align-items: center;
}

.si-tick-muted {
  color: var(--text-muted);
}

.si-tick-opened {
  color: var(--state-info);
}

.si-tick-failed {
  color: var(--state-error);
}

/* Per-channel source badge on each thread card (email/whatsapp/sms/chat/note). */
.si-msg-author {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.si-src-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  flex: none;
}

.si-src-email {
  color: var(--si-src-email);
  background: var(--si-src-email-bg);
}

.si-src-whatsapp {
  color: var(--si-src-whatsapp);
  background: var(--si-src-whatsapp-bg);
}

.si-src-sms {
  color: var(--si-src-sms);
  background: var(--si-src-sms-bg);
}

.si-src-chat {
  color: var(--si-src-chat);
  background: var(--si-src-chat-bg);
}

.si-src-note {
  color: var(--si-src-note);
  background: var(--si-src-note-bg);
}

/* Inline private-note card — amber, full-width and left-aligned, visually
   distinct from the inbound/outbound message bubbles. */
.si-msg-note {
  align-self: stretch;
  align-items: flex-start;
  max-width: 100%;
}

.si-msg-note .si-bubble-note {
  align-self: stretch;
  text-align: left;
}

.si-bubble-note {
  background: var(--si-src-note-bg);
  border-color: var(--si-src-note);
  color: var(--text-primary);
  white-space: pre-wrap;
}

/* Thread-header inline quick actions (copy link / chat / sms-whatsapp / call).
   Shown only when the header is wide enough; on narrow headers the same
   actions move into the "..." menu (ResizeObserver in ThreadHeader). */
.si-head-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.si-head-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: 1px solid var(--border-default);
  background: var(--surface-card);
  color: var(--text-secondary);
  cursor: pointer;
}

.si-head-action:hover {
  background: var(--surface-sunken);
  color: var(--text-primary);
}

/* The lone lucide icon gets its size from width/height presentation attributes,
   not a CSS width. Inside this fixed-size (32x32) flex button Chromium computes
   its flex base width as 0 and shrinks it away, rendering an empty box. Pin the
   icon so it keeps its intrinsic size. */
.si-head-action svg {
  flex-shrink: 0;
}

/* composer */
.si-composer {
  background: var(--surface-card);
  border-top: 1px solid var(--border-default);
  padding: 12px 20px;
}

.si-composer-tabs-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.si-composer-expand {
  color: var(--text-muted);
}

/* Expanded composer opens as a large centred modal. */
.si-composer-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--overlay-modal-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

.si-composer-modal {
  width: 100%;
  max-width: 900px;
  height: 80vh;
  border: 1px solid var(--border-default);
  border-radius: 12px;
  box-shadow: var(--shadow-modal);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.si-composer-modal .si-textarea {
  flex: 1;
  min-height: 200px;
}

/* The private-note textarea lives inside the mention-autocomplete wrapper, so
   the wrapper must grow with the expanded modal before the textarea can use
   the available writing space. */
.si-composer-modal .si-mention-wrap {
  display: flex;
  flex: 1;
  min-height: 0;
}

.si-composer-modal .si-mention-wrap .si-textarea {
  height: 100%;
  min-height: 0;
}

/* Rich text editor (Quill) in the expanded Reply composer. */
.si-quill {
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin: 8px 0;
}

.si-composer-modal .si-quill {
  flex: 1;
}

/* In the modal the flex chain already hands the editor every spare pixel, so the
   container must be free to shrink instead — a floor of 160px would push the
   attachment/Send row out of a short viewport. */
.si-composer-modal .si-quill .ql-container {
  min-height: 0;
}

.si-quill .ql-toolbar {
  border: 1px solid var(--border-default);
  border-radius: 8px 8px 0 0;
  background: var(--surface-sunken);
}

.si-quill .ql-container {
  flex: 1;
  min-height: 160px;
  overflow-y: auto;
  border: 1px solid var(--border-default);
  border-top: none;
  border-radius: 0 0 8px 8px;
  font-size: 14px;
  font-family: inherit;
  color: var(--text-primary);
}

/* A global `.ql-editor { height: 300px }` (src/common.css, for the fixed-height
   Quill editors elsewhere in the CMS) leaks in here and pins the editable area
   to 300px, so on a large monitor the expanded composer showed a tall bordered
   box with only its top third editable and the rest dead space. Let the editor
   fill whatever height the flex chain gives its container instead; it keeps
   Quill's own scrollbar (`.ql-editor { overflow-y: auto }`). */
.si-quill .ql-editor {
  height: 100%;
}

.si-quill .ql-editor.ql-blank::before {
  color: var(--input-placeholder);
  font-style: normal;
}

/* Quill snow ships light-theme glyph colours; retint for dark mode. */
.dark .si-quill .ql-snow .ql-stroke {
  stroke: var(--text-secondary);
}

.dark .si-quill .ql-snow .ql-fill {
  fill: var(--text-secondary);
}

.dark .si-quill .ql-snow .ql-picker {
  color: var(--text-secondary);
}

.dark .si-quill .ql-snow .ql-picker-options {
  background: var(--surface-card);
  border-color: var(--border-default);
}

/* Segmented tab selector so Reply / Private note read as two toggleable tabs. */
.si-composer-tabs {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--surface-sunken);
  border-radius: 8px;
}

.si-tab {
  padding: 6px 16px;
  border-radius: 6px;
  border: none;
  background: none;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.si-tab:hover {
  color: var(--text-primary);
}

.si-tab.si-active {
  background: var(--surface-card);
  color: var(--text-primary);
  box-shadow: var(--shadow-card);
}

.si-field {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  border-bottom: 1px solid var(--border-default);
}

.si-field-label {
  width: 40px;
  color: var(--text-muted);
  font-size: 12px;
}

/* Override the global `.dark input/textarea` fill+border so composer fields stay
   flat underlined rows instead of picking up a boxed background. */
.si-composer .si-field input,
.si-composer .si-textarea {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--input-text);
  font-size: 14px;
  outline: none;
  box-shadow: none;
  font-family: inherit;
}

.si-composer .si-textarea {
  width: 100%;
  resize: none;
  min-height: 70px;
  padding: 10px 0;
}

.si-composer .si-field input:focus,
.si-composer .si-field input:focus-visible,
.si-composer .si-textarea:focus,
.si-composer .si-textarea:focus-visible {
  outline: none;
  box-shadow: none;
  background: transparent;
}

.si-bcc-btn {
  flex-shrink: 0;
  padding: 3px 8px;
  border: 1px solid var(--border-default);
  border-radius: 5px;
  background: none;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

.si-bcc-btn:hover {
  background: var(--surface-sunken);
  color: var(--text-primary);
}

.si-composer-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-muted);
  margin-top: 6px;
}

/* Composer toolbar icons get a hoverable square highlight. */
.si-tool-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 6px;
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
}

.si-tool-btn:hover {
  background: var(--surface-sunken);
  color: var(--text-primary);
}

.si-emoji {
  position: relative;
  display: inline-flex;
}

.si-emoji-pop {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  z-index: 70;
}

.si-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.si-attachments .si-tag-chip {
  padding-left: 6px;
}

/* Split Send button + status dropup */
.si-send-split {
  position: relative;
  margin-left: auto;
  display: inline-flex;
}

.si-send-main,
.si-send-caret {
  color: var(--text-on-brand);
}

.si-send-main {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.si-send-caret {
  display: inline-flex;
  align-items: center;
  padding-left: 8px;
  padding-right: 8px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: 1px solid var(--brand-primary-hover);
}

.si-send-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  min-width: 210px;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: 10px;
  box-shadow: var(--shadow-modal);
  padding: 8px;
  z-index: 60;
}

.si-send-menu-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  padding: 6px 10px 8px;
}

.si-send-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 10px;
  border: none;
  background: none;
  color: var(--text-primary);
  font-size: 14px;
  border-radius: 6px;
  cursor: pointer;
}

.si-send-menu-item:hover {
  background: var(--surface-sunken);
}

/* ---------- col 4: details ---------- */
.si-details {
  background: var(--surface-card);
}

.si-details-tabs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-default);
  font-weight: 600;
  color: var(--text-muted);
}

.si-details-tabs .si-active {
  color: var(--text-primary);
}

.si-contact-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px 16px 12px;
  text-align: center;
}

.si-contact-head .si-avatar-lg {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
}

.si-contact-name {
  font-size: 16px;
  font-weight: 600;
}

/* Clickable contact name → opens the student/teacher profile in a new tab.
   Keeps the surrounding typography; adds a pointer + underline on hover. */
.si-contact-link {
  color: inherit;
  cursor: pointer;
  text-decoration: none;
}

.si-contact-link:hover,
.si-contact-link:focus-visible {
  text-decoration: underline;
  color: var(--brand-primary);
}

/* Subtle "Guest" badge shown next to non-linkable (guest) contacts. */
.si-guest-badge {
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--surface-page);
  border: 1px solid var(--border-default);
  vertical-align: middle;
}

.si-contact-rows {
  padding: 0 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.si-contact-row {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
  font-size: 13px;
}

.si-contact-row .si-link {
  color: var(--state-info);
  cursor: pointer;
}

.si-accordion {
  border-top: 1px solid var(--border-default);
}

.si-accordion-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  font-weight: 600;
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
}

.si-accordion-body {
  padding: 0 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.si-attr {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
}

.si-attr-label {
  color: var(--text-muted);
}

.si-note {
  background: var(--surface-sunken);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
}

.si-note-meta {
  color: var(--text-muted);
  font-size: 12px;
  margin-bottom: 4px;
}

.si-note-add {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--state-info);
  font-size: 13px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

/* ---------- Create View modal ---------- */
.si-modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay-modal-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 24px;
}

.si-modal {
  position: relative;
  width: 100%;
  max-width: 760px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: 12px;
  box-shadow: var(--shadow-modal);
  padding: 28px 32px;
}

/* The Create View modal packs each filter row (field + operator + value +
   remove) on one line, so it needs more width than the base 760px modal while
   staying responsive on narrow viewports. */
.si-modal-view {
  max-width: min(820px, 92vw);
}

.si-modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
}

.si-modal-close:hover {
  background: var(--surface-sunken);
  color: var(--text-primary);
}

.si-modal-title {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 6px;
}

.si-modal-sub {
  color: var(--text-muted);
  font-size: 14px;
  margin: 0 0 24px;
}

.si-form-label {
  display: block;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-secondary);
  margin: 18px 0 8px;
}

.si-input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  color: var(--input-text);
  font-size: 15px;
  outline: none;
  box-shadow: none;
}

.si-input:hover {
  border-color: var(--input-border);
  box-shadow: none;
  outline: none;
}

.si-input:focus,
.si-input:focus-visible {
  border-color: var(--input-focus-border);
  background: var(--input-focus-bg);
  outline: none;
  box-shadow: none;
}

.si-form-help {
  color: var(--text-muted);
  font-size: 13px;
  margin: 8px 0 0;
}

.si-filter-group {
  border: 1px solid var(--border-default);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 14px;
}

.si-filter-cond {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.si-field-select {
  position: relative;
  flex: 1;
  min-width: 0;
}

.si-field-select-disabled {
  opacity: 0.5;
}

.si-field-select-disabled select {
  cursor: not-allowed;
}

/* Custom field picker: trigger matches the native selects; option rows show a
   title with a muted description underneath. */
.si-fieldpick-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  color: var(--input-text);
  font-size: 15px;
  cursor: pointer;
  text-align: left;
}

.si-fieldpick-menu {
  min-width: 300px;
}

/* Operator picker reuses the field-picker dropdown but its options are short
   label-only rows, so it doesn't need the wide field-picker menu. */
.si-oppick-menu {
  min-width: 180px;
}

/* Condition VALUE picker also reuses the field-picker dropdown with short
   label-only enum rows (Status, Priority, User Type, Support Email, Student
   Membership, team/agent names), so it uses a narrow menu like the operator
   picker rather than the wide field-picker menu. */
.si-valpick-menu {
  min-width: 200px;
}

.si-fieldpick-menu .si-select-options {
  max-height: 320px;
}

/* Compound selector (.si-select-option.si-fieldpick-option) so align-items
   wins over the base .si-select-option { align-items: center }, which is
   declared later in this file — otherwise the column's title/desc spans get
   centered instead of left-aligned. */
.si-select-option.si-fieldpick-option {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-align: left;
}

.si-fieldpick-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.si-fieldpick-desc {
  font-size: 12px;
  color: var(--text-muted);
}

/* Multi-select (contains / not contains) trigger: the joined selected labels
   truncate with an ellipsis instead of wrapping or pushing out the caret.
   min-width:0 lets the flex child shrink below its content width. */
.si-multi-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Multi-select option rows are checkbox-style: a square indicator to the left of
   the label, laid out horizontally (overrides the column layout of
   .si-fieldpick-option). */
.si-select-option.si-fieldpick-option.si-multi-option {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.si-check {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  position: relative;
}

.si-check-on {
  border-color: var(--brand-primary);
  background: var(--brand-primary);
}

.si-check-on::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1px;
  width: 4px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Free-form / datetime value input in a condition row. */
.si-cond-input {
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  color: var(--input-text);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  box-shadow: none;
}

.si-cond-input:hover,
.si-cond-input:focus,
.si-cond-input:focus-visible {
  outline: none;
  box-shadow: none;
}

.si-cond-input:focus,
.si-cond-input:focus-visible {
  border-color: var(--input-focus-border);
}

/* Native pickers render a light calendar glyph in dark mode. */
.dark .si-cond-input::-webkit-calendar-picker-indicator {
  filter: invert(0.8);
}

.si-cond-sep {
  color: var(--text-muted);
  font-size: 13px;
  flex-shrink: 0;
}

.si-field-select select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  padding: 10px 34px 10px 14px;
  border-radius: 8px;
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  color: var(--input-text);
  font-size: 15px;
  cursor: pointer;
  outline: none;
}

.si-field-select select:focus,
.si-field-select select:focus-visible {
  border-color: var(--input-focus-border);
  outline: none;
  box-shadow: none;
}

.si-field-select-caret {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--text-muted);
}

.si-cond-remove {
  margin-left: auto;
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
}

.si-cond-remove:hover {
  background: var(--surface-sunken);
  color: var(--text-primary);
}

.si-ghost-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  background: none;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  padding: 6px 4px;
}

.si-ghost-btn:hover {
  color: var(--brand-primary);
}

.si-add-group {
  border: 1px solid var(--border-default);
  border-radius: 8px;
  padding: 10px 16px;
  margin-top: 4px;
}

.si-modal-foot {
  display: flex;
  justify-content: flex-end;
  margin-top: 28px;
}

.si-modal-save {
  padding: 10px 26px;
  border-radius: 8px;
  border: none;
  background: var(--surface-inverse);
  color: var(--text-inverse);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.si-modal-save:hover {
  opacity: 0.9;
}

/* Compact fat-finger call-confirmation dialog (reuses .si-modal shell). */
.si-modal-confirm {
  max-width: 420px;
}

.si-confirm-foot {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 28px;
}

.si-btn-cancel {
  padding: 10px 22px;
  border-radius: 8px;
  border: 1px solid var(--border-default);
  background: var(--surface-card);
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.si-btn-cancel:hover {
  background: var(--surface-sunken);
}

.si-btn-call {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: 8px;
  border: none;
  background: var(--brand-primary);
  color: var(--text-on-brand);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.si-btn-call:hover {
  background: var(--brand-primary-hover);
}

.si-btn-cancel:disabled,
.si-btn-call:disabled {
  opacity: 0.6;
  cursor: default;
}

/* ---------- new conversation modal ---------- */
.si-nc-modal {
  max-width: 900px;
}

/* Compact, modern field sizing scoped to this modal. Labels are forced to
   normal-case because a global `label { text-transform: uppercase }` from the
   chat ImageUploader stylesheet leaks in and would otherwise shout EMAIL etc. */
.si-nc-modal .si-form-label {
  font-size: 13px;
  margin: 14px 0 6px;
  text-transform: none;
}

/* Keep the Subject/Email inputs and the dropdown triggers the same height:
   pin identical box-sizing, padding, font-size and line-height on both. */
.si-nc-modal .si-input,
.si-nc-modal .si-select-trigger {
  box-sizing: border-box;
  height: 38px;
  padding: 0 12px;
  font-size: 14px;
  line-height: 1.4;
}

/* The message body is a multi-line field — let it grow past the 38px input row. */
.si-nc-modal textarea.si-input {
  height: auto;
  padding: 8px 12px;
}

.si-nc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 20px;
}

.si-nc-grid .si-form-label {
  margin-top: 14px;
}

/* Rich-text message body — taller editing area than the composer default. This
   modal's Quill is not in a flex column, so the container's min-height is what
   sizes the editor (which is height:100% of it). */
.si-nc-quill .ql-container {
  min-height: 300px;
}

/* Title row + Student/Teacher segmented toggle. */
.si-nc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 4px;
}

.si-nc-head .si-modal-title {
  margin: 0;
  font-size: 18px;
  line-height: 1.2;
}

/* User-search results: name over email. */
.si-nc-email .si-input {
  width: 100%;
}

.si-nc-user {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.si-nc-user-name {
  font-size: 14px;
  color: var(--text-primary);
}

.si-nc-user-email {
  font-size: 12px;
  color: var(--text-muted);
}

.si-nc-toggle {
  display: inline-flex;
  padding: 3px;
  border-radius: 8px;
  background: var(--surface-sunken);
  border: 1px solid var(--border-default);
  /* Clear the absolutely-positioned close (X) button in the top-right. */
  margin-right: 44px;
}

.si-nc-toggle-opt {
  padding: 6px 16px;
  border: none;
  border-radius: 6px;
  background: none;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.si-nc-toggle-opt.si-active {
  background: var(--brand-primary);
  color: var(--text-inverse);
  font-weight: 600;
}

.si-nc-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 24px;
}

.si-nc-foot-tools {
  display: flex;
  align-items: center;
  gap: 6px;
}

.si-nc-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
}

.si-nc-tool:hover {
  background: var(--surface-sunken);
  color: var(--text-primary);
}

.si-nc-submit {
  padding: 10px 30px;
  border-radius: 8px;
  border: none;
  background: var(--state-success);
  color: var(--text-inverse);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

/* Re-assert the green fill on hover — a global `button:hover` in common.css
   otherwise repaints the background and would strip the fill. */
.si-nc-submit:hover {
  background: var(--state-success);
  border-color: var(--state-success);
  color: var(--text-inverse);
  opacity: 0.9;
}

/* ---------- support settings modal (super-user only) ---------- */
/* Brand-row action cluster (settings gear + search) in the nav header. */
.si-nav-brand-actions {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

/* Wider than the standard .si-modal, with a fixed height and internal scroll so
   the left section nav stays put while the content pane scrolls. */
.si-settings-modal {
  max-width: 1040px;
  width: 80%;
  height: 80vh;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 24px 28px;
}

.si-settings-body {
  display: flex;
  gap: 24px;
  flex: 1;
  min-height: 0;
  margin-top: 16px;
}

.si-settings-nav {
  flex: none;
  width: 200px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-right: 1px solid var(--border-default);
  padding-right: 12px;
}

.si-settings-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border: none;
  border-radius: 8px;
  background: none;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

.si-settings-nav-item:hover {
  background: var(--surface-sunken);
}

.si-settings-nav-item.si-active {
  background: var(--surface-sunken);
  color: var(--text-primary);
  font-weight: 600;
}

.si-settings-content {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding-right: 4px;
}

.si-settings-heading {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 4px;
}

.si-settings-desc {
  color: var(--text-muted);
  font-size: 13px;
  margin: 0 0 18px;
}

.si-team-create {
  display: flex;
  align-items: stretch;
  gap: 10px;
}

.si-team-create .si-input {
  flex: 1;
}

.si-team-create .si-modal-save {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.si-team-error {
  color: var(--state-error-text);
  font-size: 13px;
  margin: 8px 0 0;
}

/* Neutral status line inside a settings section (e.g. "Loading your signature…"). */
.si-settings-note {
  color: var(--text-muted);
  font-size: 13px;
  margin: 0;
}

/* Signature editor. The settings content pane scrolls, so unlike the composer's
   Quill this one is a fixed-height block rather than a flex child — a signature is
   a handful of lines, and a growing editor would fight the pane's own scrollbar. */
.si-sig-quill {
  margin: 0;
}

.si-sig-quill .ql-container {
  flex: none;
  min-height: 150px;
  max-height: 260px;
}

.si-sig-quill .ql-editor {
  height: auto;
}

.si-sig-foot {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
}

.si-modal-save:disabled {
  opacity: 0.6;
  cursor: default;
}

/* Inline "Saved" confirmation next to the Save button. */
.si-sig-saved {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--state-success-text);
  font-size: 13px;
  font-weight: 600;
}

.si-team-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 20px;
}

.si-team-card {
  border: 1px solid var(--border-default);
  border-radius: 10px;
  padding: 14px 16px;
}

.si-team-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.si-team-card-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

.si-team-del {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  border: none;
  border-radius: 6px;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
}

.si-team-del:hover {
  background: var(--state-error-bg);
  color: var(--state-error-text);
}

.si-team-del:disabled {
  opacity: 0.5;
  cursor: default;
}

/* Groups an armed control with its adjacent × cancel affordance. */
.si-del-wrap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Muted, clearly-secondary × shown only while a control is armed. Clicking it
   disarms (also available: Escape, 4s auto-reset, mouse-leave). */
.si-arm-cancel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border: none;
  border-radius: 6px;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
}

.si-arm-cancel:hover {
  background: var(--surface-sunken);
  color: var(--text-secondary);
}

.si-arm-cancel:disabled {
  opacity: 0.5;
  cursor: default;
}

/* Armed (first-click) state for a destructive trash button: flips to an explicit
   red "Confirm delete?" label. A second click opens the window.confirm dialog. */
.si-team-del.si-del-armed,
.si-team-del.si-del-armed:hover {
  gap: 5px;
  padding: 5px 10px;
  border-radius: 6px;
  background: var(--state-error-bg);
  color: var(--state-error-text);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.si-team-members {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}

.si-team-empty {
  color: var(--text-muted);
  font-size: 13px;
}

.si-member-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px 4px 10px;
  border-radius: 14px;
  background: var(--surface-sunken);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
}

.si-member-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1px;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
}

.si-member-remove:hover {
  background: var(--state-error-bg);
  color: var(--state-error-text);
}

.si-member-remove:disabled {
  opacity: 0.5;
  cursor: default;
}

.si-team-add {
  max-width: 320px;
}

/* ---------- routing rules ---------- */
.si-rule-card.si-rule-inactive {
  opacity: 0.55;
}

.si-rule-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.si-rule-arrows {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: none;
}

.si-rule-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px;
  border: none;
  border-radius: 6px;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
}

.si-rule-btn:hover:not(:disabled) {
  background: var(--surface-sunken);
  color: var(--text-primary);
}

.si-rule-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.si-rule-body {
  flex: 1;
  min-width: 0;
}

.si-rule-match {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.si-rule-action {
  margin-top: 4px;
  font-size: 13px;
  color: var(--text-muted);
}

.si-rule-ctrls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

.si-rule-toggle {
  padding: 4px 12px;
  border: 1px solid var(--border-default);
  border-radius: 14px;
  background: var(--surface-sunken);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.si-rule-toggle.si-active {
  border-color: var(--state-success-text);
  background: var(--state-success-bg);
  color: var(--state-success-text);
}

.si-rule-toggle:disabled {
  opacity: 0.5;
  cursor: default;
}

/* Armed (first-click) state for the active/inactive pill: warning-tinted
   "Confirm (de)activate?" label. A second click opens the window.confirm dialog.
   Wins over .si-active so an armed active pill reads as a pending change. */
.si-rule-toggle.si-toggle-armed,
.si-rule-toggle.si-active.si-toggle-armed {
  border-color: var(--state-warning-text);
  background: var(--state-warning-bg);
  color: var(--state-warning-text);
}

.si-rule-add {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.si-rule-editor {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-default);
  border-radius: 10px;
  padding: 16px;
  margin-top: 14px;
}

.si-rule-card .si-rule-editor {
  border: none;
  padding: 0;
  margin-top: 0;
}

.si-rule-editor > .si-form-label:first-child {
  margin-top: 0;
}

.si-rule-fields,
.si-rule-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 8px;
}

.si-rule-editor-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}

/* ---------- note editor (details panel) ---------- */
.si-note-editor {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.si-note-textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 140px;
  resize: vertical;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  color: var(--input-text);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  outline: none;
}

.si-note-textarea:focus,
.si-note-textarea:focus-visible {
  border-color: var(--input-focus-border);
  background: var(--input-focus-bg);
  outline: none;
  box-shadow: none;
}

.si-note-editor-foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.si-note-editor-foot .si-tool-btn {
  margin-right: auto;
}

.si-note-btn {
  padding: 8px 18px;
  border-radius: 8px;
  border: none;
  background: none;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.si-note-btn:hover {
  background: var(--surface-sunken);
}

.si-note-btn-primary {
  background: var(--surface-inverse);
  color: var(--text-inverse);
  font-weight: 600;
}

.si-note-btn-primary:hover {
  opacity: 0.9;
  background: var(--surface-inverse);
}

.si-note-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.si-note-attachments a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--brand-primary);
  text-decoration: none;
}

/* ---------- thread status dropdown ---------- */
.si-status {
  position: relative;
}

.si-status-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

/* Per-state colours — token pairs defined in src/theme/tokens.css. */
.si-status-open {
  background: var(--status-open-bg);
  color: var(--status-open-text);
}

.si-status-progress {
  background: var(--status-progress-bg);
  color: var(--status-progress-text);
}

.si-status-waiting {
  background: var(--status-waiting-bg);
  color: var(--status-waiting-text);
}

.si-status-snoozed {
  background: var(--status-snoozed-bg);
  color: var(--status-snoozed-text);
}

.si-status-resolved {
  background: var(--status-resolved-bg);
  color: var(--status-resolved-text);
}

.si-status-closed {
  background: var(--status-closed-bg);
  color: var(--status-closed-text);
}

/* Colour dot preceding each option in the menu. */
.si-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.si-status-dot.si-status-open {
  background: var(--status-open-text);
}

.si-status-dot.si-status-progress {
  background: var(--status-progress-text);
}

.si-status-dot.si-status-waiting {
  background: var(--status-waiting-text);
}

.si-status-dot.si-status-snoozed {
  background: var(--status-snoozed-text);
}

.si-status-dot.si-status-resolved {
  background: var(--status-resolved-text);
}

.si-status-dot.si-status-closed {
  background: var(--status-closed-text);
}

.si-status-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 160px;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  box-shadow: var(--shadow-modal);
  padding: 6px;
  z-index: 50;
  display: flex;
  flex-direction: column;
}

.si-sort {
  position: relative;
}

.si-sort-menu {
  left: 0;
  right: auto;
  min-width: 190px;
}

/* Sort sits at the right of the filter row — open its menu right-anchored so it
   stays inside the (overflow-clipped) list column instead of spilling past it. */
.si-sort-menu-end {
  left: auto;
  right: 0;
}

.si-status-item {
  display: flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
  text-align: left;
  padding: 8px 12px;
  border: none;
  background: none;
  color: var(--text-primary);
  font-size: 14px;
  border-radius: 6px;
  cursor: pointer;
}

.si-status-item:hover {
  background: var(--surface-sunken);
}

.si-status-item.si-active {
  background: var(--surface-sunken);
  font-weight: 600;
}

/* Status-filter rows that carry a description stack the title over a muted
   desc line (mirrors the field picker), overriding the horizontal base layout. */
.si-status-item.si-status-item-desc {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

/* Hairline divider between sections of a dropdown menu (status rows vs. the
   independent "Unread only" toggle). */
.si-menu-sep {
  height: 1px;
  margin: 5px 6px;
  background: var(--border-default);
}

/* "Unread only" row: checkbox indicator on the left, title + desc stacked to the
   right of it (the base .si-status-item row layout stays horizontal). The check
   is top-aligned and nudged to sit centered against the TITLE line, not against
   the full title+desc block. */
.si-status-item.si-status-toggle {
  align-items: flex-start;
  gap: 8px;
  white-space: normal;
}

.si-status-toggle .si-check {
  margin-top: 2px;
}

.si-status-toggle .si-fieldpick-name {
  line-height: 20px;
}

/* Capped so the longer desc wraps to a second line instead of stretching the
   menu past the 340px list column. */
.si-status-toggle-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  max-width: 240px;
}

/* ---------- previous conversations (details panel) ---------- */
.si-prev {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
  border-radius: 6px;
  cursor: pointer;
}

.si-prev:hover {
  background: var(--surface-sunken);
}

.si-prev-title {
  flex: 1;
  min-width: 0;
  color: var(--text-secondary);
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.si-prev-time {
  flex-shrink: 0;
  color: var(--text-muted);
  font-size: 12px;
}

/* ---------- Actions panel (agent / team / priority / tags) ---------- */
.si-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* shared searchable select */
.si-select {
  position: relative;
}

.si-select-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 1px solid var(--input-border);
  border-radius: 8px;
  background: var(--input-bg);
  color: var(--input-text);
  font-size: 14px;
  cursor: pointer;
  text-align: left;
}

.si-select-value {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
}

.si-select-ph {
  color: var(--input-placeholder);
}

.si-select-caret {
  color: var(--text-muted);
  flex-shrink: 0;
}

.si-select-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  /* Capped to the room below/above the trigger (inline max-height, set on open)
     so a long list never spills past the clipping scroll pane; the option list
     scrolls internally. overflow:hidden keeps the rounded corners clean. */
  overflow: hidden;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  box-shadow: var(--shadow-modal);
  padding: 6px;
}

/* Flip the menu above the trigger when there isn't room below (the containing
   scroll pane clips overflow, so a downward menu near the bottom edge would be
   cut off). Applies to every .si-select; NcSelect keeps its own scoped rule. */
.si-select-menu-up {
  top: auto;
  bottom: calc(100% + 6px);
}

.si-select-search {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border-default);
  color: var(--text-muted);
}

.si-select-search input {
  flex: 1;
  border: none;
  background: none;
  outline: none;
  color: var(--input-text);
  font-size: 14px;
}

.si-select-search input:focus,
.si-select-search input:focus-visible {
  outline: none;
  box-shadow: none;
}

.si-select-options {
  flex: 1 1 auto;
  min-height: 0;
  max-height: 220px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.si-select-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border: none;
  background: none;
  color: var(--text-primary);
  font-size: 14px;
  border-radius: 6px;
  cursor: pointer;
}

.si-select-option:hover {
  background: var(--surface-sunken);
}

.si-select-option.si-active {
  background: var(--surface-sunken);
  font-weight: 600;
}

.si-select-empty {
  padding: 10px;
  color: var(--text-muted);
  font-size: 13px;
  text-align: center;
}

/* option content */
.si-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.si-opt-muted {
  color: var(--text-muted);
}

.si-opt-emoji {
  width: 18px;
  text-align: center;
}

.si-agent-avatar {
  position: relative;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--surface-sunken);
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.si-agent-online {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--state-success);
  border: 1.5px solid var(--surface-card);
}

/* priority dot + badge */
.si-prio-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--border-emphasis);
}

.si-prio-urgent {
  --prio: var(--priority-urgent);
}

.si-prio-high {
  --prio: var(--priority-high);
}

.si-prio-medium {
  --prio: var(--priority-medium);
}

.si-prio-low {
  --prio: var(--priority-low);
}

.si-prio-dot.si-prio-urgent,
.si-prio-dot.si-prio-high,
.si-prio-dot.si-prio-medium,
.si-prio-dot.si-prio-low {
  background: var(--prio);
}

.si-prio-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--prio);
  background: color-mix(in srgb, var(--prio) 16%, transparent);
}

/* tags input */
.si-tags-field {
  position: relative;
}

.si-tags-box {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding: 5px 8px;
  border: 1px solid var(--input-border);
  border-radius: 8px;
  background: var(--input-bg);
  min-height: 34px;
}

.si-tags-input {
  flex: 1;
  min-width: 80px;
  border: none;
  background: none;
  outline: none;
  color: var(--input-text);
  font-size: 14px;
}

.si-tags-input:focus,
.si-tags-input:focus-visible {
  outline: none;
  box-shadow: none;
}

.si-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 4px 2px 9px;
  border-radius: 6px;
  background: var(--surface-sunken);
  color: var(--text-secondary);
  font-size: 12px;
}

.si-tag-chip button {
  display: inline-flex;
  align-items: center;
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px;
  border-radius: 4px;
}

.si-tag-chip button:hover {
  color: var(--text-primary);
  background: var(--border-default);
}

.si-tag-chip-plain {
  padding: 2px 9px;
}

.si-tags-menu {
  padding: 6px;
}

/* ---------- search overlay ---------- */
.si-search {
  background: var(--surface-page);
}

.si-search-head {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 20px;
  background: var(--surface-card);
  border-bottom: 1px solid var(--border-default);
}

.si-search-head-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Input + trailing magnifier are one control: the field owns the border and the
   focus state, so the ring wraps both. The icon is a flex sibling rather than a
   background, so typed text can never run under it. */
.si-search-field {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  padding: 8px 12px;
  border: 1px solid var(--input-border);
  border-radius: 8px;
  background: var(--input-bg);
}

.si-search-field:focus-within {
  border-color: var(--input-focus-border);
}

.si-search-ico {
  color: var(--text-muted);
  flex-shrink: 0;
}

.si-search-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  color: var(--input-text);
  font-size: 15px;
  outline: none;
}

.si-search-input:focus,
.si-search-input:focus-visible {
  outline: none;
  box-shadow: none;
}

.si-search-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
  padding: 40px;
}

.si-search-empty h2 {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  color: var(--text-primary);
}

.si-search-empty p {
  margin: 0;
  max-width: 560px;
  color: var(--text-muted);
  font-size: 15px;
}

.si-search-body {
  flex: 1;
  overflow-y: auto;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.si-search-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--surface-sunken);
  border-radius: 10px;
}

.si-search-tab {
  flex: 1;
  padding: 10px;
  border: none;
  border-radius: 8px;
  background: none;
  color: var(--text-muted);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.si-search-tab.si-active {
  background: var(--surface-card);
  color: var(--text-primary);
  box-shadow: var(--shadow-card);
}

.si-search-results {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-default);
  border-radius: 12px;
  overflow: hidden;
}

.si-sr-card {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  text-align: left;
  padding: 18px 20px;
  border: none;
  border-bottom: 1px solid var(--border-default);
  background: none;
  color: var(--text-primary);
  cursor: pointer;
}

.si-sr-card:last-child {
  border-bottom: none;
}

.si-sr-card:hover {
  background: var(--surface-sunken);
}

.si-sr-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.si-sr-top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.si-sr-id {
  font-size: 15px;
  font-weight: 700;
}

.si-sr-status {
  padding: 2px 10px;
  border: 1px solid var(--border-default);
  border-radius: 6px;
  font-size: 12px;
  color: var(--text-secondary);
}

.si-sr-author {
  color: var(--text-secondary);
  font-size: 13px;
}

.si-sr-time {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: 13px;
}

.si-sr-snippet {
  color: var(--text-muted);
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.si-sr-go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--surface-sunken);
  color: var(--text-secondary);
  flex-shrink: 0;
}

.si-sr-card:hover .si-sr-go {
  background: var(--brand-primary);
  color: var(--text-on-brand);
}

.si-search-none {
  padding: 24px;
  text-align: center;
  color: var(--text-muted);
}

/* The backend 400s on a malformed ticket/status/date/limit, so this is a
   "fix your filters" state, not an outage. */
.si-search-failed {
  margin: 8px 0;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  background: var(--state-error-bg);
  color: var(--state-error-text, var(--state-error));
}

/* ---------- advanced search panel ---------- */
.si-adv-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 6px 12px;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--surface-card);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.si-adv-toggle:hover {
  background: var(--surface-sunken);
  color: var(--text-primary);
}

/* Tinted while the panel is open so the panel reads as belonging to the
   search bar rather than floating under it. */
.si-adv-toggle.si-active {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
  background: var(--state-info-bg);
}

.si-filter {
  position: relative;
  flex-shrink: 0;
}

/* Anchored under the Filter button, left-aligned to it: the button now sits at
   the start of the head row, so a right-aligned menu would hang off the left
   edge of the column. .si-search-head is not a clipping ancestor, so a plain
   absolute menu is enough here — no portal needed. */
.si-filter-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 60;
  width: 260px;
  display: flex;
  flex-direction: column;
  max-height: 340px;
  padding: 6px;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: 10px;
  box-shadow: var(--shadow-modal);
}

.si-filter-ico {
  flex-shrink: 0;
  color: var(--text-muted);
}

.si-filter-hint {
  margin: 4px 0 0;
  padding: 6px 8px 2px;
  border-top: 1px solid var(--border-default);
  color: var(--text-muted);
  font-size: 11px;
}

.si-filter-step-head {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 4px 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border-default);
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 600;
}

.si-filter-back {
  display: inline-flex;
  padding: 2px;
  border: none;
  border-radius: 4px;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
}

.si-filter-back:hover {
  background: var(--surface-sunken);
  color: var(--text-primary);
}

.si-filter-value {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px;
}

.si-filter-value .si-cond-input {
  flex: 1 1 auto;
  min-width: 0;
}

/* Applied filters sit on their own line under the search input and wrap. */
.si-search-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.si-filter-chip-key {
  color: var(--text-muted);
}

.si-filter-chip-value {
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
  -webkit-text-decoration-color: transparent;
          text-decoration-color: transparent;
}

.si-filter-chip-value:hover {
  -webkit-text-decoration-color: currentcolor;
          text-decoration-color: currentcolor;
}

.si-search-chip-clear {
  padding: 2px 6px;
  border: none;
  border-radius: 4px;
  background: none;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.si-search-chip-clear:hover {
  color: var(--text-primary);
  background: var(--surface-sunken);
}

.si-sr-role {
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--surface-sunken);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
}

/* ------------------------------------------------------------------ *
 * Data-wiring states: list skeleton, thread spinner, empty / error,
 * attachment upload progress, mention autocomplete. Added when the stub
 * data was replaced with the goserver APIs (§11).
 * ------------------------------------------------------------------ */
.si-skeleton-row {
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  align-items: center;
}

.si-skeleton-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--border-default);
}

.si-skeleton-lines {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.si-skeleton-line {
  height: 10px;
  border-radius: 4px;
  background: var(--border-default);
}

.si-skeleton-line.short {
  width: 45%;
}

.si-skeleton-avatar,
.si-skeleton-line {
  animation: si-pulse 1.2s ease-in-out infinite;
}

@keyframes si-pulse {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.45;
  }
}

.si-state-msg {
  padding: 24px 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

/* Conversation-list pagination footer ("Load more" / the at-the-cap note). */
.si-list-more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 16px 20px;
}

.si-list-more .si-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.si-list-more-note {
  color: var(--text-muted);
  font-size: 12px;
  text-align: center;
  line-height: 1.4;
}

.si-thread-spinner {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}

.si-spinner {
  width: 26px;
  height: 26px;
  border: 3px solid var(--border-default);
  border-top-color: var(--brand-primary);
  border-radius: 50%;
  animation: si-spin 0.8s linear infinite;
}

@keyframes si-spin {
  to {
    transform: rotate(360deg);
  }
}

.si-att-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.si-att-progress {
  font-size: 11px;
  color: var(--text-muted);
}

.si-att-failed {
  color: var(--state-error-text, var(--state-error));
}

.si-msg-attach {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.si-msg-attach a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--brand-primary);
  text-decoration: none;
}

.si-msg-attach-image {
  display: block;
  max-width: 100%;
  max-height: 420px;
  margin-top: 10px;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  object-fit: contain;
}

.si-msg-agent .si-msg-attach-image {
  margin-left: auto;
}

/* ---------- attachment cards (messages + notes) ----------
   Zendesk-style: bordered card, large file-type icon on top, filename + type
   label below. Wins over the legacy `.si-msg-attach a` / `.si-note-attachments a`
   chip rules on specificity. */
.si-attach-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

/* Positioning context for the corner download link, which is a sibling of the
   card <a> (anchors can't nest) and so has to be pinned to the wrapper. */
.si-attach-card-wrap {
  position: relative;
  display: block;
  width: 164px;
  max-width: 100%;
}

.si-attach-card-download {
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  color: var(--text-muted);
  opacity: 0.75;
  transition:
    opacity 0.12s ease,
    color 0.12s ease,
    border-color 0.12s ease;
}

.si-attach-card-wrap:hover .si-attach-card-download,
.si-attach-card-download:hover,
.si-attach-card-download:focus-visible {
  opacity: 1;
  color: var(--brand-primary);
  border-color: var(--brand-primary);
}

.si-attach-cards .si-attach-card {
  display: flex;
  flex-direction: column;
  width: 164px;
  max-width: 100%;
  gap: 0;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--surface-card);
  overflow: hidden;
  text-decoration: none;
  color: var(--text-primary);
  transition:
    border-color 0.12s ease,
    background 0.12s ease;
}

.si-attach-cards .si-attach-card:hover {
  border-color: var(--brand-primary);
  background: var(--surface-sunken);
}

.si-msg-agent .si-attach-cards {
  justify-content: flex-end;
}

.si-attach-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  background: var(--surface-sunken);
  border-bottom: 1px solid var(--border-default);
  color: var(--text-muted);
}

.si-attach-pdf {
  color: var(--state-error);
}

.si-attach-sheet {
  color: var(--state-success);
}

.si-attach-doc {
  color: var(--state-info);
}

.si-attach-card-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 7px 9px 8px;
  min-width: 0;
}

.si-attach-card-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.si-attach-card-type {
  font-size: 11px;
  color: var(--text-muted);
}

/* Clickable wrapper around an inline image attachment — opens the lightbox. */
.si-msg-attach-thumb {
  position: relative;
  display: block;
  width: -webkit-fit-content;
  width: fit-content;
  max-width: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: zoom-in;
  line-height: 0;
}

.si-msg-agent .si-msg-attach-thumb {
  margin-left: auto;
}

.si-msg-attach-thumb .si-msg-attach-image {
  transition: opacity 0.12s ease;
}

.si-msg-attach-thumb:hover .si-msg-attach-image {
  opacity: 0.88;
}

.si-msg-attach-expand {
  position: absolute;
  top: 16px;
  right: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: var(--overlay-modal-strong);
  color: #fff;
  opacity: 0;
  transition: opacity 0.12s ease;
  pointer-events: none;
}

.si-msg-attach-thumb:hover .si-msg-attach-expand,
.si-msg-attach-thumb:focus-visible .si-msg-attach-expand {
  opacity: 1;
}

/* Frameless image viewer: reuses .si-modal-overlay for the scrim. */
.si-lightbox {
  flex-direction: column;
  gap: 10px;
}

.si-lightbox-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  max-width: 100%;
}

.si-lightbox-image {
  max-width: 90vw;
  max-height: 85vh;
  border-radius: 8px;
  object-fit: contain;
}

.si-lightbox-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.si-lightbox-open {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #fff;
  padding: 5px 10px;
  border-radius: 6px;
  background: var(--overlay-modal-strong);
}

.si-lightbox-open:hover {
  text-decoration: underline;
}

.si-lightbox-close {
  top: 16px;
  right: 20px;
  color: #fff;
}

.si-lightbox-close:hover {
  background: var(--overlay-modal-strong);
  color: #fff;
}

.si-msg-failed {
  font-size: 11px;
  color: var(--state-error-text, var(--state-error));
  margin-top: 2px;
}

/* Portalled to document.body; position/size come from inline `fixed` styles
   computed off the caret. z-index must clear .si-composer-modal-overlay (1000),
   which previously clipped this list against its `overflow: hidden`. */
.si-mention-pop {
  z-index: 1100;
  overflow-y: auto;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  box-shadow: 0 6px 20px var(--overlay-modal, rgba(0, 0, 0, 0.15));
}

.si-mention-wrap {
  position: relative;
}

.si-mention-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text-primary);
  background: transparent;
  border: none;
  cursor: pointer;
}

.si-mention-item:hover,
.si-mention-item.si-active {
  background: var(--surface-page);
}
td {
  cursor: default;
}

.all-teachers-container {
  background: var(--surface-card);
  padding: 10px;
  overflow: scroll;
}

.availability-table {
  width: 100;
  margin: 50px 0;
  overflow: auto;
}
.availability-table-style {
  overflow: unset;
}

.availability-table p {
  margin-top: 20px;
  color: var(--state-info);
}

.all-table-value.day-format {
  text-align: left;
  font-size: 10px;
}

.all-table-value .color-blue {
  color: var(--state-info);
  font-size: 10px;
}

.availability-table td.total-table-column {
  text-align: right;
}

.availability-table table {
  padding: 10px;
}

.all-table-value.hover-parent {
  font-size: 8px;
  color: #fafafa;
}

.all-table-value.total-table-column {
  font-size: 10px;
}

.total-heading {
  font-weight: bold;
}

.availability-table th {
  min-width: 14px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  text-align: center;
  font-size: 10px;
  padding: 2px;
}

.availability-table td {
  position: relative;
  /* min-width: 20px; */
  border: 1px solid rgba(0, 0, 0, 0.1);
  text-align: center;
  white-space: nowrap;
  padding: 2px;
}

.tooltiptext {
  display: none;
  width: 120px;
  background-color: var(--surface-card);
  color: var(--text-primary);
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  top: 20px;
  left: -50px;
  position: absolute;
  z-index: 1000000;
  transition: opacity 0.3s;
}

.hover-parent:hover .tooltiptext {
  display: block;
  opacity: 1;
}

.teacher-availability-filters {
  display: flex;
}

.teacher-availability-block {
  margin-right: 30px;
}

.teacher-availability-block button {
  /* margin-top: 28px; */
}

.teacher-availability-submit {
  margin-top: 23px;
  height: 30px;
}

.teacher-availability-checkbox {
  cursor: pointer;
}

.avl-tea-filters {
  display: flex;
}

.avl-tea-filters .custom-checkbox {
  margin-right: 20px;
}

.multi-select-container {
  display: flex;
  flex-direction: row;
}

.multi-select-w {
  max-width: 300px;
}
input[type='text'] {
  padding: 8px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
}

.options-container {
  border: 1px solid #ccc;
  border-radius: 4px;
  max-height: 200px;
  overflow-y: auto;
}

.option {
  padding: 8px;
  cursor: pointer;
}

.option:hover {
  background-color: var(--surface-sunken);
}

.option.selected {
  background-color: #007bff;
  color: var(--text-inverse);
}

.selected-options {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
}

.selected-option {
  padding: 6px;
  margin: 4px;
  background-color: #007bff;
  color: var(--text-inverse);
  border-radius: 4px;
}
.report-template-table-1 {
  /* font-size: 14px;
    line-height: 24px;
    border: 1px solid var(--border-default);
    box-shadow: 0px 6px 24px 0px #CECECE; */
  /* border-collapse: collapse; */
  /* width: 600px; */
  /* margin-top: 5%;
    border-bottom: 6px solid #4B3DDD;
    background-color: var(--surface-card);
    font-family: Helvetica,
        Arial,
        sans-serif; */
}

.report-td-1 {
  width: 100%;
  padding: 0px;
}

.report-width-full {
  width: 100%;
}

.report-td-2 {
  height: 110px;
  width: 100%;
  background-image: url('https://images.myyogateacher.com/email_template/oval-purple.png');
  background-position: center -45px;
  background-size: 100%;
  padding: 0px;
  margin: 0px;
  background-repeat: no-repeat;
}

.report-img-1 {
  width: 68px;
  height: 68px;
  margin-top: 121px;
}

.report-template-table-2 {
  padding: 0px 30px 60px 30px;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  text-align: left;
}

.report-template-table-2 h2 {
  text-align: left;
}

.report-h2-1 {
  text-align: center !important;
  color: var(--text-primary);
  margin: 50px 0px 0px;
}

.report-td-3 {
  width: 100%;
  border-bottom: 1px solid var(--border-default);
  padding-bottom: 30px;
}
.data-table {
  border-collapse: collapse;
}

.session-list th:nth-child(4),
.session-list td:nth-child(4) {
  background-color: var(--state-success-bg);
  font-weight: bold;
}

.session-list th:nth-child(6),
.session-list td:nth-child(6) {
  background-color: var(--surface-sunken);
  padding: 10px;
  text-align: left;
}

.data-table th {
  padding: 15px;
  border-bottom: 2px solid var(--border-default) !important;
  background-color: var(--surface-sunken);
}

.verified-user-table th {
  border-bottom: 2px solid var(--border-default) !important;
  background-color: var(--state-success-bg);
}

.unverfied-users-table th {
  border-bottom: 2px solid var(--border-default) !important;
  background-color: var(--state-error-bg);
}

.cancel-table th {
  border-bottom: 2px solid var(--border-default) !important;
  background-color: var(--state-error-bg);
}

.no-show-table th {
  padding: 15px;
  border-bottom: 2px solid var(--border-default) !important;
  background-color: var(--state-warning-bg);
}

.data-table td {
  padding: 15px 10px;
}

.session-list td:nth-child(3) {
  padding: 5px;
}

.data-table td,
.data-table th {
  border: 1px solid var(--border-default);
  text-align: center;
}

.verified-user-table {
  background-color: var(--state-success-bg);
}

h4 {
  font-size: 16px;
}

h5 {
  font-size: 15px;
  margin-bottom: 8px;
}

.session-list th,
.session-list td {
  padding: 10px !important;
}

@media only screen and (max-width: 768px) {
  body {
    padding: 0px !important;
  }
}

@media only screen and (max-width: 600px) {
  .outer-table {
    width: 90% !important;
  }

  .footer {
    width: 100%;
  }

  .contact-us {
    text-align: center;
  }

  .copyright-social,
  .market-place {
    width: 100% !important;
    height: 50px;
    display: block;
  }
}

@media only screen and (max-width: 575px) {
  body {
    background-color: var(--surface-card) !important;
  }
}

@media only screen and (max-width: 414px) {
}

@media only screen and (max-width: 375px) {
}
.daily-report-header {
  display: flex;
  justify-content: center;
  align-items: center;
}

.daily-report-item {
  margin: 0 20px;
}

.daily-report-header button {
  margin-top: 20px;
}
.custom-charts-cont {
  width: 100%;
  height: auto;
  display: flex;
}

.custom-chart-small {
  width: 45%;
  padding: 10px;
  margin: 0 2.5%;
  border: 1px solid var(--border-default);
  border-radius: 10px;
  /* height: 500px; */
}

.custom-chart-pie {
  padding: 30px 0;
  margin-bottom: 30px;
}

.custom-charts-full {
  padding: 10px;
  margin: 20px 2.5%;
  border: 1px solid var(--border-default);
  border-radius: 10px;
}

@media (max-width: 700px) {
  .custom-charts-cont {
    flex-direction: column;
  }

  .custom-chart-small {
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    margin-bottom: 20px;
  }
}
/* Yoga cues library (PROD-7144). Colors come from theme tokens only (light/dark safe). */

.ycl-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 12px;
}

.ycl-toolbar label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
}

.ycl-toolbar input,
.ycl-toolbar select {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--input-border);
  border-radius: 8px;
  background: var(--input-bg);
  color: var(--input-text);
}

.ycl-search-wrap {
  position: relative;
  display: flex;
  flex: 1;
  min-width: 200px;
}

.ycl-search {
  flex: 1;
  width: 100%;
}

.ycl-search-wrap .ycl-search {
  padding-right: 32px;
}

.ycl-search-clear {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  background: var(--surface-page);
  color: var(--text-muted);
}

.ycl-search-clear:hover {
  color: var(--text-primary);
}

.ycl-csv {
  min-height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 800;
  background: var(--brand-primary);
  color: var(--text-inverse);
}

.ycl-workspace {
  display: grid;
  grid-template-columns: minmax(210px, 0.75fr) minmax(320px, 1.4fr) minmax(360px, 1.5fr);
  gap: 14px;
  align-items: start;
}

.ycl-panel {
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: 10px;
  padding: 12px;
  min-width: 0;
}

.ycl-panel h3 {
  margin: 0 0 10px;
  font-size: 14px;
  color: var(--text-primary);
}

/* Browse */
.ycl-cat {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  padding: 10px;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.ycl-cat.is-active,
.ycl-title.is-active {
  border-color: var(--border-default);
  background: var(--surface-page);
}

.ycl-arrow {
  flex: 0 0 auto;
  font-size: 11px;
  line-height: 1;
  color: var(--text-muted);
  transition: transform 0.2s ease;
}

.ycl-cat.is-open .ycl-arrow {
  transform: rotate(90deg);
}

.ycl-cat-label {
  flex: 1 1 auto;
  min-width: 0;
}

.ycl-cat strong {
  display: block;
  font-size: 14px;
}

.ycl-cat span,
.ycl-title span {
  color: var(--text-muted);
  font-size: 12px;
}

/* Animated accordion: 0fr -> 1fr collapses/expands the drilldown height smoothly. */
.ycl-drill-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.22s ease;
}

.ycl-drill-wrap.is-open {
  grid-template-rows: 1fr;
}

.ycl-drill-inner {
  overflow: hidden;
  min-height: 0;
}

.ycl-drill {
  margin: 4px 0 10px 10px;
  padding-left: 10px;
  border-left: 2px solid var(--border-default);
  display: grid;
  gap: 6px;
}

.ycl-title {
  width: 100%;
  text-align: left;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--surface-page);
  cursor: pointer;
  padding: 8px;
  color: var(--text-primary);
}

/* Title on its own line; session count drops below it. */
.ycl-title strong {
  display: block;
}

.ycl-fam {
  margin: 10px 0 4px;
  font-size: 11px;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 800;
}

/* Table */
.ycl-table-wrap {
  overflow: auto;
  max-height: calc(100vh - 240px);
}

.ycl-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.ycl-table th,
.ycl-table td {
  padding: 10px;
  border-bottom: 1px solid var(--border-default);
  text-align: left;
  vertical-align: top;
}

.ycl-table th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background: var(--surface-card);
  color: var(--text-muted);
  font-size: 11px;
  text-transform: uppercase;
}

.ycl-table tbody tr {
  cursor: pointer;
}

.ycl-table tbody tr.is-selected,
.ycl-table tbody tr:hover {
  background: var(--surface-page);
}

.ycl-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: var(--surface-page);
  color: var(--text-muted);
}

.ycl-pill.warn {
  background: var(--state-warning-bg);
  color: var(--state-warning-text);
}

.ycl-score {
  display: inline-block;
  min-width: 30px;
  text-align: center;
  padding: 2px 6px;
  border-radius: 8px;
  font-weight: 800;
  background: var(--surface-page);
  color: var(--text-primary);
}

/* Detail */
.ycl-video {
  width: 100%;
  border-radius: 8px;
  background: var(--surface-page);
}

.ycl-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0;
}

/* Buttons + anchor-buttons share one box; only background differs (.primary). */
.ycl-btn {
  box-sizing: border-box;
  height: 36px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid var(--border-default);
  background: var(--surface-page);
  color: var(--text-primary);
  cursor: pointer;
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
}

.ycl-btn.primary {
  border: 1px solid var(--brand-primary);
  background: var(--brand-primary);
  color: var(--text-inverse);
}

.ycl-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 10px 0;
}

.ycl-meta div {
  padding: 8px;
  border-radius: 8px;
  background: var(--surface-page);
}

.ycl-meta dt {
  font-size: 11px;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 800;
}

.ycl-meta dd {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--text-primary);
}

.ycl-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
}

.ycl-field input,
.ycl-field textarea,
.ycl-field select {
  padding: 8px;
  border: 1px solid var(--input-border);
  border-radius: 8px;
  background: var(--input-bg);
  color: var(--input-text);
  font-weight: 500;
}

.ycl-transcript {
  padding: 10px;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--surface-page);
  color: var(--text-primary);
  font-size: 13px;
  line-height: 1.5;
  max-height: 160px;
  overflow: auto;
}

/* Tabs (above the toolbar) */
.ycl-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border-default);
}

.ycl-tab {
  padding: 8px 16px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--text-muted);
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
}

.ycl-tab.is-active {
  color: var(--brand-primary);
  border-bottom-color: var(--brand-primary);
}

/* Sortable table headers */
.ycl-sortable {
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
  white-space: nowrap;
}

.ycl-sortable:hover {
  color: var(--text-primary);
}

/* Transcript timeline — synced highlight as the video plays */
.ycl-timeline {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 300px;
  overflow: auto;
  padding: 6px;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--surface-page);
}

.ycl-cue {
  display: flex;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 6px 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  font-size: 13px;
  line-height: 1.5;
}

.ycl-cue:hover {
  background: var(--surface-card);
}

.ycl-cue.is-active {
  background: var(--state-info-bg);
  color: var(--state-info-text);
  font-weight: 600;
}

.ycl-cue-time {
  flex: 0 0 auto;
  color: var(--text-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.ycl-cue.is-active .ycl-cue-time {
  color: var(--state-info-text);
}

.ycl-cue-text {
  flex: 1 1 auto;
}

/* Shortlist toggle — active state */
.ycl-btn.shortlisted {
  border-color: var(--state-warning-text);
  background: var(--state-warning-bg);
  color: var(--state-warning-text);
}

/* Group / 1-on-1 class tag */
.ycl-class-pill {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}

.ycl-class-pill.group {
  background: var(--state-info-bg);
  color: var(--state-info-text);
}

.ycl-class-pill.onone {
  border: 1px solid var(--border-default);
  background: var(--surface-page);
  color: var(--text-muted);
}

.ycl-cell-tags {
  margin-top: 4px;
}

.ycl-detail-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.ycl-status {
  font-size: 12px;
  font-weight: 800;
  color: var(--text-muted);
}

/* Table cell helpers */
.ycl-muted {
  color: var(--text-muted);
  font-size: 12px;
}

.ycl-type-rating {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ycl-title-cell strong {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
}

.ycl-card-sub {
  margin-top: 2px;
  font-size: 12px;
  color: var(--text-muted);
}

.ycl-empty {
  padding: 24px;
  text-align: center;
  color: var(--text-muted);
}

/* Session-card strip (tablet / mobile) — hidden on desktop */
.ycl-cards {
  display: none;
}

@media (max-width: 1100px) {
  .ycl-workspace {
    grid-template-columns: minmax(220px, 0.9fr) minmax(360px, 1.6fr);
  }

  .ycl-detail {
    grid-column: 1 / -1;
  }
}

@media (max-width: 820px) {
  .ycl-workspace {
    grid-template-columns: 1fr;
  }

  .ycl-table-wrap {
    display: none;
  }

  .ycl-cards {
    display: grid;
    gap: 10px;
    max-height: none;
  }

  .ycl-card {
    border: 1px solid var(--border-default);
    border-radius: 8px;
    padding: 10px;
    cursor: pointer;
    background: var(--surface-card);
  }

  .ycl-card.is-selected {
    background: var(--surface-page);
  }

  .ycl-card-title {
    font-weight: 800;
    color: var(--text-primary);
  }

  .ycl-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
  }
}
/* Fill mode (CustomPlayer `fill` prop).
   video-react 0.16.0 has no real fill/height support: its default "fluid" mode
   sets an inline `padding-top` (aspect ratio) and derives height from width,
   overflowing any fixed-height container. These rules override that so the
   player fills its parent's definite height and the video letterboxes to fit.
   The `!important` is required to beat video-react's inline padding-top. */
.video-react.vr-fill {
  width: 100% !important;
  height: 100% !important;
  padding-top: 0 !important;
}
.video-react.vr-fill .video-react-video {
  object-fit: contain;
}
.ctb-no-bor {
  border: none;
}

.ctb-fir-col {
  border: 1px solid #cccccc;
}

.ctb-date {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ctb-week-text2 {
  line-height: 1.5;
  font-size: 12px;
}

.ctb-week-text {
  font-size: 18px;
}
.user-rev-table {
  flex-shrink: 0;
  width: 8%;
}

.user-rev-table-fir {
  width: 10%;
}

.user-rev-row {
  height: 30px;
}

.user-rev-td {
  white-space: nowrap;
  box-sizing: border-box;
  padding: 0;
  font-size: 14px;
}

.user-rev-td-fir {
  flex-shrink: 0;
  font-size: 12px;
  /* width: 300px; */
}

.user-rev-no-bor {
  border: none;
  height: 20px;
}

.user-rev-td-fir {
  text-align: left;
  padding: 0 5px;
}

.sess-week-rev-td {
  white-space: nowrap;
  box-sizing: border-box;
  padding: 0 5px;
  font-size: 14px;
}

.user-rev-row-fir {
  height: 40px;
}

.k-m-cont {
  display: flex;
  padding-right: '10px';
  margin-right: '10px';
  width: 100%;
  /* overflow: 'auto'; */
}

.k-m-title {
  width: 30%;
}

.k-m-value {
  display: flex;
  width: 70%;
  overflow: auto;
}
/*
 * SMS Report v3 — dense aligned table on desktop, boxed card on tablet/mobile
 * (container-query toggle at 780px). Light-first; all colors via theme tokens.
 * Same design language as concierge_v3. Scoped via .srv3-* classes.
 */

/* Widen the shared shell only while this page is mounted (added/removed by SmsReportV3).
 * Overrides common.css width:calc(90% - 60px); margin:20px 5%. No other page affected. */
.common-page-container.srv3-fullwidth {
  width: auto;
  margin: 16px 24px;
}

.srv3-list {
  container-type: inline-size;
  width: 100%;
}

/* atoms */
.srv3-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.srv3-av {
  border-radius: 9999px;
  flex: 0 0 auto;
  object-fit: cover;
  background: var(--surface-sunken);
}
.srv3-name {
  font-weight: 700;
  color: var(--state-info);
  text-decoration: none;
}
.srv3-name:hover {
  text-decoration: underline;
}
.srv3-trunc {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.srv3-rep-yes {
  color: var(--state-success-text);
  background: var(--state-success-bg);
  border-radius: 5px;
  padding: 1px 8px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.srv3-rep-no {
  color: var(--state-error-text);
  background: var(--state-error-bg);
  border-radius: 5px;
  padding: 1px 8px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.srv3-btn {
  margin: 0;
  border-radius: 7px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
  line-height: 1.2;
}
.srv3-btn-wa {
  background: var(--state-success);
  color: var(--text-inverse);
}
.srv3-btn-sms {
  background: var(--state-info);
  color: var(--text-inverse);
}
/* Keep brand colors on hover — the global `button:hover` in common.css would
   otherwise turn these orange (it outranks a single class). */
.srv3-btn-wa:hover {
  background: var(--state-success);
  border-color: transparent;
  filter: brightness(0.93);
}
.srv3-btn-sms:hover {
  background: var(--state-info);
  border-color: transparent;
  filter: brightness(0.93);
}

/* ===== TABLE (container >= 780px) ===== */
.srv3-thead,
.srv3-trow {
  display: grid;
  grid-template-columns:
    minmax(110px, 1fr) minmax(150px, 2fr) 116px 92px
    minmax(100px, 0.9fr) 124px;
  gap: 14px;
  align-items: center;
  padding: 12px 16px;
}
.srv3-thead {
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-default);
}
.srv3-thead .rh {
  text-align: right;
}
.srv3-trow {
  border-bottom: 1px solid var(--border-default);
}
.srv3-trow:hover {
  background: var(--surface-sunken);
}
.srv3-name-cell {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.srv3-name-cell .srv3-av {
  width: 30px;
  height: 30px;
}
.srv3-body {
  color: var(--text-primary);
  min-width: 0;
}
.srv3-sent .d {
  color: var(--text-primary);
}
.srv3-sent .t {
  color: var(--text-muted);
}
.srv3-conc {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--text-secondary);
  text-decoration: none;
}
.srv3-conc:hover {
  text-decoration: underline;
}
.srv3-conc .srv3-av {
  width: 24px;
  height: 24px;
}
.srv3-act {
  justify-self: end;
}

/* card hidden in table mode */
.srv3-card {
  display: none;
}

/* ===== CARD (container < 780px) ===== */
@container (max-width: 779px) {
  .srv3-thead,
  .srv3-trow {
    display: none;
  }
  .srv3-card {
    display: block;
  }
}
.srv3-card {
  border-bottom: 1px solid var(--border-default);
  padding: 14px 16px;
}
.srv3-card-hd {
  display: flex;
  align-items: center;
  gap: 10px;
}
.srv3-card-hd .srv3-av {
  width: 30px;
  height: 30px;
}
.srv3-card-hd .srv3-rep-yes,
.srv3-card-hd .srv3-rep-no {
  margin-left: auto;
}
.srv3-msg {
  margin-top: 10px;
  background: var(--surface-sunken);
  border: 1px solid var(--border-default);
  border-radius: 9px;
  padding: 10px 12px;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}
.srv3-meta {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: 12px;
  color: var(--text-muted);
  align-items: center;
}
.srv3-meta .k {
  text-transform: uppercase;
  font-size: 10px;
  opacity: 0.75;
}
.srv3-meta .srv3-conc .srv3-av {
  width: 18px;
  height: 18px;
}
.srv3-card-act {
  margin-top: 11px;
}

/* responsive filter toolbar */
.srv3-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: center;
}
.srv3-filters--start {
  justify-content: flex-start;
  align-items: flex-end;
}

/* Scheduled (pending) messages tab */
.srv3-sched-head,
.srv3-sched-row {
  display: grid;
  grid-template-columns: minmax(110px, 1fr) minmax(150px, 2.2fr) 180px 90px 90px;
  gap: 14px;
  align-items: center;
  padding: 10px 16px;
}
.srv3-sched-head {
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-default);
}
.srv3-sched-row {
  border-bottom: 1px solid var(--border-default);
}
.srv3-sched-row:last-child {
  border-bottom: none;
}
.srv3-sched-badge {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}
.srv3-sched-badge.wa {
  color: var(--state-success);
}
.srv3-sched-badge.sms {
  color: var(--brand-primary);
}
.srv3-sched-cancel {
  background: transparent;
  color: var(--state-error);
  border: 1px solid var(--state-error);
}
.srv3-sched-cancel:hover {
  background: var(--state-error);
  color: var(--text-inverse);
  border-color: var(--state-error);
}

.srv3-sched-empty {
  padding: 14px 16px;
  font-size: 12px;
  color: var(--text-muted);
}

/* Sent / Scheduled tab selector */
.srv3-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border-default);
}
.srv3-tab {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
}
.srv3-tab:hover {
  color: var(--text-primary);
}
.srv3-tab.active {
  color: var(--brand-primary);
  border-bottom-color: var(--brand-primary);
}

/* Segmented tab selectors (Target Clients, Reply Sent) — mirrors the
   teacher-match segmented control, tinted to this report's brand accent. */
.srv3-seg-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.srv3-seg-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}
.srv3-seg {
  display: grid;
  grid-template-columns: repeat(var(--segment-count), minmax(0, 1fr));
  gap: 4px;
  min-height: 38px;
  border: 1px solid var(--input-border);
  border-radius: 6px;
  padding: 3px;
  background: var(--input-bg);
}
.srv3-seg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 0 14px;
  border: 0;
  border-radius: 5px;
  margin: 0;
  color: var(--text-secondary);
  background: transparent;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease;
}
.srv3-seg-btn:hover,
.srv3-seg-btn:focus {
  color: var(--text-primary);
  background: var(--surface-sunken);
  outline: none;
}
.srv3-seg-btn-selected,
.srv3-seg-btn-selected:hover,
.srv3-seg-btn-selected:focus {
  color: #fff;
  background: var(--brand-primary);
  box-shadow: 0 1px 4px rgba(238, 115, 27, 0.35);
}
/* ========================================
   Concierge Dashboard V2 - TailAdmin Design System
   Professional Dashboard Experience
   ======================================== */

/* CSS Variables - TailAdmin Color Palette */
:root {
  --cv2-primary: #465fff;
  --cv2-primary-light: #eff4ff;
  --cv2-primary-dark: #3641f5;
  --cv2-success: #22c55e;
  --cv2-success-light: #dcfce7;
  --cv2-success-dark: #16a34a; /* darker hover for filled success buttons */
  --cv2-warning: #f59e0b;
  --cv2-warning-light: #fef3c7;
  --cv2-danger: #ef4444;
  --cv2-danger-light: #fee2e2;
  --cv2-info: #3b82f6;
  --cv2-info-light: #dbeafe;
  --cv2-purple: #8b5cf6;
  --cv2-purple-light: #ede9fe;
  --cv2-gray-50: #f9fafb;
  --cv2-gray-100: #f3f4f6;
  --cv2-gray-200: #e5e7eb;
  --cv2-gray-300: #d1d5db;
  --cv2-gray-400: #9ca3af;
  --cv2-gray-500: #6b7280;
  --cv2-gray-600: #4b5563;
  --cv2-gray-700: #374151;
  --cv2-gray-800: #1f2937;
  --cv2-gray-900: #111827;
  --cv2-white: #ffffff;
  --cv2-text-on-color: #ffffff; /* white text on a filled accent (button/badge) — stays light in both themes */
  --cv2-radius-sm: 6px;
  --cv2-radius-md: 8px;
  --cv2-radius-lg: 12px;
  --cv2-radius-xl: 16px;
  --cv2-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --cv2-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --cv2-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --cv2-transition: all 0.2s ease;
}

/* Dark-mode palette. Redefining the cv2 tokens flips the whole dashboard at once,
   so the .cv2-* rules below need no per-rule .dark overrides. Neutral ramp is
   inverted (gray-50 = darkest surface … gray-900 = lightest text); values align
   with the global slate palette in src/theme/tokens.css for visual consistency. */
.dark {
  --cv2-white: #1e293b; /* primary elevated surface (= --surface-card) */
  --cv2-text-on-color: #ffffff; /* unchanged: filled accents keep light text */

  --cv2-gray-50: #172131; /* subtle inset panels on a card */
  --cv2-gray-100: #0f1827; /* recessed bars (tab strip, secondary button) */
  --cv2-gray-200: #334155; /* default borders (= --border-default) */
  --cv2-gray-300: #475569; /* emphasis / hover / dashed borders (= --border-emphasis) */
  --cv2-gray-400: #64748b; /* faint text + icons (= --text-muted) */
  --cv2-gray-500: #94a3b8; /* muted labels (= --text-secondary) */
  --cv2-gray-600: #cbd5e1; /* secondary body text */
  --cv2-gray-700: #e2e8f0; /* strong body text (= --text-primary) */
  --cv2-gray-800: #f1f5f9; /* headings / values */
  --cv2-gray-900: #f8fafc; /* strongest text */

  --cv2-primary: #6b82ff;
  --cv2-primary-light: #243056; /* dark-tinted accent fill (kept distinct from --cv2-white card) */
  --cv2-primary-dark: #8a9bff; /* hover is lighter than base in dark */
  --cv2-success: #34d399;
  --cv2-success-light: #064e3b;
  --cv2-success-dark: #6ee7b7; /* hover lighter than base in dark */
  --cv2-warning: #fbbf24;
  --cv2-warning-light: #451a03;
  --cv2-danger: #f87171;
  --cv2-danger-light: #450a0a;
  --cv2-info: #60a5fa;
  --cv2-info-light: #1e3a5f;
  --cv2-purple: #a78bfa;
  --cv2-purple-light: #2e1065;

  --cv2-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --cv2-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
  --cv2-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.5);
}

/* The base rule uses a 50% white wash that is far too bright on a dark tab strip. */
.dark .cv2-tab:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* ========================================
   Container
   ======================================== */
.cv2-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 16px;
}

/* ========================================
   Sections
   ======================================== */
.cv2-section {
  background: var(--cv2-white);
  border: 1px solid var(--cv2-gray-200);
  border-radius: var(--cv2-radius-lg);
  overflow: hidden;
  box-shadow: var(--cv2-shadow-sm);
}

.cv2-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: var(--cv2-gray-50);
  border-bottom: 1px solid var(--cv2-gray-200);
  flex-wrap: wrap;
  gap: 12px;
}

.cv2-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 600;
  color: var(--cv2-gray-800);
  margin: 0;
}

.cv2-section-title svg {
  width: 20px;
  height: 20px;
  color: var(--cv2-gray-400);
}

.cv2-section-main {
  background: transparent;
  border: none;
  box-shadow: none;
}

.cv2-section-main .cv2-section-header {
  background: var(--cv2-white);
  border: 1px solid var(--cv2-gray-200);
  border-radius: var(--cv2-radius-lg);
  margin-bottom: 16px;
}

/* ========================================
   Filters
   ======================================== */
.cv2-filters {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cv2-filters-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px;
}

.cv2-filter-group {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.cv2-date-range {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  padding-left: 16px;
  border-left: 3px solid var(--cv2-success);
}

.cv2-date-range-indicator {
  display: none;
}

/* ========================================
   Stats Grid
   ======================================== */
.cv2-stats-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  padding: 20px;
}

.cv2-stat-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: var(--cv2-white);
  border: 1px solid var(--cv2-gray-200);
  border-radius: var(--cv2-radius-md);
  position: relative;
  transition: var(--cv2-transition);
}

.cv2-stat-card:hover {
  border-color: var(--cv2-primary);
  box-shadow: var(--cv2-shadow-md);
}

.cv2-stat-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--cv2-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

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

.cv2-stat-icon-primary {
  background: var(--cv2-primary-light);
  color: var(--cv2-primary);
}

.cv2-stat-icon-success {
  background: var(--cv2-success-light);
  color: var(--cv2-success);
}

.cv2-stat-icon-warning {
  background: var(--cv2-warning-light);
  color: var(--cv2-warning);
}

.cv2-stat-icon-danger {
  background: var(--cv2-danger-light);
  color: var(--cv2-danger);
}

.cv2-stat-icon-info {
  background: var(--cv2-info-light);
  color: var(--cv2-info);
}

.cv2-stat-icon-purple {
  background: var(--cv2-purple-light);
  color: var(--cv2-purple);
}

.cv2-stat-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.cv2-stat-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--cv2-gray-900);
  line-height: 1.2;
}

.cv2-stat-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--cv2-gray-500);
  white-space: nowrap;
}

.cv2-stat-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
}

.cv2-stat-badge-success {
  background: var(--cv2-success-light);
  color: var(--cv2-success);
}

.cv2-stat-card-success {
  border-left: 3px solid var(--cv2-success);
}

/* ========================================
   Tabs
   ======================================== */
.cv2-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  background: var(--cv2-gray-100);
  border-radius: var(--cv2-radius-md);
}

.cv2-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: transparent;
  border: none;
  border-radius: var(--cv2-radius-sm);
  font-size: 13px;
  font-weight: 500;
  color: var(--cv2-gray-600);
  cursor: pointer;
  transition: var(--cv2-transition);
  white-space: nowrap;
}

.cv2-tab:hover {
  background: rgba(255, 255, 255, 0.5);
  color: var(--cv2-gray-800);
}

.cv2-tab.active {
  background: var(--cv2-white);
  color: var(--cv2-primary);
  box-shadow: var(--cv2-shadow-sm);
}

.cv2-tab-count {
  padding: 2px 8px;
  background: var(--cv2-gray-200);
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--cv2-gray-600);
}

.cv2-tab.active .cv2-tab-count {
  background: var(--cv2-primary-light);
  color: var(--cv2-primary);
}

/* ========================================
   Toolbar
   ======================================== */
.cv2-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--cv2-white);
  border: 1px solid var(--cv2-gray-200);
  border-radius: var(--cv2-radius-md);
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 12px;
}

.cv2-toolbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cv2-toolbar-count {
  font-size: 13px;
  color: var(--cv2-gray-600);
}

.cv2-toolbar-count strong {
  color: var(--cv2-gray-900);
  font-weight: 600;
}

.cv2-toolbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cv2-sort-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cv2-sort-label {
  font-size: 12px;
  color: var(--cv2-gray-500);
  font-weight: 500;
}

.cv2-sort-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  background: var(--cv2-white);
  border: 1px solid var(--cv2-gray-200);
  border-radius: var(--cv2-radius-sm);
  font-size: 12px;
  font-weight: 500;
  color: var(--cv2-gray-600);
  cursor: pointer;
  transition: var(--cv2-transition);
}

.cv2-sort-btn:hover {
  border-color: var(--cv2-gray-300);
  color: var(--cv2-gray-800);
}

.cv2-sort-btn.active {
  background: var(--cv2-primary-light);
  border-color: var(--cv2-primary);
  color: var(--cv2-primary);
}

.cv2-sort-btn svg {
  width: 14px;
  height: 14px;
}

/* ========================================
   Buttons
   ======================================== */
.cv2-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  border: none;
  border-radius: var(--cv2-radius-sm);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--cv2-transition);
}

.cv2-btn svg {
  width: 16px;
  height: 16px;
}

.cv2-btn-sm {
  padding: 6px 12px;
  font-size: 12px;
}

.cv2-btn-sm svg {
  width: 14px;
  height: 14px;
}

.cv2-btn-primary {
  background: var(--cv2-primary);
  color: var(--cv2-text-on-color);
}

.cv2-btn-primary:hover {
  background: var(--cv2-primary-dark);
}

.cv2-btn-secondary {
  background: var(--cv2-gray-100);
  color: var(--cv2-gray-700);
}

.cv2-btn-secondary:hover {
  background: var(--cv2-gray-200);
}

.cv2-btn-success {
  background: var(--cv2-success);
  color: var(--cv2-text-on-color);
}

.cv2-btn-success:hover {
  background: var(--cv2-success-dark);
}

/* ========================================
   Cards Grid
   ======================================== */
.cv2-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: 20px;
}

/* ========================================
   Student Card
   ======================================== */
.cv2-card {
  display: flex;
  flex-direction: column;
  background: var(--cv2-white);
  border: 1px solid var(--cv2-gray-200);
  border-radius: var(--cv2-radius-lg);
  overflow: hidden;
  transition: var(--cv2-transition);
}

.cv2-card:hover {
  border-color: var(--cv2-gray-300);
  box-shadow: var(--cv2-shadow-md);
}

/* Card Header */
.cv2-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background: linear-gradient(135deg, var(--cv2-gray-50) 0%, var(--cv2-white) 100%);
  border-bottom: 1px solid var(--cv2-gray-100);
}

.cv2-user-link {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}

.cv2-user-link:hover .cv2-user-name {
  color: var(--cv2-primary);
}

.cv2-avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--cv2-radius-md);
  object-fit: cover;
  border: 2px solid var(--cv2-white);
  box-shadow: var(--cv2-shadow-sm);
}

.cv2-user-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cv2-user-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--cv2-gray-900);
  transition: var(--cv2-transition);
}

.cv2-user-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.cv2-user-level {
  font-size: 11px;
  font-weight: 500;
  color: var(--cv2-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.cv2-user-separator {
  font-size: 11px;
  color: var(--cv2-gray-300);
  font-weight: 300;
}

.cv2-user-ethnicity {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 500;
  color: var(--cv2-gray-600);
}

.cv2-user-timezone {
  font-size: 11px;
  color: var(--cv2-gray-400);
}

.cv2-header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.cv2-card-badges {
  display: flex;
  gap: 6px;
}

.cv2-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.cv2-badge-success {
  background: var(--cv2-success-light);
  color: var(--cv2-success);
}

.cv2-badge-warning {
  background: var(--cv2-warning-light);
  color: var(--cv2-warning);
}

.cv2-badge-info {
  background: var(--cv2-info-light);
  color: var(--cv2-info);
}

.cv2-badge-danger {
  background: var(--cv2-danger-light);
  color: var(--cv2-danger);
}

/* Card Body */
.cv2-card-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}

/* Info Rows */
.cv2-info-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.cv2-info-row-2col {
  grid-template-columns: repeat(2, 1fr);
}

/* Concierge Row */
.cv2-concierge-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}

.cv2-info-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cv2-info-item-row {
  flex-direction: row;
  align-items: center;
  gap: 6px;
}

.cv2-info-item-wide {
  grid-column: span 1;
}

.cv2-info-item-score {
  flex-direction: row;
  align-items: center;
  gap: 6px;
}

.cv2-info-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--cv2-gray-400);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.cv2-info-value {
  font-size: 13px;
  font-weight: 500;
  color: var(--cv2-gray-700);
}

.cv2-info-value-primary {
  color: var(--cv2-primary);
  font-weight: 600;
}

.cv2-info-value-danger {
  color: var(--cv2-danger);
}

.cv2-info-value-muted {
  color: var(--cv2-gray-400);
  font-style: italic;
}

.cv2-info-editable {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cv2-score-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--cv2-gray-900);
}

.cv2-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: transparent;
  border: none;
  border-radius: var(--cv2-radius-sm);
  color: var(--cv2-gray-400);
  cursor: pointer;
  transition: var(--cv2-transition);
}

.cv2-icon-btn:hover {
  background: var(--cv2-gray-100);
  color: var(--cv2-primary);
}

.cv2-icon-btn svg {
  width: 14px;
  height: 14px;
}

.cv2-icon-btn-edit {
  color: var(--cv2-gray-400);
}

.cv2-icon-btn-edit:hover {
  color: var(--cv2-primary);
}

.cv2-icon-btn-inline {
  width: 18px;
  height: 18px;
  margin-left: 2px;
}

.cv2-icon-btn-inline svg {
  width: 12px;
  height: 12px;
}

.cv2-icon-btn-info {
  color: var(--cv2-gray-500);
  background: transparent;
  border: 1.5px solid var(--cv2-gray-400);
  width: 16px;
  height: 16px;
  font-size: 11px;
  font-weight: 600;
  font-style: italic;
  font-family: Georgia, serif;
}

.cv2-icon-btn-info:hover {
  border-color: var(--cv2-info);
  color: var(--cv2-info);
}

.cv2-score-with-info {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cv2-link {
  font-size: 13px;
  font-weight: 500;
  color: var(--cv2-primary);
  text-decoration: none;
}

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

/* Sessions Row */
.cv2-sessions-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 12px;
  background: var(--cv2-gray-50);
  border-radius: var(--cv2-radius-md);
}

.cv2-sessions-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cv2-sessions-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--cv2-gray-500);
  text-transform: uppercase;
}

.cv2-sessions-label svg {
  width: 14px;
  height: 14px;
}

.cv2-sessions-values {
  display: flex;
  gap: 16px;
}

.cv2-session-stat {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cv2-session-type {
  font-size: 11px;
  color: var(--cv2-gray-500);
}

.cv2-session-count {
  font-size: 14px;
  font-weight: 600;
  color: var(--cv2-gray-800);
}

a.cv2-session-count {
  color: var(--cv2-primary);
}

a.cv2-session-count:hover {
  text-decoration: underline;
}

/* Source Row */
.cv2-source-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  background: var(--cv2-gray-50);
  border-radius: var(--cv2-radius-md);
}

.cv2-source-url {
  font-size: 11px;
  color: var(--cv2-gray-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cv2-source-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cv2-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
}

.cv2-tag-source {
  background: var(--cv2-purple-light);
  color: var(--cv2-purple);
}

.cv2-tag-offer {
  background: var(--cv2-info-light);
  color: var(--cv2-info);
}

/* Health Button */
.cv2-health-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px;
  background: var(--cv2-white);
  border: 1px dashed var(--cv2-gray-300);
  border-radius: var(--cv2-radius-md);
  font-size: 12px;
  font-weight: 500;
  color: var(--cv2-gray-600);
  cursor: pointer;
  transition: var(--cv2-transition);
}

.cv2-health-btn:hover {
  background: var(--cv2-primary-light);
  border-color: var(--cv2-primary);
  color: var(--cv2-primary);
}

.cv2-health-btn svg {
  width: 16px;
  height: 16px;
}

/* Card Footer */
.cv2-card-footer {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  background: var(--cv2-gray-50);
  border-top: 1px solid var(--cv2-gray-100);
}

.cv2-action-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--cv2-white);
  border: 1px solid var(--cv2-gray-200);
  border-radius: var(--cv2-radius-sm);
  font-size: 12px;
  font-weight: 500;
  color: var(--cv2-gray-700);
  cursor: pointer;
  transition: var(--cv2-transition);
}

.cv2-action-btn:hover {
  background: var(--cv2-gray-50);
  border-color: var(--cv2-gray-300);
}

.cv2-action-btn svg {
  width: 14px;
  height: 14px;
}

.cv2-action-btn-chat {
  border-color: var(--cv2-primary);
  color: var(--cv2-primary);
}

.cv2-action-btn-chat:hover {
  background: var(--cv2-primary);
  color: var(--cv2-text-on-color);
}

.cv2-action-btn-info {
  border-color: var(--cv2-gray-300);
}

.cv2-action-btn-info:hover {
  background: var(--cv2-gray-100);
}

.cv2-action-btn-sms {
  border-color: var(--cv2-info);
  color: var(--cv2-info);
}

.cv2-action-btn-sms:hover {
  background: var(--cv2-info);
  color: var(--cv2-text-on-color);
}

.cv2-action-btn-whatsapp {
  border-color: #25d366;
  color: #25d366;
}

.cv2-action-btn-whatsapp:hover {
  background: #25d366;
  color: var(--cv2-text-on-color);
}

/* ========================================
   Empty State
   ======================================== */
.cv2-empty-state {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
  background: var(--cv2-white);
  border: 1px dashed var(--cv2-gray-300);
  border-radius: var(--cv2-radius-lg);
}

.cv2-empty-state svg {
  width: 64px;
  height: 64px;
  color: var(--cv2-gray-300);
  margin-bottom: 16px;
}

.cv2-empty-state h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--cv2-gray-700);
  margin: 0 0 8px 0;
}

.cv2-empty-state p {
  font-size: 14px;
  color: var(--cv2-gray-500);
  margin: 0;
}

/* ========================================
   Modals
   ======================================== */
.cv2-modal-content {
  padding: 20px;
}

.cv2-modal-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--cv2-gray-900);
  margin: 0 0 20px 0;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--cv2-gray-200);
}

/* Score Breakdown */
.cv2-score-breakdown {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cv2-score-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background: var(--cv2-primary-light);
  border-radius: var(--cv2-radius-md);
}

.cv2-score-total-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--cv2-gray-700);
}

.cv2-score-total-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--cv2-primary);
}

.cv2-score-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cv2-score-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--cv2-gray-50);
  border-radius: var(--cv2-radius-sm);
}

.cv2-score-item-label {
  font-size: 13px;
  color: var(--cv2-gray-600);
}

.cv2-score-item-value {
  font-size: 16px;
  font-weight: 600;
  color: var(--cv2-gray-900);
}

/* Info List */
.cv2-info-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cv2-info-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--cv2-gray-50);
  border-radius: var(--cv2-radius-sm);
}

.cv2-info-list-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--cv2-gray-500);
}

.cv2-info-list-value {
  font-size: 14px;
  font-weight: 500;
  color: var(--cv2-gray-800);
}

/* Form */
.cv2-form-group {
  margin-bottom: 20px;
}

.cv2-form-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

/* Health History */
.cv2-health-history {
  padding: 16px;
  background: var(--cv2-gray-50);
  border-radius: var(--cv2-radius-md);
  font-size: 14px;
  line-height: 1.6;
  color: var(--cv2-gray-700);
  white-space: pre-wrap;
}

/* ========================================
   Responsive Styles
   ======================================== */
@media (max-width: 1400px) {
  .cv2-stats-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 1200px) {
  .cv2-stats-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .cv2-cards-grid {
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  }
}

@media (max-width: 1024px) {
  .cv2-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .cv2-section-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .cv2-tabs {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 768px) {
  .cv2-container {
    padding: 0 12px;
  }

  .cv2-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    padding: 16px;
    gap: 12px;
  }

  .cv2-stat-card {
    padding: 12px;
  }

  .cv2-stat-icon {
    width: 40px;
    height: 40px;
  }

  .cv2-stat-icon svg {
    width: 20px;
    height: 20px;
  }

  .cv2-stat-value {
    font-size: 20px;
  }

  .cv2-cards-grid {
    grid-template-columns: 1fr;
  }

  .cv2-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .cv2-toolbar-left,
  .cv2-toolbar-right {
    justify-content: center;
  }

  .cv2-sort-group {
    flex-wrap: wrap;
    justify-content: center;
  }

  .cv2-filters-row {
    flex-direction: column;
    align-items: stretch;
  }

  .cv2-filter-group {
    width: 100%;
  }

  .cv2-date-range {
    flex-direction: column;
    padding-left: 0;
    padding-top: 12px;
    border-left: none;
    border-top: 3px solid var(--cv2-success);
  }

  .cv2-info-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .cv2-info-row-2col {
    grid-template-columns: repeat(2, 1fr);
  }

  .cv2-info-row-2col .cv2-info-item:last-child {
    grid-column: span 1;
  }

  .cv2-info-row:not(.cv2-info-row-2col) .cv2-info-item:last-child {
    grid-column: span 2;
  }
}

@media (max-width: 600px) {
  .cv2-stats-grid {
    grid-template-columns: 1fr;
  }

  .cv2-card-header {
    flex-direction: row;
    align-items: flex-start;
    gap: 8px;
  }

  .cv2-header-right {
    align-items: flex-end;
  }

  .cv2-card-badges {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .cv2-info-row {
    grid-template-columns: 1fr;
  }

  .cv2-info-row-2col {
    grid-template-columns: repeat(2, 1fr);
  }

  .cv2-info-row-2col .cv2-info-item,
  .cv2-info-row-2col .cv2-info-item:last-child {
    grid-column: span 1;
  }

  .cv2-info-row:not(.cv2-info-row-2col) .cv2-info-item,
  .cv2-info-row:not(.cv2-info-row-2col) .cv2-info-item:last-child {
    grid-column: span 1;
  }

  .cv2-sessions-row {
    grid-template-columns: 1fr 1fr;
  }

  .cv2-card-footer {
    flex-wrap: wrap;
  }

  .cv2-action-btn {
    min-width: calc(50% - 4px);
  }

  .cv2-tabs {
    flex-wrap: nowrap;
    padding: 2px;
  }

  .cv2-tab {
    padding: 6px 10px;
    font-size: 12px;
  }

  .cv2-tab-count {
    padding: 1px 6px;
    font-size: 10px;
  }
}

@media (max-width: 480px) {
  .cv2-action-btn {
    flex: 1 1 100%;
  }

  .cv2-stat-card {
    flex-direction: column;
    text-align: center;
  }

  .cv2-stat-badge {
    position: static;
    margin-top: 8px;
  }
}
/*
 * Concierge v3 list — responsive "lead management" layout, scoped to .cv3-scope.
 * Desktop/laptop: dense aligned table.  Tablet/mobile (<820px container): boxed card.
 * All colors via theme tokens, so light (primary) and dark both work.
 *
 * NOTE: this file uses its own .cv3-* class names (with display:flex/grid in CSS)
 * instead of Tailwind `flex items-center` utilities, specifically so the global
 * common.css `@media(max-width:768px) .common-page-container .flex.items-center`
 * rule cannot hijack these rows. The reset below stays as a safety net for the
 * filter toolbar (which still uses Tailwind flex utilities). No impact on other pages.
 */
.cv3-scope .flex.items-center {
  flex-direction: row !important;
  align-items: center !important;
}

/* Widen the shared shell ONLY while the v3 page is mounted (class is added/removed
 * by ConciergeV3). Overrides common.css `width: calc(90% - 60px); margin: 20px 5%`
 * (and the >=1500px 1200px cap) so the table/cards get the full available width.
 * Higher specificity (0,2,0) than the global rule, so it wins without !important. */
.common-page-container.cv3-fullwidth {
  width: auto;
  margin: 16px 24px;
}

/* ===== responsive container ===== */
.cv3-list {
  container-type: inline-size;
  width: 100%;
}

/* ----- shared atoms ----- */
.cv3-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.cv3-av {
  width: 30px;
  height: 30px;
  border-radius: 9999px;
  flex: 0 0 auto;
  object-fit: cover;
}
.cv3-name {
  font-weight: 700;
  color: var(--state-info);
  text-decoration: none;
}
.cv3-name:hover {
  text-decoration: underline;
}
.cv3-loc {
  color: var(--text-muted);
  font-size: 12px;
}
.cv3-edit {
  color: var(--brand-primary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}
.cv3-edit svg {
  width: 14px;
  height: 14px;
}
.cv3-hist {
  color: var(--brand-primary);
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
}
.cv3-eth {
  font-size: 11px;
  font-weight: 600;
  color: var(--state-info-text);
  background: var(--state-info-bg);
  border-radius: 5px;
  padding: 2px 8px;
  white-space: nowrap;
}
.cv3-trunc {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* badges */
.cv3-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 5px;
  padding: 1px 8px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.cv3-yes {
  color: var(--state-success-text);
  background: var(--state-success-bg);
}
.cv3-no {
  color: var(--state-error-text);
  background: var(--state-error-bg);
}
.cv3-dash {
  color: var(--text-muted);
}

/* action buttons — always visible, grouped, all sizes */
.cv3-acts {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.cv3-btn {
  margin: 0;
  border-radius: 7px;
  padding: 5px 12px;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
  line-height: 1.2;
}
.cv3-btn-chat {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
  background: transparent;
}
.cv3-btn-chat:hover {
  background: var(--surface-sunken);
  border-color: var(--brand-primary);
}
.cv3-btn-wa {
  background: var(--state-success);
  color: var(--text-inverse);
}
.cv3-btn-sms {
  background: var(--state-info);
  color: var(--text-inverse);
}
/* Keep brand colors on hover — the global `button:hover` in common.css would
   otherwise turn these orange (it outranks a single class). */
.cv3-btn-wa:hover {
  background: var(--state-success);
  border-color: transparent;
  filter: brightness(0.93);
}
.cv3-btn-sms:hover {
  background: var(--state-info);
  border-color: transparent;
  filter: brightness(0.93);
}
.cv3-kebab {
  color: var(--text-muted);
  font-size: 16px;
  cursor: pointer;
  padding: 0 2px;
  -webkit-user-select: none;
          user-select: none;
}
/* "Send " prefix shows only on the roomier card; table uses short WA/SMS */
.cv3-send {
  display: none;
}
.cv3-info-ico {
  color: var(--state-info);
  cursor: pointer;
}

/* trial stacked / sessions */
.cv3-stack .a {
  color: var(--text-primary);
}
.cv3-stack .b {
  color: var(--text-muted);
}
.cv3-sess .r {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.cv3-sess .k {
  color: var(--text-muted);
  font-size: 10px;
  text-transform: uppercase;
}
.cv3-sess .v {
  color: var(--text-primary);
}

/* details (dimmed secondary cluster) */
.cv3-det {
  color: var(--text-muted);
  font-size: 12px;
  min-width: 0;
}
.cv3-det .l1 {
  margin-bottom: 3px;
}
.cv3-det b {
  color: var(--text-secondary);
  font-weight: 600;
}
.cv3-det a,
.cv3-det .cc {
  color: var(--text-secondary);
  text-decoration: none;
}
.cv3-det a:hover {
  text-decoration: underline;
}

/* legend */
.cv3-legend {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 4px 14px 10px;
  font-size: 11.5px;
  color: var(--text-muted);
}
.cv3-legend .dot {
  width: 7px;
  height: 7px;
  border-radius: 9999px;
  display: inline-block;
  margin-right: 6px;
  vertical-align: middle;
}
.cv3-legend .dot-p {
  background: var(--text-primary);
}
.cv3-legend .dot-s {
  background: var(--text-muted);
  opacity: 0.6;
}
.cv3-legend .r {
  margin-left: auto;
  font-style: italic;
  opacity: 0.7;
}

/* ===== TABLE (default: container >= 820px) ===== */
.cv3-thead,
.cv3-trow {
  display: grid;
  grid-template-columns:
    minmax(120px, 1.1fr) 132px 48px 92px 54px
    minmax(130px, 1fr) 118px;
  gap: 12px;
  align-items: center;
  padding: 11px 14px;
}
.cv3-thead {
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-default);
}
.cv3-thead .dimh {
  opacity: 0.55;
}
.cv3-thead .rh {
  text-align: right;
}
.cv3-trow {
  border-bottom: 1px solid var(--border-default);
}
.cv3-trow:hover {
  background: var(--surface-sunken);
}
.cv3-cell-name {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.cv3-cell-name .id {
  min-width: 0;
}
.cv3-cell-det {
  border-left: 1px solid var(--border-default);
  padding-left: 14px;
}
.cv3-cell-acts {
  justify-self: end;
}
/* center-aligned columns (Member / Sessions / Replied) */
.cv3-center {
  text-align: center;
}
/* concierge shown small, under the timezone in the name cell */
.cv3-conc-line {
  font-size: 11px;
  margin-top: 1px;
  color: var(--text-muted);
}
.cv3-conc-line a {
  color: var(--state-info);
  text-decoration: none;
}
.cv3-conc-line a:hover {
  text-decoration: underline;
}

/* card is hidden while in table mode */
.cv3-card {
  display: none;
}

/* ===== CARD (container < 820px) ===== */
@container (max-width: 819px) {
  .cv3-legend,
  .cv3-thead,
  .cv3-trow {
    display: none;
  }
  .cv3-card {
    display: block;
  }
  .cv3-send {
    display: inline;
  }
}
.cv3-card {
  border-bottom: 1px solid var(--border-default);
  padding: 14px;
}
.cv3-card-hd {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cv3-card-hd .id {
  min-width: 0;
}
.cv3-card-hd .cv3-eth {
  margin-left: auto;
}
.cv3-boxes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin-top: 11px;
}
.cv3-box {
  background: var(--surface-sunken);
  border: 1px solid var(--border-default);
  border-radius: 9px;
  padding: 9px 12px;
  min-width: 0;
}
.cv3-box-sess,
.cv3-box-act {
  grid-column: 1 / -1;
}
/* Once the card is wide enough (tablet / 768 / 1024, where the shell keeps us in
   card mode), let Sessions + Replied join the first row with Trial + Member.
   Below this (phones) they stay full-width so the buttons have room. */
@container (min-width: 440px) {
  .cv3-boxes {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .cv3-box-sess,
  .cv3-box-act {
    grid-column: auto;
  }
  /* tighten for the narrower inline boxes: short WA/SMS labels + stacked sessions.
     Higher specificity (.cv3-box-sess .cv3-sessgrid) so it beats the later base rule. */
  .cv3-send {
    display: none;
  }
  .cv3-box-sess .cv3-sessgrid {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}
.cv3-box .bl {
  font-size: 9.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 700;
  margin-bottom: 5px;
}
.cv3-box .bv {
  color: var(--text-primary);
  font-weight: 600;
  font-size: 14px;
}
.cv3-sessgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.cv3-sessgrid .k {
  color: var(--text-muted);
  font-size: 10px;
  text-transform: uppercase;
}
.cv3-foot {
  margin-top: 11px;
  padding-top: 9px;
  border-top: 1px solid var(--border-default);
  font-size: 11px;
  color: var(--text-muted);
}
.cv3-foot b {
  color: var(--text-secondary);
  font-weight: 600;
}
.cv3-foot a {
  color: var(--text-secondary);
  text-decoration: none;
}

/* Member cell: Yes/No badge with an optional "Family" tag stacked below it. */
.cv3-member-cell {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.cv3-family-tag {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--state-info-text);
  background: var(--state-info-bg);
  border-radius: 4px;
  padding: 0 5px;
  line-height: 1.6;
  white-space: nowrap;
}

/* Email shown under the student name. */
.cv3-email {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 1px;
}

/* Subtle tint for rows whose student is a member (own subscription or family plan). */
.cv3-row-member .cv3-trow,
.cv3-row-member .cv3-card {
  background: var(--surface-row-highlight);
}
.cv3-row-member .cv3-trow:hover {
  background: var(--surface-row-highlight-hover);
}

/* Sort control on the table toolbar (next to Download Data). */
.cv3-sortbar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cv3-sortlbl {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}
.cv3-sortsel {
  font-size: 12px;
  color: var(--text-primary);
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: 6px;
  padding: 4px 8px;
  cursor: pointer;
}
.cv3-sortsel:focus {
  outline: none;
  border-color: var(--input-focus-border);
  background: var(--input-focus-bg);
}
/*
 * Concierge post-trial buckets list — responsive "lead management" layout,
 * scoped to .cb-scope. Cloned from concierge_v3.css (.cv3-* → .cb-*) for the
 * PROD-6988 post-trial bucket report.
 * Desktop/laptop: dense aligned table.  Tablet/mobile (<820px container): boxed card.
 * All colors via theme tokens, so light (primary) and dark both work.
 *
 * NOTE: this file uses its own .cb-* class names (with display:flex/grid in CSS)
 * instead of Tailwind `flex items-center` utilities, specifically so the global
 * common.css `@media(max-width:768px) .common-page-container .flex.items-center`
 * rule cannot hijack these rows. The reset below stays as a safety net for the
 * filter toolbar (which still uses Tailwind flex utilities). No impact on other pages.
 */
.cb-scope .flex.items-center {
  flex-direction: row !important;
  align-items: center !important;
}

/* Widen the shared shell ONLY while this page is mounted (class is added/removed
 * by ConciergePostTrialBuckets). Overrides common.css `width: calc(90% - 60px); margin: 20px 5%`
 * (and the >=1500px 1200px cap) so the table/cards get the full available width.
 * Higher specificity (0,2,0) than the global rule, so it wins without !important. */
.common-page-container.cb-fullwidth {
  width: auto;
  margin: 16px 24px;
}

/* ===== responsive container ===== */
.cb-list {
  container-type: inline-size;
  width: 100%;
}

/* ----- shared atoms ----- */
.cb-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.cb-av {
  width: 30px;
  height: 30px;
  border-radius: 9999px;
  flex: 0 0 auto;
  object-fit: cover;
}
.cb-name {
  font-weight: 700;
  color: var(--state-info);
  text-decoration: none;
}
.cb-name:hover {
  text-decoration: underline;
}
.cb-loc {
  color: var(--text-muted);
  font-size: 12px;
}
.cb-edit {
  color: var(--brand-primary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}
.cb-edit svg {
  width: 14px;
  height: 14px;
}
.cb-hist {
  color: var(--brand-primary);
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
}
.cb-eth {
  font-size: 11px;
  font-weight: 600;
  color: var(--state-info-text);
  background: var(--state-info-bg);
  border-radius: 5px;
  padding: 2px 8px;
  white-space: nowrap;
}
.cb-trunc {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* badges */
.cb-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 5px;
  padding: 1px 8px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.cb-yes {
  color: var(--state-success-text);
  background: var(--state-success-bg);
}
.cb-no {
  color: var(--state-error-text);
  background: var(--state-error-bg);
}
.cb-dash {
  color: var(--text-muted);
}

/* action buttons — always visible, grouped, all sizes */
.cb-acts {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.cb-btn {
  margin: 0;
  border-radius: 7px;
  padding: 5px 12px;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
  line-height: 1.2;
}
.cb-btn-chat {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
  background: transparent;
}
.cb-btn-chat:hover {
  background: var(--surface-sunken);
  border-color: var(--brand-primary);
}
.cb-btn-hist {
  border-color: var(--state-info);
  color: var(--state-info);
  background: transparent;
}
.cb-btn-hist:hover {
  background: var(--surface-sunken);
  border-color: var(--state-info);
}
.cb-btn-wa {
  background: var(--state-success);
  color: var(--text-inverse);
}
.cb-btn-sms {
  background: var(--state-info);
  color: var(--text-inverse);
}
/* Keep brand colors on hover — the global `button:hover` in common.css would
   otherwise turn these orange (it outranks a single class). */
.cb-btn-wa:hover {
  background: var(--state-success);
  border-color: transparent;
  filter: brightness(0.93);
}
.cb-btn-sms:hover {
  background: var(--state-info);
  border-color: transparent;
  filter: brightness(0.93);
}
.cb-kebab {
  color: var(--text-muted);
  font-size: 16px;
  cursor: pointer;
  padding: 0 2px;
  -webkit-user-select: none;
          user-select: none;
}
/* "Send " prefix shows only on the roomier card; table uses short WA/SMS */
.cb-send {
  display: none;
}
.cb-info-ico {
  color: var(--state-info);
  cursor: pointer;
}

/* trial stacked / sessions */
.cb-stack .a {
  color: var(--text-primary);
}
.cb-stack .b {
  color: var(--text-muted);
}
.cb-sess .r {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.cb-sess .k {
  color: var(--text-muted);
  font-size: 10px;
  text-transform: uppercase;
}
.cb-sess .v {
  color: var(--text-primary);
}

/* bucket cell (replaces v3's dimmed secondary cluster) */
.cb-bucket {
  color: var(--text-secondary);
  font-size: 12px;
  min-width: 0;
}
.cb-bucket .bk {
  font-weight: 700;
  color: var(--text-primary);
}
.cb-bucket .bk-at {
  color: var(--text-muted);
  font-size: 11px;
  margin-top: 2px;
}

/* bucket pill (badge variant used in the cell + summary) */
.cb-bucket-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 6px;
  padding: 2px 9px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--state-info-text);
  background: var(--state-info-bg);
}
.cb-bucket-pill.b1 {
  color: var(--state-warning-text);
  background: var(--state-warning-bg);
}
.cb-bucket-pill.b2 {
  color: var(--state-info-text);
  background: var(--state-info-bg);
}
.cb-bucket-pill.b3 {
  color: var(--state-success-text);
  background: var(--state-success-bg);
}

/* ===== bucket-count summary above the table ===== */
/* Total students count, centered above the three bucket pills. Reflects the active
   filters (derived from the same filtered array the pills + cards use). */
.cb-total {
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 12px;
}
.cb-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
}
.cb-count-pill {
  flex: 1 1 180px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1px solid var(--border-default);
  border-left: 4px solid var(--border-default);
  border-radius: 10px;
  background: var(--surface-card);
  padding: 10px 14px;
}
.cb-count-pill.b1 {
  border-left-color: var(--state-warning);
}
.cb-count-pill.b2 {
  border-left-color: var(--state-info);
}
.cb-count-pill.b3 {
  border-left-color: var(--state-success);
}
.cb-count-pill .lbl {
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 700;
}
.cb-count-pill .num {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-primary);
}

/* ===== toolbar above the table (Sort by + Download, right-aligned) ===== */
/* PROD-6988: the "Sort by" dropdown sits top-right of the table, in a flex row with the
   Download button. justify-content:flex-end pushes both to the right; wraps on narrow widths. */
.cb-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
}
.cb-sortby {
  width: 100%;
  max-width: 220px;
}

/* ===== history modal ===== */
.cb-hist-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-height: 60vh;
  overflow-y: auto;
}
.cb-hist-empty {
  color: var(--text-muted);
  font-size: 13px;
  padding: 12px 4px;
}
.cb-hist-row {
  display: flex;
  gap: 10px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--border-default);
  font-size: 13px;
}
.cb-hist-row:last-child {
  border-bottom: none;
}
.cb-hist-tag {
  flex: 0 0 auto;
  align-self: flex-start;
  border-radius: 5px;
  padding: 1px 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: var(--surface-sunken);
  white-space: nowrap;
}
.cb-hist-body {
  min-width: 0;
}
.cb-hist-main {
  color: var(--text-primary);
}
.cb-hist-main b {
  font-weight: 700;
}
.cb-hist-desc {
  color: var(--text-muted);
  font-size: 12px;
  margin-top: 2px;
}
.cb-hist-at {
  color: var(--text-muted);
  font-size: 11px;
  margin-top: 3px;
}

/* legend */
.cb-legend {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 4px 14px 10px;
  font-size: 11.5px;
  color: var(--text-muted);
}
.cb-legend .dot {
  width: 7px;
  height: 7px;
  border-radius: 9999px;
  display: inline-block;
  margin-right: 6px;
  vertical-align: middle;
}
.cb-legend .dot-p {
  background: var(--text-primary);
}
.cb-legend .dot-s {
  background: var(--text-muted);
  opacity: 0.6;
}
.cb-legend .r {
  margin-left: auto;
  font-style: italic;
  opacity: 0.7;
}

/* ===== TABLE (default: container >= 820px) ===== */
.cb-thead,
.cb-trow {
  display: grid;
  grid-template-columns:
    minmax(120px, 1.1fr) 132px 48px 92px 54px
    minmax(130px, 1fr) 150px;
  gap: 12px;
  align-items: center;
  padding: 11px 14px;
}
.cb-thead {
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-default);
}
.cb-thead .dimh {
  opacity: 0.55;
}
.cb-thead .rh {
  text-align: right;
}
.cb-trow {
  border-bottom: 1px solid var(--border-default);
}
.cb-trow:hover {
  background: var(--surface-sunken);
}
.cb-cell-name {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.cb-cell-name .id {
  min-width: 0;
}
.cb-cell-bucket {
  border-left: 1px solid var(--border-default);
  padding-left: 14px;
}
.cb-cell-acts {
  justify-self: end;
}
/* center-aligned columns (Member / Sessions / Replied) */
.cb-center {
  text-align: center;
}
/* concierge shown small, under the timezone in the name cell */
.cb-conc-line {
  font-size: 11px;
  margin-top: 1px;
  color: var(--text-muted);
}
.cb-conc-line a {
  color: var(--state-info);
  text-decoration: none;
}
.cb-conc-line a:hover {
  text-decoration: underline;
}

/* card is hidden while in table mode */
.cb-card {
  display: none;
}

/* ===== CARD (container < 820px) ===== */
@container (max-width: 819px) {
  .cb-legend,
  .cb-thead,
  .cb-trow {
    display: none;
  }
  .cb-card {
    display: block;
  }
  .cb-send {
    display: inline;
  }
}
.cb-card {
  border-bottom: 1px solid var(--border-default);
  padding: 14px;
}
.cb-card-hd {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cb-card-hd .id {
  min-width: 0;
}
.cb-card-hd .cb-eth {
  margin-left: auto;
}
.cb-boxes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin-top: 11px;
}
.cb-box {
  background: var(--surface-sunken);
  border: 1px solid var(--border-default);
  border-radius: 9px;
  padding: 9px 12px;
  min-width: 0;
}
.cb-box-sess,
.cb-box-act {
  grid-column: 1 / -1;
}
/* Once the card is wide enough (tablet / 768 / 1024, where the shell keeps us in
   card mode), let Sessions + Replied join the first row with Trial + Member.
   Below this (phones) they stay full-width so the buttons have room. */
@container (min-width: 440px) {
  .cb-boxes {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .cb-box-sess,
  .cb-box-act {
    grid-column: auto;
  }
  /* tighten for the narrower inline boxes: short WA/SMS labels + stacked sessions.
     Higher specificity (.cb-box-sess .cb-sessgrid) so it beats the later base rule. */
  .cb-send {
    display: none;
  }
  .cb-box-sess .cb-sessgrid {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}
.cb-box .bl {
  font-size: 9.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 700;
  margin-bottom: 5px;
}
.cb-box .bv {
  color: var(--text-primary);
  font-weight: 600;
  font-size: 14px;
}
.cb-sessgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.cb-sessgrid .k {
  color: var(--text-muted);
  font-size: 10px;
  text-transform: uppercase;
}
.cb-foot {
  margin-top: 11px;
  padding-top: 9px;
  border-top: 1px solid var(--border-default);
  font-size: 11px;
  color: var(--text-muted);
}
.cb-foot b {
  color: var(--text-secondary);
  font-weight: 600;
}
.cb-foot a {
  color: var(--text-secondary);
  text-decoration: none;
}
.session-user {
  cursor: pointer;
}

.profile-img-name {
  display: flex;
  align-items: center;
}

.profile-img-name img {
  /* margin: 0 5px; */
  margin-right: 5px;
}

.th-name-header {
  text-align: left;
}

table-st {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

.table-st th {
  vertical-align: top;
  max-width: 300px;
}

.table-st td,
th {
  border: 1px solid var(--border-default);
  text-align: left;
  padding: 8px;
}

.th-name-header span {
  padding-left: 10px;
}

.video-react .video-react-control:before, .video-react .video-react-big-play-button:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
}

@font-face {
  font-family: "video-react";
  src: url(data:application/vnd.ms-fontobject;base64,MBgAAHwXAAABAAIAAAAAAAAAAAAAAAAAAAABAJABAAAAAExQAAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAic4U8QAAAAAAAAAAAAAAAAAAAAAAABYAdgBpAGQAZQBvAC0AcgBlAGEAYwB0AAAADgBSAGUAZwB1AGwAYQByAAAAFgBWAGUAcgBzAGkAbwBuACAAMQAuADAAAAAWAHYAaQBkAGUAbwAtAHIAZQBhAGMAdAAAAAAAAAEAAAALAIAAAwAwT1MvMg7RD8oAAAC8AAAAYGNtYXAOVuSnAAABHAAAAFRnYXNwAAAAEAAAAXAAAAAIZ2x5Zsdb3FIAAAF4AAAS0GhlYWQLMledAAAUSAAAADZoaGVhB6wEJgAAFIAAAAAkaG10eIgAFM8AABSkAAAAlGxvY2FLllAoAAAVOAAAAExtYXhwACoAyQAAFYQAAAAgbmFtZVtqyukAABWkAAABtnBvc3QAAwAAAAAXXAAAACAAAwQAAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADyIAQAAAAAAAQAAAAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAOAAAAAoACAACAAIAAQAg8iD//f//AAAAAAAg8gD//f//AAH/4w4EAAMAAQAAAAAAAAAAAAAAAQAB//8ADwABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAVYA1gMqAyoAAgAACQIBVgHU/iwDKv7W/tYAAgBWAFYDqgOqAAIAFgAAAS0BNzIeAhUUDgIjIi4CNTQ+AgGqAQD/AFZYnHNDQ3ObWVicc0NDc5sBQMDA6kNzm1lYnHNDQ3ObWVicc0MAAAADAFYAVgOqA6oAEwAnACoAACUyPgI1NC4CIyIOAhUUHgITMh4CFRQOAiMiLgI1ND4CExEFAgBGfV02Nl18R0Z9XTY2XXxHWJxzQ0Nzm1lYnHNDQ3ObAwEAqjZdfEdGfV02Nl18R0Z9XTYDAENzm1lYnHNDQ3ObWVicc0P9lgGAwAAAAAACAQAA1gMAAyoAAwAHAAABMxEjIREzEQJWqqr+qqoDKv2sAlT9rAAAAwBWAFYDqgOqAAMABwAbAAABESMRIxEjERMyHgIVFA4CIyIuAjU0PgICgFZUVoBYnHNDQ3ObWVicc0NDc5sBVgFU/qwBVP6sAlRDc5tZWJxzQ0Nzm1lYnHNDAAAEAFYAVgOqA6oAAwAXACsALwAAAREzEQcyPgI1NC4CIyIOAhUUHgITMh4CFRQOAiMiLgI1ND4CAxEzEQIqVoBGfV02Nl18R0Z9XTY2XXxHWJxzQ0Nzm1lYnHNDQ3ObJ1YBVgFU/qysNl18R0Z9XTY2XXxHRn1dNgMAQ3ObWVicc0NDc5tZWJxzQ/2sAVT+rAABAQABAAMAAwAAAwAAASERIQEAAgD+AAMA/gAAAgBqAQADVgMAAAIABQAACQERIQkBAeoBbP6A/pQBbAIAAQD+AAEAAQAAAAACAKoBAAOWAwAAAgAFAAAJAiERAQIqAWz+lP6AAWwDAP8A/wACAP8AAAAAAAIBAAEAAwADAAACAAYAAAkBEQEzESMBlgFq/gBWVgIAAQD+AAIA/gAAAAAAAgEAAQADAAMAAAMABgAAATMRIyERAQKqVlb+VgFqAwD+AAIA/wAAAAIAqgCAA1YD1gBFAGgAAAEOARUUBjEjNzMVIwcwNjU0MjU0FjsBMhYXHgEXHgEVFAYHDgEHDgEHDgEjIiYnLgEnLgE1MxQWMzI2PwEwNj0BLwEwJiMRMh4CFRQOAiMiLgI1MxQeAjMyPgI1NC4CIxUnNwH4AwsEHgpmSgQEBgUDCAYNAwMKAwcLAQMDBQYGBwMDEQYGDQMDCwYICiIODAMGAwoEBAoJA0Z9XTY2XXxHRn1dNlYpRV01NF5FKSlFXTXW1gG8AQUCAwNeHiYBAwMDAwMDAwMGAwcZDgYNAwMNBgYDAwMBAQMDAgMEFgwLCQEDCAkDGggKBAFuNV17R0Z9XTY2XXxHNF5FKSlFXTU0XkUprNbWAAAEAKoAgANWA9YAGwBGAE0AcAAAARQWMzI2PwEwNj0BMCY1NCYjIgYPATAGHQEwFjcUBg8BMAYjIgYjIiYnLgEnLgE9ATQ2PwEwNjMyNjMyFhceARceARceARUHIzUHNTczEzIeAhUUDgIjIi4CNTMUHgIzMj4CNTQuAiMVJzcCNA4GAwgDCAQEEgQDBgMIBgZUAQMMEAYGDgYGDgYGCAYKCAEDDg4GBg4GBg4GBgoGBgMDAwG2KCpMBi5GfV02Nl18R0Z9XTZWKUVdNTReRSkpRV011tYBeAUJAQMKCQNWCQMECgMDCAkDVgknCRMGGgwEAQMDBgMFKA8eCRMGGgwEAQMDBgMDDgkJEAlqjAweGAEeNV17R0Z9XTY2XXxHNF5FKSlFXTU0XkUprNbWAAAABACqAIADVgPWABsARgCjAMYAAAEUFjMyNj8BMDY9ATQmNTQmIyIGDwEwBh0BMBY3FAYPATAGIyIGIyImJy4BJy4BPQE0Nj8BMDYzMjYzMhYXHgEXHgEXHgEVIzI2PQEwJjU0JisBMAYjIgYdASM0NjMyNjMyFhceAR0BMAYVFAYjIgYHHgEXHgEVFAYHDgEHDgEjIgYjIiYnLgEnLgE1MxUwFhUUFjsBMDYzMjY9ATAmNTQmKwE1EzIeAhUUDgIjIi4CNTMUHgIzMj4CNTQuAiMVJzcCPBAGAwYDCAQEEAQDCAMIBARQAQMMEAYGDgYPFQoGAwMDAwMDDBAGBgwGBg4GBgoGBgMDAwHiDBIEBQMWBQMDASwWDgMOAw0ZCggIBAUDAwgDBg0DAwUBAwMGAwMNBgYOBgYLAwMNBggKJAQFAxYFAwMBBAUDGmZGfV02Nl18R0Z9XTZWKUVdNTReRSkpRV011tYBeAYIAQMKCQNWAwYDBAoDAwgJA1YJJwkTBhoMBAsFAw4JCRAJHgkTBhoMBAEDAwYDAw4JCRAJDgwIBQMDAQQFAwgPHwQHBQQYCg4JAwMFBwMDBwYGDgYGDQMDCgMDBQQBAwMCAwQbCwgFAwMBBAUDFgUDAwEeAWo1XXtHRn1dNjZdfEc0XkUpKUVdNTReRSms1tYAAAIAqgCAA1YD1gBCAGUAAAEOARUUBjEjNzMVIwcwNjU0MjU0FjsBMhYXHgEXHgEVFAYHDgEHDgEjIiYnLgEnLgE1MxQWMzI2PwEwNj0BLwEwJiMlND4CMzUXBzUiDgIVFB4CMzI+AjUzFA4CIyIuAgH0AwsEGgpmSgQEBgUDCAYNAwMKAwcLAQMDBQYIFw8GDQMDCwYICiIODAMGAwoEBAoJA/6uNl18R9bWNF5FKSlFXTU0XkUpVjZdfEdGfV02AbwBBQIDA14eJgEDAwMDAwMDAwYDBxkOBg0DAw0GCAgBAwMCAwQWDAsJAQMICQMaCAoEGkZ8XTWs1tasKUVdNTReRSkpRV01Rn1dNjZdfAAABACqAIADVgPWABsARgBNAHAAAAEUFjMyNj8BMDY9ATAmNTQmIyIGDwEwBh0BMBY3FAYPATAGIyIGIyImJy4BJy4BPQE0Nj8BMDYzMjYzMhYXHgEXHgEXHgEVByM1BzU3MwU0PgIzNRcHNSIOAhUUHgIzMj4CNTMUDgIjIi4CAjQOBgMIAwgEBBIEAwYDCAYGUAEDDBAGBg4GBg4GBggGCggBAw4OBgYOBgYOBgYKBgYDAwMBsigqTAb+2DZdfEfW1jReRSkpRV01NF5FKVY2XXxHRn1dNgF4BQkBAwoJA1YJAwQKAwMICQNWCScJEwYaDAQBAwMGAwUoDx4JEwYaDAQBAwMGAwMOCQkQCWqMDB4YNkZ8XTWs1tasKUVdNTReRSkpRV01Rn1dNjZdfAAAAAQAqgCAA1YD1gAiAD4AaQDGAAATND4CMzUXBzUiDgIVFB4CMzI+AjUzFA4CIyIuAgUUFjMyNj8BMDY9ATAmNTQmIyIGDwEwBh0BMBY3FAYPATAGIyIGIyImJy4BJy4BPQE0Nj8BMDYzMjYzMhYXHgEXHgEXHgEVIzI2PQEwJjU0JisBMAYjIgYdASM0NjMyNjMyFhceAR0BMAYVFAYjIgYHHgEXHgEVFAYHDgEHDgEjIgYjIiYnLgEnLgE1MxUwFhUUFjsBMDYzMjY9ATAmNTQmKwE1qjZdfEfW1jReRSkpRV01NF5FKVY2XXxHRn1dNgGODgYDCAMIBAQSBAMGAwgEBFQBAwwQBgYOBg8VCgYDAwMDAwMMEAYGDAYGDgYGCgYGAwMDAeIMEgQFAxYFAwMBLBYOAw4DDRkKCAgEBQMDCAMGDQMDBQEDAwYDAw0GBg4GBgsDAw0GCAokBAUDFgUDAwEEBQMaAdZGfF01rNbWrClFXTU0XkUpKUVdNUZ9XTY2XXwXBQkBAwoJA1YJAwQKAwMICQNWCScJEwYaDAQLBQMOCQkQCR4JEwYaDAQBAwMGAwMOCQkQCQ4MCAUDAwEEBQMIDx8EBwUEGAoOCQMDBQcDAwcGBg4GBg0DAwoDAwUEAQMDAgMEGwsIBQMDAQQFAxYFAwMBHgAAAAAEAIAAgAOAA4AAAgAUACYALgAAARUnJwEHJw4BBzU+ATcnEScjETMnATQuAic1HgMVFAYHJz4BJxwBByc1HgECAFrwAso2WCJOLBswFbbWqsrKAqofOU0vQG5PLRcVQAoMagJoMDoDVrRahP02NlgbKAtYBxoRtv7g1gEAyv62M1xLNg5YDkVjfEQwWydCGTkeBw0GaF4YWwAAAAABASoAqgKqA1YABQAAATM3EScjASqs1NSsAoDW/VTWAAIA1gCqAxYDVgAFAAwAABMzNxEnIyUUBgcRHgHWqtbWqgJAPDAwPAKA1v1U1oA5WxgBWBhbAAAAAwCAAIoDgAN2ABUAHAAiAAABHgMVFA4CBzU+AzU0LgInExQGBxEeASUzNxEnIwJWQG5PLS1PbUEuTjkfHzlNL2o6MDA6/cCq1taqA3YORWN8RER7Y0YOWA03S1wzM1xLNg7+4jlbGAFYGFtH1v1U1gAAAAAEANYA1gMqAyoABQALABEAFwAAATMVIzUjEzUzFSM1ATUzFSMVHQEzFSM1AlbUVICAVNT+gNSAgNQDKtSA/lSA1FQBLNRUgKyAVNQABADWANYDKgMqAAUACwARABcAAAEzFSM1MwM1MxUjFQE1MxUjNRE1MxUjNQKqgNRUVNSA/qxU1NRUAqpU1P2s1FSAAdSA1FT+rFTUgAAAAAADAIAAqgOAA1YAFwAvAD8AAAE1NCYrASIGHQEUFjsBMjY9ASMVIzUzFSM1NCYrASIGHQEUFjsBMjY9ASMVIzUzFQEyFhURFAYjISImNRE0NjMDABgSgBIaGhKAEhhAVlbqGhKAEhgYEoASGkBWVgGUIjQzI/2sJDIyJAIqLBIYGBKsEhgYEiwWgBYsEhgYEqwSGBgSLBaAFgEsMyP+ACI0MyMCACI0AAAEAIAAgAOAA4AAAwANABkAKQAAATUzFScRMzI2PQE0JiMBESMVIzUjETM1MxUBMhYVERQGIyEiJjURNDYzAmpWlqwSGBgS/wBAVkBAVgGUIjQzI/2sJDIyJAHAgIDA/wAYEqwSGP8AAQBqav8AVlYCADMj/awiNDMjAlQiNAAAAAIAZABWA5wDqgALAFkAAAEyNjU0JiMiBhUUFiUXHgEPAQ4BLwEOAQ8BDgErASImLwEuAScHBiYvASY2PwEuATU8ATcnLgE/AT4BHwE+AT8BPgE7ATIWHwEeARc3NhYfARYGDwEeARUcAQIAPVlYPj1ZWAF8WgYCBFYEDghqECQUEAELCKwHCwIQEyQRagcOBVYEAgZaAQECWgYCBFYEDghqECQUEAELCKwHCwIQEyQRagcOBVYEAgZaAQEBalg+PVlYPj1ZbEYEEAiUBwQDKgwWCHAHCwoIcAcVDioDAwiUBxAFRgoVCwoVC0YEEAiUBwQDKgwWCHAHCwoIcAcVDioDAwiUBxAFRgoVCwoVAAAAAQCAAFgDgAOqADMAAAEyFhUUBiMiJjU8ATclDgEjIiY1NDYzMhYXJS4BNTQ2MzIWFRQGIyImJwUeARUUBgcFPgEDADNJSTMzSQL+0hIsGjRMSzUZLRIBLAEDSzU0TEs1GS0S/tQBAwICATAQLAFSSTMzS0szBw8GsBASSzU0TBERrgcPCDRMSzU0TBMRsAcPCAcPCLAPEQADAFYAVgOqA6oAAwAHABsAAAE1IxUTESMREzIeAhUUDgIjIi4CNTQ+AgIqVFRUKlicc0NDc5tZWJxzQ0NzmwKAVlb+qgEA/wACgENzm1lYnHNDQ3ObWVicc0MAAAQAVgBWA6oDqgADABcAKwAvAAABNTMVAzI+AjU0LgIjIg4CFRQeAhMyHgIVFA4CIyIuAjU0PgITETMRAdZUKkZ9XTY2XXxHRn1dNjZdfEdYnHNDQ3ObWVicc0NDc5svVAKAVlb+KjZdfEdGfV02Nl18R0Z9XTYDAENzm1lYnHNDQ3ObWVicc0P9gAEA/wAAAAEA1gDWAyoDKgALAAABBxcHJwcnNyc3FzcDKu7uPO7uPO7uPO7uAu7u7jzu7jzu7jzu7gABAFUAVQOrA6sAFAAAExQeAjMyPgI1NC4CIyIOAhVVQ3ScWFicdENDdJxYWJx0QwIAWJx0Q0N0nFhYnHRDQ3ScWAAAAAIAVQBVA6sDqwAUACgAAAEiDgIVFB4CMzI+AjU0LgIjESIuAjU0PgIzMh4CFRQOAgIAWJx0Q0N0nFhYnHRDQ3ScWEd8XTU1XXxHR3xdNTVdfAOrQ3ScWFicdENDdJxYWJx0Q/0ANV18R0d8XTU1XXxHR3xdNQAAAAMAVQBVA6sDqwAUACgANAAAASIOAhUUHgIzMj4CNTQuAiMRIi4CNTQ+AjMyHgIVFA4CExQGIyImNTQ2MzIWAgBYnHRDQ3ScWFicdENDdJxYR3xdNTVdfEdHfF01NV18OUs1NUtLNTVLA6tDdJxYWJx0Q0N0nFhYnHRD/QA1XXxHR3xdNTVdfEdHfF01AVU1S0s1NUtLAAAAAQAAAAEAAPEUzolfDzz1AAsEAAAAAADUNIllAAAAANQ0iWUAAAAAA6sD1gAAAAgAAgAAAAAAAAABAAAEAAAAAAAEAAAAAAADqwABAAAAAAAAAAAAAAAAAAAAJQQAAAAAAAAAAAAAAAAAAAAEAAFWBAAAVgQAAFYEAAEABAAAVgQAAFYEAAEABAAAagQAAKoEAAEABAABAAQAAKoEAACqBAAAqgQAAKoEAACqBAAAqgQAAIAEAAEqBAAA1gQAAIAEAADWBAAA1gQAAIAEAACABAAAZAQAAIAEAABWBAAAVgQAANYEAABVBAAAVQQAAFUAAAAAAAoAFAAeACwAVACWAKoA2AEgAS4BRAFaAXABhAIQAqgDpgQuBMYFxAYSBiIGPgZ4Bp4GxgcaB1oH4gguCFwIpAi+COAJHAloAAEAAAAlAMcABAAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAOAK4AAQAAAAAAAQALAAAAAQAAAAAAAgAHAIQAAQAAAAAAAwALAEIAAQAAAAAABAALAJkAAQAAAAAABQALACEAAQAAAAAABgALAGMAAQAAAAAACgAaALoAAwABBAkAAQAWAAsAAwABBAkAAgAOAIsAAwABBAkAAwAWAE0AAwABBAkABAAWAKQAAwABBAkABQAWACwAAwABBAkABgAWAG4AAwABBAkACgA0ANR2aWRlby1yZWFjdAB2AGkAZABlAG8ALQByAGUAYQBjAHRWZXJzaW9uIDEuMABWAGUAcgBzAGkAbwBuACAAMQAuADB2aWRlby1yZWFjdAB2AGkAZABlAG8ALQByAGUAYQBjAHR2aWRlby1yZWFjdAB2AGkAZABlAG8ALQByAGUAYQBjAHRSZWd1bGFyAFIAZQBnAHUAbABhAHJ2aWRlby1yZWFjdAB2AGkAZABlAG8ALQByAGUAYQBjAHRGb250IGdlbmVyYXRlZCBieSBJY29Nb29uLgBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIABiAHkAIABJAGMAbwBNAG8AbwBuAC4AAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA?#iefix) format("eot");
}
@font-face {
  font-family: "video-react";
  src: url(data:application/font-woff;base64,d09GRgABAAAAABfIAAsAAAAAF3wAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABPUy8yAAABCAAAAGAAAABgDtEPymNtYXAAAAFoAAAAVAAAAFQOVuSnZ2FzcAAAAbwAAAAIAAAACAAAABBnbHlmAAABxAAAEtAAABLQx1vcUmhlYWQAABSUAAAANgAAADYLMledaGhlYQAAFMwAAAAkAAAAJAesBCZobXR4AAAU8AAAAJQAAACUiAAUz2xvY2EAABWEAAAATAAAAExLllAobWF4cAAAFdAAAAAgAAAAIAAqAMluYW1lAAAV8AAAAbYAAAG2W2rK6XBvc3QAABeoAAAAIAAAACAAAwAAAAMEAAGQAAUAAAKZAswAAACPApkCzAAAAesAMwEJAAAAAAAAAAAAAAAAAAAAARAAAAAAAAAAAAAAAAAAAAAAQAAA8iAEAAAAAAAEAAAAAAAAAQAAAAAAAAAAAAAAIAAAAAAAAwAAAAMAAAAcAAEAAwAAABwAAwABAAAAHAAEADgAAAAKAAgAAgACAAEAIPIg//3//wAAAAAAIPIA//3//wAB/+MOBAADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQFWANYDKgMqAAIAAAkCAVYB1P4sAyr+1v7WAAIAVgBWA6oDqgACABYAAAEtATcyHgIVFA4CIyIuAjU0PgIBqgEA/wBWWJxzQ0Nzm1lYnHNDQ3ObAUDAwOpDc5tZWJxzQ0Nzm1lYnHNDAAAAAwBWAFYDqgOqABMAJwAqAAAlMj4CNTQuAiMiDgIVFB4CEzIeAhUUDgIjIi4CNTQ+AhMRBQIARn1dNjZdfEdGfV02Nl18R1icc0NDc5tZWJxzQ0NzmwMBAKo2XXxHRn1dNjZdfEdGfV02AwBDc5tZWJxzQ0Nzm1lYnHND/ZYBgMAAAAAAAgEAANYDAAMqAAMABwAAATMRIyERMxECVqqq/qqqAyr9rAJU/awAAAMAVgBWA6oDqgADAAcAGwAAAREjESMRIxETMh4CFRQOAiMiLgI1ND4CAoBWVFaAWJxzQ0Nzm1lYnHNDQ3ObAVYBVP6sAVT+rAJUQ3ObWVicc0NDc5tZWJxzQwAABABWAFYDqgOqAAMAFwArAC8AAAERMxEHMj4CNTQuAiMiDgIVFB4CEzIeAhUUDgIjIi4CNTQ+AgMRMxECKlaARn1dNjZdfEdGfV02Nl18R1icc0NDc5tZWJxzQ0NzmydWAVYBVP6srDZdfEdGfV02Nl18R0Z9XTYDAENzm1lYnHNDQ3ObWVicc0P9rAFU/qwAAQEAAQADAAMAAAMAAAEhESEBAAIA/gADAP4AAAIAagEAA1YDAAACAAUAAAkBESEJAQHqAWz+gP6UAWwCAAEA/gABAAEAAAAAAgCqAQADlgMAAAIABQAACQIhEQECKgFs/pT+gAFsAwD/AP8AAgD/AAAAAAACAQABAAMAAwAAAgAGAAAJAREBMxEjAZYBav4AVlYCAAEA/gACAP4AAAAAAAIBAAEAAwADAAADAAYAAAEzESMhEQECqlZW/lYBagMA/gACAP8AAAACAKoAgANWA9YARQBoAAABDgEVFAYxIzczFSMHMDY1NDI1NBY7ATIWFx4BFx4BFRQGBw4BBw4BBw4BIyImJy4BJy4BNTMUFjMyNj8BMDY9AS8BMCYjETIeAhUUDgIjIi4CNTMUHgIzMj4CNTQuAiMVJzcB+AMLBB4KZkoEBAYFAwgGDQMDCgMHCwEDAwUGBgcDAxEGBg0DAwsGCAoiDgwDBgMKBAQKCQNGfV02Nl18R0Z9XTZWKUVdNTReRSkpRV011tYBvAEFAgMDXh4mAQMDAwMDAwMDBgMHGQ4GDQMDDQYGAwMDAQEDAwIDBBYMCwkBAwgJAxoICgQBbjVde0dGfV02Nl18RzReRSkpRV01NF5FKazW1gAABACqAIADVgPWABsARgBNAHAAAAEUFjMyNj8BMDY9ATAmNTQmIyIGDwEwBh0BMBY3FAYPATAGIyIGIyImJy4BJy4BPQE0Nj8BMDYzMjYzMhYXHgEXHgEXHgEVByM1BzU3MxMyHgIVFA4CIyIuAjUzFB4CMzI+AjU0LgIjFSc3AjQOBgMIAwgEBBIEAwYDCAYGVAEDDBAGBg4GBg4GBggGCggBAw4OBgYOBgYOBgYKBgYDAwMBtigqTAYuRn1dNjZdfEdGfV02VilFXTU0XkUpKUVdNdbWAXgFCQEDCgkDVgkDBAoDAwgJA1YJJwkTBhoMBAEDAwYDBSgPHgkTBhoMBAEDAwYDAw4JCRAJaowMHhgBHjVde0dGfV02Nl18RzReRSkpRV01NF5FKazW1gAAAAQAqgCAA1YD1gAbAEYAowDGAAABFBYzMjY/ATA2PQE0JjU0JiMiBg8BMAYdATAWNxQGDwEwBiMiBiMiJicuAScuAT0BNDY/ATA2MzI2MzIWFx4BFx4BFx4BFSMyNj0BMCY1NCYrATAGIyIGHQEjNDYzMjYzMhYXHgEdATAGFRQGIyIGBx4BFx4BFRQGBw4BBw4BIyIGIyImJy4BJy4BNTMVMBYVFBY7ATA2MzI2PQEwJjU0JisBNRMyHgIVFA4CIyIuAjUzFB4CMzI+AjU0LgIjFSc3AjwQBgMGAwgEBBAEAwgDCAQEUAEDDBAGBg4GDxUKBgMDAwMDAwwQBgYMBgYOBgYKBgYDAwMB4gwSBAUDFgUDAwEsFg4DDgMNGQoICAQFAwMIAwYNAwMFAQMDBgMDDQYGDgYGCwMDDQYICiQEBQMWBQMDAQQFAxpmRn1dNjZdfEdGfV02VilFXTU0XkUpKUVdNdbWAXgGCAEDCgkDVgMGAwQKAwMICQNWCScJEwYaDAQLBQMOCQkQCR4JEwYaDAQBAwMGAwMOCQkQCQ4MCAUDAwEEBQMIDx8EBwUEGAoOCQMDBQcDAwcGBg4GBg0DAwoDAwUEAQMDAgMEGwsIBQMDAQQFAxYFAwMBHgFqNV17R0Z9XTY2XXxHNF5FKSlFXTU0XkUprNbWAAACAKoAgANWA9YAQgBlAAABDgEVFAYxIzczFSMHMDY1NDI1NBY7ATIWFx4BFx4BFRQGBw4BBw4BIyImJy4BJy4BNTMUFjMyNj8BMDY9AS8BMCYjJTQ+AjM1Fwc1Ig4CFRQeAjMyPgI1MxQOAiMiLgIB9AMLBBoKZkoEBAYFAwgGDQMDCgMHCwEDAwUGCBcPBg0DAwsGCAoiDgwDBgMKBAQKCQP+rjZdfEfW1jReRSkpRV01NF5FKVY2XXxHRn1dNgG8AQUCAwNeHiYBAwMDAwMDAwMGAwcZDgYNAwMNBggIAQMDAgMEFgwLCQEDCAkDGggKBBpGfF01rNbWrClFXTU0XkUpKUVdNUZ9XTY2XXwAAAQAqgCAA1YD1gAbAEYATQBwAAABFBYzMjY/ATA2PQEwJjU0JiMiBg8BMAYdATAWNxQGDwEwBiMiBiMiJicuAScuAT0BNDY/ATA2MzI2MzIWFx4BFx4BFx4BFQcjNQc1NzMFND4CMzUXBzUiDgIVFB4CMzI+AjUzFA4CIyIuAgI0DgYDCAMIBAQSBAMGAwgGBlABAwwQBgYOBgYOBgYIBgoIAQMODgYGDgYGDgYGCgYGAwMDAbIoKkwG/tg2XXxH1tY0XkUpKUVdNTReRSlWNl18R0Z9XTYBeAUJAQMKCQNWCQMECgMDCAkDVgknCRMGGgwEAQMDBgMFKA8eCRMGGgwEAQMDBgMDDgkJEAlqjAweGDZGfF01rNbWrClFXTU0XkUpKUVdNUZ9XTY2XXwAAAAEAKoAgANWA9YAIgA+AGkAxgAAEzQ+AjM1Fwc1Ig4CFRQeAjMyPgI1MxQOAiMiLgIFFBYzMjY/ATA2PQEwJjU0JiMiBg8BMAYdATAWNxQGDwEwBiMiBiMiJicuAScuAT0BNDY/ATA2MzI2MzIWFx4BFx4BFx4BFSMyNj0BMCY1NCYrATAGIyIGHQEjNDYzMjYzMhYXHgEdATAGFRQGIyIGBx4BFx4BFRQGBw4BBw4BIyIGIyImJy4BJy4BNTMVMBYVFBY7ATA2MzI2PQEwJjU0JisBNao2XXxH1tY0XkUpKUVdNTReRSlWNl18R0Z9XTYBjg4GAwgDCAQEEgQDBgMIBARUAQMMEAYGDgYPFQoGAwMDAwMDDBAGBgwGBg4GBgoGBgMDAwHiDBIEBQMWBQMDASwWDgMOAw0ZCggIBAUDAwgDBg0DAwUBAwMGAwMNBgYOBgYLAwMNBggKJAQFAxYFAwMBBAUDGgHWRnxdNazW1qwpRV01NF5FKSlFXTVGfV02Nl18FwUJAQMKCQNWCQMECgMDCAkDVgknCRMGGgwECwUDDgkJEAkeCRMGGgwEAQMDBgMDDgkJEAkODAgFAwMBBAUDCA8fBAcFBBgKDgkDAwUHAwMHBgYOBgYNAwMKAwMFBAEDAwIDBBsLCAUDAwEEBQMWBQMDAR4AAAAABACAAIADgAOAAAIAFAAmAC4AAAEVJycBBycOAQc1PgE3JxEnIxEzJwE0LgInNR4DFRQGByc+ASccAQcnNR4BAgBa8ALKNlgiTiwbMBW21qrKygKqHzlNL0BuTy0XFUAKDGoCaDA6A1a0WoT9NjZYGygLWAcaEbb+4NYBAMr+tjNcSzYOWA5FY3xEMFsnQhk5HgcNBmheGFsAAAAAAQEqAKoCqgNWAAUAAAEzNxEnIwEqrNTUrAKA1v1U1gACANYAqgMWA1YABQAMAAATMzcRJyMlFAYHER4B1qrW1qoCQDwwMDwCgNb9VNaAOVsYAVgYWwAAAAMAgACKA4ADdgAVABwAIgAAAR4DFRQOAgc1PgM1NC4CJxMUBgcRHgElMzcRJyMCVkBuTy0tT21BLk45Hx85TS9qOjAwOv3AqtbWqgN2DkVjfEREe2NGDlgNN0tcMzNcSzYO/uI5WxgBWBhbR9b9VNYAAAAABADWANYDKgMqAAUACwARABcAAAEzFSM1IxM1MxUjNQE1MxUjFR0BMxUjNQJW1FSAgFTU/oDUgIDUAyrUgP5UgNRUASzUVICsgFTUAAQA1gDWAyoDKgAFAAsAEQAXAAABMxUjNTMDNTMVIxUBNTMVIzURNTMVIzUCqoDUVFTUgP6sVNTUVAKqVNT9rNRUgAHUgNRU/qxU1IAAAAAAAwCAAKoDgANWABcALwA/AAABNTQmKwEiBh0BFBY7ATI2PQEjFSM1MxUjNTQmKwEiBh0BFBY7ATI2PQEjFSM1MxUBMhYVERQGIyEiJjURNDYzAwAYEoASGhoSgBIYQFZW6hoSgBIYGBKAEhpAVlYBlCI0MyP9rCQyMiQCKiwSGBgSrBIYGBIsFoAWLBIYGBKsEhgYEiwWgBYBLDMj/gAiNDMjAgAiNAAABACAAIADgAOAAAMADQAZACkAAAE1MxUnETMyNj0BNCYjAREjFSM1IxEzNTMVATIWFREUBiMhIiY1ETQ2MwJqVpasEhgYEv8AQFZAQFYBlCI0MyP9rCQyMiQBwICAwP8AGBKsEhj/AAEAamr/AFZWAgAzI/2sIjQzIwJUIjQAAAACAGQAVgOcA6oACwBZAAABMjY1NCYjIgYVFBYlFx4BDwEOAS8BDgEPAQ4BKwEiJi8BLgEnBwYmLwEmNj8BLgE1PAE3Jy4BPwE+AR8BPgE/AT4BOwEyFh8BHgEXNzYWHwEWBg8BHgEVHAECAD1ZWD49WVgBfFoGAgRWBA4IahAkFBABCwisBwsCEBMkEWoHDgVWBAIGWgEBAloGAgRWBA4IahAkFBABCwisBwsCEBMkEWoHDgVWBAIGWgEBAWpYPj1ZWD49WWxGBBAIlAcEAyoMFghwBwsKCHAHFQ4qAwMIlAcQBUYKFQsKFQtGBBAIlAcEAyoMFghwBwsKCHAHFQ4qAwMIlAcQBUYKFQsKFQAAAAEAgABYA4ADqgAzAAABMhYVFAYjIiY1PAE3JQ4BIyImNTQ2MzIWFyUuATU0NjMyFhUUBiMiJicFHgEVFAYHBT4BAwAzSUkzM0kC/tISLBo0TEs1GS0SASwBA0s1NExLNRktEv7UAQMCAgEwECwBUkkzM0tLMwcPBrAQEks1NEwREa4HDwg0TEs1NEwTEbAHDwgHDwiwDxEAAwBWAFYDqgOqAAMABwAbAAABNSMVExEjERMyHgIVFA4CIyIuAjU0PgICKlRUVCpYnHNDQ3ObWVicc0NDc5sCgFZW/qoBAP8AAoBDc5tZWJxzQ0Nzm1lYnHNDAAAEAFYAVgOqA6oAAwAXACsALwAAATUzFQMyPgI1NC4CIyIOAhUUHgITMh4CFRQOAiMiLgI1ND4CExEzEQHWVCpGfV02Nl18R0Z9XTY2XXxHWJxzQ0Nzm1lYnHNDQ3ObL1QCgFZW/io2XXxHRn1dNjZdfEdGfV02AwBDc5tZWJxzQ0Nzm1lYnHND/YABAP8AAAABANYA1gMqAyoACwAAAQcXBycHJzcnNxc3Ayru7jzu7jzu7jzu7gLu7u487u487u487u4AAQBVAFUDqwOrABQAABMUHgIzMj4CNTQuAiMiDgIVVUN0nFhYnHRDQ3ScWFicdEMCAFicdENDdJxYWJx0Q0N0nFgAAAACAFUAVQOrA6sAFAAoAAABIg4CFRQeAjMyPgI1NC4CIxEiLgI1ND4CMzIeAhUUDgICAFicdENDdJxYWJx0Q0N0nFhHfF01NV18R0d8XTU1XXwDq0N0nFhYnHRDQ3ScWFicdEP9ADVdfEdHfF01NV18R0d8XTUAAAADAFUAVQOrA6sAFAAoADQAAAEiDgIVFB4CMzI+AjU0LgIjESIuAjU0PgIzMh4CFRQOAhMUBiMiJjU0NjMyFgIAWJx0Q0N0nFhYnHRDQ3ScWEd8XTU1XXxHR3xdNTVdfDlLNTVLSzU1SwOrQ3ScWFicdENDdJxYWJx0Q/0ANV18R0d8XTU1XXxHR3xdNQFVNUtLNTVLSwAAAAEAAAABAADxFM6JXw889QALBAAAAAAA1DSJZQAAAADUNIllAAAAAAOrA9YAAAAIAAIAAAAAAAAAAQAABAAAAAAABAAAAAAAA6sAAQAAAAAAAAAAAAAAAAAAACUEAAAAAAAAAAAAAAAAAAAABAABVgQAAFYEAABWBAABAAQAAFYEAABWBAABAAQAAGoEAACqBAABAAQAAQAEAACqBAAAqgQAAKoEAACqBAAAqgQAAKoEAACABAABKgQAANYEAACABAAA1gQAANYEAACABAAAgAQAAGQEAACABAAAVgQAAFYEAADWBAAAVQQAAFUEAABVAAAAAAAKABQAHgAsAFQAlgCqANgBIAEuAUQBWgFwAYQCEAKoA6YELgTGBcQGEgYiBj4GeAaeBsYHGgdaB+IILghcCKQIvgjgCRwJaAABAAAAJQDHAAQAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEACwAAAAEAAAAAAAIABwCEAAEAAAAAAAMACwBCAAEAAAAAAAQACwCZAAEAAAAAAAUACwAhAAEAAAAAAAYACwBjAAEAAAAAAAoAGgC6AAMAAQQJAAEAFgALAAMAAQQJAAIADgCLAAMAAQQJAAMAFgBNAAMAAQQJAAQAFgCkAAMAAQQJAAUAFgAsAAMAAQQJAAYAFgBuAAMAAQQJAAoANADUdmlkZW8tcmVhY3QAdgBpAGQAZQBvAC0AcgBlAGEAYwB0VmVyc2lvbiAxLjAAVgBlAHIAcwBpAG8AbgAgADEALgAwdmlkZW8tcmVhY3QAdgBpAGQAZQBvAC0AcgBlAGEAYwB0dmlkZW8tcmVhY3QAdgBpAGQAZQBvAC0AcgBlAGEAYwB0UmVndWxhcgBSAGUAZwB1AGwAYQBydmlkZW8tcmVhY3QAdgBpAGQAZQBvAC0AcgBlAGEAYwB0Rm9udCBnZW5lcmF0ZWQgYnkgSWNvTW9vbi4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==) format("woff"), url(data:application/x-font-ttf;base64,AAEAAAALAIAAAwAwT1MvMg7RD8oAAAC8AAAAYGNtYXAOVuSnAAABHAAAAFRnYXNwAAAAEAAAAXAAAAAIZ2x5Zsdb3FIAAAF4AAAS0GhlYWQLMledAAAUSAAAADZoaGVhB6wEJgAAFIAAAAAkaG10eIgAFM8AABSkAAAAlGxvY2FLllAoAAAVOAAAAExtYXhwACoAyQAAFYQAAAAgbmFtZVtqyukAABWkAAABtnBvc3QAAwAAAAAXXAAAACAAAwQAAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADyIAQAAAAAAAQAAAAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAOAAAAAoACAACAAIAAQAg8iD//f//AAAAAAAg8gD//f//AAH/4w4EAAMAAQAAAAAAAAAAAAAAAQAB//8ADwABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAVYA1gMqAyoAAgAACQIBVgHU/iwDKv7W/tYAAgBWAFYDqgOqAAIAFgAAAS0BNzIeAhUUDgIjIi4CNTQ+AgGqAQD/AFZYnHNDQ3ObWVicc0NDc5sBQMDA6kNzm1lYnHNDQ3ObWVicc0MAAAADAFYAVgOqA6oAEwAnACoAACUyPgI1NC4CIyIOAhUUHgITMh4CFRQOAiMiLgI1ND4CExEFAgBGfV02Nl18R0Z9XTY2XXxHWJxzQ0Nzm1lYnHNDQ3ObAwEAqjZdfEdGfV02Nl18R0Z9XTYDAENzm1lYnHNDQ3ObWVicc0P9lgGAwAAAAAACAQAA1gMAAyoAAwAHAAABMxEjIREzEQJWqqr+qqoDKv2sAlT9rAAAAwBWAFYDqgOqAAMABwAbAAABESMRIxEjERMyHgIVFA4CIyIuAjU0PgICgFZUVoBYnHNDQ3ObWVicc0NDc5sBVgFU/qwBVP6sAlRDc5tZWJxzQ0Nzm1lYnHNDAAAEAFYAVgOqA6oAAwAXACsALwAAAREzEQcyPgI1NC4CIyIOAhUUHgITMh4CFRQOAiMiLgI1ND4CAxEzEQIqVoBGfV02Nl18R0Z9XTY2XXxHWJxzQ0Nzm1lYnHNDQ3ObJ1YBVgFU/qysNl18R0Z9XTY2XXxHRn1dNgMAQ3ObWVicc0NDc5tZWJxzQ/2sAVT+rAABAQABAAMAAwAAAwAAASERIQEAAgD+AAMA/gAAAgBqAQADVgMAAAIABQAACQERIQkBAeoBbP6A/pQBbAIAAQD+AAEAAQAAAAACAKoBAAOWAwAAAgAFAAAJAiERAQIqAWz+lP6AAWwDAP8A/wACAP8AAAAAAAIBAAEAAwADAAACAAYAAAkBEQEzESMBlgFq/gBWVgIAAQD+AAIA/gAAAAAAAgEAAQADAAMAAAMABgAAATMRIyERAQKqVlb+VgFqAwD+AAIA/wAAAAIAqgCAA1YD1gBFAGgAAAEOARUUBjEjNzMVIwcwNjU0MjU0FjsBMhYXHgEXHgEVFAYHDgEHDgEHDgEjIiYnLgEnLgE1MxQWMzI2PwEwNj0BLwEwJiMRMh4CFRQOAiMiLgI1MxQeAjMyPgI1NC4CIxUnNwH4AwsEHgpmSgQEBgUDCAYNAwMKAwcLAQMDBQYGBwMDEQYGDQMDCwYICiIODAMGAwoEBAoJA0Z9XTY2XXxHRn1dNlYpRV01NF5FKSlFXTXW1gG8AQUCAwNeHiYBAwMDAwMDAwMGAwcZDgYNAwMNBgYDAwMBAQMDAgMEFgwLCQEDCAkDGggKBAFuNV17R0Z9XTY2XXxHNF5FKSlFXTU0XkUprNbWAAAEAKoAgANWA9YAGwBGAE0AcAAAARQWMzI2PwEwNj0BMCY1NCYjIgYPATAGHQEwFjcUBg8BMAYjIgYjIiYnLgEnLgE9ATQ2PwEwNjMyNjMyFhceARceARceARUHIzUHNTczEzIeAhUUDgIjIi4CNTMUHgIzMj4CNTQuAiMVJzcCNA4GAwgDCAQEEgQDBgMIBgZUAQMMEAYGDgYGDgYGCAYKCAEDDg4GBg4GBg4GBgoGBgMDAwG2KCpMBi5GfV02Nl18R0Z9XTZWKUVdNTReRSkpRV011tYBeAUJAQMKCQNWCQMECgMDCAkDVgknCRMGGgwEAQMDBgMFKA8eCRMGGgwEAQMDBgMDDgkJEAlqjAweGAEeNV17R0Z9XTY2XXxHNF5FKSlFXTU0XkUprNbWAAAABACqAIADVgPWABsARgCjAMYAAAEUFjMyNj8BMDY9ATQmNTQmIyIGDwEwBh0BMBY3FAYPATAGIyIGIyImJy4BJy4BPQE0Nj8BMDYzMjYzMhYXHgEXHgEXHgEVIzI2PQEwJjU0JisBMAYjIgYdASM0NjMyNjMyFhceAR0BMAYVFAYjIgYHHgEXHgEVFAYHDgEHDgEjIgYjIiYnLgEnLgE1MxUwFhUUFjsBMDYzMjY9ATAmNTQmKwE1EzIeAhUUDgIjIi4CNTMUHgIzMj4CNTQuAiMVJzcCPBAGAwYDCAQEEAQDCAMIBARQAQMMEAYGDgYPFQoGAwMDAwMDDBAGBgwGBg4GBgoGBgMDAwHiDBIEBQMWBQMDASwWDgMOAw0ZCggIBAUDAwgDBg0DAwUBAwMGAwMNBgYOBgYLAwMNBggKJAQFAxYFAwMBBAUDGmZGfV02Nl18R0Z9XTZWKUVdNTReRSkpRV011tYBeAYIAQMKCQNWAwYDBAoDAwgJA1YJJwkTBhoMBAsFAw4JCRAJHgkTBhoMBAEDAwYDAw4JCRAJDgwIBQMDAQQFAwgPHwQHBQQYCg4JAwMFBwMDBwYGDgYGDQMDCgMDBQQBAwMCAwQbCwgFAwMBBAUDFgUDAwEeAWo1XXtHRn1dNjZdfEc0XkUpKUVdNTReRSms1tYAAAIAqgCAA1YD1gBCAGUAAAEOARUUBjEjNzMVIwcwNjU0MjU0FjsBMhYXHgEXHgEVFAYHDgEHDgEjIiYnLgEnLgE1MxQWMzI2PwEwNj0BLwEwJiMlND4CMzUXBzUiDgIVFB4CMzI+AjUzFA4CIyIuAgH0AwsEGgpmSgQEBgUDCAYNAwMKAwcLAQMDBQYIFw8GDQMDCwYICiIODAMGAwoEBAoJA/6uNl18R9bWNF5FKSlFXTU0XkUpVjZdfEdGfV02AbwBBQIDA14eJgEDAwMDAwMDAwYDBxkOBg0DAw0GCAgBAwMCAwQWDAsJAQMICQMaCAoEGkZ8XTWs1tasKUVdNTReRSkpRV01Rn1dNjZdfAAABACqAIADVgPWABsARgBNAHAAAAEUFjMyNj8BMDY9ATAmNTQmIyIGDwEwBh0BMBY3FAYPATAGIyIGIyImJy4BJy4BPQE0Nj8BMDYzMjYzMhYXHgEXHgEXHgEVByM1BzU3MwU0PgIzNRcHNSIOAhUUHgIzMj4CNTMUDgIjIi4CAjQOBgMIAwgEBBIEAwYDCAYGUAEDDBAGBg4GBg4GBggGCggBAw4OBgYOBgYOBgYKBgYDAwMBsigqTAb+2DZdfEfW1jReRSkpRV01NF5FKVY2XXxHRn1dNgF4BQkBAwoJA1YJAwQKAwMICQNWCScJEwYaDAQBAwMGAwUoDx4JEwYaDAQBAwMGAwMOCQkQCWqMDB4YNkZ8XTWs1tasKUVdNTReRSkpRV01Rn1dNjZdfAAAAAQAqgCAA1YD1gAiAD4AaQDGAAATND4CMzUXBzUiDgIVFB4CMzI+AjUzFA4CIyIuAgUUFjMyNj8BMDY9ATAmNTQmIyIGDwEwBh0BMBY3FAYPATAGIyIGIyImJy4BJy4BPQE0Nj8BMDYzMjYzMhYXHgEXHgEXHgEVIzI2PQEwJjU0JisBMAYjIgYdASM0NjMyNjMyFhceAR0BMAYVFAYjIgYHHgEXHgEVFAYHDgEHDgEjIgYjIiYnLgEnLgE1MxUwFhUUFjsBMDYzMjY9ATAmNTQmKwE1qjZdfEfW1jReRSkpRV01NF5FKVY2XXxHRn1dNgGODgYDCAMIBAQSBAMGAwgEBFQBAwwQBgYOBg8VCgYDAwMDAwMMEAYGDAYGDgYGCgYGAwMDAeIMEgQFAxYFAwMBLBYOAw4DDRkKCAgEBQMDCAMGDQMDBQEDAwYDAw0GBg4GBgsDAw0GCAokBAUDFgUDAwEEBQMaAdZGfF01rNbWrClFXTU0XkUpKUVdNUZ9XTY2XXwXBQkBAwoJA1YJAwQKAwMICQNWCScJEwYaDAQLBQMOCQkQCR4JEwYaDAQBAwMGAwMOCQkQCQ4MCAUDAwEEBQMIDx8EBwUEGAoOCQMDBQcDAwcGBg4GBg0DAwoDAwUEAQMDAgMEGwsIBQMDAQQFAxYFAwMBHgAAAAAEAIAAgAOAA4AAAgAUACYALgAAARUnJwEHJw4BBzU+ATcnEScjETMnATQuAic1HgMVFAYHJz4BJxwBByc1HgECAFrwAso2WCJOLBswFbbWqsrKAqofOU0vQG5PLRcVQAoMagJoMDoDVrRahP02NlgbKAtYBxoRtv7g1gEAyv62M1xLNg5YDkVjfEQwWydCGTkeBw0GaF4YWwAAAAABASoAqgKqA1YABQAAATM3EScjASqs1NSsAoDW/VTWAAIA1gCqAxYDVgAFAAwAABMzNxEnIyUUBgcRHgHWqtbWqgJAPDAwPAKA1v1U1oA5WxgBWBhbAAAAAwCAAIoDgAN2ABUAHAAiAAABHgMVFA4CBzU+AzU0LgInExQGBxEeASUzNxEnIwJWQG5PLS1PbUEuTjkfHzlNL2o6MDA6/cCq1taqA3YORWN8RER7Y0YOWA03S1wzM1xLNg7+4jlbGAFYGFtH1v1U1gAAAAAEANYA1gMqAyoABQALABEAFwAAATMVIzUjEzUzFSM1ATUzFSMVHQEzFSM1AlbUVICAVNT+gNSAgNQDKtSA/lSA1FQBLNRUgKyAVNQABADWANYDKgMqAAUACwARABcAAAEzFSM1MwM1MxUjFQE1MxUjNRE1MxUjNQKqgNRUVNSA/qxU1NRUAqpU1P2s1FSAAdSA1FT+rFTUgAAAAAADAIAAqgOAA1YAFwAvAD8AAAE1NCYrASIGHQEUFjsBMjY9ASMVIzUzFSM1NCYrASIGHQEUFjsBMjY9ASMVIzUzFQEyFhURFAYjISImNRE0NjMDABgSgBIaGhKAEhhAVlbqGhKAEhgYEoASGkBWVgGUIjQzI/2sJDIyJAIqLBIYGBKsEhgYEiwWgBYsEhgYEqwSGBgSLBaAFgEsMyP+ACI0MyMCACI0AAAEAIAAgAOAA4AAAwANABkAKQAAATUzFScRMzI2PQE0JiMBESMVIzUjETM1MxUBMhYVERQGIyEiJjURNDYzAmpWlqwSGBgS/wBAVkBAVgGUIjQzI/2sJDIyJAHAgIDA/wAYEqwSGP8AAQBqav8AVlYCADMj/awiNDMjAlQiNAAAAAIAZABWA5wDqgALAFkAAAEyNjU0JiMiBhUUFiUXHgEPAQ4BLwEOAQ8BDgErASImLwEuAScHBiYvASY2PwEuATU8ATcnLgE/AT4BHwE+AT8BPgE7ATIWHwEeARc3NhYfARYGDwEeARUcAQIAPVlYPj1ZWAF8WgYCBFYEDghqECQUEAELCKwHCwIQEyQRagcOBVYEAgZaAQECWgYCBFYEDghqECQUEAELCKwHCwIQEyQRagcOBVYEAgZaAQEBalg+PVlYPj1ZbEYEEAiUBwQDKgwWCHAHCwoIcAcVDioDAwiUBxAFRgoVCwoVC0YEEAiUBwQDKgwWCHAHCwoIcAcVDioDAwiUBxAFRgoVCwoVAAAAAQCAAFgDgAOqADMAAAEyFhUUBiMiJjU8ATclDgEjIiY1NDYzMhYXJS4BNTQ2MzIWFRQGIyImJwUeARUUBgcFPgEDADNJSTMzSQL+0hIsGjRMSzUZLRIBLAEDSzU0TEs1GS0S/tQBAwICATAQLAFSSTMzS0szBw8GsBASSzU0TBERrgcPCDRMSzU0TBMRsAcPCAcPCLAPEQADAFYAVgOqA6oAAwAHABsAAAE1IxUTESMREzIeAhUUDgIjIi4CNTQ+AgIqVFRUKlicc0NDc5tZWJxzQ0NzmwKAVlb+qgEA/wACgENzm1lYnHNDQ3ObWVicc0MAAAQAVgBWA6oDqgADABcAKwAvAAABNTMVAzI+AjU0LgIjIg4CFRQeAhMyHgIVFA4CIyIuAjU0PgITETMRAdZUKkZ9XTY2XXxHRn1dNjZdfEdYnHNDQ3ObWVicc0NDc5svVAKAVlb+KjZdfEdGfV02Nl18R0Z9XTYDAENzm1lYnHNDQ3ObWVicc0P9gAEA/wAAAAEA1gDWAyoDKgALAAABBxcHJwcnNyc3FzcDKu7uPO7uPO7uPO7uAu7u7jzu7jzu7jzu7gABAFUAVQOrA6sAFAAAExQeAjMyPgI1NC4CIyIOAhVVQ3ScWFicdENDdJxYWJx0QwIAWJx0Q0N0nFhYnHRDQ3ScWAAAAAIAVQBVA6sDqwAUACgAAAEiDgIVFB4CMzI+AjU0LgIjESIuAjU0PgIzMh4CFRQOAgIAWJx0Q0N0nFhYnHRDQ3ScWEd8XTU1XXxHR3xdNTVdfAOrQ3ScWFicdENDdJxYWJx0Q/0ANV18R0d8XTU1XXxHR3xdNQAAAAMAVQBVA6sDqwAUACgANAAAASIOAhUUHgIzMj4CNTQuAiMRIi4CNTQ+AjMyHgIVFA4CExQGIyImNTQ2MzIWAgBYnHRDQ3ScWFicdENDdJxYR3xdNTVdfEdHfF01NV18OUs1NUtLNTVLA6tDdJxYWJx0Q0N0nFhYnHRD/QA1XXxHR3xdNTVdfEdHfF01AVU1S0s1NUtLAAAAAQAAAAEAAPEUzolfDzz1AAsEAAAAAADUNIllAAAAANQ0iWUAAAAAA6sD1gAAAAgAAgAAAAAAAAABAAAEAAAAAAAEAAAAAAADqwABAAAAAAAAAAAAAAAAAAAAJQQAAAAAAAAAAAAAAAAAAAAEAAFWBAAAVgQAAFYEAAEABAAAVgQAAFYEAAEABAAAagQAAKoEAAEABAABAAQAAKoEAACqBAAAqgQAAKoEAACqBAAAqgQAAIAEAAEqBAAA1gQAAIAEAADWBAAA1gQAAIAEAACABAAAZAQAAIAEAABWBAAAVgQAANYEAABVBAAAVQQAAFUAAAAAAAoAFAAeACwAVACWAKoA2AEgAS4BRAFaAXABhAIQAqgDpgQuBMYFxAYSBiIGPgZ4Bp4GxgcaB1oH4gguCFwIpAi+COAJHAloAAEAAAAlAMcABAAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAOAK4AAQAAAAAAAQALAAAAAQAAAAAAAgAHAIQAAQAAAAAAAwALAEIAAQAAAAAABAALAJkAAQAAAAAABQALACEAAQAAAAAABgALAGMAAQAAAAAACgAaALoAAwABBAkAAQAWAAsAAwABBAkAAgAOAIsAAwABBAkAAwAWAE0AAwABBAkABAAWAKQAAwABBAkABQAWACwAAwABBAkABgAWAG4AAwABBAkACgA0ANR2aWRlby1yZWFjdAB2AGkAZABlAG8ALQByAGUAYQBjAHRWZXJzaW9uIDEuMABWAGUAcgBzAGkAbwBuACAAMQAuADB2aWRlby1yZWFjdAB2AGkAZABlAG8ALQByAGUAYQBjAHR2aWRlby1yZWFjdAB2AGkAZABlAG8ALQByAGUAYQBjAHRSZWd1bGFyAFIAZQBnAHUAbABhAHJ2aWRlby1yZWFjdAB2AGkAZABlAG8ALQByAGUAYQBjAHRGb250IGdlbmVyYXRlZCBieSBJY29Nb29uLgBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIABiAHkAIABJAGMAbwBNAG8AbwBuAC4AAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format("truetype");
  font-weight: normal;
  font-style: normal;
}
.video-react-icon, .video-react .video-react-closed-caption, .video-react .video-react-bezel .video-react-bezel-icon, .video-react .video-react-volume-level, .video-react .video-react-mute-control,
.video-react .video-react-volume-menu-button, .video-react .video-react-play-control, .video-react .video-react-play-progress, .video-react .video-react-big-play-button {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "video-react" !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.video-react-icon-play-arrow:before, .video-react .video-react-bezel .video-react-bezel-icon-play:before, .video-react .video-react-play-control:before, .video-react .video-react-big-play-button:before {
  content: "";
}

.video-react-icon-play-circle-filled:before {
  content: "";
}

.video-react-icon-play-circle-outline:before {
  content: "";
}

.video-react-icon-pause:before, .video-react .video-react-bezel .video-react-bezel-icon-pause:before, .video-react .video-react-play-control.video-react-playing:before {
  content: "";
}

.video-react-icon-pause-circle-filled:before {
  content: "";
}

.video-react-icon-pause-circle-outline:before {
  content: "";
}

.video-react-icon-stop:before {
  content: "";
}

.video-react-icon-fast-rewind:before, .video-react .video-react-bezel .video-react-bezel-icon-fast-rewind:before {
  content: "";
}

.video-react-icon-fast-forward:before, .video-react .video-react-bezel .video-react-bezel-icon-fast-forward:before {
  content: "";
}

.video-react-icon-skip-previous:before {
  content: "";
}

.video-react-icon-skip-next:before {
  content: "";
}

.video-react-icon-replay-5:before, .video-react .video-react-bezel .video-react-bezel-icon-replay-5:before {
  content: "";
}

.video-react-icon-replay-10:before, .video-react .video-react-bezel .video-react-bezel-icon-replay-10:before {
  content: "";
}

.video-react-icon-replay-30:before, .video-react .video-react-bezel .video-react-bezel-icon-replay-30:before {
  content: "";
}

.video-react-icon-forward-5:before, .video-react .video-react-bezel .video-react-bezel-icon-forward-5:before {
  content: "";
}

.video-react-icon-forward-10:before, .video-react .video-react-bezel .video-react-bezel-icon-forward-10:before {
  content: "";
}

.video-react-icon-forward-30:before, .video-react .video-react-bezel .video-react-bezel-icon-forward-30:before {
  content: "";
}

.video-react-icon-volume-off:before, .video-react .video-react-bezel .video-react-bezel-icon-volume-off:before, .video-react .video-react-mute-control.video-react-vol-muted:before,
.video-react .video-react-volume-menu-button.video-react-vol-muted:before {
  content: "";
}

.video-react-icon-volume-mute:before, .video-react .video-react-mute-control.video-react-vol-0:before,
.video-react .video-react-volume-menu-button.video-react-vol-0:before {
  content: "";
}

.video-react-icon-volume-down:before, .video-react .video-react-bezel .video-react-bezel-icon-volume-down:before, .video-react .video-react-mute-control.video-react-vol-2:before,
.video-react .video-react-volume-menu-button.video-react-vol-2:before, .video-react .video-react-mute-control.video-react-vol-1:before,
.video-react .video-react-volume-menu-button.video-react-vol-1:before {
  content: "";
}

.video-react-icon-volume-up:before, .video-react .video-react-bezel .video-react-bezel-icon-volume-up:before, .video-react .video-react-mute-control:before,
.video-react .video-react-volume-menu-button:before {
  content: "";
}

.video-react-icon-fullscreen:before {
  content: "";
}

.video-react-icon-fullscreen-exit:before {
  content: "";
}

.video-react-icon-closed-caption:before, .video-react .video-react-closed-caption:before {
  content: "";
}

.video-react-icon-hd:before {
  content: "";
}

.video-react-icon-settings:before {
  content: "";
}

.video-react-icon-share:before {
  content: "";
}

.video-react-icon-info:before {
  content: "";
}

.video-react-icon-info-outline:before {
  content: "";
}

.video-react-icon-close:before {
  content: "";
}

.video-react-icon-circle:before, .video-react .video-react-volume-level:before, .video-react .video-react-play-progress:before {
  content: "";
}

.video-react-icon-circle-outline:before {
  content: "";
}

.video-react-icon-circle-inner-circle:before {
  content: "";
}

.video-react {
  display: block;
  vertical-align: top;
  box-sizing: border-box;
  color: #fff;
  background-color: #000;
  position: relative;
  font-size: 10px;
  line-height: 1;
  font-family: serif, Times, "Times New Roman";
  -webkit-user-select: none;
  user-select: none;
}
.video-react:-moz-full-screen {
  position: absolute;
}
.video-react:-webkit-full-screen {
  width: 100% !important;
  height: 100% !important;
}
.video-react *,
.video-react *:before,
.video-react *:after {
  box-sizing: inherit;
}
.video-react ul {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  list-style-position: outside;
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
  margin-bottom: 0;
}
.video-react.video-react-fluid, .video-react.video-react-16-9, .video-react.video-react-4-3 {
  width: 100%;
  max-width: 100%;
  height: 0;
}
.video-react.video-react-16-9 {
  padding-top: 56.25%;
}
.video-react.video-react-4-3 {
  padding-top: 75%;
}
.video-react.video-react-fill {
  width: 100%;
  height: 100%;
}
.video-react .video-react-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.video-react.video-react-fullscreen {
  width: 100% !important;
  height: 100% !important;
  padding-top: 0 !important;
}
.video-react.video-react-fullscreen.video-react-user-inactive {
  cursor: none;
}

body.video-react-full-window {
  padding: 0;
  margin: 0;
  height: 100%;
  overflow-y: auto;
}
body.video-react-full-window .video-react-fullscreen {
  position: fixed;
  overflow: hidden;
  z-index: 1000;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
}

.video-react .video-react-button {
  background: none;
  border: none;
  color: inherit;
  display: inline-block;
  cursor: pointer;
  overflow: visible;
  font-size: inherit;
  line-height: inherit;
  text-transform: none;
  text-decoration: none;
  transition: none;
  -webkit-appearance: none;
  appearance: none;
}

.video-react .video-react-loading-spinner {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -25px 0 0 -25px;
  opacity: 0.85;
  text-align: left;
  border: 6px solid rgba(43, 51, 63, 0.7);
  box-sizing: border-box;
  background-clip: padding-box;
  width: 50px;
  height: 50px;
  border-radius: 25px;
}
.video-react .video-react-loading-spinner:before, .video-react .video-react-loading-spinner:after {
  content: "";
  position: absolute;
  margin: -6px;
  box-sizing: inherit;
  width: inherit;
  height: inherit;
  border-radius: inherit;
  opacity: 1;
  border: inherit;
  border-color: transparent;
  border-top-color: white;
  animation: video-react-spinner-spin 1.1s cubic-bezier(0.6, 0.2, 0, 0.8) infinite, video-react-spinner-fade 1.1s linear infinite;
}

.video-react-seeking .video-react-loading-spinner,
.video-react-waiting .video-react-loading-spinner {
  display: block;
}

.video-react-seeking .video-react-loading-spinner:before,
.video-react-waiting .video-react-loading-spinner:before {
  border-top-color: white;
}

.video-react-seeking .video-react-loading-spinner:after,
.video-react-waiting .video-react-loading-spinner:after {
  border-top-color: white;
  animation-delay: 0.44s;
}

@keyframes video-react-spinner-spin {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes video-react-spinner-fade {
  0% {
    border-top-color: #73859f;
  }
  20% {
    border-top-color: #73859f;
  }
  35% {
    border-top-color: white;
  }
  60% {
    border-top-color: #73859f;
  }
  100% {
    border-top-color: #73859f;
  }
}
.video-react .video-react-big-play-button {
  font-size: 3em;
  line-height: 1.5em;
  height: 1.5em;
  width: 3em;
  display: block;
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 0;
  cursor: pointer;
  opacity: 1;
  border: 0.06666em solid #fff;
  background-color: #2B333F;
  background-color: rgba(43, 51, 63, 0.7);
  border-radius: 0.3em;
  transition: all 0.4s;
}
.video-react .video-react-big-play-button.video-react-big-play-button-center {
  top: 50%;
  left: 50%;
  margin-top: -0.75em;
  margin-left: -1.5em;
}
.video-react .video-react-big-play-button.big-play-button-hide {
  display: none;
}
.video-react:hover .video-react-big-play-button,
.video-react .video-react-big-play-button:focus {
  outline: 0;
  border-color: #fff;
  background-color: #73859f;
  background-color: rgba(115, 133, 159, 0.5);
  transition: all 0s;
}

.video-react-menu-button {
  cursor: pointer;
}
.video-react-menu-button.video-react-disabled {
  cursor: default;
}

.video-react-menu .video-react-menu-content {
  display: block;
  padding: 0;
  margin: 0;
  overflow: auto;
  font-family: serif, Times, "Times New Roman";
}
.video-react-menu li {
  list-style: none;
  margin: 0;
  padding: 0.2em 0;
  line-height: 1.4em;
  font-size: 1.2em;
  text-align: center;
}
.video-react-menu li:focus, .video-react-menu li:hover {
  outline: 0;
  background-color: #73859f;
  background-color: rgba(115, 133, 159, 0.5);
}
.video-react-menu li.video-react-selected, .video-react-menu li.video-react-selected:focus, .video-react-menu li.video-react-selected:hover {
  background-color: #fff;
  color: #2B333F;
}
.video-react-menu li.vjs-menu-title {
  text-align: center;
  text-transform: uppercase;
  font-size: 1em;
  line-height: 2em;
  padding: 0;
  margin: 0 0 0.3em 0;
  font-weight: bold;
  cursor: default;
}

.video-react-scrubbing .vjs-menu-button:hover .video-react-menu {
  display: none;
}

.video-react .video-react-menu-button-popup .video-react-menu {
  display: none;
  position: absolute;
  bottom: 0;
  width: 10em;
  left: -3em;
  height: 0em;
  margin-bottom: 1.5em;
  border-top-color: rgba(43, 51, 63, 0.7);
}
.video-react .video-react-menu-button-popup .video-react-menu .video-react-menu-content {
  background-color: #2B333F;
  background-color: rgba(43, 51, 63, 0.7);
  position: absolute;
  width: 100%;
  bottom: 1.5em;
  max-height: 15em;
}

.video-react-menu-button-popup .video-react-menu.video-react-lock-showing {
  display: block;
}

.video-react .video-react-menu-button-inline {
  transition: all 0.4s;
  overflow: hidden;
}
.video-react .video-react-menu-button-inline:before {
  width: 2.222222222em;
}
.video-react .video-react-menu-button-inline:hover, .video-react .video-react-menu-button-inline:focus, .video-react .video-react-menu-button-inline.video-react-slider-active {
  width: 12em;
}
.video-react .video-react-menu-button-inline:hover .video-react-menu, .video-react .video-react-menu-button-inline:focus .video-react-menu, .video-react .video-react-menu-button-inline.video-react-slider-active .video-react-menu {
  display: block;
  opacity: 1;
}
.video-react .video-react-menu-button-inline.video-react-slider-active {
  transition: none;
}
.video-react .video-react-menu-button-inline .video-react-menu {
  opacity: 0;
  height: 100%;
  width: auto;
  position: absolute;
  left: 4em;
  top: 0;
  padding: 0;
  margin: 0;
  transition: all 0.4s;
}
.video-react .video-react-menu-button-inline .video-react-menu-content {
  width: auto;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

.video-react-no-flex .video-react-menu-button-inline .video-react-menu {
  display: block;
  opacity: 1;
  position: relative;
  width: auto;
}
.video-react-no-flex .video-react-menu-button-inline:hover, .video-react-no-flex .video-react-menu-button-inline:focus, .video-react-no-flex .video-react-menu-button-inline.video-react-slider-active {
  width: auto;
}

.video-react .video-react-poster {
  display: inline-block;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
  background-color: #000000;
  cursor: pointer;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
}
.video-react .video-react-poster img {
  display: block;
  vertical-align: middle;
  margin: 0 auto;
  max-height: 100%;
  padding: 0;
  width: 100%;
}

.video-react .video-react-slider {
  outline: 0;
  position: relative;
  cursor: pointer;
  padding: 0;
  margin: 0 0.45em 0 0.45em;
  background-color: #73859f;
  background-color: rgba(115, 133, 159, 0.5);
}
.video-react .video-react-slider:focus {
  box-shadow: 0 0 1em #fff;
}

.video-react .video-react-control {
  outline: none;
  position: relative;
  text-align: center;
  margin: 0;
  padding: 0;
  height: 100%;
  width: 4em;
  flex: none;
}
.video-react .video-react-control:before {
  font-size: 1.8em;
  line-height: 1.67;
}
.video-react .video-react-control:focus:before, .video-react .video-react-control:hover:before, .video-react .video-react-control:focus {
  text-shadow: 0em 0em 1em #fff, 0em 0em 0.5em #fff;
}

.video-react .video-react-control-text {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.video-react-no-flex .video-react-control {
  display: table-cell;
  vertical-align: middle;
}

.video-react .video-react-control-bar {
  display: none;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3em;
  background-color: #2B333F;
  background-color: rgba(43, 51, 63, 0.7);
}

.video-react-has-started .video-react-control-bar {
  display: flex;
  visibility: visible;
  opacity: 1;
  transition: visibility 0.1s, opacity 0.1s;
}

.video-react-has-started.video-react-user-inactive.video-react-playing .video-react-control-bar.video-react-control-bar-auto-hide {
  visibility: visible;
  opacity: 0;
  transition: visibility 1s, opacity 1s;
}

.video-react-controls-disabled .video-react-control-bar,
.video-react-using-native-controls .video-react-control-bar,
.video-react-error .video-react-control-bar {
  display: none !important;
}

.video-react-audio.video-react-has-started.video-react-user-inactive.video-react-playing .video-react-control-bar {
  opacity: 1;
  visibility: visible;
}

.video-react-has-started.video-react-no-flex .video-react-control-bar {
  display: table;
}

.video-react .video-react-progress-control {
  flex: auto;
  display: flex;
  align-items: center;
  min-width: 4em;
}

.video-react-live .video-react-progress-control {
  display: none;
}

.video-react .video-react-progress-holder {
  flex: auto;
  transition: all 0.2s;
  height: 0.3em;
}

.video-react .video-react-progress-control:hover .video-react-progress-holder {
  font-size: 1.6666666667em;
}

/* If we let the font size grow as much as everything else, the current time tooltip ends up
 ginormous. If you'd like to enable the current time tooltip all the time, this should be disabled
 to avoid a weird hitch when you roll off the hover. */
.video-react .video-react-progress-control:hover .video-react-time-tooltip,
.video-react .video-react-progress-control:hover .video-react-mouse-display:after,
.video-react .video-react-progress-control:hover .video-react-play-progress:after {
  visibility: visible;
  font-size: 0.6em;
}

.video-react .video-react-progress-holder .video-react-play-progress,
.video-react .video-react-progress-holder .video-react-load-progress,
.video-react .video-react-progress-holder .video-react-tooltip-progress-bar,
.video-react .video-react-progress-holder .video-react-load-progress div {
  position: absolute;
  display: block;
  height: 0.3em;
  margin: 0;
  padding: 0;
  width: 0;
  left: 0;
  top: 0;
}

.video-react .video-react-play-progress {
  background-color: #fff;
}
.video-react .video-react-play-progress:before {
  position: absolute;
  top: -0.3333333333em;
  right: -0.5em;
  font-size: 0.9em;
}

.video-react .video-react-time-tooltip,
.video-react .video-react-mouse-display:after,
.video-react .video-react-play-progress:after {
  visibility: hidden;
  pointer-events: none;
  position: absolute;
  top: -3.4em;
  right: -1.9em;
  font-size: 0.9em;
  color: #000;
  content: attr(data-current-time);
  padding: 6px 8px 8px 8px;
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 0.3em;
}

.video-react .video-react-time-tooltip,
.video-react .video-react-play-progress:before,
.video-react .video-react-play-progress:after {
  z-index: 1;
}

.video-react .video-react-progress-control .video-react-keep-tooltips-inside:after {
  display: none;
}

.video-react .video-react-load-progress {
  background: #bfc7d3;
  background: rgba(115, 133, 159, 0.5);
}

.video-react .video-react-load-progress div {
  background: white;
  background: rgba(115, 133, 159, 0.75);
}

.video-react.video-react-no-flex .video-react-progress-control {
  width: auto;
}

.video-react .video-react-time-tooltip {
  display: inline-block;
  height: 2.4em;
  position: relative;
  float: right;
  right: -1.9em;
}

.video-react .video-react-tooltip-progress-bar {
  visibility: hidden;
}

.video-react .video-react-progress-control .video-react-mouse-display {
  display: none;
  position: absolute;
  width: 1px;
  height: 100%;
  background-color: #000;
  z-index: 1;
}

.video-react-no-flex .video-react-progress-control .video-react-mouse-display {
  z-index: 0;
}

.video-react .video-react-progress-control:hover .video-react-mouse-display {
  display: block;
}

.video-react.video-react-user-inactive .video-react-progress-control .video-react-mouse-display,
.video-react.video-react-user-inactive .video-react-progress-control .video-react-mouse-display:after {
  visibility: hidden;
  opacity: 0;
  transition: visibility 1s, opacity 1s;
}

.video-react.video-react-user-inactive.video-react-no-flex .video-react-progress-control .video-react-mouse-display,
.video-react.video-react-user-inactive.video-react-no-flex .video-react-progress-control .video-react-mouse-display:after {
  display: none;
}

.video-react .video-react-mouse-display .video-react-time-tooltip,
.video-react .video-react-progress-control .video-react-mouse-display:after {
  color: #fff;
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.8);
}

.video-react .video-react-play-control {
  cursor: pointer;
  flex: none;
}
.video-react .video-react-fullscreen-control {
  cursor: pointer;
  flex: none;
}

.video-react.video-react-fullscreen {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 9999;
}

.video-react .video-react-time-control {
  flex: none;
  font-size: 1em;
  line-height: 3em;
  min-width: 2em;
  width: auto;
  padding-left: 1em;
  padding-right: 1em;
}
.video-react .video-react-time-divider {
  line-height: 3em;
  min-width: initial;
  padding: 0;
}

.video-react .video-react-mute-control,
.video-react .video-react-volume-menu-button {
  cursor: pointer;
  flex: none;
}
.video-react .video-react-volume-control {
  width: 5em;
  flex: none;
  display: flex;
  align-items: center;
}
.video-react .video-react-volume-bar {
  margin: 1.35em 0.45em;
}
.video-react .video-react-volume-bar.video-react-slider-horizontal {
  width: 5em;
  height: 0.3em;
}
.video-react .video-react-volume-bar.video-react-slider-horizontal .video-react-volume-level {
  width: 100%;
}
.video-react .video-react-volume-bar.video-react-slider-vertical {
  width: 0.3em;
  height: 5em;
  margin: 1.35em auto;
}
.video-react .video-react-volume-bar.video-react-slider-vertical .video-react-volume-level {
  height: 100%;
}
.video-react .video-react-volume-level {
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: #fff;
}
.video-react .video-react-volume-level:before {
  position: absolute;
  font-size: 0.9em;
}
.video-react .video-react-slider-vertical .video-react-volume-level {
  width: 0.3em;
}
.video-react .video-react-slider-vertical .video-react-volume-level:before {
  top: -0.5em;
  left: -0.3em;
}
.video-react .video-react-slider-horizontal .video-react-volume-level {
  height: 0.3em;
}
.video-react .video-react-slider-horizontal .video-react-volume-level:before {
  top: -0.3em;
  right: -0.5em;
}
.video-react .video-react-menu-button-popup.video-react-volume-menu-button .video-react-menu {
  display: block;
  width: 0;
  height: 0;
  border-top-color: transparent;
}
.video-react .video-react-menu-button-popup.video-react-volume-menu-button-vertical .video-react-menu {
  left: 0.5em;
  height: 8em;
}
.video-react .video-react-menu-button-popup.video-react-volume-menu-button-horizontal .video-react-menu {
  left: -2em;
}
.video-react .video-react-menu-button-popup.video-react-volume-menu-button .video-react-menu-content {
  height: 0;
  width: 0;
  overflow-x: hidden;
  overflow-y: hidden;
}
.video-react .video-react-volume-menu-button-vertical:hover .video-react-menu-content,
.video-react .video-react-volume-menu-button-vertical:focus .video-react-menu-content,
.video-react .video-react-volume-menu-button-vertical.video-react-slider-active .video-react-menu-content,
.video-react .video-react-volume-menu-button-vertical .video-react-lock-showing .video-react-menu-content {
  height: 8em;
  width: 2.9em;
}
.video-react .video-react-volume-menu-button-horizontal:hover .video-react-menu-content,
.video-react .video-react-volume-menu-button-horizontal:focus .video-react-menu-content,
.video-react .video-react-volume-menu-button-horizontal .video-react-slider-active .video-react-menu-content,
.video-react .video-react-volume-menu-button-horizontal .video-react-lock-showing .video-react-menu-content {
  height: 2.9em;
  width: 8em;
}
.video-react .video-react-volume-menu-button.video-react-menu-button-inline .video-react-menu-content {
  background-color: transparent !important;
}

.video-react .video-react-playback-rate .video-react-playback-rate-value {
  line-height: 3em;
  text-align: center;
}
.video-react .video-react-playback-rate .video-react-menu {
  width: 4em;
  left: 0em;
}

.video-react .video-react-bezel {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 52px;
  height: 52px;
  z-index: 17;
  margin-left: -26px;
  margin-top: -26px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 26px;
}
.video-react .video-react-bezel.video-react-bezel-animation {
  animation: video-react-bezel-fadeout 0.5s linear 1 normal forwards;
  pointer-events: none;
}
.video-react .video-react-bezel.video-react-bezel-animation-alt {
  animation: video-react-bezel-fadeout-alt 0.5s linear 1 normal forwards;
  pointer-events: none;
}
.video-react .video-react-bezel .video-react-bezel-icon {
  width: 36px;
  height: 36px;
  margin: 8px;
  font-size: 26px;
  line-height: 36px;
  text-align: center;
}
@keyframes video-react-bezel-fadeout {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: scale(2);
  }
}
@keyframes video-react-bezel-fadeout-alt {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: scale(2);
  }
}
.video-react .video-react-closed-caption {
  cursor: pointer;
  flex: none;
}
.video-react video::-webkit-media-text-track-container {
  transform: translateY(-30px);
}.user-sess-page {
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
  margin-top: 10px;
}

.user-sess-page img {
  border: 1px solid var(--brand-secondary);
  padding: 2px 10px;
  cursor: pointer;
}

.user-sess-page-rev {
  transform: rotate(-180deg);
}

.user-sess-page-dis {
  pointer-events: none;
  opacity: 0.5;
}

.replay-col,
.select-replay-col,
.rating-col {
  /* removed custom centering to restore default table flow */
}

.replay-col img,
.select-replay-col svg {
  margin: 0;
  flex-shrink: 0;
  display: block;
}

.replay-cell-h,
.select-replay-cell-h,
.replay-cell,
.select-replay-cell {
  display: flex;
  align-items: center;
  justify-content: center;
}

.replay-cell img {
  display: block;
}

.select-replay-cell svg {
  display: block;
}

.select-all-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  -webkit-user-select: none;
          user-select: none;
}

.select-all-wrapper input {
  cursor: pointer;
}
.details-session-logs-header {
  position: relative;
  width: 95%;
  width: calc(100% - 20px);
  border: 1px solid var(--border-default);
  padding: 10px;
  margin: 10px 0;
  cursor: pointer;
  background: var(--surface-sunken);
  color: var(--text-primary);
}

.details-session-logs-header-flex {
  width: 90%;
  display: flex;
}

.details-session-logs-header-val {
  width: 40%;
}

.details-session-logs-header-mem {
  width: 30%;
}

.details-session-logs-header img {
  /* The asset is a white arrow; invert it to dark for legibility against the
     light surface-sunken bg. In dark mode, surface-sunken is dark slate, so the
     original white arrow already contrasts — skip the invert. */
  filter: invert(100%);
  width: 20px;
  position: absolute;
  right: 10px;
}

.dark .details-session-logs-header img {
  filter: none;
}

.student-transactions img {
  top: 11px;
}

.similar-teachers-modal {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.similar-teachers-subtitle {
  color: var(--text-secondary);
  font-size: 14px;
}

.similar-teachers-fixed-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 8px 16px;
  padding: 12px;
  background: var(--surface-sunken);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  word-break: break-word;
}

.similar-teachers-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 220px));
  gap: 16px;
}

.similar-teachers-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  color: var(--text-primary);
}

.similar-teachers-field select,
.similar-teachers-field input {
  min-height: 40px;
  border: 1px solid var(--input-border);
  border-radius: 6px;
  padding: 8px 10px;
  background: var(--input-bg);
  color: var(--input-text);
}

.similar-teachers-checkbox-row {
  display: flex;
  align-items: center;
}

.similar-teachers-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.similar-teachers-error {
  color: var(--state-error-text);
  background: var(--state-error-bg);
  border: 1px solid var(--state-error);
  border-radius: 6px;
  padding: 10px 12px;
}

.similar-teachers-empty {
  color: var(--text-muted);
  font-size: 14px;
}

.similar-teachers-table-wrap {
  overflow: auto;
  border: 1px solid var(--border-default);
  border-radius: 8px;
}

.similar-teachers-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 980px;
}

.similar-teachers-table th,
.similar-teachers-table td {
  border-bottom: 1px solid var(--border-default);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
}

.similar-teachers-table th {
  background: var(--surface-sunken);
  font-weight: 600;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

.similar-teachers-thumb {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 9999px;
  border: 1px solid var(--border-default);
}

.similar-teachers-link {
  color: var(--state-info);
  text-decoration: none;
  font-weight: 600;
}

.similar-teachers-link:hover {
  text-decoration: underline;
}

/* PROD-7828 session "Change history": stacked cards, readable on a phone. */
.change-history-panel {
  margin: 16px 0;
}

.change-history-list {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.change-history-item {
  border: 1px solid var(--border-default);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--surface-sunken);
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

.change-history-meta,
.change-history-muted {
  color: var(--text-muted);
  font-size: 13px;
}

.change-history-title {
  font-weight: 600;
  margin: 2px 0;
}

.change-history-changes {
  margin: 4px 0;
  padding-left: 18px;
}

.change-history-note {
  margin-top: 4px;
}

.change-history-request {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--border-default);
  font-size: 14px;
}

.change-history-error {
  color: var(--state-error);
}

/* PROD-7828 resolve step: who asked / note match markers and the resolve dialog. */
.who-asked-marker {
  display: inline-block;
  border-radius: 10px;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 600;
  line-height: 20px;
}

.who-asked-marker-disagreement {
  color: var(--state-warning-text);
  background: var(--state-warning-bg);
  border: 1px solid var(--state-warning);
}

.who-asked-marker-resolved {
  color: var(--state-success-text);
  background: var(--state-success-bg);
  border: 1px solid var(--state-success);
}

.resolve-dialog-group {
  border: 0;
  padding: 0;
  margin: 8px 0;
}

.resolve-dialog-option {
  display: block;
  margin: 4px 0;
  overflow-wrap: anywhere;
}

.resolve-dialog-muted {
  color: var(--text-muted);
  font-size: 13px;
}

.resolve-dialog-error {
  color: var(--state-error);
}
/* PROD-7828 R6 — Penalties tab additions to teacher_payments.css. Theme tokens only (no hex). */

.tp-pe-filter-teacher {
  width: 220px;
  max-width: 100%;
}

.tp-pe-more {
  display: flex;
  justify-content: center;
  margin-top: 12px;
}

.tp-pe-fp-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-bottom: 6px;
}

.tp-pe-days,
.tp-pe-issues {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
}

.tp-pe-days li,
.tp-pe-issues li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 12px;
  padding: 4px 0;
  border-top: 1px solid var(--border-default);
}

.tp-pe-choice {
  display: block;
  margin: 6px 0;
  color: var(--text-primary);
}

.tp-pe-pill {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.tp-pe-pill:focus-visible {
  outline: 2px solid var(--input-focus-border);
  outline-offset: 2px;
}

/* Phones: the filter row stacks, and the teacher picker takes the full width. */
@media (max-width: 640px) {
  .tp-pe-filter-teacher,
  .tp-pe .tp-frow .tp-select {
    width: 100%;
  }

  .tp-pe .tp-frow-right {
    margin-left: 0;
    width: 100%;
  }

  .tp-pe .tp-bulkbar {
    flex-wrap: wrap;
  }
}
/* PROD-7828 R6 — the session page's teacher-payment penalties strip and modal. Theme tokens only. */

.tp-sp {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 12px 0;
  padding: 10px 12px;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  color: var(--text-primary);
}

.tp-sp-title {
  font-weight: 600;
}

.tp-sp-ctx {
  margin-bottom: 10px;
  color: var(--text-muted);
  font-size: 13px;
}

.tp-sp-add {
  margin: 10px 0 14px;
}

.tp-sp-sub {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}

/* Phones: the strip stacks, and its button takes the full width. */
@media (max-width: 640px) {
  .tp-sp {
    flex-direction: column;
    align-items: stretch;
  }

  .tp-sp .tp-btn-out,
  .tp-sp-add .tp-btn-out {
    width: 100%;
  }
}
.sfu-page {
  min-height: 100vh;
  background: #f6f7f4;
  color: #202422;
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    sans-serif;
}

.sfu-topbar {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px clamp(16px, 4vw, 48px);
  border-bottom: 1px solid #d8ded7;
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
}

.sfu-topbar h1,
.sfu-panel h2,
.sfu-page p {
  margin: 0;
}

.sfu-topbar h1 {
  font-size: 26px;
  font-weight: 750;
  letter-spacing: 0;
}

.sfu-main {
  display: grid;
  gap: 18px;
  padding: 22px clamp(16px, 4vw, 48px) 44px;
}

.sfu-eyebrow {
  color: #626c66;
  font-size: 11px;
  font-weight: 760;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sfu-muted {
  color: #626c66;
  font-size: 13px;
}

.sfu-icon-button {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid #d8ded7;
  border-radius: 8px;
  background: #fff;
  color: #202422;
  cursor: pointer;
}

.sfu-status-band {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.sfu-metric-tile,
.sfu-panel {
  border: 1px solid #d8ded7;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 38px rgba(38, 48, 42, 0.08);
}

.sfu-metric-tile {
  min-height: 92px;
  padding: 16px;
  display: grid;
  align-content: space-between;
  gap: 10px;
}

.sfu-metric-tile span {
  color: #626c66;
  font-size: 12px;
  font-weight: 650;
}

.sfu-metric-tile strong {
  font-size: 24px;
  font-weight: 780;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.sfu-warning,
.sfu-error {
  padding: 14px 16px;
  border: 1px solid #e2b36f;
  border-radius: 8px;
  background: #fff8ed;
  color: #7a4d12;
}

.sfu-error {
  margin: 24px;
  border-color: #e3aca6;
  background: #fff4f1;
  color: #7a2824;
}

.sfu-toolbar {
  display: grid;
  grid-template-columns: 0.85fr 1.3fr 1fr 1.1fr;
  gap: 12px;
  align-items: end;
  border: 1px solid #d8ded7;
  border-radius: 8px;
  background: #fbfcfb;
  padding: 14px;
}

.sfu-toolbar label {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.sfu-toolbar label span {
  color: #626c66;
  font-size: 12px;
  font-weight: 650;
}

.sfu-toolbar select,
.sfu-toolbar input {
  width: 100%;
  min-height: 38px;
  border: 1px solid #cbd3cc;
  border-radius: 8px;
  background: #fff;
  color: #202422;
  padding: 7px 10px;
}

.sfu-grid {
  display: grid;
  gap: 18px;
}

.sfu-grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sfu-panel {
  min-width: 0;
  padding: 16px;
}

.sfu-panel h2 {
  font-size: 18px;
  font-weight: 720;
  letter-spacing: 0;
}

.sfu-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 16px;
  margin-bottom: 14px;
}

.sfu-panel canvas {
  display: block;
  width: 100%;
  max-width: 100%;
  border-radius: 6px;
  background: linear-gradient(180deg, #fbfcfd, #f5f8f5);
}

.sfu-bar-list,
.sfu-participant-list,
.sfu-media-grid,
.sfu-media-list,
.sfu-reconnect-grid,
.sfu-reconnect-list,
.sfu-chip-grid,
.sfu-signal-grid {
  display: grid;
  gap: 10px;
}

.sfu-bar-row {
  display: grid;
  gap: 7px;
}

.sfu-bar-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #626c66;
  font-size: 12px;
}

.sfu-bar-label {
  color: #202422;
  font-weight: 640;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sfu-bar-track {
  height: 10px;
  overflow: hidden;
  border-radius: 4px;
  background: #e7ece8;
}

.sfu-bar-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2166a5, #2f7d54);
}

.sfu-participant {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 11px;
  border: 1px solid #d8ded7;
  border-radius: 8px;
  background: #fbfcfb;
}

.sfu-participant-link {
  color: inherit;
  text-decoration: none;
}

.sfu-participant-link:hover {
  border-color: #9eaaa2;
  background: #f5f8f5;
}

.sfu-network-list {
  display: grid;
  gap: 12px;
}

.sfu-network-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid #d8ded7;
  border-radius: 8px;
  background: #fbfcfb;
}

.sfu-network-card-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
}

.sfu-network-person {
  color: #202422;
  font-weight: 760;
  text-decoration: none;
}

.sfu-network-person:hover {
  color: #2166a5;
  text-decoration: underline;
}

.sfu-health {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  white-space: nowrap;
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 12px;
  font-weight: 760;
}

.sfu-health.ok {
  background: #e8f4ed;
  color: #2f7d54;
}

.sfu-health.warn {
  background: #fff4df;
  color: #9b6417;
}

.sfu-health.bad {
  background: #fff0ed;
  color: #a73b35;
}

.sfu-network-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.sfu-network-metrics div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #edf0ee;
}

.sfu-network-metrics span {
  color: #626c66;
  font-size: 12px;
  font-weight: 650;
}

.sfu-help-label {
  width: -webkit-fit-content;
  width: fit-content;
  cursor: help;
  border-bottom: 1px dotted #9eaaa2;
}

.sfu-network-metrics strong {
  color: #202422;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.sfu-media-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 12px;
}

.sfu-media-card,
.sfu-media-event {
  padding: 12px;
  border: 1px solid #d8ded7;
  border-radius: 8px;
  background: #fbfcfb;
}

.sfu-media-card {
  display: grid;
  gap: 10px;
}

.sfu-media-card-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.sfu-media-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.sfu-media-stats span {
  display: grid;
  gap: 3px;
  padding: 8px;
  border: 1px solid #edf0ee;
  border-radius: 8px;
  background: #fff;
  color: #626c66;
  font-size: 12px;
  font-weight: 650;
}

.sfu-media-stats strong {
  color: #202422;
  font-size: 18px;
}

.sfu-media-event {
  display: grid;
  grid-template-columns: minmax(150px, 0.8fr) auto minmax(0, 2fr);
  align-items: start;
  gap: 12px;
}

.sfu-event-time-label {
  display: block;
  color: #626c66;
  font-size: 11px;
  font-weight: 760;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sfu-avatar {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  color: white;
  font-weight: 760;
  background: #2166a5;
}

.sfu-avatar.teacher {
  background: #6850a8;
}

.sfu-participant-main {
  min-width: 0;
}

.sfu-participant-name {
  display: flex;
  gap: 8px;
  align-items: center;
  font-weight: 700;
}

.sfu-uuid {
  color: #626c66;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sfu-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 7px;
  border-radius: 999px;
  background: #eef3f7;
  color: #626c66;
  font-size: 12px;
  font-weight: 680;
}

.sfu-chip-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sfu-chip,
.sfu-signal {
  display: grid;
  gap: 4px;
  padding: 12px;
  border-radius: 8px;
  background: #f8faf8;
  border: 1px solid #d8ded7;
}

.sfu-chip strong,
.sfu-signal strong {
  font-size: 18px;
}

.sfu-chip span,
.sfu-signal span {
  color: #626c66;
  font-size: 12px;
  overflow-wrap: anywhere;
}

.sfu-signal-note {
  line-height: 1.35;
}

.sfu-signal-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sfu-reconnect-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 12px;
}

.sfu-reconnect-card,
.sfu-reconnect-event {
  padding: 12px;
  border: 1px solid #d8ded7;
  border-radius: 8px;
  background: #fbfcfb;
}

.sfu-reconnect-card {
  display: grid;
  gap: 10px;
}

.sfu-reconnect-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.sfu-reconnect-stats span {
  display: grid;
  gap: 3px;
  padding: 8px;
  border: 1px solid #edf0ee;
  border-radius: 8px;
  background: #fff;
  color: #626c66;
  font-size: 12px;
  font-weight: 650;
}

.sfu-reconnect-stats strong {
  color: #202422;
  font-size: 18px;
}

.sfu-reconnect-event {
  display: grid;
  grid-template-columns: minmax(150px, 0.8fr) auto minmax(0, 2fr);
  align-items: start;
  gap: 12px;
}

.sfu-table-wrap {
  max-height: 460px;
  overflow: auto;
  border: 1px solid #d8ded7;
  border-radius: 8px;
}

.sfu-table-wrap table {
  width: 100%;
  min-width: 900px;
  border-collapse: collapse;
  background: #fff;
}

.sfu-table-wrap th,
.sfu-table-wrap td {
  padding: 10px 12px;
  border-bottom: 1px solid #edf0ee;
  text-align: left;
  vertical-align: top;
  font-size: 13px;
}

.sfu-table-wrap th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f8faf8;
  color: #626c66;
  font-size: 12px;
  font-weight: 760;
}

.sfu-table-wrap td {
  max-width: 340px;
  overflow-wrap: anywhere;
}

@media (max-width: 1080px) {
  .sfu-status-band,
  .sfu-toolbar,
  .sfu-grid.two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sfu-signal-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sfu-network-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sfu-media-grid,
  .sfu-media-event,
  .sfu-reconnect-grid,
  .sfu-reconnect-event {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .sfu-status-band,
  .sfu-toolbar,
  .sfu-grid.two,
  .sfu-chip-grid,
  .sfu-signal-grid {
    grid-template-columns: 1fr;
  }

  .sfu-network-card-head {
    display: grid;
  }

  .sfu-network-metrics {
    grid-template-columns: 1fr;
  }

  .sfu-media-card-head {
    display: grid;
  }

  .sfu-topbar h1 {
    font-size: 22px;
  }

  .sfu-metric-tile strong {
    font-size: 21px;
  }
}
.cr-cont {
  width: 100%;
  display: flex;
  justify-content: space-evenly;
}

.cr-player {
  width: 70%;
}

.cr-logs {
  width: 28%;
}

.cr-logs img {
  cursor: pointer;
}
.rec-block {
  display: flex;
}

.rec-teacher {
  width: 33%;
}

.rec-session {
  width: 33%;
}
.rec-teacher-types {
  margin-top: 5px;
}

.rec-teacher-image {
  font-size: 14px;
}

.rec-teacher-image img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.consult-notes textarea {
  width: 100%;
  height: 200px;
}

.consult-notes button {
  /* display: block; */
}

.consult-attch {
  display: flex;
  align-items: center;
}

.consult-attch img {
  width: 20px;
  height: 20px;
  margin-left: 5px;
  border: 1px solid;
  border-radius: 50%;
  border-color: var(--state-error);
  cursor: pointer;
}
.rv2-page {
  color: var(--text-primary);
}

.rv2-card {
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  box-shadow: var(--shadow-card);
  padding: 12px 16px;
  margin-bottom: 16px;
}

.rv2-card h3 {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-label);
}

.rv2-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px 16px;
}

.rv2-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: var(--text-secondary);
}

.rv2-field input,
.rv2-field select {
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--input-text);
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 14px;
}

.rv2-field input:focus,
.rv2-field select:focus {
  outline: none;
  border-color: var(--input-focus-border);
  background: var(--input-focus-bg);
}

.rv2-check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
}

.rv2-hint {
  font-size: 12px;
  color: var(--text-muted);
}

.rv2-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 12px 0;
}

.rv2-goal-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 6px;
}

.rv2-badge {
  display: inline-block;
  border-radius: 10px;
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 600;
  margin: 1px 4px 1px 0;
  white-space: nowrap;
}

.rv2-badge-pass {
  background: var(--state-success-bg);
  color: var(--state-success-text);
}

.rv2-badge-fail {
  background: var(--state-error-bg);
  color: var(--state-error-text);
}

.rv2-badge-warn {
  background: var(--state-warning-bg);
  color: var(--state-warning-text);
}

.rv2-badge-info {
  background: var(--state-info-bg);
  color: var(--state-info-text);
}

.rv2-badge-neutral {
  background: var(--surface-sunken);
  color: var(--text-secondary);
}

.rv2-error {
  background: var(--state-error-bg-subtle);
  border: 1px solid var(--state-error);
  color: var(--state-error-text);
  border-radius: 6px;
  padding: 8px 12px;
  margin-bottom: 12px;
}

.rv2-empty {
  color: var(--text-muted);
  font-style: italic;
  padding: 8px 0;
}

.rv2-kv {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 6px 16px;
  font-size: 13px;
}

.rv2-kv dt {
  color: var(--text-muted);
  font-size: 12px;
}

.rv2-kv dd {
  margin: 0;
  color: var(--text-primary);
  word-break: break-word;
}

.rv2-top-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}

.rv2-top-card {
  border: 1px solid var(--border-default);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--surface-sunken);
}

.rv2-top-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.rv2-top-card-head img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.rv2-top-card-reason {
  font-size: 13px;
  color: var(--text-secondary);
}

.rv2-timings {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  color: var(--text-muted);
}

.rv2-table-wrap {
  overflow-x: auto;
}

.rv2-page .table-st {
  border-collapse: collapse;
  width: 100%;
  font-size: 13px;
}

.rv2-page .table-st th {
  background: var(--surface-sunken);
  color: var(--text-label);
  white-space: nowrap;
  cursor: help;
}

.rv2-page .table-st td {
  vertical-align: top;
}

.rv2-row-shown {
  background: var(--surface-row-highlight);
}

.rv2-row-failed {
  background: var(--state-error-bg-subtle);
}

.rv2-page .table-st td.rv2-num {
  text-align: right;
  white-space: nowrap;
}

.rv2-field-error {
  font-size: 12px;
  color: var(--state-error-text);
}

.rv2-sub {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
}
/* Request-a-session calendar — brand-orange accents, theme-aware (scoped to .rs-datepicker). */

.rs-datepicker.react-datepicker {
  font-family: inherit;
  background: var(--surface-card);
  color: var(--text-primary);
  /* Rendered inline inside our own bordered popover — drop react-datepicker's own frame. */
  border: none;
}

.rs-datepicker .react-datepicker__header {
  background: var(--surface-card);
  /* No underline under the weekday names — the calendar sits inside our own panel (Figma). */
  border-bottom: none;
}

.rs-datepicker .react-datepicker__current-month,
.rs-datepicker .react-datepicker-time__header,
.rs-datepicker .react-datepicker__day-name,
.rs-datepicker .react-datepicker__day,
.rs-datepicker .react-datepicker__time-name {
  color: var(--text-primary);
}

.rs-datepicker .react-datepicker__day--outside-month,
.rs-datepicker .react-datepicker__day--disabled {
  color: var(--text-muted);
}

.rs-datepicker .react-datepicker__day:not(.react-datepicker__day--disabled):hover,
.rs-datepicker .react-datepicker__time-list-item:hover {
  background: var(--surface-sunken) !important;
  color: var(--text-primary);
}

/* Selected day + selected time → brand orange. */
.rs-datepicker .react-datepicker__day--selected,
.rs-datepicker .react-datepicker__day--keyboard-selected,
.rs-datepicker
  .react-datepicker__time-container
  .react-datepicker__time
  .react-datepicker__time-box
  ul.react-datepicker__time-list
  li.react-datepicker__time-list-item--selected {
  background: var(--brand-primary) !important;
  color: var(--text-inverse) !important;
}

/* Today (when not selected) → soft orange pill. */
.rs-datepicker
  .react-datepicker__day--today:not(.react-datepicker__day--selected):not(
    .react-datepicker__day--keyboard-selected
  ) {
  background: var(--brand-primary-subtle-bg);
  color: var(--brand-primary-subtle-text);
  font-weight: 600;
}

/* Time column surfaces. */
.rs-datepicker .react-datepicker__time-container,
.rs-datepicker .react-datepicker__time,
.rs-datepicker .react-datepicker__time-box,
.rs-datepicker .react-datepicker__time-list {
  background: var(--surface-card);
  color: var(--text-primary);
  border-left-color: var(--border-default);
}

.rs-datepicker .react-datepicker__time-container {
  border-left-color: var(--border-default);
}

/* Popper must clear the modal (CustomModal z-index is very high). */
.rs-datepicker-popper {
  z-index: 1000000000;
}

/* Exact-time slot: turn the label orange on hover (!important beats the inline label colour). */
.rs-time-slot:hover .rs-time-slot-label {
  color: var(--brand-primary) !important;
}

/* Figma parity (time-first-booking): roomy CIRCULAR day cells, bold weekday headers, left-aligned
   bold month title, and BOTH nav arrows on the right so they don't sit behind the month title.
   border-radius:50% on every day makes the selected day + today pill render as circles. */
.rs-datepicker .react-datepicker__day,
.rs-datepicker .react-datepicker__day-name {
  width: 2.2rem;
  line-height: 2.2rem;
  margin: 0.18rem;
  font-size: 14px;
}

.rs-datepicker .react-datepicker__day {
  border-radius: 50%;
  font-weight: 500;
}

.rs-datepicker .react-datepicker__day-name {
  font-weight: 700;
  font-size: 15px;
  color: var(--text-primary);
}

/* Month title + nav arrows are supplied by renderCustomHeader (one flex row), so the default
   __current-month / __navigation elements aren't rendered — no CSS needed for them here. */

/* Clickable teacher name in the matching-teacher-list popup — subtle link affordance. */
.rs-teacher-link {
  text-decoration: none;
  cursor: pointer;
}
.rs-teacher-link:hover {
  color: var(--brand-primary);
  text-decoration: underline;
}
/* Request Session Dashboard: the table needs the full content width, so override the shared
   .common-page-container centering (margin 20px 5% + width calc(90% - 60px)) on THIS page only.
   The double-class selector outranks the single-class global rule. */
.request-session-dashboard-page.common-page-container {
  margin: 0;
  width: 100%;
  padding: 10px 0px;
}

.request-session-dashboard-page .common-page-header {
  padding: 20px;
}

/* Activity-popup teacher name: clickable to the teacher profile, black by default,
   brand color on hover only. */
.rsd-teacher-link {
  color: var(--text-primary);
  text-decoration: none;
  cursor: pointer;
}
.rsd-teacher-link:hover {
  color: var(--brand-primary);
}
.cgs-container {
  width: 100%;
  display: flex;
}

.cgs-create {
  width: 70%;
  border-right: 1px solid;
  padding: 0 20px;
}

.cgs-add-time {
  width: 30%;
}

.cgs-time-container {
  text-align: center;
}

.cgs-time-error {
  margin: 3px 0;
  color: var(--state-error);
}

.cgs-time-error-none {
  display: none;
}

.cgs-single-date {
  margin: 10px 0;
  display: flex;
  justify-content: center;
}

.cgs-single-date img {
  width: 15px;
  height: 15px;
  align-items: center;
  border: 1px solid;
  border-radius: 50%;
  margin-left: 5px;
  cursor: pointer;
  border-color: var(--state-error);
}
.sl-input {
  width: 200px;
  height: 34px;
}

.sl-top-content {
  display: flex;
}

.sl-top-content p {
  margin-left: 30px;
}

.sl-top-inp,
.sl-top-leg {
  display: flex;
  align-items: center;
}

.sl-display-cont {
  display: flex;
  width: 100%;
  height: 400px;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  text-align: center;
}

.sl-legend {
  width: 10px;
  height: 10px;
  background-color: var(--state-error);
  margin: 0 5px 0 20px;
}

@media (max-width: 700px) {
  .sl-top-content:focus {
    border: none;
  }

  .sl-top-content {
    flex-direction: column;
  }

  .sl-legend {
    margin-left: 0;
  }

  .sl-top-leg {
    margin-top: 10px;
  }
}

.sl-span {
  margin-left: 10px;
}

.sl-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 0.5px solid var(--border-default);
  margin: 12px 0 16px;
}

.sl-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 400;
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}

.sl-tab-active {
  color: var(--text-primary);
  font-weight: 500;
  border-bottom-color: var(--text-primary);
}

.sl-tab-count {
  background: var(--surface-sunken);
  color: var(--text-muted);
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 999px;
}

.ol-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 8px 0 16px;
}

.ol-card {
  border: 0.5px solid var(--border-default);
  border-radius: 8px;
  padding: 14px 16px;
  background: var(--surface-card);
  color: var(--text-primary);
}

.ol-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}

.ol-card-name {
  font-size: 15px;
  font-weight: 500;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.ol-card-phone {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 400;
}

.ol-card-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.ol-tag {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface-sunken);
  color: var(--text-secondary);
  border: 0.5px solid var(--border-default);
  text-transform: capitalize;
}

.ol-tag-success {
  background: var(--state-success-bg);
  color: var(--state-success-text);
  border-color: transparent;
}

.ol-tag-muted {
  background: var(--surface-sunken);
  color: var(--text-muted);
  border-color: transparent;
}

.ol-card-meta {
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ol-card-url {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.ol-card-tries {
  margin-top: 10px;
  border-top: 0.5px dashed var(--border-default);
  padding-top: 8px;
}

.ol-card-tries-toggle {
  background: transparent;
  border: none;
  color: var(--state-info);
  font-size: 12.5px;
  cursor: pointer;
  padding: 0;
}

.ol-tries-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ol-try-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 12.5px;
}

.ol-try-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border-emphasis);
  margin-top: 5px;
  flex-shrink: 0;
}

.ol-try-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ol-try-status {
  color: var(--text-secondary);
  text-transform: capitalize;
}

.ol-try-line2 {
  color: var(--text-muted);
}

.ol-card-error,
.ol-try-error {
  margin-top: 6px;
  font-size: 12px;
  color: var(--state-error-text);
  background: var(--state-error-bg);
  border: 0.5px solid var(--state-error);
  border-radius: 6px;
  padding: 6px 8px;
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  max-width: 100%;
  flex-wrap: wrap;
}

.ol-try-error {
  margin-top: 4px;
}

.ol-card-error-code,
.ol-try-error-code {
  font-weight: 600;
}

.ol-card-error-msg,
.ol-try-error-msg {
  color: var(--state-error-text);
  word-break: break-word;
}
.pt-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pt-toolbar {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}
.pt-toggle {
  padding: 8px 14px;
  border: 1px solid var(--brand-primary);
  background: transparent;
  color: var(--brand-primary);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.pt-toggle:hover {
  opacity: 0.85;
}
.pt-toggle:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.pt-checkbox {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  white-space: nowrap;
}
.pt-checkbox input {
  cursor: pointer;
  margin: 0;
}
.pt-legend {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-primary);
  opacity: 0.85;
}
.pt-status {
  padding: 24px;
  text-align: center;
  color: var(--text-primary);
}
.pt-error {
  color: var(--state-error);
}

/* Bounded scroll region so the sticky header pins to the table (not the modal) as rows scroll. */
.pt-scroll {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  max-height: 60vh;
}

.pt-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 760px;
}
.pt-table th,
.pt-table td {
  border: 1px solid var(--border-default);
  padding: 8px 10px;
  text-align: center;
  font-size: 13px;
  color: var(--text-primary);
  background: var(--surface-card);
}
.pt-term-head {
  font-weight: 700;
}
.pt-sub-head {
  font-weight: 500;
  font-size: 12px;
  opacity: 0.8;
}
/* Sticky plan column (horizontal scroll) + sticky header rows (vertical scroll). */
.pt-plan-col {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--surface-card);
  text-align: left;
  min-width: 170px;
}
/* Both header rows stay pinned; the sub-head row sits just below the term-head row. */
.pt-table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 4;
  box-shadow: inset 0 -1px 0 var(--border-default);
}
.pt-table thead .pt-sub-head {
  top: 33px;
}
/* Corner cell (plan-column header) sits above both header rows and the body sticky column. */
.pt-table thead .pt-plan-col {
  top: 0;
  z-index: 5;
}
/* Extra-session column: a standalone per-package price, divided from the term grid. */
.pt-extra-col {
  border-left: 2px solid var(--border-default);
}
.pt-plan-label {
  font-weight: 600;
}
.pt-total {
  font-weight: 600;
}
.pt-permonth {
  font-size: 11px;
  opacity: 0.7;
  margin-top: 2px;
}
/* PROD-9074: the paid-recording add-on, set apart from the plan price it sits under. */
.pt-recording {
  font-size: 11px;
  font-weight: 600;
  color: var(--brand-primary);
  margin-top: 2px;
}

@media (max-width: 640px) {
  .pt-table th,
  .pt-table td {
    padding: 6px 7px;
    font-size: 12px;
  }
  .pt-total {
    font-size: 12px;
  }
  .pt-plan-col {
    min-width: 130px;
  }
  .pt-table thead .pt-sub-head {
    top: 28px;
  }
}
.stu-pro-cha {
  position: fixed;
  bottom: 0;
  right: 20px;
}

.stu-pro-extra-class {
  text-align: center;
  margin: 10px 0;
  font-size: 19px;
  color: var(--state-error);
}

.cre-member-options-row {
  display: flex;
  width: 100%;
}

.cre-member-options {
  display: flex;
  width: 100%;
  align-items: center;
  margin-bottom: 20px;
  cursor: pointer;
  padding: 0 30px;
}

.cre-member-option {
  margin-left: 30px;
}

.cre-member-sub-heading {
  font-size: 14px;
  margin: 3px 0;
}

.cre-member-pricing {
  width: 50px;
  margin-left: 20px;
}

.create-membership-popup {
  max-width: 760px;
  margin: 0 auto;
  padding: 8px 10px 4px;
}

.create-membership-header {
  text-align: center;
  margin-bottom: 28px;
}

.create-membership-header h3 {
  color: var(--text-primary);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
}

.create-membership-form {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.create-membership-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.create-membership-field label {
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin: 0;
  text-transform: uppercase;
}

.create-membership-field select {
  width: 100%;
  min-height: 52px;
  border: 1px solid var(--input-border);
  border-radius: 8px;
  background: var(--input-bg);
  color: var(--input-text);
  font-size: 16px;
  line-height: 1.4;
  padding: 0 16px;
}

.create-membership-field .custom-date-picker {
  width: 100%;
}

.create-membership-field .custom-date-picker-label {
  display: none;
}

.create-membership-field .react-datepicker-wrapper,
.create-membership-field .react-datepicker__input-container {
  width: 100%;
}

.create-membership-field .react-datepicker__input-container input {
  width: 100%;
  min-height: 52px;
  border: 1px solid var(--input-border);
  border-radius: 8px;
  background: var(--input-bg);
  color: var(--input-text);
  font-size: 16px;
  line-height: 1.4;
  padding: 0 16px;
}

.create-membership-charge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid var(--input-border);
  border-radius: 8px;
  background: var(--surface-sunken);
  color: var(--text-primary);
  font-size: 15px;
  padding: 14px 16px;
}

.create-membership-charge span {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.create-membership-charge-row {
  font-size: 16px;
  font-weight: 700;
}

/* Two-class selectors to outrank the generic `span` label rules above, which set muted 12px uppercase. */
.create-membership-charge .create-membership-charge-amount,
.subs-summ .create-membership-charge-amount {
  color: var(--text-primary);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.2px;
  line-height: 1.2;
  text-transform: none;
  white-space: nowrap;
}

/* Same slot as the amount, at body size. */
.create-membership-charge .create-membership-charge-status,
.subs-summ .create-membership-charge-status {
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 600;
  text-transform: none;
}

.create-membership-charge .create-membership-charge-status.is-error,
.subs-summ .create-membership-charge-status.is-error {
  color: var(--state-error);
}

.create-membership-checkbox {
  display: flex;
  align-items: center;
  min-height: 36px;
}

.create-membership-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 10px;
}

.create-membership-actions button {
  min-width: 140px;
}

.create-membership-summary {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 24px;
}

.create-membership-loading,
.create-membership-error {
  color: var(--text-secondary);
  font-size: 15px;
  text-align: center;
}

.create-membership-error {
  color: var(--state-error);
}

.cre-mem-gift {
  padding: 0 5px !important;
}

.cre-mem-gift-options {
  padding: 0 10px !important;
}

.subs-summ {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid var(--input-border);
  color: var(--text-primary);
  font-size: 14px;
  margin-bottom: 0;
  padding-bottom: 12px;
}

.subs-summ span {
  color: var(--text-muted);
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 600;
  margin-right: 5px;
  text-transform: uppercase;
}

.notes-container {
  height: 600px;
}

.notes-container h4 {
  margin-bottom: 10px;
}

.notes-messages {
  height: 450px;
  overflow: auto;
}

.notes-input {
  height: 100px;
  margin-top: 20px;
  display: flex;
}

.notes-input textarea {
  height: 100%;
  border: 1px solid;
}

.notes-text {
  margin-bottom: 20px;
}

.notes-text-val {
  border: 1px solid;
  padding: 10px;
  background-color: var(--surface-sunken);
  color: var(--text-primary);
  font-family: Montserrat;
  font-size: 14px;
  border-radius: 10px;
}

.notes-text-auth {
  text-align: left;
  font-family: Montserrat;
  font-size: 12px;
  color: var(--text-muted);
}

/* Rendered note bubble: tighten default p/ul/ol margins so single-line notes
   don't have extra vertical space. */
.sn-bubble p,
.sn-bubble ul,
.sn-bubble ol {
  margin: 0;
}
.sn-bubble p + p,
.sn-bubble p + ul,
.sn-bubble p + ol,
.sn-bubble ul + p,
.sn-bubble ol + p {
  margin-top: 6px;
}
.sn-bubble ul,
.sn-bubble ol {
  padding-left: 20px;
}
.sn-bubble a {
  color: var(--state-info);
  text-decoration: underline;
}

/* Composer: hard-cap Quill editor height so the composer doesn't grow taller
   than the modal. */
.sn-composer .ql-toolbar.ql-snow,
.sn-composer .ql-container.ql-snow {
  border: none;
}
.sn-composer .ql-toolbar.ql-snow {
  border-bottom: 0.5px solid var(--input-border);
  padding: 4px 6px;
}
.sn-composer .ql-container.ql-snow {
  font-size: 13px;
  font-family: inherit;
  background: var(--input-bg);
  color: var(--input-text);
}
.sn-composer .ql-editor {
  min-height: 60px;
  max-height: 140px;
  padding: 8px 10px;
}
.sn-composer .ql-editor.ql-blank::before {
  color: var(--input-placeholder);
  font-style: normal;
  left: 10px;
}

/* Dark-mode toolbar tweaks: Quill's snow theme assumes light backgrounds, so
   recolor the icons + dropdowns. */
.dark .sn-composer .ql-snow .ql-stroke {
  stroke: var(--text-secondary);
}
.dark .sn-composer .ql-snow .ql-fill,
.dark .sn-composer .ql-snow .ql-stroke.ql-fill {
  fill: var(--text-secondary);
}
.dark .sn-composer .ql-snow .ql-picker {
  color: var(--text-secondary);
}
.dark .sn-composer .ql-snow.ql-toolbar button:hover .ql-stroke,
.dark .sn-composer .ql-snow.ql-toolbar button.ql-active .ql-stroke {
  stroke: var(--brand-primary);
}

.student-old-goals {
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
}

.student-old-goals-div {
  display: flex;
  flex-shrink: 0;
  border: 1px solid;
  border-radius: 20px;
  margin-right: 10px;
  margin-bottom: 10px;
  align-items: center;
  padding: 5px 10px;
}

.student-old-goals-div span {
  margin-right: 10px;
}

.student-old-goals-div img {
  width: 15px;
  height: 15px;
  cursor: pointer;
}

.spc {
  display: flex;
  justify-content: space-between;
}

.spc-btn-co {
  padding: 5px 0;
  width: 16%;
  max-width: 250px;
  box-shadow: var(--shadow-card);
}

.spc-btn-co p {
  font-weight: bold;
  margin: 0;
  font-size: 16px !important;
}

.spc-btn-in-co {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 20px;
}

.spc-btn-co button {
  padding: 5px 10px;
  font-size: 12px;
  border-radius: 8px;
  background: var(--surface-card);
  border: 1px solid var(--brand-secondary);
  color: var(--text-primary);
  cursor: pointer;
  transition: 0.2s linear;
  margin: 5px;
  box-shadow: none;
  text-shadow: none;
}

.spc-btn-co button:hover {
  background: var(--brand-secondary);
  border-color: var(--brand-secondary);
  color: var(--text-inverse);
}

.spc-btn-co a {
  padding: 5px 10px;
  font-size: 12px;
  border-radius: 8px;
  background: var(--surface-card);
  border: 1px solid var(--brand-secondary);
  color: var(--text-primary);
  cursor: pointer;
  transition: 0.2s linear;
  margin: 5px;
  box-shadow: none;
  text-shadow: none;
  text-decoration: none;
  display: inline-block;
}

.spc-btn-co a:hover {
  background: var(--brand-secondary);
  border-color: var(--brand-secondary);
  color: var(--text-inverse);
}

/* The six action groups sit in one row at 16% each. On narrow screens a
   group's buttons are wider than its column and spill over the next group, so
   at 375px "Reset Trial" (which writes) sat on top of "Emails Timeline" and a
   tap meant for one hit the other (STAFFPROJE-95). Give each group room. */
@media (max-width: 1024px) {
  .spc {
    flex-wrap: wrap;
    gap: 12px;
  }

  .spc-btn-co {
    width: calc(50% - 6px);
    max-width: none;
  }
}

@media (max-width: 600px) {
  .spc-btn-co {
    width: 100%;
  }
}

.spc-btn-co-dup {
  padding: 5px 10px;
  font-size: 12px;
  border-radius: 5px;
  color: var(--brand-secondary);
  cursor: pointer;
  transition: 0.2s linear;
  margin: 5px;
}

.spc-btn-co-dup:hover {
  padding: 5px 10px;
  font-size: 12px;
  border-radius: 5px;
  background: var(--surface-card);
  color: var(--brand-secondary);
  cursor: pointer;
  transition: 0.2s linear;
  margin: 5px;
}

.spc-profile {
  flex-shrink: 0;
  text-align: center;
}

.teacher-profile-image-change {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 10px 0;
  background: var(--overlay-modal);
  color: var(--text-on-nav);
  cursor: pointer;
}

.spc-profile-change {
  padding: 5px 10px;
  font-size: 12px;
  border-radius: 8px;
  background: var(--surface-card);
  border: 1px solid var(--brand-secondary);
  color: var(--text-primary);
  cursor: pointer;
  transition: 0.2s linear;
  margin: 5px;
  box-shadow: none;
  text-shadow: none;
}

.spc-profile-change:hover {
  background: var(--brand-secondary);
  border-color: var(--brand-secondary);
  color: var(--text-inverse);
}

.spc-profile-change input {
  display: none;
}

.myt-table > thead > tr > th {
  width: 50%;
}

.membership-error > p {
  font-size: 18px;
  font-weight: 500;
}

.membership-error > p > a {
  text-decoration: underline;
  color: var(--brand-secondary);
}
.message-content > p > a {
  color: var(--brand-primary);
  font-family: inter;
  font-size: 15px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  word-wrap: break-word;
}
/*
 * Twilio Agent admin settings modal styling. Adapted from the support_inbox
 * settings modal (si-* classes) with a ta-* prefix — support_inbox.css is NOT
 * imported here, so these are self-contained. Colors come only from the
 * semantic tokens in src/theme/tokens.css; never hardcode a hex here so the
 * modal works in both light and dark themes.
 */

/* ---------- modal shell ---------- */
.ta-modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay-modal-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 24px;
}

.ta-modal {
  position: relative;
  width: 100%;
  max-width: 760px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: 12px;
  box-shadow: var(--shadow-modal);
  padding: 28px 32px;
  color: var(--text-primary);
}

.ta-modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
}

.ta-modal-close:hover {
  background: var(--surface-sunken);
  color: var(--text-primary);
}

.ta-modal-title {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 6px;
}

.ta-settings-modal {
  max-width: 1040px;
  width: 80%;
  height: 80vh;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 24px 28px;
}

.ta-settings-body {
  display: flex;
  gap: 24px;
  flex: 1;
  min-height: 0;
  margin-top: 16px;
}

.ta-settings-nav {
  flex: none;
  width: 200px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-right: 1px solid var(--border-default);
  padding-right: 12px;
}

.ta-settings-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border: none;
  border-radius: 8px;
  background: none;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

.ta-settings-nav-item:hover {
  background: var(--surface-sunken);
}

.ta-settings-nav-item.ta-active {
  background: var(--surface-sunken);
  color: var(--text-primary);
  font-weight: 600;
}

.ta-settings-content {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding-right: 4px;
}

.ta-settings-heading {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 4px;
}

.ta-settings-desc {
  color: var(--text-muted);
  font-size: 13px;
  margin: 0 0 18px;
}

/* Intro line directly above .ta-settings-desc-steps — tightens the gap so the
   sentence and the ordered list read as one block. */
.ta-settings-desc-lead {
  margin-bottom: 6px;
}

/* Compact numbered precedence list inside a settings section description. */
.ta-settings-desc-steps {
  color: var(--text-muted);
  font-size: 13px;
  list-style: decimal;
  margin: 0 0 10px;
  padding-left: 20px;
}

.ta-settings-desc-steps li {
  margin: 0 0 2px;
}

/* ---------- shared form controls ---------- */
.ta-input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  color: var(--input-text);
  font-size: 15px;
  outline: none;
  box-shadow: none;
}

.ta-input:hover {
  border-color: var(--input-border);
  box-shadow: none;
  outline: none;
}

.ta-input:focus,
.ta-input:focus-visible {
  border-color: var(--input-focus-border);
  background: var(--input-focus-bg);
  outline: none;
  box-shadow: none;
}

.ta-modal-save {
  padding: 10px 20px;
  border-radius: 8px;
  border: none;
  background: var(--surface-inverse);
  color: var(--text-inverse);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.ta-modal-save:hover {
  opacity: 0.9;
}

.ta-modal-save:disabled {
  opacity: 0.5;
  cursor: default;
}

.ta-ghost-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: none;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  padding: 6px 4px;
}

.ta-ghost-btn:hover {
  color: var(--brand-primary);
}

.ta-ghost-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.ta-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  border: none;
  border-radius: 6px;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
}

.ta-icon-btn:hover {
  background: var(--surface-sunken);
  color: var(--text-primary);
}

.ta-icon-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.ta-state-msg {
  padding: 24px 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

/* ---------- teams ---------- */
.ta-team-create {
  display: flex;
  align-items: stretch;
  gap: 10px;
}

.ta-team-create .ta-input {
  flex: 1;
}

.ta-team-error {
  color: var(--state-error-text);
  font-size: 13px;
  margin: 8px 0 0;
}

.ta-team-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 20px;
}

.ta-team-card {
  border: 1px solid var(--border-default);
  border-radius: 10px;
  padding: 14px 16px;
}

.ta-team-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ta-team-card-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

.ta-team-edit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 1;
}

.ta-team-edit .ta-input {
  flex: 1;
  padding: 7px 10px;
  font-size: 14px;
}

.ta-team-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ta-team-del {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  border: none;
  border-radius: 6px;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
}

.ta-team-del:hover {
  background: var(--state-error-bg);
  color: var(--state-error-text);
}

.ta-team-del:disabled {
  opacity: 0.5;
  cursor: default;
}

/* Armed (first-click) state for a destructive button: flips to an explicit red
   "Confirm…" label; a second click performs the action. */
.ta-team-del.ta-del-armed,
.ta-team-del.ta-del-armed:hover {
  gap: 5px;
  padding: 5px 10px;
  border-radius: 6px;
  background: var(--state-error-bg);
  color: var(--state-error-text);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

/* Groups an armed control with its adjacent × cancel affordance. */
.ta-del-wrap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Muted × shown only while a control is armed. Clicking it disarms (also:
   Escape, the auto-reset timeout, and mouse-leave). */
.ta-arm-cancel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border: none;
  border-radius: 6px;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
}

.ta-arm-cancel:hover {
  background: var(--surface-sunken);
  color: var(--text-secondary);
}

.ta-arm-cancel:disabled {
  opacity: 0.5;
  cursor: default;
}

.ta-team-members {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}

.ta-team-empty {
  color: var(--text-muted);
  font-size: 13px;
}

.ta-member-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px 4px 10px;
  border-radius: 14px;
  background: var(--surface-sunken);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
}

.ta-member-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1px;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
}

.ta-member-remove:hover {
  background: var(--state-error-bg);
  color: var(--state-error-text);
}

.ta-member-remove:disabled {
  opacity: 0.5;
  cursor: default;
}

.ta-team-add {
  max-width: 320px;
}

/* ---------- searchable dropdown ---------- */
.ta-dropdown {
  position: relative;
  width: 100%;
}

.ta-dropdown-trigger {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  color: var(--input-text);
  font-size: 15px;
  text-align: left;
  cursor: pointer;
}

.ta-dropdown-trigger:hover:not(:disabled) {
  border-color: var(--input-focus-border);
}

.ta-dropdown-trigger:disabled {
  opacity: 0.5;
  cursor: default;
}

.ta-dropdown-ph {
  color: var(--text-muted);
}

/* Selected value in a dropdown trigger (e.g. Routing's number/team pickers). */
.ta-dropdown-val {
  color: var(--input-text);
}

/* Rendered in a portal on document.body with position/top/left/width set inline
   from the trigger's rect (see SearchableDropdown), so it escapes the modal's
   scroll/overflow clipping. Only the constant z-index lives here — it must sit
   above the modal overlay (.ta-modal-overlay z-index: 1000). */
.ta-dropdown-panel {
  z-index: 2000;
  display: flex;
  flex-direction: column;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  box-shadow: var(--shadow-modal);
  overflow: hidden;
}

.ta-dropdown-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-default);
  color: var(--text-muted);
}

.ta-dropdown-search-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  outline: none;
  color: var(--input-text);
  font-size: 14px;
}

.ta-dropdown-search-input::placeholder {
  color: var(--text-muted);
}

.ta-dropdown-options {
  max-height: 240px;
  overflow-y: auto;
  padding: 4px;
}

.ta-dropdown-option {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: 6px;
  background: none;
  text-align: left;
  cursor: pointer;
}

.ta-dropdown-option-active {
  background: var(--surface-sunken);
}

.ta-dropdown-option-name {
  font-size: 14px;
  color: var(--text-primary);
}

.ta-dropdown-option-email {
  font-size: 12px;
  color: var(--text-muted);
}

.ta-dropdown-empty {
  padding: 16px 10px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

/* ---------- routing ---------- */
.ta-routing-form {
  display: flex;
  align-items: stretch;
  gap: 10px;
}

.ta-routing-form .ta-input,
.ta-routing-form .ta-dropdown {
  flex: 1;
}

.ta-route-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 20px;
}

.ta-route-group {
  border: 1px solid var(--border-default);
  border-radius: 10px;
  padding: 14px 16px;
}

.ta-route-phone {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 10px;
}

/* The wildcard "Any number" group heading: a muted pill distinguishing the
   fallback rule from real E.164 numbers. */
.ta-route-any-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 12px;
  background: var(--surface-sunken);
  border: 1px solid var(--border-default);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
}

/* A single caller-type rule within a phone-number card: a muted small-caps
   heading over that rule's ordered team rows. Rules stack with a little breathing
   room between them. */
.ta-route-rule {
  margin-top: 12px;
}

.ta-route-rule:first-of-type {
  margin-top: 0;
}

.ta-route-caller-type {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}

/* Marks the "Any caller" rule, which is evaluated last (and so rendered last)
   within its phone-number group. Lowercase + lighter than the caller-type label
   it trails, so it reads as an annotation rather than a second heading. */
.ta-route-fallback-hint {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: lowercase;
  color: var(--text-muted);
  opacity: 0.75;
  padding: 1px 6px;
  border: 1px solid var(--border-default);
  border-radius: 8px;
}

.ta-route-team-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ta-route-team-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 8px;
  background: var(--surface-sunken);
}

.ta-route-pos {
  flex: none;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
}

.ta-route-team-name {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  color: var(--text-primary);
}

.ta-route-controls {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.custom-quill .ql-container {
  min-height: 10em;
  border-bottom-left-radius: 0.5em;
  border-bottom-right-radius: 0.5em;
  background: #fefcfc;
}

.custom-quill {
  margin: 30px 0;
}

.custom-quill textarea {
  width: 100%;
  height: 40px;
  font-size: 14px;
}
.pref-row {
  display: flex;
  width: 100%;
}

.pref-title {
  width: 40%;
}

.pref-title-other {
  width: 20%;
}

.pref-row-title {
  margin: 10px 0;
  font-weight: 1000;
}

.pref-row {
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-top: 0;
  padding: 15px 0;
}

.pref-row-top {
  border-top: 1px solid rgba(0, 0, 0, 0.2);
}
.cr-email-container {
  width: 100%;
  min-height: 500px;
  display: flex;
  justify-content: space-evenly;
}

.cr-email-text {
  width: 100%;
}

.cr-email-text textarea {
  width: 99%;
  height: 100%;
}

.cr-email-view {
  width: 100%;
  border: 1px solid;
}

.cr-email-view iframe {
  width: 100%;
  min-height: 100%;
  height: auto;
}

.cr-email-send {
  margin-top: 30px;
}

.cr-email-error {
  color: var(--state-error);
}

.cr-email-toaddr {
  display: flex;
  align-items: center;
}

.cr-email-toaddr button {
  margin-top: 25px;
}

.cr-email-emails-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 20px;
}

.cr-email-single {
  display: flex;
  align-items: center;
  border: 1px solid rgba(0, 0, 0, 0.2);
  padding: 2px 10px;
  border-radius: 20px;
  margin-right: 10px;
  margin-bottom: 5px;
}

.cr-email-single p {
  margin-left: 5px;
  padding: 2px 6px;
  font-size: 10px;
  border-radius: 50%;
  border: 1px solid;
  cursor: pointer;
}
/* Flatten the CommonHeader page card for this page — the user list and the
   add/edit form render as two separate cards directly on the gray content
   background instead of nesting inside one big white card. */
.cms-users-page.common-page-container {
  background: transparent;
  padding-left: 0;
  padding-right: 0;
  overflow: visible;
}

/* Theming: the list card and the form card must adapt to dark mode. Colors come
   from src/theme/tokens.css — no hardcoded hex here. Previously these cards were
   hardcoded `bg-white border-gray-200`, so theme-aware (light) text landed on a
   white card in dark mode and became invisible. */
.cms-users-page .cms-card {
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow-card);
  color: var(--text-primary);
}

.cms-users-page .cms-list-header {
  border-bottom: 1px solid var(--border-default);
}

.cms-users-page .cms-search-input {
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--input-text);
}

.cms-users-page .cms-search-input::placeholder {
  color: var(--input-placeholder);
}

.cms-users-page .cms-users-count {
  color: var(--text-muted);
}

.cms-users-page .cms-users-table thead tr {
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-default);
}

.cms-users-page .cms-users-table tbody tr {
  border-bottom: 1px solid var(--border-default);
}

.cms-users-page .cms-users-table tbody tr:hover {
  background: var(--surface-sunken);
}

.cms-users-page .cms-users-table tbody tr.is-selected {
  background: var(--surface-row-highlight);
}

.cms-users-page .cms-empty {
  color: var(--text-muted);
}

.cms-users-page .cms-edit-btn {
  color: var(--text-muted);
}

.cms-users-page .cms-edit-btn:hover {
  color: var(--brand-primary);
}

.cms-users-page .cms-no-access {
  color: var(--text-muted);
}

/* Access-type / page multi-selects (react-multi-select-component). The library
   is themed purely through its own CSS variables, so map them onto the theme
   tokens instead of restyling its internals — this keeps the dropdown readable
   in dark mode, where its defaults are a white panel. */
.cms-multiselect .rmsc {
  --rmsc-main: var(--brand-primary);
  --rmsc-hover: var(--surface-sunken);
  --rmsc-selected: var(--surface-row-highlight);
  --rmsc-border: var(--input-border);
  --rmsc-gray: var(--text-muted);
  --rmsc-bg: var(--input-bg);
  --rmsc-p: 8px;
  --rmsc-radius: 4px;
  /* 30px control + 10px vertical margin + 14px text match custom_input.css and
     custom_sigle_select.css, so a multi-select sits on the same baseline as the
     shared inputs when they share a form row. */
  --rmsc-h: 30px;
  margin: 10px 0;
  font-size: 14px;
  color: var(--input-text);
}

/* The panel is absolutely positioned, so inside a modal it must paint above the
   fields below it and cap its own height rather than relying on the modal body
   to scroll (the user modal sets overflow: visible so the panel is not clipped). */
.cms-multiselect .rmsc .dropdown-content {
  z-index: 30;
}

.cms-multiselect .rmsc .dropdown-content .panel-content {
  background: var(--surface-card);
  color: var(--text-primary);
}

.cms-multiselect .rmsc .options {
  max-height: 220px;
  overflow-y: auto;
}

/* Matches .custom-input-label / .custom-single-select-label so every label in
   the user form renders identically. */
.cms-field-label {
  font-size: 14px;
}

/* Role editor block inside the Access Roles modal — sits on the modal surface,
   so it needs its own sunken background to read as a distinct panel. */
.cms-role-editor {
  background: var(--surface-sunken);
  border: 1px solid var(--border-default);
}

.cms-role-hint {
  color: var(--text-muted);
}

.cms-page-chip {
  background: var(--surface-sunken);
  border: 1px solid var(--border-default);
  color: var(--text-primary);
}
.group-class-goals {
  margin-top: 5px;
  display: flex;
  flex-wrap: wrap;
}

.group-classes-list {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.group-class {
  position: relative;
  width: 350px;
  border: 1px solid;
  margin: 5px;
  padding-bottom: 60px;
}

.group-class h4 {
  text-align: center;
}

.group-class-edit {
  position: absolute;
  bottom: 0;
  left: 30%;
}

.create-group-class-name h4 {
  text-align: center;
  font-size: 20px;
  margin-top: 0;
}

.create-group-class-name-edit {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  margin-top: 20px;
  margin-bottom: 5px;
}

.create-class-type-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.create-class-type-header input {
  height: 30px;
  width: 50%;
}

.cre-class-teachers {
  display: flex;
  flex-wrap: wrap;
  margin: 10px 0;
  width: 100%;
}

.cre-class-teac {
  position: relative;
  font-family: Montserrat;
  font-size: 12px;
  color: #1b2437;
  flex-shrink: 0;
  margin-right: 5px;
  padding: 3px 25px;
  border: 1px solid rgb(151, 151, 151, 0.3);
  border-radius: 10px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  margin-bottom: 10px;
}

.cre-class-teac img {
  position: absolute;
  top: calc(50% - 5px);
  right: 5px;
  width: 10px;
  height: 10px;
}

.page-teachers {
  display: flex;
  width: 100%;
  font-size: 14px;
  flex-wrap: wrap;
}

.page-teacher {
  margin: 0 10px;
}
.page-teacher img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

.add-classes-open {
  height: 400px;
  display: flex;
  justify-content: space-evenly;
  overflow: hidden;
}

.add-classes-left {
  width: 48%;
  border: 1px solid;
  overflow: auto;
}

.add-classes-right {
  width: 48%;
  border: 1px solid;
  overflow: auto;
}

.add-classes-search {
  display: flex;
  justify-content: center;
  align-items: center;
}

.add-classes-search input {
  height: 30px;
}

.add-class-click {
  cursor: pointer;
}
@-webkit-keyframes marching-ants{0%{background-position:0 0,0 100%,0 0,100% 0}to{background-position:20px 0,-20px 100%,0 -20px,100% 20px}}@keyframes marching-ants{0%{background-position:0 0,0 100%,0 0,100% 0}to{background-position:20px 0,-20px 100%,0 -20px,100% 20px}}:root{--rc-drag-handle-size:12px;--rc-drag-handle-mobile-size:24px;--rc-drag-handle-bg-colour:#0003;--rc-drag-bar-size:6px;--rc-border-color:#ffffffb3;--rc-focus-color:#08f}.ReactCrop{cursor:crosshair;max-width:100%;display:inline-block;position:relative}.ReactCrop *,.ReactCrop :before,.ReactCrop :after{-webkit-box-sizing:border-box;box-sizing:border-box}.ReactCrop--disabled,.ReactCrop--locked{cursor:inherit}.ReactCrop__child-wrapper{max-height:inherit;overflow:hidden}.ReactCrop__child-wrapper>img,.ReactCrop__child-wrapper>video{max-width:100%;max-height:inherit;display:block}.ReactCrop:not(.ReactCrop--disabled) .ReactCrop__child-wrapper>img,.ReactCrop:not(.ReactCrop--disabled) .ReactCrop__child-wrapper>video,.ReactCrop:not(.ReactCrop--disabled) .ReactCrop__crop-selection{-ms-touch-action:none;touch-action:none}.ReactCrop__crop-mask{pointer-events:none;width:calc(100% + .5px);height:calc(100% + .5px);position:absolute;inset:0}.ReactCrop__crop-selection{cursor:move;position:absolute;top:0;left:0;-webkit-transform:translate(0,0);transform:translate(0,0)}.ReactCrop--disabled .ReactCrop__crop-selection{cursor:inherit}.ReactCrop--circular-crop .ReactCrop__crop-selection{border-radius:50%}.ReactCrop--circular-crop .ReactCrop__crop-selection:after{pointer-events:none;content:"";border:1px solid var(--rc-border-color);opacity:.3;position:absolute;inset:-1px}.ReactCrop--no-animate .ReactCrop__crop-selection{outline:1px dashed #fff}.ReactCrop__crop-selection:not(.ReactCrop--no-animate .ReactCrop__crop-selection){color:#fff;background-image:-webkit-gradient(linear,left top, right top,color-stop(50%, #fff),color-stop(50%, #444)),-webkit-gradient(linear,left top, right top,color-stop(50%, #fff),color-stop(50%, #444)),-webkit-gradient(linear,left top, left bottom,color-stop(50%, #fff),color-stop(50%, #444)),-webkit-gradient(linear,left top, left bottom,color-stop(50%, #fff),color-stop(50%, #444));background-image:linear-gradient(90deg,#fff 50%,#444 50%),linear-gradient(90deg,#fff 50%,#444 50%),linear-gradient(#fff 50%,#444 50%),linear-gradient(#fff 50%,#444 50%);background-position:0 0,0 100%,0 0,100% 0;background-repeat:repeat-x,repeat-x,repeat-y,repeat-y;background-size:10px 1px,10px 1px,1px 10px,1px 10px;-webkit-animation:1s linear infinite marching-ants;animation:1s linear infinite marching-ants}.ReactCrop__crop-selection:focus{outline:2px solid var(--rc-focus-color);outline-offset:-1px}.ReactCrop--invisible-crop .ReactCrop__crop-mask,.ReactCrop--invisible-crop .ReactCrop__crop-selection{display:none}.ReactCrop__rule-of-thirds-vt:before,.ReactCrop__rule-of-thirds-vt:after,.ReactCrop__rule-of-thirds-hz:before,.ReactCrop__rule-of-thirds-hz:after{content:"";background-color:#fff6;display:block;position:absolute}.ReactCrop__rule-of-thirds-vt:before,.ReactCrop__rule-of-thirds-vt:after{width:1px;height:100%}.ReactCrop__rule-of-thirds-vt:before{left:33.3333%}.ReactCrop__rule-of-thirds-vt:after{left:66.6667%}.ReactCrop__rule-of-thirds-hz:before,.ReactCrop__rule-of-thirds-hz:after{width:100%;height:1px}.ReactCrop__rule-of-thirds-hz:before{top:33.3333%}.ReactCrop__rule-of-thirds-hz:after{top:66.6667%}.ReactCrop__drag-handle{width:var(--rc-drag-handle-size);height:var(--rc-drag-handle-size);background-color:var(--rc-drag-handle-bg-colour);border:1px solid var(--rc-border-color);position:absolute}.ReactCrop__drag-handle:focus{background:var(--rc-focus-color)}.ReactCrop .ord-nw{cursor:nw-resize;top:0;left:0;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.ReactCrop .ord-n{cursor:n-resize;top:0;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.ReactCrop .ord-ne{cursor:ne-resize;top:0;right:0;-webkit-transform:translate(50%,-50%);transform:translate(50%,-50%)}.ReactCrop .ord-e{cursor:e-resize;top:50%;right:0;-webkit-transform:translate(50%,-50%);transform:translate(50%,-50%)}.ReactCrop .ord-se{cursor:se-resize;bottom:0;right:0;-webkit-transform:translate(50%,50%);transform:translate(50%,50%)}.ReactCrop .ord-s{cursor:s-resize;bottom:0;left:50%;-webkit-transform:translate(-50%,50%);transform:translate(-50%,50%)}.ReactCrop .ord-sw{cursor:sw-resize;bottom:0;left:0;-webkit-transform:translate(-50%,50%);transform:translate(-50%,50%)}.ReactCrop .ord-w{cursor:w-resize;top:50%;left:0;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.ReactCrop__disabled .ReactCrop__drag-handle{cursor:inherit}.ReactCrop__drag-bar{position:absolute}.ReactCrop__drag-bar.ord-n{width:100%;height:var(--rc-drag-bar-size);top:0;left:0;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.ReactCrop__drag-bar.ord-e{width:var(--rc-drag-bar-size);height:100%;top:0;right:0;-webkit-transform:translate(50%);transform:translate(50%)}.ReactCrop__drag-bar.ord-s{width:100%;height:var(--rc-drag-bar-size);bottom:0;left:0;-webkit-transform:translateY(50%);transform:translateY(50%)}.ReactCrop__drag-bar.ord-w{width:var(--rc-drag-bar-size);height:100%;top:0;left:0;-webkit-transform:translate(-50%);transform:translate(-50%)}.ReactCrop--new-crop .ReactCrop__drag-bar,.ReactCrop--new-crop .ReactCrop__drag-handle,.ReactCrop--fixed-aspect .ReactCrop__drag-bar,.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-n,.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-e,.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-s,.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-w{display:none}@media (pointer:coarse){.ReactCrop .ord-n,.ReactCrop .ord-e,.ReactCrop .ord-s,.ReactCrop .ord-w{display:none}.ReactCrop__drag-handle{width:var(--rc-drag-handle-mobile-size);height:var(--rc-drag-handle-mobile-size)}}
.sp-test-cus-edit {
  align-items: center;
  margin-top: 5px;
}

.sp-test-edit-key {
  width: 30%;
}

.sp-test-edit-val {
  width: 40%;
}

.sp-test-edit-btns {
  width: 30%;
}

.sp-test-edit-btns button {
  padding: 5px 10px;
}

.stc-container {
  margin-top: 20px;
}

.stc-header {
  /* border: 1px solid; */
  height: 40px;
  display: flex;
  justify-content: center;
}

.stc-label {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 10px;
  padding: 0 20px;
  background-color: var(--border-default);
  color: var(--text-inverse);
  border-radius: 5px;
  cursor: pointer;
}

.stc-label-sel {
  background-color: var(--brand-secondary);
}
.custom-image-upload {
}

.custom-image-upload input {
  display: none;
}

.custom-image-image img {
  /* width: 100%; */
  height: 200px;
}

.teacher-profile-image-container {
  width: 300px;
  flex-shrink: 0;
  text-align: center;
}

.teacher-profile-links-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.teacher-profile-image {
  position: relative;
  width: 60%;
  margin: 0 auto;
}

.teacher-profile-image-change {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 10px 0;
  background: rgba(0, 0, 0, 0.5);
  color: var(--text-inverse);
  cursor: pointer;
}

.teacher-profile-image-change input {
  display: none;
}

.teacher-profile-image img {
  width: 100%;
  object-fit: cover;
}
.no-permission-cont {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.rec-block {
  display: flex;
}

.rec-teacher {
  width: 33%;
}

.rec-session {
  width: 33%;
}
.rec-teacher-types {
  margin-top: 5px;
}

.rec-teacher-image {
  font-size: 14px;
}

.rec-teacher-image img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.consult-notes textarea {
  width: 100%;
  height: 200px;
}

.consult-notes button {
  /* display: block; */
}

.consult-attch {
  display: flex;
  align-items: center;
}

.consult-attch img {
  width: 20px;
  height: 20px;
  margin-left: 5px;
  border: 1px solid;
  border-radius: 50%;
  border-color: var(--state-error);
  cursor: pointer;
}
.community_class_desc {
  width: 100%;
  height: 200px;
  font-size: 15px;
  line-height: 20px;
}
.promote-table {
  width: 80%;
  padding-top: 30px;
  padding-left: 30px;
  margin-top: 5px;
  /* background-color: white; */
  align-self: center;
}
.title-div {
  padding-top: 20px;
  padding-bottom: 20px;
}

.title_bold {
  text-align: center;
  font-weight: bold;
}
.content-tag-header {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 30px;
}

.content-tag-header input {
  margin: 0 !important;
}

.content-width-full {
  width: 100%;
}

.content-width-half {
  width: 50%;
}

.content-border {
  border: 1px solid #bfbfbf;
}

.category-template-div {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  text-align: left;
  margin-top: 30px;
}

.content-div {
  width: 100%;
  /* border-bottom: 1px solid #bfbfbf; */
  padding: 10px 30px 30px 30px;
}

.inner-div {
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
}

.category-button {
  float: right;
  margin: 0px 0px 10px 0px;
}
.save-button {
  margin-left: auto;
  margin-top: 50px;
}

.create-tag-name h4 {
  text-align: center;
  font-size: 20px;
  margin-top: 0;
}

.content-search-input {
  height: 30px;
  width: 50%;
}

.create-tag-name-button {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 10px;
}

.md-chip {
  display: inline-block;
  background: var(--surface-sunken);
  color: var(--text-primary);
  padding: 0 12px;
  border-radius: 32px;
  font-size: 13px;
}
.md-chip-hover:hover {
  background: var(--border-default);
}

.md-chip-clickable {
  cursor: pointer;
}

.md-chip,
.md-chip-icon {
  height: 32px;
  line-height: 32px;
}

.md-chip-icon {
  display: block;
  float: left;
  background: var(--state-success);
  width: 32px;
  border-radius: 50%;
  text-align: center;
  color: var(--text-on-nav);
  margin: 0 8px 0 -12px;
}

.md-chip-remove {
  display: inline-block;
  background: var(--text-muted);
  border: 0;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  padding: 0;
  margin: 0 -4px 0 4px;
  cursor: pointer;
  font: inherit;
  line-height: 20px;
}

.md-chip-remove:after {
  color: var(--surface-card);
  content: 'x';
}

.md-chip-remove:hover {
  background: var(--text-secondary);
}

.md-chip-remove:active {
  background: #777;
}

.md-chips {
  padding: 12px 0;
}

.md-chip {
  margin: 0 5px 3px 0;
}

.md-chip-raised {
  box-shadow:
    0 2px 2px 0 rgba(0, 0, 0, 0.14),
    0 1px 5px 0 rgba(0, 0, 0, 0.12),
    0 3px 1px -2px rgba(0, 0, 0, 0.2);
}

input[type='checkbox'] {
  display: none;
}

input[type='checkbox'] + label {
}

:checked + label:before {
  content: '✓';
  transform: scale(1);
  margin-right: 4px;
}

input[type='checkbox']:checked + label {
  transition: all 500ms ease;
  background-color: #1579b3;
  color: var(--text-inverse);
  border-color: #fc6c27;
}

.blog-frame {
  width: 50%;
}

.blog-frame iframe {
  width: 100%;
  height: 100%;
}

.blog-details-link {
  margin: 10px 0 !important;
}
.home-container {
  width: 100%;
  height: 100%;
}

.header {
  width: 100%;
  height: 70px;
  background: #1a2b4a;
  border-bottom: 1px solid #0f1a2e;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  z-index: 99999999999;
}

.header-logo-cont {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}

.home-logo {
  height: 30px;
  margin-left: 30px;
}

.home-menu-icon {
  width: 28px;
  height: auto;
  margin-left: 30px;
  cursor: pointer;
}

.header-email {
  display: flex;
  align-items: center;
}

.header-email-link {
  text-decoration: none;
  color: inherit;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.header-profile-icon {
  color: white;
  margin-right: 6px;
}

.header-email-link:hover p,
.header-email-link:hover .header-profile-icon {
  opacity: 0.85;
}

.header-email-link:hover p {
  text-decoration: underline;
}

.header-email p {
  color: white;
  font-size: 16px;
  padding-right: 10px;
}

.home-logout {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 15px;
  padding: 0;
  background: #cc5500;
  color: #ffffff;
  border: 1px solid #aa4400;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(204, 85, 0, 0.2);
}

.home-logout:hover {
  background: #aa4400;
  border-color: #994400;
  box-shadow: 0 4px 8px rgba(204, 85, 0, 0.3);
  transform: translateY(-1px);
}

.home-logout:hover .logout-icon {
  transform: translateX(2px);
}

.home-logout:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(204, 85, 0, 0.2);
}

.logout-icon {
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.content-container {
  display: flex;
  width: 100%;
  height: 90%;
  height: calc(100% - 70px);
}

.drawer {
  width: 15%;
  max-width: 225px;
  background: #ffffff;
  overflow: hidden;
  overflow-y: scroll;
  transition:
    width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.3s ease-in-out;
  animation: slideInLeft 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 1;
}

.drawer-close {
  width: 0;
  opacity: 0;
  transition:
    width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.3s ease-in-out;
  animation: slideOutLeft 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideInLeft {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }

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

@keyframes slideOutLeft {
  from {
    transform: translateX(0);
    opacity: 1;
  }

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

.content {
  width: 85%;
  background: #eff0f1;
  overflow-y: auto;
  transition: 0.3s linear;
}

.content-full-screen {
  width: 100%;
}

@media (min-width: 1500px) {
  .content {
    width: 85%;
    width: calc(100% - 225px);
  }

  .content-full-screen {
    width: 100%;
  }
}

.header-timezone {
  margin-right: 30px;
  display: flex;
  align-items: center;
}

.header-timezone div {
  color: #fff;
  padding-right: 10px;
}

.header-email-logout {
  display: flex;
  align-items: center;
}

@media (max-width: 700px) {
  /* Stop the logo container from claiming width:100% and pushing the right-hand
     cluster off-screen (was the source of the mobile header overflow). */
  .header-logo-cont {
    flex-direction: row-reverse;
    justify-content: flex-end;
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
  }

  .header {
    overflow: hidden;
  }

  .header-email {
    min-width: 0;
  }

  .home-logo {
    margin-left: 14px;
  }

  .home-menu-icon {
    margin-left: 14px;
  }

  .header-timezone {
    margin-right: 12px;
  }

  .header-email-logout {
    display: none;
  }

  .drawer {
    position: absolute;
    width: 100%;
    height: 90%;
    height: calc(100% - 70px);
    max-width: none;
    background: #ffffff;
    overflow: hidden;
    overflow-y: scroll;
    transition:
      transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
      opacity 0.3s ease-in-out;
    z-index: 99999999999;
    animation: slideInLeft 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 1;
  }

  .drawer-close {
    width: 0;
    transform: translateX(-100%);
    opacity: 0;
    transition:
      transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
      opacity 0.3s ease-in-out;
    animation: slideOutLeft 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .content {
    width: 100%;
  }
}

@media (max-width: 400px) {
  .header-timezone-title {
    display: none;
  }
}

.header-add {
  margin-right: 20px;
  width: 130px;
}

/* ── Theme toggle button (rides on .home-logout geometry) ─── */
.theme-toggle {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: none;
  margin-left: 4px;
  margin-right: 4px;
}

.theme-toggle:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: none;
  transform: translateY(-1px);
}

/* ── Dark mode overrides ──────────────────────────────────── */
.dark .header {
  background: var(--surface-nav);
  border-bottom-color: var(--border-nav);
}

.dark .drawer {
  background: var(--surface-card);
}

.dark .content {
  background: var(--surface-page);
  color: var(--text-primary);
}
.session-table,
td,
th {
  border: 0 !important;
}
.session-table,
th {
  font-weight: 600;
  font-size: 16px;
  line-height: 22px;
}
.session-table,
td {
  font-weight: 500;
  font-size: 15px;
  line-height: normal;
}
.manual-notes > p {
  margin: 0;
}
.manual-cnotes-container > .quill > .ql-container > .ql-editor {
  height: 500px;
}
.card {
  width: 310px;
  height: 627px;
  padding: 15px;
  margin-top: 40px;
  border-radius: 25px;
  display: flex;
  justify-content: center;
  box-shadow: 15px 10px 25px 0px #3fa1a9;
  background: var(--surface-card);
}

form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.chat-img-upload {
  display: none;
}

.custom-file-upload {
  border-radius: 50%;
  display: inline-block;
  position: relative;
  padding: 6px;
  cursor: pointer;
  margin-bottom: 25px;
}

.img-wrap {
  position: relative;
  width: 200px;
  height: 200px;
  overflow: hidden;
  border-radius: 50%;
}

img {
  width: auto;
  height: 100%;
}

label {
  text-transform: uppercase;
  font-weight: 700;
  color: #676767;
}

input {
  border-radius: 15px;
  border: 1px solid #b7b7b7;
  padding: 5px 5px 5px 10px;
  font-size: 18px;
}

input:focus {
  outline: none;
  border: 1px solid #64d488;
}

input::placeholder {
  color: #bebebe;
}

button {
  color: #054231;
  letter-spacing: 1px;
  margin: 20px;
  font-size: 18px;
  padding: 10px;
  text-align: center;
  border-radius: 25px;
  border: none;
  background: #64d488;
  cursor: pointer;
}

.save {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.edit {
  color: var(--text-inverse);
  width: 180px;
}

.fa-instagram {
  position: absolute;
  color: #79f1a4;
  top: 3%;
  right: 2%;
  font-size: 38px;
}

.fa-instagram:hover {
  color: #caff81;
}
.custom-modal-inner-container img {
  position: static !important; /* or the default position value */
  top: auto !important;
  right: auto !important;
  width: auto !important;
}
.img-wrap {
  width: 150px; /* Set the desired width */
  height: 150px; /* Set the desired height, same as width for a circle */
  overflow: hidden; /* Hide any overflow to ensure a perfect circle */
  border-radius: 50%; /* This creates the circular shape */
  display: flex;
  align-items: center;
  justify-content: center;
}

.img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* This ensures the aspect ratio is maintained */
}
/* Bulk short-link generator tab (PROD-7285).
   Colors come only from the semantic tokens in src/theme/tokens.css so the tab
   renders correctly in both light and dark mode. */

.bulk-tab {
  padding: 8px 4px 24px;
  color: var(--text-primary);
}

.bulk-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-bottom: 16px;
}

.bulk-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid var(--border-default);
  background: var(--surface-card);
  color: var(--text-primary);
}

.bulk-btn:hover {
  border-color: var(--border-emphasis);
}

.bulk-btn-primary {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: var(--text-inverse);
}

.bulk-btn-primary:hover {
  background: var(--brand-primary-hover);
  border-color: var(--brand-primary-hover);
}

.bulk-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.bulk-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.bulk-msg {
  font-size: 13px;
  padding: 10px 12px;
  border-radius: 8px;
  margin-bottom: 16px;
  background: var(--state-success-bg);
  color: var(--state-success-text);
  border: 1px solid var(--state-success);
}

.bulk-msg-error {
  background: var(--state-error-bg);
  color: var(--state-error-text);
  border-color: var(--state-error);
}

.bulk-errors {
  margin-bottom: 20px;
  border: 1px solid var(--state-error);
  border-radius: 8px;
  overflow: hidden;
}

.bulk-errors-head {
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 500;
  background: var(--state-error-bg);
  color: var(--state-error-text);
}

.bulk-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  color: var(--text-primary);
}

.bulk-table th,
.bulk-table td {
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border-default);
}

.bulk-table th {
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--surface-sunken);
}

.bulk-history {
  margin-top: 24px;
}

.bulk-history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.bulk-history-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

.bulk-status {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: capitalize;
}

.bulk-status-pending,
.bulk-status-processing {
  background: var(--state-warning-bg);
  color: var(--state-warning-text);
}

.bulk-status-completed {
  background: var(--state-success-bg);
  color: var(--state-success-text);
}

.bulk-status-failed {
  background: var(--state-error-bg);
  color: var(--state-error-text);
}

.bulk-link {
  color: var(--state-info);
  text-decoration: underline;
  cursor: pointer;
}

.bulk-link-disabled {
  color: var(--text-muted);
  cursor: not-allowed;
}

.bulk-empty {
  padding: 24px;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
}

.bulk-failed-count {
  color: var(--state-error-text);
  font-weight: 500;
}
/* Tab bar for the /short-urls page (PROD-7285).
   Mirrors the students_list tab styling; token-only colors for light/dark. */

.su-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 0.5px solid var(--border-default);
  margin: 12px 0 16px;
}

.su-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 400;
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}

.su-tab-active {
  color: var(--text-primary);
  font-weight: 500;
  border-bottom-color: var(--text-primary);
}
/* PROD-7828 R11 — Email logs tab additions to teacher_payments.css. Theme tokens only (no hex). */

.tp-em-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.tp-em-blockers {
  margin: 8px 0;
  padding-left: 20px;
  color: var(--state-error-text);
}

.tp-em-meta {
  display: grid;
  grid-template-columns: -webkit-max-content 1fr;
  grid-template-columns: max-content 1fr;
  gap: 4px 12px;
  margin: 12px 0;
}

.tp-em-meta dt {
  color: var(--text-muted);
}

.tp-em-meta dd {
  margin: 0;
  font-weight: 600;
}

.tp-em-frame {
  width: 100%;
  height: 70vh;
  min-height: 480px;
  border: 1px solid var(--border-default);
  border-radius: 6px;
  background: var(--surface-card);
}
/* MoEngage user export page.
   Colors use only semantic tokens from src/theme/tokens.css — works in light and dark mode. */

.me-export {
  padding: 8px 4px 24px;
  color: var(--text-primary);
}

.me-export-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.me-export-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.me-export-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-bottom: 16px;
}

.me-export-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid var(--border-default);
  background: var(--surface-card);
  color: var(--text-primary);
}

.me-export-btn:hover {
  border-color: var(--border-emphasis);
}

.me-export-btn-primary {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: var(--text-inverse);
}

.me-export-btn-primary:hover {
  background: var(--brand-primary-hover);
  border-color: var(--brand-primary-hover);
}

.me-export-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.me-export-msg {
  font-size: 13px;
  padding: 10px 12px;
  border-radius: 8px;
  margin-bottom: 16px;
  background: var(--state-success-bg);
  color: var(--state-success-text);
  border: 1px solid var(--state-success);
}

.me-export-msg-error {
  background: var(--state-error-bg);
  color: var(--state-error-text);
  border-color: var(--state-error);
}
/*
 * Email Timeline tables (STAFFPROJE-95).
 *
 * common.css's responsive .cus-table rules (@media max-width 1024px and 768px)
 * were written for the Concierge Users table but are unscoped, so they reach
 * every .cus-table: at 1024 each row gets min-width 1200px, which pushed View
 * Email / Open off the card, and at 768 they hide column 2, pin column 3 to
 * the card's corner, and label columns 4 to 15 "Trial Period", "Member", ...
 * This undoes them for this page only, the same page-scoped override pattern
 * .sms-report-page uses in common.css. Changing the shared rules would move
 * every other table that already relies on them.
 *
 * Every selector carries .cus-table on purpose: the common.css rules it
 * undoes also use !important at the same weight, and they land later in the
 * built bundle, so without the extra class they win (measured: column 3 stayed
 * pinned over the card title at 375px). The extra class wins regardless of
 * bundle order.
 *
 * Mobile labels come from each column's data-label attribute (index.jsx), so
 * a column added later labels itself instead of inheriting a Concierge name.
 */

@media (max-width: 1024px) {
  /* Five or six short columns fit the card; no sideways table scroll. */
  .email-timeline-page .cus-table {
    overflow-x: visible;
  }

  .email-timeline-page .cus-table .ct-row {
    min-width: 0;
    width: 100%;
  }
}

@media (max-width: 768px) {
  /* One field per line, label left, value right, in source order. */
  .email-timeline-page .cus-table .ct-row:not(.ct-h) .ct-col {
    position: static !important;
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    width: 100% !important;
    margin: 0 !important;
    padding: 0.5rem 0 !important;
    border: none;
  }

  .email-timeline-page .cus-table .ct-row:not(.ct-h) .ct-col::before {
    content: attr(data-label) !important;
    display: inline-block !important;
    position: static !important;
    width: auto !important;
    min-width: 110px;
    margin: 0 !important;
    font-weight: 500;
    font-size: 0.8rem;
    color: var(--text-muted);
  }

  /* common.css draws a divider and "Fin"/"SCH" captions with ::after. */
  .email-timeline-page .cus-table .ct-row:not(.ct-h) .ct-col::after {
    content: none !important;
    display: none !important;
  }

  /* Raw-data modal values (.ct-bw): common.css stacks them in a column; left
     centred, a long unbroken value (a URL) overflowed past the cell's left edge,
     which cannot be scrolled to. */
  .email-timeline-page .cus-table .ct-row:not(.ct-h) .ct-col.ct-bw {
    align-items: flex-start;
    overflow-wrap: anywhere;
  }

  /* The page card kept common.css's desktop width, calc(90% - 60px), which on
     a 375px phone is 278px and left a 78px empty strip. Fill the content area. */
  .email-timeline-page.common-page-container {
    width: auto;
    margin: 8px;
    box-sizing: border-box;
  }

  /* Filters stack full width instead of two fixed 200px selects side by side.
     !important because CustomSelect sets width: 200px inline on the select. */
  .email-timeline-page .custom-single-select,
  .email-timeline-page .custom-single-select select {
    width: 100% !important;
  }

  /* First column is the card title (subject plus its badge), unlabelled. */
  .email-timeline-page .cus-table .ct-row:not(.ct-h) .ct-col:first-child {
    display: block !important;
    font-weight: 600;
  }

  /* No label to show: the first column and the raw-data key/value table. */
  .email-timeline-page .cus-table .ct-row:not(.ct-h) .ct-col:first-child::before,
  .email-timeline-page .cus-table .ct-row:not(.ct-h) .ct-col:not([data-label])::before {
    content: none !important;
    display: none !important;
  }
}
.price-card > .price-thereafter {
  color: #575757;
  font-weight: 600;
}

.save-price-highlight {
  color: #ff006a;
  font-weight: 600;
}
/*
 * Segmented Yes / No / status toggle used across the Early Retention Checklist
 * form. Hover + focus affordances can't be expressed with inline styles, so the
 * interactive states live here while the per-option fill colour stays inline
 * (it's data-driven from opt.color). All colours come from theme tokens.
 */

.erc-toggle {
  display: inline-flex;
  border-radius: 9999px;
  overflow: hidden;
  border: 1px solid var(--border-emphasis);
  box-shadow: var(--shadow-card);
}

/* Draw the eye to a question that still needs an answer — a steady warning ring
 * plus a slow pulse so unanswered toggles read as "action required". The pulse
 * stops the moment a value is picked (the modifier class is removed). */
.erc-toggle--empty {
  border-color: var(--state-warning);
  animation: erc-toggle-pulse 1.8s ease-in-out infinite;
}

@keyframes erc-toggle-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 var(--state-warning-bg);
  }

  50% {
    box-shadow: 0 0 0 4px var(--state-warning-bg);
  }
}

/* A required toggle left blank when Submit was pressed — same treatment as the
 * unanswered ring but in the error colour, so it reads as a blocking problem
 * rather than a nudge. Cleared as soon as an option is picked. */
.erc-toggle--error {
  border-color: var(--state-error);
  box-shadow: 0 0 0 3px var(--state-error-bg);
}

/* Respect users who've asked the OS to reduce motion. */
@media (prefers-reduced-motion: reduce) {
  .erc-toggle--empty {
    animation: none;
    box-shadow: 0 0 0 3px var(--state-warning-bg);
  }
}

.erc-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  background: var(--surface-card);
  color: var(--text-secondary);
  transition:
    background-color 0.12s ease,
    color 0.12s ease;
}

.erc-toggle-btn:first-child {
  padding-left: 20px;
  border-top-left-radius: 9999px;
  border-bottom-left-radius: 9999px;
}

.erc-toggle-btn:last-child {
  padding-right: 20px;
  border-top-right-radius: 9999px;
  border-bottom-right-radius: 9999px;
}

.erc-toggle-btn + .erc-toggle-btn {
  border-left: 1px solid var(--border-default);
}

/* Unselected buttons lift on hover so it's obvious they're clickable. */
.erc-toggle-btn:not(.erc-toggle-btn--selected):hover {
  background: var(--surface-sunken);
  color: var(--text-primary);
}

.erc-toggle-btn:focus-visible {
  outline: 2px solid var(--state-info);
  outline-offset: -2px;
}

/* Selected fill colour is applied inline; this just reinforces the pressed look. */
.erc-toggle-btn--selected {
  color: #ffffff;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
}

/* Latest-1on1 replay modal: the fluid video-react player normally sizes its
   height from the video's aspect ratio, overflowing the fixed modal body and
   clipping the chapter strip. Make it fill its flex-sized wrapper instead —
   the video letterboxes within. */
.erc-replay-player .video-react {
  padding-top: 0 !important;
  height: 100%;
}

/* Rich-text notes editor (reuses the student-profile notes Quill styling).
   Fixed height ≈ the "Message student" textarea; long notes scroll inside. */
.erc-notes-quill .ql-editor {
  height: 120px;
  overflow-y: auto;
  font-size: 13px;
}

.erc-notes-quill .ql-container,
.erc-notes-quill .ql-toolbar {
  border-color: var(--input-border);
}

.erc-notes-quill .ql-container {
  background: var(--input-bg);
  color: var(--input-text);
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

.erc-notes-quill .ql-toolbar {
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

.erc-notes-readonly p {
  margin: 0 0 4px;
}

/* Checkpoint filter <select> on the checklist list page.
 *
 * The app ships a global `select` base style (the addComponents plugin in
 * tailwind.config.js) built for full-width form fields. It forces
 * `width: 100%`, `height: 46px !important` and `border-radius: 7px !important`,
 * and on :hover/:focus it paints `border-color: var(--input-focus-border)` plus
 * a hardcoded lavender `box-shadow: 0 0 0 0.2rem #c7b8da`. On this filter row
 * that made the control span the whole width (pushing it onto its own line) and
 * flash a pink/purple border on hover — coral in dark, plum in light.
 *
 * So restate the filter-pill geometry here and neutralise the hover/focus
 * chrome: inline styles can't override `!important` or express pseudo-classes.
 * Geometry matches DateRangeFilter / MultiSelectDropdown's trigger (6px 10px
 * padding, 13px text, 8px radius, 1px --input-border). Only the data-driven
 * active border colour stays inline, which also keeps it winning over these
 * hover rules — so hovering never recolours the border. */
.erc-check-select {
  display: inline-block;
  width: auto;
  max-width: 300px;
  /* Size from padding like the neighbouring pills instead of the global 46px. */
  height: auto !important;
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  border: 1px solid var(--input-border);
  border-radius: 8px !important;
  background: var(--input-bg) !important;
  color: var(--input-text);
  cursor: pointer;
  transition:
    background-color 0.12s ease,
    border-color 0.12s ease;
}

/* Hover/focus: keep the neutral border, drop the lavender ring, and darken the
   fill a touch so the control still reads as interactive. */
.erc-check-select:hover {
  border: 1px solid var(--input-border);
  background: var(--surface-sunken) !important;
  box-shadow: none;
  outline: 0;
}

.erc-check-select:focus {
  border: 1px solid var(--input-border);
  background: var(--input-bg) !important;
  box-shadow: none;
  outline: 0;
}

/* Keyboard-only focus ring, matching .erc-toggle-btn above. */
.erc-check-select:focus-visible {
  outline: 2px solid var(--state-info);
  outline-offset: -2px;
}
.custom-image-upload {
}

.custom-image-upload input {
  display: none;
}

.custom-image-image img {
  /* width: 100%; */
  height: 200px;
}

.teacher-profile-image-container {
  width: 300px;
  flex-shrink: 0;
  text-align: center;
}

.teacher-profile-links-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.teacher-profile-image {
  position: relative;
  width: 60%;
  margin: 0 auto;
}

.teacher-profile-image-change {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 10px 0;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  cursor: pointer;
}

.teacher-profile-image-change input {
  display: none;
}

.teacher-profile-image img {
  width: 100%;
  object-fit: cover;
}
.notifications-container {
  width: 300px;
  position: fixed;
  padding: 10px 0;
  right: 50px;
  z-index: 9999999999999;
  display: flex;
  align-items: center;
  background-color: var(--border-default);
  border-radius: 40px;
  top: 50px;
  animation: notif-ani-from-top 0.5s ease-in;
}

.notifications-success {
  background-image: linear-gradient(to right, #8bd771, #82cb70);
  color: var(--text-inverse);
}

.notifications-error {
  background-image: linear-gradient(to right, #ee6464, #c35151);
  color: var(--text-inverse);
}

.notifications-container img {
  width: 40px;
  padding: 0 20px;
}

.notifications-text {
  width: 50%;
  width: calc(100% - 120px);
}

.notfications-close {
  width: 40px;
  text-align: center;
  font-size: 28px;
  line-height: 20px;
  cursor: pointer;
  padding: 0;
  margin: 0;
}

@keyframes notif-ani-from-top {
  0% {
    top: -100px;
  }

  100% {
    top: 50px;
  }
}

.notifications-close {
  top: -100px;
  animation: notif-ani-from-bottom 0.5s ease-in;
}

@keyframes notif-ani-from-bottom {
  0% {
    top: 50px;
    opacity: 1;
  }

  100% {
    top: -100px;
    opacity: 0;
  }
}

@media (max-width: 600px) {
  .notifications-container {
    padding: 15px 20px;
    right: 0;
    left: 0;
    display: flex;
    align-items: center;
    background: var(--border-default);
    border-radius: 0;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    top: 0px;
  }

  @keyframes notif-ani-from-top {
    0% {
      top: -50px;
    }

    100% {
      top: 0px;
    }
  }

  @keyframes notif-ani-from-bottom {
    0% {
      top: 0px;
      opacity: 1;
    }

    100% {
      top: -100px;
      opacity: 0;
    }
  }
}
.blog-post-container {
  box-sizing: border-box;
  padding: 30px 20px;
}

.blog-post-top-section {
  width: 100%;
  display: flex;
}

.blog-post-top-section img {
  width: 40%;
}

.blog-post-intro {
  width: 60%;
}

.blog-post-intro-in {
  width: 100%;
  background-color: #f9f9f9;
  box-sizing: border-box;
  padding: 30px;
  padding-bottom: 50px;
  margin-bottom: 40px;
  font-family: Rubik-Medium;
  position: relative;
}

.blog-post-intro-in h3 {
  margin: 0;
}

.blog-post-sub-title {
  color: #c4c4c4;
}

.blog-post-con {
  padding: 20px 30px;
  text-align: center;
}

.blog-post-author {
  position: absolute;
  bottom: -50px;
  z-index: 1;
}

.blog-post-author img {
  width: 80px !important;
  border-radius: 100%;
}

.blog-post-author p {
  margin: 0;
  color: #a5a5a5;
}

@media (min-width: 1500px) {
  .blog-post-container {
    width: 900px;
    margin: 0 auto;
  }
}

@media (max-width: 700px) {
  .blog-post-top-section {
    display: block;
  }

  .blog-post-top-section img {
    width: 100%;
  }

  .blog-post-intro {
    width: 100%;
  }

  .blog-post-intro-in {
    width: 100%;
    background-color: #fff;
    margin-bottom: 0;
    padding: 20px 0;
  }

  .blog-post-con {
    padding: 20px 0;
  }

  .blog-post-author {
    position: relative;
    bottom: auto;
  }
}
.chat-global-toast {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 10000;
  max-width: 320px;
  padding: 12px 16px;
  border-radius: 10px;
  background: rgba(31, 41, 55, 0.96);
  color: var(--text-inverse);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.24);
  font-size: 14px;
  line-height: 1.4;
}

@media (max-width: 640px) {
  .chat-global-toast {
    top: 16px;
    right: 16px;
    left: 16px;
    max-width: none;
  }
}
.common-page-container {
  width: 90%;
  padding: 20px 30px;
  width: calc(90% - 60px);
  margin: 20px 5%;
  background: var(--surface-card);
  border-radius: 10px;
  overflow: auto;
  position: relative;
}

.dark .common-page-container {
  background: var(--surface-card);
  color: var(--text-primary);
  box-shadow: var(--shadow-card);
}

.dark thead,
.dark tr {
  border-color: var(--border-default);
}

.dark th,
.dark td {
  color: var(--text-primary);
}

@media (min-width: 1500px) {
  .common-page-container {
    width: 1200px;
    margin: 20px calc(50% - 600px);
  }
}

table {
  width: 100%;
  border-collapse: collapse;
}

thead,
tr {
  border: 1px solid var(--border-default);
}

tr {
  border: 1px solid var(--border-default);
}

th,
td {
  padding: 10px;
  text-align: center;
}

th img,
td img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

.list-filter {
  padding: 0px 10px;
}

.list-filter-input {
  padding: 0px 10px;
  text-align: left;
}

.list-filter-input input {
  height: 30px;
  width: 100%;
  max-width: 250px;
  font-size: 14px;
  font-family: Avenir;
  font-weight: 500;
  color: var(--text-primary);
}

.list-filter select {
  height: 30px;
  width: 100%;
  max-width: 150px;
}

.cmp-go-back img {
  width: 12px;
  transform: rotate(180deg);
  margin-bottom: 5px;
  cursor: pointer;
}

button {
  padding: 10px 20px;
  border-radius: 5px;
  background: var(--brand-secondary);
  border: 1px solid var(--brand-secondary-hover);
  color: var(--text-inverse);
  font-size: 14px;
  cursor: pointer;
  transition: 0.2s linear;
  margin: 5px;
  box-shadow: none;
  text-shadow: none;
}

.ct-small-btn {
  padding: 5px 10px;
  font-size: 12px;
}

.link-btn {
  padding: 10px 20px;
  border-radius: 5px;
  background: var(--brand-secondary);
  border: 1px solid var(--brand-secondary-hover);
  color: var(--text-inverse);
  font-size: 14px;
  cursor: pointer;
  transition: 0.2s linear;
  margin: 5px;
  text-decoration: none;
  box-shadow: none;
  text-shadow: none;
}

.link-sec-btn {
  border: 1px solid;
  color: var(--state-info);
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
}

.div-link {
  font-size: 10px;
  color: var(--brand-secondary);
  margin-top: 5px;
  cursor: pointer;
}

button:focus {
  outline: none;
}

.button-secondary {
  background: var(--surface-card);
  color: var(--brand-secondary);
}

button:hover {
  background: var(--brand-secondary-hover);
  border-color: var(--brand-secondary-hover);
  transition: 0.2s linear;
}

.button-disabled {
  background: var(--border-default);
  border: 1px solid var(--border-default);
  cursor: default;
}

.button-disabled:hover {
  color: var(--text-inverse);
  background: var(--border-default);
  transition: none;
}

.list-name-email {
  text-align: left;
}

.list-email {
  font-size: 14px;
  opacity: 0.6;
}

.flex-center {
  /* display: flex;
align-items: center;
justify-content: center; */
}

.display-flex-between {
  display: flex;
  justify-content: space-between;
}

.display-flex-between-center {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tr-cursor-row td {
  cursor: pointer;
}

.tr-no-uuid {
  /* background-color: var(--state-error); */
  color: var(--state-error);
}

.common-page-header {
  position: relative;
  width: 100%;
  padding: 10px 0;
  margin-bottom: 10px;
  text-align: center;
  /* border-bottom: 1px solid rgba(74, 74, 74, 0.5); */
}

.profile-go-back {
  position: absolute;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.profile-go-back span {
  margin: 0 10px;
  font-size: 18px;
  color: var(--state-info);
}

.profile-go-back img {
  width: 7px;
}

.profile-go-back h4 {
  margin-left: 30px;
}

.common-page-title {
  font-size: 30px;
}

.common-page-subheading {
  font-size: 14px;
}

.led-green {
  margin: 10px auto;
  width: 10px;
  height: 10px;
  background-color: var(--state-success);
  border-radius: 50%;
}

.led-grey {
  margin: 10px auto;
  width: 10px;
  height: 10px;
  background-color: var(--border-default);
  border-radius: 50%;
}

.low-text {
  font-size: 14px;
  color: var(--text-muted);
}

.link-no-dec {
  text-decoration: none;
  color: inherit;
}

.print-link {
  /* width: 100%; */
  text-align: right;
}

.table-row-left-align td {
  text-align: left !important;
  font-size: 14px;
}

.small-image-td img {
  width: 20px;
  height: 20px;
}

.tr-border td {
  border: 1px solid;
}

.tr-border-light td {
  border: 1px solid var(--border-default);
}

/* .no-border-table tr {
    border: none;
}

.no-border-table td {
    text-align: left;
    border: none;
    padding: 0;
}


.no-border-table td:nth-child(1) {
    width: 30%;
} */

.high-text {
  font-size: 15px;
  color: var(--text-primary);
}

.td-break a {
  word-break: break-all;
}

.scr-con-img {
  position: fixed;
  bottom: 50px;
  right: 50px;
  border-radius: 50%;
  width: 45px;
  height: 45px;
  background-color: var(--brand-secondary);
  z-index: 999999999;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.scr-con-img img {
  height: 20px;
}

.common-mobile-list {
  width: 100%;
  margin-top: 20px;
}

.common-mobile-column {
  border: 1px solid var(--border-default);
  margin: 5px 0;
}

.common-mobile-column-odd {
  background-color: var(--surface-sunken);
  /* background-color: var(--border-default); */
}

.common-mobile-details {
  width: 100%;
  display: flex;
  border: 1px solid var(--border-default);
}

.common-mobile-single-detail {
  width: 50%;
  padding: 5px 0;
  /* word-break: break-all; */
  overflow-wrap: break-word;
}

.common-mobile-single-detail img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

.common-mobile-key {
  /* color: rgb(125,125,125); */
  font-size: 14px;
  opacity: 0.8;
  padding-left: 5px;
}

.common-low-text {
  font-size: 14px;
  opacity: 0.7;
}

.common-mobile-column-dis {
  color: var(--state-error) !important;
  pointer-events: none;
}

.search-hightlight {
  background-color: var(--highlight-search);
}

@media (max-width: 700px) {
  /* The back link is absolutely positioned over a centred title, so a title
     that wraps on a phone ran underneath it. Give it its own line instead. */
  .profile-go-back {
    position: static;
    margin-bottom: 8px;
  }
}

@media (max-width: 500px) {
  button {
    padding: 7px 16px;
    font-size: 12px;
    margin: 7px;
  }

  .common-page-container {
    width: 100%;
    box-sizing: border-box;
    padding: 15px;
    margin: 0;
    background: var(--surface-card);
    border-radius: 10px;
    overflow: auto;
  }

  td {
    font-size: 14px;
  }
}

@media (max-width: 400px) {
  .profile-go-back span {
    margin: 0 10px;
    font-size: 15px;
    color: var(--state-info);
  }

  .common-page-title {
    font-size: 17px;
  }
}

/* for paginator component */

.pgn-con {
  display: flex;
  /* justify-content: flex-end; */
}

.pgn-box {
  width: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid;
  margin-top: 10px;
  margin-right: 10px;
  cursor: pointer;
}

.pgn-sel {
  background-color: var(--border-emphasis);
}

/* for table css */
.cus-table {
  width: 100%;
  border-bottom: 1px solid var(--border-default);
  margin-top: 5px;
}

.ct-row {
  display: flex;
  border: 1px solid var(--border-default);
  border-bottom: none;
  box-sizing: border-box;
  align-items: center;
}

.ct-row img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  position: relative;
  right: auto;
  left: auto;
  top: auto;
  cursor: unset;
}

/* ct-column */
.ct-col {
  flex: 1;
  box-sizing: border-box;
  padding: 10px 0;
  font-size: 14px;
  text-align: center;
  /* border: 1px solid; */
}

/* ct-h */
.ct-h {
  font-weight: bold;
}

/* ct-la-align */
.ct-la {
  text-align: left;
}

/* PROD-6787: left-align the concierge lifestyle/backpain report cells (ct-col defaults to center) */
.ct-left .ct-col {
  text-align: left;
}
.ct-left .ct-col.flex-col {
  align-items: flex-start;
}

/* PROD-6787: left-align body cells of the concierge-pods report/team tables. The global
   `td { text-align: center }` rule above overrides the table's inherited text-left; this scoped
   rule wins by specificity without forcing a font-size (unlike .table-row-left-align). */
.report-cells-left td {
  text-align: left;
}

/* custom table small image */
.ct-si img {
  width: 20px;
  height: 20px;
  margin: auto;
}

.ct-colimg img {
  background: var(--brand-secondary);
  cursor: pointer;
  padding: 2px;
}

.ct-xsi img {
  width: 10px;
  height: 10px;
}

/* custom table half flex */
.ct-hf {
  flex: 0.5;
}

.ct-qf {
  flex: 0.25;
}

.ct-1f {
  flex: 0.1;
}

.ct-3rdf {
  flex: 0.33;
}

.ct-df {
  flex: 2;
}

.ct-5qf {
  flex: 1.25;
}

.ct-col-span {
  height: 100%;
  padding: 5px;
}

.ct-col-span-con {
  text-align: center;
  box-sizing: border-box;
}

.ct-col ul {
  padding-left: 0;
  list-style-position: inside;
}

.ct-col ul li {
  list-style-position: outside;
  padding: 0 15px;
}

.ct-pl-10 {
  padding-left: 10px;
}

.ct-bw {
  overflow-wrap: break-word;
  word-wrap: break-word;
  overflow: auto;
}

.ct-cur {
  cursor: pointer;
}

.ct-ml25 {
  margin-left: 25px;
}

.ct-mr25 {
  margin-right: 25px;
}

.ct-pl5 {
  /* padding-left: 5px; */
  box-sizing: initial;
}

.ct-ho {
  opacity: 0.5;
}

.ct-sm-font {
  font-size: 12px !important;
}

.ct-vsm-font {
  font-size: 10px !important;
}

.btn-link {
  padding: 5px 10px;
  border-radius: 15px;
  background: var(--brand-secondary);
  border: 1px solid var(--brand-secondary);
  color: var(--text-inverse);
  font-size: 12px;
  cursor: pointer;
  margin: 0 5px;
  text-decoration: none;
}

.data-download-btn {
  padding: 4px 15px;
  border-radius: 15px;
  font-size: 12px;
}

.video-react-icon-forward--30::before {
  content: url(https://images.myyogateacher.com/icons/ic_back_30.png);
  background-color: var(--surface-card);
}

.video-react-icon-forward--10::before {
  /* content: url(https://images.myyogateacher.com/icons/ic_back_10_fil.png); */
  content: '';
  background-image: url(https://images.myyogateacher.com/icons/ic_back_10.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-color: var(--surface-card);
  width: 10px;
  height: 10px;
}

.banned-user-container {
  position: absolute;
  top: 0;
  left: 40%;
  left: calc(50% - 50px);
  padding: 5px 15px;
  background-color: var(--state-error);
  color: var(--text-inverse);
  font-size: 14px;
}

/*  */

.ql-editor {
  height: 300px;
}

.num-input-no-arr input[type='number']::-webkit-inner-spin-button,
.num-input-no-arr input[type='number']::-webkit-outer-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

.tag-content ol,
ul {
  list-style: auto;
}

.new-users-sess-count {
  margin-top: 10px;
  display: flex;
  justify-content: space-evenly;
}

.cus-sticky {
  position: fixed;
  top: 70px;
  width: 90%;
  width: calc(90% - 120px);
  padding: 20px 30px;
}

.new-users-sess-count a {
  color: var(--state-info);
}

.pages-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.single-page {
  width: 40%;
  flex-shrink: 0;
  margin-top: 40px;
}

.single-page-title {
  font-size: 16px;
  font-weight: 1000;
}

.single-page-buttons {
  display: flex;
  align-items: center;
}

.single-page-active {
  background-color: var(--state-info);
  padding: 2px 5px;
  color: var(--text-inverse);
  border-radius: 5px;
  font-size: 14px;
}

.single-page-inactive {
  background-color: var(--text-muted);
  padding: 2px 5px;
  color: var(--text-inverse);
  border-radius: 5px;
  font-size: 14px;
}

.common-padding {
  padding-bottom: 20px;
}

.width-full {
  width: 100% !important;
  margin: 0 !important;
}

.ct-grey-br {
  border: 1px solid var(--border-default);
}

.wa-btn {
  background: var(--state-success) !important;
  border: var(--state-success) !important;
}

.wa-btn:hover {
  background: var(--surface-card) !important;
  color: var(--state-success) !important;
  cursor: pointer;
  border: 1px solid var(--state-success) !important;
}

/* Responsive styles for Concierge Users page - Mobile/Tablet only */
@media (max-width: 1024px) {
  /* Make table horizontally scrollable on tablets and mobile */
  .cus-table {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    display: block;
    width: 100%;
    max-width: 100%;
  }

  .ct-row {
    min-width: 1200px;
    /* Ensure minimum width to maintain column structure */
    flex-shrink: 0;
    width: -webkit-max-content;
    width: max-content;
  }

  /* Adjust filter layout for tablets - scoped to concierge component */
  .common-page-container .flex.flex-col.items-center > .flex.flex-row.items-center.gap-4 {
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
  }

  .common-page-container .flex.flex-col.items-center > .flex.flex-row.items-center.gap-4 > div {
    flex: 0 0 auto;
    min-width: 180px;
  }
}

@media (max-width: 768px) {
  /* Mobile-specific styles */

  /* Improve card container readability */
  .common-page-container {
    padding: 16px;
    margin: 10px;
    overflow-x: visible;
    overflow-y: auto;
  }

  /* Ensure table wrapper allows horizontal scrolling */
  .common-page-container > div {
    overflow-x: visible;
  }

  /* Filter section - stack vertically on mobile - scoped to concierge component */
  .common-page-container .flex.flex-col.items-center > .flex.flex-row.items-center.gap-4 {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .common-page-container .flex.flex-col.items-center > .flex.flex-row.items-center.gap-4 > div {
    width: 100%;
    min-width: unset;
  }

  /* Date picker section adjustments */
  .common-page-container .flex.items-center {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    width: 100%;
  }

  .common-page-container .daily-report-item {
    width: 100%;
  }

  /* Download button - full width on mobile */
  .common-page-container .data-download-btn {
    width: 100%;
    margin: 16px 0;
    box-sizing: border-box;
    padding: 12px;
    font-size: 14px;
  }

  /* Convert table to card layout on mobile */
  .cus-table {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    overflow-x: visible;
  }

  /* Hide table header on mobile */
  .ct-row.ct-h {
    display: none !important;
  }

  /* Convert each row to a card */
  .ct-row:not(.ct-h) {
    display: block;
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: 12px;
    padding: 20px;
    margin: 0;
    min-width: unset !important;
    width: 100% !important;
    box-shadow: var(--shadow-card);
    margin-bottom: 20px;
    position: relative;
  }

  /* Style columns as card fields - horizontal layout (label: value) */
  .ct-row:not(.ct-h) .ct-col {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    margin: 0;
    border-bottom: none;
    width: 100%;
    flex: unset !important;
    min-width: unset !important;
    position: relative;
    gap: 1rem;
  }

  /* Override for session columns to allow side-by-side */
  .ct-row:not(.ct-h) .ct-col:nth-child(10),
  .ct-row:not(.ct-h) .ct-col:nth-child(11) {
    display: inline-block !important;
    width: calc(50% - 8px) !important;
  }

  /* Better spacing between fields */
  .ct-row:not(.ct-h) .ct-col:not(:last-child) {
    margin-bottom: 0;
  }

  /* Add labels to each field using ::before pseudo-element */
  /* Base label style - applied to all columns except first */
  .ct-row:not(.ct-h) .ct-col:not(:first-child)::before {
    content: attr(data-label);
    display: inline-block;
    font-weight: 500;
    font-size: 0.8rem;
    color: var(--text-muted);
    flex-shrink: 0;
    text-align: left;
    min-width: 130px;
  }

  /* Ensure consistent font weight for all content in cards */
  .ct-row:not(.ct-h) .ct-col {
    font-weight: 400;
  }

  .ct-row:not(.ct-h) .ct-col strong,
  .ct-row:not(.ct-h) .ct-col b {
    font-weight: 600;
  }

  .ct-row:not(.ct-h) .ct-col:nth-child(2)::before {
    content: 'Ethnicity';
  }

  .ct-row:not(.ct-h) .ct-col:nth-child(2) {
    display: none;
  }

  .ct-row:not(.ct-h) .ct-col:nth-child(3)::before {
    display: none;
  }

  .ct-row:not(.ct-h) .ct-col:nth-child(3) {
    position: absolute !important;
    top: 20px;
    right: 20px;
    display: block !important;
    width: auto !important;
    border: none;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Add separator after header (name + chat) */
  .ct-row:not(.ct-h) .ct-col:nth-child(3)::after {
    content: '';
    display: block;
    width: 100vw;
    height: 1px;
    background: var(--border-default);
    position: absolute;
    left: -20px;
    right: -20px;
    top: 56px;
  }

  .ct-row:not(.ct-h) .ct-col:nth-child(4) {
    margin-top: 60px;
  }

  .ct-row:not(.ct-h) .ct-col:nth-child(4)::before {
    content: 'Trial Period';
  }

  .ct-row:not(.ct-h) .ct-col:nth-child(5)::before {
    content: 'Member';
  }

  .ct-row:not(.ct-h) .ct-col:nth-child(6)::before {
    content: 'Onboarding Score';
  }

  .ct-row:not(.ct-h) .ct-col:nth-child(7)::before {
    content: 'Activity Score';
  }

  .ct-row:not(.ct-h) .ct-col:nth-child(8)::before {
    content: 'Funnel Source';
  }

  .ct-row:not(.ct-h) .ct-col:nth-child(9)::before {
    content: 'Concierge';
  }

  .ct-row:not(.ct-h) .ct-col:nth-child(10)::before {
    content: 'Sessions';
    width: calc(200% + 16px);
    text-align: left;
    margin-bottom: 0;
    display: block;
    position: absolute;
    top: -32px;
    left: 0;
    font-weight: 500;
    font-size: 0.8rem;
    color: var(--text-muted);
    min-width: auto;
  }

  .ct-row:not(.ct-h) .ct-col:nth-child(11)::before {
    display: none;
  }

  /* Add Fin and SCH labels at top of each box */
  .ct-row:not(.ct-h) .ct-col:nth-child(10)::after {
    content: 'Fin';
    display: block;
    font-weight: 600;
    font-size: 0.75rem;
    color: var(--text-primary);
    text-align: left;
    margin-bottom: 0.5rem;
    width: 100%;
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    right: 0;
  }

  .ct-row:not(.ct-h) .ct-col:nth-child(11)::after {
    content: 'SCH';
    display: block;
    font-weight: 600;
    font-size: 0.75rem;
    color: var(--text-primary);
    text-align: left;
    margin-bottom: 0.5rem;
    width: 100%;
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    right: 0;
  }

  .ct-row:not(.ct-h) .ct-col:nth-child(12)::before {
    content: 'Credits';
  }

  .ct-row:not(.ct-h) .ct-col:nth-child(13)::before {
    display: none;
  }

  .ct-row:not(.ct-h) .ct-col:nth-child(13) {
    display: none;
  }

  .ct-row:not(.ct-h) .ct-col:nth-child(14)::before {
    content: 'Reply Sent';
  }

  /* Last column (SMS/WhatsApp) - no label needed as it's self-explanatory */
  .ct-row:not(.ct-h) .ct-col:nth-child(15)::before {
    display: none;
  }

  /* Remove border from last column */
  .ct-row:not(.ct-h) .ct-col:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }

  /* Special handling for flex columns - keep them in row layout */
  .ct-row:not(.ct-h) .ct-col.flex {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  /* First child special handling is done above */
  .ct-row:not(.ct-h) .ct-col:first-child::before {
    display: none;
  }

  /* Hide labels on empty columns */
  .ct-row:not(.ct-h) .ct-col:empty::before {
    display: none;
  }

  /* Center align items that should be centered */
  .ct-row:not(.ct-h) .ct-col.flex.justify-center,
  .ct-row:not(.ct-h) .ct-col.flex.justify-evenly {
    align-items: flex-start;
  }

  /* Make buttons full width in cards */
  .ct-row:not(.ct-h) .ct-small-btn {
    width: 100%;
    text-align: center;
    margin: 0;
    padding: 14px 16px;
    font-size: 15px;
    font-weight: 500;
    border-radius: 8px;
    min-height: 48px;
  }

  /* Green WhatsApp button styling */
  .ct-row:not(.ct-h) .ct-small-btn.wa-btn {
    background-color: var(--state-success);
    border-color: var(--state-success);
    color: var(--text-inverse);
  }

  .ct-row:not(.ct-h) .ct-small-btn.wa-btn:hover {
    background-color: var(--state-success);
    border-color: var(--state-success);
  }

  /* Chat button styling in cards */
  .ct-row:not(.ct-h) .btn-link {
    padding: 10px 24px;
    font-size: 15px;
    font-weight: 500;
    border-radius: 20px;
    background-color: var(--brand-primary);
    border: 1px solid var(--brand-primary);
    color: var(--text-inverse);
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
    display: inline-block;
    min-height: auto;
    width: auto;
  }

  .ct-row:not(.ct-h) .btn-link:hover,
  .ct-row:not(.ct-h) .btn-link:active {
    background-color: var(--brand-primary-hover);
    border-color: var(--brand-primary-hover);
    color: var(--text-inverse);
  }

  /* Hide empty columns or columns with only whitespace */
  .ct-row:not(.ct-h) .ct-col:empty {
    display: none;
  }

  /* Hide columns that appear empty (no visible content except labels) */
  .ct-row:not(.ct-h) .ct-col:only-child::before {
    display: none;
  }

  /* Session columns styling */
  .ct-row:not(.ct-h) .ct-col:nth-child(10),
  .ct-row:not(.ct-h) .ct-col:nth-child(11) {
    padding: 2rem 0.5rem 0.5rem 0.5rem !important;
    background: var(--surface-sunken) !important;
    border-radius: 6px;
    vertical-align: top;
    position: relative;
    text-align: center;
    box-sizing: border-box;
    margin-top: 44px;
  }

  .ct-row:not(.ct-h) .ct-col:nth-child(10) {
    margin-right: 16px;
  }

  /* Session label positioning */
  .ct-row:not(.ct-h) .ct-col:nth-child(10)::before,
  .ct-row:not(.ct-h) .ct-col:nth-child(11)::before {
    font-size: 14px !important;
  }

  /* Style the session count container - 2 column grid */
  .ct-row:not(.ct-h) .new-users-sess-count {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    margin-top: 0;
    padding: 0;
  }

  .ct-row:not(.ct-h) .new-users-sess-count > div {
    text-align: center;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  /* Large numbers - 1on1 column */
  .ct-row:not(.ct-h) .new-users-sess-count > div:first-child,
  .ct-row:not(.ct-h) .new-users-sess-count > div:first-child > a {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1;
  }

  /* Large numbers - GROUP column (lighter) */
  .ct-row:not(.ct-h) .new-users-sess-count > div:last-child,
  .ct-row:not(.ct-h) .new-users-sess-count > div:last-child > a {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-muted);
    line-height: 1;
  }

  /* Small labels below numbers */
  .ct-row:not(.ct-h) .new-users-sess-count > div:first-child::after {
    content: '1on1';
    display: block;
    font-size: 0.7rem;
    font-weight: 400;
    color: var(--text-muted);
    margin-top: 0.25rem;
  }

  .ct-row:not(.ct-h) .new-users-sess-count > div:last-child::after {
    content: 'GROUP';
    display: block;
    font-size: 0.7rem;
    font-weight: 400;
    color: var(--text-muted);
    margin-top: 0.25rem;
  }

  /* Date columns - align right and stack */
  .ct-row:not(.ct-h) .ct-col.flex.flex-col.items-center {
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    gap: 2px;
  }

  .ct-row:not(.ct-h) .ct-col.flex.flex-col.items-center > div {
    text-align: right;
    line-height: 1.4;
  }

  .ct-row:not(.ct-h) .ct-col.flex.flex-col.items-center .border-b {
    border-bottom: 1px solid var(--border-default);
    padding-bottom: 6px;
    margin-bottom: 6px;
  }

  /* Ethnicity with edit icon - keep in row */
  .ct-row:not(.ct-h) .ct-col.flex.items-center.gap-2 {
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
  }

  /* Icons in cards */
  .ct-row:not(.ct-h) .ct-si img {
    width: 24px;
    height: 24px;
  }

  /* Onboarding score with info icon */
  .ct-row:not(.ct-h) .ct-col.flex.justify-center.item-center {
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
  }

  .ct-row:not(.ct-h) .ct-col.flex.justify-center.item-center img {
    width: 20px;
    height: 20px;
  }

  /* Funnel info - align right with multiple lines */
  .ct-row:not(.ct-h) .ct-col.ct-bw {
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
  }

  .ct-row:not(.ct-h) .ct-col.ct-bw > div {
    text-align: right;
    font-size: 0.8rem;
    line-height: 1.5;
  }

  /* Make sure all text is readable with consistent font weight */
  .ct-row:not(.ct-h) .ct-col {
    font-size: 0.9rem;
    line-height: 1.5;
    font-weight: 600;
    color: var(--text-primary);
  }

  /* Value content styling - right side */
  .ct-row:not(.ct-h) .ct-col > *:not(::before) {
    text-align: right;
    flex-shrink: 0;
    margin-left: 1rem;
    font-size: 0.9rem;
    color: var(--text-primary);
    font-weight: 600;
  }

  /* Ensure labels maintain proper weight */
  .ct-row:not(.ct-h) .ct-col::before {
    font-weight: 500;
  }

  /* Bold text elements should remain bold */
  .ct-row:not(.ct-h) .ct-col strong,
  .ct-row:not(.ct-h) .ct-col b {
    font-weight: 600;
  }

  /* Better font sizes for small and very small text in cards */
  .ct-row:not(.ct-h) .ct-sm-font {
    font-size: 14px !important;
    line-height: 1.5;
  }

  .ct-row:not(.ct-h) .ct-vsm-font {
    font-size: 13px !important;
    line-height: 1.5;
  }

  .ct-sm-font {
    font-size: 12px !important;
    line-height: 1.5;
  }

  .ct-vsm-font {
    font-size: 11px !important;
    line-height: 1.4;
  }

  /* Better spacing for date/time columns */
  .ct-col.flex.flex-col.items-center {
    gap: 4px;
    padding: 12px 6px;
  }

  .ct-col.flex.flex-col.items-center > div {
    padding: 2px 0;
  }

  /* Profile section - name takes most space, chat positioned absolute */
  .ct-row:not(.ct-h) .ct-col:first-child {
    display: block !important;
    width: calc(100% - 120px) !important;
    border-bottom: none;
    padding-bottom: 16px;
    margin-bottom: 0;
    padding-right: 0;
  }

  .ct-row:not(.ct-h) .ct-col:first-child > a {
    display: block;
  }

  .ct-row:not(.ct-h) .ct-col:first-child .profile-img-name {
    display: block;
    text-align: left;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
    margin-bottom: 0.25rem;
  }

  .ct-row:not(.ct-h) .profile-img-name img {
    display: none;
  }

  /* Location and ethnicity on second line */
  .ct-row:not(.ct-h) .ct-col:first-child > a > div:not(.profile-img-name) {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-left: 0 !important;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
  }

  /* Make sure yoga_level and timezone stay in first column layout */
  .ct-row:not(.ct-h) .ct-col:first-child > a {
    display: block;
    margin-bottom: 0px;
  }

  /* History link - show below location */
  .ct-row:not(.ct-h) .ct-col:first-child .div-link {
    display: inline-block !important;
    color: var(--brand-primary);
    font-size: 0.8rem;
    margin-left: 0 !important;
    margin-top: 0.25rem !important;
    font-weight: 500;
    visibility: visible !important;
    opacity: 1 !important;
    cursor: pointer;
    text-decoration: none;
  }

  /* Info icon adjustments */
  .ct-si img {
    width: 18px;
    height: 18px;
  }

  /* Better spacing for session counts */
  .new-users-sess-count {
    gap: 4px;
    line-height: 1.6;
  }

  /* Improve link visibility */
  .link-no-dec {
    text-decoration: none;
    color: inherit;
  }

  .link-no-dec:hover {
    text-decoration: underline;
  }
}

@media (max-width: 480px) {
  /* Extra small mobile devices - card layout */

  .common-page-container {
    padding: 12px;
    margin: 8px;
  }

  /* Cards on very small screens */
  .ct-row:not(.ct-h) {
    padding: 12px;
    border-radius: 10px;
  }

  .ct-row:not(.ct-h) .ct-col {
    padding: 10px 0;
    font-size: 13px;
  }

  .ct-sm-font {
    font-size: 12px !important;
    line-height: 1.5;
  }

  .ct-vsm-font {
    font-size: 11px !important;
    line-height: 1.4;
  }

  /* Maintain touch-friendly button sizes */
  .ct-small-btn {
    padding: 10px 12px;
    font-size: 12px;
    min-height: 44px;
  }

  /* Stack session counts vertically */
  .new-users-sess-count {
    flex-direction: column;
    gap: 6px;
    line-height: 1.6;
  }
}

/* SMS Report Mobile Responsive Styles */
@media (max-width: 768px) {
  /* SMS Report Filters - Stack vertically on mobile */
  .sms-report-page .sms-report-filters {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 16px;
    padding: 0 8px;
  }

  .sms-report-page .sms-report-filters > div {
    width: 100% !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
  }

  .sms-report-page .sms-report-filters .daily-report-item {
    width: 100% !important;
  }

  /* SMS Report Table - Convert to card layout */
  .sms-report-page .cus-table {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    overflow-x: visible;
  }

  /* Hide table header on mobile */
  .sms-report-page .ct-row.ct-h {
    display: none !important;
  }

  /* Convert each row to a card */
  .sms-report-page .ct-row:not(.ct-h) {
    display: flex;
    flex-direction: column;
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: 12px;
    padding: 20px;
    margin: 0;
    min-width: unset !important;
    width: 100% !important;
    box-shadow: var(--shadow-card);
    gap: 0;
    margin-bottom: 20px;
  }

  /* Style columns as card fields - stack vertically */
  .sms-report-page .ct-row:not(.ct-h) .ct-col {
    display: flex;
    flex-direction: column;
    padding: 12px 0;
    margin: 0;
    border-bottom: 1px solid var(--surface-sunken);
    width: 100% !important;
    max-width: 100% !important;
    text-align: left !important;
    flex: unset !important;
    min-width: unset !important;
    align-items: flex-start;
    position: relative;
    box-sizing: border-box !important;
  }

  /* Better spacing between fields */
  .sms-report-page .ct-row:not(.ct-h) .ct-col:not(:last-child) {
    margin-bottom: 0;
  }

  /* First, hide ALL labels in SMS report to override general mobile CSS */
  .sms-report-page .ct-row:not(.ct-h) .ct-col::before {
    content: '' !important;
    display: none !important;
  }

  /* Then explicitly show only the 4 labels we want with proper styling */
  .sms-report-page .ct-row:not(.ct-h) .ct-col:nth-child(2)::before {
    content: 'Body' !important;
    display: block !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    color: var(--text-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 8px !important;
    padding-bottom: 4px !important;
    border-bottom: 1px solid var(--border-default) !important;
  }

  .sms-report-page .ct-row:not(.ct-h) .ct-col:nth-child(3)::before {
    content: 'Sent' !important;
    display: block !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    color: var(--text-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 8px !important;
    padding-bottom: 4px !important;
    border-bottom: 1px solid var(--border-default) !important;
  }

  .sms-report-page .ct-row:not(.ct-h) .ct-col:nth-child(4)::before {
    content: 'Reply Sent' !important;
    display: block !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    color: var(--text-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 8px !important;
    padding-bottom: 4px !important;
    border-bottom: 1px solid var(--border-default) !important;
  }

  .sms-report-page .ct-row:not(.ct-h) .ct-col:nth-child(5)::before {
    content: 'Concierge' !important;
    display: block !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    color: var(--text-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 8px !important;
    padding-bottom: 4px !important;
    border-bottom: 1px solid var(--border-default) !important;
  }

  /* Remove border from last column (action button) */
  .sms-report-page .ct-row:not(.ct-h) .ct-col:last-child {
    border-bottom: none !important;
    padding-top: 8px !important;
    padding-bottom: 0 !important;
  }

  /* Profile image and name - make it prominent, no label needed */
  .sms-report-page .ct-row:not(.ct-h) .ct-col:first-child {
    border-bottom: 1px solid var(--border-default) !important;
    padding-bottom: 16px !important;
    margin-bottom: 12px !important;
    background: transparent !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-radius: 0 !important;
  }

  /* Profile image adjustments for cards */
  .sms-report-page .ct-row:not(.ct-h) .profile-img-name {
    flex-direction: row !important;
    align-items: center !important;
    text-align: left !important;
    gap: 12px !important;
    display: flex !important;
  }

  .sms-report-page .ct-row:not(.ct-h) .profile-img-name img {
    margin-bottom: 0 !important;
    width: 48px !important;
    height: 48px !important;
    flex-shrink: 0 !important;
    border-radius: 50% !important;
  }

  /* SMS/WhatsApp button styling */
  .sms-report-page .ct-row:not(.ct-h) .ct-col:last-child button {
    width: 100% !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    min-height: 44px !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    margin-top: 8px !important;
  }

  /* Ensure consistent font weight for all content in cards */
  .sms-report-page .ct-row:not(.ct-h) .ct-col {
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: var(--text-primary) !important;
  }

  /* Content spacing after labels */
  .sms-report-page .ct-row:not(.ct-h) .ct-col > *:not(::before) {
    margin-top: 0;
  }

  /* Better spacing for date/time columns */
  .sms-report-page .ct-row:not(.ct-h) .ct-col > div {
    margin: 2px 0;
  }

  /* Ensure body column content doesn't overflow */
  .sms-report-page .ct-row:not(.ct-h) .ct-col:nth-child(2) {
    min-width: 0 !important;
  }

  /* Make sure all text content in body wraps */
  .sms-report-page .ct-row:not(.ct-h) .ct-col:nth-child(2) p,
  .sms-report-page .ct-row:not(.ct-h) .ct-col:nth-child(2) span,
  .sms-report-page .ct-row:not(.ct-h) .ct-col:nth-child(2) div {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
  }

  /* Small font adjustments */
  .sms-report-page .ct-row:not(.ct-h) .ct-sm-font {
    font-size: 13px !important;
    line-height: 1.6;
  }

  /* Hide labels on empty columns */
  .sms-report-page .ct-row:not(.ct-h) .ct-col:empty::before {
    display: none !important;
  }

  /* Hide empty columns completely */
  .sms-report-page .ct-row:not(.ct-h) .ct-col:empty {
    display: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Reply sent icon adjustments */
  .sms-report-page .ct-row:not(.ct-h) .ct-si {
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  .sms-report-page .ct-row:not(.ct-h) .ct-si img {
    width: 24px !important;
    height: 24px !important;
    display: block;
  }

  /* Client domain badge adjustments */
  .sms-report-page .ct-row:not(.ct-h) .bg-mytPurple {
    margin-top: 8px !important;
    margin-left: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Ensure body text wraps properly - specifically for Body column (2nd column) */
  .sms-report-page .ct-row:not(.ct-h) .ct-col:nth-child(2) {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .sms-report-page .ct-row:not(.ct-h) .ct-col:nth-child(2) * {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    max-width: 100% !important;
  }

  /* Break long URLs and text in body */
  .sms-report-page .ct-row:not(.ct-h) .ct-col:nth-child(2),
  .sms-report-page .ct-row:not(.ct-h) .ct-col.ct-sm-font {
    -webkit-hyphens: auto !important;
            hyphens: auto !important;
  }

  /* Better alignment for date/time in Sent column */
  .sms-report-page .ct-row:not(.ct-h) .ct-col.ct-hf.ct-sm-font > div {
    margin: 2px 0;
    line-height: 1.4;
  }
}

@media (max-width: 480px) {
  /* Extra small mobile devices - SMS Report */
  .sms-report-page .sms-report-filters {
    padding: 0 4px;
    gap: 12px;
  }

  .sms-report-page .ct-row:not(.ct-h) {
    padding: 16px;
    border-radius: 10px;
  }

  .sms-report-page .ct-row:not(.ct-h) .ct-col {
    padding: 12px 0;
    font-size: 14px;
  }

  .sms-report-page .ct-row:not(.ct-h) .ct-sm-font {
    font-size: 12px !important;
    line-height: 1.5;
  }
}

/* Mobile Card Layout for Concierge Lifestyle Page */
@media (max-width: 768px) {
  /* Hide desktop table on mobile */
  .mobile-user-cards {
    display: block;
    padding: 0.5rem;
    background: var(--surface-sunken);
    margin-top: 1rem;
  }

  /* Scoped: only hide the desktop table on pages that render mobile-user-cards
     (Concierge Lifestyle). Previously unscoped, which hid Students search and
     other list tables app-wide below 768px. Uses the general subsequent-sibling
     combinator ~ (not +) so the rule still applies if an unrelated element is
     ever inserted between the table and the mobile-cards in the same parent. */
  .cus-table:has(~ .mobile-user-cards) {
    display: none;
  }

  .mobile-user-card {
    background: var(--surface-card);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 0.75rem;
    box-shadow: var(--shadow-card);
  }

  .mobile-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--surface-sunken);
  }

  .mobile-user-info {
    flex: 1;
  }

  .mobile-user-name {
    font-weight: 600;
    font-size: 1.05rem;
    margin-bottom: 0.25rem;
  }

  .mobile-user-name a {
    color: var(--text-primary);
    text-decoration: none;
  }

  .mobile-user-ethnicity {
    font-size: 0.85rem;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
  }

  .mobile-edit-icon {
    color: var(--brand-primary);
    font-size: 0.9rem;
    cursor: pointer;
  }

  .mobile-history-btn {
    color: var(--brand-primary);
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 500;
    display: inline-block;
    margin-top: 0.25rem;
    cursor: pointer;
  }

  .mobile-chat-btn {
    background: var(--brand-primary);
    color: var(--text-inverse);
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    white-space: nowrap;
  }

  .mobile-card-body {
    display: grid;
    gap: 0.75rem;
  }

  .mobile-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
  }

  .mobile-info-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 500;
  }

  .mobile-info-value {
    font-size: 0.9rem;
    font-weight: 600;
    text-align: right;
    flex-shrink: 0;
    margin-left: 1rem;
  }

  .mobile-date-value {
    font-size: 0.8rem;
    text-align: right;
  }

  .mobile-status-icon {
    color: var(--state-error);
    font-size: 1.2rem;
  }

  .mobile-status-icon img {
    width: 20px;
    height: 20px;
  }

  .mobile-score-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--state-info);
  }

  .mobile-info-icon {
    color: var(--state-info);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
  }

  .mobile-send-btn {
    background: var(--state-success);
    color: var(--text-inverse);
    border: none;
    padding: 0.75rem;
    border-radius: 6px;
    font-weight: 600;
    width: 100%;
    margin-top: 0.5rem;
    cursor: pointer;
    font-size: 0.95rem;
  }

  .mobile-wa-btn {
    background: var(--state-success) !important;
  }

  .mobile-session-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }

  .mobile-session-item {
    padding: 0.5rem;
    background: var(--surface-sunken);
    border-radius: 6px;
  }

  .mobile-session-header {
    font-size: 0.75rem;
    color: var(--text-primary);
    font-weight: 600;
    margin-bottom: 0.5rem;
    display: block;
  }

  .mobile-session-values {
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  .mobile-session-value {
    font-size: 1.1rem;
    font-weight: 600;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
  }

  .mobile-session-sublabel {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-weight: 400;
  }

  .mobile-credits-zero {
    color: var(--text-muted);
  }
}

/* Show desktop table on larger screens */
@media (min-width: 769px) {
  .mobile-user-cards {
    display: none;
  }

  .cus-table {
    display: block;
  }
}

/* Mobile Card Layout for SMS Report Page */
@media (max-width: 768px) {
  /* Hide desktop table on mobile for SMS report */
  .sms-report-page .cus-table {
    display: none;
  }

  /* Mobile filter styling for SMS report */
  .sms-report-page .sms-report-filters {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    padding: 1rem;
    background: var(--surface-card);
    border-bottom: 1px solid var(--border-default);
  }

  .sms-report-page .sms-report-filters > div {
    width: 100%;
    margin-right: 0 !important;
  }

  .sms-report-page .sms-report-filters .daily-report-item {
    width: 100%;
  }

  .mobile-sms-cards {
    display: block;
    padding: 0.5rem;
    background: var(--surface-sunken);
    margin-top: 0;
  }

  .mobile-sms-card {
    background: var(--surface-card);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 0.75rem;
    box-shadow: var(--shadow-card);
  }

  .mobile-sms-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
  }

  .mobile-sms-profile-section {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
  }

  .mobile-sms-profile-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--border-default);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
  }

  .mobile-sms-profile-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
  }

  .mobile-sms-student-link {
    text-decoration: none;
    color: var(--text-primary);
  }

  .mobile-sms-student-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
  }

  .mobile-sms-message-box {
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: 6px;
    padding: 0.75rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    color: var(--text-primary);
    word-wrap: break-word;
    line-height: 1.4;
  }

  .mobile-sms-reply-status-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding: 0.5rem 0;
  }

  .mobile-sms-reply-label {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 500;
  }

  .mobile-sms-reply-icon {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .mobile-sms-reply-icon img {
    width: 20px;
    height: 20px;
  }

  .mobile-sms-reply-not-sent {
    color: var(--state-error);
    font-size: 1.2rem;
    font-weight: 600;
  }

  .mobile-sms-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
  }

  .mobile-sms-footer-left {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }

  .mobile-sms-date-line,
  .mobile-sms-time-line {
    font-size: 0.8rem;
    color: var(--text-muted);
  }

  .mobile-sms-footer-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .mobile-sms-concierge-img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
  }

  .mobile-sms-concierge-link {
    text-decoration: none;
    color: var(--text-primary);
    font-size: 0.85rem;
  }

  .mobile-sms-concierge-name {
    font-size: 0.85rem;
    color: var(--text-primary);
  }

  .mobile-sms-action-btn {
    width: 100%;
    padding: 0.75rem;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-inverse);
    cursor: pointer;
    margin-top: 0.5rem;
  }

  .mobile-sms-wa-btn {
    background: var(--state-success);
  }

  .mobile-sms-sms-btn {
    background: var(--brand-primary);
  }

  .mobile-sms-action-btn:hover {
    opacity: 0.9;
  }
}

/* Show desktop table on larger screens for SMS report */
@media (min-width: 769px) {
  .sms-report-page .mobile-sms-cards {
    display: none;
  }

  .sms-report-page .cus-table {
    display: block;
  }
}

/* Sales-task-list inline call-recording slider — neutralise leaked global
   input styling (border/box-shadow/outline pill) across all states. */
.stl-range,
.stl-range:hover,
.stl-range:focus,
.stl-range:focus-visible,
.stl-range:active {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}
:root{--rt-color-white:#fff;--rt-color-dark:#222;--rt-color-success:#8dc572;--rt-color-error:#be6464;--rt-color-warning:#f0ad4e;--rt-color-info:#337ab7;--rt-opacity:0.9;--rt-transition-show-delay:0.15s;--rt-transition-closing-delay:0.15s;--rt-arrow-size:8px}.core-styles-module_tooltip__3vRRp{left:0;opacity:0;pointer-events:none;position:absolute;top:0;will-change:opacity}.core-styles-module_fixed__pcSol{position:fixed}.core-styles-module_arrow__cvMwQ{-webkit-backface-visibility:hidden;backface-visibility:hidden;background:inherit;position:absolute;z-index:-1}.core-styles-module_content__BRKdB{position:relative;z-index:1}.core-styles-module_noArrow__xock6{display:none}.core-styles-module_clickable__ZuTTB{pointer-events:auto}.core-styles-module_show__Nt9eE{opacity:var(--rt-opacity);transition:opacity var(--rt-transition-show-delay) ease-out}.core-styles-module_closing__sGnxF{opacity:0;transition:opacity var(--rt-transition-closing-delay) ease-in}.styles-module_tooltip__mnnfp{border-radius:3px;font-size:90%;width:-webkit-max-content;width:max-content}.styles-module_content__ydYdI{background:inherit;border-radius:inherit;padding:8px 16px}.styles-module_arrow__K0L3T{height:var(--rt-arrow-size);width:var(--rt-arrow-size)}[class*=react-tooltip__place-top]>.styles-module_arrow__K0L3T{transform:rotate(45deg)}[class*=react-tooltip__place-right]>.styles-module_arrow__K0L3T{transform:rotate(135deg)}[class*=react-tooltip__place-bottom]>.styles-module_arrow__K0L3T{transform:rotate(225deg)}[class*=react-tooltip__place-left]>.styles-module_arrow__K0L3T{transform:rotate(315deg)}.styles-module_dark__xNqje{background:var(--rt-color-dark);color:var(--rt-color-white)}.styles-module_light__Z6W-X{background-color:var(--rt-color-white);color:var(--rt-color-dark)}.styles-module_success__A2AKt{background-color:var(--rt-color-success);color:var(--rt-color-white)}.styles-module_warning__SCK0X{background-color:var(--rt-color-warning);color:var(--rt-color-white)}.styles-module_error__JvumD{background-color:var(--rt-color-error);color:var(--rt-color-white)}.styles-module_info__BWdHW{background-color:var(--rt-color-info);color:var(--rt-color-white)}/*
 * Hridaya design tokens.
 *
 * Tokens marked "PR 2" are not consumed yet — they're the vocabulary the
 * inline-style codemod (scripts/codemod-inline-colors.js) will map color
 * literals onto. Keep them defined so the codemod's mapping table compiles
 * without manual rewires in every per-feature cleanup PR.
 */
:root {
  --surface-page: #eff0f1;
  --surface-card: #ffffff;
  --surface-sunken: #f1f5f9;
  --surface-inverse: #111827;
  /* Subtle row highlight to set a row apart from its neighbours (e.g. members in
     the concierge list) without shouting. A soft blue — deliberately distinct from
     --surface-sunken (the hover tint) so a highlighted row doesn't read as "hovered".
     The -hover variant is a touch deeper so member rows keep their identity on hover. */
  --surface-row-highlight: #dcebff;
  --surface-row-highlight-hover: #c9ddfb;

  --surface-nav: #1a2b4a;
  --border-nav: #0f1a2e;
  --text-on-nav: #ffffff;
  /* Sidebar: muted captions, row hover / current page, and the search box. */
  --text-on-nav-muted: #9fb0cc;
  --surface-nav-hover: #22375e;
  --surface-nav-active: #2c4677;
  --surface-nav-input: #12203a;
  --border-nav-input: #2d4370;

  --text-primary: #111827;
  --text-secondary: #374151;
  --text-muted: #6b7280;
  --text-inverse: #ffffff;
  /* Form field label (slate) — matches design label color #264150. */
  --text-label: #264150;

  --border-default: #cfcfcf;
  --border-emphasis: #9ca3af;

  --brand-primary: #ee731b;
  --brand-primary-hover: #d4611a;
  --brand-secondary: #cc5500;
  --brand-secondary-hover: #aa4400;
  /* Translucent brand tints for "selected / branded chip" surfaces (icon chips,
     highlighted rows). Baked as rgba rather than an opacity modifier because
     Tailwind 3 can't apply `/opacity` to a var()-backed color. */
  --brand-primary-soft: rgba(238, 115, 27, 0.1);
  --brand-primary-ring: rgba(238, 115, 27, 0.3);
  /* Soft brand-orange tint for removable pills / selected-goal chips. */
  --brand-primary-subtle-bg: #fff1e7;
  --brand-primary-subtle-border: #ffe6d4;
  --brand-primary-subtle-text: #ff9041;
  /* Solid dark-purple action button (MYT purple) — e.g. "Resend" on the request dashboard. */
  --action-dark-bg: #321a50;
  --action-dark-bg-hover: #45276b;
  /* Request-status badges (request dashboard). Expired reuses the brand-orange subtle tint. */
  --badge-pending-bg: #fff4c9;
  --badge-pending-text: #3c310c;
  --badge-accepted-bg: #d7ffed;
  --badge-accepted-text: #04a777;
  --badge-cancelled-bg: #ffe4e4;
  --badge-cancelled-text: #d1453b;

  --state-success: #16a34a;
  --state-success-bg: #dcfce7;
  --state-success-text: #166534;
  --state-error: #dc2626;
  --state-error-bg: #fee2e2;
  /* Faint error tint for full-width row backgrounds (e.g. overdue reminders), lighter than -bg. */
  --state-error-bg-subtle: #fef2f2;
  --state-error-text: #991b1b;
  --state-warning: #d97706;
  --state-warning-bg: #fef3c7;
  --state-warning-text: #92400e;
  --state-info: #2563eb;
  --state-info-bg: #dbeafe;
  --state-info-text: #1e3a8a;
  /* Saturated info fill for buttons with white text. Intentionally NOT overridden in .dark —
     --state-info lightens to #60a5fa in dark (a text/icon tone), too light under white text. */
  --state-info-solid: #2563eb;

  --input-bg: #f7f7f7;
  --input-border: #d1d5db;
  --input-text: #321a50;
  --input-placeholder: #777777;
  --input-focus-border: #6366f1;
  --input-focus-bg: #ffffff;
  --input-focus-border: #321a50;

  --highlight-search: #fef08a;

  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.12);
  --shadow-modal: 0 10px 25px rgba(0, 0, 0, 0.2);

  --overlay-modal: rgba(0, 0, 0, 0.35);
  --overlay-modal-strong: rgba(17, 24, 39, 0.55);

  /* Conversation status colours (support inbox). Soft bg + strong text so the
     label stays legible; one distinct hue per lifecycle stage. */
  --status-open-bg: #dbeafe;
  --status-open-text: #1e40af;
  --status-progress-bg: #e0e7ff;
  --status-progress-text: #3730a3;
  --status-waiting-bg: #fef3c7;
  --status-waiting-text: #92400e;
  --status-snoozed-bg: #ede9fe;
  --status-snoozed-text: #5b21b6;
  --status-resolved-bg: #dcfce7;
  --status-resolved-text: #166534;
  --status-closed-bg: #e5e7eb;
  --status-closed-text: #374151;

  /* Ticket priority accents (support inbox) — used for dots/badges in the list,
     thread header, and the Actions priority picker. */
  --priority-urgent: #dc2626;
  --priority-high: #ea580c;
  --priority-medium: #d97706;
  --priority-low: #2563eb;

  /* Message source badges (support inbox thread). One hue per channel so the
     origin of each card reads at a glance; -bg is the soft chip fill behind the
     icon. Private notes reuse the amber note accent. */
  --si-src-email: #2563eb;
  --si-src-email-bg: #dbeafe;
  --si-src-whatsapp: #16a34a;
  --si-src-whatsapp-bg: #dcfce7;
  --si-src-sms: #0d9488;
  --si-src-sms-bg: #ccfbf1;
  --si-src-chat: #ea580c;
  --si-src-chat-bg: #ffedd5;
  --si-src-note: #b45309;
  --si-src-note-bg: #fef3c7;

  /* Always-legible text on a filled brand/coral button (white in both themes). */
  --text-on-brand: #ffffff;

  /* Match-preview banner (care Request-a-Session): soft violet strip carrying the matched /
     will-receive teacher counts, with clickable (underlined) numbers in a deeper purple. */
  --banner-match-bg: #ece9fe;
  --banner-match-text: #321a50;
  --banner-match-link: #5b21b6;

  /* Care Request-a-Session date/time picker — exact Figma "time-first-booking" dev specs.
     The soft outer panel, muted captions, navy time labels, and the rounded-square checkbox
     (empty grey vs soft-orange when selected) used for time slots & duration. */
  --picker-panel-border: #e7e7e7;
  --picker-caption: #a5a5a5;
  --time-slot-text: #384169;
  --check-bg: #f6f6f6;
  --check-border: #ededed;
  --check-selected-bg: #fff2e9;
  --check-selected-border: #ffd2b3;
  /* Unselected single-select radio disc (Figma "Form / Radio Button" base). */
  --radio-unselected-bg: #f0f0f0;
  /* Thin modal close (X) icon — Figma grey. */
  --modal-close-icon: #bfbfbf;

  /* Canvas behind a rendered email (Email Timeline FrameWrapper). Email HTML is
     authored for a white page and usually sets no background, so its default
     black text needs white under it in BOTH themes, as mail clients do. */
  --email-canvas: #ffffff;
}
/* Dark theme: "Onyx Stealth" — warm-neutral near-black ramp + coral accent (from Stitch design). */
.dark {
  /* Stays white: see --email-canvas in :root. */
  --email-canvas: #ffffff;
  --surface-page: #121316;
  --surface-card: #1e2022;
  --surface-sunken: #0d0e11;
  --surface-inverse: #e3e2e6;
  --surface-row-highlight: #22344f;
  --surface-row-highlight-hover: #2b415f;

  --surface-nav: #1e2022;
  --border-nav: #343538;
  --text-on-nav: #e3e2e6;
  --text-on-nav-muted: #9a9ca1;
  --surface-nav-hover: #2a2c2f;
  --surface-nav-active: #35383c;
  --surface-nav-input: #161719;
  --border-nav-input: #3a3c40;

  --text-primary: #ffffff;
  --text-secondary: #dadce0;
  --text-muted: #8c8e90;
  --text-inverse: #2f3033;
  /* Form field label — light slate for readability on dark surfaces. */
  --text-label: #c3ccd6;

  --border-default: #343538;
  --border-emphasis: #4d4f50;

  /* Onyx Stealth coral accent (Stitch primary-container #ff7043). Brand buttons use --text-inverse, which is
     dark in dark mode — matching the design's dark-text-on-coral; the lighter hover only raises that contrast. */
  --brand-primary: #ff7043;
  --brand-primary-hover: #ff8a66;
  --brand-secondary: #cc5500;
  --brand-secondary-hover: #e06010;
  /* Slightly stronger alpha than light so the tint still reads against the
     dark card surface. */
  --brand-primary-soft: rgba(255, 112, 67, 0.16);
  --brand-primary-ring: rgba(255, 112, 67, 0.4);
  /* Soft brand-orange tint for removable pills / selected-goal chips. */
  --brand-primary-subtle-bg: #3a2213;
  --brand-primary-subtle-border: #5c3a22;
  --brand-primary-subtle-text: #ffb27a;
  /* Solid dark-purple action button — lightened for contrast on dark surfaces. */
  --action-dark-bg: #5a4a85;
  --action-dark-bg-hover: #6b5b95;
  /* Request-status badges — hue-matched tints legible on dark surfaces. */
  --badge-pending-bg: #3a3313;
  --badge-pending-text: #f5d76e;
  --badge-accepted-bg: #0c3a2a;
  --badge-accepted-text: #34d399;
  --badge-cancelled-bg: #3a1a1a;
  --badge-cancelled-text: #ff8a80;

  --state-success: #34d399;
  --state-success-bg: #064e3b;
  --state-success-text: #86efac;
  --state-error: #ffb4ab;
  --state-error-bg: #93000a;
  /* Faint error tint for full-width row backgrounds (e.g. overdue reminders); reads as a sober
     red wash over the dark surface, not a solid red bar. */
  --state-error-bg-subtle: #2c1618;
  --state-error-text: #ffdad6;
  --state-warning: #fbbf24;
  --state-warning-bg: #451a03;
  --state-warning-text: #fdba74;
  --state-info: #60a5fa;
  --state-info-bg: #1e3a5f;
  --state-info-text: #93c5fd;

  --input-bg: #1a1b1e;
  --input-border: #343538;
  --input-text: #e3e2e6;
  --input-placeholder: #8c8e90;
  --input-focus-border: #818cf8;
  --input-focus-bg: #1e2022;
  --input-focus-border: #ff7043;

  --highlight-search: #854d0e;

  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-modal: 0 10px 25px rgba(0, 0, 0, 0.6);

  --overlay-modal: rgba(0, 0, 0, 0.65);
  --overlay-modal-strong: rgba(0, 0, 0, 0.75);

  --status-open-bg: #1e3a5f;
  --status-open-text: #93c5fd;
  --status-progress-bg: #312e81;
  --status-progress-text: #a5b4fc;
  --status-waiting-bg: #422006;
  --status-waiting-text: #fbbf24;
  --status-snoozed-bg: #3b0764;
  --status-snoozed-text: #c4b5fd;
  --status-resolved-bg: #14532d;
  --status-resolved-text: #86efac;
  --status-closed-bg: #374151;
  --status-closed-text: #d1d5db;

  --priority-urgent: #f87171;
  --priority-high: #fb923c;
  --priority-medium: #fbbf24;
  --priority-low: #60a5fa;

  --si-src-email: #60a5fa;
  --si-src-email-bg: #1e3a5f;
  --si-src-whatsapp: #34d399;
  --si-src-whatsapp-bg: #064e3b;
  --si-src-sms: #2dd4bf;
  --si-src-sms-bg: #134e4a;
  --si-src-chat: #fb923c;
  --si-src-chat-bg: #431407;
  --si-src-note: #fbbf24;
  --si-src-note-bg: #451a03;

  --text-on-brand: #ffffff;

  /* Match-preview banner — hue-matched tints legible on dark surfaces. */
  --banner-match-bg: #2a2440;
  --banner-match-text: #d6ccf0;
  --banner-match-link: #c4b5fd;

  /* Care Request-a-Session picker — hue-matched for dark surfaces. */
  --picker-panel-border: #343538;
  --picker-caption: #8c8e90;
  --time-slot-text: #c3ccd6;
  --check-bg: #1a1b1e;
  --check-border: #343538;
  --check-selected-bg: #3a2213;
  --check-selected-border: #5c3a22;
  --radio-unselected-bg: #2a2c30;
  --modal-close-icon: #8c8e90;
}
*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}
::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}
/*
 ! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
 */
/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/
*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}
::before,
::after {
  --tw-content: '';
}
/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/
html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */ /* 3 */
  tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}
/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/
body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}
/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/
hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}
/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}
/*
Remove the default font size and weight for headings.
*/
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}
/*
Reset links to optimize for opt-in styling instead of opt-out.
*/
a {
  color: inherit;
  text-decoration: inherit;
}
/*
Add the correct font weight in Edge and Safari.
*/
b,
strong {
  font-weight: bolder;
}
/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}
/*
Add the correct font size in all browsers.
*/
small {
  font-size: 80%;
}
/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/
table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}
/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}
/*
Remove the inheritance of text transform in Edge and Firefox.
*/
button,
select {
  text-transform: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/
button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}
/*
Use the modern Firefox focus style for all focusable elements.
*/
:-moz-focusring {
  outline: auto;
}
/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/
:-moz-ui-invalid {
  box-shadow: none;
}
/*
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
  vertical-align: baseline;
}
/*
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}
/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}
/*
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
  -webkit-appearance: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}
/*
Add the correct display in Chrome and Safari.
*/
summary {
  display: list-item;
}
/*
Removes the default spacing and border for appropriate elements.
*/
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}
fieldset {
  margin: 0;
  padding: 0;
}
legend {
  padding: 0;
}
ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}
/*
Prevent resizing textareas horizontally by default.
*/
textarea {
  resize: vertical;
}
/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/
input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}
/*
Set the default cursor for buttons.
*/
button,
[role="button"] {
  cursor: pointer;
}
/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}
/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}
/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/
img,
video {
  max-width: 100%;
  height: auto;
}
/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
.\!container {
  width: 100% !important;
}
.container {
  width: 100%;
}
@media (min-width: 640px) {
  .\!container {
    max-width: 640px !important;
  }
  .container {
    max-width: 640px;
  }
}
@media (min-width: 768px) {
  .\!container {
    max-width: 768px !important;
  }
  .container {
    max-width: 768px;
  }
}
@media (min-width: 1024px) {
  .\!container {
    max-width: 1024px !important;
  }
  .container {
    max-width: 1024px;
  }
}
@media (min-width: 1280px) {
  .\!container {
    max-width: 1280px !important;
  }
  .container {
    max-width: 1280px;
  }
}
@media (min-width: 1536px) {
  .\!container {
    max-width: 1536px !important;
  }
  .container {
    max-width: 1536px;
  }
}
.common-page-container {
  width: calc(90% - 60px);
  padding: 20px 30px;
  margin: 20px 5%;
  background: #FFFFFF;
  border-radius: 10px;
  overflow: auto;
  position: relative;
}
button {
  padding: 10px 20px;
  border-radius: 5px;
  background: var(--brand-secondary);
  border: 1px solid var(--brand-secondary);
  color: var(--text-inverse);
  font-size: 14px;
  cursor: pointer;
  transition: 0.2s linear;
  margin: 5px;
}
button:focus {
  outline: none;
}
.button-secondary {
  background: var(--surface-card);
  color: var(--brand-secondary);
}
button:hover {
  color: var(--brand-secondary);
  background: var(--surface-card);
  transition: 0.2s linear;
}
.button-disabled {
  background: #c7cefc;
  border: 1px solid #c7cefc;
  cursor: default;
}
.button-disabled:hover {
  color: #fff;
  background: #c7cefc;
  transition: none;
}
textarea {
  display: block;
  width: 100%;
  height: 46px;
  padding: 0.375rem 0.75rem;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--input-text);
  background: var(--input-bg);
  background-clip: padding-box;
  border-radius: 7px;
  transition: all 0.15s ease-in-out;
  border: 2px solid transparent;
}
textarea:hover {
  border: 2px solid;
  color: var(--input-text);
  background-color: var(--input-focus-bg);
  border-color: var(--input-focus-border);
  outline: 0;
  box-shadow: 0 0 0 0.2rem#c7b8da;
}
textarea:focus {
  border: 2px solid;
  color: var(--input-text);
  background-color: var(--input-focus-bg);
  border-color: var(--input-focus-border);
  outline: 0;
  box-shadow: 0 0 0 0.2rem#c7b8da;
}
textarea ::-webkit-input-placeholder {
  color: var(--input-placeholder);
}
textarea ::-moz-placeholder {
  color: var(--input-placeholder);
}
textarea :-ms-input-placeholder {
  color: var(--input-placeholder);
}
textarea :-moz-placeholder {
  color: var(--input-placeholder);
}
input {
  display: block;
  width: 100%;
  height: 46px !important;
  padding: 0.375rem 0.75rem;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--input-text);
  background: var(--input-bg);
  background-clip: padding-box;
  border-radius: 7px !important;
  transition: all 0.15s ease-in-out;
  border: 2px solid transparent;
}
input:hover {
  border: 2px solid;
  color: var(--input-text);
  background-color: var(--input-focus-bg);
  border-color: var(--input-focus-border);
  outline: 0;
  box-shadow: 0 0 0 0.2rem#c7b8da;
}
input:focus {
  border: 2px solid;
  color: var(--input-text);
  background-color: var(--input-focus-bg);
  border-color: var(--input-focus-border);
  outline: 0;
  box-shadow: 0 0 0 0.2rem#c7b8da;
}
input ::-webkit-input-placeholder {
  color: var(--input-placeholder);
}
input ::-moz-placeholder {
  color: var(--input-placeholder);
}
input :-ms-input-placeholder {
  color: var(--input-placeholder);
}
input :-moz-placeholder {
  color: var(--input-placeholder);
}
select {
  display: block;
  width: 100%;
  height: 46px !important;
  padding: 0.375rem 0.75rem;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--input-text);
  background: var(--input-bg) !important;
  background-clip: padding-box;
  border-radius: 7px !important;
  transition: all 0.15s ease-in-out;
  border: 2px solid transparent;
  cursor: pointer;
}
select:hover {
  border: 2px solid;
  color: var(--input-text);
  background-color: var(--input-focus-bg);
  border-color: var(--input-focus-border);
  outline: 0;
  box-shadow: 0 0 0 0.2rem#c7b8da;
}
select:focus {
  border: 2px solid;
  color: var(--input-text);
  background-color: var(--input-focus-bg);
  border-color: var(--input-focus-border);
  outline: 0;
  box-shadow: 0 0 0 0.2rem#c7b8da;
}
select ::-webkit-input-placeholder {
  color: var(--input-placeholder);
}
select ::-moz-placeholder {
  color: var(--input-placeholder);
}
select :-ms-input-placeholder {
  color: var(--input-placeholder);
}
select :-moz-placeholder {
  color: var(--input-placeholder);
}
input[type="checkbox"], input[type="radio"] {
  display: block;
  width: auto;
  height: auto;
  padding: 0;
  font-size: unset;
  font-weight: unset;
  line-height: unset;
  color: unset;
  background: unset;
  background-clip: unset;
  border-radius: unset;
  transition: unset;
  border: unset;
}
input[type="checkbox"]:hover, input[type="radio"]:hover {
  border: unset;
  color: unset;
  background-color: unset;
  border-color: unset;
  outline: unset;
  box-shadow: unset;
}
input[type="checkbox"]:focus, input[type="radio"]:focus {
  border: unset;
  color: unset;
  background-color: unset;
  border-color: unset;
  outline: unset;
  box-shadow: unset;
}
input[type="checkbox"] ::-webkit-input-placeholder, input[type="radio"] ::-webkit-input-placeholder {
  color: var(--input-placeholder);
}
input[type="checkbox"] ::-moz-placeholder, input[type="radio"] ::-moz-placeholder {
  color: var(--input-placeholder);
}
input[type="checkbox"] :-ms-input-placeholder, input[type="radio"] :-ms-input-placeholder {
  color: var(--input-placeholder);
}
input[type="checkbox"] :-moz-placeholder, input[type="radio"] :-moz-placeholder {
  color: var(--input-placeholder);
}
.btn-white-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 1px solid #E7E7E7 !important;
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
  color: #222222;
  box-shadow: 0px 2px 4px rgba(188, 188, 188, 0.2);
  border-style: none;
  outline: none;
}
.btn-white-icon:hover {
  border: 1px solid #222222 !important;
  box-shadow: 0px 2px 4px rgba(188, 188, 188, 0.22);
  border-style: none;
  outline: none;
}
.btn-white-icon:focus {
  border: 1px solid #222222 !important;
  box-shadow: 0px 2px 4px rgba(188, 188, 188, 0.22);
  border-style: none;
  outline: none;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.pointer-events-none {
  pointer-events: none;
}
.\!visible {
  visibility: visible !important;
}
.visible {
  visibility: visible;
}
.invisible {
  visibility: hidden;
}
.collapse {
  visibility: collapse;
}
.static {
  position: static;
}
.fixed {
  position: fixed;
}
.\!absolute {
  position: absolute !important;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.sticky {
  position: -webkit-sticky;
  position: sticky;
}
.inset-0 {
  inset: 0px;
}
.\!right-2 {
  right: 0.5rem !important;
}
.\!top-1\/2 {
  top: 50% !important;
}
.-left-4 {
  left: -1rem;
}
.-left-\[7px\] {
  left: -7px;
}
.bottom-0 {
  bottom: 0px;
}
.bottom-4 {
  bottom: 1rem;
}
.bottom-\[-30px\] {
  bottom: -30px;
}
.left-0 {
  left: 0px;
}
.left-2 {
  left: 0.5rem;
}
.left-3 {
  left: 0.75rem;
}
.left-5 {
  left: 1.25rem;
}
.left-\[11px\] {
  left: 11px;
}
.left-\[13px\] {
  left: 13px;
}
.left-\[17px\] {
  left: 17px;
}
.left-\[18px\] {
  left: 18px;
}
.right-0 {
  right: 0px;
}
.right-1 {
  right: 0.25rem;
}
.right-2 {
  right: 0.5rem;
}
.right-3 {
  right: 0.75rem;
}
.right-4 {
  right: 1rem;
}
.right-5 {
  right: 1.25rem;
}
.right-\[10px\] {
  right: 10px;
}
.top-0 {
  top: 0px;
}
.top-1 {
  top: 0.25rem;
}
.top-1\/2 {
  top: 50%;
}
.top-20 {
  top: 5rem;
}
.top-3 {
  top: 0.75rem;
}
.top-4 {
  top: 1rem;
}
.top-5 {
  top: 1.25rem;
}
.top-\[17px\] {
  top: 17px;
}
.top-\[18px\] {
  top: 18px;
}
.top-\[7px\] {
  top: 7px;
}
.z-10 {
  z-index: 10;
}
.z-20 {
  z-index: 20;
}
.z-30 {
  z-index: 30;
}
.z-40 {
  z-index: 40;
}
.z-50 {
  z-index: 50;
}
.z-\[1\] {
  z-index: 1;
}
.z-\[99\] {
  z-index: 99;
}
.order-1 {
  order: 1;
}
.order-2 {
  order: 2;
}
.col-span-1 {
  grid-column: span 1 / span 1;
}
.col-span-12 {
  grid-column: span 12 / span 12;
}
.col-span-2 {
  grid-column: span 2 / span 2;
}
.col-span-3 {
  grid-column: span 3 / span 3;
}
.col-span-4 {
  grid-column: span 4 / span 4;
}
.float-right {
  float: right;
}
.m-0 {
  margin: 0px;
}
.m-2 {
  margin: 0.5rem;
}
.m-4 {
  margin: 1rem;
}
.-mx-1 {
  margin-left: -0.25rem;
  margin-right: -0.25rem;
}
.-mx-6 {
  margin-left: -1.5rem;
  margin-right: -1.5rem;
}
.mx-1 {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}
.mx-1\.5 {
  margin-left: 0.375rem;
  margin-right: 0.375rem;
}
.mx-2 {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}
.mx-4 {
  margin-left: 1rem;
  margin-right: 1rem;
}
.mx-6 {
  margin-left: 1.5rem;
  margin-right: 1.5rem;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.my-0 {
  margin-top: 0px;
  margin-bottom: 0px;
}
.my-0\.5 {
  margin-top: 0.125rem;
  margin-bottom: 0.125rem;
}
.my-1 {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}
.my-10 {
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
}
.my-4 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.my-5 {
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
}
.my-6 {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
.my-\[10px\] {
  margin-top: 10px;
  margin-bottom: 10px;
}
.my-\[5px\] {
  margin-top: 5px;
  margin-bottom: 5px;
}
.-ms-1 {
  -webkit-margin-start: -0.25rem;
          margin-inline-start: -0.25rem;
}
.-mt-1 {
  margin-top: -0.25rem;
}
.mb-0 {
  margin-bottom: 0px;
}
.mb-0\.5 {
  margin-bottom: 0.125rem;
}
.mb-1 {
  margin-bottom: 0.25rem;
}
.mb-1\.5 {
  margin-bottom: 0.375rem;
}
.mb-10 {
  margin-bottom: 2.5rem;
}
.mb-2 {
  margin-bottom: 0.5rem;
}
.mb-2\.5 {
  margin-bottom: 0.625rem;
}
.mb-3 {
  margin-bottom: 0.75rem;
}
.mb-4 {
  margin-bottom: 1rem;
}
.mb-5 {
  margin-bottom: 1.25rem;
}
.mb-6 {
  margin-bottom: 1.5rem;
}
.mb-80 {
  margin-bottom: 20rem;
}
.mb-\[10px\] {
  margin-bottom: 10px;
}
.mb-\[12px\] {
  margin-bottom: 12px;
}
.mb-\[14px\] {
  margin-bottom: 14px;
}
.mb-\[20px\] {
  margin-bottom: 20px;
}
.mb-\[21px\] {
  margin-bottom: 21px;
}
.mb-\[24px\] {
  margin-bottom: 24px;
}
.mb-\[30px\] {
  margin-bottom: 30px;
}
.mb-\[38px\] {
  margin-bottom: 38px;
}
.mb-\[4px\] {
  margin-bottom: 4px;
}
.mb-\[5px\] {
  margin-bottom: 5px;
}
.mb-\[6px\] {
  margin-bottom: 6px;
}
.mb-\[8px\] {
  margin-bottom: 8px;
}
.me-1 {
  -webkit-margin-end: 0.25rem;
          margin-inline-end: 0.25rem;
}
.me-2 {
  -webkit-margin-end: 0.5rem;
          margin-inline-end: 0.5rem;
}
.me-4 {
  -webkit-margin-end: 1rem;
          margin-inline-end: 1rem;
}
.ml-1 {
  margin-left: 0.25rem;
}
.ml-1\.5 {
  margin-left: 0.375rem;
}
.ml-2 {
  margin-left: 0.5rem;
}
.ml-2\.5 {
  margin-left: 0.625rem;
}
.ml-3 {
  margin-left: 0.75rem;
}
.ml-\[10px\] {
  margin-left: 10px;
}
.ml-\[6px\] {
  margin-left: 6px;
}
.ml-auto {
  margin-left: auto;
}
.mr-1 {
  margin-right: 0.25rem;
}
.mr-1\.5 {
  margin-right: 0.375rem;
}
.mr-10 {
  margin-right: 2.5rem;
}
.mr-2 {
  margin-right: 0.5rem;
}
.mr-2\.5 {
  margin-right: 0.625rem;
}
.mr-3 {
  margin-right: 0.75rem;
}
.mr-4 {
  margin-right: 1rem;
}
.mr-5 {
  margin-right: 1.25rem;
}
.mr-6 {
  margin-right: 1.5rem;
}
.mr-auto {
  margin-right: auto;
}
.ms-2 {
  -webkit-margin-start: 0.5rem;
          margin-inline-start: 0.5rem;
}
.mt-0 {
  margin-top: 0px;
}
.mt-0\.5 {
  margin-top: 0.125rem;
}
.mt-1 {
  margin-top: 0.25rem;
}
.mt-1\.5 {
  margin-top: 0.375rem;
}
.mt-10 {
  margin-top: 2.5rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-2\.5 {
  margin-top: 0.625rem;
}
.mt-3 {
  margin-top: 0.75rem;
}
.mt-4 {
  margin-top: 1rem;
}
.mt-5 {
  margin-top: 1.25rem;
}
.mt-6 {
  margin-top: 1.5rem;
}
.mt-7 {
  margin-top: 1.75rem;
}
.mt-8 {
  margin-top: 2rem;
}
.mt-\[10px\] {
  margin-top: 10px;
}
.mt-\[15px\] {
  margin-top: 15px;
}
.mt-\[20px\] {
  margin-top: 20px;
}
.mt-\[21px\] {
  margin-top: 21px;
}
.mt-\[25px\] {
  margin-top: 25px;
}
.mt-\[2px\] {
  margin-top: 2px;
}
.mt-\[40px\] {
  margin-top: 40px;
}
.mt-\[50px\] {
  margin-top: 50px;
}
.mt-\[5px\] {
  margin-top: 5px;
}
.mt-\[6px\] {
  margin-top: 6px;
}
.mt-\[8px\] {
  margin-top: 8px;
}
.mt-auto {
  margin-top: auto;
}
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}
.inline {
  display: inline;
}
.\!flex {
  display: flex !important;
}
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.table {
  display: table;
}
.grid {
  display: grid;
}
.contents {
  display: contents;
}
.hidden {
  display: none;
}
.\!h-\[40px\] {
  height: 40px !important;
}
.h-1\.5 {
  height: 0.375rem;
}
.h-1\/2 {
  height: 50%;
}
.h-10 {
  height: 2.5rem;
}
.h-12 {
  height: 3rem;
}
.h-14 {
  height: 3.5rem;
}
.h-2 {
  height: 0.5rem;
}
.h-2\.5 {
  height: 0.625rem;
}
.h-20 {
  height: 5rem;
}
.h-24 {
  height: 6rem;
}
.h-28 {
  height: 7rem;
}
.h-3 {
  height: 0.75rem;
}
.h-3\.5 {
  height: 0.875rem;
}
.h-4 {
  height: 1rem;
}
.h-46px {
  height: 2.875rem;
}
.h-48 {
  height: 12rem;
}
.h-5 {
  height: 1.25rem;
}
.h-6 {
  height: 1.5rem;
}
.h-7 {
  height: 1.75rem;
}
.h-8 {
  height: 2rem;
}
.h-9 {
  height: 2.25rem;
}
.h-96 {
  height: 24rem;
}
.h-\[100dvh\] {
  height: 100dvh;
}
.h-\[100px\] {
  height: 100px;
}
.h-\[16px\] {
  height: 16px;
}
.h-\[1px\] {
  height: 1px;
}
.h-\[20px\] {
  height: 20px;
}
.h-\[22px\] {
  height: 22px;
}
.h-\[24px\] {
  height: 24px;
}
.h-\[26\.5px\] {
  height: 26.5px;
}
.h-\[30px\] {
  height: 30px;
}
.h-\[32px\] {
  height: 32px;
}
.h-\[34px\] {
  height: 34px;
}
.h-\[350px\] {
  height: 350px;
}
.h-\[38px\] {
  height: 38px;
}
.h-\[40px\] {
  height: 40px;
}
.h-\[45px\] {
  height: 45px;
}
.h-\[46px\] {
  height: 46px;
}
.h-\[74\%\] {
  height: 74%;
}
.h-\[77px\] {
  height: 77px;
}
.h-\[78px\] {
  height: 78px;
}
.h-\[80px\] {
  height: 80px;
}
.h-\[80vh\] {
  height: 80vh;
}
.h-\[82px\] {
  height: 82px;
}
.h-\[calc\(92vh-72px\)\] {
  height: calc(92vh - 72px);
}
.h-\[inherit\] {
  height: inherit;
}
.h-auto {
  height: auto;
}
.h-fit {
  height: -webkit-fit-content;
  height: fit-content;
}
.h-full {
  height: 100%;
}
.h-screen {
  height: 100vh;
}
.max-h-400px {
  max-height: 25rem;
}
.max-h-64 {
  max-height: 16rem;
}
.max-h-72 {
  max-height: 18rem;
}
.max-h-80 {
  max-height: 20rem;
}
.max-h-96 {
  max-height: 24rem;
}
.max-h-\[100vh\] {
  max-height: 100vh;
}
.max-h-\[238px\] {
  max-height: 238px;
}
.max-h-\[300px\] {
  max-height: 300px;
}
.max-h-\[70vh\] {
  max-height: 70vh;
}
.max-h-\[720px\] {
  max-height: 720px;
}
.max-h-\[85vh\] {
  max-height: 85vh;
}
.max-h-\[90vh\] {
  max-height: 90vh;
}
.max-h-\[calc\(90dvh-90px\)\] {
  max-height: calc(90dvh - 90px);
}
.min-h-0 {
  min-height: 0px;
}
.min-h-\[100px\] {
  min-height: 100px;
}
.min-h-\[120px\] {
  min-height: 120px;
}
.min-h-\[180px\] {
  min-height: 180px;
}
.min-h-\[280px\] {
  min-height: 280px;
}
.min-h-\[320px\] {
  min-height: 320px;
}
.min-h-\[360px\] {
  min-height: 360px;
}
.min-h-\[420px\] {
  min-height: 420px;
}
.min-h-\[70vh\] {
  min-height: 70vh;
}
.min-h-\[72px\] {
  min-height: 72px;
}
.min-h-\[76px\] {
  min-height: 76px;
}
.min-h-\[86px\] {
  min-height: 86px;
}
.min-h-screen {
  min-height: 100vh;
}
.w-1\.5 {
  width: 0.375rem;
}
.w-1\/2 {
  width: 50%;
}
.w-10 {
  width: 2.5rem;
}
.w-11 {
  width: 2.75rem;
}
.w-12 {
  width: 3rem;
}
.w-14 {
  width: 3.5rem;
}
.w-160px {
  width: 160px;
}
.w-2 {
  width: 0.5rem;
}
.w-2\.5 {
  width: 0.625rem;
}
.w-2\/3 {
  width: 66.666667%;
}
.w-2\/6 {
  width: 33.333333%;
}
.w-20 {
  width: 5rem;
}
.w-200px {
  width: 12.5rem;
}
.w-24 {
  width: 6rem;
}
.w-250px {
  width: 15.625rem;
}
.w-3 {
  width: 0.75rem;
}
.w-3\.5 {
  width: 0.875rem;
}
.w-3\/4 {
  width: 75%;
}
.w-32 {
  width: 8rem;
}
.w-4 {
  width: 1rem;
}
.w-4\/6 {
  width: 66.666667%;
}
.w-40 {
  width: 10rem;
}
.w-48 {
  width: 12rem;
}
.w-5 {
  width: 1.25rem;
}
.w-5\/6 {
  width: 83.333333%;
}
.w-6 {
  width: 1.5rem;
}
.w-7 {
  width: 1.75rem;
}
.w-72 {
  width: 18rem;
}
.w-8 {
  width: 2rem;
}
.w-80 {
  width: 20rem;
}
.w-9 {
  width: 2.25rem;
}
.w-\[116px\] {
  width: 116px;
}
.w-\[11rem\] {
  width: 11rem;
}
.w-\[130px\] {
  width: 130px;
}
.w-\[16px\] {
  width: 16px;
}
.w-\[170px\] {
  width: 170px;
}
.w-\[200px\] {
  width: 200px;
}
.w-\[208px\] {
  width: 208px;
}
.w-\[20px\] {
  width: 20px;
}
.w-\[22px\] {
  width: 22px;
}
.w-\[24px\] {
  width: 24px;
}
.w-\[30px\] {
  width: 30px;
}
.w-\[32\%\] {
  width: 32%;
}
.w-\[32px\] {
  width: 32px;
}
.w-\[350px\] {
  width: 350px;
}
.w-\[35px\] {
  width: 35px;
}
.w-\[38px\] {
  width: 38px;
}
.w-\[40px\] {
  width: 40px;
}
.w-\[420px\] {
  width: 420px;
}
.w-\[430px\] {
  width: 430px;
}
.w-\[45px\] {
  width: 45px;
}
.w-\[60px\] {
  width: 60px;
}
.w-\[90px\] {
  width: 90px;
}
.w-\[95\%\] {
  width: 95%;
}
.w-\[98px\] {
  width: 98px;
}
.w-\[min\(320px\2c calc\(100vw-40px\)\)\] {
  width: min(320px, calc(100vw - 40px));
}
.w-\[min\(420px\2c calc\(100vw-40px\)\)\] {
  width: min(420px, calc(100vw - 40px));
}
.w-auto {
  width: auto;
}
.w-fit {
  width: -webkit-fit-content;
  width: fit-content;
}
.w-full {
  width: 100%;
}
.w-max {
  width: -webkit-max-content;
  width: max-content;
}
.w-px {
  width: 1px;
}
.w-screen {
  width: 100vw;
}
.min-w-0 {
  min-width: 0px;
}
.min-w-\[140px\] {
  min-width: 140px;
}
.min-w-\[1500px\] {
  min-width: 1500px;
}
.min-w-\[150px\] {
  min-width: 150px;
}
.min-w-\[160px\] {
  min-width: 160px;
}
.min-w-\[16px\] {
  min-width: 16px;
}
.min-w-\[200px\] {
  min-width: 200px;
}
.min-w-\[220px\] {
  min-width: 220px;
}
.min-w-\[250px\] {
  min-width: 250px;
}
.min-w-\[260px\] {
  min-width: 260px;
}
.min-w-\[280px\] {
  min-width: 280px;
}
.min-w-\[320px\] {
  min-width: 320px;
}
.min-w-\[360px\] {
  min-width: 360px;
}
.min-w-\[520px\] {
  min-width: 520px;
}
.min-w-\[72px\] {
  min-width: 72px;
}
.min-w-full {
  min-width: 100%;
}
.max-w-2xl {
  max-width: 42rem;
}
.max-w-3xl {
  max-width: 48rem;
}
.max-w-4xl {
  max-width: 56rem;
}
.max-w-5xl {
  max-width: 64rem;
}
.max-w-6xl {
  max-width: 72rem;
}
.max-w-7xl {
  max-width: 80rem;
}
.max-w-\[1000px\] {
  max-width: 1000px;
}
.max-w-\[1100px\] {
  max-width: 1100px;
}
.max-w-\[140px\] {
  max-width: 140px;
}
.max-w-\[180px\] {
  max-width: 180px;
}
.max-w-\[228px\] {
  max-width: 228px;
}
.max-w-\[240px\] {
  max-width: 240px;
}
.max-w-\[24px\] {
  max-width: 24px;
}
.max-w-\[280px\] {
  max-width: 280px;
}
.max-w-\[350px\] {
  max-width: 350px;
}
.max-w-\[420px\] {
  max-width: 420px;
}
.max-w-\[44px\] {
  max-width: 44px;
}
.max-w-\[500px\] {
  max-width: 500px;
}
.max-w-\[60px\] {
  max-width: 60px;
}
.max-w-\[618px\] {
  max-width: 618px;
}
.max-w-\[680px\] {
  max-width: 680px;
}
.max-w-\[80px\] {
  max-width: 80px;
}
.max-w-\[900px\] {
  max-width: 900px;
}
.max-w-\[940px\] {
  max-width: 940px;
}
.max-w-full {
  max-width: 100%;
}
.max-w-lg {
  max-width: 32rem;
}
.max-w-md {
  max-width: 28rem;
}
.max-w-sm {
  max-width: 24rem;
}
.max-w-xl {
  max-width: 36rem;
}
.flex-1 {
  flex: 1 1 0%;
}
.flex-auto {
  flex: 1 1 auto;
}
.flex-shrink-0 {
  flex-shrink: 0;
}
.\!shrink-0 {
  flex-shrink: 0 !important;
}
.shrink {
  flex-shrink: 1;
}
.shrink-0 {
  flex-shrink: 0;
}
.flex-grow {
  flex-grow: 1;
}
.grow {
  flex-grow: 1;
}
.table-auto {
  table-layout: auto;
}
.table-fixed {
  table-layout: fixed;
}
.border-collapse {
  border-collapse: collapse;
}
.\!border-separate {
  border-collapse: separate !important;
}
.\!-translate-y-1\/2 {
  --tw-translate-y: -50% !important;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
}
.-translate-x-1\/2 {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-1\/2 {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-0 {
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-1 {
  --tw-translate-x: 0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-6 {
  --tw-translate-x: 1.5rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-\[32px\] {
  --tw-translate-x: 32px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-180 {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@keyframes pulse {
  50% {
    opacity: .5;
  }
}
.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.animate-spin {
  animation: spin 1s linear infinite;
}
.cursor-default {
  cursor: default;
}
.cursor-not-allowed {
  cursor: not-allowed;
}
.cursor-pointer {
  cursor: pointer;
}
.cursor-text {
  cursor: text;
}
.cursor-wait {
  cursor: wait;
}
.select-none {
  -webkit-user-select: none;
          user-select: none;
}
.resize-none {
  resize: none;
}
.resize-y {
  resize: vertical;
}
.resize {
  resize: both;
}
.list-inside {
  list-style-position: inside;
}
.list-disc {
  list-style-type: disc;
}
.list-none {
  list-style-type: none;
}
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-12 {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-\[repeat\(14\2c minmax\(0\2c 1fr\)\)\] {
  grid-template-columns: repeat(14,minmax(0,1fr));
}
.flex-row {
  flex-direction: row;
}
.flex-col {
  flex-direction: column;
}
.flex-col-reverse {
  flex-direction: column-reverse;
}
.flex-wrap {
  flex-wrap: wrap;
}
.flex-nowrap {
  flex-wrap: nowrap;
}
.items-start {
  align-items: flex-start;
}
.items-end {
  align-items: flex-end;
}
.\!items-center {
  align-items: center !important;
}
.items-center {
  align-items: center;
}
.items-baseline {
  align-items: baseline;
}
.items-stretch {
  align-items: stretch;
}
.justify-start {
  justify-content: flex-start;
}
.justify-end {
  justify-content: flex-end;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.justify-evenly {
  justify-content: space-evenly;
}
.\!gap-1 {
  gap: 0.25rem !important;
}
.\!gap-1\.5 {
  gap: 0.375rem !important;
}
.\!gap-2 {
  gap: 0.5rem !important;
}
.gap-0 {
  gap: 0px;
}
.gap-0\.5 {
  gap: 0.125rem;
}
.gap-1 {
  gap: 0.25rem;
}
.gap-1\.5 {
  gap: 0.375rem;
}
.gap-10 {
  gap: 2.5rem;
}
.gap-14 {
  gap: 3.5rem;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-2\.5 {
  gap: 0.625rem;
}
.gap-3 {
  gap: 0.75rem;
}
.gap-3\.5 {
  gap: 0.875rem;
}
.gap-4 {
  gap: 1rem;
}
.gap-5 {
  gap: 1.25rem;
}
.gap-6 {
  gap: 1.5rem;
}
.gap-7 {
  gap: 1.75rem;
}
.gap-\[10px\] {
  gap: 10px;
}
.gap-\[12px\] {
  gap: 12px;
}
.gap-\[14px\] {
  gap: 14px;
}
.gap-\[15px\] {
  gap: 15px;
}
.gap-\[16px\] {
  gap: 16px;
}
.gap-\[18px\] {
  gap: 18px;
}
.gap-\[19px\] {
  gap: 19px;
}
.gap-\[20px\] {
  gap: 20px;
}
.gap-\[24px\] {
  gap: 24px;
}
.gap-\[25px\] {
  gap: 25px;
}
.gap-\[2px\] {
  gap: 2px;
}
.gap-\[30px\] {
  gap: 30px;
}
.gap-\[35px\] {
  gap: 35px;
}
.gap-\[45px\] {
  gap: 45px;
}
.gap-\[4px\] {
  gap: 4px;
}
.gap-\[5px\] {
  gap: 5px;
}
.gap-\[6px\] {
  gap: 6px;
}
.gap-\[8px\] {
  gap: 8px;
}
.gap-x-1\.5 {
  column-gap: 0.375rem;
}
.gap-x-2 {
  column-gap: 0.5rem;
}
.gap-x-2\.5 {
  column-gap: 0.625rem;
}
.gap-x-3 {
  column-gap: 0.75rem;
}
.gap-x-4 {
  column-gap: 1rem;
}
.gap-x-5 {
  column-gap: 1.25rem;
}
.gap-x-6 {
  column-gap: 1.5rem;
}
.gap-x-8 {
  column-gap: 2rem;
}
.gap-y-0\.5 {
  row-gap: 0.125rem;
}
.gap-y-1 {
  row-gap: 0.25rem;
}
.gap-y-1\.5 {
  row-gap: 0.375rem;
}
.gap-y-2 {
  row-gap: 0.5rem;
}
.gap-y-3 {
  row-gap: 0.75rem;
}
.gap-y-4 {
  row-gap: 1rem;
}
.-space-x-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(-0.5rem * var(--tw-space-x-reverse));
  margin-left: calc(-0.5rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.25rem * var(--tw-space-x-reverse));
  margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.75rem * var(--tw-space-x-reverse));
  margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(1rem * var(--tw-space-x-reverse));
  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-y-0\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.125rem * var(--tw-space-y-reverse));
}
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.space-y-5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}
.divide-y > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}
.divide-gray-100 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(243 244 246 / var(--tw-divide-opacity, 1));
}
.divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-divide-opacity, 1));
}
.self-start {
  align-self: flex-start;
}
.self-end {
  align-self: flex-end;
}
.self-center {
  align-self: center;
}
.overflow-auto {
  overflow: auto;
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-visible {
  overflow: visible;
}
.overflow-scroll {
  overflow: scroll;
}
.overflow-x-auto {
  overflow-x: auto;
}
.overflow-y-auto {
  overflow-y: auto;
}
.overflow-x-hidden {
  overflow-x: hidden;
}
.overflow-y-scroll {
  overflow-y: scroll;
}
.scroll-smooth {
  scroll-behavior: smooth;
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.whitespace-normal {
  white-space: normal;
}
.whitespace-nowrap {
  white-space: nowrap;
}
.whitespace-pre-line {
  white-space: pre-line;
}
.whitespace-pre-wrap {
  white-space: pre-wrap;
}
.text-wrap {
  text-wrap: wrap;
}
.break-words {
  overflow-wrap: break-word;
}
.break-all {
  word-break: break-all;
}
.\!rounded-md {
  border-radius: 0.375rem !important;
}
.rounded {
  border-radius: 0.25rem;
}
.rounded-2xl {
  border-radius: 1rem;
}
.rounded-\[10px\] {
  border-radius: 10px;
}
.rounded-\[12px\] {
  border-radius: 12px;
}
.rounded-\[13px\] {
  border-radius: 13px;
}
.rounded-\[14px\] {
  border-radius: 14px;
}
.rounded-\[18px\] {
  border-radius: 18px;
}
.rounded-\[20px\] {
  border-radius: 20px;
}
.rounded-\[6px\] {
  border-radius: 6px;
}
.rounded-\[7px\] {
  border-radius: 7px;
}
.rounded-\[8px\] {
  border-radius: 8px;
}
.rounded-\[9px\] {
  border-radius: 9px;
}
.rounded-full {
  border-radius: 9999px;
}
.rounded-lg {
  border-radius: 0.5rem;
}
.rounded-md {
  border-radius: 0.375rem;
}
.rounded-none {
  border-radius: 0px;
}
.rounded-sm {
  border-radius: 0.125rem;
}
.rounded-xl {
  border-radius: 0.75rem;
}
.rounded-b {
  border-bottom-right-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}
.rounded-b-2xl {
  border-bottom-right-radius: 1rem;
  border-bottom-left-radius: 1rem;
}
.rounded-b-\[10px\] {
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
}
.rounded-b-xl {
  border-bottom-right-radius: 0.75rem;
  border-bottom-left-radius: 0.75rem;
}
.rounded-t {
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}
.rounded-t-\[15px\] {
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}
.rounded-t-xl {
  border-top-left-radius: 0.75rem;
  border-top-right-radius: 0.75rem;
}
.rounded-bl-\[14px\] {
  border-bottom-left-radius: 14px;
}
.rounded-bl-\[18px\] {
  border-bottom-left-radius: 18px;
}
.rounded-br-\[14px\] {
  border-bottom-right-radius: 14px;
}
.rounded-tl-2xl {
  border-top-left-radius: 1rem;
}
.rounded-tl-3xl {
  border-top-left-radius: 1.5rem;
}
.rounded-tl-\[10px\] {
  border-top-left-radius: 10px;
}
.rounded-tl-\[14px\] {
  border-top-left-radius: 14px;
}
.rounded-tr-3xl {
  border-top-right-radius: 1.5rem;
}
.rounded-tr-\[14px\] {
  border-top-right-radius: 14px;
}
.\!border {
  border-width: 1px !important;
}
.\!border-0 {
  border-width: 0px !important;
}
.border {
  border-width: 1px;
}
.border-0 {
  border-width: 0px;
}
.border-2 {
  border-width: 2px;
}
.border-\[2px\] {
  border-width: 2px;
}
.border-\[3px\] {
  border-width: 3px;
}
.border-x {
  border-left-width: 1px;
  border-right-width: 1px;
}
.border-x-0 {
  border-left-width: 0px;
  border-right-width: 0px;
}
.border-y {
  border-top-width: 1px;
  border-bottom-width: 1px;
}
.border-b {
  border-bottom-width: 1px;
}
.border-b-2 {
  border-bottom-width: 2px;
}
.border-b-\[1\.5px\] {
  border-bottom-width: 1.5px;
}
.border-l-2 {
  border-left-width: 2px;
}
.border-r {
  border-right-width: 1px;
}
.border-r-2 {
  border-right-width: 2px;
}
.border-t {
  border-top-width: 1px;
}
.border-t-0 {
  border-top-width: 0px;
}
.border-t-2 {
  border-top-width: 2px;
}
.border-t-4 {
  border-top-width: 4px;
}
.border-solid {
  border-style: solid;
}
.border-dashed {
  border-style: dashed;
}
.border-dotted {
  border-style: dotted;
}
.border-none {
  border-style: none;
}
.\!border-\[\#4332df\] {
  --tw-border-opacity: 1 !important;
  border-color: rgb(67 50 223 / var(--tw-border-opacity, 1)) !important;
}
.\!border-\[\#b9b2ff\] {
  --tw-border-opacity: 1 !important;
  border-color: rgb(185 178 255 / var(--tw-border-opacity, 1)) !important;
}
.\!border-\[\#cbd5e1\] {
  --tw-border-opacity: 1 !important;
  border-color: rgb(203 213 225 / var(--tw-border-opacity, 1)) !important;
}
.\!border-\[\#d0d5dd\] {
  --tw-border-opacity: 1 !important;
  border-color: rgb(208 213 221 / var(--tw-border-opacity, 1)) !important;
}
.border-\[\#4332df\] {
  --tw-border-opacity: 1;
  border-color: rgb(67 50 223 / var(--tw-border-opacity, 1));
}
.border-\[\#8A8A9A\] {
  --tw-border-opacity: 1;
  border-color: rgb(138 138 154 / var(--tw-border-opacity, 1));
}
.border-\[\#ACE2D1\] {
  --tw-border-opacity: 1;
  border-color: rgb(172 226 209 / var(--tw-border-opacity, 1));
}
.border-\[\#C0DCC2\] {
  --tw-border-opacity: 1;
  border-color: rgb(192 220 194 / var(--tw-border-opacity, 1));
}
.border-\[\#CFE0CB\] {
  --tw-border-opacity: 1;
  border-color: rgb(207 224 203 / var(--tw-border-opacity, 1));
}
.border-\[\#D6CCAC\] {
  --tw-border-opacity: 1;
  border-color: rgb(214 204 172 / var(--tw-border-opacity, 1));
}
.border-\[\#E2E2E2\] {
  --tw-border-opacity: 1;
  border-color: rgb(226 226 226 / var(--tw-border-opacity, 1));
}
.border-\[\#E7E7E7\] {
  --tw-border-opacity: 1;
  border-color: rgb(231 231 231 / var(--tw-border-opacity, 1));
}
.border-\[\#EBE0FA\] {
  --tw-border-opacity: 1;
  border-color: rgb(235 224 250 / var(--tw-border-opacity, 1));
}
.border-\[\#EBEBEB\] {
  --tw-border-opacity: 1;
  border-color: rgb(235 235 235 / var(--tw-border-opacity, 1));
}
.border-\[\#ECD6D6\] {
  --tw-border-opacity: 1;
  border-color: rgb(236 214 214 / var(--tw-border-opacity, 1));
}
.border-\[\#EE731B\] {
  --tw-border-opacity: 1;
  border-color: rgb(238 115 27 / var(--tw-border-opacity, 1));
}
.border-\[\#EFDABD\] {
  --tw-border-opacity: 1;
  border-color: rgb(239 218 189 / var(--tw-border-opacity, 1));
}
.border-\[\#F0F0F0\] {
  --tw-border-opacity: 1;
  border-color: rgb(240 240 240 / var(--tw-border-opacity, 1));
}
.border-\[\#F1DFD0\] {
  --tw-border-opacity: 1;
  border-color: rgb(241 223 208 / var(--tw-border-opacity, 1));
}
.border-\[\#F2F2F2\] {
  --tw-border-opacity: 1;
  border-color: rgb(242 242 242 / var(--tw-border-opacity, 1));
}
.border-\[\#F4EEC9\] {
  --tw-border-opacity: 1;
  border-color: rgb(244 238 201 / var(--tw-border-opacity, 1));
}
.border-\[\#FBF7FF\] {
  --tw-border-opacity: 1;
  border-color: rgb(251 247 255 / var(--tw-border-opacity, 1));
}
.border-\[\#FDB584\] {
  --tw-border-opacity: 1;
  border-color: rgb(253 181 132 / var(--tw-border-opacity, 1));
}
.border-\[\#bfdbfe\] {
  --tw-border-opacity: 1;
  border-color: rgb(191 219 254 / var(--tw-border-opacity, 1));
}
.border-\[\#e4e7ec\] {
  --tw-border-opacity: 1;
  border-color: rgb(228 231 236 / var(--tw-border-opacity, 1));
}
.border-\[\#e5e7eb\] {
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.border-\[\#ffef8a\] {
  --tw-border-opacity: 1;
  border-color: rgb(255 239 138 / var(--tw-border-opacity, 1));
}
.border-\[var\(--border-default\)\] {
  border-color: var(--border-default);
}
.border-\[var\(--state-error-bg\)\] {
  border-color: var(--state-error-bg);
}
.border-black {
  --tw-border-opacity: 1;
  border-color: rgb(0 0 0 / var(--tw-border-opacity, 1));
}
.border-blue-200 {
  --tw-border-opacity: 1;
  border-color: rgb(191 219 254 / var(--tw-border-opacity, 1));
}
.border-blue-400 {
  --tw-border-opacity: 1;
  border-color: rgb(96 165 250 / var(--tw-border-opacity, 1));
}
.border-blue-600 {
  --tw-border-opacity: 1;
  border-color: rgb(37 99 235 / var(--tw-border-opacity, 1));
}
.border-blue-700 {
  --tw-border-opacity: 1;
  border-color: rgb(29 78 216 / var(--tw-border-opacity, 1));
}
.border-borderColor {
  --tw-border-opacity: 1;
  border-color: rgb(207 207 207 / var(--tw-border-opacity, 1));
}
.border-brand-primary {
  border-color: var(--brand-primary);
}
.border-gray-100 {
  --tw-border-opacity: 1;
  border-color: rgb(243 244 246 / var(--tw-border-opacity, 1));
}
.border-gray-200 {
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.border-gray-300 {
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}
.border-gray-400 {
  --tw-border-opacity: 1;
  border-color: rgb(156 163 175 / var(--tw-border-opacity, 1));
}
.border-gray-900\/5 {
  border-color: rgb(17 24 39 / 0.05);
}
.border-green-400 {
  --tw-border-opacity: 1;
  border-color: rgb(52 211 153 / var(--tw-border-opacity, 1));
}
.border-indigo-500 {
  --tw-border-opacity: 1;
  border-color: rgb(99 102 241 / var(--tw-border-opacity, 1));
}
.border-line {
  border-color: var(--border-default);
}
.border-red-200 {
  --tw-border-opacity: 1;
  border-color: rgb(254 202 202 / var(--tw-border-opacity, 1));
}
.border-red-300 {
  --tw-border-opacity: 1;
  border-color: rgb(252 165 165 / var(--tw-border-opacity, 1));
}
.border-red-400 {
  --tw-border-opacity: 1;
  border-color: rgb(248 113 113 / var(--tw-border-opacity, 1));
}
.border-red-500 {
  --tw-border-opacity: 1;
  border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
}
.border-red-600 {
  --tw-border-opacity: 1;
  border-color: rgb(220 38 38 / var(--tw-border-opacity, 1));
}
.border-red-700 {
  --tw-border-opacity: 1;
  border-color: rgb(185 28 28 / var(--tw-border-opacity, 1));
}
.border-state-info {
  border-color: var(--state-info);
}
.border-state-warning {
  border-color: var(--state-warning);
}
.border-transparent {
  border-color: transparent;
}
.border-white {
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}
.border-white\/30 {
  border-color: rgb(255 255 255 / 0.3);
}
.border-b-transparent {
  border-bottom-color: transparent;
}
.border-t-transparent {
  border-top-color: transparent;
}
.\!bg-\[\#4332df\] {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(67 50 223 / var(--tw-bg-opacity, 1)) !important;
}
.\!bg-transparent {
  background-color: transparent !important;
}
.\!bg-white {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)) !important;
}
.bg-\[\#038911\] {
  --tw-bg-opacity: 1;
  background-color: rgb(3 137 17 / var(--tw-bg-opacity, 1));
}
.bg-\[\#04b394\] {
  --tw-bg-opacity: 1;
  background-color: rgb(4 179 148 / var(--tw-bg-opacity, 1));
}
.bg-\[\#16a34a\] {
  --tw-bg-opacity: 1;
  background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));
}
.bg-\[\#4332df\] {
  --tw-bg-opacity: 1;
  background-color: rgb(67 50 223 / var(--tw-bg-opacity, 1));
}
.bg-\[\#9ba40f\] {
  --tw-bg-opacity: 1;
  background-color: rgb(155 164 15 / var(--tw-bg-opacity, 1));
}
.bg-\[\#CCF4E9\] {
  --tw-bg-opacity: 1;
  background-color: rgb(204 244 233 / var(--tw-bg-opacity, 1));
}
.bg-\[\#E9FFF9\] {
  --tw-bg-opacity: 1;
  background-color: rgb(233 255 249 / var(--tw-bg-opacity, 1));
}
.bg-\[\#EAFFE6\] {
  --tw-bg-opacity: 1;
  background-color: rgb(234 255 230 / var(--tw-bg-opacity, 1));
}
.bg-\[\#EBF7EC\] {
  --tw-bg-opacity: 1;
  background-color: rgb(235 247 236 / var(--tw-bg-opacity, 1));
}
.bg-\[\#ECDFF9\] {
  --tw-bg-opacity: 1;
  background-color: rgb(236 223 249 / var(--tw-bg-opacity, 1));
}
.bg-\[\#EE731B\] {
  --tw-bg-opacity: 1;
  background-color: rgb(238 115 27 / var(--tw-bg-opacity, 1));
}
.bg-\[\#EEE5DD\] {
  --tw-bg-opacity: 1;
  background-color: rgb(238 229 221 / var(--tw-bg-opacity, 1));
}
.bg-\[\#F0ECD5\] {
  --tw-bg-opacity: 1;
  background-color: rgb(240 236 213 / var(--tw-bg-opacity, 1));
}
.bg-\[\#F2F2F2\] {
  --tw-bg-opacity: 1;
  background-color: rgb(242 242 242 / var(--tw-bg-opacity, 1));
}
.bg-\[\#F3EFEB\] {
  --tw-bg-opacity: 1;
  background-color: rgb(243 239 235 / var(--tw-bg-opacity, 1));
}
.bg-\[\#F4F4F4\] {
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 244 / var(--tw-bg-opacity, 1));
}
.bg-\[\#F6EFFF\] {
  --tw-bg-opacity: 1;
  background-color: rgb(246 239 255 / var(--tw-bg-opacity, 1));
}
.bg-\[\#F9F9F9\] {
  --tw-bg-opacity: 1;
  background-color: rgb(249 249 249 / var(--tw-bg-opacity, 1));
}
.bg-\[\#FAFAFA80\] {
  background-color: #FAFAFA80;
}
.bg-\[\#FBF7FF\] {
  --tw-bg-opacity: 1;
  background-color: rgb(251 247 255 / var(--tw-bg-opacity, 1));
}
.bg-\[\#FBFBFB\] {
  --tw-bg-opacity: 1;
  background-color: rgb(251 251 251 / var(--tw-bg-opacity, 1));
}
.bg-\[\#FDF2E9\] {
  --tw-bg-opacity: 1;
  background-color: rgb(253 242 233 / var(--tw-bg-opacity, 1));
}
.bg-\[\#FEFBE8\] {
  --tw-bg-opacity: 1;
  background-color: rgb(254 251 232 / var(--tw-bg-opacity, 1));
}
.bg-\[\#FF006A\] {
  --tw-bg-opacity: 1;
  background-color: rgb(255 0 106 / var(--tw-bg-opacity, 1));
}
.bg-\[\#FFD4B51A\] {
  background-color: #FFD4B51A;
}
.bg-\[\#FFE2E2\] {
  --tw-bg-opacity: 1;
  background-color: rgb(255 226 226 / var(--tw-bg-opacity, 1));
}
.bg-\[\#FFF4E6\] {
  --tw-bg-opacity: 1;
  background-color: rgb(255 244 230 / var(--tw-bg-opacity, 1));
}
.bg-\[\#FFF5CF\] {
  --tw-bg-opacity: 1;
  background-color: rgb(255 245 207 / var(--tw-bg-opacity, 1));
}
.bg-\[\#FFF8F2\] {
  --tw-bg-opacity: 1;
  background-color: rgb(255 248 242 / var(--tw-bg-opacity, 1));
}
.bg-\[\#c2025f\] {
  --tw-bg-opacity: 1;
  background-color: rgb(194 2 95 / var(--tw-bg-opacity, 1));
}
.bg-\[\#cbd5e1\] {
  --tw-bg-opacity: 1;
  background-color: rgb(203 213 225 / var(--tw-bg-opacity, 1));
}
.bg-\[\#d97706\] {
  --tw-bg-opacity: 1;
  background-color: rgb(217 119 6 / var(--tw-bg-opacity, 1));
}
.bg-\[\#d9dee8\] {
  --tw-bg-opacity: 1;
  background-color: rgb(217 222 232 / var(--tw-bg-opacity, 1));
}
.bg-\[\#dc2626\] {
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}
.bg-\[\#e8e8e8\] {
  --tw-bg-opacity: 1;
  background-color: rgb(232 232 232 / var(--tw-bg-opacity, 1));
}
.bg-\[\#eaecf0\] {
  --tw-bg-opacity: 1;
  background-color: rgb(234 236 240 / var(--tw-bg-opacity, 1));
}
.bg-\[\#ececec\] {
  --tw-bg-opacity: 1;
  background-color: rgb(236 236 236 / var(--tw-bg-opacity, 1));
}
.bg-\[\#ee731b\] {
  --tw-bg-opacity: 1;
  background-color: rgb(238 115 27 / var(--tw-bg-opacity, 1));
}
.bg-\[\#f3f1ff\] {
  --tw-bg-opacity: 1;
  background-color: rgb(243 241 255 / var(--tw-bg-opacity, 1));
}
.bg-\[\#f8f9fa\] {
  --tw-bg-opacity: 1;
  background-color: rgb(248 249 250 / var(--tw-bg-opacity, 1));
}
.bg-\[\#f8fafc\] {
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
}
.bg-\[\#fafaf9\] {
  --tw-bg-opacity: 1;
  background-color: rgb(250 250 249 / var(--tw-bg-opacity, 1));
}
.bg-\[\#fafbfc\] {
  --tw-bg-opacity: 1;
  background-color: rgb(250 251 252 / var(--tw-bg-opacity, 1));
}
.bg-\[\#fbfbfb\] {
  --tw-bg-opacity: 1;
  background-color: rgb(251 251 251 / var(--tw-bg-opacity, 1));
}
.bg-\[\#fdb58412\] {
  background-color: #fdb58412;
}
.bg-\[\#fffaf7\] {
  --tw-bg-opacity: 1;
  background-color: rgb(255 250 247 / var(--tw-bg-opacity, 1));
}
.bg-\[var\(--border-default\)\] {
  background-color: var(--border-default);
}
.bg-\[var\(--brand-primary-soft\)\] {
  background-color: var(--brand-primary-soft);
}
.bg-\[var\(--overlay-modal\)\] {
  background-color: var(--overlay-modal);
}
.bg-\[var\(--state-error-bg\)\] {
  background-color: var(--state-error-bg);
}
.bg-\[var\(--state-success\)\] {
  background-color: var(--state-success);
}
.bg-\[var\(--surface-card\)\] {
  background-color: var(--surface-card);
}
.bg-black {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}
.bg-blue-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
}
.bg-blue-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(191 219 254 / var(--tw-bg-opacity, 1));
}
.bg-blue-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(147 197 253 / var(--tw-bg-opacity, 1));
}
.bg-blue-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
}
.bg-blue-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
}
.bg-blue-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
}
.bg-blue-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));
}
.bg-brand-primary {
  background-color: var(--brand-primary);
}
.bg-gray-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.bg-gray-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}
.bg-gray-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
}
.bg-gray-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.bg-gray-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(107 114 128 / var(--tw-bg-opacity, 1));
}
.bg-gray-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
}
.bg-green-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(209 250 229 / var(--tw-bg-opacity, 1));
}
.bg-green-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1));
}
.bg-green-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
}
.bg-green-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(5 150 105 / var(--tw-bg-opacity, 1));
}
.bg-green-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(4 120 87 / var(--tw-bg-opacity, 1));
}
.bg-indigo-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(238 242 255 / var(--tw-bg-opacity, 1));
}
.bg-line {
  background-color: var(--border-default);
}
.bg-mytBisque {
  --tw-bg-opacity: 1;
  background-color: rgb(233 229 245 / var(--tw-bg-opacity, 1));
}
.bg-mytBlue {
  --tw-bg-opacity: 1;
  background-color: rgb(204 85 0 / var(--tw-bg-opacity, 1));
}
.bg-mytPrimary {
  --tw-bg-opacity: 1;
  background-color: rgb(238 115 27 / var(--tw-bg-opacity, 1));
}
.bg-mytPurple {
  --tw-bg-opacity: 1;
  background-color: rgb(129 89 242 / var(--tw-bg-opacity, 1));
}
.bg-purple-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(245 243 255 / var(--tw-bg-opacity, 1));
}
.bg-purple-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(139 92 246 / var(--tw-bg-opacity, 1));
}
.bg-red-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
}
.bg-red-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
}
.bg-red-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}
.bg-red-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}
.bg-state-error-bg {
  background-color: var(--state-error-bg);
}
.bg-state-error-bg-subtle {
  background-color: var(--state-error-bg-subtle);
}
.bg-state-info-bg {
  background-color: var(--state-info-bg);
}
.bg-state-info-solid {
  background-color: var(--state-info-solid);
}
.bg-state-success {
  background-color: var(--state-success);
}
.bg-state-success-bg {
  background-color: var(--state-success-bg);
}
.bg-state-warning-bg {
  background-color: var(--state-warning-bg);
}
.bg-state-warning-text {
  background-color: var(--state-warning-text);
}
.bg-surface-card {
  background-color: var(--surface-card);
}
.bg-surface-sunken {
  background-color: var(--surface-sunken);
}
.bg-transparent {
  background-color: transparent;
}
.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.bg-white\/90 {
  background-color: rgb(255 255 255 / 0.9);
}
.bg-white\/95 {
  background-color: rgb(255 255 255 / 0.95);
}
.bg-yellow-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 243 199 / var(--tw-bg-opacity, 1));
}
.bg-yellow-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(245 158 11 / var(--tw-bg-opacity, 1));
}
.bg-opacity-50 {
  --tw-bg-opacity: 0.5;
}
.bg-none {
  background-image: none;
}
.fill-current {
  fill: currentColor;
}
.object-contain {
  object-fit: contain;
}
.object-cover {
  object-fit: cover;
}
.p-0 {
  padding: 0px;
}
.p-1 {
  padding: 0.25rem;
}
.p-1\.5 {
  padding: 0.375rem;
}
.p-10 {
  padding: 2.5rem;
}
.p-2 {
  padding: 0.5rem;
}
.p-2\.5 {
  padding: 0.625rem;
}
.p-3 {
  padding: 0.75rem;
}
.p-4 {
  padding: 1rem;
}
.p-5 {
  padding: 1.25rem;
}
.p-6 {
  padding: 1.5rem;
}
.p-8 {
  padding: 2rem;
}
.p-\[20px\] {
  padding: 20px;
}
.p-\[25px\] {
  padding: 25px;
}
.p-\[3px\] {
  padding: 3px;
}
.p-\[5px\] {
  padding: 5px;
}
.\!px-1 {
  padding-left: 0.25rem !important;
  padding-right: 0.25rem !important;
}
.\!px-2 {
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}
.\!px-3 {
  padding-left: 0.75rem !important;
  padding-right: 0.75rem !important;
}
.\!py-1 {
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
}
.\!py-1\.5 {
  padding-top: 0.375rem !important;
  padding-bottom: 0.375rem !important;
}
.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
.px-1\.5 {
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}
.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.px-2\.5 {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}
.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.px-3\.5 {
  padding-left: 0.875rem;
  padding-right: 0.875rem;
}
.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}
.px-\[12px\] {
  padding-left: 12px;
  padding-right: 12px;
}
.px-\[14px\] {
  padding-left: 14px;
  padding-right: 14px;
}
.px-\[15px\] {
  padding-left: 15px;
  padding-right: 15px;
}
.px-\[18px\] {
  padding-left: 18px;
  padding-right: 18px;
}
.px-\[20px\] {
  padding-left: 20px;
  padding-right: 20px;
}
.px-\[22px\] {
  padding-left: 22px;
  padding-right: 22px;
}
.px-\[25px\] {
  padding-left: 25px;
  padding-right: 25px;
}
.px-\[2px\] {
  padding-left: 2px;
  padding-right: 2px;
}
.px-\[30px\] {
  padding-left: 30px;
  padding-right: 30px;
}
.px-\[40px\] {
  padding-left: 40px;
  padding-right: 40px;
}
.px-\[6px\] {
  padding-left: 6px;
  padding-right: 6px;
}
.py-0 {
  padding-top: 0px;
  padding-bottom: 0px;
}
.py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}
.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.py-10 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.py-5 {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}
.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.py-\[13px\] {
  padding-top: 13px;
  padding-bottom: 13px;
}
.py-\[14px\] {
  padding-top: 14px;
  padding-bottom: 14px;
}
.py-\[15px\] {
  padding-top: 15px;
  padding-bottom: 15px;
}
.py-\[18px\] {
  padding-top: 18px;
  padding-bottom: 18px;
}
.py-\[20px\] {
  padding-top: 20px;
  padding-bottom: 20px;
}
.py-\[22px\] {
  padding-top: 22px;
  padding-bottom: 22px;
}
.py-\[3px\] {
  padding-top: 3px;
  padding-bottom: 3px;
}
.py-\[50px\] {
  padding-top: 50px;
  padding-bottom: 50px;
}
.pb-0\.5 {
  padding-bottom: 0.125rem;
}
.pb-1 {
  padding-bottom: 0.25rem;
}
.pb-2 {
  padding-bottom: 0.5rem;
}
.pb-24 {
  padding-bottom: 6rem;
}
.pb-3 {
  padding-bottom: 0.75rem;
}
.pb-4 {
  padding-bottom: 1rem;
}
.pb-5 {
  padding-bottom: 1.25rem;
}
.pb-6 {
  padding-bottom: 1.5rem;
}
.pb-\[0\.5px\] {
  padding-bottom: 0.5px;
}
.pb-\[10px\] {
  padding-bottom: 10px;
}
.pb-\[11\.5px\] {
  padding-bottom: 11.5px;
}
.pb-\[13px\] {
  padding-bottom: 13px;
}
.pb-\[20px\] {
  padding-bottom: 20px;
}
.pb-\[30px\] {
  padding-bottom: 30px;
}
.pb-\[45px\] {
  padding-bottom: 45px;
}
.pb-\[80px\] {
  padding-bottom: 80px;
}
.pl-10 {
  padding-left: 2.5rem;
}
.pl-3 {
  padding-left: 0.75rem;
}
.pl-4 {
  padding-left: 1rem;
}
.pl-5 {
  padding-left: 1.25rem;
}
.pl-8 {
  padding-left: 2rem;
}
.pl-9 {
  padding-left: 2.25rem;
}
.pl-\[18px\] {
  padding-left: 18px;
}
.pl-\[25px\] {
  padding-left: 25px;
}
.pr-1 {
  padding-right: 0.25rem;
}
.pr-2 {
  padding-right: 0.5rem;
}
.pr-20 {
  padding-right: 5rem;
}
.pr-3 {
  padding-right: 0.75rem;
}
.pr-8 {
  padding-right: 2rem;
}
.pr-\[15px\] {
  padding-right: 15px;
}
.pr-\[19px\] {
  padding-right: 19px;
}
.pr-\[25px\] {
  padding-right: 25px;
}
.pr-\[35px\] {
  padding-right: 35px;
}
.pr-\[60px\] {
  padding-right: 60px;
}
.pt-0\.5 {
  padding-top: 0.125rem;
}
.pt-1 {
  padding-top: 0.25rem;
}
.pt-1\.5 {
  padding-top: 0.375rem;
}
.pt-10 {
  padding-top: 2.5rem;
}
.pt-2 {
  padding-top: 0.5rem;
}
.pt-2\.5 {
  padding-top: 0.625rem;
}
.pt-3 {
  padding-top: 0.75rem;
}
.pt-3\.5 {
  padding-top: 0.875rem;
}
.pt-4 {
  padding-top: 1rem;
}
.pt-5 {
  padding-top: 1.25rem;
}
.pt-6 {
  padding-top: 1.5rem;
}
.pt-\[104px\] {
  padding-top: 104px;
}
.pt-\[10px\] {
  padding-top: 10px;
}
.pt-\[12\.5px\] {
  padding-top: 12.5px;
}
.pt-\[15px\] {
  padding-top: 15px;
}
.pt-\[20px\] {
  padding-top: 20px;
}
.pt-\[25px\] {
  padding-top: 25px;
}
.pt-\[30px\] {
  padding-top: 30px;
}
.pt-\[5px\] {
  padding-top: 5px;
}
.pt-\[64px\] {
  padding-top: 64px;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.text-justify {
  text-align: justify;
}
.text-start {
  text-align: start;
}
.text-end {
  text-align: end;
}
.align-top {
  vertical-align: top;
}
.font-\[inter\] {
  font-family: inter;
}
.font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.font-sans {
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}
.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}
.text-\[10\.5px\] {
  font-size: 10.5px;
}
.text-\[10px\] {
  font-size: 10px;
}
.text-\[11\.5px\] {
  font-size: 11.5px;
}
.text-\[11px\] {
  font-size: 11px;
}
.text-\[12\.5px\] {
  font-size: 12.5px;
}
.text-\[12px\] {
  font-size: 12px;
}
.text-\[13\.5px\] {
  font-size: 13.5px;
}
.text-\[13px\] {
  font-size: 13px;
}
.text-\[14\.5px\] {
  font-size: 14.5px;
}
.text-\[14px\] {
  font-size: 14px;
}
.text-\[15px\] {
  font-size: 15px;
}
.text-\[16px\] {
  font-size: 16px;
}
.text-\[17px\] {
  font-size: 17px;
}
.text-\[18px\] {
  font-size: 18px;
}
.text-\[19px\] {
  font-size: 19px;
}
.text-\[22px\] {
  font-size: 22px;
}
.text-\[24px\] {
  font-size: 24px;
}
.text-\[30px\] {
  font-size: 30px;
}
.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}
.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
.\!font-medium {
  font-weight: 500 !important;
}
.\!font-semibold {
  font-weight: 600 !important;
}
.font-\[444\] {
  font-weight: 444;
}
.font-\[450\] {
  font-weight: 450;
}
.font-\[550\] {
  font-weight: 550;
}
.font-\[560\] {
  font-weight: 560;
}
.font-\[600\] {
  font-weight: 600;
}
.font-\[625\] {
  font-weight: 625;
}
.font-bold {
  font-weight: 700;
}
.font-extrabold {
  font-weight: 800;
}
.font-medium {
  font-weight: 500;
}
.font-normal {
  font-weight: 400;
}
.font-semibold {
  font-weight: 600;
}
.uppercase {
  text-transform: uppercase;
}
.lowercase {
  text-transform: lowercase;
}
.capitalize {
  text-transform: capitalize;
}
.normal-case {
  text-transform: none;
}
.italic {
  font-style: italic;
}
.ordinal {
  --tw-ordinal: ordinal;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
.tabular-nums {
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
.leading-3 {
  line-height: .75rem;
}
.leading-5 {
  line-height: 1.25rem;
}
.leading-6 {
  line-height: 1.5rem;
}
.leading-\[1\.2\] {
  line-height: 1.2;
}
.leading-\[13px\] {
  line-height: 13px;
}
.leading-\[14px\] {
  line-height: 14px;
}
.leading-\[15px\] {
  line-height: 15px;
}
.leading-\[16px\] {
  line-height: 16px;
}
.leading-\[17px\] {
  line-height: 17px;
}
.leading-\[18px\] {
  line-height: 18px;
}
.leading-\[20px\] {
  line-height: 20px;
}
.leading-\[21px\] {
  line-height: 21px;
}
.leading-\[22px\] {
  line-height: 22px;
}
.leading-\[26px\] {
  line-height: 26px;
}
.leading-\[28px\] {
  line-height: 28px;
}
.leading-\[34px\] {
  line-height: 34px;
}
.leading-\[normal\] {
  line-height: normal;
}
.leading-none {
  line-height: 1;
}
.leading-normal {
  line-height: 1.5;
}
.leading-relaxed {
  line-height: 1.625;
}
.leading-snug {
  line-height: 1.375;
}
.leading-tight {
  line-height: 1.25;
}
.tracking-\[0\.267px\] {
  letter-spacing: 0.267px;
}
.tracking-\[0\.3px\] {
  letter-spacing: 0.3px;
}
.tracking-wide {
  letter-spacing: 0.025em;
}
.tracking-wider {
  letter-spacing: 0.05em;
}
.tracking-widest {
  letter-spacing: 0.1em;
}
.\!text-\[\#172033\] {
  --tw-text-opacity: 1 !important;
  color: rgb(23 32 51 / var(--tw-text-opacity, 1)) !important;
}
.\!text-\[\#334155\] {
  --tw-text-opacity: 1 !important;
  color: rgb(51 65 85 / var(--tw-text-opacity, 1)) !important;
}
.\!text-\[\#344054\] {
  --tw-text-opacity: 1 !important;
  color: rgb(52 64 84 / var(--tw-text-opacity, 1)) !important;
}
.\!text-\[\#4332df\] {
  --tw-text-opacity: 1 !important;
  color: rgb(67 50 223 / var(--tw-text-opacity, 1)) !important;
}
.\!text-white {
  --tw-text-opacity: 1 !important;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1)) !important;
}
.text-\[\#000\] {
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}
.text-\[\#04471B\] {
  --tw-text-opacity: 1;
  color: rgb(4 71 27 / var(--tw-text-opacity, 1));
}
.text-\[\#046C4D\] {
  --tw-text-opacity: 1;
  color: rgb(4 108 77 / var(--tw-text-opacity, 1));
}
.text-\[\#04A777\] {
  --tw-text-opacity: 1;
  color: rgb(4 167 119 / var(--tw-text-opacity, 1));
}
.text-\[\#090909\] {
  --tw-text-opacity: 1;
  color: rgb(9 9 9 / var(--tw-text-opacity, 1));
}
.text-\[\#171717\] {
  --tw-text-opacity: 1;
  color: rgb(23 23 23 / var(--tw-text-opacity, 1));
}
.text-\[\#172033\] {
  --tw-text-opacity: 1;
  color: rgb(23 32 51 / var(--tw-text-opacity, 1));
}
.text-\[\#1C2430\] {
  --tw-text-opacity: 1;
  color: rgb(28 36 48 / var(--tw-text-opacity, 1));
}
.text-\[\#1c4ed8\] {
  --tw-text-opacity: 1;
  color: rgb(28 78 216 / var(--tw-text-opacity, 1));
}
.text-\[\#1d4fd8\] {
  --tw-text-opacity: 1;
  color: rgb(29 79 216 / var(--tw-text-opacity, 1));
}
.text-\[\#232323\] {
  --tw-text-opacity: 1;
  color: rgb(35 35 35 / var(--tw-text-opacity, 1));
}
.text-\[\#321A50\] {
  --tw-text-opacity: 1;
  color: rgb(50 26 80 / var(--tw-text-opacity, 1));
}
.text-\[\#32B66F\] {
  --tw-text-opacity: 1;
  color: rgb(50 182 111 / var(--tw-text-opacity, 1));
}
.text-\[\#333\] {
  --tw-text-opacity: 1;
  color: rgb(51 51 51 / var(--tw-text-opacity, 1));
}
.text-\[\#344054\] {
  --tw-text-opacity: 1;
  color: rgb(52 64 84 / var(--tw-text-opacity, 1));
}
.text-\[\#3C0074\] {
  --tw-text-opacity: 1;
  color: rgb(60 0 116 / var(--tw-text-opacity, 1));
}
.text-\[\#4332df\] {
  --tw-text-opacity: 1;
  color: rgb(67 50 223 / var(--tw-text-opacity, 1));
}
.text-\[\#4c4c4c\] {
  --tw-text-opacity: 1;
  color: rgb(76 76 76 / var(--tw-text-opacity, 1));
}
.text-\[\#555555\] {
  --tw-text-opacity: 1;
  color: rgb(85 85 85 / var(--tw-text-opacity, 1));
}
.text-\[\#555\] {
  --tw-text-opacity: 1;
  color: rgb(85 85 85 / var(--tw-text-opacity, 1));
}
.text-\[\#557e30\] {
  --tw-text-opacity: 1;
  color: rgb(85 126 48 / var(--tw-text-opacity, 1));
}
.text-\[\#622A00\] {
  --tw-text-opacity: 1;
  color: rgb(98 42 0 / var(--tw-text-opacity, 1));
}
.text-\[\#636363\] {
  --tw-text-opacity: 1;
  color: rgb(99 99 99 / var(--tw-text-opacity, 1));
}
.text-\[\#667085\] {
  --tw-text-opacity: 1;
  color: rgb(102 112 133 / var(--tw-text-opacity, 1));
}
.text-\[\#6A6327\] {
  --tw-text-opacity: 1;
  color: rgb(106 99 39 / var(--tw-text-opacity, 1));
}
.text-\[\#713F12\] {
  --tw-text-opacity: 1;
  color: rgb(113 63 18 / var(--tw-text-opacity, 1));
}
.text-\[\#757575\] {
  --tw-text-opacity: 1;
  color: rgb(117 117 117 / var(--tw-text-opacity, 1));
}
.text-\[\#797447\] {
  --tw-text-opacity: 1;
  color: rgb(121 116 71 / var(--tw-text-opacity, 1));
}
.text-\[\#7B5636\] {
  --tw-text-opacity: 1;
  color: rgb(123 86 54 / var(--tw-text-opacity, 1));
}
.text-\[\#7D4AC3\] {
  --tw-text-opacity: 1;
  color: rgb(125 74 195 / var(--tw-text-opacity, 1));
}
.text-\[\#838383\] {
  --tw-text-opacity: 1;
  color: rgb(131 131 131 / var(--tw-text-opacity, 1));
}
.text-\[\#848484\] {
  --tw-text-opacity: 1;
  color: rgb(132 132 132 / var(--tw-text-opacity, 1));
}
.text-\[\#868686\] {
  --tw-text-opacity: 1;
  color: rgb(134 134 134 / var(--tw-text-opacity, 1));
}
.text-\[\#8A8A9A\] {
  --tw-text-opacity: 1;
  color: rgb(138 138 154 / var(--tw-text-opacity, 1));
}
.text-\[\#8F8F8F\] {
  --tw-text-opacity: 1;
  color: rgb(143 143 143 / var(--tw-text-opacity, 1));
}
.text-\[\#8d8d8d\] {
  --tw-text-opacity: 1;
  color: rgb(141 141 141 / var(--tw-text-opacity, 1));
}
.text-\[\#927FA5\] {
  --tw-text-opacity: 1;
  color: rgb(146 127 165 / var(--tw-text-opacity, 1));
}
.text-\[\#929292\] {
  --tw-text-opacity: 1;
  color: rgb(146 146 146 / var(--tw-text-opacity, 1));
}
.text-\[\#939393\] {
  --tw-text-opacity: 1;
  color: rgb(147 147 147 / var(--tw-text-opacity, 1));
}
.text-\[\#959595\] {
  --tw-text-opacity: 1;
  color: rgb(149 149 149 / var(--tw-text-opacity, 1));
}
.text-\[\#969696\] {
  --tw-text-opacity: 1;
  color: rgb(150 150 150 / var(--tw-text-opacity, 1));
}
.text-\[\#98a2b3\] {
  --tw-text-opacity: 1;
  color: rgb(152 162 179 / var(--tw-text-opacity, 1));
}
.text-\[\#9A9A9A\] {
  --tw-text-opacity: 1;
  color: rgb(154 154 154 / var(--tw-text-opacity, 1));
}
.text-\[\#9B9B9B\] {
  --tw-text-opacity: 1;
  color: rgb(155 155 155 / var(--tw-text-opacity, 1));
}
.text-\[\#A390BE\] {
  --tw-text-opacity: 1;
  color: rgb(163 144 190 / var(--tw-text-opacity, 1));
}
.text-\[\#A3A3A3\] {
  --tw-text-opacity: 1;
  color: rgb(163 163 163 / var(--tw-text-opacity, 1));
}
.text-\[\#B7A1CC\] {
  --tw-text-opacity: 1;
  color: rgb(183 161 204 / var(--tw-text-opacity, 1));
}
.text-\[\#BFBFBF\] {
  --tw-text-opacity: 1;
  color: rgb(191 191 191 / var(--tw-text-opacity, 1));
}
.text-\[\#CB3737\] {
  --tw-text-opacity: 1;
  color: rgb(203 55 55 / var(--tw-text-opacity, 1));
}
.text-\[\#CC5500\] {
  --tw-text-opacity: 1;
  color: rgb(204 85 0 / var(--tw-text-opacity, 1));
}
.text-\[\#D7742D\] {
  --tw-text-opacity: 1;
  color: rgb(215 116 45 / var(--tw-text-opacity, 1));
}
.text-\[\#EE731B\] {
  --tw-text-opacity: 1;
  color: rgb(238 115 27 / var(--tw-text-opacity, 1));
}
.text-\[\#FF006A\] {
  --tw-text-opacity: 1;
  color: rgb(255 0 106 / var(--tw-text-opacity, 1));
}
.text-\[\#FF0F73\] {
  --tw-text-opacity: 1;
  color: rgb(255 15 115 / var(--tw-text-opacity, 1));
}
.text-\[\#FF2121\] {
  --tw-text-opacity: 1;
  color: rgb(255 33 33 / var(--tw-text-opacity, 1));
}
.text-\[\#cbd5e1\] {
  --tw-text-opacity: 1;
  color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}
.text-\[\#ee731b\] {
  --tw-text-opacity: 1;
  color: rgb(238 115 27 / var(--tw-text-opacity, 1));
}
.text-\[red\] {
  --tw-text-opacity: 1;
  color: rgb(255 0 0 / var(--tw-text-opacity, 1));
}
.text-\[var\(--state-error\)\] {
  color: var(--state-error);
}
.text-\[var\(--text-inverse\)\] {
  color: var(--text-inverse);
}
.text-\[var\(--text-muted\)\] {
  color: var(--text-muted);
}
.text-\[var\(--text-primary\)\] {
  color: var(--text-primary);
}
.text-black {
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}
.text-blue-400 {
  --tw-text-opacity: 1;
  color: rgb(96 165 250 / var(--tw-text-opacity, 1));
}
.text-blue-500 {
  --tw-text-opacity: 1;
  color: rgb(59 130 246 / var(--tw-text-opacity, 1));
}
.text-blue-600 {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}
.text-blue-700 {
  --tw-text-opacity: 1;
  color: rgb(29 78 216 / var(--tw-text-opacity, 1));
}
.text-blue-800 {
  --tw-text-opacity: 1;
  color: rgb(30 64 175 / var(--tw-text-opacity, 1));
}
.text-brand-primary {
  color: var(--brand-primary);
}
.text-content-inverse {
  color: var(--text-inverse);
}
.text-content-muted {
  color: var(--text-muted);
}
.text-content-on-nav {
  color: var(--text-on-nav);
}
.text-content-primary {
  color: var(--text-primary);
}
.text-content-secondary {
  color: var(--text-secondary);
}
.text-gray-400 {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.text-gray-500 {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.text-gray-600 {
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.text-gray-700 {
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.text-gray-800 {
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}
.text-gray-900 {
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.text-green-400 {
  --tw-text-opacity: 1;
  color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}
.text-green-500 {
  --tw-text-opacity: 1;
  color: rgb(16 185 129 / var(--tw-text-opacity, 1));
}
.text-green-600 {
  --tw-text-opacity: 1;
  color: rgb(5 150 105 / var(--tw-text-opacity, 1));
}
.text-green-700 {
  --tw-text-opacity: 1;
  color: rgb(4 120 87 / var(--tw-text-opacity, 1));
}
.text-green-800 {
  --tw-text-opacity: 1;
  color: rgb(6 95 70 / var(--tw-text-opacity, 1));
}
.text-green-950 {
  --tw-text-opacity: 1;
  color: rgb(2 44 34 / var(--tw-text-opacity, 1));
}
.text-indigo-700 {
  --tw-text-opacity: 1;
  color: rgb(67 56 202 / var(--tw-text-opacity, 1));
}
.text-mytBlue {
  --tw-text-opacity: 1;
  color: rgb(204 85 0 / var(--tw-text-opacity, 1));
}
.text-mytLightBlack {
  color: #150a0ab8;
}
.text-mytLightGray {
  --tw-text-opacity: 1;
  color: rgb(173 173 173 / var(--tw-text-opacity, 1));
}
.text-mytPrimary {
  --tw-text-opacity: 1;
  color: rgb(238 115 27 / var(--tw-text-opacity, 1));
}
.text-mytRed {
  --tw-text-opacity: 1;
  color: rgb(237 77 77 / var(--tw-text-opacity, 1));
}
.text-purple-700 {
  --tw-text-opacity: 1;
  color: rgb(109 40 217 / var(--tw-text-opacity, 1));
}
.text-red-400 {
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}
.text-red-500 {
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}
.text-red-600 {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}
.text-red-700 {
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / var(--tw-text-opacity, 1));
}
.text-red-800 {
  --tw-text-opacity: 1;
  color: rgb(153 27 27 / var(--tw-text-opacity, 1));
}
.text-state-error {
  color: var(--state-error);
}
.text-state-error-text {
  color: var(--state-error-text);
}
.text-state-info {
  color: var(--state-info);
}
.text-state-info-text {
  color: var(--state-info-text);
}
.text-state-success {
  color: var(--state-success);
}
.text-state-success-text {
  color: var(--state-success-text);
}
.text-state-warning {
  color: var(--state-warning);
}
.text-state-warning-bg {
  color: var(--state-warning-bg);
}
.text-state-warning-text {
  color: var(--state-warning-text);
}
.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-yellow-900 {
  --tw-text-opacity: 1;
  color: rgb(120 53 15 / var(--tw-text-opacity, 1));
}
.text-opacity-10 {
  --tw-text-opacity: 0.1;
}
.underline {
  -webkit-text-decoration-line: underline;
          text-decoration-line: underline;
}
.line-through {
  -webkit-text-decoration-line: line-through;
          text-decoration-line: line-through;
}
.no-underline {
  -webkit-text-decoration-line: none;
          text-decoration-line: none;
}
.placeholder-gray-500::placeholder {
  --tw-placeholder-opacity: 1;
  color: rgb(107 114 128 / var(--tw-placeholder-opacity, 1));
}
.opacity-0 {
  opacity: 0;
}
.opacity-100 {
  opacity: 1;
}
.opacity-25 {
  opacity: 0.25;
}
.opacity-50 {
  opacity: 0.5;
}
.opacity-60 {
  opacity: 0.6;
}
.opacity-70 {
  opacity: 0.7;
}
.opacity-75 {
  opacity: 0.75;
}
.opacity-80 {
  opacity: 0.8;
}
.shadow {
  --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0px_2px_4px_0px_rgba\(188\2c 188\2c 188\2c 0\.12\)\] {
  --tw-shadow: 0px 2px 4px 0px rgba(188,188,188,0.12);
  --tw-shadow-colored: 0px 2px 4px 0px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0px_2px_4px_0px_rgba\(188\2c 188\2c 188\2c 0\.22\)\] {
  --tw-shadow: 0px 2px 4px 0px rgba(188,188,188,0.22);
  --tw-shadow-colored: 0px 2px 4px 0px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0px_2px_4px_0px_rgba\(248\2c 102\2c 36\2c 0\.15\)\] {
  --tw-shadow: 0px 2px 4px 0px rgba(248,102,36,0.15);
  --tw-shadow-colored: 0px 2px 4px 0px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-md {
  --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-none {
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-xl {
  --tw-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 10px 10px -5px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.outline {
  outline-style: solid;
}
.\!ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
}
.ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-1 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-2 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-4 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-\[\#4332df\] {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(67 50 223 / var(--tw-ring-opacity, 1));
}
.ring-blue-400 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity, 1));
}
.ring-blue-500 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));
}
.ring-white {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity, 1));
}
.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.transition {
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-colors {
  transition-property: background-color, border-color, color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.duration-150 {
  transition-duration: 150ms;
}
.duration-200 {
  transition-duration: 200ms;
}
.duration-300 {
  transition-duration: 300ms;
}
.duration-75 {
  transition-duration: 75ms;
}
.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ease-linear {
  transition-timing-function: linear;
}
.\!\[border-bottom\:0px\] {
  border-bottom: 0px !important;
}
.\!\[border-bottom\:1px_solid_\#EBEBEB\] {
  border-bottom: 1px solid #EBEBEB !important;
}
.\!\[border-left\:0px\] {
  border-left: 0px !important;
}
.\!\[border-right\:0px\] {
  border-right: 0px !important;
}
.\!\[border-right\:1px_solid_\#EBEBEB\] {
  border-right: 1px solid #EBEBEB !important;
}
.\!\[border-spacing\:0\] {
  border-spacing: 0 !important;
}
.\!\[border-top\:0px\] {
  border-top: 0px !important;
}
.\!\[border-top\:1px_solid_\#EBEBEB\] {
  border-top: 1px solid #EBEBEB !important;
}
.\[text-transform\:unset\] {
  text-transform: unset;
}
/* Prevent browsers from faking bold/italic when a font weight/style is missing.
   Fixes incorrect font-weight rendering on some sites/fonts. */
*,
*::before,
*::after {
  -webkit-font-synthesis: none;
  font-synthesis: none;
}
.dark body,
.dark #root {
  background: var(--surface-page);
  color: var(--text-primary);
}
.dark input,
.dark textarea,
.dark select {
  background-color: var(--input-bg);
  color: var(--input-text);
  border-color: var(--input-border);
}
.dark input::placeholder,
.dark textarea::placeholder {
  color: var(--input-placeholder);
}
.dark select option {
  background-color: var(--input-bg);
  color: var(--input-text);
}
h1 {
  display: block;
  font-size: 2em;
  -webkit-margin-before: 0.67em;
          margin-block-start: 0.67em;
  -webkit-margin-after: 0.67em;
          margin-block-end: 0.67em;
  -webkit-margin-start: 0px;
          margin-inline-start: 0px;
  -webkit-margin-end: 0px;
          margin-inline-end: 0px;
  font-weight: bold;
}
p {
  display: block;
  -webkit-margin-before: 1em;
          margin-block-start: 1em;
  -webkit-margin-after: 1em;
          margin-block-end: 1em;
  -webkit-margin-start: 0px;
          margin-inline-start: 0px;
  -webkit-margin-end: 0px;
          margin-inline-end: 0px;
}
select {
  -webkit-writing-mode: horizontal-tb !important;
  text-rendering: auto;
  color: -internal-light-dark(var(--text-primary), var(--text-inverse));
  letter-spacing: normal;
  word-spacing: normal;
  line-height: normal;
  text-transform: none;
  text-indent: 0px;
  text-shadow: none;
  display: inline-block;
  text-align: start;
  -webkit-appearance: auto;
          appearance: auto;
  box-sizing: border-box;
  align-items: center;
  white-space: pre;
  -webkit-rtl-ordering: logical;
  background-color: -internal-light-dark(rgb(255, 255, 255), rgb(59, 59, 59));
  cursor: default;
  margin: 0em;
  border-width: 1px;
  border-style: solid;
  border-color: -internal-light-dark(rgb(118, 118, 118), rgb(133, 133, 133));
  border-image: initial;
  border-radius: 0px;
}
.ch-p {
  font-size: 14.5px;
  line-height: 16px;
  font-weight: 500;
  color: var(--text-primary);
}
.easy-filter {
  height: -webkit-fill-available;
  max-height: 600px;
  overflow: scroll;
}
.video-js .vjs-control-bar {
  bottom: 100px !important;
}
@media screen and (max-width: 768px) {
  .ch-p {
    font-size: 13.5px;
  }
}
.gettingToKnowStyle > ol {
  list-style: auto;
}
.gettingToKnowStyle > ul {
  list-style: disc;
}
/* Tooltip styles */
.tooltiptexts {
  display: none;
  background-color: #555;
  color: var(--text-inverse);
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  top: 20px;
  left: -50px;
  position: absolute;
  z-index: 1000000;
  transition: opacity 0.3s;
  font-size: 11px;
  white-space: nowrap;
  max-width: 200px;
  word-wrap: break-word;
}
.group:hover .tooltiptexts {
  display: block;
}
/* DatePicker poppers portaled via portalId must stack above CustomModal (z-index 999999999) */
#datepicker-portal .react-datepicker-popper {
  z-index: 1000000000;
}
.placeholder\:\!text-\[\#98a2b3\]::placeholder {
  --tw-text-opacity: 1 !important;
  color: rgb(152 162 179 / var(--tw-text-opacity, 1)) !important;
}
.before\:absolute::before {
  content: var(--tw-content);
  position: absolute;
}
.before\:inset-0::before {
  content: var(--tw-content);
  inset: 0px;
}
.before\:-translate-x-full::before {
  content: var(--tw-content);
  --tw-translate-x: -100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.before\:animate-\[shimmer_2s_infinite\]::before {
  content: var(--tw-content);
  animation: shimmer 2s infinite;
}
.before\:bg-gradient-to-r::before {
  content: var(--tw-content);
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
.before\:from-transparent::before {
  content: var(--tw-content);
  --tw-gradient-from: transparent var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.before\:via-white\/40::before {
  content: var(--tw-content);
  --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(255 255 255 / 0.4) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.before\:to-transparent::before {
  content: var(--tw-content);
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
}
.last\:mb-0:last-child {
  margin-bottom: 0px;
}
.focus-within\:border-brand-primary:focus-within {
  border-color: var(--brand-primary);
}
.hover\:-translate-y-px:hover {
  --tw-translate-y: -1px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:\!border-\[\#4332df\]:hover {
  --tw-border-opacity: 1 !important;
  border-color: rgb(67 50 223 / var(--tw-border-opacity, 1)) !important;
}
.hover\:border-\[\#FDB584\]:hover {
  --tw-border-opacity: 1;
  border-color: rgb(253 181 132 / var(--tw-border-opacity, 1));
}
.hover\:border-gray-400:hover {
  --tw-border-opacity: 1;
  border-color: rgb(156 163 175 / var(--tw-border-opacity, 1));
}
.hover\:border-line-emphasis:hover {
  border-color: var(--border-emphasis);
}
.hover\:border-transparent:hover {
  border-color: transparent;
}
.hover\:border-b-\[\#046C4D\]:hover {
  --tw-border-opacity: 1;
  border-bottom-color: rgb(4 108 77 / var(--tw-border-opacity, 1));
}
.hover\:\!bg-\[\#f7f6ff\]:hover {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(247 246 255 / var(--tw-bg-opacity, 1)) !important;
}
.hover\:\!bg-white:hover {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)) !important;
}
.hover\:bg-\[\#CC4B11\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(204 75 17 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#f8fafc\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#fdb58412\]:hover {
  background-color: #fdb58412;
}
.hover\:bg-blue-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
}
.hover\:bg-blue-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));
}
.hover\:bg-blue-800:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(30 64 175 / var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-200:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-300:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-900\/5:hover {
  background-color: rgb(17 24 39 / 0.05);
}
.hover\:bg-green-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(5 150 105 / var(--tw-bg-opacity, 1));
}
.hover\:bg-green-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(4 120 87 / var(--tw-bg-opacity, 1));
}
.hover\:bg-red-500:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}
.hover\:bg-red-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(185 28 28 / var(--tw-bg-opacity, 1));
}
.hover\:bg-state-error-bg:hover {
  background-color: var(--state-error-bg);
}
.hover\:bg-state-info-solid:hover {
  background-color: var(--state-info-solid);
}
.hover\:bg-surface-sunken:hover {
  background-color: var(--surface-sunken);
}
.hover\:bg-transparent:hover {
  background-color: transparent;
}
.hover\:text-\[\#046C4D\]:hover {
  --tw-text-opacity: 1;
  color: rgb(4 108 77 / var(--tw-text-opacity, 1));
}
.hover\:text-\[\#EE731B\]:hover {
  --tw-text-opacity: 1;
  color: rgb(238 115 27 / var(--tw-text-opacity, 1));
}
.hover\:text-black:hover {
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}
.hover\:text-blue-600:hover {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}
.hover\:text-blue-700:hover {
  --tw-text-opacity: 1;
  color: rgb(29 78 216 / var(--tw-text-opacity, 1));
}
.hover\:text-blue-800:hover {
  --tw-text-opacity: 1;
  color: rgb(30 64 175 / var(--tw-text-opacity, 1));
}
.hover\:text-content-on-nav:hover {
  color: var(--text-on-nav);
}
.hover\:text-content-primary:hover {
  color: var(--text-primary);
}
.hover\:text-content-secondary:hover {
  color: var(--text-secondary);
}
.hover\:text-gray-600:hover {
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.hover\:text-green-800:hover {
  --tw-text-opacity: 1;
  color: rgb(6 95 70 / var(--tw-text-opacity, 1));
}
.hover\:text-red-800:hover {
  --tw-text-opacity: 1;
  color: rgb(153 27 27 / var(--tw-text-opacity, 1));
}
.hover\:text-white:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.hover\:underline:hover {
  -webkit-text-decoration-line: underline;
          text-decoration-line: underline;
}
.hover\:opacity-60:hover {
  opacity: 0.6;
}
.hover\:opacity-70:hover {
  opacity: 0.7;
}
.hover\:opacity-80:hover {
  opacity: 0.8;
}
.hover\:opacity-90:hover {
  opacity: 0.9;
}
.hover\:shadow-md:hover {
  --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:brightness-110:hover {
  --tw-brightness: brightness(1.1);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.hover\:brightness-95:hover {
  --tw-brightness: brightness(.95);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.focus\:\!border-\[\#4332df\]:focus {
  --tw-border-opacity: 1 !important;
  border-color: rgb(67 50 223 / var(--tw-border-opacity, 1)) !important;
}
.focus\:border-blue-500:focus {
  --tw-border-opacity: 1;
  border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
}
.focus\:border-brand-primary:focus {
  border-color: var(--brand-primary);
}
.focus\:border-mytPrimary:focus {
  --tw-border-opacity: 1;
  border-color: rgb(238 115 27 / var(--tw-border-opacity, 1));
}
.focus\:\!outline-none:focus {
  outline: 2px solid transparent !important;
  outline-offset: 2px !important;
}
.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.focus\:\!ring-1:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
}
.focus\:ring-1:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-2:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-4:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:\!ring-\[\#4332df\]:focus {
  --tw-ring-opacity: 1 !important;
  --tw-ring-color: rgb(67 50 223 / var(--tw-ring-opacity, 1)) !important;
}
.focus\:ring-blue-300:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(147 197 253 / var(--tw-ring-opacity, 1));
}
.focus\:ring-blue-400:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity, 1));
}
.focus\:ring-blue-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));
}
.focus\:ring-gray-300:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity, 1));
}
.focus\:ring-mytPrimary\/40:focus {
  --tw-ring-color: rgb(238 115 27 / 0.4);
}
.focus\:ring-offset-1:focus {
  --tw-ring-offset-width: 1px;
}
.focus-visible\:\!outline-none:focus-visible {
  outline: 2px solid transparent !important;
  outline-offset: 2px !important;
}
.focus-visible\:outline-none:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.focus-visible\:\!ring-2:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
}
.focus-visible\:ring-2:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus-visible\:ring-inset:focus-visible {
  --tw-ring-inset: inset;
}
.focus-visible\:\!ring-\[\#4332df\]:focus-visible {
  --tw-ring-opacity: 1 !important;
  --tw-ring-color: rgb(67 50 223 / var(--tw-ring-opacity, 1)) !important;
}
.focus-visible\:ring-\[\#4332df\]:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(67 50 223 / var(--tw-ring-opacity, 1));
}
.active\:translate-y-0:active {
  --tw-translate-y: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.active\:translate-y-px:active {
  --tw-translate-y: 1px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.active\:scale-95:active {
  --tw-scale-x: .95;
  --tw-scale-y: .95;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.active\:scale-\[0\.96\]:active {
  --tw-scale-x: 0.96;
  --tw-scale-y: 0.96;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.active\:bg-gray-900\/\[0\.12\]:active {
  background-color: rgb(17 24 39 / 0.12);
}
.disabled\:\!cursor-not-allowed:disabled {
  cursor: not-allowed !important;
}
.disabled\:cursor-not-allowed:disabled {
  cursor: not-allowed;
}
.disabled\:cursor-wait:disabled {
  cursor: wait;
}
.disabled\:bg-surface-sunken:disabled {
  background-color: var(--surface-sunken);
}
.disabled\:text-content-muted:disabled {
  color: var(--text-muted);
}
.disabled\:text-gray-400:disabled {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.disabled\:\!opacity-50:disabled {
  opacity: 0.5 !important;
}
.disabled\:opacity-40:disabled {
  opacity: 0.4;
}
.disabled\:opacity-50:disabled {
  opacity: 0.5;
}
.disabled\:opacity-60:disabled {
  opacity: 0.6;
}
.group[open] .group-open\:rotate-180 {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:translate-x-1 {
  --tw-translate-x: 0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:border-\[\#EE731B\] {
  --tw-border-opacity: 1;
  border-color: rgb(238 115 27 / var(--tw-border-opacity, 1));
}
.group:hover .group-hover\:text-\[\#EE731B\] {
  --tw-text-opacity: 1;
  color: rgb(238 115 27 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:opacity-100 {
  opacity: 1;
}
.dark\:divide-gray-700:is(.dark *) > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(55 65 81 / var(--tw-divide-opacity, 1));
}
.dark\:border-gray-500:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(107 114 128 / var(--tw-border-opacity, 1));
}
.dark\:border-gray-600:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
}
.dark\:border-gray-700:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
.dark\:bg-blue-600:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
}
.dark\:bg-gray-600:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
}
.dark\:bg-gray-700:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}
.dark\:bg-gray-800:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.dark\:text-gray-100:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(243 244 246 / var(--tw-text-opacity, 1));
}
.dark\:text-gray-200:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(229 231 235 / var(--tw-text-opacity, 1));
}
.dark\:text-gray-300:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}
.dark\:text-gray-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.dark\:text-gray-500:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.dark\:text-white:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.dark\:placeholder-gray-400:is(.dark *)::placeholder {
  --tw-placeholder-opacity: 1;
  color: rgb(156 163 175 / var(--tw-placeholder-opacity, 1));
}
.dark\:ring-offset-gray-800:is(.dark *) {
  --tw-ring-offset-color: #1f2937;
}
.dark\:hover\:bg-blue-700:hover:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));
}
.dark\:hover\:bg-gray-600:hover:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
}
.dark\:hover\:bg-gray-700:hover:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}
.dark\:focus\:border-blue-500:focus:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
}
.dark\:focus\:ring-blue-500:focus:is(.dark *) {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));
}
.dark\:focus\:ring-blue-600:focus:is(.dark *) {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(37 99 235 / var(--tw-ring-opacity, 1));
}
.dark\:focus\:ring-blue-800:focus:is(.dark *) {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(30 64 175 / var(--tw-ring-opacity, 1));
}
@media (min-width: 640px) {
  .sm\:order-1 {
    order: 1;
  }
  .sm\:order-2 {
    order: 2;
  }
  .sm\:col-span-1 {
    grid-column: span 1 / span 1;
  }
  .sm\:col-span-2 {
    grid-column: span 2 / span 2;
  }
  .sm\:col-span-4 {
    grid-column: span 4 / span 4;
  }
  .sm\:block {
    display: block;
  }
  .sm\:inline {
    display: inline;
  }
  .sm\:flex {
    display: flex;
  }
  .sm\:w-24 {
    width: 6rem;
  }
  .sm\:w-28 {
    width: 7rem;
  }
  .sm\:w-40 {
    width: 10rem;
  }
  .sm\:w-48 {
    width: 12rem;
  }
  .sm\:w-52 {
    width: 13rem;
  }
  .sm\:w-56 {
    width: 14rem;
  }
  .sm\:w-\[150px\] {
    width: 150px;
  }
  .sm\:w-auto {
    width: auto;
  }
  .sm\:max-w-full {
    max-width: 100%;
  }
  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sm\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .sm\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .sm\:flex-row {
    flex-direction: row;
  }
  .sm\:items-start {
    align-items: flex-start;
  }
  .sm\:items-end {
    align-items: flex-end;
  }
  .sm\:items-center {
    align-items: center;
  }
  .sm\:justify-end {
    justify-content: flex-end;
  }
  .sm\:justify-between {
    justify-content: space-between;
  }
  .sm\:gap-4 {
    gap: 1rem;
  }
  .sm\:space-x-4 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(1rem * var(--tw-space-x-reverse));
    margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
  }
  .sm\:space-y-0 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0px * var(--tw-space-y-reverse));
  }
  .sm\:rounded-lg {
    border-radius: 0.5rem;
  }
  .sm\:p-6 {
    padding: 1.5rem;
  }
  .sm\:p-8 {
    padding: 2rem;
  }
  .sm\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .sm\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
  .sm\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
}
@media (min-width: 768px) {
  .md\:fixed {
    position: fixed;
  }
  .md\:inset-x-auto {
    left: auto;
    right: auto;
  }
  .md\:inset-y-auto {
    top: auto;
    bottom: auto;
  }
  .md\:bottom-\[10px\] {
    bottom: 10px;
  }
  .md\:bottom-auto {
    bottom: auto;
  }
  .md\:left-0 {
    left: 0px;
  }
  .md\:right-0 {
    right: 0px;
  }
  .md\:right-\[10px\] {
    right: 10px;
  }
  .md\:col-span-5 {
    grid-column: span 5 / span 5;
  }
  .md\:col-span-6 {
    grid-column: span 6 / span 6;
  }
  .md\:col-span-7 {
    grid-column: span 7 / span 7;
  }
  .md\:mb-0 {
    margin-bottom: 0px;
  }
  .md\:mb-\[25px\] {
    margin-bottom: 25px;
  }
  .md\:mb-\[30px\] {
    margin-bottom: 30px;
  }
  .md\:mb-\[40px\] {
    margin-bottom: 40px;
  }
  .md\:mb-\[50px\] {
    margin-bottom: 50px;
  }
  .md\:ml-\[8px\] {
    margin-left: 8px;
  }
  .md\:mt-20 {
    margin-top: 5rem;
  }
  .md\:mt-\[100px\] {
    margin-top: 100px;
  }
  .md\:mt-\[13\.8px\] {
    margin-top: 13.8px;
  }
  .md\:mt-\[20px\] {
    margin-top: 20px;
  }
  .md\:mt-\[40px\] {
    margin-top: 40px;
  }
  .md\:mt-\[5px\] {
    margin-top: 5px;
  }
  .md\:mt-\[8px\] {
    margin-top: 8px;
  }
  .md\:flex {
    display: flex;
  }
  .md\:hidden {
    display: none;
  }
  .md\:h-\[24px\] {
    height: 24px;
  }
  .md\:h-\[42\.5px\] {
    height: 42.5px;
  }
  .md\:h-auto {
    height: auto;
  }
  .md\:h-full {
    height: 100%;
  }
  .md\:max-h-\[calc\(100vh-320px\)\] {
    max-height: calc(100vh - 320px);
  }
  .md\:w-6\/12 {
    width: 50%;
  }
  .md\:w-\[210px\] {
    width: 210px;
  }
  .md\:w-\[24px\] {
    width: 24px;
  }
  .md\:w-\[300px\] {
    width: 300px;
  }
  .md\:w-\[492px\] {
    width: 492px;
  }
  .md\:w-\[680px\] {
    width: 680px;
  }
  .md\:w-\[860px\] {
    width: 860px;
  }
  .md\:w-\[unset\] {
    width: unset;
  }
  .md\:w-auto {
    width: auto;
  }
  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .md\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .md\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .md\:flex-row {
    flex-direction: row;
  }
  .md\:flex-wrap {
    flex-wrap: wrap;
  }
  .md\:items-end {
    align-items: flex-end;
  }
  .md\:items-center {
    align-items: center;
  }
  .md\:gap-\[15px\] {
    gap: 15px;
  }
  .md\:gap-\[20px\] {
    gap: 20px;
  }
  .md\:gap-\[28px\] {
    gap: 28px;
  }
  .md\:space-x-3 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(0.75rem * var(--tw-space-x-reverse));
    margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
  }
  .md\:space-y-0 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0px * var(--tw-space-y-reverse));
  }
  .md\:overflow-y-auto {
    overflow-y: auto;
  }
  .md\:rounded-\[14px\] {
    border-radius: 14px;
  }
  .md\:border-l {
    border-left-width: 1px;
  }
  .md\:border-line {
    border-color: var(--border-default);
  }
  .md\:bg-transparent {
    background-color: transparent;
  }
  .md\:p-10 {
    padding: 2.5rem;
  }
  .md\:p-8 {
    padding: 2rem;
  }
  .md\:p-\[25px\] {
    padding: 25px;
  }
  .md\:px-0 {
    padding-left: 0px;
    padding-right: 0px;
  }
  .md\:px-\[20px\] {
    padding-left: 20px;
    padding-right: 20px;
  }
  .md\:px-\[25px\] {
    padding-left: 25px;
    padding-right: 25px;
  }
  .md\:py-\[20px\] {
    padding-top: 20px;
    padding-bottom: 20px;
  }
  .md\:pb-0 {
    padding-bottom: 0px;
  }
  .md\:pb-8 {
    padding-bottom: 2rem;
  }
  .md\:pb-\[104px\] {
    padding-bottom: 104px;
  }
  .md\:pl-6 {
    padding-left: 1.5rem;
  }
  .md\:pr-\[24px\] {
    padding-right: 24px;
  }
  .md\:pt-\[146px\] {
    padding-top: 146px;
  }
  .md\:pt-\[50px\] {
    padding-top: 50px;
  }
  .md\:pt-\[76px\] {
    padding-top: 76px;
  }
  .md\:text-\[12\.5px\] {
    font-size: 12.5px;
  }
  .md\:text-\[14\.5px\] {
    font-size: 14.5px;
  }
  .md\:text-\[15\.5px\] {
    font-size: 15.5px;
  }
  .md\:text-\[15px\] {
    font-size: 15px;
  }
  .md\:text-\[17px\] {
    font-size: 17px;
  }
  .md\:text-\[19px\] {
    font-size: 19px;
  }
  .md\:text-\[20px\] {
    font-size: 20px;
  }
  .md\:text-\[36px\] {
    font-size: 36px;
  }
  .md\:text-\[40px\] {
    font-size: 40px;
  }
  .md\:font-medium {
    font-weight: 500;
  }
  .md\:leading-\[22px\] {
    line-height: 22px;
  }
  .md\:leading-\[26px\] {
    line-height: 26px;
  }
  .md\:leading-\[30px\] {
    line-height: 30px;
  }
  .md\:leading-\[50px\] {
    line-height: 50px;
  }
  .md\:leading-normal {
    line-height: 1.5;
  }
  .md\:text-\[\#000\] {
    --tw-text-opacity: 1;
    color: rgb(0 0 0 / var(--tw-text-opacity, 1));
  }
}
@media (min-width: 900px) {
  .min-\[900px\]\:flex-row {
    flex-direction: row;
  }
}
@media (min-width: 1024px) {
  .lg\:col-span-4 {
    grid-column: span 4 / span 4;
  }
  .lg\:col-span-8 {
    grid-column: span 8 / span 8;
  }
  .lg\:mt-0 {
    margin-top: 0px;
  }
  .lg\:mt-\[100px\] {
    margin-top: 100px;
  }
  .lg\:flex {
    display: flex;
  }
  .lg\:hidden {
    display: none;
  }
  .lg\:min-h-0 {
    min-height: 0px;
  }
  .lg\:w-5\/12 {
    width: 41.666667%;
  }
  .lg\:w-auto {
    width: auto;
  }
  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .lg\:grid-cols-\[minmax\(0\2c 1fr\)_20rem\] {
    grid-template-columns: minmax(0,1fr) 20rem;
  }
  .lg\:grid-cols-\[minmax\(360px\2c 0\.8fr\)_minmax\(520px\2c 1\.2fr\)\] {
    grid-template-columns: minmax(360px,0.8fr) minmax(520px,1.2fr);
  }
  .lg\:flex-row {
    flex-direction: row;
  }
  .lg\:items-center {
    align-items: center;
  }
  .lg\:items-baseline {
    align-items: baseline;
  }
  .lg\:justify-end {
    justify-content: flex-end;
  }
  .lg\:justify-between {
    justify-content: space-between;
  }
  .lg\:gap-3 {
    gap: 0.75rem;
  }
  .lg\:gap-\[40px\] {
    gap: 40px;
  }
  .lg\:space-x-4 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(1rem * var(--tw-space-x-reverse));
    margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
  }
  .lg\:space-y-0 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0px * var(--tw-space-y-reverse));
  }
  .lg\:overflow-hidden {
    overflow: hidden;
  }
  .lg\:border-l {
    border-left-width: 1px;
  }
  .lg\:border-t-0 {
    border-top-width: 0px;
  }
  .lg\:px-0 {
    padding-left: 0px;
    padding-right: 0px;
  }
  .lg\:px-\[25px\] {
    padding-left: 25px;
    padding-right: 25px;
  }
  .lg\:text-right {
    text-align: right;
  }
}
@media (min-width: 1280px) {
  .xl\:flex {
    display: flex;
  }
  .xl\:w-4\/12 {
    width: 33.333333%;
  }
}
@media (min-width: 1536px) {
  .\32xl\:w-2\/12 {
    width: 16.666667%;
  }
}
.rtl\:rotate-180:where([dir="rtl"], [dir="rtl"] *) {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rtl\:space-x-reverse:where([dir="rtl"], [dir="rtl"] *) > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 1;
}
.rtl\:text-right:where([dir="rtl"], [dir="rtl"] *) {
  text-align: right;
}
.\[\&\>\*\:last-child\]\:min-w-0>*:last-child {
  min-width: 0px;
}
.\[\&\>\*\:last-child\]\:break-words>*:last-child {
  overflow-wrap: break-word;
}
@font-face {
  font-family: 'Avenir';
  src: url('/assets/25f994de-d13f-4a5d-a82b-bf925a1e054d-B6yEOkZR.ttf');
}

@font-face {
  font-family: 'Rubik-Black';
  src: url('/assets/Rubik-Black-CYJZ_tp9.ttf');
}

@font-face {
  font-family: 'Rubik-Medium';
  src: url('/assets/Rubik-Medium-C8Wwn5vb.ttf');
}

html {
  height: 100%;
}

body {
  height: 100%;
  margin: 0;
  font-family:
    Avenir,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    'Roboto',
    'Oxygen',
    'Ubuntu',
    'Cantarell',
    'Fira Sans',
    'Droid Sans',
    'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#root {
  height: 100%;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
}

* {
  font-family: Montserrat;
}

.ql-snow .ql-editor img {
  cursor: default;
  position: relative;
  width: auto;
  right: auto;
  top: auto;
}

.ql-snow img {
  cursor: default;
  position: relative;
  width: auto;
  right: auto;
  top: auto;
}

.ann-details {
  height: auto;
}

.rmsc .item-renderer {
  align-items: center !important;
}
/*
 * Shared mobile "full-screen popup" shell.
 * Consumed by the chat popup and the SMS/WhatsApp popup so both behave identically
 * on phones/tablets. Desktop (> 1024px) is unaffected — the popups keep their own
 * floating-panel base rules above this breakpoint.
 *
 * Usage:
 *   <div class="mobile-shell">
 *     <header class="mobile-shell-header"> ... </header>
 *     <div class="mobile-shell-scroll"> ...messages... </div>
 *     <footer class="mobile-shell-footer"> ...composer... </footer>
 *   </div>
 * Pair with the useKeyboardInset hook so --kbd-inset shrinks the shell when the
 * on-screen keyboard is open, keeping the composer visible.
 */
@media (max-width: 1024px) {
  .mobile-shell {
    position: fixed;
    /* pin to the top; let `height` (not bottom:0) control the box so the window
       shrinks above the keyboard instead of staying full-height behind it */
    top: 0;
    left: 0;
    right: 0;
    bottom: auto;
    width: 100%;
    max-width: 100%;
    margin: 0;
    border: none;
    border-radius: 0;
    z-index: 100000;
    display: flex;
    flex-direction: column;
    background: var(--surface-card);
    /* dynamic viewport height, shrinking when the keyboard is open.
       Layered fallbacks: vh (universal) -> svh (>= Safari 15.4) -> dvh (best). */
    height: 100vh;
    height: 100svh;
    height: calc(100dvh - var(--kbd-inset, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .mobile-shell .mobile-shell-header,
  .mobile-shell .mobile-shell-footer {
    flex-shrink: 0;
  }

  .mobile-shell .mobile-shell-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* Minimum comfortable touch target. */
  .mobile-shell .tap-44 {
    min-width: 44px;
    min-height: 44px;
  }
}
/*$vite$:1*/