/* Mobile menu */

.liveTickerGrid {
    display: grid;
    grid-template-rows: 20px auto auto 20px 40px 40px auto auto 10px 400px auto;
    grid-template-columns: repeat(10, 10%);
    grid-row-gap: 0px;
    grid-column-gap: 0px;
    align-items: center; /* vertical */
    /*justify-items: via self-justify*/ /* horizontal */
}

.clock {
    display:none;
}

.imageLeft {
    grid-row: 2 / 3;
    grid-column: 1 / 4;
    justify-self: center;
}

.imageRight {
    grid-row: 2 / 3;
    grid-column: 8 / 11;
    justify-self: center;
}

.startPoint {
    grid-row: 3 / 4;
    grid-column: 1 / 4;
    justify-self: center;
    text-align: center;
    color: black;
    font-weight: bold;
}

.distance1 {
    grid-row: 2 / 4;
    grid-column: 5 / 7;
    text-align: center;
    font-size: 18px;
    color: black;
    font-weight: bold;
}

.endPoint {
    grid-row: 3 / 4;
    grid-column: 8 / 11;
    justify-self: center;
    text-align: center;
    color: black;
    font-weight: bold;
}

.distance2 {
    grid-row: 5 / 6;
    grid-column: 3 / 6;
    text-align: left;
    font-size: 18px;
    font-weight: bold;
}

.speed {
    grid-row: 5 / 6;
    grid-column: 6 / 9;
    text-align: right;
    font-size: 18px;
    font-weight: bold;
}

.speed2 {
    grid-row: 4 / 5;
    grid-column: 6 / 9;
    text-align: right;
    font-size: 18px;
    font-weight: bold;
}

.myCanvas {
    grid-row: 5 / 6;
    grid-column: 1 / 2;
    height: 30px;
    width: 30px;
    background-color: #bbb;
    display: inline-block;
}

.iconGPSSatPos {
    grid-row: 5 / 6;
    grid-column: 1 / 2;
    height: 2em;
    width: 2em;
    padding: 0px;
    background-color: lightgrey;
    justify-self: center;
    display: inline-block;
}

.iconSenderPos {
    grid-row: 6 / 7;
    grid-column: 1 / 2;
    height: 2em;
    width: 2em;
    padding: 0px;
    background-color: lightgrey;
    justify-self: center;
    display: inline-block;
}

.dot1 {
    grid-row: 6 / 7;
    grid-column: 2 / 3;
    height: 20px;
    width: 20px;
    background-color: #bbb;
    border-style: solid;
    border-color: lightgrey;
    border-radius: 50%;
    display: inline-block;
    justify-self: center;
}

.mapIcon {
    grid-row: 5 / 6;
    grid-column: 9 / 11;
    justify-self: center;
}

.progressOut {
    grid-row: 6 / 7;
    grid-column: 3 / 9;
    border: 1px solid black;
    background: lightgray;
    height: 20px;
    min-width: 100%;
    border-radius: 16px;
}

.progressIn {
    background: green;
    width: 0%;
    text-align: center;
    border-radius: 16px;
}

.tickerTextPosition {
    grid-row: 7 / 8;
    grid-column: 1 / 11;
    background: lightgray;
    padding: 3px;
    margin: 5px;
    width: 100%;
    justify-self: center;
    font-style: italic;
    border-radius: 10px;
}

.sponsorPosition {
    grid-row: 8 / 9;
    grid-column: 3 / 11;
    width: 100%;
    justify-self: center;
    margin: 2px;
}
.imageSponsor {
    display: contain;
    height: 70%;
    width: 70%;
    justify-self: center;
}

.mapPosition {
    grid-row: 10 / 11;
    grid-column: 1 / 11;
    width: 100%;
    height: 100%;
}

