/* Dashboard CSS - Extracted from index-v3i-with-Accessibility.html */

/* Button and Primary Color Styling */
.btn:not(.btn-outline):not(.btn-dashed):not(.btn-bordered):not(.border-hover):not(.border-active):not(.btn-flush):not(.btn-icon):not(.btn-hover-outline) {
	padding:1rem .5rem
}

.kpi-h {
    padding: 1rem 1.1rem !important;
    color: var(--bs-card-color);
}

.bg-primary {background-color: #006eae!important}
.btn.btn-primary {background-color: #006eae!important}
.btn.btn-primary.active {background-color: #006eae!important}

/* Fix for hover state on active primary buttons */
.btn.btn-primary.active:hover {
	background-color: #006eae!important;
	border-color: #006eae!important;
}










/*only increase when you actually have the vertical room*/
@media (min-height: 900px) {
  
}
@media (min-height: 1080px) {
  
}
	
.sidebar-card .card-body {
	flex: 1;
	overflow-y: auto;
}	

.map-card {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 400px;
}

.map-card .card-body {
	flex: 1;
	position: relative;
	padding: 1rem;
}



/* Desktop/tablet: fixed-height map, no absolute positioning */
#highcharts-map {
  position: relative;
  width: 100%;
  height: 525px;     /* pick your desktop height */
  padding-top: 5px;  /* 5px spacing at top for desktop */
}

/* Ensure Highcharts container takes full width */
#highcharts-map .highcharts-container {
  width: 100% !important;
}

/* Ensure the chart root takes full width */
#highcharts-map > div[data-highcharts-chart] {
  width: 100% !important;
}

	
/* Responsive adjustments */
@media (max-width: 768px) {
	
	#highcharts-map {
    position: relative !important;
    width: 100% !important;
    /*height: 280px !important; */ /* further reduced mobile height */
    padding-top: 0 !important; /* remove desktop padding on mobile */
    top: auto; right: auto; bottom: auto; left: auto;
	}
	
	/* Fix mobile layout spacing issues */
    .map-card {
        margin-top: 1rem !important;
        min-height: 320px !important; /* reduced container height */
        
    }
	
	.map-card .card-body {
		padding: 0.5rem !important; /* reduced padding on mobile */
	}
	
	/* Ensure map container doesn't have extra space at top */
	.map-container {
		padding-top: 0 !important;
		margin-top: 0 !important;
	}
	
	/* Let Highcharts handle legend sizing responsively */
}

/* Additional mobile optimizations for very small screens */
@media (max-width: 576px) {
    #highcharts-map {
        /*height: 250px !important;*/ /* Even smaller height for phones */
        padding-top: 0 !important; /* ensure no padding on phones */
        height: 230px !important;
    }

    .map-card {
        min-height: 230px !important; /* smaller container for phones */
       
    }

        .map-card .card-body {
            padding: 0.25rem !important; /* Very minimal padding */
        }
	
	/* Reduce title spacing on mobile */
	.card-title.mb-5 {
		margin-bottom: 1rem !important;
	}
	
	/* Let Highcharts handle legend sizing responsively */
}

