/* For HTML documents, html and :root mean the same thing.
  We still specify :root here because that's what bootstrap uses, so it's necessary to override styles.
*/
/* Default Theme: Serene Light */
:root,
.theme-light {
  /* -------------------- Transitions -------------------- */
  --transition: all 400ms ease;

  /* -------------------- Basic Colors -------------------- */
  --white: #fefefe;
  --gray: #eeeeee;
  --main-gray: #646568;
  --gray-40-darker: #3a3b3c;
  --gray-lighter: #f8f9fc;
  --gray-40-lighter: #bfc0c2;
  --gray-10-lighter: #7b7c7f;
  --black: #0a0b0e;
  --text-color: var(--black);
  --body-background: var(--gray-lighter);
  --card-background: var(--white);
  --text-muted: var(--gray-40-darker);
  --text-dark: var(--text-muted);
  --text-white: var(--white);

  /* -------------------- Blues -------------------- */
  --blue-20-darker: #3e3bc7;
  --blue-30-darker: #3935b2;
  --blue-40-darker: #332f9d;
  --blue-50-darker: #2b2878;

  /* -------------------- Violet -------------------- */
  --violet: #211443;
  --violet-10-darker: #1d113b;
  --violet-40-darker: #110725;
  --violet-50-darker: #0d051d;
  --violet-10-lighter: #392855;
  --violet-40-lighter: #85628d;

  /* -------------------- Greens -------------------- */
  --green: #4caf50;
  --green-40-darker: #308631;
  --green-50-darker: #297c2a;

  /* -------------------- Cyans -------------------- */
  --cyan-30-darker: #248288;
  --cyan-40-darker: #1e676c;
  --cyan-50-darker: #184d51;

  /* -------------------- Reds -------------------- */
  --red: #fa3c4b;
  --red-30-darker: #cc252f;
  --red-50-darker: #b70f1c;

  /* -------------------- Oranges -------------------- */
  --orange: #dc896c;
  --orange-10-darker: #e6835d;
  --orange-30-darker: #c96638;
  --orange-50-darker: #ae491a;
  --alert-orange: #ff9800;

  /* -------------------- Pink -------------------- */
  --pink: #e877d9;
  --pink-10-darker: #cf6abf;
  --pink-20-darker: #b65da5;
  --pink-30-darker: #9d4f8b;
  --pink-40-darker: #843271;

  /* -------------------- Interface Elements -------------------- */
  --btn-action-border: #a8a9ab;
  --accordian-header-background: #110725;
  --slider-bg: var(--blue-30-darker);
  --slider-bg-shadow: rgb(204, 219, 232) 3px 3px 6px 0px inset,
    rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset;
  --labels-color: var(--gray-40-darker);
  --collapse-toggle-bg: rgba(72, 69, 243, 0.047);
  --collapse-toggle-outline: var(--link);
  --collapse-toggle-outline-hover: var(--blue-50-darker);
  --navbar-collapse: var(--blue-50-darker);
  --audio-bg: rgba(191, 192, 194, 0.251);
  --vertical-line: rgba(30, 51, 169, 0.099);

  /* -------------------- Tabs -------------------- */
  --tab-color: rgb(43 40 120 / 4%);
  --tab-checked-color: #332f9d;
  --tab-hover: #2b2878;
  --tab-border-left: var(--color-tab-border-left);
  --color-tab-border-left: rgba(34, 42, 53, 0.251);
  --color-tab-border-left-active: #211443;
  --secondary-header-bg: #211443;
  --table-thead: var(--blue-50-darker);
  --border-left: rgba(58, 59, 60, 0.15);

  /* -------------------- Links -------------------- */
  --link: #4945f3;
  --over-link: var(--blue-30-darker);
  --nav-link-active: rgba(57, 53, 178, 0.1);
  --nav-link-bg-hover: rgba(57, 53, 178, 0.332);
  --theme-hover: var(--blue-30-darker);
  --text-green: var(--link);

  /* -------------------- Info Banner -------------------- */
  --info-banner-border-left: var(--link);
  --info-banner-bg: hsla(241, 88%, 68%, 0.062);

  /* -------------------- Alerts -------------------- */
  --warning-background: rgb(255 152 0 / 6%);
  --alert-danger-background: rgba(242, 3, 3, 0.065);
  --alert-success-border: var(--blue-20-darker);
  --alert-success-bg: rgba(51, 47, 157, 0.054);
  --alert-text-danger-bg: rgba(242, 3, 3, 0.065);
  --info-gray-bg: rgba(204, 208, 211, 0.135);

  /* -------------------- Selects / Empty States -------------------- */
  --custom-select-bg: var(--body-background);
  --custom-select-box-shadow: inset 0 2px 5px rgba(133, 173, 215, 0.355);
  --empty-state-bg: rgba(72, 69, 243, 0.05);
  --color-disabled: var(--gray-10-lighter);

  /* -------------------- Cards & Tables -------------------- */
  --card-info-total: var(--violet-10-darker);
  --btn-disabled-bg: var(--white);
  --btn-disabled-border: var(--gray-10-lighter);
  --moderation-button-hover: var(--violet-10-darker);
  --moderation-btns-bg: rgba(33, 20, 66, 0.024);
  --tooltip-icon: var(--gray-40-darker);
  --tooltip-icon-bg: var(--violet-10-darker);
  --scrollbar-color: var(--violet-10-darker);
  --table-border-top: rgba(204, 208, 211, 0.504);
  --table-hover: rgba(227, 233, 249, 0.47);
  --border-color-group: rgba(33, 20, 66, 0.396);
  --confidence-clips: rgba(50, 48, 170, 0.06);
  --audio-opacity: 1;
  --modal-opacity: 0.5;
  --transcript-header: var(--violet);
  --table-header: var(--cyan-30-darker);
  --summary-row: rgba(103, 101, 245, 0.376);
  --op-nav-bg: var(--white);

  /* -------------------- Dropdown Menu -------------------- */
  --dp-background: var(--white);
  --dp-text-color: var(--blue-50-darker);
  --dp-hover: var(--blue-50-darker);
  --dp-hover-text: var(--white);
  --dp-border: var(--gray);

  /* -------------------- Borders -------------------- */
  --border-color: rgba(168, 169, 171, 0.152);
  --border-color-bottom: rgba(168, 169, 171, 0.152);
  --span-border: rgba(191, 192, 194, 0.33);
  --input-border: #ced4da;
  --button-group-border: var(--violet-40-darker);

  /* -------------------- Background / Navbar Gradient -------------------- */
  --background: rgba(43, 40, 120, 1);
  --background: linear-gradient(294deg, rgba(36, 130, 136, 1) 13%, rgba(43, 40, 120, 1) 51%);
  --hr-bg: var(--background);

  /* -------------------- Shadows -------------------- */
  --box-shadow: rgba(99, 99, 99, 0.11) 0px 2px 8px 0px;
  --inset-shadow: rgb(204, 219, 232) 3px 3px 6px 0px inset,
    rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset;

  /* -------------------- Buttons -------------------- */
  --secondary-bg-color: var(--cyan-30-darker);
  --secondary-bg-color-hover: var(--cyan-40-darker);
  --data-bg-color: var(--violet-10-darker);
  --pagination-bg-color: var(--cyan-30-darker);
  --pagination-bg-color-hover: var(--cyan-30-darker);
  --comment-button-hover: var(--blue-40-darker);
  --comment-button-border: var(--blue-40-darker);
  --underline-link: var(--white);
  --btn-light-border: var(--violet-40-darker);
  --btn-light-bg: var(--white);
  --btn-light-hover: var(--violet-10-darker);
  --custom-select-bg-disabled: var(--gray);

  /* -------------------- Fonts -------------------- */
  --font-family-archivo: "Archivo", sans-serif;
  --font-size-12px: 0.75rem;
  --font-size-14px: 0.875rem;
  --font-size-16px: 1rem;
}

