:root{
    --base-clr:#001B40;
    --line-clr:#42434a;
    --hover-clr:#285db1;
    --text-clr:#e6e6ef;
    --accent-clr:#5e63ff;
    --red-clr:red;
    --green-clr:#0ff019;
    --blue-clr:#273CF5;
    --parking-clr:#0099ff;
    --washroom-clr:#0099ff;
    --secondary-text-clr:#b0b3c1;
    --yellow-clr:#f8ff00;
    --cyan-clr:#27daf5ff;
    --gold-clr:#f2ca19;
}
.maplibregl-ctrl-attrib-inner {
    display:none; /*stfx theme is breaking it*/
}
.maplibregl-ctrl{
    display:none; /*stfx theme is breaking it*/
}
/* *{
    margin:0;
    padding:0;
}
html{
    font-family: 'Segoe UI',Tahoma,Geneva,Verdana;
    line-height: 1.5rem;
}
body{
    min-height: 100vh;
    min-height: 100dvh;
    background-color: var(--base-clr);
    color: var(--text-clr);
    display :grid;
    grid-template-columns :auto 1fr;
} */

.stfx-map-main {

            flex: 1;        
            background: white;
            overflow-y: auto;
            scrollbar-width: none;

            
            
}
.path-map #header, .path-map #footer {
    display: none;
}
.path-map #header, .path-map #footer-prefix {
    display: none;
}


#map-container {
    border: 1px solid var(--line-clr);
    border-radius: 0em;
    margin-bottom: 0px;
    padding: min(3emm,15%);
    hd,p {margin-top:1em}

     width: 100vw;   /* 100 % of the viewport width */
      height: 100vh;  /* 100 % of the viewport height */
      top:0 !important;
      left:0 !important;  /* position the element at the top left of the viewport */
      position:fixed;
      inset:0;
      margin:0;
      /* alternatively you can use position:fixed; top:0; left:0; */
     scrollbar-width:none; /* for Firefox */
      overflow: auto;         /* scroll if content exceeds the area */
      box-sizing: border-box;/* include padding/border in size */
}
#map {
    width: 100%;
    height: 100vh; /* Set to full viewport height */
}

#map-sidebar{
    box-sizing: border-box;
    height: 100vh;
    width: 250px;
    padding: 5px 0em;
    background-color: var(--base-clr);
    border-right: 1px solid var(--line-clr);

    position:sticky;
    top:0;
    align-self:start;
    transition: 300ms ease-in-out;
    overflow:hidden;
    scrollbar-width:none;
}
#map-sidebar.map-close {
    padding:5px;
    width:50px;
}
#map-sidebar.map-close.has-scollbar {
    padding:5px;
    width:70px;
}

#map-sidebar ul {
    list-style:none;
    text-wrap:nowrap;
    margin:0px;
}
#map-sidebar li {
    padding-bottom:0rem;
}
/* #sidebar > ul > li {
    display:flex;
    flex-direction:column;
    align-items: flex-start;
    margin-bottom:16px;
} */
#map-sidebar > ul > li:first-child{
    display:flex;
    justify-content: flex-end;
    margin-bottom: 16px;
    .logo{
        font-weight: 600;
    }
}
#map-sidebar ul.sub-menu li {
    font-size:.8em;
}


/* #sidebar > ul > li:not(:first-child) {
    display: flex;
    align-items: center; 
} */
#map-sidebar ul li.active a{
    color: var(--accent-clr);
    svg{
        fill: var(--accent-clr);
    }
}
#map-sidebar a{
    margin-left:18px;
}
#map-sidebar a, #map-sidebar .map-dropdown-btn, #map-sidebar .map-logo {
    border-radius: .5em;    
    padding: .85em;
    text-decoration: none;
    color: var(--text-clr);
    display:flex;
    align-items: center;
    gap: 1em;
}
.map-logo{
    padding-right:20px !important;
}
.map-sub-menu {
  max-height: 80vh; /* Sets the max height to 80% of the viewport's height */
  overflow-y: auto; /* Adds a vertical scrollbar only when needed */
  overflow-x: hidden; /* Prevents horizontal scrolling */
}

.map-sub-menu a{
    display:inline !important;
    font-size: 0.8em;
}
.map-sub-menu li {
  margin-bottom: 0rem;
}
.map-sub-menu li span {
    display: flex;
    align-items: center;
   
}
.map-sub-menu li input{
  /*  flex-shrink: 0;  Prevent the checkbox from shrinking */
    margin-left:60px;
}

.map-dropdown-btn {
    width:100%;
    text-align: left;
    background: none;
    border: none;
    font: inherit;
    cursor: pointer;
}

#map-sidebar svg{
    flex-shrink: 0;
    fill:var(--text-clr);
}
#map-toggle-btn svg{
    flex-shrink: 0;
    fill:var(--green-clr);
}
.map-sub-menu svg{
    margin-right:0.7rem;
}
#map-sidebar a span, #map-sidebar .map-dropdown-btn span{
    flex-grow: 1;
}
#map-sidebar a:hover, #map-sidebar .map-dropdown-btn:hover, .map-toggle-btn:hover{
    background-color: var(--hover-clr);
}
#map-sidebar .map-sub-menu{
    display:grid;
    grid-template-rows: 0fr;
    transition: 300ms ease-in-out;
    > div{
        overflow:hidden;
    }
}
#map-sidebar .map-sub-menu.map-show{
    grid-template-rows:1fr;
}
.map-rotate svg:last-child{
    rotate:180deg;
}
.map-dropdown-btn svg{
    transition: 200ms ease;
}
/*
#map-sidebar .map-sub-menu {
    padding-left: 1em;
}
    */
