@font-face {
    font-family: 'Noto Sans';
    src: url('../fonts2022/NotoSans/NotoSans-Regular.woff2'), url('../fonts2022/NotoSans/NotoSans-Regular.woff');
    font-weight: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Sans';
    src: url('../fonts2022//NotoSans/NotoSans-Light.woff2'), url('../fonts2022//NotoSans/NotoSans-Light.woff');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Sans';
    src: url('../fonts2022/NotoSans/NotoSans-Bold.woff2'), url('../fonts2022/NotoSans/NotoSans-Bold.woff');
    font-weight: bold;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Sans';
    src: url('../fonts2022/NotoSans/NotoSans-SemiBold.woff2'), url('../fonts2022/NotoSans/NotoSans-SemiBold.woff');
    font-weight: 600;
    font-display: swap;
}

body {
    margin: 0;
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px;
}

#container {
    background: #022539;
}

svg {
    width: 100%;
    height: 100%;
}

#filter {
    position: absolute;
    top: 0;
    left: 2rem;
    background: #fff;
}

    #filter h3 {
        background: #dc0023;
        color: #fff;
        font-weight: 300;
        font-size: 2rem;
        margin: 0;
        padding: .5rem 1rem;
        position: relative;
        cursor: pointer;
    }

        #filter h3:after,
        #filter h3:before {
            content: '';
            display: block;
            width: 2rem;
            height: .15rem;
            background: #fff;
            border-radius: .15rem;
            box-shadow: 0 -0.5rem 0px 0px #fff, 0 0.5rem 0px 0px #fff;
            position: absolute;
            right: 1rem;
            top: 50%;
        }

        #filter h3:before {
            width: .5rem;
            height: .5rem;
            transform: translateY(-50%);
            right: 1.4rem;
            box-shadow: -0.75rem -0.5rem 0px 0px #fff, -.75rem 0.5rem 0px 0px #fff;
            transition: 0.25s all 0s;
        }

        #filter h3:hover:before {
            box-shadow: 0.75rem -0.5rem 0px 0px #fff, 0.75rem 0.5rem 0px 0px #fff;
            right: 2.2rem;
        }

    #filter label[for="checkAll"] {
        margin-bottom: 1rem;
        font-weight: 700;
    }

    #filter > div {
        background: #fff;
        padding: 0 1rem;
        max-height: 0;
        transition: .25s all 0s;
        overflow: hidden;
    }

    #filter.open > div {
        max-height: 100vh;
    }

    #filter label {
        display: block;
        margin-bottom: .25rem;
        line-height: 1;
        cursor: pointer;
        position: relative;
    }

        #filter label:first-child {
            margin-top: 1.5rem;
        }

        #filter label:last-child {
            margin-bottom: 1.5rem;
        }

    #filter .iso {
        border-right: solid 1px;
        padding-right: .25rem;
        margin-right: .25rem;
        display: inline-block;
        width: 1.35rem;
    }

#controls {
    position: absolute;
    bottom: 2rem;
    right: 2rem;
    display: flex;
}

    #controls > div {
        display: flex;
        flex-direction: column;
    }

    #controls p {
        color: #fff;
        margin: auto 1rem 0 0;
        font-size: .9rem;
    }

    #controls button {
        border-radius: 0;
        border: 0;
        font-size: 2rem;
        padding: 0;
        font-weight: 700;
        width: 2rem;
        height: 2rem;
        background: #fff;
    }

        #controls button#zoomOut {
            background: #dc0023;
            color: #fff;
            line-height: 0;
        }

svg > g > g {
    transition: .5s opacity 0s;
}

.hidden {
    opacity: 0;
}

span.flag {
    display: inline-block;
    margin-left: .4rem;
    background: url('img2022/zeitstrahl/flags.png') #ddd;
    background-size: 200%;
    width: 1.5rem;
    height: 1rem;
    transform: translateY(.15rem);
}

    span.flag.CH {
        background-position: top 249px left;
    }

    span.flag.CN {
        background-position: top right;
    }

    span.flag.DE {
        background-position: top 78px left;
    }

    span.flag.FR {
        background-position: top 233px right;
    }

    span.flag.IN {
        background-position: top 172px right;
    }

    span.flag.IT {
        background-position: top 30px right;
    }

    span.flag.TK {
        background-position: top 62px right;
    }

    span.flag.UK {
        background-position: top 125px left;
    }

    span.flag.US {
        background-position: top 45px left;
        height: .9rem;
    }

    span.flag.CA {
        background-position: bottom left;
        height: .85rem;
    }

input[type="radio"] {
    visibility: hidden;
    position: absolute;
}

#filter label:before {
    display: inline-block;
    border: solid 1px;
    width: 15px;
    height: 15px;
    content: '';
    background: #fff;
    z-index: 1;
    transform: translate(0, 2px);
    margin-right: 0.25rem;
}

span.mark:after, span.mark:before {
    display: block;
    width: .2rem;
    height: 100%;
    background: #034c84;
    content: '';
    position: absolute;
    top: 3px;
    transform: translateX(-50%) rotate(45deg);
    transform-origin: center;
    left: 50%;
    border-radius: 3px;
}

span.mark {
    position: absolute;
    left: 1px;
    top: 0;
    width: 16px;
    height: 16px;
    opacity: 0;
    transition: .4s opacity 0s;
}

    span.mark:after {
        transform: translateX(-50%) rotate(-45deg);
    }

label:hover span.mark, input[type="radio"]:checked + span.mark {
    opacity: 1;
}