/* Mobile: compact KPI list — value left, label next to it */
@media (max-width: 768px) {
    /* Wrap all KPIs as one rounded list */
    #kpi-row {
        --bs-gutter-x: 0;
        background: #fff;
        border: 1px solid var(--bs-border-color);
        border-radius: .75rem;
        overflow: hidden;
        box-shadow: var(--bs-box-shadow-sm);
        margin-bottom: 1rem;
    }

        /* One KPI per row */
        #kpi-row > .col {
            flex: 0 0 100%;
            max-width: 100%;
        }

        /* Remove per-card chrome */
        #kpi-row .card {
            background: transparent !important;
            border: 0 !important;
            box-shadow: none !important;
            border-radius: 0 !important;
        }

        /* Row layout: VALUE (big, left)  |  LABEL (right, same line) */
        #kpi-row .card-body.kpi-h {
            padding: .75rem 1rem !important;
            border-bottom: 1px solid var(--bs-border-color);
        }

        #kpi-row > .col:last-child .card-body.kpi-h {
            border-bottom: 0;
        }

        /* Override the inner column layout to sit side-by-side */
        #kpi-row .card-body.kpi-h > .d-flex.flex-column {
            display: flex;
            flex-direction: row !important; /* override Bootstrap's column */
            align-items: center;
            gap: .75rem;
        }

        /* Value: bigger, left-aligned */
        #kpi-row .card-body.kpi-h .fs-1 {
            font-size: 1.5rem !important; /* bump size for emphasis */
            line-height: 1.5rem;
        }

        #kpi-row .card-body.kpi-h .fw-bold {
            margin: 0;
            text-align: left;
            color: var(--bs-gray-900) !important;
        }

        /* Label: sits to the right, truncates if too long */
        #kpi-row .card-body.kpi-h .fw-semibold.small {
            font-size: 1rem !important;
            line-height: 1.25rem;
            margin: 0;
            color: var(--bs-gray-700) !important;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* First KPI highlighted (your first item already has .bg-primary) */
        #kpi-row a.bg-primary .card-body.kpi-h {
            background: #006eae;
        }

            #kpi-row a.bg-primary .card-body.kpi-h .fs-1,
            #kpi-row a.bg-primary .card-body.kpi-h .fw-bold,
            #kpi-row a.bg-primary .card-body.kpi-h .fw-semibold.small {
                color: #fff !important;
            }
    
        
}
@media (max-width: 576px) {
    #kpi-row .card-body.kpi-h .d-flex.flex-column {
        flex-direction: row !important;
        align-items: center;
        gap: .75rem;
    }

}


	
.btn-check:active+.btn.btn-primary, .btn-check:checked+.btn.btn-primary, .btn.btn-primary.active, .btn.btn-primary.show, .btn.btn-primary:active:not(.btn-active), .btn.btn-primary:focus:not(.btn-active), .btn.btn-primary:hover:not(.btn-active), .show>.btn.btn-primary {
	background-color: #006eae !important;
}

.bg-warning {
	--bs-bg-rgb-color: var(--bs-warning-rgb);
	background-color: #fae445 !important;
}




.hc-tooltip {
  font-size: 15px;
  line-height: 1.35;
}

/* Make the card just wide enough to hold 4 boxes in one row */
.tt-card {
  background: #f7f8fa;
  padding: 8px 10px;                 /* a bit tighter */
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  width: 420px;                      /* force single row; tweak to taste (380–460) */
  max-width: 420px;
}

.tt-title {
font-size: 16px;
  font-weight: 700;
  margin-bottom: 2px;
}

.tt-sub {
  font-size: 12px;
  color: #555;
  margin-bottom: 8px;
}

/* 4 boxes inline */
.tt-kpi {
  display: grid;
  grid-template-columns: repeat(4, minmax(80px, 1fr)); /* 1 row of 4 */
  gap: 8px;                                           /* slightly tighter gap */
}

.tt-kpi .box {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 8px;                                       /* tighter padding */
  text-align: center;
}

.tt-kpi .label {
  font-size: 11px;                                    /* a touch smaller */
  color: #64748b;
  white-space: nowrap;                                 /* keep on one line */
}

.tt-kpi .val {
  font-size: 17px;                                    /* slightly smaller than before */
  font-weight: 700;
}



