html, body { height: 100%; width: 100%; background: #ccc; } 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: 0.25rem !important; height: 0.25rem !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; } #overpass-api-controls { position: fixed; top: 0; right: 1em; padding: 10px; background-color: transparent; border: 0; z-index: 10; } #overpass-api-controls a { display: inline; } .has_output_of_irve_specified { box-shadow: 0 0 15rem darkred; } img.leaflet-marker-icon.tag-socket\:type2_yes { box-shadow: 0 0 0.5em cornflowerblue; border-color: cornflowerblue; border-width: 3px; } #query-button, .edit-button { background: #497cd3; padding: 0.5em 1em; border-radius: 2em; color: white !important; border: solid 1px #497cd3ff; float: right; } #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: #38f; } .leaflet-control-custom { padding: 1rem; background: white; } #spinning_icon { position: fixed; bottom: 11rem; left: 20.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; } .leaflet-popup-content { word-break: break-all; word-wrap: break-word; } .popup-content { overflow: auto; min-width: 10rem; max-width: 20rem; min-height: 5rem; max-height: 10rem; } .popup-key { min-width: 6rem; display: inline-block; } .popup-value { min-width: 10rem; max-width: 49%; text-align: right; display: inline-block; } .bottom-content { padding: 0 2rem 4rem; } #star { left: 10rem; } .color-indication { min-width: 1rem; max-width: 5rem; height: 1rem; padding: 1rem; border-radius: 2rem; display: block; position: relative; top: -2rem; color: white; text-shadow: 0 0 0.5rem #222; clear: right; } .no-data { border-left: 3px solid dodgerblue; padding: 1em 2rem; min-height: 4rem; } .no-data a { color: dodgerblue; } /** marqueurs */ .marker-demo { margin-right: 3rem; } .map-marker-circle-demo { border-radius: 100%; display: inline-block; width: 1rem; height: 1rem; background: #fff; } .color-unknown{ background: #c0b1b1; } .map-marker-circle-demo.color-1 { background: #36423d; } .color-power-lesser-than-50, .map-marker-circle-demo.color-2 { background: #4e8a8d; } .color-power-lesser-than-100, .map-marker-circle-demo.color-3 { background: #2999b3; } .color-power-lesser-than-200, .map-marker-circle-demo.color-4 { background: #1782dd; } .color-power-lesser-than-300, .map-marker-circle-demo.color-5 { background: #2900ff; } .color-power-lesser-than-max, .map-marker-circle-demo.color-6 { background: #8000ff; } #found_charging_stations{ margin-top: 2rem; } button{ cursor: pointer; padding: 0.5rem; } #bars_power{ margin: 1rem 0; height: 3rem; } .bar{ display: inline-block; height: 1em; text-align:right; padding:0.55rem; padding-right:0.25rem; float:left; /*background: grey;*/ /*border-right: 1px solid white;*/ }