/* Royal Purple Theme */
.theme-purple {
  /* -------------------- Basic Colors -------------------- */
  --body-background: #221543;
  --card-background: #180f2f;
  --text-color: #cac6c6;
  --text-muted: var(--text-color);
  --text-dark: var(--text-muted);
  --text-white: #d5d0d0;

  /* -------------------- Greens -------------------- */
  --green: #4be85c;
  --green-40-darker: var(--green);

  /* -------------------- Interface Elements -------------------- */
  --btn-action-border: #4945f3;
  --accordian-header-background: var(--card-background);
  --navbar-collapse: var(--card-background);
  --audio-bg: #631955;
  --vertical-line: var(--white);

  /* -------------------- Borders -------------------- */
  --border-color: #635981;
  --border-color-bottom: var(--white);
  --hr-color: #635981;
  --border-color-group: rgba(218, 213, 229, 0.396);
  --span-border: rgba(245, 246, 249, 0.35);
  --input-border: rgba(255, 255, 255, 0.252);
  --button-group-border: var(--white);

  /* -------------------- Tabs -------------------- */
  --tab-color: rgba(255, 255, 255, 0.05);
  --tab-checked-color: #e33ecd;
  --tab-hover: #e33ecd;
  --tab-border-left: var(--card-background);
  --color-tab-border-left-active: var(--white);
  --secondary-header-bg: #2f2d9e;
  --scrollbar-color: var(--white);
  --op-nav-bg: var(--body-background);

  /* -------------------- Slider -------------------- */
  --slider-bg: var(--blue-20-darker);
  --slider-bg-shadow: rgb(58, 42, 45) 3px 3px 6px 0px inset,
    rgba(178, 164, 240, 0.5) -3px -3px 6px 1px inset;

  /* -------------------- Tables -------------------- */
  --table-thead: #2a257d;
  --table-border-top: rgba(104, 104, 136, 0.551);
  --table-hover: rgba(5, 30, 100, 0.47);
  --table-header: var(--blue-20-darker);

  /* -------------------- Links -------------------- */
  --link: #d24cf0;
  --over-link: var(--white);
  --text-green: rgb(255, 193, 7);
  --nav-link-active: rgba(227, 62, 205, 0.099);
  --nav-link-bg-hover: rgba(227, 62, 205, 0.268);
  --theme-hover: var(--btn-action-border);

  /* -------------------- Dropdown Menu -------------------- */
  --dp-background: var(--card-background);
  --dp-text-color: var(--text-color);
  --dp-hover: var(--white);
  --dp-hover-text: var(--card-background);
  --dp-border: rgba(229, 229, 229, 0.698);
  --underline-link: var(--white);

  /* -------------------- Alerts -------------------- */
  --warning-background: var(--card-background);
  --alert-danger-background: var(--warning-background);
  --alert-text-danger-bg: rgba(242, 3, 3, 0.319);
  --alert-success-border: var(--blue-20-darker);
  --alert-success-bg: rgba(51, 47, 157, 0.28);
  --color-disabled: var(--gray-40-darker);
  --info-gray-bg: var(--body-background);

  /* -------------------- Selects / Empty States -------------------- */
  --custom-select-bg: rgb(20, 7, 54);
  --custom-select-box-shadow: inset 0 2px 5px rgba(10, 35, 62, 0.355);
  --empty-state-bg: var(--body-background);
  --custom-select-bg-disabled: rgb(167 158 188);

  /* -------------------- Cards -------------------- */
  --card-info-total: var(--violet-10-darker);
  --btn-disabled-bg: var(--body-background);
  --btn-disabled-border: var(--gray-10-lighter);
  --moderation-button-hover: var(--blue-40-darker);
  --btn-light-border: var(--border-color);
  --btn-light-bg: var(--violet-40-darker);
  --btn-light-hover: var(--orange-50-darker);

  /* -------------------- Shadows -------------------- */
  --box-shadow: radial-gradient(ellipse at top left, #3a2c4a 0%, #2b203a 100%);
  --inset-shadow: rgba(12, 10, 69, 0.745) 3px 3px 6px 0px inset,
    rgba(13, 7, 82, 0.05) -3px -3px 6px 1px inset;

  /* -------------------- Audio / Modal -------------------- */
  --audio-opacity: 0.7;
  --modal-opacity: 0.8;

  /* -------------------- Tooltip / Collapse -------------------- */
  --labels-color: var(--text-color);
  --tooltip-icon: rgb(255, 193, 7);
  --tooltip-icon-bg: var(--card-background);
  --collapse-toggle-bg: rgba(72, 69, 243, 0.047);
  --collapse-toggle-outline: var(--link);
  --collapse-toggle-outline-hover: var(--link);

  /* -------------------- Buttons -------------------- */
  --secondary-bg-color: #e33ecd;
  --secondary-bg-color-hover: #b02b9e;
  --data-bg-color: var(--blue-40-darker);
  --pagination-bg-color: var(--white);
  --pagination-bg-color-hover: var(--blue-20-darker);
  --comment-button-hover: var(--blue-20-darker);
  --comment-button-border: var(--border-color-group);

  /* -------------------- Background / Gradients -------------------- */
  --background: linear-gradient(294deg, rgb(45, 42, 148) 0%, rgb(34, 21, 67) 27%);
  --hr-bg: rgba(255, 255, 255, 0.333);
}

/* Midnight Dark Theme */
.theme-dark {
  /* -------------------- Basic Colors -------------------- */
  --body-background: #0f0f0f;
  --card-background: #0a0b0e;
  --text-color: #bdbaba;
  --text-muted: var(--text-color);
  --text-dark: var(--text-muted);
  --text-white: #d1cece;

  /* -------------------- Greens -------------------- */
  --green: #4be85c;
  --green-40-darker: var(--green);

  /* -------------------- Interface Elements -------------------- */
  --btn-action-border: #760613;
  --accordian-header-background: var(--card-background);
  --navbar-collapse: var(--card-background);
  --underline-link: var(--text-green);
  --audio-opacity: 0.7;
  --modal-opacity: 0.8;
  --vertical-line: var(--white);

  /* -------------------- Borders -------------------- */
  --border-color: #2f2f2f;
  --border-color-bottom: var(--white);
  --hr-color: #2f2f2f;
  --border-color-group: rgba(239, 237, 244, 0.396);
  --span-border: rgba(245, 246, 249, 0.35);
  --border-left: rgba(230, 233, 240, 0.191);
  --table-border-top: rgba(48, 48, 49, 0.725);
  --input-border: rgba(255, 255, 255, 0.252);
  --button-group-border: rgb(255, 193, 7);

  /* -------------------- Tabs -------------------- */
  --tab-color: rgba(255, 255, 255, 0.05);
  --tab-checked-color: #ec3241;
  --tab-hover: #cc252f;
  --tab-border-left: var(--card-background);
  --color-tab-border-left-active: var(--white);
  --secondary-header-bg: #af242d;
  --op-nav-bg: var(--body-background);

  /* -------------------- Slider -------------------- */
  --slider-bg: var(--red-30-darker);
  --slider-bg-shadow: rgb(58, 42, 45) 3px 3px 6px 0px inset,
    rgba(238, 84, 84, 0.347) -3px -3px 6px 1px inset;

  /* -------------------- Tables -------------------- */
  --table-thead: #760613;
  --table-hover: rgba(221, 111, 51, 0.109);
  --table-header: var(--tooltip-icon);
  --summary-row: rgba(245, 101, 123, 0.21);

  /* -------------------- Links -------------------- */
  --link: rgb(255, 193, 7);
  --over-link: var(--white);
  --text-green: rgb(255, 193, 7);
  --nav-link-active: rgb(244 67 54 / 21%);
  --nav-link-bg-hover: rgb(103 18 26 / 75%);
  --theme-hover: var(--btn-action-border);
  --collapse-toggle-outline-hover: var(--link);

  /* -------------------- Dropdown Menu -------------------- */
  --dp-background: var(--card-background);
  --dp-text-color: var(--text-color);
  --dp-hover: rgb(255, 193, 7);
  --dp-hover-text: var(--card-background);
  --dp-border: rgba(229, 229, 229, 0.412);
  --tooltip-icon: rgb(255, 193, 7);
  --tooltip-icon-bg: var(--card-background);

  /* -------------------- Alerts -------------------- */
  --warning-background: var(--card-background);
  --alert-danger-background: rgba(0, 0, 0, 0.35);
  --alert-success-border: var(--red-30-darker);
  --alert-success-bg: rgba(157, 47, 74, 0.28);
  --alert-text-danger-bg: rgba(242, 3, 3, 0.319);
  --info-gray-bg: var(--body-background);

  /* -------------------- Tooltip / Collapse -------------------- */
  --labels-color: var(--text-color);
  --scrollbar-color: var(--link);

  /* -------------------- Selects / Empty States -------------------- */
  --custom-select-bg: rgb(27, 26, 26);
  --custom-select-box-shadow: inset 0 2px 5px rgba(36, 37, 39, 0.355);
  --empty-state-bg: var(--body-background);
  --custom-select-bg-disabled: rgb(80, 79, 84);
  --color-disabled: var(--gray-40-lighter);

  /* -------------------- Cards -------------------- */
  --card-info-total: #000000;
  --btn-disabled-bg: var(--body-background);
  --btn-disabled-border: var(--gray-10-lighter);
  --moderation-button-hover: var(--red-50-darker);
  --btn-light-border: var(--border-color);
  --btn-light-bg: var(--card-background);
  --btn-light-hover: var(--orange-50-darker);

  /* -------------------- Shadows -------------------- */
  --box-shadow: rgba(18, 16, 16, 0.585) 0px 2px 8px 0px;
  --inset-shadow: rgba(65, 65, 69, 0.19) 3px 3px 6px 0px inset,
    rgb(255 255 255 / 5%) -3px -3px 6px 1px inset;

  /* -------------------- Buttons -------------------- */
  --secondary-bg-color: var(--red-30-darker);
  --secondary-bg-color-hover: var(--red-50-darker);
  --data-bg-color: var(--red-30-darker);
  --pagination-bg-color: var(--red-30-darker);
  --pagination-bg-color-hover: var(--red-30-darker);
  --comment-button-border: var(--border-color-group);

  /* -------------------- Background / Gradients -------------------- */
  --background: linear-gradient(294deg, rgba(143, 23, 33, 1) 0%, rgba(10, 11, 14, 1) 25%);
  --hr-bg: rgba(255, 255, 255, 0.333);

  /* -------------------- Transcript -------------------- */
  --transcript-header: #000000;

  /* -------------------- Misc -------------------- */
  --confidence-clips: #760613;
}

/* Theme: Light */
.theme-light .custom-select,
.theme-light .theme-select select {
  background-image: url("../images/arrow-light.svg");
}

/* Theme: Dark, and Purple */
.theme-dark .custom-select,
.theme-purple .custom-select,
.theme-dark .theme-select select,
.theme-purple .theme-select select {
  background-image: url("../images/arrow-dark.svg");
}

html,
body {
  height: 100%;
}

body {
  background: var(--body-background);
  color: var(--text-color);
}

svg text {
  fill: var(--text-color);
}
.col th {
  color: var(--text-color);
}
.table td,
.table th {
  border-top: 1px solid var(--table-border-top);
}

svg path,
svg line {
  stroke: var(--text-color);
}

/* Axis lines */
.c3-axis path,
.c3-axis line {
  stroke: var(--text-color) !important;
}

/* Axis tick labels */
.c3-axis text,
.c3-axis tspan {
  fill: var(--text-color) !important;
}

.custom-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  box-shadow: var(--inset-shadow);
  border-radius: 0;
  background-color: var(--custom-select-bg);
  border: solid 1px var(--input-border);
  color: var(--text-color);

  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 20px;
  padding-right: 2rem;
}

