:root {
  --darkest-greytheme: #111111;
  --dark-greytheme: #242529;
  --grey-greytheme: #4c4d4d;
  --lightgrey-greytheme: #cbcbcc;
}

* {
  color: var(--lightgrey-greytheme) !important; /*text color for dark theme*/
}

html {
  color-scheme: dark;
}

body {
  background: var(--darkest-greytheme);
}

input {
  caret-color: var(--lightgrey-greytheme);
}

.task {
  background-color: var(--dark-greytheme);
}

.effect-16 {
  border-bottom: 1px solid var(--lightgrey-greytheme);
}

.effect-16 ~ .focus-border {
  background-color: var(--grey-greytheme);
}

.effect-16:focus ~ label,
.has-content.effect-16 ~ label {
  color: var(--grey-greytheme) !important;
}

details[open] summary {
  background-color: var(--darkest-greytheme);
}

.noUi-target {
  background-color: var(--lightgrey-greytheme);
}

.noUi-handle {
  background-color: var(--dark-greytheme);
  border: 3px solid var(--grey-greytheme);
}

.noUi-connect {
  background-color: var(--grey-greytheme);
}
.range__label {
  border: 1px solid var(--lightgrey-greytheme);
}

.range__input {
  background-color: var(--dark-greytheme);
}

.button:hover {
  box-shadow: 0 0 40px 40px var(--lightgrey-greytheme) inset;
  color: var(--grey-greytheme) !important;
}

.button {
  background-color: var(--grey-greytheme);
  border: 2px solid var(--lightgrey-greytheme);
  border-radius: 0.6em;
  /* color: var(--lightgrey-greytheme); */
}

.popup {
  background-color: var(--darkest-greytheme);
}

.beautiful__link::after {
  background: var(--lightgrey-greytheme);
}

.beautiful__link:hover {
  color: var(--grey-greytheme) !important;
}

.nav-links,
.log__det__prev,
.sidebar {
  background-color: var(--dark-greytheme);
}

.sidebar .nav-links li:hover,
.sidebar .nav-links li .sub-menu li:hover {
  background: none;
}

.sidebar .menu-footer,
.sidebar .menu-footer img,
.sidebar .nav-links li .sub-menu,
.iocn-link:hover {
  background-color: var(--grey-greytheme);
}

.simulator {
  background-color: var(--grey-greytheme);
}

.simulator:hover {
  background-color: #787979;
  color: #868686 !important;
}

.card {
  background-color: var(--grey-greytheme);
}

.card:hover > .card-title {
  color: #fff !important;
}

.card:hover,
.card:focus {
  box-shadow: 0px 15px 30px -5px rgb(221 195 175 / 20%);
}

@media (min-width: 700px) {
  .sidebar {
    filter: drop-shadow(2px 4px 6px #8080808f);
  }
}