.analytics-dashboard {
    margin-bottom: 30px;
}

.dashboard-analytics-badge {
    margin-left: 5px;
    background-color: rgba(23, 21, 186, 0.82) !important;
    font-weight: 600;
}

#dashboardAnalyticsContainer {
    overflow-y: scroll;
}

.analytics-heatmap-btn {
    float: left;
    margin: 25px 15px 10px;
    padding: 7px;
    height: 34px;
}

.heatmap-icon {
    height: 22px;
    padding-right: 5px;
}

.report-analytics-top-btns {
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.analytics-table-type-selector {
    margin: 0px;
    display: flex;
    justify-content: space-between;
}

.analytics-table-type-selector .sd-btn-bordered-group {
    margin-left: 0px !important;
}

.analytics-excel-download-btn {
    margin-right: 10px;
    cursor: pointer;
}

.analytics-type-selector {
    height: 80px;
    margin: 24px 0;
}

.analytics-card-section, .sales-card-section, .third-party-report-box-container {
    gap: 20px;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}

.third-party-report-box-container {
    margin-bottom: 24px;
    pointer-events: none;
}

.analytics-cards, .sales-cards {
    width: 100%;
    padding: 12px 16px;
    background: var(--report-card-bg);
    border-radius: 5px;
    border: 1px solid var(--sd-neutral-300);
    box-shadow: none;
    cursor: pointer;
}

.analytics-cards .card-body, .sales-cards .card-body {
    width: min(220px, 20vw);
}

#type_avgDeliveryTime {
    margin-right: 0 !important;
}

.analytics-cards.selected, .sales-cards.selected {
   border: 1px solid #17C289;
}

.analytics-cards, .sales-cards {
    font-weight: 400;
    color: var(--sd-neutral-600);
}

.analytics-hero-text, .sales-hero-text {
    font-weight: 600;
    line-height: 26px;
    padding-top: 8px;
}

.analytics-cards.selected .analytics-hero-text, .sales-cards.selected .sales-hero-text {
    color: var(--sd-neutral-800);
}

.muted-card {
    pointer-events: none;
    max-width: 350px;
    margin-top: 24px;
}

.analytics-icons {
    background-color: #7D8F9B;
    padding: 5px 5px 0px;
    border-radius: 8px;
    margin-right: 10px;
}

.analytics-cards.selected .analytics-icons {
    background-color: #2EB487;
}

.float-right {
    float: right;
}

.fw-700 {
    font-weight: 700;
}

.analytics-container {
    border: 1px solid var(--secondry-btn-focus-bg);
}

.analytics-summary-section {
    padding: 15px 40px 0px;
    background: #FFFFFF;
}

#analytics-header-div {
    font-size: 16px;
}

.analytics-graph-container {
    max-height: 300px;
    height: 270px;
    margin: -6px -18px 30px
}

#analytics-table-label,
#isCateringOrder {
    margin: 0 !important;
}

.catering-input-wrapper {
    padding: 0 15px;
}

.catering-input-label {
    margin: 3px 5px 0 5px !important;
}

.analytics-table-container {
    min-height: 100px;
    margin-top: 30px !important;
    padding: 0px !important;
}

.analytics-heatmap-container {
    min-height: 300px;
    border-radius: 5px;
    margin-top: 24px;
}

.analytics-heatmap {
    height: calc(100vh - 350px);
    width: 100%;
    min-height: 500px;
    border-radius: 5px;
}

.analytics-table-container #analytics-table_wrapper {
    width: 100%;
    margin-top: 10px !important;
}

.analytics-table-container #analytics-table_wrapper #analytics-table {
    width: 100% !important;
}

.reportAndAnalyticsContainer {
    overflow: auto;
    height: 100%;
}

.sub-tabs-container {
    padding: 0px;
    width: fit-content;
    border-bottom: 2px solid white;
}

.daterange-apply-btn {
    background: #17C289;
    border: none;
    padding: 5px 12px !important;
    color: #FFFFFF !important;
}

.daterange-cancel-btn {
    padding: 5px 12px !important;
    background: var(--sd-neutral-200);
    border: 1px solid #D3D3D3;
    border-radius: 4px;
    color: var(--sd-neutral-500) !important;
}

.daterangepicker td.in-range {
    background: rgba(23, 194, 137, 0.11) !important;
}

.daterangepicker td.active, .daterangepicker td.active:hover {
    background: var(--sd-primary-500) !important;
}

/*datepicker dark mode*/

/* Darker Daterange Picker */
.daterangepicker-dark td.off,
.daterangepicker-dark td.off.in-range,
.daterangepicker-dark td.off.start-date,
.daterangepicker-dark td.off.end-date {
    background-color: transparent;
    color: var(--sd-neutral-400);
}

.daterangepicker-dark {
    background-color: inherit;
    color: #ebf4f0;
    border: 1px solid var(--sd-neutral-400);
}

.daterangepicker-dark:after {
    border-bottom: 6px solid var(--sd-neutral-400);
}

.daterangepicker-dark .calendar-table {
    background-color: transparent;
    border: none;
}

.daterangepicker-dark .drp-buttons {
    border-top: 1px solid var(--sd-neutral-400);
}

.daterangepicker-dark .datepicker.dropdown-menu table {
    background-color: transparent;
}

.daterangepicker-dark td.active,
.daterangepicker-dark td.active:hover {
    background-color: transparent;
    color: #ebf4f8;
}

.daterangepicker-dark td.in-range {
    color: #ebf4f8;
}

.daterangepicker-dark .btn-success {
    color: #fff;
}

.daterangepicker-dark .btn-success.disabled,
.daterangepicker-dark .btn-success[disabled],
.daterangepicker-dark fieldset[disabled] .btn-success,
.daterangepicker-dark .btn-success.disabled:hover,
.daterangepicker-dark .btn-success[disabled]:hover,
.daterangepicker-dark fieldset[disabled] .btn-success:hover,
.daterangepicker-dark .btn-success.disabled:focus,
.daterangepicker-dark .btn-success[disabled]:focus,
.daterangepicker-dark fieldset[disabled] .btn-success:focus,
.daterangepicker-dark .btn-success.disabled.focus,
.daterangepicker-dark .btn-success[disabled].focus,
.daterangepicker-dark fieldset[disabled] .btn-success.focus,
.daterangepicker-dark .btn-success.disabled:active,
.daterangepicker-dark .btn-success[disabled]:active,
.daterangepicker-dark fieldset[disabled] .btn-success:active,
.daterangepicker-dark .btn-success.disabled.active,
.daterangepicker-dark .btn-success[disabled].active,
.daterangepicker-dark fieldset[disabled] .btn-success.active {
    color: #fff;
    background-color: inherit;
    border-color: var(--sd-neutral-500);
}

.daterangepicker-dark .btn-default {
    color: #fff;
    background-color: inherit;
    border-color: var(--sd-neutral-500);
}

.daterangepicker-dark .prev span,
.daterangepicker-dark .next span {
    border: solid #fff !important;
    border-width: 0 2px 2px 0 !important;
}

.daterangepicker-dark td.available:hover,
.daterangepicker-dark th.available:hover {
    background-color: var(--sd-neutral-400);
}

.heat-map-static {
    height: 100%;
    width: 100%;
    object-fit: cover;
}