/* Optional dark theme. Applied when <html> has class "dark". */

.theme-switch {
  display: inline-flex;
  align-items: center;
  width: 3.5rem;
  height: 1.875rem;
  padding: 0.15rem;
  border: 0;
  border-radius: 999px;
  background: #e7e9ee;
  cursor: pointer;
  flex-shrink: 0;
}

.theme-switch__icon {
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: #8a909c;
}

.theme-switch__icon svg {
  width: 1rem;
  height: 1rem;
}

html:not(.dark) .theme-switch__sun {
  background: #ffc011;
  color: #7a4e00;
}

html.dark .theme-switch {
  background: #2c3344;
}

html.dark .theme-switch__moon {
  background: #6ec1ff;
  color: #0b1c2c;
}

#pc-sidebar.collapsed .theme-switch {
  width: 1.875rem;
}

html:not(.dark) #pc-sidebar.collapsed .theme-switch__moon,
html.dark #pc-sidebar.collapsed .theme-switch__sun {
  display: none;
}

html.dark {
  color-scheme: dark;
  --silver: #8b93a7;
  --green-secondary: #16351c;
  --green: #3ddb52;
  --second-green: #16351c;
  --purple: #c084fc;
  --bg: #12141a;
  --black: #f3f4f6;
  --gray-90: #2c3344;
  --gray-90-hover: #343c50;
  --primary: #6ec1ff;
  --primary-90: #16324a;
  --ui-bg: #1c2030;
  --gray-56-secondary-text: #c5cad6;
  --red: #ff5c5c;
  --red-80: #ff8f8f;
  --red-secondary: #3a1a1a;
  --gold: #ffd15c;
  --gold-secondary: #3a3014;
  --bronze: #ffb088;
  --orange: #ff9a4a;
  --orange-secondary: #3a2414;
  --purple-secondary: #2c1d40;
}

html.dark body {
  background-color: var(--bg);
  color: var(--black);
}

html.dark .bg-white {
  background-color: #1c2030;
}

html.dark .bg-gray-50 {
  background-color: #171b24;
}

html.dark .bg-gray-100 {
  background-color: #12141a;
}

html.dark .bg-gray-200 {
  background-color: #2c3344;
}

html.dark .hover\:bg-gray-50:hover,
html.dark .hover\:bg-gray-100:hover,
html.dark .hover\:bg-white:hover,
html.dark .hover\:bg-gray-200:hover {
  background-color: #343c50;
}

html.dark .text-black,
html.dark .text-gray-900,
html.dark .text-gray-800,
html.dark .text-gray-700 {
  color: #f3f4f6;
}

html.dark .text-gray-600,
html.dark .text-gray-500,
html.dark .text-gray-400 {
  color: #c5cad6;
}

html.dark .hover\:text-gray-700:hover,
html.dark .hover\:text-gray-900:hover,
html.dark .hover\:text-black:hover {
  color: #ffffff;
}

html.dark .text-\[\#8E8E8E\] {
  color: #c5cad6;
}

html.dark .text-\[var\(--ui-bg\)\] {
  color: #ffffff;
}

html.dark .border-gray-100,
html.dark .border-gray-200,
html.dark .border-gray-300,
html.dark .border-b-\[\#EFEFEF\],
html.dark .border-\[\#EFEFEF\] {
  border-color: #3a4154;
}

html.dark .divide-gray-100 > :not([hidden]) ~ :not([hidden]),
html.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]),
html.dark .divide-gray-300 > :not([hidden]) ~ :not([hidden]) {
  border-color: #3a4154;
}

html.dark .bg-amber-50,
html.dark .bg-amber-100,
html.dark .bg-yellow-50,
html.dark .bg-yellow-100 {
  background-color: #3a2e12;
}

html.dark .text-amber-700,
html.dark .text-amber-800,
html.dark .text-yellow-700,
html.dark .text-yellow-800 {
  color: #f6d48a;
}

html.dark .bg-green-50,
html.dark .bg-green-100 {
  background-color: #14301c;
}

html.dark .text-green-600,
html.dark .text-green-700,
html.dark .text-green-800 {
  color: #8eefaa;
}

html.dark .bg-red-50,
html.dark .bg-red-100 {
  background-color: #3a1717;
}

html.dark .text-red-600,
html.dark .text-red-700,
html.dark .text-red-800 {
  color: #ffb4b4;
}

html.dark .bg-blue-50,
html.dark .bg-blue-100 {
  background-color: #15283a;
}

html.dark .text-blue-600,
html.dark .text-blue-700,
html.dark .text-blue-800 {
  color: #9bd4ff;
}

html.dark .bg-indigo-50,
html.dark .bg-indigo-100 {
  background-color: #1e2140;
}

html.dark .text-indigo-600,
html.dark .text-indigo-700,
html.dark .text-indigo-800 {
  color: #c7cbff;
}

html.dark .bg-orange-50,
html.dark .bg-orange-100 {
  background-color: #3a2414;
}

html.dark .text-orange-700,
html.dark .text-orange-800 {
  color: #ffc59a;
}

