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}

#qth-wrapper {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    font-size: 16px;
    color: #ccc;
    font-family: sans-serif;
    font-weight: normal;
}
#qth-input {
    width: 65px;
    background: #444;
    color: #ccc;
    border: 1px solid #999;
    border-radius: 4px;
    padding: 3px 5px;
    text-transform: uppercase;
    text-align: center;
    font-size: 14px;
}
#qth-input::placeholder {
    color: #888;
    text-transform: none;
}
#qth-input:focus {
    outline: none;
    border-color: #fff;
}