.header__logo {
    /* width: xx%; */
}

.header__brand {
    background-color: transparent !important;
}

@media (min-width: 1200px) {
    .container {
        max-width: 2140px;
    }

    div#map {
        height: 575px;
    }
}

input#top-search {
    border-radius: 25px;
    height: 40px;
    width: 100%;
    background: #F3F4F6;
    border: 1px solid silver;
    display: inline-block;
    vertical-align: middle;
}

.header__user_profile {
    display: inline-block;
    vertical-align: middle;
}

.header__link:hover {
    color: #E2156A !important;
    border-bottom: 2px solid #E2156A !important;
}

a.header__link.active {
    color: #E2156A !important;
    border-bottom: 2px solid #E2156A !important;
}

.featured__numbers {
    font-weight: 800 !important;
    text-transform: capitalize !important;
    text-wrap: nowrap !important;
}

#featured__percentage {
    float: left !important;
}

.featured_toptext {
    font-weight: 500 !important;
    font-size: small;
    text-wrap: nowrap;
}

.form__filter {
    border: none !important;
}

.form__bold_text {
    font-weight: 600;
}

.form__input {
    border-radius: 5px;
    min-height: 38px !important;
    background: #F9FAFB !important;
    border: 1px solid #ccc !important;
}

span.select2.select2-container,
.select2-container--default .select2-selection--single .select2-selection__rendered {
    width: 100% !important;
    border-radius: 5px;
    min-height: 38px !important;
    line-height: 38px !important;
}

span.select2-selection {
    border-radius: 5px;
    min-height: 38px !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #ECECEC !important;
    color: #1F2937 !important;
}

.select2-selection__arrow {
    height: 38px !important;
}

.bootstrap-tagsinput {
    min-height: 38px !important;
    width: 100% !important;
    background-color: #F9FAFB !important;
    box-shadow: none !important;
}

span.tag.label.label-primary {
    background: #DBEAFE;
    color: #2563EB;
    font-size: inherit;
}

span.select2-selection.select2-selection--single {
    background: #F9FAFB !important;
}

.custom__row {
    min-width: -webkit-fill-available !important;
}

.featured__numbers_widget,
.corner__rounded {
    border: 1px solid #E5E7EB;
    border-radius: 15px !important;
}

.background__white {
    background: #FFFFFF !important;
}

.cardbox__title {
    font-size: 12pt;
}

.middle__valign {
    margin: auto;
}

.featured__numbers_text {
    padding: 20px 0px 40px 20px !important;
    color: #1F2937 !important;
}

.text__primary {
    color: #1F2937 !important;
}

.text__blue {
    color: #3B82F6 !important;
    font-weight: 600;
}

.clear__filters {
    right: 35px;
    padding: 0;
    text-align: right;
}

.form__filter_description {
    margin-bottom: 20px;
    margin-left: 1px;
}

.form__filter_box {
    margin-bottom: 0px !important;
}

.form__filter_ibox {
    margin-bottom: 0px !important;
}

.featured__numbers_widget,
.corner__rounded {
    background: white !important;
}

a.navbar-brand.header__brand {
    display: block;
    align-items: center;
}

img#companyLogo {
    max-width: 30%;
}

.corner__midrounded {
    border-radius: 5px !important;
}

.overmap__location {
    background-color: #EFF6FF !important;
    margin: 10px 5px 5px 0px;
}

.overmap__locationset {
    margin: auto;
}

.overmap__bigbold {
    color: #1F2937 !important;
    font-weight: 700;
    text-transform: capitalize;
}

.overmap__lightbold {
    color: #1F2937 !important;
    font-weight: 600;
}

.overmap__lighter {
    font-weight: 400;
    color: #6B7280;
}

.text__light {
    font-weight: 300;
}

.corner__rounded_bottom {
    border-radius: 0px 0px 15px 15px !important;
    border-top: none;
}

.ibox__title_merged {
    border-radius: 15px 15px 0px 0px;
}

.ui.multiple.dropdown>.label {
    background: #DBEAFE !important;
    color: #2563EB !important;
    font-size: inherit !important;
    box-shadow: none !important;
}

.default.text {
    color: #757575 !important;
    /* line-height: 2.25rem !important; */
    font-weight: 500 !important;
    font-size: 10pt;
}

.ui.label>a {
    opacity: 1 !important;
}

.ui.multiple.dropdown>.label {
    font-size: 1.5em !important;
}

i.dropdown.icon {
    margin: auto;
    font-size: 1.2em !important;
}

i.delete.icon {
    opacity: 0.5;
    font-weight: 100;
}

.hidden {
    display: none;
}

span#country_info {
    font-size: smaller;
    margin-left: 15px;
}

