:root {
  --dm-color-1: #121212;
  --dm-color-2: #2b2b2b;
  --dm-color-3: #454545;
  --dm-color-4: #5e5e5e;
  --dm-color-5: #787878;
  --dm-color-6: #919191;
  --dm-color-7: #ababab;
  --dm-color-8: #c4c4c4;
  --dm-color-9: #dedede;
  --dm-color-0: #ffffff;
}

/* BODY */

.darkmode {
  color: var(--dm-color-0) !important;
  background: var(--dm-color-1) !important;
}

/* .darkmode::-webkit-scrollbar,
.darkmode *::-webkit-scrollbar {
    background: var(--dm-color-2) !important;
    box-shadow: inset 0px 0px 0px 1px var(--dm-color-1);
}

.darkmode::-webkit-scrollbar-thumb,
.darkmode *::-webkit-scrollbar-thumb {
    background: var(--dm-color-4) !important;
}

.darkmode::-webkit-scrollbar-corner,
.darkmode *::-webkit-scrollbar-corner {
    background-color: var(--dm-color-1) !important;
} */

/* GERAL */

.darkmode #wrapper #content-wrapper {
  background: var(--dm-color-1) !important;
}

.darkmode .text-gray-400,
.darkmode .text-gray-600,
.darkmode .text-gray-800 {
  color: var(--dm-color-0) !important;
}

.darkmode .text-success,
.darkmode .text-danger,
.darkmode .text-info,
.darkmode .text-primary {
  color: var(--dm-color-0) !important;
}

.darkmode .close {
  color: var(--dm-color-0) !important;
  text-shadow: 0 1px 0 var(--dm-color-1) !important;
}

.darkmode .breadcrumb {
  background-color: var(--dm-color-2) !important;
  border: none !important;
}

.darkmode .breadcrumb-item {
  color: var(--dm-color-0) !important;
}

.darkmode .input-group.gadget-field {
  background-color: var(--dm-color-2) !important;
}

/* BUTTONS */

.darkmode .btn-secondary,
.darkmode .btn-danger {
  color: var(--dm-color-1) !important;
  background-color: var(--dm-color-9) !important;
  border-color: var(--dm-color-9) !important;
}

.darkmode .btn-secondary:hover,
.darkmode .btn-danger:hover {
  background-color: var(--dm-color-8) !important;
  border-color: var(--dm-color-8) !important;
}

.darkmode .btn-outline-secondary,
.darkmode .btn-info,
.darkmode .btn-outline-danger {
  color: var(--dm-color-9) !important;
  border-color: var(--dm-color-9) !important;
}

.darkmode .btn-outline-secondary:hover,
.darkmode .btn-info:hover,
.darkmode .btn-outline-danger:hover {
  color: var(--dm-color-1) !important;
  background-color: var(--dm-color-8) !important;
  border-color: var(--dm-color-8) !important;
}

.darkmode .btn.btn-success,
.darkmode .btn-outline-success:hover,
.darkmode .btn-outline-success:active,
.darkmode .btn-outline-success:focus {
  color: var(--dm-color-1) !important;
}

.darkmode .btn-outline-info:hover,
.darkmode .btn-outline-info:active,
.darkmode .btn-outline-info:not(:disabled):not(.disabled):active,
.darkmode .btn-outline-info:not(:disabled):not(.disabled).active,
.darkmode .show > .btn-outline-info.dropdown-toggle {
  color: var(--dm-color-1) !important;
}

/* MENU */

.darkmode app-menu,
.darkmode .sidebar {
  background: var(--dm-color-2) !important;
}

.darkmode .sidebar .nav-item .collapse .collapse-inner,
.darkmode .sidebar .nav-item .collapsing .collapse-inner {
  background: var(--dm-color-4) !important;
}

.darkmode .sidebar .nav-item .collapse .collapse-inner .collapse-item,
.darkmode .sidebar .nav-item .collapsing .collapse-inner .collapse-item {
  color: var(--dm-color-0) !important;
}

.darkmode .sidebar .nav-item .collapse .collapse-inner .collapse-item.active,
.darkmode .sidebar .nav-item .collapsing .collapse-inner .collapse-item.active {
  background: var(--dm-color-3) !important;
}

/* MENU MOBILE */

.darkmode #menuMobile .dropdown-menu {
  background: var(--dm-color-2) !important;
}

.darkmode #menuMobile .dropdown-menu .white-bg {
  background: var(--dm-color-4) !important;
}

/* HEADER */

.darkmode .topbar {
  background: var(--dm-color-2) !important;
}

.darkmode .dropdown-menu {
  background: var(--dm-color-4) !important;
  border-color: var(--dm-color-4) !important;
}

.darkmode .dropdown-item {
  color: var(--dm-color-0) !important;
}

.darkmode .dropdown-item:hover {
  background: var(--dm-color-1) !important;
}

/* CARD */

.darkmode .card {
  background: var(--dm-color-2) !important;
  border-color: var(--dm-color-2);
}

.darkmode .card.shadow:hover {
  background: var(--dm-color-3) !important;
  box-shadow: none !important;
}

.darkmode .card-header {
  background: transparent !important;
  border-color: var(--dm-color-1) !important;
}

.darkmode .progress {
  background-color: var(--dm-color-4) !important;
}

/* MODAL */

.darkmode .modal-content {
  background-color: var(--dm-color-3) !important;
}

