:root {
  --clp-text: #fff;
  --clp-text-hover: #0078d4;
  --clp-text-secondary: #9b9b9b;
  --clp-text-disabled: #838383;
  --clp-bg-primary: #0e1217;
  --clp-bg-secondary: #1c1f26;
  --clp-bg-tertiary: #25282f;
  --clp-bg-input: #20242c;
  --clp-border-color: #a8b3cf33;
  --clp-color-btn-text: #c9d1d9;
  --clp-color-btn-bg: #21262d;
}

html.dark {
  background: var(--clp-bg-primary) !important;
  color: var(--clp-text);
}

html.dark a {
  color: var(--clp-text);
}

html.dark a.generate-new-password {
  color: #267ddd;
  font-size: 14px;
}

html.dark body {
  background: var(--clp-bg-primary);
  color: var(--clp-text);
}

html.dark body .header {
  box-shadow: none !important;
  color: var(--clp-text);
  background: var(--clp-bg-tertiary);
  border-bottom: 1px solid var(--clp-border-color);
}

html.dark body .header .nav-link-container a {
  color: var(--clp-text);
}

html.dark body .header .nav-link-container a:hover {
  color: var(--clp-text-hover);
}

html.dark body .header .logo {
  border-right: 1px solid var(--clp-border-color);
}

html.dark body .header .navbar-right > ul > li {
  border-left: 1px solid var(--clp-border-color);
}

html.dark body .sidebar {
  background: var(--clp-bg-tertiary);
  border-right: 1px solid var(--clp-border-color);
}

html.dark body .sidebar ul li.active a {
  color: var(--clp-text);
  background: var(--clp-bg-secondary);
}

html.dark body .sidebar ul li a:hover {
  color: var(--clp-text);
  background: var(--clp-bg-secondary);
}

html.dark body .page-header .page-title h1 {
  color: var(--clp-text);
}

html.dark body .tab-container {
  background: var(--clp-bg-secondary);
  border: 1px solid var(--clp-border-color);
  border-radius: 5px;
}

html.dark body .tab-container ul li a {
  color: var(--clp-text-secondary);
}

html.dark body .tab-container ul li.active a,
html.dark body .tab-container ul li.active a:hover {
  color: var(--clp-text);
}

html.dark body .card {
  background: var(--clp-bg-secondary);
  box-shadow: none;
  border: 1px solid var(--clp-border-color);
}

html.dark body .card .card-header {
  background: var(--clp-bg-tertiary);
  color: var(--clp-text);
  border-bottom: 1px solid var(--clp-border-color);
}

html.dark body .card .card-form {
  border-bottom: 1px solid var(--clp-border-color);
}

html.dark body .card .card-footer {
  background: var(--clp-bg-tertiary);
  border-top: 1px solid var(--clp-border-color);
}

html.dark body .card .card-body-no-padding .table td {
  color: var(--clp-text);
}

html.dark body .table :not(:last-child) > :last-child > * {
  border-bottom-color: var(--clp-border-color);
}

html.dark body .table td,
html.dark body .table thead th {
  border-bottom: 1px solid var(--clp-border-color);
}

html.dark body .table tr:last-child td {
  border-bottom: none;
}

html.dark body .table thead th {
  background: var(--clp-bg-tertiary);
  border-bottom: none;
}

html.dark body .dropdown-menu {
  background: var(--clp-bg-tertiary);
  border: 1px solid var(--clp-border-color);
}

html.dark body .dropdown-menu .dropdown-item {
  color: var(--clp-text);
}

html.dark body .dropdown-menu .dropdown-item:hover {
  background: var(--clp-bg-secondary);
}

html.dark body .footer {
  background: var(--clp-bg-secondary);
  border-top: 1px solid var(--clp-border-color);
}

html.dark body .footer ul li,
html.dark body .footer ul li a {
  color: var(--clp-text);
}

html.dark body .footer ul li a:hover {
  color: var(--clp-text-hover);
}

html.dark body .form-control,
html.dark body .form-control:focus,
html.dark body .input-group-text {
  color: var(--clp-text);
  border: 1px solid var(--clp-border-color);
  background: var(--clp-bg-input);
  background-color: var(--clp-bg-input);
}

html.dark body .form-control:-webkit-autofill {
  transition: background-color 5000s ease-in-out 0s;
  -webkit-text-fill-color: var(--clp-text) !important;
}

html.dark body .form-control:focus {
  border-color: #86b7fe;
}

html.dark body .form-control:disabled {
  color: var(--clp-text-disabled);
  background: var(--clp-bg-primary);
  cursor: not-allowed !important;
}

html.dark body select.form-select {
  color: #fff;
  background: var(--clp-bg-input);
  border: 1px solid var(--clp-border-color);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23cfcfcf' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
}

html.dark body .btn-gray,
html.dark body .btn-white {
  color: var(--clp-color-btn-text);
  background-color: var(--clp-color-btn-bg);
  border-color: var(--clp-border-color);
}

html.dark body .btn-gray:hover,
html.dark body .btn-white:hover {
  background-color: var(--clp-bg-secondary);
  border-color: var(--clp-border-color);
}

html.dark body .datetime-range-input {
  background: var(--clp-bg-secondary) !important;
}

html.dark body .login-form-container {
  border: 1px solid var(--clp-border-color);
  background: var(--clp-bg-secondary);
}

html.dark body .chart-container .chart {
  border: 1px solid var(--clp-border-color);
}

html.dark body .chart-container .chart .chart-header {
  border-bottom: 1px solid var(--clp-border-color);
}

html.dark body .chart-container .chart .chart-header h3 {
  color: var(--clp-text);
}

html.dark body .log-message {
  color: var(--clp-text);
}

html.dark body .log-message:hover,
html.dark body .log-message:active,
html.dark body .log-message.log-message-active {
  background-color: var(--clp-bg-primary) !important;
}

html.dark .multi-input-checkbox-container,
html.dark .multi-input-checkbox-container .form-check {
  background: var(--clp-bg-input);
  border: 1px solid var(--clp-border-color);
}

html.dark .highcharts-background {
  fill: var(--clp-bg-secondary);
}

html.dark .ace-tm {
  background: var(--clp-bg-secondary);
  color: var(--clp-text);
}

html.dark .ace-tm .ace_cursor {
  color: #ffffff;
}

html.dark .ace-tm .ace_print-margin {
  background: var(--clp-bg-secondary);
}

html.dark .ace-tm .ace_gutter,
html.dark .ace-tm .ace_gutter-active-line {
  background: var(--clp-bg-secondary);
  color: var(--clp-text);
}

html.dark .ace_selection {
  background: var(--clp-bg-tertiary) !important;
}

html.dark .custom-datetime-range-container {
  background: var(--clp-bg-primary);
  border: 1px solid var(--clp-border-color);
}

html.dark .modal-header {
  border-bottom: 1px solid var(--clp-border-color);
}

html.dark .modal-content {
  background: var(--clp-bg-secondary);
  border: 1px solid var(--clp-border-color);
}

html.dark .modal-footer {
  border-top: 1px solid var(--clp-border-color);
}