#map-sidebar .map-sub-menu svg:hover {
    cursor:pointer;
}
#map-toggle-btn{
    margin-left:auto;
    padding:.5em;
    border:none;
   /* border-radius: .5em;*/
    background:none;
    cursor: pointer;

    svg{
        transition: rotate 150ms ease;
    }
}
#map-toggle-btn:hover{
    background-color: var(--hover-clr);
}
 .map-filter-group {
        font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
        font-weight: 600;
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 1;
        border-radius: 3px;
        width: 120px;
        color: #fff;
    }

    .map-filter-group input[type='checkbox']:first-child + label {
        border-radius: 3px 3px 0 0;
    }

    .map-filter-group label:last-child {
        border-radius: 0 0 3px 3px;
        border: none;
    }

    .map-filter-group input[type='checkbox'] {
        display: none;
    }

    .map-filter-group input[type='checkbox'] + label {
        background-color: #3386c0;
        display: block;
        cursor: pointer;
        padding: 10px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.25);
    }

    .map-filter-group input[type='checkbox'] + label {
        background-color: #3386c0;
        text-transform: capitalize;
    }

    .map-filter-group input[type='checkbox'] + label:hover,
    .map-filter-group input[type='checkbox']:checked + label {
        background-color: #4ea0da;
    }

    .map-filter-group input[type='checkbox']:checked + label:before {
        content: '✔';
        margin-right: 5px;
    }


.map-maplibregl-popup {
    background: none;
    
}
.maplibregl-popup{
    max-width: 360px !important;

}

.map-maplibregl-popup-content {
    background-color: white;    /* Or whatever suits your theme */
    opacity: 1 !important;
    color: black;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    border-radius: 4px;
}
/* 

.sidebar {
    width: 250px;
    height: 100%;
    background-color: #333;
    color: white;
    position: fixed;
    left: -250px; 
    transition: left 0.3s ease; 
}

.sidebar.open {
    left: 0; 
}

.main-content {
    margin-left: 20px; 
}

#toggle-button {
    margin: 20px;
} */


#chk-accessible-washrooms {
    width:1.125rem;
    height:1.125rem;
    opacity:1;
    position:static;
}
#chk-washrooms {
    width:1.125rem;;
    height:1.125rem;;
    opacity:1;
    position:static;
}
#chk-inclusive-washrooms {
    width:1.125rem;;
    height:1.125rem;;
    opacity:1;
    position:static;
}
.chk-avoid {
    width:1.125rem !important;
    height:1.125rem !important;
    opacity:1 !important;
    position:static !important;
}

.chk-label {
    margin-left:8px;
    font-size: 0.8em;
    color: var(--secondary-text-clr);
    display:inline !important;
    /*display:flex;
    align-items:center;*/
}

/* ::::::::::::: SUBMENU :::::::::::::::::::*/
.sidebar { width: 250px; font-family: system-ui, sans-serif; }
.menu,
.submenu { list-style: none; margin: 0; padding: 0; margin-bottom: 1rem;}

.menu-link,
.menu-toggle,
.submenu-item a {
  display: flex;
  width: 100%;
  padding: 0.5rem 0.5rem 0.5rem 0.5rem;
  text-align: left;
  border: none;
  background: none;
  font-size: 1rem;
  color: #333;
  text-decoration: none;
  align-items: center;
}

/* Hover / focus ---------------------------------------------------------- */
.menu-link:hover,
.menu-toggle:hover,
.submenu-item a:hover,
.menu-link:focus,
.menu-toggle:focus,
.submenu-item a:focus {
  background: #285db1;/* #f0f0f0;*/
  outline: none;
}

/* Chevron --------------------------------------------------------------- */
.chevron {
  float: right;
  width: 0.6rem;
  height: 0.6rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-top: 0.3rem;
  transition: transform 0.2s ease;
  margin-left: auto;
}

/* Rotated when submenu is open */
.menu-toggle[aria-expanded="true"] .chevron {
  transform: rotate(-135deg);
}

/* Submenu --------------------------------------------------------------- */
.submenu {
  overflow: hidden;
  max-height: 0;               /* hidden state */
  transition: max-height 0.3s ease;
}

/* Open state – set a sufficiently large max‑height */
.submenu.open {
  max-height: 20rem;           /* enough for typical content */
}

/* Optional: indent submenu items */
.submenu-item a { padding-left: 2rem; }

.menu-link, .menu-toggle span {
    color: var(--text-clr);
    font-size: 0.8em;
}

.rotating {
        animation: rotate 1s linear infinite;
        transform-origin: center;
    }

    @keyframes rotate {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    }

bounce-button {
            padding: 15px 30px;
            font-size: 20px;
            color: white;
            background-color: #007BFF;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            animation: bounce 1s infinite;
        }

        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% {
                transform: translateY(0);
            }
            40% {
                transform: translateY(-15px);
            }
            60% {
                transform: translateY(-7px);
            }
        }