:root .dark {
    --tab-color: #333;
    --background-color: #333 !important;
    --text-dark: #ddd !important;
    --clear-color: #3f3f3f !important;
    /* dark version of F4F5F6 */

}

.dark.dotted-bg {
    background-image: radial-gradient(rgba(255, 255, 255, 0.0809) 1.2px, transparent 0) !important;
}

.dark body {
    background-color: var(--background-color) !important;
}

.dark .navbar,
.dark .bottommenu {
    background-color: var(--background-color) !important;
}

.dark .border-bottom {
    border-bottom: 1px solid #555 !important;
}

.dark .transparent-card,
.dark .btn-empty {
    background-color: #444 !important;
    border: 3px !important;
    box-shadow: none;
}

.dark .selectaddfoldercard {
    background-color: #444 !important;
}

.dark .pu-skeleton {
    background-color: rgba(34, 34, 34, 0.603) !important;
    background-image: linear-gradient(90deg, rgba(3, 3, 3, 0.1), rgba(3, 3, 3, 0.1), rgba(3, 3, 3, 0.1)) !important;
}

.dark .accordion-item {
    background-color: #444 !important;
    border: 1px solid #444 !important;
}

.dark .accordion-item,
.dark .accordion-body,
.dark .accordion-collapse {
    background-color: #444 !important;
    color: white;
}

.dark .accordion-button:after {
    filter: invert(1)
}

.dark select,
.dark input,
.dark textarea,
.dark .dropdown-menu,
.dark .dropdown-item,
.dark .bg-white {
    background-color: #444 !important;
}


.dark .pan-bg,
.dark .tag,
.dark .filter-dropdown {
    background-color: #555 !important;
    box-shadow: none !important;
}

.dark .filter-btn,
.dark .dropdown-menu * {
    color: var(--text-dark) !important;
}

.dark .text-muted {
    color: #aaa !important;
}

.dark .nav-mpill {
    background-color: transparent !important;
    color: var(--text-dark) !important;
}

.dark .tag {
    color: var(--text-dark) !important;

}