.page-section .form-control {
  box-shadow: var(--custom-select-box-shadow);
}

.alert-dismissible {
  border-left: 5px var(--alert-orange) solid;
  background: var(--warning-background);
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  border-right: 1px solid var(--border-color);
}

.alert-warning,
#demo-notice {
  color: var(--text-color);
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  border-right: 1px solid var(--border-color);
  border-left: 5px solid var(--alert-orange);
  background: var(--warning-background);
  margin: 1rem 0 !important;
  border-radius: 0;
}

#demo-notice .close {
  top: -3px;
}

/* Alerts UI */

/* Base Alert Styles */
.alert-light,
.alert-danger,
.alert-secondary,
.alert-success,
.empty-state {
  color: var(--text-color);
  border-radius: 0;

  /* shared transparent borders */
  border-top: transparent;
  border-right: transparent;
  border-bottom: transparent;
}

/* Alert Variants */
.alert-light {
  background-color: var(--card-background);
  border-color: var(--border-color);
  margin-bottom: 0.5rem !important;
}

.alert-danger,
.alert-secondary {
  border: 1px solid var(--border-color);
  border-left: 5px var(--red-30-darker) solid;
  background: var(--alert-danger-background);
}

.alert-danger {
  margin: 1rem 0 !important;
}

.alert-secondary {
  margin: 0 0 0.4rem 0 !important;
}

