:root {
  --clr-primary-100: rgb(255, 255, 255);
  --clr-primary-200: hsl(216, 14%, 93%);
  --clr-primary-300: hsl(214, 6%, 77%);
  --clr-primary-400: hsl(225, 2%, 57%);
  --clr-primary-500: hsl(223, 3%, 53%);
  --clr-primary-700: hsl(233, 4%, 43%);
  --clr-primary-800: hsl(227, 9%, 19%);
  --clr-primary-900: #191B22;

  --clr-accent-400: #D1FF27;
  --clr-accent-500: #FD7E14;
  --clr-accent-600: red;
  --clr-accent-700: #1E90FF;
  --clr-accent-710: rgb(13, 110, 253);

  --clr-bg-200: rgba(246, 248, 250, 1);
  --clr-bg-210: hsl(210, 14%, 95%);
  --clr-bg-300: #E5E5E5;
  --clr-bg-400: #b3b3b3;
  --clr-bg-700: rgba(62, 70, 79, 1);
  --clr-bg-800: rgba(44, 47, 58, 0.96);
  --clr-bg-850: hsl(227, 12%, 14%);
  --clr-bg-900: #191B22;

  --clr-bg-transparent-400: rgba(209, 255, 39, 0.1);
  --clr-bg-transparent-600: rgba(255, 0, 0, 0.1);
  --clr-bg-transparent-700: rgb(30, 144, 255, 0.1);
  --clr-bg-transparent-820: rgba(0, 0, 0, 0.2);
  --clr-bg-transparent-850: rgba(0, 0, 0, 0.5);

  --clr-border-200: var(--clr-primary-500);
  --clr-border-400: var(--clr-primary-700);


  --theme-secondary-border-color: rgba(255, 255, 255, 0.15);
  --theme-toolbar-color: var(--clr-primary-100);


  --foreground: var(--clr-primary-100);
  --background: var(--clr-bg-900);

  /* need to manually find this */
  --clr-filter-black-to-foreground: invert(100%) sepia(2%) saturate(8%) hue-rotate(335deg) brightness(101%) contrast(101%);

  --th-clr: var(--clr-primary-400);
  --th-bg: var(--clr-bg-800);
  --card-header-bg: var(--clr-bg-850);
  --list-group-bg: var(--clr-bg-700);
  --list-table-hover: var(--clr-bg-850);
  --footer-clr: var(--clr-primary-700);
  --header-bg: var(--clr-bg-900);
  --primary-btn-clr: var(--clr-primary-800);
  --primary-btn-bg: var(--clr-accent-400);
  --secondary-list-btn-bg: var(--clr-bg-800);
  --box-bg: var(--clr-bg-800);
  --dropdown-svg-url: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgb(255, 255, 255)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  --solid-dropdown-svg-url: url("../icons/ui-caret/down-solid.svg");
  --codeblock-even-bg: var(--clr-bg-800);
  --modal-clr: var(--clr-primary-200);
  --modal-bg: var(--clr-bg-700);
  --switch-bg: var(--clr-bg-850);
  --switch-active-clr: var(--clr-accent-400);

  --font-color-legend: var(--clr-primary-300);

  --bs-body-color: var(--foreground);
  --bs-body-color-rgb: var(--foreground);
  --bs-body-bg: var(--background);
  --bs-link-color: var(--foreground);
  --bs-link-hover-color: var(--foreground);

  --source-of-truth-icon: url("../logos/ctl-mark-dark.png");

  --clr-bg-loading-indicator: var(--clr-bg-900);
  --default-input-bg: var(--clr-bg-700);

  --graph-placeholder-bg: var(--clr-bg-transparent-850);

  --select2-selected-bg: var(--clr-bg-700);
  --theme-switcher-color: var(--clr-primary-200);

  color-scheme: dark;
}

