@font-face {
    font-family: Dosis;
    src: url('../font/dosis-v1.7/Dosis-Medium.ttf');
}

body {
    background-color: #cbdff0;
    margin: 0;
    padding: 0.2cm;
    font-family: Dosis, sans-serif;
    font-size: 0.6cm;
}

h1 {
    margin: 0.2cm;
    padding: 0.1cm;
    font-size: 1.0cm;
    background-image: url("/image/flag_caithness.svg");
    background-position-x:right;
    background-size:contain;
    background-repeat: no-repeat;
}

hr {
    border: none;
    height: 0.05cm;
    background-color: #e8e8f0;
    border-radius: 0.025cm;
    margin: 0.1cm 0.4cm;
}

input[type=range] {
    -webkit-appearance: none;
    margin-bottom: 0.8cm;
    width: 98%;
    height: 0.2cm;
    background: #cbdff0;
    outline: none;
    border-radius: 0.1cm;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 0.8cm;
    height: 0.6cm;
    border: 0.1cm solid #0067c6;
    border-radius: 0.2cm;
    background: white;
    /*cursor: pointer;*/
}

input[type=range]::-moz-range-thumb {
    width: 0.8cm;
    height: 0.6cm;
    background: #0067c6;
    /*cursor: pointer;*/
}

.widthFull {
    width: 100%;
}

.width25 {
    width: 25%;
}

.width33 {
    width: 33%;
}

.width50 {
    width: 50%;
}

.widgetFlexBox {
    display: flex;
    flex-direction: row;
}

.widget {
    flex: 100%;
    margin: 0.1cm;
    padding: 0.1cm;
    background-color: white;
    border-radius: 0.2cm;
    box-shadow: 0.1cm 0.1cm 0.2cm rgba(0, 0, 0, 0.5);
}

#oldDataWarningWidget {
    background-color: #fff080;
}

#oldDataWarning {
    margin: 0.2cm;
    font-weight: bold;
}

#imageBox {
    margin: 0;
    padding: 0;
    width: 100%;
}

#camImage {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#camImageControlWrapper {
    margin: 0.4cm 0;
    text-align: center;
}

.camImageControl {
    margin-left: 0.8cm;
    font-size: 0.8cm;
    font-weight: bold;
    color: #a0a0a0;
}
.camImageControl:hover {
    cursor: pointer;
    color: black;
}
.camImageControl.selected {
    color: black;
}

.camImageControl.selected #liveSymbol {
    color: #e00000;
}

#settingsIntervalGrid {
    display: grid;
    grid-template-columns: auto auto auto auto;
    align-items: center;
    text-align: center;
    margin: 0.2cm 0;
}

.intervalSelector {
    color: #a0a0a0;
}
.intervalSelector:hover {
    cursor: pointer;
    color: black;
}
.intervalSelector.selected {
    color: black;
}

#gaugeGrid {
    display: grid;
    grid-template-columns: 20% 30% 20% 30%;
    grid-template-rows: 2.8cm 2.8cm 2.8cm 1cm;
    align-items: center;
}

.gaugeGridItemIcon {
    text-align: center;
}

.gaugeGridItemIcon img {
    width: 1.8cm;
    height: 1.8cm;
}

.gaugeGridItemLabel {
    text-align: left;
    padding: 0.4cm;
    font-size: 1.0cm;
}

.gaugeGridItemTime {
    grid-column-start: 1;
    grid-column-end: 5;
    text-align: center;
}

#currentWindSpeedGrid {
    display: inline-grid;
    grid-column-gap: 0.2cm;
    align-items: center;
}

#currentWindSpeed {
    text-align: right;
    grid-column: 1;
    grid-row: 1;
}

#currentWindGusts {
    text-align: right;
    grid-column: 1;
    grid-row: 2;
    color: #808080;
}

#currentWindSpeedUnit {
    grid-column: 2;
    grid-row-start: 1;
    grid-row-end: 3;
}

#currentWindSpeedBeaufortNumber {
    font-size: 1.8cm;
}

.chart {
    width: 100%;
    height: 12cm;
}

.chartLegend {
    display: grid;
    grid-template-columns: 4.8cm auto;
    margin: 0.4cm;
    align-content: center;
}

.chartValues {
    grid-column: 1;
    align-self: center;
    display: grid;
    grid-template-columns: 2.0cm auto auto;
}

.chartIco {
    grid-column: 1;
    grid-row-start: 1;
    grid-row-end: 4;
    width: 1.6cm;
    height: 1.6cm;
    align-self: center;
}