.alert-success {
  border: 1px solid var(--border-color);
  border-left: 5px var(--blue-20-darker) solid;
  background: var(--empty-state-bg);
  margin: 0 !important;
}

/* Empty State */
.empty-state {
  border: 1px solid var(--border-color);
  border-left: 5px var(--blue-20-darker) solid;
  background: var(--empty-state-bg);
  text-align: left;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 1rem;
  height: auto;
}

.banner-info .empty-state {
  border-left: 0 !important;
  padding: 0 1rem !important;
  padding-top: 0.7rem !important;
}

.hr {
  margin-bottom: 1rem;
  border: none;
  height: 1px;
  background: var(--hr-bg);
}

.labels {
  color: var(--text-muted);
  font-weight: 300;
  display: inline;
}

.separator {
  border-left: 1px solid var(--orange);
  margin-left: 1rem;
  max-height: fit-content;
}

.left-border-none {
  border-left: none !important;
  margin-left: 0 !important;
}

/* Buttons UI */

.btn-secondary {
  padding: 6px 16px;
  border: 1px solid transparent;
  background: var(--secondary-bg-color);
  text-align: center;
  cursor: pointer;
  border-radius: 0;
  transition: border-color 0.2s ease-in-out, background 0.2s ease-in-out;
}

.btn-secondary:hover,
.btn-secondary:focus {
  border: 1px solid var(--underline-link);
  background: var(--secondary-bg-color-hover);
  outline: 1px solid var(--secondary-bg-color-hover);
}