:root[data-theme="light"] {
  --clr-border-400: var(--clr-primary-500);
  --theme-secondary-border-color: rgba(25, 27, 34, 0.15);

  --foreground: var(--clr-primary-900);
  --background: var(--clr-bg-300);

  /* need to manually find this */
  --clr-filter-black-to-foreground: invert(7%) sepia(12%) saturate(1104%) hue-rotate(189deg) brightness(99%) contrast(93%);

  --footer-clr: var(--clr-primary-700);
  --th-clr: var(--clr-primary-500);
  --th-bg: var(--clr-bg-200);
  --card-header-bg: var(--clr-bg-300);
  --list-group-bg: var(--clr-bg-300);
  --list-table-hover: var(--clr-bg-210);
  --header-bg: var(--clr-bg-700);
  --secondary-list-btn-bg: var(--modal-bg);
  --box-bg: var(--clr-bg-200);
  --dropdown-svg-url: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgb(0, 0, 0)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  --solid-dropdown-svg-url: url("../icons/ui-caret/down-solid-light.svg");
  --codeblock-even-bg: var(--clr-bg-200);
  --modal-bg: var(--clr-bg-200);
  --modal-clr: var(--clr-primary-800);
  --switch-bg: var(--clr-bg-210);

  --source-of-truth-icon: url("../logos/ctl-mark-light.png");

  --bs-link-color: var(--clr-accent-710);
  --bs-link-hover-color: var(--clr-accent-710);

  --default-input-bg: var(--clr-bg-200);

  --clr-bg-loading-indicator: var(--clr-bg-400);

  --graph-placeholder-bg: var(--clr-bg-transparent-820);

  --select2-selected-bg: var(--clr-bg-400);

  --theme-switcher-color: var(--clr-primary-900);

  --font-color-legend: var(--clr-primary-800);

  color-scheme: light;
}

/**
 * Basic styles
 */

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

input[type="checkbox"] {
  accent-color: var(--background);
}

option {
  background-color: var(--background);
}

.btn {
  --bs-btn-color: var(--foreground);
}

.btn.primary {
  --bs-btn-color: var(--primary-btn-clr);
  --bs-btn-bg: var(--primary-btn-bg);
  --bs-btn-hover-color: var(--primary-btn-clr);
  --bs-btn-hover-bg: var(--primary-btn-bg);
  --bs-btn-active-color: var(--primary-btn-clr);
  --bs-btn-active-bg: var(--primary-btn-bg);
  --bs-btn-active-border-color: var(--primary-btn-bg);
}

.bg-primary .icon,
.btn.primary .icon {
  background-color: var(--primary-btn-clr);
}

.bg-primary {
  background-color: var(--primary-btn-bg) !important;
  color: var(--primary-btn-clr) !important;
}

.btn.secondary {
  --bs-btn-color: var(--foreground);
  --bs-btn-bg: transparent;
  --bs-btn-hover-color: var(--foreground);
  --bs-btn-hover-bg: transparent;
  --bs-btn-active-color: var(--foreground);
  --bs-btn-active-bg: transparent;
  border: 1px solid var(--theme-secondary-border-color);
}

.btn[data-btn-type="delete"],
.btn[data-btn-type="danger"]
{
  --bs-btn-color: var(--clr-accent-600);
  --bs-btn-bg: transparent;
  --bs-btn-hover-color: var(--clr-accent-600);
  --bs-btn-hover-bg: transparent;
  --bs-btn-active-color: var(--clr-accent-600);
  --bs-btn-active-bg: transparent;
  border: 1px solid var(--clr-accent-600);
}

.btn[data-btn-type="delete"] .icon,
[data-btn-type="danger"] .icon
{
  background-color: var(--clr-accent-600);
}

[data-btn-type="danger"],
.accordion-button[data-btn-type="danger"] {
  color: var(--clr-accent-600);
}

.modal {
  --bs-modal-bg: var(--modal-bg);
  --bs-modal-color: var(--modal-clr);
}

.btn.filter {
  border-color: var(--clr-border-400);
}

.btn.filter.active {
  border-color: var(--clr-accent-400);
}
.btn.filter.active .icon {
  background-color: var(--clr-accent-400);
}

.modal .modal-content div.controls,
.modal .modal-content div label {
  color : var(--modal-clr);
}

.btn-close {
  filter: var(--clr-filter-black-to-foreground);
}

.card {
  background-color: var(--list-group-bg);
}

.card .card-header {
  font-weight: bold;
  background-color: var(--card-header-bg);
}

.card li.highlight {
  background-color: var(--th-bg) !important;
}

div.modal .list-group-item {
  background-color: var(--list-group-bg);
  color: var(--foreground);
}

main .dropdown-menu,
main .dropdown-item,
main .dropdown-item:hover {
  background-color: var(--modal-bg);
  color: var(--foreground);
}

.no-color {
  color: inherit !important;
}

.slider {
  border: 1px solid var(--clr-border-400);
  background-color: var(--switch-bg);
}

.slider:before {
  background-color: var(--clr-primary-500);
}

input:checked ~ .slider:before {
  background-color: var(--switch-active-clr);
}