/* Narrow tooltip card */
.hc-tooltip { font-size: 14px; line-height: 1.35; }
.tt-card {
  background: #f7f8fa;
  padding: 10px 12px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  max-width: 320px;              /* narrower than before */
  width: max-content;
}
.tt-title { font-weight: 700; margin-bottom: 2px; }
.tt-sub   { font-size: 12px; color: #555; margin-bottom: 8px; }

/* 3-column compare table: Label | Hovered | Selected */
.tt-compare {
  display: grid;
  grid-template-columns: 1fr auto auto;
  column-gap: 12px;
  row-gap: 6px;
  align-items: center;
}
.tt-compare .h {
  font-size: 11px; color: #64748b; text-transform: uppercase; letter-spacing: .02em;
}
.tt-compare .c-label { font-size: 12px; color: #334155; white-space: nowrap; }
.tt-compare .c-val, .tt-compare .c-sel {
  font-weight: 700; font-size: 14px; text-align: right;
}

/* Align and stabilize numerals */
.tt-compare .c-val,
.tt-compare .c-sel {
  text-align: right;
  font-variant-numeric: tabular-nums; /* mono-width digits */
}



/* Keep tooltip narrow */
.tt-card { max-width: 340px; }  /* adjust if you want tighter */

/* Grid with a constrained label column */
.tt-compare {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto auto; /* label | hovered | selected */
  column-gap: 12px;
  row-gap: 6px;
  align-items: center;
}

/* Allow wrapping, clamp to 2 lines to avoid pushing width */
.tt-compare .c-label {
  white-space: normal;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;           /* show at most 2 lines */
  -webkit-box-orient: vertical;
  line-height: 1.2;
}

@supports not (-webkit-line-clamp: 2) {
  /* Fallback: approximate 2-line clamp */
  .tt-compare .c-label { max-height: 2.4em; }
}

/* (optional) keep numbers tidy */
.tt-compare .c-val, .tt-compare .c-sel {
  text-align: right;
  font-variant-numeric: tabular-nums;
}




/* Simple two-column tooltip list: label | value */
.tt-list {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  column-gap: 12px;
  row-gap: 6px;
  align-items: center;
}

.tt-list .l {
  font-size: 12px;
  color: #334155;
  white-space: normal;
  line-height: 1.2;
}

.tt-list .v {
  text-align: right;
  font-weight: 700;
  font-size: 14px;
  font-variant-numeric: tabular-nums; /* aligned digits */
}




/* screen-only default */
.print-only { display: none; }

/* ---- PRINT: Title + KPIs (browser style) + Map ---- */
@media print {
  /* override header height for print to reduce top margin */
  :root {
    --bs-app-header-height: 40px !important;
    --bs-app-header-height-actual: 40px !important;
  }
  
  /* make colors/borders actually print + white background */
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  html, body, #kt_app_root, .app-page, .app-wrapper, .app-container, .app-content {
    background: #fff !important;
  }

  /* page margins */
  @page { margin: 10mm; }

  /* hide chrome + sidebar column + tooltips + interactive elements */
  #kt_app_header, #kt_app_footer, #kt_scrolltop,
  .app-header, .app-header-menu,
  .main-dashboard-row > .col-md-4,
  .tooltip, .bs-tooltip-top, .bs-tooltip-bottom, .bs-tooltip-start, .bs-tooltip-end,
  [data-bs-toggle="tooltip"]:hover::after,
  [data-bs-toggle="tooltip"]:hover::before,
  #back-to-us-counties,
  .highcharts-button,
  .highcharts-map-navigation { display: none !important; }

  /* full-width main column */
  .app-container.container-xxl,
  .app-content,
  .main-dashboard-row,
  .main-dashboard-row > .col-md-8 {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
  }

  /* Safari-specific: fix flex-basis without forcing overflow */
@supports (-webkit-appearance: none) {
  .row > .col-xl-8 {
    flex: 1 1 auto !important;
    max-width: none !important;
  }
}

  /* show custom print header, hide screen title */
  .print-only { display: block !important; }
  h2.card-title { display: none !important; }

  /* optional: center the print header text */
  #print-header { 
    text-align: center; 
    margin-top: -10px !important;
    padding-top: 0 !important;
  }
  #print-header h1 { font-size: 20pt; margin: 0 0 2pt; }
  #print-header h2 { font-size: 16pt; margin: 0 0 2pt; color: #334155; }
  #print-header h3 { font-size: 11pt; margin: 0 0 8pt; color: #64748b; }

  /* ---- KPIs (browser style: value on top, label under) ---- */
    #kpi-row {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 12px !important;
        margin: 8px 0 16px 0 !important;

        /* neutralize mobile-list chrome */
        --bs-gutter-x: 0 !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        overflow: visible !important;
        page-break-inside: avoid;
    }

  /* base: 4 across; card look like screen */
  #kpi-row > .col {
    flex: 0 0 calc(25% - 9px) !important;
    max-width: calc(25% - 9px) !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  #kpi-row .card,
  #kpi-row a.card {
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 14px !important;
    box-shadow: none !important;
    text-decoration: none !important;
    outline: none !important;
  }
  
  /* Remove any pseudo-elements that might create lines */
  #kpi-row .card:before,
  #kpi-row .card:after,
  #kpi-row a.card:before,
  #kpi-row a.card:after {
    display: none !important;
    content: none !important;
  }
  #kpi-row .card-body.kpi-h { 
    padding: 12px 14px !important; 
    border-bottom: 0 !important;
  }
  /* force desktop stacking - IMPORTANT: Override mobile row layout */
  #kpi-row .card-body.kpi-h > .d-flex.flex-column {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: .25rem !important;
  }
  #kpi-row .fs-1 { 
    font-size: 1.35rem !important; 
    line-height: 1.25 !important; 
    color: var(--bs-gray-900) !important;
    margin: 0 !important;
    text-align: left !important;
  }
  #kpi-row .fw-semibold.small { 
    white-space: normal !important; 
    color: var(--bs-gray-700) !important;
    margin: 0 !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

    #kpi-row .card-body.kpi-h .fw-semibold.small {
        font-size: .90rem !important;
    }
        /* keep first KPI blue (like screen) */
        #kpi-row a.card.bg-primary, #kpi-row a.bg-primary {
    background-color: #006eae !important;
    border: none !important;
    color: #fff !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    text-decoration: none !important;
    outline: none !important;
    box-decoration-break: clone !important;
    box-shadow: none !important;
  }
  
  /* Remove any pseudo-elements from blue cards */
  #kpi-row a.card.bg-primary:before,
  #kpi-row a.card.bg-primary:after,
  #kpi-row a.bg-primary:before,
  #kpi-row a.bg-primary:after {
    display: none !important;
    content: none !important;
  }
  #kpi-row a.bg-primary .text-white { color: #fff !important; }
  #kpi-row a.bg-primary .fs-1,
  #kpi-row a.bg-primary .fw-bold,
  #kpi-row a.bg-primary .fw-semibold.small {
    color: #fff !important;
  }

  /* responsive widths by count (uses the kpi-count-N class) */
  /* 1 across */
  #kpi-row.kpi-count-1 > .col { flex-basis: 100% !important; max-width: 100% !important; }
  /* 2 across */
  #kpi-row.kpi-count-2 > .col { flex-basis: calc(50% - 9px) !important; max-width: calc(50% - 9px) !important; }
  /* 3 across */
  #kpi-row.kpi-count-3 > .col { flex-basis: calc(33.333% - 9px) !important; max-width: calc(33.333% - 9px) !important; }
  /* 4 across (default already handled) */
  /* 5 across */
  #kpi-row.kpi-count-5 {
    gap: 8px !important;
  }
  #kpi-row.kpi-count-5 > .col { 
    flex: 0 0 calc(20% - 6.4px) !important; 
    max-width: calc(20% - 6.4px) !important; 
  }
  /* 6 across (if you ever have it) */
  #kpi-row.kpi-count-6 > .col { flex-basis: calc(16.666% - 9px) !important; max-width: calc(16.666% - 9px) !important; }


        #kpi-row.kpi-count-2 > .col:last-child > a.card {
            width: calc(100% + 2px) !important;
            display: block;
        }



        #kpi-row.kpi-count-3 > .col:last-child > a.card {
            width: calc(100% + .1px) !important;
            display: block;
        }

  /* ---- Map (full width, not cut off) ---- */
  .map-card {
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    break-inside: avoid-page !important;
    page-break-inside: avoid !important;
    margin-top: 6px !important;
    background: #fff !important;
    
  }
  .map-card { 
    margin: 2px 4px !important; 
  }
  .map-card .card-body { 
    padding: 8px 8px 8px 8px !important; /* Remove top padding */
    overflow: visible !important; 
  }
  
  #highcharts-map, 
  #highcharts-map .highcharts-container,
  #highcharts-map svg {
    width: 100% !important;
    height: 460px !important; /* Moderate height to fit content */
    overflow: visible !important;
    max-width: 100% !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  
  /* Remove any top spacing from Highcharts internal elements */
  #highcharts-map .highcharts-container .highcharts-root {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  
  /* Force chart spacing to 0 in print */
  #highcharts-map .highcharts-chart {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  
  /* Adjust SVG position to remove top space */
  #highcharts-map svg {
    margin: 0 !important;
    padding: 0 !important;
  }
  
  #highcharts-map .highcharts-plot-background,
  #highcharts-map .highcharts-plot-border {
    y: 0 !important;
  }
  
  /* Override any inline styles on the container */
  #highcharts-map > div {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  
  /* Hide title space even if empty */
  #highcharts-map .highcharts-title {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
  }
  
  /* Force the entire container to start at top */
  #highcharts-map {
    display: flex !important;
    align-items: flex-start !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

    #highcharts-map {
        position: relative !important;
        width: 100% !important;
        height: 500px !important;
        page-break-inside: avoid;
        break-inside: avoid;
    }
  
  /* Target the specific highcharts elements that might have spacing */
  #highcharts-map .highcharts-container > svg > rect:first-child {
    y: 0 !important;
  }
  
  /* Remove the aggressive transforms that were cutting off the map */
  
 
  
 
  /* Reduce map container height moderately */
  #highcharts-map {
    height: 460px !important;
  }
  
  #highcharts-map .highcharts-container {
    height: 460px !important;
  }
  
  #highcharts-map svg {
    height: 460px !important;
  }
  
  /* Ensure map card doesn't clip content */
  .map-card {
    height: auto !important;
    overflow: visible !important;
  }
  
  
  
  /* Hide map navigation buttons in print */
  .highcharts-map-navigation,
  .highcharts-button,
  .highcharts-button-box {
    display: none !important;
  }
  
  /* Ensure chart content fits within print boundaries */
  .highcharts-plot-background,
  .highcharts-series-group {
    transform: none !important;
  }
  
  /* Force chart to respect container boundaries */
  .highcharts-root {
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
  }
  
  /* Ensure all Highcharts elements stay within bounds */
  .highcharts-container * {
    max-width: 100% !important;
  }
  
  /* Ensure proper print layout for map card */
  .map-card {
    /*box-sizing: border-box !important;*/
    /*width: 100% !important;*/
    /*max-width: 100% !important;*/
  }
  
  /* Prevent any content from extending beyond print area */
  #highcharts-map * {
    box-sizing: border-box !important;
  }

  /* add small padding to prevent border clipping in print */
  .app-container, .app-content { 
    padding: 2px !important; 
  }
  
  /* ensure cards have small margins to prevent border clipping */
  .card, #info-card {
    margin: 2px !important;
  }
  
  /* reduce pre-footer padding for print */
  .py-10 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }
  
  /* show info card in print below the map */
    #info-card {
        display: block !important;
        background: #fff !important;
        border: 1px solid #e5e7eb !important;
        border-radius: 12px !important;
        box-shadow: none !important;
        margin-top: 0px !important;
        margin-right: 4px !important;
        margin-left: 4px !important;
        page-break-inside: avoid !important;
        page-break-before: avoid !important;  /* ADD THIS LINE - SAFARI FIX */
        break-before: avoid !important;       /* ADD THIS LINE - SAFARI FIX */
        font-style: italic !important;
    }
  
  #info-card .card-body {
    padding: 12px 16px !important;
  }

        #info-card h2 {
            font-size: 1.1rem !important;
            margin-bottom: 8px !important;
            font-style: italic !important;
        }

        #info-card p {
            font-size: .9rem !important;
            line-height: 1.4 !important;
            font-style: italic !important;
        }
  
  #info-card section {
    margin: 8px 0 !important;
  }
  
  #info-card section:first-child {
    margin-top: 0 !important;
  }
  
  #info-card section:last-child {
    margin-bottom: 0 !important;
  }
    .app-wrapper {
        margin-top: 40px !important;
    }
    #print-header h1 {
        font-size: 24px;
    }
    #print-header h2 {
        font-size: 18px;
    }
    #print-header h3 {
        font-size: 14px;
    }
    .mt-print-0 {
        margin-top: 0 !important;
    }
}