.dark .nav-mpill.active,
.dark .menutext-active {
    background-color: #555 !important;
    color: var(--text-dark) !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

.dark .menuline:hover {
    background-color: rgb(58, 58, 58) !important;
    color: white !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}


.dark .dropdown-toggle::after {
    color: var(--text-dark) !important;
}

.dark .form-control {
    border: 2px solid #888 !important;
}

.dark .reportrange-text {
    background-color: #444 !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    color: var(--text-dark) !important;
    border: 0px !important;
}

.dark .menutext:hover {
    color: white !important;
}

/* .menutext:hover {
        text-decoration: none !important;
        color: black;
    } */


.dark .nav-mpill {
    background-color: #222;
    color: var(--text-dark) !important;
}

.dark .opacity-7 {
    opacity: .9 !important;
}

.dark .opacity-5 {
    opacity: .7 !important;
}

.dark .text-555,
.dark .vc-weekday,
.dark .vc-svg-icon {
    color: #bbb !important;
}

.dark h1,
.dark h2,
.dark h3,
.dark h4,
.dark h5,
.dark h6,
.dark p,
.dark a,
.dark span,
.dark small,
.dark b,
.dark strong,
.dark pre,
.dark .tag-wrapper {
    color: var(--text-dark);
}

.dark textarea,
.dark .swal2-title,
.dark .swal2-content {
    color: var(--text-dark) !important;
}

.dark .swal2-validation-message {
    background-color: var(--background-color) !important;
}

/* DATE PICKER */
.dark .daterangepicker,
.dark .calendar-table {
    background-color: #444 !important;
    border: none !important;
}

.dark .calendar-table th {
    background-color: #444 !important;
    color: var(--text-dark) !important;
}

.dark .daterangepicker td.in-range {
    background-color: #666 !important;
}

.dark .daterangepicker td.active {
    background-color: var(--accent-color) !important;
}

.dark .prev span {
    color: var(--text-dark) !important
}

.dark .daterangepicker td {
    background-color: #444 !important;
}

.dark .daterangepicker .ranges li:hover {
    background-color: #555 !important;
    border-radius: 5px;
}

.dark .drp-buttons {
    border-top: 1px solid #666 !important;
}

.dark .daterangepicker.show-ranges .drp-calendar.left {
    border-left: 1px solid #666 !important;
}

/* END DATE PICKER */

.dark .clear-card {
    background-color: #666 !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

.dark .li-line:hover {
    background-color: #555 !important;
}

.dark .vc-title,
.dark .vue-slider-mark-label {
    color: var(--text-dark) !important;
}

.dark label {
    color: #bbb !important;
}

.dark thead th,
.dark td,
.dark .text-dark,
.dark select,
.dark option,
.dark input,
.dark .dropdown-item,
.dark .menuicon .fas {
    color: var(--text-dark) !important;
}

.dark .link-no-deco:hover {
    color: #eee !important;
}

.dark thead th {
    border-bottom: 1px solid #666 !important;
}

.dark tr {
    border-top: none !important;
    border-bottom: 1px solid #555 !important;
}

.dark .text-white {
    color: #444;
}

.dark .text-gray {
    color: #bbb;
}



.dark input[size="12"] {
    background-color: transparent !important;
    color: white;
}

.dark .vc-container {
    background-color: #444 !important;
}

.dark .swal2-popup {
    background: #444 !important;
}

.dark .vue-slider-dot-tooltip-inner {
    background-color: #222 !important;
}

.dark .vue-slider-dot-tooltip-inner-bottom::after {
    border-bottom-color: #222 !important;
}

/* PAGINATION */
.dark .page-link {
    background-color: #444 !important;
}

.dark .page-item {
    border-color: var(--text-dark);
}

/* END PAGINATION */


/* MODAL */
.dark .modal-header {
    border-bottom: 1px solid #555;
}

.dark .modal-footer {
    border-top: 1px solid #555;
}

/* END MODAL */

.dark .table-hover>tbody>tr:hover {
    background-color: #555 !important;
}

.dark #mobile-bottom {
    background-color: var(--background-color) !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

.dark #mobile-bottom .fas {
    color: var(--text-dark) !important;
}

.dark .form-check-input {
    border: 1px solid #fff;
}

.dark .input-group-text {
    background-color: #555;
    color: white;
    border: 1px solid #888;
}

.dark hr {
    border: 1px solid var(--text-dark);
}

.dark .hr-border-top {
    border-color: #888 !important;

}

.dark .profile-tab {
    background-color: #555 !important;
}

.dark .profile-tab.active-tab {
    background-color: #444;
}

.dark .bg-clear {
    background-color: #555 !important;
}

.dark .table-hover>tbody>tr:hover {
    --bs-table-accent-bg: rgba(51, 51, 51, 0.651);
}



.dark .apexcharts-tooltip,
.dark .ap-tooltip {
    background-color: var(--background-color) !important;
}

.dark .apexcharts-point-annotations rect {
    fill: var(--background-color) !important;
}

.dark .apexcharts-point-annotations text {
    fill: var(--text-dark) !important;
}

.dark .ap-tooltip span {
    font-weight: 100 !important;
    color: #dfdfdf !important
}

.dark .apexcharts-xaxis-label,
.dark .apexcharts-yaxis-label {
    font-weight: 100;
    fill: #dfdfdf !important
}

.dark .apexcharts-legend-text {
    color: var(--text-dark) !important
}

.dark .accent-shadow:before {
    content: "";
    z-index: -1;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(to top left,
            var(--accent-color) 0%,
            var(--secondary-color) 100%);
    transform: translate3d(0px, 0px, 0) scale(0.95);
    filter: blur(15px);
    opacity: 0.3;
    transition: opacity 0.3s;
    border-radius: inherit;
}

.dark .cookie {
    color: var(--text-dark) !important;
    background-color: #444 !important;
    box-shadow: none !important;
}

.dark .cookie__floating__buttons button {
    background-color: rgba(0, 0, 0, 0) !important;
}

.dark .cookie__floating__buttons button {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.4);
}

.dark .cookie__floating__buttons__button--accept {
    border: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.4) !important;
}

.dark .cookie__floating__buttons__button--decline {
    border-right: 0 !important;
    /* border-right: 1px solid rgba(255, 255, 255, 0.4) !important; */
}

.dark .tabs {
    background-color: #282828 !important;
}

.dark .glider {
    background-color: #444 !important;
}

.dark .dropdown-content {
    background-color: #333;
    border: 1px solid #444;
}

.dark .dropdown-item:hover,
.dark .hover-line {
    background-color: #444 !important;
}

.dark .invert-colors {
    filter: invert(0) saturate(0) !important;
}

.dark .invert-dark {
    filter: invert(1) saturate(0) !important;
}

.dark .hovercardinfo .card {
    background-color: #444;
  }