i.custom_icon.fa.fa-angle-down {
    right: 0 !important;
    float: right;
    font-size: 15px;
    vertical-align: middle;
    cursor: pointer;
    position: absolute;
    width: auto;
    height: auto;
    line-height: 0.5;
    top: 0.78571429em;
    right: 1em;
    z-index: 3;
    margin: -0.78571429em;
    padding: 0.91666667em;
    opacity: .8;
    -webkit-transition: opacity .1s ease;
    transition: opacity .1s ease;
}

.poweredby_toptext {
    color: #4B5563;
    font-weight: 400;
    vertical-align: bottom;
    /* font-size: small; */
    margin-right: 5px;
    margin-left: 5px;
}

img {
    vertical-align: initial !important;
}

button.btn.btn-default {
    border-radius: 5px;
    min-height: 38px !important;
}

.page-item.active .page-link {
    background-color: #E2156A;
    border-color: #E2156A;
}

.table-responsive {
    padding: 10px;
}

body {
    zoom: 0.97 !important;
    background: #FFFFFF !important;
    font-family: "Inter", sans-serif !important;
}

#loader {
    background: #FFFFFF !important;
    height: 100% !important;
    margin-top: auto !important;
}

.spinner-border {
    margin-top: 20% !important;
}

.map_placeholder {
    width: 76.5%;
}

/* Hiding the "Country" table header */
#main_table th#country,
th#sku,
td#item_id_cell,
td#country_cell {
    display: none;
}

/* hiding unnecessary part of the date range picker */
.ranges {
    display: none !important;
}

.no-border {
    border: none !important;
    padding: 0 !important;
}

/* slider next & prev styles */
.slick-prev:before,
.slick-next:before {
    color: #1F2937 !important;
}

.slick-slider {
    margin-bottom: 0 !important;
}

.ibox-content.overmap__location {
    padding: 5px 5px 5px 5px !important;
    border-radius: 5px !important;
}

.products_table_wrapper {
    min-height: 355px;
    max-height: 355px;
    overflow-y: auto;
    padding: 0px 0px 0px 0px;
}

#co_order_products {
    width: 100%;
    border-collapse: collapse;
}

#co_order_products th,
#co_order_products td,
#top_products_in_the_same_basked th,
#top_products_in_the_same_basked td {
    padding: 15px 0px 0px 15px;
    text-align: left;
}

/*Co-ordered products table scrollers*/
.products_table_wrapper::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.products_table_wrapper::-webkit-scrollbar-track {
    border-radius: 8px;
    background-color: transparent;
}

.products_table_wrapper::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border: 3px solid transparent;
    background-clip: content-box;
    background-color: #E5E7EB;
}

#co_order_products td:nth-child(1) {
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-left: 15px;
}

.sticky-header {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: #F3F3F4;
}

svg.datamap {
    margin-left: 100px;
    padding: 100px;
    overflow: inherit !important;
}

.bubble-tooltip {
    padding: 20px 20px 20px 20px;
    border: 1px solid #60A5FA;
}

.map-container {
    position: relative;
    width: 100%;
    height: 665px;
    /* Adjust height as needed */
}

.map {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#rwanda_map {
    z-index: 0;
    /* Setting z-index to move rwanda_map behind shared_data_map */
}

#shared_data_map {
    z-index: 1;
    /* Setting z-index to keep shared_data_map on top */
}

.tooltip_title {
    text-transform: capitalize !important;
}

h4.tooltip_bold {
    margin-bottom: -1px !important;
}

button#zoom_out,
button#zoom_in,
button#full_screen {
    font-size: 14pt;
    background: white;
    color: #5e5e5e;
    border: 1px solid #5e5e5e;
    border-radius: 10px;
}

.zoom-buttons {
    padding: 10px;
    display: inline-grid;
    gap: 5px;
    position: absolute;
    z-index: 1;
    top: 10px;
    left: 10px;
}

.legend {
    padding: 10px;
    position: absolute;
    z-index: 1;
    bottom: 10px;
    left: 10px;
}

/* Add CSS styles for the map_section */
#map_section {
    width: 100%;
    overflow: hidden;
    /* Disable scrolling */
    position: relative;
    /* Required for absolute positioning of movable elements */
    height: 666px;
    background: white;
}

.map-container {
    position: relative;
}

.movable {
    cursor: grab;
}

.header__logout {
    color: #676a6c;
    font-weight: 600;
}

.header__logout:hover {
    color: #E2156A !important;
}

span#company_name {
    color: black;
    vertical-align: text-top;
}

td.dataTables_empty {
    height: 159px !important;
}

td.co_ordered_products_table_empty {
    height: 228px !important;
    text-align: center !important;
}

.c3-grid line {
    opacity: 0.3 !important;
    stroke-width: 1;
    stroke-dasharray: none;
}

.ibox-content.corner__rounded.opot,
.ibox-content.corner__rounded.sot {
    height: 413px !important;
}

.ibox-content.corner__rounded_bottom.sdchannel {
    height: 356px;
}