/* screen */
@media screen { .print-only { display: none !important; } }




/* --- Typeahead --- */
.typeahead-menu{
  position:absolute; top:100%; left:0; right:0; margin-top:4px;
  z-index:1050; background:#fff; border:1px solid var(--bs-border-color);
  border-radius:.5rem; box-shadow:0 6px 20px rgba(0,0,0,.08);
  max-height:280px; overflow:auto; display:none;
}
.typeahead-item{ padding:.5rem .75rem; cursor:pointer; }
.typeahead-item:hover,.typeahead-item.active{ background:#f1f5f9; }

/* Accessibility: Focus Indicators */
/*.btn:focus,
.form-control:focus,
a:focus,
button:focus,
[tabindex]:focus {
  outline: 2px solid #006eae !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 2px rgba(0, 110, 174, 0.2) !important;
}*/

/* Skip link visibility on focus */
.sr-only-focusable:focus {
  position: absolute !important;
  width: auto !important;
  height: auto !important;
  padding: 0.5rem 1rem !important;
  margin: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
  z-index: 9999 !important;
}

/* High contrast focus for primary buttons */
/*.btn-primary:focus {
  outline-color: #ffffff !important;
  box-shadow: 0 0 0 2px #006eae, 0 0 0 4px rgba(255, 255, 255, 0.8) !important;
}*/

/* Focus styles for interactive map elements (handled by Highcharts accessibility) */
.highcharts-tracker:focus {
  outline: 2px solid #006eae !important;
}

/* Accessibility: Color Contrast Improvements */
/* Ensure text on primary buttons has sufficient contrast */
.btn-primary {
  color: #ffffff !important; /* White text on dark blue background */
}

/* Ensure secondary text maintains good contrast */
.text-gray-600 {
  color: #475569 !important; /* Darker gray for better contrast */
}

.text-muted {
  color: #64748b !important; /* Ensure muted text still meets contrast requirements */
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .btn {
    border: 2px solid !important;
  }
  
  .card {
    border: 1px solid #000000 !important;
  }
  
  .text-gray-600,
  .text-muted {
    color: #1f2937 !important;
  }
}

@media (max-width: 768px) {
    #highcharts-map {
        position: relative !important;
        width: 100% !important;
        height: 300px !important;
    }

        #highcharts-map .highcharts-container {
            position: relative !important;
            width: 100% !important;
            height: 100% !important;
        }

        #highcharts-map svg {
            position: absolute !important;
            top: 0 !important;
            left: 0 !important;
            width: 100% !important;
            height: 100% !important;
        }

        .map-card {


            
            margin-bottom: 1.25rem !important;
        }
        
}
@media (max-width: 512px) {
    #highcharts-map {
        height: 230px !important;
    }

}

@media print {
    #highcharts-map {
        position: relative !important;
        width: 100% !important;
        height: 450px !important;
        page-break-inside: avoid;
        break-inside: avoid;
    }

        #highcharts-map svg {
            max-width: 100% !important;
            height: auto !important;
        }
    #info-card p {
        font-size: .85rem !important;
        font-style: italic !important;
    }
}
.map-card {
    margin-top: 0px !important;
}

.main-dashboard-row {
    margin-bottom: 1.25rem !important;
}

@media (max-width: 1199px) {
    

        .map-card {



            margin-bottom: 1.25rem !important;
        }
        
}
.hsdataalert i {
    color: #006eae;
}

.border-primary {
    border-color: #006eae !important;
}

.highcharts-legend-item {
    cursor: default !important;
    pointer-events: none; /* completely disables interaction */
}

/* Hide the colorAxis crosshair/marker arrow completely */
.highcharts-coloraxis-marker,
.highcharts-color-axis-marker,
.coloraxis-marker-custom {
    /*display: none !important;*/
}