.btn-tertiary {
  color: var(--white);
  padding: 6px 16px;
  border: 1px solid transparent;
  background: var(--blue-30-darker);
  text-align: center;
  cursor: pointer;
  border-radius: 0;
  transition: border-color 0.2s ease-in-out, background 0.2s ease-in-out;
}

.btn-tertiary:hover {
  color: var(--white);
  background: var(--blue-50-darker);
  border: 1px solid var(--white) !important;
  outline: 1px solid var(--blue-50-darker);
}

.link-button {
  background-color: var(--card-background);
  border-color: var(--text-color);
  color: var(--text-color);
  border-radius: 0;
  transition: var(--transition);
  width: 100%;
  font-weight: 300;
}

.link-button:hover {
  background: var(--data-bg-color);
  border: 1px solid var(--underline-link) !important;
  outline: 1px solid var(--data-bg-color);
  color: var(--white);
}

.collapse-toggle {
  margin-top: 0.5rem;
  outline: 1px solid var(--info-banner-border-left);
  background: rgba(72, 69, 243, 0.047);
}

.collapse-toggle:focus,
.collapse-toggle:hover {
  outline: 1px dashed var(--blue-50-darker);
  background: rgba(72, 69, 243, 0.047);
}

.table-body-info .collapse-toggle {
  background: var(--card-background);
}

