html {
    --bg-dark: #000;
    --bg-dark-light: #282828;
    --bg-transparent: transparent;
    --color-white: #fff;
    --color-gray: #878787;
    --border-gray: #717171;
}

/* Body */
body.dark-mode,
.dark-mode .content-wrapper {
    background: var(--bg-dark-light);
    color: var(--color-white);
}

/* Navbar */
.dark-mode nav {
    background: var(--bg-dark);
    border-color: var(--border-gray);
}

.dark-mode nav a {
    color: var(--color-gray) !important;
}

.dark-mode nav a:hover { 
    color: var(--color-white) !important;
}

/* Header */
.dark-mode .content-wrapper .content-header {
    background: var(--bg-dark-light);
    border-color: var(--border-gray) !important;
}

.dark-mode .content-wrapper .content-header h1 {
    color: var(--color-gray) !important;
}

/* Sidebar */
.dark-mode .main-sidebar {
    background: var(--bg-dark);
}

.dark-mode .main-sidebar a {
    color: var(--color-white) !important;
}

.dark-mode .main-sidebar a.active {
    background: var(--bg-dark-light) !important;
}

/*  Footer */
.dark-mode footer {
    background: var(--bg-dark);
    border-color: var(--border-gray);
    color: var(--color-gray);
}

/* Card Modulos */
.dark-mode .card-group .card {
    background: var(--bg-dark);
    border-color: var(--border-gray);
    color: var(--color-white);
}

.dark-mode .card-group .module-title {
    background: var(--bg-dark) !important;
}

.dark-mode .card-group .card .text-body {
    color: var(--color-white) !important;
}

/* Tabelas */
.dark-mode table.table {
    color: var(--color-white) !important;
}

.dark-mode table.table > thead tr,
.dark-mode table.table > thead th {
    background: var(--bg-dark) !important;
    opacity: 1 !important;
}

.dark-mode table.table.table-bordered td,
.dark-mode table.table.table-bordered th {
    border-color: var(--border-gray);
}

.dark-mode .summary {
    color: var(--color-white);
}

/* Botões */
.dark-mode a[class*="btn"],
.dark-mode button {
    background: var(--bg-transparent);
    border-color: var(--border-gray);
    color: var(--color-white) !important;
}

.dark-mode a[class*="btn"]:hover,
.dark-mode button:hover,
.dark-mode button:active,
.dark-mode button:focus {
    background: var(--bg-dark) !important;
    border-color: var(--border-gray) !important;
    box-shadow: none !important;
}

.dark-mode a[class*="btn-link"],
.dark-mode button[class*="btn-link"] {
    padding: .375rem .75rem !important;
}

.dark-mode .dropdown.show > button {
    background: var(--bg-dark);
    border-color: var(--border-gray);
}

.dark-mode .dropdown .dropdown-menu {
    background: var(--bg-dark-light);
}

/* Cards tradicionais */
.dark-mode .card {
    background: var(--bg-dark-light);
    border-color: var(--border-gray);
    color: var(--color-white);
}

/* Badge */
.dark-mode span.badge {
    background: var(--bg-transparent);
    border: 1px solid var(--border-gray);
}

/* Inputs */
.dark-mode input,
.dark-mode select {
    background: var(--bg-dark);
    color: var(--color-white);
}

.dark-mode input:focus,
.dark-mode select:focus {
    background: var(--bg-dark-light);
}

.dark-mode select option {
    background: var(--bg-dark-light);
    color: var(--color-white);
}

.dark-mode span[class*="kv-date"] {
    background: var(--bg-dark);
    color: var(--color-white);
}

.dark-mode div.multiselect {
    background: var(--bg-dark);
    color: var(--color-white);
    border-color: var(--border-gray);
}

.dark-mode span.select2-selection {
    background: var(--bg-dark);
}

.dark-mode span.select2-selection__rendered {
    color: var(--color-white) !important;
}

.dark-mode .select2-dropdown {
    background: var(--bg-dark-light);
}

.dark-mode .select2-dropdown .select2-results__option {
    background: var(--bg-dark-light);
    color: var(--color-white);
}

.dark-mode .select2-dropdown .select2-results__option:hover,
.dark-mode .select2-container--default .select2-results__option[aria-selected=true] {
    background: var(--bg-dark);
}

/* Info box */
.dark-mode .info-box {
    background: var(--bg-dark-light);
    border-color: var(--border-gray);
}

.dark-mode .info-box .info-box-icon {
    background: var(--bg-dark) !important;
}

.dark-mode .info-box .info-box-content span {
    color: var(--color-gray) !important;
}

/* Tela de módulos */
.dark-mode .main-timeline .timeline-content {
    background: var(--bg-dark-light);
    color: var(--color-gray);
}

.dark-mode .main-timeline .timeline-content::before, 
.dark-mode .main-timeline .timeline-content::after {
    background: var(--bg-dark) !important;
}

.dark-mode .main-timeline .timeline-number {
    background: var(--bg-dark) !important;
    box-shadow: 0 0 0 8px var(--bg-dark-light);
}

.dark-mode .main-timeline .timeline-item h3 {
    color: var(--color-white) !important;
}

/* Navs */
.dark-mode .card .nav-pills .nav-link.active {
    background: var(--bg-dark);
    border: 1px solid var(--border-gray);
}

.dark-mode .card .nav-pills .nav-link:hover {
    border: 1px solid var(--border-gray);
    color: var(--color-white);
}

.dark-mode .card .nav-tabs .nav-link {
    background: var(--bg-dark);
    border-color: var(--border-gray);
    color: var(--color-white);
}

/* Navs With GridView */
.dark-mode .grid-view nav {
    background: var(--bg-dark-light);
}

.dark-mode .grid-view nav li a {
    background: var(--bg-dark-light) !important;
    border-color: var(--border-gray) !important;
}

.dark-mode .grid-view nav li.active a {
    background: var(--bg-dark) !important;
}

.dark-mode .grid-view nav li a:focus {
    box-shadow: none;
}

/* Modal */
.dark-mode .modal .modal-header {
    background: var(--bg-dark-light) !important;
    color: var(--color-gray) !important;
}

.dark-mode .modal .modal-content {
    background: var(--bg-dark-light);
}

/* Datepicker */
.dark-mode .datepicker {
    background: var(--bg-dark-light);
    color: var(--color-white);
}

.dark-mode .datepicker table thead tr th:hover,
.dark-mode .datepicker table td.day:hover,
.dark-mode .datepicker table td.day.active {
    background: var(--bg-dark);
    color: var(--color-white);
}

/* TinyMCE */
.dark-mode .tox-tinymce .tox-edit-area__iframe {
    background: var(--bg-dark-light);
    border: 1px solid var(--border-gray);
}
.dark-mode .tox-tinymce .tox-toolbar__primary {
    background: var(--bg-dark);
}

.dark-mode .tox-tinymce .tox-toolbar__primary svg {
    fill: var(--color-gray);
}

.dark-mode .tox-tinymce .tox-tbtn:hover svg,
.dark-mode .tox-tinymce .tox-toolbar__primary svg:hover {
    fill: var(--color-white);
}

.dark-mode .tox-tinymce .tox-statusbar {
    background: var(--bg-dark);
}

.dark-mode .tox-tinymce .tox-statusbar .tox-statusbar__path-item,
.dark-mode .tox-tinymce .tox-statusbar a {
    color: var(--color-white);
}

.dark-mode .monitorar-actions>div>a {
    color: var(--color-white);
}

.dark-mode .monitorar-actions>div>a:hover, 
.dark-mode .monitorar-actions>div>button:hover {
    background: var(--bg-dark) !important;
}