html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]),
html.dark textarea,
html.dark select {
  background-color: #262b3a;
  color: #f3f4f6;
  border-color: #4a556c;
}

html.dark input::placeholder,
html.dark textarea::placeholder {
  color: #b0b8c8;
}

html.dark .button {
  color: #ffffff;
}

html.dark .button.inverted {
  color: var(--primary);
  background: var(--ui-bg);
}

html.dark .button.light-gray,
html.dark .button.disabled {
  color: #f3f4f6;
  background: var(--gray-90);
}

html.dark .button.light-gray:hover,
html.dark .button.disabled:hover {
  background: #3a4154;
}

html.dark .navbtn:hover {
  background-color: #343c50;
}

html.dark .navbtn.active,
html.dark .navbtn.active:hover {
  background-color: var(--primary);
  color: #ffffff;
}

html.dark .navbtn:not(.active) img,
html.dark img[src$="exit.svg"] {
  filter: invert(1);
}

html.dark img[src*="logo-full.svg"],
html.dark img[src*="logo-mini.svg"] {
  filter: brightness(0) invert(1);
}

html.dark tr:hover {
  background-color: #243044;
}

html.dark .chat-notification,
html.dark .multi-select .multi-select-options,
html.dark .rating-exclude-multiselect .multi-select-header,
html.dark .rating-exclude-multiselect .multi-select-options,
html.dark .sip-incoming-banner__card,
html.dark .sip-incoming-lead-modal__card {
  background: #1c2030;
  color: #f3f4f6;
}

html.dark .sip-incoming-banner__title,
html.dark .sip-incoming-banner__from {
  color: #f3f4f6;
}

html.dark .sip-incoming-banner__region,
html.dark .multi-select .multi-select-header .multi-select-header-max,
html.dark .rating-exclude-multiselect .multi-select-header-placeholder {
  color: #c5cad6;
}

html.dark .multi-select .multi-select-header .multi-select-header-option {
  background-color: #2c3344;
  color: #f3f4f6;
}

html.dark .lead-table > tbody > tr.lead-table-row,
html.dark .lead-table > tbody > tr.lead-table-row:hover {
  background: #1c2030;
  border-color: #3a4154;
}

html.dark .switch-field:hover {
  background-color: #243044;
}

html.dark .callbacks-row--expired {
  background: #3a2a14 !important;
  color: #f3f4f6;
}

html.dark .skeleton-item {
  background: #2c3344;
}

html.dark #pc-close-tab-btn svg path {
  stroke: #f3f4f6;
}

html.dark ::selection {
  background: #24527a;
  color: #ffffff;
}

html.dark .partner-card,
html.dark .partners-shift-gate__header {
  background: #1c2030;
  border-color: #3a4154;
  color: #f3f4f6;
}

html.dark .partner-card__header {
  border-bottom-color: #3a4154;
}

html.dark .partner-card__section-title,
html.dark .partners-shift-gate__title,
html.dark .partners-shift-gate__text {
  color: #f3f4f6;
}

html.dark .partner-card__stat,
html.dark .partner-card__badge--muted,
html.dark .partners-page__cache-banner {
  background: #262b3a;
  border-color: #3a4154;
  color: #e5e7eb;
}

html.dark .partner-card__metric--sent {
  background: #15283a;
  border-color: #24527a;
  color: #9bd4ff;
}

html.dark .partner-card__metric--pending {
  background: #3a2e12;
  border-color: #6b5420;
  color: #f6d48a;
}

html.dark .partner-card__metric--new {
  background: #262b3a;
  border-color: #3a4154;
  color: #f3f4f6;
}

html.dark .partner-card__icon-btn--blue {
  background: #15283a;
  color: #9bd4ff;
}

html.dark .partner-card__icon-btn--indigo {
  background: #1e2140;
  color: #c7cbff;
}

html.dark .partner-card__icon-btn--red {
  background: #3a1717;
  color: #ffb4b4;
}

html.dark .prose {
  --tw-prose-body: #e5e7eb;
  --tw-prose-headings: #f3f4f6;
  --tw-prose-lead: #d1d5db;
  --tw-prose-links: #6ec1ff;
  --tw-prose-bold: #f3f4f6;
  --tw-prose-counters: #c5cad6;
  --tw-prose-bullets: #c5cad6;
  --tw-prose-hr: #3a4154;
  --tw-prose-quotes: #e5e7eb;
  --tw-prose-quote-borders: #6ec1ff;
  --tw-prose-captions: #c5cad6;
  --tw-prose-code: #f3f4f6;
  --tw-prose-pre-code: #e5e7eb;
  --tw-prose-pre-bg: #12141a;
  --tw-prose-th-borders: #3a4154;
  --tw-prose-td-borders: #3a4154;
  color: #e5e7eb;
}

html.dark .prose :where(h1, h2, h3, h4, h5, h6, p, li, strong, em, a, blockquote, td, th, span) {
  color: #e5e7eb;
}

html.dark .prose :where(h1, h2, h3, h4, strong) {
  color: #f3f4f6;
}

html.dark .prose :where(a) {
  color: #6ec1ff;
}