input:focus ~ .slider {
  box-shadow: 0 0 1px var(--switch-active-clr);
}

/**
 * Bootstrap overrides
 */
.form-select {
  color: var(--foreground);
  background-image: var(--dropdown-svg-url);
  background-color: transparent;
  border-color: var(--theme-secondary-border-color);
}


.toolbar-control .form-select {
  color: var(--foreground);
  background-image: var(--solid-dropdown-svg-url);
  background-color: var(--default-input-bg);
  background-position: right 0.5rem center; /* Adjust these values for horizontal and vertical position */
  background-repeat: no-repeat;
  background-size:  0.5rem; /* Adjust this value for the size of the caret */
  -webkit-appearance: none; /* Remove default caret in Webkit browsers */
  -moz-appearance: none; /* Remove default caret in Mozilla browsers */
  appearance: none; /* Remove default caret for other browsers */
  padding-right: 2rem; /* Add extra padding to the right to make space for the caret */
}


.toolbar-control .form-select:disabled {
  opacity: 0.5;
}

[data-bs-toggle="tab"] {
  color: var(--foreground);
}

/**
 * header
 */


div.header-middle,
div.header-control,
header {
  border-color: var(--clr-border-400);
  background-color: var(--header-bg);
  color: var(--theme-toolbar-color);
}

header .nav a {
  color: var(--theme-toolbar-color);
}

header .icon {
  background-color: var(--theme-toolbar-color);
}

header .dropdown-item.selected .icon-org {
  background-color: var(--clr-accent-400);
}

div.header .app-switcher .others {
  box-shadow: 0px 10px 10px var(--background);
  background-color: var(--header-bg);
}

div.header .app-switcher .others a {
  border: 1px solid var(--theme-secondary-border-color);
}

header .dropdown-item,
header .dropdown-item:hover,
header .dropdown-item:focus,
header .dropdown-menu {
  background-color: #0F1317;
  color: var(--theme-toolbar-color);
}

header .dropdown-item.selected:hover,
header .dropdown-item.selected,
.dropdown-item.selected .dropdown-item {
  background-color: #000;
}

header .dropdown-item:focus,
header .dropdown-item:hover,
header .dropdown-item {
  color: var(--clr-accent-400);
}

/**
 * codeblock
*/

pre.codeblock {
  border-color: var(--theme-secondary-border-color);
}

pre.codeblock code:nth-child(even) {
  background-color: var(--codeblock-even-bg);
}

/**
 * icons
 */
.icon {
  background-color: var(--foreground);
}

.icon.filled {
  background-color: transparent;
}

.icon-background {
  background-color: var(--clr-bg-900);
  border-radius: 200vw;
}

.alert-danger {
  background-color: var(--clr-bg-transparent-600);
  border-color: var(--clr-accent-600);
}

.alert-success {
  background-color: var(--clr-bg-transparent-400);
  border-color: var(--clr-accent-400);
}

a[data-action],
a[data-api-action] {
  cursor: pointer;
}

div.validation-error {
  color: #d2a5a5;
  background-color: #1d1b1b;
  border-color: #503838;
}

div.validation-error-hint > div {
  color: #d2a5a5;
  background-color: #1d1b1b;
  border-color: #503838;
}

.validation-error-indicator {
  color: #d2a5a5 !important;
  background-color: #2b0e0e !important;
  border-color: #760505 !important;
}

.loading-shim {
  background-color: var(--clr-bg-transparent-850);
}

.loading-indicator-container {
  background-color: var(--clr-bg-loading-indicator);
  border-color: var(--theme-secondary-border-color);
}

table td .loading-indicator-container {
  background-color: transparent;
}

a[data-action].prefixctl,
a[data-action].prefixctl:hover,
a.prefixctl,
.prefixctl {
  color: var(--foreground);
}

/**
 * main
 */

  /**
  * searchbar
  */

.input-group.searchbar input,
.input-group.searchbar .btn {
  border-color: var(--clr-border-200);
  background-color: var(--background);
}

.input-group.searchbar input:focus {
  outline: none;
}

.searchbar .select2-container--default .select2-selection--single {
  background-color: transparent;
}

 /**
  * lists
  */
.list-table .btn:not(.no-hover){
  border-color: transparent;
  background: transparent;
}

.list-table .btn[data-btn-type="secondary"]{
  background: var(--secondary-list-btn-bg);
  border-color: var(--theme-secondary-border-color);
}

.list-table .dropdown button {
  border-color: transparent;
  background: var(--clr-bg-800);
}

