/* map.css */

/* Always set the map height explicitly to define the size of the div element that contains the map. */
    #map {
    height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

.menu-icon-bar1, .menu-icon-bar2, .menu-icon-bar3 {
    width: 25px;
    height: 3px;
    background-color: #6f6f6f;
    margin: 4px 0;
    transition: 0.4s;
}

/* toggle icon between hamburger and X */
.change-icon .menu-icon-bar1 { transform: translate(0, 7px) rotate(-45deg); }
.change-icon .menu-icon-bar2 { opacity: 0; }
.change-icon .menu-icon-bar3 { transform: translate(0,-7px) rotate( 45deg); }

.menu {
    background-color: white;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 2px 6px rgba(0,0,0,.2);
    margin: 10px;
    font-family: 'Roboto', 'sans-serif';
    font-size: 0.9rem;
    line-height: 1.4rem;
    user-select: none;
    cursor: pointer;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 99;
    display: inline-block;
    width: fit-content;
}

#menu-key {
    position: relative;
    cursor: help;
}

.menu-key-text {
    display:inline-block;
}

#menu-logo {

    position: absolute;
    bottom: 0;
    right: 0;
    margin: 5px;
}

#menu-logo img {
    width: 64px;
}

.trail-key {
    width:  32px;
    height: 6px;
    margin: 2px 8px 2px 0;	
    display: inline-block;
    background-color: #000;
}

.dotted {
    background-image: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 0%);
    background-position: center; /* Position at the bottom of the div */
    background-size: 8px 2px; /* Controls dot size and spacing */
    background-repeat: repeat-x; /* Repeats horizontally */
}

#menu-bikeshare, #menu-projects, #menu-poi, #menu-baselayer, #menu-key {
    padding-top: 8px;
}

#menu-bikeshare div {
  display: flex;        
  align-items: center; 
  padding-left: 10px;
}

#map-location-control {
    background-color:   #fff;
    border:             none;
    outline:            none;
	width:              38px;
	height:             38px;
	border-radius:      2px;
	box-shadow:         0 1px 4px rgba(0,0,0,0.3);
	cursor:             pointer;
	margin-right:       10px;
	padding:            0px;
}

#map-location-img {
    margin:             10px;
    width:              18px;
    height:             18px;
    background-image:   url(https://maps.gstatic.com/tactile/mylocation/mylocation-sprite-1x.png);
    background-size:    180px 18px;
    background-position:0px 0px;
    background-repeat:  no-repeat;
}

.info-window-icon {
    float: right;
    padding-left: 10px;
}

/* menu adjustments for phone in landscape mode */
@media (max-height: 400px) {
    .menu {
      font-size: 0.8rem;
      margin: 5px;
    }
    #menu-contents {
      max-height: 90vh;
      overflow-y: scroll;
    }
    #menu-projects, #menu-baselayer, #menu-key {
        display: none;
    }
 }