/*@import url("https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.css");
@import url("https://api.mapbox.com/mapbox-gl-js/v1.11.1/mapbox-gl.css");
@import url("https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.css");*/
@import url("https://api.mapbox.com/mapbox-gl-js/v2.6.0/mapbox-gl.css");
@import url("animate.css?c=3");
@import url("/cdn/autocompleter/css/autocomplete.min.css");
@import url("map-fonts/map-icons.min.css");
@import url("fontawesome-5.0.13/css/fontawesome-all.min.css");


body{
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: none;
  position: fixed;
}

#map-canvas, #map-canvas div {

    /* android pull to refresh disable */
    touch-action: none;
    overscroll-behavior:none;
}


#map-canvas .search {
  z-index: 10;
  position: relative;
  /* android pull to refresh disable */
  touch-action: none;
  width: calc(100% - 20px);
  margin: 10px 0px 0px 10px;
}


div#map-canvas-details {
    z-index: 11;
    bottom: 0px;
    height: 0px;
    width: 99.9%;
    border: 1px solid #000;
    margin: 0px;
    background-color: #fff;
    font-size: 1em;
    padding: 0px 10px;
    overscroll-behavior-y: contain;
    touch-action: pan-up pan-down;
}

#map-canvas-details .directions {
    margin: 5px 0px;
    text-align:center;
}

#map-canvas-details .directions button, 
.popup-content .directions button{
    font-size: 28px;
    border-radius: 50%;
    border: 1px solid #ccc;
    width: 50px;
    height: 50px;
    padding: 10px;
    line-height: 20px;
    text-align:center;
    background-color: #fff;
    margin: 5px;
}


#map-canvas-details h2,
#map-canvas-details h3,
#map-canvas-details h4{
    margin-top:0px;
}
#map-canvas-details .detail-photo img{
    width: 100%;
    max-height: 200px;
    object-position: center;
    object-fit: cover;
}
#map-canvas-details .district{
    padding: 5px;
}
#map-canvas-details .district .central{
    background-color: #EDAA00;
}
#map-canvas-details .district .biomedical,
#map-canvas-details .district .health
{
    background-color: #CA006C;
    color: #fff;
}
#map-canvas-details .district .energy,
#map-canvas-details .district .technology-bridge
{
    background-color: #6D8D24;
    color: #fff;
}
#map-canvas-details .district .athletics{
    background-color: #CC0B2A;
    color: #fff;
}
#map-canvas-details .district .arts{
    background-color: #00837E;
    color: #fff;
}
#map-canvas-details .district .professional{
    background-color: #407CCA;
    color: #fff;
}
#map-canvas-details .district .cullen-north{
    background-color: #AB8367;
    color: #fff;
}
#map-canvas-details .district .residential{
    background-color: #712177;
    color: #fff;
}
#map-canvas .filter-icon {
    width: 25px;
    height: 25px;
    font-size: 16px;
    line-height: 25px;
    text-align:center;
    border-radius: 50%;
    border: 1px solid #000;
    background-color: #fff;
    color: #000;
}
#map-canvas .filter-icon a{
    color: #000;
}

#map-canvas .parking{
    width: 30px;
    height: 30px;
    font-size: 14px;
    line-height: 30px;
    text-align:center;
    display:inline-block;
}
#map-canvas .parking.student{
    border-radius: 50%;
    border: .1px solid #000;
    background-color: #fff;
}

#map-canvas .parking.ungated {
    border-radius: 50%;
    border: .1px solid #000;
    background-color: #fff;
}
#map-canvas .parking.gated {
    border-radius: 15%;
    border: .1px solid #000;
    background-color: #fff;
}