.btn-outline-dark,
.btn-edit,
.btn-save,
.btn-reset,
.btn-test,
.btn-delete {
  margin-top: 8px;
  padding: 6px 16px;
  text-align: center;
  cursor: pointer;
  border-radius: 0;
  transition: var(--transition);
  color: var(--white);
  white-space: nowrap;
  overflow: hidden;
  margin-right: 0.1rem;
}

pagination-control .plain-button,
.page-number-input {
  border: 1px solid var(--pagination-bg-color);
  font-size: 18px;
  text-align: center;
  padding: 0.2rem 0.8rem;
  width: 40px;
}

.plain-button {
  font-weight: 300;
  transition: var(--transition);
  color: var(--text-color);
}

.page-number-input {
  color: var(--text-color);
  background-color: rgba(44, 117, 122, 0.057);
}

.plain-button:hover {
  border: 1px solid var(--pagination-bg-color);
  background: var(--pagination-bg-color-hover);
  color: var(--white);
}

.btn-outline-dark {
  color: var(--white);
  padding: 6px 16px;
  border: 1px solid transparent;
  background: var(--secondary-bg-color);
  text-align: center;
  cursor: pointer;
  border-radius: 0;
  transition: border-color 0.2s ease-in-out, background 0.2s ease-in-out;
}

.expand-button {
  color: var(--text-color);
  padding: 6px 16px;
  border: 1px solid var(--pagination-bg-color);
  background: rgba(33, 20, 66, 0.024);
  text-align: center;
  cursor: pointer;
  border-radius: 0;
  transition: border-color 0.2s ease-in-out, background 0.2s ease-in-out;
}

.btn-outline-dark:hover {
  color: var(--white);
  border-color: var(--white) !important;
  background: var(--secondary-bg-color-hover);
  border-color: var(--underline-link) !important;
  outline: 1px solid var(--secondary-bg-color-hover);
}

.btn-outline-dark:disabled,
.btn-outline-dark:disabled:hover {
  color: var(--text-color);
  background: var(--btn-disabled-bg);
  border: 1px solid var(--btn-disabled-border) !important;
  cursor: auto;
  outline: none;
}

.btn-outline-dark:not(:disabled):not(.disabled):active {
  color: var(--white);
  background-color: var(--secondary-bg-color);
  border-color: var(--white);
}

.comment-button {
  color: var(--text-color);
  width: 100%;
  max-width: 100%;
  padding: 6px 16px;
  border: solid 1px var(--comment-button-border) !important;
  background: rgba(33, 20, 66, 0.024);
  border-radius: 0px;
  margin-top: 0px !important;
  transition: var(--transition);
}

.comment-button:hover {
  color: var(--white) !important;
  border: solid 1px var(--white) !important;
  background: var(--comment-button-hover) !important;
  outline: 1px solid var(--comment-button-hover);
}

.comment-button:hover span {
  color: var(--white) !important;
}

.moderation-buttons {
  display: inline-flex;
  flex-wrap: wrap;
  width: 100%;
  min-width: 15em;
  overflow: hidden;
  border: 0px !important;
  gap: 1px !important;
}

.moderation-button {
  flex: 1 1 auto;
  color: var(--text-color);
  padding: 6px 16px;
  background: var(--moderation-btns-bg);
  text-align: center;
  cursor: pointer;
  transition: var(--transition);
  margin-top: 1px !important;
  margin-left: 1px !important;
  border: 1px solid rgba(33, 20, 66, 0.396);
  margin-right: 0;
}

