/**
 *  CSS for RV Kronprins Haakon tracker display
 *  @author Ian Millard <hello@ianmillard.com>
 */

body, html { margin: 0; padding: 0; overflow: hidden; }
div#map { width: 100%; height: 100vh; }

div.svg-icon svg { overflow: visible; }
div.svg-icon div.boatdetails { display: none; min-width: 100px; max-width: 200px; text-align: center; font-size: 10px; margin: -40px 0 0 -50%; padding: 5px; border-radius: 5px; background: rgba(0,0,0,0.7); }
div.svg-icon.hover { z-index: 9998 !important; }

div#data { position: absolute; z-index: 9999; width: calc(100% - 60px); left: 50px; top: 10px; display: flex; align-items: flex-start; flex-wrap: wrap; }
div.box { border: 2px solid rgba(0,0,0,0.2); border-radius: 4px; margin-right: 10px; margin-bottom: 10px; padding: 10px;  float: left; background: white; }
div.box > span { color: #666; font-size: smaller; text-transform: uppercase; }
h1, h2, h3, h4 { margin: 0; }
h4 span { color: #666; font-size: small }

.hidden { display: none; }

/** adapt display for small screens  */
@media screen and (max-width: 640px) {
    div#data { border: 2px solid rgba(0,0,0,0.2); border-radius: 4px; background: white; }
    div.box { border: none; margin: 0; padding: 5px 0; }
    div.box > span { display: none; }
    div.box h4 { text-align: center; }
    div.box.top { width: 50% }
    div.box.second { float: left; width: 100% }
}