body,html{margin:0;padding:0;height:100%;width:100%;background:#333;overflow:hidden;display:flex;flex-direction:column}h1{text-align:center;color:#ccc;margin:0;padding:10px;font-family:sans-serif}#map{display:flex;flex:1;border:5px solid #999;border-radius:15px;background:#404040;overflow:hidden}#dx-list,#map{box-sizing:border-box}#dx-list{flex:0 0 250px;overflow-y:auto;background:#444;color:#d9d9d9;padding:10px;border-right:1px solid #999}#dx-list ul{list-style-type:none;padding:0;margin:0}#dx-list li{cursor:pointer;margin-bottom:10px;padding:5px;border-radius:5px}#dx-list li:hover{background:#555}#map-container{flex:1;position:relative}svg{width:100%;height:100%;display:block}.water{fill:#e3f3f0}.country{fill:#ccc;stroke:#fff;stroke-width:.5px}.country.antarctica{fill:#fff}.marker{fill:red}.marker,.user-marker{stroke:#fff;stroke-width:2px}.user-marker{fill:#00f}.gc-line{fill:none;stroke:#737373;stroke-width:1.2px;opacity:.55}.callsign{font-size:15px}.azimuth,.callsign,.dist-km{font-family:sans-serif;fill:#000;text-anchor:middle;pointer-events:none}.azimuth,.dist-km{font-size:14px}#zoom-controls{position:absolute;top:10px;right:10px;display:flex;flex-direction:column}#zoom-controls button{width:30px;height:30px;font-size:24px;line-height:1;background-color:hsla(0,0%,100%,.8);border:1px solid #999;border-radius:4px;cursor:pointer;margin-bottom:5px}#zoom-controls button:hover{background-color:#fff}.terminator{fill:#000;opacity:.1;stroke:#999;stroke-width:.5px}.sun{pointer-events:none}.solar-text{fill:#ccc}.solar-text,.utc-text{font-size:14px;font-family:sans-serif}.utc-text{fill:#ccc}