.moderation-button:hover {
  color: var(--white);
  border: 1px solid var(--button-group-border) !important;
  background: var(--moderation-button-hover);
  outline: none;
}

button.collapse-toggle::before {
  transition: transform 0.5s;
  display: inline-block;
  margin-right: 0.2em;
  content: "";
  border-left: 0.4em solid;
  border-top: 0.4em solid transparent;
  border-right: 0;
  border-bottom: 0.4em solid transparent;
}

button.collapse-toggle {
  margin-top: 0.5rem;
  outline: 1px solid var(--collapse-toggle-outline);
  background: var(--collapse-toggle-bg);
  color: var(--text-color);
}

button.collapse-toggle:hover,
button.collapse-toggle:focus {
  outline: 1px dashed var(--collapse-toggle-outline-hover);
  background: var(--collapse-toggle-bg);
}

.btn.moderation-button {
  border: 1px solid var(--border-color-group);
}

.classic-list {
  color: var(--text-dark);
  font-weight: 300;
}

.badge-dark {
  background: var(--blue-50-darker) !important;
  border-radius: 0;
  border: 1px solid var(--white);
}

.circle-badge {
  background-color: var(--body-background);
  border: 1px solid var(--collapse-toggle-outline);
  border-radius: 0;
  height: 20px;
  width: 20px;
  color: var(--text-color);
  font-size: var(--font-size-12px);
  text-align: center;
  line-height: 17px;
  margin-right: 0.3rem;
  padding-top: 1px;
}

/* Edit Button */

.btn-edit,
.btn-save {
  border: 1px solid var(--blue-40-darker);
  background: var(--blue-40-darker);
}

.btn-edit:hover,
.btn-save:hover {
  background: var(--blue-50-darker);
  border-color: var(--blue-50-darker) !important;
  outline: none;
}

.btn-reset,
.btn-test {
  border: 1px solid var(--orange-10-darker);
  background: var(--orange-10-darker);
}

.copy-btn {
  position: relative;
  cursor: pointer;
  border: none;
  background: transparent;
  outline: none;
  margin-right: 1rem;
}

.copy-btn:focus {
  outline: none;
}

.copy-btn::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-5px);
  background-color: var(--card-background);
  border: 1px solid var(--border-color);
  color: var(--text-color);
  padding: 5px 8px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
  z-index: 10;
}

.copy-btn.tooltip-visible::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(-10px);
}

.btn-reset:hover {
  background: var(--orange-30-darker);
  border-color: var(--orange-30-darker) !important;
  outline: none;
}

/* Delete Button */

.btn-delete {
  border: 1px solid var(--red-30-darker);
  background: var(--red-30-darker);
}

.btn-delete:hover {
  background: var(--red-50-darker);
  border-color: var(--red-50-darker) !important;
  outline: none;
}

/* Define the small spinner specific styles */
.spinner-sm {
  position: relative;
  display: inline-block;
  width: 1.2em; /* Smaller size */
  height: 1.2em;
  border: none; /* Remove default border animation */
  border-radius: 50%;
  perspective: 1000px;
  animation: spinner-border-sm 1s linear infinite; /* Apply spin animation specifically for small spinner */
}

.spinner-border {
  position: relative;
  display: inline-block;
  transform: rotateZ(45deg);
  perspective: 1000px;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  border: none;
  color: var(--white);
  animation: none;
}

.spinner-sm:before,
.spinner-sm:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: inherit;
  height: inherit;
  border-radius: 50%;
  transform: rotateX(70deg);
  animation: spin 1s linear infinite;
}

.spinner-sm:after {
  color: var(--red);
  transform: rotateY(70deg);
  animation-delay: 0.4s;
}

@keyframes spinner-border-sm {
  0% {
    transform: none; /* Start at 0 rotation */
  }
}

#no-access-warning-regular,
#no-access-warning-reskin {
  color: var(--text-color);
  background: rgba(243, 69, 75, 0.05);
  border-top: transparent;
  border-right: transparent;
  border-bottom: transparent;
  border-left: 5px var(--red-30-darker) solid;
  border-radius: 0;
  margin-top: 0.5rem;
  font-size: 16px;
  padding: 1rem;
}

.text-muted {
  color: var(--text-muted) !important;
}

.theme-select {
  background: var(--body-background);
  border-radius: 0;
  box-shadow: var(--inset-shadow);
  padding: 0.2rem 0.4rem;
  margin-right: 0.5rem;
  border: rgba(255, 255, 255, 0.252) 1px solid;
  font-size: 14px;
}