.darkmode .modal-header,
.darkmode .modal-footer {
  border-color: var(--dm-color-1);
}

/* TABLE */

.darkmode .table {
  color: var(--dm-color-0) !important;
}

.darkmode .table-hover tr:hover {
  background-color: var(--dm-color-3) !important;
  color: var(--dm-color-0) !important;
}

.darkmode .table-striped tbody tr.table-success {
  background-color: var(--dm-color-5) !important;
}

.darkmode .table-success th,
.darkmode .table-success td,
.darkmode .table-success thead th,
.darkmode .table-success tbody + tbody {
  border-color: var(--dm-color-0) !important;
}

.darkmode .table-bordered th,
.darkmode .table-bordered td {
  border-color: var(--dm-color-5) !important;
}

.darkmode .table-bordered tr:hover {
  background-color: var(--dm-color-4) !important;
}

.darkmode .table-container thead {
  background-color: var(--dm-color-3);
  box-shadow: inset 0px -1px 0px 0px var(--dm-color-5);
}

.darkmode .table-scroll thead tr,
.darkmode .table-scroll thead tr:hover {
  background: var(--dm-color-2) !important;
}

/* FORM */

.darkmode .form-control,
.darkmode ngx-otp-input form input {
  background-color: var(--dm-color-4) !important;
  border-color: var(--dm-color-4) !important;
  color: var(--dm-color-0) !important;
}

.darkmode .form-control:disabled,
.darkmode .form-control:disabled:focus,
.darkmode .form-control[readonly]:not(.input-bs),
.darkmode .form-control[readonly]:not(.input-bs):focus {
  background-color: transparent !important;
  border-color: var(--dm-color-4) !important;
}

.darkmode .form-control::-webkit-input-placeholder {
  color: var(--dm-color-0) !important;
}

.darkmode .form-control:-ms-input-placeholder {
  color: var(--dm-color-0) !important;
}

.darkmode .form-control::placeholder {
  color: var(--dm-color-0) !important;
}

.darkmode .input-group > .input-group-append > .btn {
  background-color: var(--dm-color-4) !important;
  border-color: var(--dm-color-4) !important;
  color: var(--dm-color-0) !important;
}

.darkmode .input-group > .input-group-append > .btn:hover,
.darkmode .input-group > .input-group-append > .btn:active,
.darkmode .input-group > .input-group-append > .btn:focus {
  background-color: var(--dm-color-4) !important;
  border-color: var(--dm-color-4) !important;
  color: var(--dm-color-9) !important;
}

.darkmode .checkbox-field__checkmark {
  border-color: var(--dm-color-0);
}

.darkmode #filesUploaderModal .input-wrapper {
  background-color: var(--dm-color-3) !important;
}

.darkmode select {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%23ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>');
}

/* PAGINAÇÃO */

.darkmode .page-link {
  background-color: transparent !important;
  border-color: var(--dm-color-3) !important;
  color: var(--dm-color-9) !important;
}

.darkmode .page-link:hover {
  color: var(--dm-color-0) !important;
}

.darkmode .page-item.disabled .page-link {
  color: var(--dm-color-5) !important;
}

/* BREADCRUMB */

.darkmode .breadcrumb-item a {
  color: var(--dm-color-0) !important;
}

.darkmode .breadcrumb-item a:hover {
  color: var(--dm-color-8) !important;
  text-decoration: none !important;
}

.darkmode .breadcrumb-item + .breadcrumb-item::before {
  color: var(--dm-color-8) !important;
}

/* TABS */

.darkmode .nav-tabs {
  border-bottom: 1px solid var(--dm-color-4) !important;
}

.darkmode .nav-tabs .nav-link {
  color: var(--dm-color-0) !important;
}

.darkmode .nav-tabs .nav-link.active,
.darkmode .nav-tabs .nav-item.show .nav-link {
  font-weight: 300;
  color: var(--dm-color-0) !important;
  background-color: var(--dm-color-4) !important;
  border-color: var(--dm-color-4) !important;
}

.darkmode .nav-tabs .nav-link:hover,
.darkmode .nav-tabs .nav-link:focus {
  border-color: var(--dm-color-4) !important;
}

.darkmode .nav-tabs .nav-link.disabled {
  color: var(--dm-color-6) !important;
}

/* DRAG & DROP */

.darkmode .cdk-drag-preview {
  background-color: var(--dm-color-3) !important;
}

/* ALERT */

.darkmode .alert {
  border: 1px solid currentColor !important;
  background: var(--dm-color-2) !important;
}

.darkmode .alert .alert-link {
  color: currentColor !important;
}

.darkmode .alert-primary {
  color: #82d48d;
}

.darkmode .alert-secondary {
  color: #e1e1e4;
}

.darkmode .alert-success {
  color: #5ce7b5;
}

.darkmode .alert-info {
  color: #77cedb;
}

.darkmode .alert-warning {
  color: #e2c98a;
}

.darkmode .alert-danger {
  color: #df8b84;
}

.darkmode .alert-light {
  color: #e8e8e8;
}

.darkmode .alert-dark {
  color: #c8c9d0;
}

.darkmode .drawer__content {
  color: var(--dm-color-0) !important;
  background-color: var(--dm-color-3) !important;
}

.darkmode .business-flow__item:not(.active) {
  background-color: var(--dm-color-2) !important;
}

.darkmode .kanban__item {
  background-color: var(--dm-color-3) !important;
}