.list-table select option:checked {
  background-color: var(--foreground);
  color: var(--background);
}

.list-table:not(.no-hover) tr:hover {
  background-color: var(--list-table-hover);
}

.list-table:not(.no-hover) tr:hover input[type="checkbox"] {
  accent-color: var(--list-table-hover);
}

.list-table tr:hover .btn {
 border-color: var(--theme-secondary-border-color);
}


.secondary-text {
  color: var(--th-clr);
}

select.borderless {
  background: transparent;
  border: none;
  font-weight: 700;
}

div.toolbar-field select.secondary,
select.secondary {
  background-color: transparent;
  border-color: var(--theme-secondary-border-color);
}

div.controls input[type="text"],
div.controls input[type="number"],
.input-group.searchbar select.form-select,
div.controls select.form-control {
  background: transparent;
  border-color: var(--theme-secondary-border-color);
  color: inherit;
}

div.controls textarea.form-control,
div.controls textarea.form-control:is(:focus, :active){
  color: var(--foreground);
  background-color: var(--background);
  border-color: var(--clr-border-400);
}

.secondary .property .field {
  background-color: var(--th-bg);
  color: var(--th-clr);
}

.secondary .property .field select {
  background-color: var(--th-bg);
}

.secondary .property .field [data-field] {
  color: var(--foreground);
}


.list-body div.secondary input[type="text"]:disabled,
div.toolbar-field input[type="text"]:disabled {
  opacity: 0.5;
}

div.menu div.section.tabs h5 {
  opacity: 0.5;
}

.table th,
.table td {
  border-color: var(--clr-border-400);
}

.table th {
  background-color: var(--th-bg);
  color: var(--th-clr);
}

.table th input[type="checkbox"] {
  accent-color: var(--th-bg);
}

.table .table {
  background-color: inherit;
}

.table td.prefix-name {
  font-size: 24px;
}

div.list-th.selected-order-header-asc,
table thead th.selected-order-header-asc,
.selected-order-header-asc {
  opacity: 1;
}

div.list-th.selected-order-header-desc,
table thead th.selected-order-header-desc,
.selected-order-header-desc {
  opacity: 1;
}

.keep-list-open {
  display: flex;
  align-content: center;
}

button.solid-active,
button.solid-inactive {
  background-color: var(--clr-primary-500);
  color: var(--primary-btn-clr);
  border: none;
}

button.solid-active {
  background-color: var(--clr-accent-400);
}

.border-active {
  border-color: var(--clr-accent-400);
}

.border-inactive {
  border-color: var(--clr-primary-500);
}

div.controls button.generic:disabled {
  opacity: 0.5;
}

div.modal-body div.border-top-seperator {
  border-color: var(--clr-border-400);
}

.controls .select2-container--default .select2-selection--single {
  background-color: var(--background);
  border: 1px solid var(--clr-border-400);
}

.modal-control .select2-container--default .select2-selection--single {
  background-color: var(--modal-bg);
  border: 1px solid var(--theme-secondary-border-color);
}

.modal-control .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
  border-color: transparent transparent var(--foreground) transparent;
}
.modal-control .select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: var(--foreground) transparent transparent transparent;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  background-color: transparent;
  border-bottom: 1px solid var(--theme-secondary-border-color);
  outline: 0;
}

.select2-container--default .select2-selection--single .select2-selection__rendered,
.controls .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--foreground);
}

span.select2-dropdown {
  --body-bg: var(--background);
  --body-fg: var(--foreground);
  --darkened-bg: var(--background);
  --border-color: var(--clr-border-400);
}

.select2-selection.select2-selection--single {
  background-color: transparent;
}

.select2-container--default .select2-results__option[aria-selected="true"],
.select2-results__option[aria-selected="true"] .autocomplete-item {
  background-color: var(--select2-selected-bg);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  color: foreground;
}

div.controls label {
  color: var(--th-clr);
}

div.menu div.menu-deco-border {
  background-color: var(--clr-border-400);
}

/*
 * bootstrap alerts
 */

.alert {
  --bs-alert-color: var(--foreground);
  --bs-alert-bg: var(--box-bg);
}

.alert-warning {
  --bs-alert-border-color: var(--clr-accent-600);
}

.message-warning {
  color: var(--clr-accent-500) !important;
}

.alert-info {
  --bs-alert-border-color: var(--clr-accent-400);
}

.alert-info .btn,
.alert-warning .btn-warning {
  background-color: var(--primary-btn-bg);
  color: var(--primary-btn-clr);
}