#map-canvas .parking.zonea {
    border-radius: 50%;
    border: .1px solid #000;
    background-color: #AB8367;
    color:#fff;
}
#map-canvas  .parking.zoneb {
    border-radius: 50%;
    border: .1px solid #000;
    background-color: #00837E;
    color: #fff;
}
#map-canvas .parking.zonec {
    border-radius: 50%;
    border: .1px solid #000;
    background-color: #407CCA;
    color:#fff;
}
#map-canvas .parking.zoned {
    border-radius: 50%;
    border: .1px solid #000;
    background-color: #CA006C;
    color:#fff;
}
#map-canvas .parking.zonee {
    border-radius: 50%;
    border: .1px solid #000;
    background-color: #712177;
    color: #fff;
}
#map-canvas .parking.zonef {
    border-radius: 50%;
    border: .1px solid #000;
    color: #fff;
    background-color: #CC0B2A;
}
#map-canvas .parking.zoneh {
    border-radius: 50%;
    border: .1px solid #6D8D24;
    color: #fff;
    background-color: #6D8D24;
}
#map-canvas .parking.zoneg {
    border-radius: 50%;
    border: .1px solid #CA006C;
    color: #fff;
    background-color: #CA006C;
}

#map-canvas-details .filters > div{
    cursor:pointer;
    padding: 10px;
    min-height: 100px;
    font-size: 14px;
}


#map-canvas-details .filters div.filter{
        text-align:center;
        margin: auto 0;
}

#map-canvas-details .filters div.filter i{
    font-size: 2em;

}
#map-canvas .marker .find{
    max-width: 100px;
    color: #fff;
    text-align:center;
}
/* mapbox overrides */

/* set the default marker color */
.mapboxgl-marker svg g[fill="#3FB1CE"]{
    fill:#c8102e !important;
}

mapboxgl-popup-content>div{
    padding: 15px 5px 0px 5px;
}
button.mapboxgl-popup-close-button{
  font-size: 20px;
}

/*
#map-canvas .mapboxgl-popup-content{
    background-color: #960c22;
    color: #fff;
}
#map-canvas .mapboxgl-popup-content a,
#map-canvas .mapboxgl-popup-content a:hover{
    color: #fff;
    text-decoration: underline;
}
#map-canvas .mapboxgl-popup-anchor-bottom  .mapboxgl-popup-tip{
    border-top-color: #960c22;

}

#map-canvas .mapboxgl-popup-anchor-left .mapboxgl-popup-tip{
    border-right-color: #960c22;
}

#map-canvas .mapboxgl-popup-content i,
#map-canvas .circle-icon{
    background-color: #fff;
    width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: 50%;
    color: #960c22;
    text-align: center;
    font-size: 20px;
    cursor:pointer;
}*/
/* START BTN-RIGHT css to help make the bottom right buttons conform to Marketings recommendation
---------------------------------------------------------------------------------------------------*/
#map-canvas .mapboxgl-ctrl.mapboxgl-ctrl-group{
    clear:none;
}

#map-canvas .navFilterIcon{
  background-image: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNy43MiAyNi4zMyI+PHRpdGxlPnRocmVlYmFycy0wMTwvdGl0bGU+PGxpbmUgeDE9IjguOCIgeTE9IjcuMTgiIHgyPSIxOS40IiB5Mj0iNy4xOCIgc3R5bGU9ImZpbGw6bm9uZTtzdHJva2U6IzAwMDtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoxMDtzdHJva2Utd2lkdGg6MnB4Ii8+PGxpbmUgeDE9IjguOCIgeTE9IjEzLjE4IiB4Mj0iMTkuNCIgeTI9IjEzLjE4IiBzdHlsZT0iZmlsbDpub25lO3N0cm9rZTojMDAwO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjEwO3N0cm9rZS13aWR0aDoycHgiLz48bGluZSB4MT0iOC44IiB5MT0iMTkuMTgiIHgyPSIxOS40IiB5Mj0iMTkuMTgiIHN0eWxlPSJmaWxsOm5vbmU7c3Ryb2tlOiMwMDA7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MTA7c3Ryb2tlLXdpZHRoOjJweCIvPjwvc3ZnPg==);

}
#map-canvas .mapboxgl-ctrl-bottom-right div.mapboxgl-ctrl.mapboxgl-ctrl-attrib{
    display:block;
    float:none;
}
#map-canvas .mapboxgl-ctrl-bottom-right div.mapboxgl-ctrl.mapboxgl-ctrl-attrib.mapboxgl-compact{
    display:inline-block;
    vertical-align: bottom;
    width: 20px;
}

.mapboxgl-ctrl-bottom-right > .mapboxgl-ctrl-attrib.mapboxgl-compact-show{
    width: auto !important;
}


