@media (prefers-color-scheme: dark) {
  :root {
    --font-color: #e3e3e3;
    --background: #131313;
    color-scheme: dark;
  }

  #sidebar,
  #headerbar {
    --sidebar-background: #282828;
    --sidebar-color: #dedee1;
  }

  .company-status>.dropdown,
  .company-status.dropdown-active {
    background-color: #222222;
  }

  .company-status>.infos>.name {
    color: white;
  }

  #sidebar>.menu>div.expanded>div {
    background-color: #1c1c1c;
  }

  .company-status>.dropdown>button>img,
  .company-status>.dropdown>a>img {
    filter: invert(1);
  }

  .bootstrap-select .dropdown-menu li.active small {
    color: rgb(255 255 255 / 73%) !important;
  }

  #body>.loading {
    background: #131313 !important;
  }

  #body>.loading>.spinner-border {
    color: white !important;
  }

  .filter-date>.title {
    color: #b1b1b1;
  }

  .info-tiles p,
  .breadcrumb .breadcrumb-item:not(.active),
  .swal2-title,
  .swal2-html-container,
  .breadcrumb .breadcrumb-item+.breadcrumb-item::before {
    color: #dcdcdc !important;
  }

  .swal2-file,
  .swal2-input,
  .swal2-textarea {
    border: 1px solid #969696;
    background: rgba(156, 156, 156, 0.15);
  }

  .swal2-footer a {
    color: var(--color-tints-60) !important;
  }

  .swal2-footer {
    border-color: #545454 !important;
    color: #bdbdbd !important;
  }

  .modal .modal-header {
    color: white !important;
  }

  .modal .close {
    color: white !important;
    text-shadow: 0 1px 0 white;
  }

  .labelled_input>input {
    color: #e1e1e1 !important;
  }

  .switch_enable {
    background-color: #3c3c3c !important;
    color: #9e9e9e !important;
  }

  .modal-content,
  .swal2-popup {
    background-color: #292929 !important;
    box-shadow: rgba(0, 0, 0, 0.6) 0 10px 40px !important;
  }

  .swal2-reset-password {
    background-color: #322224 !important;
    border-color: #65171f;
  }

  .swal2-validation-message {
    margin-top: 10px;
    background: rgb(222, 110, 110, 0.1) !important;
    color: lightgray !important;
  }

  .custom-switch input:checked+label {
    background: var(--color-tints-20);
    box-shadow: 0 0 8px var(--color-tints-20);
  }

  #eula-modal>div {
    background-color: #444444;
    box-shadow: 0 10px 40px #232323;
  }

  #eula-modal>div>.content {
    box-shadow: inset 0px 10px 10px #444444, inset 0px -10px 10px #444444;
  }

  .btn-secondary {
    background-color: #616161;
    border-color: #616161;
  }

  .tabs>nav>span:hover {
    color: #dbdbdb;
  }

  .boo-container {
    color: white !important;
  }

  .form-control,
  .form-image-selector,
  .labelled_input,
  .input-label>input {
    background-color: #515151;
    color: white;
  }

  .switch-box {
    color: white;
    border-color: #858585;
  }

  .switch-box>.infos>.description {
    color: #b3b4b5;
  }

  .form-control:hover {
    border-color: #858585;
  }

  .form-control:focus,
  .form-control.focus {
    border-color: var(--color-tints-20);
  }

  .form-control::placeholder,
  div.form-control>input::placeholder {
    color: #d5d5d5;
  }

  div.form-control>input {
    color: white;
  }

  .quantity_selector {
    background-color: #474747 !important;
  }

  .quantity_selector>div.value {
    color: white;
  }

  .quantity_selector>div.value>input {
    background-color: #474747 !important;
  }

  .dropdown-menu .dropdown-item:hover {
    background: var(--color-tints-20);
  }

  .options-btn>img {
    filter: brightness(10);
  }

  .options-btn>div>div {
    box-shadow: 0 0 5px #404040;
    background: #5a5a5a !important;
  }

  .skeleton::before {
    background-color: #5a5a5a !important;
  }

  .bootstrap-select>.dropdown-toggle {
    background-color: #515151;
    color: white;
  }

  .bootstrap-select .dropdown-menu.inner {
    background: #2b2b2b;
    color: white;
    border-radius: 3px;
    overflow: hidden;
  }

  .dropdown-item.active,
  .dropdown-item:active {
    background: var(--color-shader-20);
  }

  .dropdown-menu .dropdown-item {
    color: white;
  }

  .bootstrap-select .dropdown-menu {
    border: 1px solid #5d5d5d;
    background-color: #2b2b2b;
  }

  .filter-date>input {
    color: white !important;
  }

  .competition-graph>p {
    color: #dcdcdc !important;
  }

  .max-results {
    color: lightgray;
  }

  .progress {
    color: #eff1f5;
  }

  .highcharts-axis-labels>text,
  .highcharts-legend-item>text {
    color: #e0e0e3 !important;
    fill: #e0e0e3 !important;
  }

  a {
    color: var(--color-tints-60);
  }

  .custom-switch label {
    background: #707070;
  }

  .simple-modal {
    background-color: rgba(0, 0, 0, 0.5);
  }

  .auto-complete-results {
    background-color: #3c3c3c !important;
    box-shadow: 0 2px 15px #000000ad !important;
  }

  .input-label>input {
    color: white;
  }

  .simple-modal>div {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
    background: #2b2b2b !important;
  }

  .company-address-editor>div>button.back {
    box-shadow: 0 0 5px #00000057 !important;
    background: #2b2b2b !important;
    color: white !important;
  }

  .content-column>.header>h2 {
    color: #e7eaec !important;
  }

  .content-column>.header>p {
    color: #92969a !important;
  }

  .content-column>.tabs>nav {
    border-color: #424242;
  }

  .content-column>main,
  .content-column>.tabs>main {
    border: none !important;
    background-color: #282828 !important;
    --boo-background: #282828;
  }

  .content-column>main .section>.header,
  .content-column>.tabs>main .section>.header {
    border-color: #525252 !important;
    color: #aaacaf !important;
  }

  .content-column .section>.content .toggle-option>.switch>span {
    color: #dedede !important;
  }

  .content-column .input-color {
    box-shadow: 0 0 0 1px #5f5f5f;
  }

  .modal-printers>div {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
    background: #2b2b2b !important;
  }

  .payment-buttons-container>label:hover {
    background-color: #0ba30b14;
  }

  .payment-buttons-container>label.active {
    border-color: var(--color-tints-20) !important;
  }

  .payment-buttons-container>label {
    border-color: #626262;
  }

  .payment-buttons-container>label>.infos>.subtitle {
    color: #b3b4b5;
  }

  .highcharts-legend-item>text:hover {
    color: #50b432 !important;
    fill: #50b432 !important;
  }

  input::placeholder {
    color: #9b9b9b !important;
  }

  .auto-complete-results>div.active {
    background-color: #8080803d;
  }

  #whats-new-modal>div>.content>.header {
    background-color: #2b2b2b !important;
  }

  #gift-box-modal>div>.qrcode:before {
    background: linear-gradient(to bottom, transparent, #2b2b2b);
  }

  .input-label>input:focus+span,
  .input-label>.not-empty+span {
    background-color: #515151;
  }

  #company-selector-modal>div {
    box-shadow: 0 4px 15px rgb(0 0 0 / 40%);
    background: #2b2b2b;
  }

  #company-selector-modal>div>header {
    background: #2b2b2b;
  }

  #company-selector-modal>div>main>div>div {
    background: linear-gradient(to bottom, transparent, #2b2b2be7 45%);
  }

  .mapboxgl-popup-content {
    background-color: var(--background);
  }

  .mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip {
    border-top-color: var(--background);
  }
}