/* Desktop menu */
@media all and (min-width: 60em) {

    .liveTickerGrid {
        display: grid;
        border-style: solid;
        border-color: white;
        background-color: white;
        grid-template-rows: 2vh 40px 40px 4vh 40px 40px 100px auto auto;
        grid-template-columns: repeat(25, 4%);
        height: 80vh; /* 80% of complete vertical client area */
        grid-row-gap: 0px;
        grid-column-gap: 0px;
        align-items: center; /* vertical */
        /*justify-items: via self-justify*/ /* horizontal */
    }
    
    .clock {
        display: block;
        grid-row: 1 / 2;
        grid-column: 23 / 25;
        justify-self: right;
        color: grey;
    }

    .imageLeft {
        grid-row: 2 / 3;
        grid-column: 2 / 5;
        justify-self: center;
    }

    .imageRight {
        grid-row: 2 / 3;
        grid-column: 9 / 12;
        justify-self: center;
    }

    .startPoint {
        grid-row: 3 / 4;
        grid-column: 2 / 5;
        justify-self: center;
        text-align: center;
        color:black;
        font-weight:bold;
    }

    .distance1 {
        grid-row: 2 / 4;
        grid-column: 6 / 8;
        text-align: center;
        font-size: 25px;
        color:black;
        font-weight:bold;
    }

    .endPoint {
        grid-row: 3 / 4;
        grid-column: 9 / 12;
        justify-self: center;
        text-align: center;
        color:black;
        font-weight:bold;
    }

    .distance2 {
        grid-row: 5 / 6;
        grid-column: 4 / 7;
        text-align: left;
        font-size: 25px;
        font-weight: bold;
    }
    
    .speed {
        grid-row: 5 / 6;
        grid-column: 7 / 10;
        text-align: right;
        font-size: 25px;
        font-weight: bold;
    }

    .speed2 {
        display: block;
        grid-row: 4 / 5;
        grid-column: 7 / 10;
        text-align: right;
        font-size: 25px;
        font-weight: bold;
    }

    .myCanvas {
        grid-row: 5 / 6;
        grid-column: 2 / 3;
        height: 30px;
        width: 30px;
        background-color: #bbb;
        display: inline-block;
    }

    .iconGPSSatPos {
        grid-row: 5 / 6;
        grid-column: 2 / 3;
        height: 2em;
        width: 2em;
        padding: 2px;
        background-color: lightgrey;
        justify-self: center;
        display: inline-block;
    }
    .iconSenderPos {
        grid-row: 6 / 7;
        grid-column: 2 / 3;
        height: 2em;
        width: 2em;
        padding: 2px;
        background-color: lightgrey;
        justify-self: center;
        display: inline-block;
    }
    .dot1 {
        grid-row: 6 / 7;
        grid-column: 3 / 4;
        height: 20px;
        width: 20px;
        background-color: white;
        border-style: solid;
        border-color: lightgrey;
        border-radius: 50%;
        display: inline-block;
        justify-self: center;
    }

    .mapIcon {
        grid-row: 5 / 6;
        grid-column: 10 / 12;
        justify-self: center;
    }

    .progressOut {
        grid-row: 6 / 7;
        grid-column: 4 / 10;
        border: 1px solid black;
        background: lightgray;
        height: 20px;
        min-width: 100%;
        border-radius: 16px;
    }

    .progressIn {
        background: green;
        width: 0%;
        text-align: center;
        border-radius: 16px;
    }
    
    .tickerTextPosition {
        grid-row: 7 / 8;
        grid-column: 2 / 12;
        background: lightgray;
        padding: 3px;
        margin: 5px;
        width: 100%;
        justify-self: center;
        font-style: italic;
        border-radius: 10px;
    }

    .sponsorPosition {
        background: white;
        grid-row: 8 / 9;
        grid-column: 3 / 11;
        width: 100%;
        justify-self: center;
        margin: 2px;
    }
    .imageSponsor {
        display: contain;
        height: 90%;
        width: 90%;
        justify-self: center;
    }

    .mapPosition {
        display: contain;
        grid-row: 2 / 10;
        grid-column: 14 / 25;
        width: 100%;
        height: 100%;
    }
}

.w3-container,.w3-panel{padding:0.01em 16px}.w3-panel{margin-top:16px;margin-bottom:16px}
.w3-round-small{border-radius:2px}.w3-round,.w3-round-medium{border-radius:4px}.w3-round-large{border-radius:8px}.w3-round-xlarge{border-radius:16px}.w3-round-xxlarge{border-radius:32px}