.chartValuesMin {
    grid-row: 1;
}
.chartValuesAvg {
    grid-row: 2;
}
.chartValuesMax {
    grid-row: 3;
}

.chartValuesLabel {
    grid-column: 2;
    font-size: 0.5cm;
}

.chartValuesValue {
    grid-column: 3;
    font-size: 0.5cm;
    text-align: right;
}

.chartUnits {
    grid-column: 3;
    text-align: right;
    align-self: center;
}

.unitSelector {
    display: inline-flex;
    margin-left: 0.4cm;
    font-size: 0.8cm;
    color: #a0a0a0;
}
.unitSelector:hover {
    cursor: pointer;
    color: black;
}
.unitSelector.selected {
    color: black;
}

#footer {
    margin: 0.4cm;
    color: #808080;
    font-size: 0.3cm;
}

#footerLeft {
    float: left;
}

#footerRight {
    text-align: right;
}

#footer a {
    text-decoration: none;
    color: #404040;
}
#footer a:hover {
    text-decoration: underline;
}

@media screen and (min-width: 32cm) {
    #page {
        width: 32cm;
        margin: 0 auto;
    }
}

@media screen and (max-width: 24cm) {

    body {
        padding: 0;
        font-size: 0.5cm;
    }

    h1 {
        font-size: 0.8cm;
    }

    .widgetFlexBox {
        display: block;
    }

    .widget {
        border-radius: 0;
        box-shadow: none;
    }

    .camImageControl {
        margin-left: 0.8cm;
        font-size: 0.8cm;
    }

    #gaugeGrid {
        grid-template-rows: 2.4cm 2.4cm 2.4cm 0.8cm;
    }

    .gaugeGridItemIcon img {
        width: 1.4cm;
        height: 1.4cm;
    }

    .gaugeGridItemLabel {
        font-size: 0.6cm;
    }

    #currentWindSpeedBeaufortNumber {
        font-size: 1.4cm;
    }

    .chart {
        height: 10cm;
    }

    .chartLegend {
        grid-template-columns: 4.8cm auto;
    }

    .chartValues {
        grid-template-columns: 1.8cm auto auto;
    }

    .chartIco {
        width: 1.4cm;
        height: 1.4cm;
    }

    .chartValuesLabel, .chartValuesValue {
        font-size: 0.5cm;
    }

    .unitSelector {
        margin-left: 0.4cm;
        font-size: 0.8cm;
    }

    @media (max-width: 16cm) {

        body {
            font-size: 0.4cm;
        }

        h1 {
            font-size: 0.6cm;
        }

        .camImageControl {
            margin-left: 0.6cm;
            font-size: 0.7cm;
        }

        #gaugeGrid {
            grid-template-rows: 2.0cm 2.0cm 2.0cm 0.8cm;
        }

        .gaugeGridItemIcon img {
            width: 1.0cm;
            height: 1.0cm;
        }

        .gaugeGridItemLabel {
            font-size: 0.5cm;
        }

        #currentWindSpeedBeaufortNumber {
            font-size: 1.0cm;
        }

        .chart {
            height: 8cm;
        }

        .chartLegend {
            grid-template-columns: 4.4cm auto;
        }

        .chartValues {
            grid-template-columns: 1.6cm auto auto;
        }

        .chartIco {
            width: 1.0cm;
            height: 1.0cm;
        }

        .chartValuesLabel, .chartValuesValue {
            font-size: 0.5cm;
        }

        .unitSelector {
            margin-left: 0.4cm;
            font-size: 0.7cm;
        }

        @media (max-width: 12cm) {

            body {
                font-size: 0.3cm;
            }

            h1 {
                font-size: 0.5cm;
            }

            .camImageControl {
                margin-left: 0.4cm;
                font-size: 0.5cm;
            }

            #gaugeGrid {
                grid-template-rows: 1.6cm 1.6cm 1.6cm 0.6cm;
            }

            .gaugeGridItemIcon img {
                width: 0.6cm;
                height: 0.6cm;
            }

            .gaugeGridItemLabel {
                font-size: 0.4cm;
            }

            #currentWindSpeedBeaufortNumber {
                font-size: 0.6cm;
            }

            .chart {
                height: 6cm;
            }

            .chartLegend {
                grid-template-columns: 2.6cm auto;
            }

            .chartValues {
                grid-template-columns: 0.8cm auto auto;
            }

            .chartIco {
                width: 0.6cm;
                height: 0.6cm;
            }

            .chartValuesLabel, .chartValuesValue {
                font-size: 0.3cm;
            }

            .unitSelector {
                margin-left: 0.4cm;
                font-size: 0.5cm;
            }

        }

    }

}