.table-responsive.corner__rounded.main_table {
    height: 611px !important;
}

.ibox-content.corner__rounded.gsproduct {
    height: 295px !important;
}

.ibox-content.corner__rounded.gsproduct.skudrilldown {
    height: 390px !important;
}

/* Charts font sizes */
/* Font size of all texts within the charts */
.c3 svg {
    font-size: 14px;
}

/* Font size of axis labels */
.c3-axis-x text,
.c3-axis-y text {
    font-size: 12px;
}

/* Font size of legend items */
.c3-legend-item text {
    font-size: 12px;
}

h3.form__bold_text.cardbox__title.location_summary_title {
    text-transform: capitalize;
}

.locationActive {
    background-color: #1E499F !important;
}

.locationActive,
.locationActive h4,
.locationActive h5,
.locationActive span {
    color: white !important;
}

#product_name,
.go-back {
    color: #1E499F !important;
}

.vertical-separator {
    color: #D1D5DB;
}

.custom-link {
    color: #374151 !important;
    max-width: 50% !important;
}

.row.main-bar {
    margin-bottom: 30px;
}

.custom-breadcrumb {
    max-width: 50%;
    text-wrap: nowrap;
}

.modal-dialog.modal-lg.main-modal {
    max-width: 96% !important;
    height: 100% !important;
}

.modal-backdrop.show {
    opacity: .5;
    width: 100% !important;
    height: 100% !important;
}

.modal-content {
    height: 95%
}

.modal-body {
    padding: 0px 0px 0px 0px !important;
}

.inmodal .modal-header {
    padding: 12px 37px !important;
    text-align: center;
    display: block;
    margin-bottom: -48px !important;
    z-index: 1 !important;
    border-bottom: none !important;
}

.table-center,
td.table-centered,
th.table-centered {
    text-align: center !important;
}

span.filter_date_info {
    background: white;
    padding: 10px;
    border-radius: 25px;
    border: 2px solid silver;
}

.filter-note {
    margin-bottom: 10px !important;
}

.ibox-content.corner__rounded.salesSummaryCard {
    min-height: 290px;
    height: auto;
}

td.item-name {
    white-space: nowrap;
    overflow: hidden;
    max-width: 180px;
    padding-right: 3px !important;
    text-overflow: ellipsis;
}

.summary_right_float {
    float: right;
    text-align: right;
}

span.text__light.top_product_label {
    max-width: 65%;
    display: block;
    float: left;
}

h4.top_product_section {
    display: block;
    max-width: 100%;
}

h4.top_product_section {
    overflow: auto;
}

th.table-center.withicon {
    padding-left: 30px;
}

div#MonthlyoverallSalesLineChart canvas,
div#MonthlyUnitsSoldLineChart canvas,
div#monthlyPharmaciesLineChart canvas,
div#monthlyBestCountySales canvas {
    width: 249.931px !important;
}

h1#overall_sales,
h1#units_sold,
h1#total_pharmacies,
h1#best_county_by_sales,
h1#pharmacy_location {
    margin-left: 0 !important;
}

@media (min-width: 1200px) {
    nav.navbar.navbar-expand-lg.navbar-static-top {
        padding: 0px 64px 0px 55px;
    }
}

.row.dashboard_highlights {
    margin-bottom: 15px;
    margin-top: 15px;
}

/* Make the canvas responsive */
#MonthlyoverallSalesLineChart,
#MonthlyUnitsSoldLineChart,
#monthlyPharmaciesLineChart,
#monthlyBestCountySales {
    width: 100%;
    overflow: hidden;
    position: relative;
}

/* Adjust layout for smaller screens */
@media (max-width: 768px) {
    .featured__numbers_widget .row {
        flex-direction: column;
    }

    .featured__numbers_widget .row>div {
        width: 100%;
    }
}

table#main_table {
    width: 100% !important;
}

.perc_tooltip {
    text-align: left !important;
    width: 400px !important;
}

.smry_table_row {
    vertical-align: top;
}

span.text__light {
    font-size: 14px;
}

.table-responsive.corner__rounded.main_table,
#map_section {
    margin-bottom: 20px;
}

#monthlyBestCountySales canvas {
    max-width: 100%;
    /* Restricting canvas width to parent width */
}

.navbar {
    height: 60px;
    overflow: hidden;
}

.navbar-brand img#companyLogo {
    max-height: 100%;
    width: auto;
}

.competing-line {
    font-weight: 700;
}

.main-row {
    font-weight: 700;
    color: blue;
    background-color: #D9EAD3;
}

/* NEW: Metrics Loader Styles */
#metrics-loader {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    background: rgba(255, 255, 255, 1);
    padding: 20px;
    border-radius: 10px;
    /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); */
}

#metrics-loader .spinner-border {
    width: 1.5rem;
    height: 1.5rem;
}