.theme-select select {
  background: transparent;
  border: none;
  color: var(--text-color);
  padding: 0.25rem 0.5rem;
  line-height: 1.5;
  -moz-padding-start: 0.25rem; /* fixes Firefox misalignment */
}

.theme-select:hover:before {
  content: attr(data-tooltip);
  position: absolute;
  padding: 5px 10px;
  margin: 32px 30px 30px -2px;
  background: var(--theme-hover);
  color: var(--text-white);
  border-radius: 0;
  font-size: 14px;
}

@media (max-width: 767px) {
  .theme-select {
    display: flex;
    flex-direction: column;
    margin-right: 0;
  }
}
@media (max-width: 899px) {
  .theme-select:hover:before {
    display: none;
  }
}

.card {
  border: 1px solid var(--border-color) !important;
  background: var(--card-background);

  border-radius: 0;
}

.card-body {
  background: var(--card-background);
}

.tooltip-icon::after {
  color: var(--tooltip-icon) !important;
  left: -4px;
}

tooltip-icon {
  position: relative;
  display: inline-block;
}

tooltip-icon button {
  pointer-events: none;
  background: transparent;
  border: none;
  padding: 0;
}

tooltip-icon::after {
  content: attr(tooltip);
  position: absolute;
  background: var(--tooltip-icon-bg);
  font-weight: 400;
  color: var(--white);
  border: 1px solid var(--border-color);
  padding: 0.5rem;
  font-size: 14px;
  bottom: 60%;
  left: -90%;
  transform: translateX(-10%) translateY(-0.5rem);
  opacity: 0;
  text-align: left;
  visibility: hidden;
  pointer-events: none;
  min-width: 27em;
  z-index: 1000;
  white-space: normal;
  word-wrap: break-word;
  line-height: 1.5;
}

tooltip-icon:hover::after {
  opacity: 1;
  visibility: visible;
}

.form-control {
  border: solid 1px var(--input-border);
}

.form-control,
.form-control:focus {
  background-color: var(--custom-select-bg);
  color: var(--text-color);
}

.form-control:disabled {
  background-color: var(--custom-select-bg-disabled);
  color: var(--color-disabled);
}

.context-loading-state {
  background: var(--card-background);
}

.audio-container audio {
  opacity: var(--audio-opacity);

  border: 1px solid rgba(10, 11, 14, 0.263);
  border-radius: 50px;
}

.player-container {
  background: var(--audio-bg);
}
.modal-body {
  background: var(--card-background);
}

.moderator-email {
  color: var(--text-color);
}

.modal-backdrop {
  background-color: var(--black);
  opacity: var(--modal-opacity) !important;
}

.modal-footer,
.context-container {
  background: var(--card-background);
}

user-report-panel .actions_btn .light {
  display: none;
}

.download-clip::after {
  color: var(--text-color);
}

.vertical-line {
  border-left: 1px dashed var(--vertical-line);
  height: 100%;
  margin-left: 6px;
}

@media (max-width: 715px) {
  .checkbox-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .vertical-line {
    display: none;
  }
}

.context-row {
  border: 1px dashed var(--btn-action-border);
  padding: 0.5rem;
  margin-bottom: 0.5rem;
}

.c3-tooltip-container .c3-tooltip th,
.c3-tooltip-container .c3-tooltip td {
  background: var(--body-background);
  color: var(--text-color);
}

.c3-tooltip tr {
  background: var(--body-background);
  color: var(--text-color);
}

.multiselect-container .multiselect-all:hover {
  background-color: var(--dp-hover) !important;
}

.multiselect-option span,
.form-check .form-check-label {
  color: var(--text-color);
}

.dropdown-item.active:hover .form-check-label,
.dropdown-item.active:focus .form-check-label,
.dropdown-item.active:active .form-check-label {
  color: var(--dp-hover-text) !important;
}

blockquote.blockquote-small {
  background-color: var(--card-background);
  color: var(--text-color);
  border: 1px solid var(--border-color);
  padding: 0.5rem 1rem;
  border-bottom: 2px solid var(--link);
}

/* Dark scrollbar styling */
#user-moderation-log::-webkit-scrollbar {
  width: 8px;
}
#user-moderation-log::-webkit-scrollbar-track {
  background: var(--body-background);
}
#user-moderation-log::-webkit-scrollbar-thumb {
  background: var(--text-color);
  border-radius: 4px;
}
#user-moderation-log {
  scrollbar-width: thin;
  scrollbar-color: var(--text-color) var(--body-background);
}

.close:hover {
  color: var(--red);
}