:root {
    /* your brand */
    --primary-color: #001489;
    --secondary-color: #009CBD;

    /* Bootstrap override values */
    --bs-primary: #001489;
    --bs-primary-rgb: 0, 20, 137;

    --bs-secondary: #009CBD;
    --bs-secondary-rgb: 0, 156, 189;

    --bs-modal-width: 90%;
    --bs-modal-padding: 1rem;

    /* modal header */
    --bs-modal-header-bg: #001489;
    --bs-modal-header-color: #ffffff;

    /* optional: update modal border + footer buttons */
    --bs-modal-border-color: #001489;
}


.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #001489;
    --bs-btn-border-color: #001489;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #051ca0;
    --bs-btn-hover-border-color: #001489;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #051ca0;
    --bs-btn-active-border-color: #001489;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #001489;
    --bs-btn-disabled-border-color: #001489;
}

    html, body {
        height: 100%;
        margin: 0;
        padding: 0;
        font-family: Arial, sans-serif;
    }

     /* Toolbar styling */
    .kc-toolbar {
        width: 100%;
        height: 60px;
        background: var(--bs-primary);
        display: flex;
        align-items: center;
        padding: 0 20px;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 2;
        box-shadow: 0 2px 4px rgba(0,0,0,0.15);
    }

    .kc-toolbar img {
        height: 60px;
    }

    /* Push the map below the toolbar */
    #map {
        position: fixed;
        top: 60px;
        bottom: 0;
        left: 0;
        right: 0;
    }

    #map {
        width: 100%;
        height: 100%;
        opacity: 0;
        transition: opacity 0.4s ease-in-out; 
    }

    .county-label {
        background: #333 !important;
        color: #fff !important;
        padding: 4px 8px;
        border-radius: 4px;
        border: 1px solid #111;
        font-size: 14px;
    }

    .leaflet-interactive:focus,
    .leaflet-interactive:active {
        outline: none !important;
        stroke-opacity: 1;
    }

    .county-name-label {
    font-size: 14px;
    font-weight: bold;
    color: #000;
    text-align: center;
    pointer-events: none;
    text-shadow: 1px 1px 2px white; /* optional for contrast */
}

.modal-logo{
    max-width: 180px;
    height: auto;
    margin-left: -12px;
}