* {
    -webkit-user-select: none;
    user-select: none;
}

html {
    height: 100%;
}
body {
    background: #0169b4;
    color: #fff;
    font-family: HelveticaNeue-Light, Helvetica, Arial, "Lucida Grande", sans-serif;
    font-size: 4.5em;
    height: 100%;
    padding-top: 59px;
    text-align: center;
    touch-action: none;
    width: 100%;
}

.flex-v {
    justify-content: center;
}

button {
    background-image: linear-gradient(to bottom, #000, #333);
    border: none;
    color: #fff;
}
button:disabled {
    color: dimgrey;
}

#spots {
    font-size: 4em;
}

#chart {
    padding: 30px 20px;
}
#chart > svg {
    border-bottom: 1px solid #aaa;
    height: 100%;
    width: 100%;
}
#chart > svg > g.history > path {
    fill: none;
    stroke: #aaa;
    stroke-width: 2;
}
#chart > svg > g.current > path {
    fill: none;
    stroke: #fffc;
    stroke-width: 2;
}

#connection {
    color: #a00;
}
#connection.connection-connected {
    color: #fff;
}

#notify {
}
#notify > img {
    width: 100px;
}
#notify.active {
}