/* Define a CSS variable */
  @media (prefers-color-scheme: dark) {
    :root {
      /* Dark theme colors */
      --body-background: #0b0c0f;
      --background: #141518;
      --background-secondary: #0f1013;
      --background-hover: #1a1b1e;
      --background-hover-2: #2e2f32;
      --text-color: #E0E0E0;
      --input-background: #121316;
      --border-color-3: #333437;
      --input-border-color-focused: #424346;
      --border-color: #1a1b1e;
      --border-color-secondary: #292a2d;
      --sidebar-background-color: ;
      --sidebar-text-color: ;
      --platform-background: #101114;
      --sidenav-hover: #1a1b1e;
      --scrollbar-background: #1a1b1e;
      --background-modal: #0d0e11;
      --background_three: #151619;
      --background-hover-light: #151619;
      --button-background: #4169e1;
      --button-color: #dae1e9;
    }
  }

  @media (prefers-color-scheme: light) {
    :root {
      --body-background: #f7f7f7;
      --background: #ffffff;
      --background-secondary: #fbfbfb;
      --background-hover: #f5f5f5;
      --background-hover-2: #e1e1e1;
      --text-color: #18181b;
      --input-background: #ffffff;
      --border-color-3: #9b9b9b;
      --input-border-color-focused: #9b9b9b;
      --border-color: #ebebeb;
      --border-color-secondary: #e6e6e6;
      --button-background: #4169e1;
      --button-color: #dae1e9;
      --sidebar-background-color: ;
      --sidebar-text-color: ;
      --platform-background: #FFFFFF;
      --sidenav-hover: #e1e1e1;
      --scrollbar-background: #e1e1e1;
      --background-modal: #ffffff;
      --background_three: #fafafa;
      --background-hover-light: #fafafa;
    }
  }
/* SCROLLBAR */
/* width */
/* Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  transition: opacity 0.3s ease;
}

/* Show scrollbar when hovering */
:hover::-webkit-scrollbar {
  display: block;
}

/* Track */
::-webkit-scrollbar-track {
  border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--scrollbar-background); /* Assuming --background is defined elsewhere */
  border-radius: 10px;
  display: none;
}
.show-scrollbar::-webkit-scrollbar-thumb {
  display: unset !important;
}
/* Show scrollbar thumb when hovering over scrollbar */
:hover::-webkit-scrollbar-thumb {
  display: block;
  /* You can add additional styles for the thumb here */
}


/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--background-hover);
  cursor: pointer;
}


body {
  background: var(--body-background);
  color: var(--text-color);
}
.sidebar-background-color {
  background: var(--body-background);
}
.sidebar-text-color {
  color: var(--sidebar-text-color);
}
.background-1 {
  background: var(--background-hover-light);
}
.background-2 {
  background: var(--body-background);
}
.background-3 {
  background: var(--background);
}
.background-secondary {
  background: var(--background-secondary);
}
.background-hover:hover {
  background: var(--background-hover);
}
.background-hover-2:hover {
  background: var(--background-hover-2);
}
.background-hover-2-class {
  background: var(--background-hover-2);
}
.color-1 {
  color: var(--text-color)
}
.border-all {
  border: 1px solid var(--border-color);
}
.border-left {
  border-left: 1px solid var(--border-color);
}

.border-top {
  border-top: 1px solid var(--border-color);
}

.border-right {
  border-right: 1px solid var(--border-color);
}

.border-bottom {
  border-bottom: 1px solid var(--border-color);
}
hr {
  border-top: 1px solid var(--border-color);
}

input, textarea, .tiptap {
  background: var(--input-background);
}
.form-control, .form-control-small {
  border: 1px solid var(--border-color);
  color: var(--text-color);
}
.form-control:focus, .form-control:active, .form-control:hover {
  border: 1px solid var(--border-color-secondary);
}
select {
  background: var(--input-background);
  border: 1px solid var(--border-color);
}
.input-group-addon {
  background: var(--input-background);
  border: 1px solid var(--border-color);
  color: var(--text-color);
}


.btn-primary {
  background: var(--button-background);
  color: var(--button-color);
  opacity: 1;
}
.btn-primary:hover {
  /* opacity: 0.4; */
  filter: brightness(1.4);
}
.btn-primary-outline, .btn-secondary {
  background: none;
  border: 1px solid var(--border-color);
  color: var(--text-color);
}
.btn-primary-outline:hover, .btn-secondary:hover {
  filter: brightness(1.5);
  background: var(--background-hover);
}





.react-responsive-modal-modal {
  background: var(--platform-background);
  color: var(--text-color);
}
.skeleton-white, .react-loading-skeleton {
  background-color: var(--background)!important;
  background-image: linear-gradient(90deg, var(--background-hover), var(--background), var(--background-hover)) !important;
}


.daas-platform-links-a:hover {
    background: var(--sidenav-hover);
}
/* New CSS for when both classes are present */
.daas-platform-links-a.background-active {
    background: var(--sidenav-hover)!important;
  opacity: 1;
  /* You can add more styles here if needed */
}
.active, .active-tab, .background-active {
  background: var(--background-hover);
  opacity: 1;
}
.bootstrap-nav-tab {
  color: var(--text-color);
}

/* TABLES */
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td, .table-bordered {
  border-bottom: 1px solid var(--border-color);
}



/* Custom */
.rsw-editor {
  border: 1px solid var(--border-color)!important;
  background: var(--input-background);
}
.rsw-toolbar {
  background-color: var(--background)!important;
  border-bottom: 1px solid var(--border-color)!important;
}
.rsw-separator {
  border-color: var(--border-color)!important;
}
.rsw-btn {
  color: var(--text-color)!important;
}
.rsw-btn:hover {
  background: var(--background-hover)!important;
}



.line {
  background: var(--background-hover);
}

.text-black-only {
  color: black;
}
.background_three {
  background: var(--background_three);
}
.background-hover-light:hover {
  background: var(--background_three);
}
.platform-background {
  background: var(--platform-background);
}
.button-background-color {
  color: var(--button-background);
}
.background-light {
  background: var(--background-hover-light);
}
.background-input {
  background: var(--input-background);
}

.form-control {
  display: block;
  width: 100%;
  height: 45px;
  padding: 6px 12px !important;
  font-size: 14px;
  line-height: 1.42857143;
  box-shadow: none !important;
  border-radius: 3px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
  -o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}