tbody.list-footer button {
  border-color: transparent;
}

.status-badge.issues,
.status-badge.warning {
  background-color: var(--clr-accent-500) !important;
  border-color: var(--clr-accent-500) !important;
  color: var(--clr-primary-900);
}

.status-badge.ok,
.status-badge.completed {
  background-color: var(--clr-accent-400) !important;
  border-color: var(--clr-accent-400) !important;
  color: var(--clr-primary-900);
}

.status-badge.queued,
.status-badge.pending {
  border-color: var(--clr-accent-700);
  background-color: var(--clr-bg-transparent-700);
}


.status-badge.failed,
.status-badge.error {
  background-color: var(--clr-bg-transparent-600) !important;
  border-color: var(--clr-accent-600) !important;
}

span.tag {
  background-color: var(--th-bg);
  color: var(--foreground);
}

span.tag .tag-name {
  font-weight: bold;
  margin-right: 1ch;
}


/*
 * oauth
 */

div.oauth-backend.twentyc>a.btn {
  background-color: #191919;
  border-color: #0f1419;
}


/**
 * nav
 */

.nav {
  --bs-nav-link-hover-color: unset;
}

.nav a {
  opacity: 50%;
}

.nav a:hover {
  opacity: 1;
}

.nav a.nav-link.active {
  border-color: var(--clr-accent-400);
  opacity: 1;
}


.fullctl-inner-tabs .nav .nav-link.active {
  background-color: transparent;
  color: var(--foreground);
}

/* loading spinner */


@keyframes ldio-a9ruqenne8l {
  0% {
    opacity: 1
  }

  50% {
    opacity: .5
  }

  100% {
    opacity: 1
  }
}

.ldio-a9ruqenne8l div {
  position: absolute;
  width: 10px;
  height: 40px;
  top: 30px;
  animation: ldio-a9ruqenne8l 1s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

.ldio-a9ruqenne8l div:nth-child(1) {
  transform: translate(15px, 0);
  background: var(--clr-primary-100);
  animation-delay: -0.6s;
}

.ldio-a9ruqenne8l div:nth-child(2) {
  transform: translate(35px, 0);
  background: var(--clr-primary-100);
  animation-delay: -0.4s;
}

.ldio-a9ruqenne8l div:nth-child(3) {
  transform: translate(55px, 0);
  background: var(--clr-primary-100);
  animation-delay: -0.2s;
}

.ldio-a9ruqenne8l div:nth-child(4) {
  transform: translate(75px, 0);
  background: var(--clr-primary-100);
  animation-delay: -1s;
}

.loadingio-spinner-bars-k879i8bcs9 {
  width: 14px;
  height: 14px;
  display: inline-block;
  overflow: hidden;
  background: none;
}

.ldio-a9ruqenne8l {
  width: 100%;
  height: 100%;
  position: relative;
  transform: translateZ(0) scale(0.14);
  backface-visibility: hidden;
  transform-origin: 0 0;
  /* see note above */
}

.ldio-a9ruqenne8l div {
  box-sizing: content-box;
}

/*
 * tags
 */

/**
 * footer
 */
footer {
  color: var(--footer-clr);
}

footer .help-box {
  color: var(--clr-primary-100);
  background: var(--box-bg);
}

/**
 * sidebar
 */
.sidebar[data-element="menu"] .button {
  color: var(--foreground);
  background: transparent;
}


div.autocomplete-item {
  color: var(--foreground);
}

/**
 * syntax hl
*/
.syntax-highlight-transparent-bg pre {
  background-color: transparent !important;
}

/** DropdownBtn */
.dropdown-btn summary::before {
  background-color: var(--primary-btn-clr);
}

.dropdown-btn summary {
  background-color: var(--primary-btn-bg);
  border-left-color: var(--primary-btn-clr);
}

.legend {
  color: var(--font-color-legend);
}

/*
 * graphs
 */
.graph-placeholder {
  background-color: var(--graph-placeholder-bg);
}

/*
 * metrics
 */

.red{
    background-color: red !important;
}
.amber{
    background-color: #FFBF00 !important;
}
.green{
    background-color: green !important;
}

/*
  * theme switcher
  */

span.icon-theme-switcher {
    background-color: var(--theme-switcher-color);
}

/* Styles for the multi-select element */
/* Change background color for selected options */
select option:checked {
  background-color: var(--primary-btn-bg);
  color: var(--primary-btn-clr);
}