html, body{ height: 100%; width: 100%; } body { padding: 0; margin: 0; } html, p{ font-family: Calibri, Roboto, Arial,"Ubuntu Mono"; font-size: 1rem; } p{ font-size: 1.25rem; } #map { height: 70%; width: 100%; margin: 0; border: solid 2px; } .padded{ padding: 1rem; } #heading{ background: #000; color: #ddd; min-height: 5%; height:4rem; width: 100%; padding-left: 1em; } .icon{ width: 2rem !important; height: 2rem !important; display: inline-block; margin-right: 1rem; background: white; border-radius: 100%; padding: 0.25rem; margin-top: -0.5rem; float: left; } .title{ margin-right: 1em; line-height: 1.5rem; } h2{ font-weight: normal; } #success_load{ text-align: center; font-weight: 400; position: fixed; top: 1em; height: 3em; background: mediumseagreen; z-index: 100; width: 100vw; color: white; padding-right: 1em; display: block; box-sizing: border-box; line-height: 2em; } .could-be-visible{ transition: opacity 0.5s; } .hidden { opacity: 0; } .visible{ opacity: 1; } #overpass-api-controls { position: fixed; top: 8em; left: 4em; padding: 10px; background-color: rgb(255, 255, 255); z-index: 10; } #overpass-api-controls a { display: inline; } img.leaflet-marker-icon{ background: #fff; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; padding: 0.5rem; border: solid 1px #ccc; margin-left: -20px; margin-top: -20px; box-shadow: 0 0 0.5em green; } img.leaflet-marker-icon.tag-amenity_drinking_water{ box-shadow: 0 0 1em cornflowerblue; } img.leaflet-marker-icon.diet--vegetarian_yes{ border: solid 3px green; } #query-button, .edit-button{ background: #497cd3; padding: 0.5em; border-radius: 0.25em; color: white; border: solid 1px #497CD3FF; } #query-button:hover, .edit-button:hover{ background: #0d377b; border: solid 1px #08285c; cursor:pointer; } .edit-button{ margin-left: 1ch; } #query-button{ min-width: 10em; } .pull-left{ float:left; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(359deg); } } a{ color: #3388ff; } #spinning_icon{ position: fixed; top: 11rem; left: 3.5rem; z-index: 10; background: white; font-size: 2rem; } #spinning_icon svg{ position: fixed; top: 1.5rem; left: 0.8rem; background: white; border-radius: 100%; width: 3rem; height: 3rem; } #spinning_icon svg{ animation: spin 2s linear infinite; } #footer{ max-width: 70ch; margin: 0 auto; }