@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;
}

a {
    text-decoration: none;
}

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;
}

.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);
}

.selector {
    margin: 0 0.2cm;
    padding: 0.1cm 0.2cm;
    border-radius: 0.1cm;
    color: black;
}
.selector:hover {
    cursor: pointer;
    background: #cbdff0;
}
.selector.selected {
    background: #ffdb80;
}

.selector.unitSelector {
    margin: 0;
}

#pageSelectorGrid {
    display: grid;
    grid-template-columns: 50% 50%;
    /*grid-template-columns: 33% 33% 33%;*/
    align-items: center;
    text-align: center;
    margin: 0.2cm 0;
    font-weight: bold;
}

.pageSelectorItem img {
    display: inline-block;
    position: relative;
    top: 0.1em;
    height: 1em;
    width: auto;
}

.langSelectorWrapper {
    font-size: 0.4cm;
    font-weight: bold;
}
.langSelector.selected {
    color: black;
}
.langSelector:hover {
    cursor: pointer;
    color: black;
}

#oldDataWarningWidget {
    background-color: #fff080;
}

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

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

#footerLeft {
    float: left;
}

#footerRight {
    text-align: right;
}

#footer a {
    text-decoration: none;
    color: #202020;
}
#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;
    }

    .auroraImageTitle {
        margin: 0.4cm 0.7cm;
        font-size: 0.5cm;
    }

    .auroraImageButton {
        bottom: 0.4cm;
        width: 0.9cm;
        height: 0.9cm;
    }
    .auroraImageButtonPlay {
        right: 1.6cm;
    }
    .auroraImageButtonStop {
        right: 0.4cm;
    }

    @media (max-width: 16cm) {

        body {
            font-size: 0.4cm;
        }

        h1 {
            font-size: 0.6cm;
        }

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

        .auroraImageButton {
            bottom: 0.3cm;
            width: 0.8cm;
            height: 0.8cm;
        }
        .auroraImageButtonPlay {
            right: 1.2cm;
        }
        .auroraImageButtonStop {
            right: 0.3cm;
        }

        @media (max-width: 12cm) {

            body {
                font-size: 0.3cm;
            }

            h1 {
                font-size: 0.5cm;
            }

            .auroraImageTitle {
                margin: 0.2cm 0.4cm;
                font-size: 0.3cm;
            }

            .auroraImageButton {
                bottom: 0.2cm;
                width: 0.6cm;
                height: 0.6cm;
            }
            .auroraImageButtonPlay {
                right: 1.0cm;
            }
            .auroraImageButtonStop {
                right: 0.2cm;
            }

        }

    }

}