@import 'theme.css';

.aside {
    background: var(--menu) !important;
}

::-webkit-scrollbar-track {
    background: var(--content-background);
}

::-webkit-scrollbar-thumb {
    background: var(--scroll);
}

.content, .container, .wrapper-content, .subheader, .daterangepicker {
    background-color: var(--content-background) !important;
}

.offcanvas-right {
    background-color: var(--filter-background) !important;
}

.progress {
    background-color: var(--content-background) !important;
}

.offcanvas-header {
    color: var(--text);
}

.offcanvas-header, .flex-root label {
    color: var(--text);
}

a.menu-link.menu-toggle:hover {
    border-radius: 5px;
    background-color: var(--menu-btn) !important;
}

.aside-menu .menu-nav > .menu-item.menu-item-open > .menu-heading, .aside-menu .menu-nav > .menu-item.menu-item-open > .menu-link {
    background-color: var(--menu-btn) !important;
    margin-bottom: 2px;
}

.aside-menu .menu-nav > .menu-item .menu-submenu .menu-item.menu-item-active > .menu-heading, .aside-menu .menu-nav > .menu-item .menu-submenu .menu-item.menu-item-active > .menu-link {
    background-color: var(--menu-btn) !important;
    border-radius: 5px;
    margin-bottom: 2px;
}

.aside-menu .menu-nav > .menu-item.menu-item-active > .menu-heading, .aside-menu .menu-nav > .menu-item.menu-item-active > .menu-link {
    background-color: var(--menu-btn) !important;
}

.aside-menu .menu-nav > .menu-item:not(.menu-item-parent):not(.menu-item-open):not(.menu-item-here):not(.menu-item-active):hover > .menu-heading, .aside-menu .menu-nav > .menu-item:not(.menu-item-parent):not(.menu-item-open):not(.menu-item-here):not(.menu-item-active):hover > .menu-link {
    background-color: var(--menu-btn) !important;
}

.flex-root input,
.flex-root select {
    background-color: var(--content-background) !important;
    border: var(--border);
    color: var(--text-muted);
}

.flex-root input:hover,
.flex-root select:hover {
    color: var(--text-muted) !important;
}

.daterangepicker {
    background-color: var(--datepicker-background) !important;
}

.subheader, .footer, .container-fluid {
    background-color: var(--bar-background) !important;
}

.daterangepicker.show-calendar .ranges {
    border-right: 1px solid var(--datepicker-border) !important;
}

.daterangepicker {
    border: 1px solid var(--datepicker-border) !important;
}

.daterangepicker .drp-buttons {
    border-top: 1px solid var(--datepicker-border) !important;
    color: var(--datepicker-text) !important;
}

.daterangepicker .ranges li {
    color: var(--datepicker-text) !important;
}

.daterangepicker .ranges li:hover, .daterangepicker .ranges li.active {
    background-color: var(--datepicker-label-background) !important;
    color: var(--datepicker-label-text) !important;
}

.ranges {
    ul{
        margin: 0 !important;
    }

    li {
        color: #7E8299;

    }
    .active{
        background-color: var(--datepicker-label-background) !important;
        color: var(--datepicker-label-text) !important;
    }
}

.daterangepicker .drp-calendar th.month {
    font-weight: 500;
    color: var(--datepicker-text);
}

.daterangepicker .drp-calendar td, .daterangepicker .drp-calendar th {
    color: var(--datepicker-text);
}

.description {
    color: var(--text) !important;
}

.integration-card {
    background-color: var(--card-background) !important;
    border: solid 1px var(--integration-border) !important;
}

.small-card-reports {
    background-color: var(--small-card-bg);
    border-radius: 5px;
}

.card, .card-body-new {
    background-color: var(--card-background) !important;
}

.card-product {
    border: 1px solid var(--border) !important;
}

.daterangepicker td.off,
.daterangepicker td.off.in-range,
.daterangepicker td.off.start-date,
.daterangepicker td.off.end-date {
    background-color: var(--datepicker-off-ends) !important;
}

.internal-card-dash {
    background-color: var(--card-background) !important;
    border: 1px solid var(--border) !important;
    border-radius: 6px;
}

.card-header, .wrapper-warning {
    background-color: var(--card-background) !important;
}

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

a.text-hover-primary:hover, .text-hover-primary:hover {
    color: var(--text) !important;
}

.symbol-circle {
    border: solid 1px var(--border) !important;
}

.integration-menu ul li a {
    background-color: var(--card-background) !important;
    color: var(--text) !important;
}

.btn.btn-clean , .text-dark-50 {
    color: var(--btn-text) !important;
}

.card-title {
    color: var(--text) !important;
}

.results-container .subtitle {
    color: var(--btn-text) !important;
}

.results-container .valor, .results-container .quantity {
    color: var(--text-muted);
}

.btn.btn-clean:hover {
    color: var(--btn-text) !important;
    background-color: transparent !important;
}

.text-muted {
    color: var(--text-muted) !important;
}

.flex-root .datepicker-btn {
    color: var(--datepicker-btn-text) !important;
    background-color: var(--datepicker-btn-background) !important;
    border: 1px solid var(--datepicker-btn-border) !important;
}

.flex-root .datepicker-btn:hover {
    color: var(--datepicker-btn-text) !important;
}

.value-sales {
    color: var(--text) !important;
}

.hr-purchase {
    border-top: 1px solid var(--border) !important;
}

.wrapper-purchase-image {
    border: 1px solid var(--border);
}

.apexcharts-xaxis-label text,
.apexcharts-yaxis-label text {
    fill: var(--chart-text-color) !important;
    font-size: 11px;
}

.apexcharts-xaxis-label tspan,
.apexcharts-xaxis-label title,
.apexcharts-yaxis-label tspan,
.apexcharts-yaxis-label title {
    fill: var(--chart-text-color) !important;
    font-size: 11px;
}

.apexcharts-xaxis-label,
.apexcharts-yaxis-label {
fill: var(--chart-inverted-text-color) !important;
}

.apexcharts-tooltip {
background: var(--chart-background) !important;
border-color: var(--chart-border) !important;
color: var(--chart-text-color) !important;
}

.apexcharts-tooltip-title {
background: rgba(0, 0, 0, 0.1) !important;
color: var(--chart-text-color) !important;
}

.apexcharts-grid line {
    stroke: var(--chart-grid-color) !important;
    stroke-width: 1px;
}

.apexcharts-xaxis-tick line {
    stroke: var(--chart-grid-color) !important;
}

.apexcharts-grid-borders line {
    stroke: var(--chart-grid-color) !important;
}

.apexcharts-marker {
    stroke: var(--chart-grid-color) !important;
}