#map-canvas .mapboxgl-ctrl-bottom-right{
    text-align:right;
}

#map-canvas .mapboxgl-ctrl-group{
    border-radius: 50%;
    padding: 5px;
    margin:5px;
    line-height: 20px;
    display:inline-block;
    float:none;
}
#map-canvas .mapboxgl-ctrl-icon{
    border-radius: 50%;
}
.details .minus{width:auto;height:40px;margin: -10px;}

/* END BTN-RIGHT */

/* START UH MODAL
------------------*/
.map-modal{
    display:none;
    position: absolute;
    z-index: 100;
    background-color: #000;
    opacity: 0.5;
}
.map-modal-area{
    /* position: absolute;
    display:none;
    padding: 10px;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%); */
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin: auto;
    width: 300px;
    height:200px;
    display: none;
    padding: 10px;
    overflow:auto;
    z-index: 101;
    background-color: #fff;
    min-width: 100px;

}
/* END UH MODAL */

/* START other icons
-----------------------*/

.icon{
    width: 28px;
    height: 28px;
    display:inline-block;
    margin:0 auto;
    color: #000;
}
.icon .icon-2x{
    width: 48px !important;
    height: 48px !important;
}
.icon .icon-3x{
    width: 96px !important;
    height: 96px !important;
}

.icon.food-truck{
    background: url(images/food-truck.svg);

}
.filter-icon .icon.food-truck{
    width: 15px;
    height: 15px;
}

.icon.staff-gated{
    background: url(images/gate.svg);
}
.icon.staff-ungated{
    background: url(images/staff-parking.svg);
}
.icon.tent{
    background: url(images/tent.svg);
}
.icon.wifi{
    background: url(images/wifi.svg);
    background-repeat: no-repeat;
    margin-top:3px;
}
.icon.placeholder{
    background: url(images/placeholder.svg);
}
.icon.finish-flag{
    background: url(images/finish-flag.svg);
}
.icon.start-flag{
    background: url(images/start-flag.svg);
}
.icon.map-start{
    background-color: #960c22;
    mask-image: url(images/map-start.svg);
    -webkit-mask-image: url(images/map-start.svg);
}
.icon.location-b{
    background-color: #960c22;
    mask-image: url(images/location-b.svg);
    -webkit-mask-image: url(images/location-b.svg);
}
.icon.three-horizontal-bars{
    background: url(images/three-horizontal-bars.svg);
}
.icon.man-walking-directions{
    background-color: #000;
    mask-image: url(images/man-walking-directions.svg);
    -webkit-mask-image: url(images/man-walking-directions.svg);
}
.icon.bus{
    background: url(images/bus.svg);
}
.icon.rail{
    background: url(images/rail.svg);
}
.icon.bluephones{
    background: url(images/phone-solid-blue.svg) no-repeat center;
}
.icon.bluephones.solid-black {
    background: url(images/phone-solid.svg) no-repeat center;
}
.filter-icon .icon.bluephones{
    width: 15px;
    height: 15px;
}


/* END other icons */

#map-canvas #garageCapacity{
  background-color: #fff9d9;
  padding: 10px;
}
#garageCapacity .heightFixed{
  height: 65px;
  overflow:hidden;

  display:table-cell;

}
#garageCapacity div.availableSpaces{
  color: #54585a;
  text-align:center;

  font-size: calc(30px + (60 - 30) * ((100vw - 300px) / (1600 - 300)));
}
#garageCapacity .outOf{
  color: #000;
  font-size: .8em;
}
#garageCapacity .progressBar{
  background-color: #ccc;
  padding: 2px;
  border-radius: 20px;
  width: 100%;
  height: 14px;
  margin-top: 25px;
  padding-right: 10px;
}
#garageCapacity .progressBarPercent{
  background-color: #54585a;
  border-radius: 20px;
  height: 10px;
}

/* overwrite mapbox trying to set the max width on popups */
#map-canvas .mapboxgl-popup{
    max-width:inherit !important;;
}

/* nav button fontawesome/html fix */
.navButtonCenterContent{
    float:left;
    display:flex;
    width: 100%;
    height: 100%;
    align-items:center;
    justify-content: center;
}