: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;
}

/* .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;
}

.darkmode .breadcrumb-item {
    color: var(--dm-color-0) !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:hover, 
.darkmode .sidebar .nav-item .collapsing .collapse-inner .collapse-item:hover {
    background: var(--dm-color-2) !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;
}

/* FOOTER */

.darkmode .sticky-footer {
    background: var(--dm-color-2) !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);
}

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

/* TABLE */

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

.darkmode .table th, 
.darkmode .table td {
    border-top: 1px solid var(--dm-color-5);
}

.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);
}

/* FORM */

.darkmode .form-control {
    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;
}

/* 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;
}

/* Painel de ações */

.darkmode .actions-panel__content {
    color: var(--dm-color-0);
    background-color: var(--dm-color-3);
}

.darkmode .actions-panel__content a:hover {
    background: var(--dm-color-1) !important;
}