                 /* The popup bubble styling. */
                 .popup-bubble {
                     /* Position the bubble centred-above its parent. */
                     position: absolute;
                     top: 0;
                     left: 0;
                     transform: translate(-50%, -100%);
                     /* Style the bubble. */
                     background-color: white;
                     padding: 5px;
                     border-radius: 5px;
                     font-family: sans-serif;
                     overflow-y: auto;
                     max-height: 60px;
                     box-shadow: 0px 2px 10px 1px rgba(0, 0, 0, 0.5);
                 }

                 /* The parent of the bubble. A zero-height div at the top of the tip. */
                 .popup-bubble-anchor {
                     /* Position the div a fixed distance above the tip. */
                     position: absolute;
                     width: 100%;
                     bottom: 8px;
                     left: 0;
                 }

                 /* This element draws the tip. */
                 .popup-bubble-anchor::after {
                     content: "";
                     position: absolute;
                     top: 0;
                     left: 0;
                     /* Center the tip horizontally. */
                     transform: translate(-50%, 0);
                     /* The tip is a https://css-tricks.com/snippets/css/css-triangle/ */
                     width: 0;
                     height: 0;
                     /* The tip is 8px high, and 12px wide. */
                     border-left: 6px solid transparent;
                     border-right: 6px solid transparent;
                     border-top: 8px solid white;
                 }

                 /* JavaScript will position this div at the bottom of the popup tip. */
                 .popup-container {
                     cursor: auto;
                     height: 0;
                     position: absolute;
                     /* The max width of the info window. */
                     width: 200px;
                 }


                        .map-button-wrap {
                            margin: 10px;
                        }

                        .map-button {

                            background: rgb(255, 255, 255);
                            padding-box;
                            display: table-cell;
                            border: 0px none;
                            border-radius: 2px;
                            margin: 0px;
                            padding: 0px 10px;
                            text-transform: none;
                            appearance: none;
                            position: relative;
                            cursor: pointer;
                            user-select: none;
                            overflow: hidden;
                            text-align: center;
                            height: 40px;
                            max-height: 40px;
                            vertical-align: middle;
                            color: rgb(0, 0, 0);
                            font-family: Roboto, Arial, sans-serif;
                            font-size: 18px;
                            box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px;
                            min-width: 1em;
                            font-weight: 500;                            
                        }
                 
