body{
    margin:0;
    padding:0;
    font-family:'Open Sans', Helvetica, Arial, sans-serif;
    display:flex;
    flex-direction:column;
    min-height:100vh;
    background-image:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZlcnNpb249JzEuMScgd2lkdGg9JzMwMCcgaGVpZ2h0PSczMDAnPgoJPGRlZnM+CgkJPGZpbHRlciBjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM9J3NSR0InIGlkPSdmaWx0ZXIzMDAxJz4KCQkJPGZlVHVyYnVsZW5jZSB0eXBlPSdmcmFjdGFsTm9pc2UnIGJhc2VGcmVxdWVuY3k9JzEwMCAuODUnIG51bU9jdGF2ZXM9JzEnLz4KCQk8L2ZpbHRlcj4KCTwvZGVmcz4KCTxyZWN0IGhlaWdodD0nMjAwJScgd2lkdGg9JzIwMCUnIHN0eWxlPSdmaWx0ZXI6dXJsKCNmaWx0ZXIzMDAxKScgLz4KCTxyZWN0IGhlaWdodD0nMjAwJScgd2lkdGg9JzIwMCUnIHN0eWxlPSdmaWxsOiNmZmZmZmY7ZmlsbC1vcGFjaXR5OjAuNzU7Jy8+Cjwvc3ZnPg==');
}

#bar-graph-container{
    flex-grow:1;
    position:relative;
    display:flex;
    flex-direction:column;
}

#bar-graph-note{
    opacity:0;
    font-size:20pt;
    text-align:center;
    transition:opacity 500ms;
    position:absolute;
    top:calc(60px + 33.33%);
    padding:0 30px;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    width:100%;
    z-index:-1;
}
#bar-graph-note.visible{opacity:1;z-index:3}

#bar-content-container{
    display:flex;
    width:100%;
    flex-grow:1;
    cursor:default;
    justify-content:center;
}

.bar-content-container{
    flex:1 1 0;
    display:flex;
    flex-direction:column;
    margin:10px 4px;
    min-width:0;
    max-width:200px;
}

.bar-info-container{
    text-align:center;
    height:40px;
    opacity:0;
    transition:opacity 500ms;
}
.bar-info-container.visible{ opacity: 1 }

.bar-score-container{
    white-space:nowrap;
}

.bar-score-container div{
    display:inline-block;
    vertical-align:middle;
}

.bar-score-icon{
    width:16px;
    height:16px;
    margin:0 2px 0 -6px;
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center;
}

.bar-score-icon.disqualified{
    margin:0;
}

.bar-score{
    font-weight:700;
}

.bar-name{
    font-size:8pt;
    letter-spacing: -0.7px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.bar-container{
    flex-grow:1;
    margin-top:10px;
    position:relative;
}

.bar{
    cursor:pointer;
    height:0;
    width:0;
    background-size: 100% auto;
    border: 1px solid black;
    border-radius: 2px;
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
    position:absolute;
    transition:width 500ms, height 500ms, background-image 500ms;
}

#interface-container{
    position:absolute;
    z-index:2;
    width:260px;
    height:150px;
    padding:20px;
    bottom:30px;
    right:20px;
    display:flex;
    flex-direction:column;
    cursor:default;
}

#title-container{
    font-weight:bold;
    text-align:center;
    padding:10px 0;
}

#title{
    font-size:20pt;
}

#nav-container{
    display:flex;
    position:relative;
    flex:0 0 60px;
    cursor:default;
}

#nav-country-container{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    display:flex;
    font-weight:bold;
    align-items:center;
    justify-content:center;
    background:linear-gradient(90deg, rgba(255,255,255,0.5) 0%, rgba(246,253,255,0.5) 100%);
    opacity:0;
    pointer-events:none;
    z-index:-1;
    transition:opacity 500ms;
}
#nav-container.show-country #nav-country-container{
    opacity:1;
    pointer-events:auto;
    z-index:2;
}

#nav-country-label{
    padding:0 10px;
}

#nav-country-close{
    font-size:0;
    width:15px;
    padding:15px 10px;
    cursor:pointer;
}

.nav-arrow{
    flex:0 0 40px;
    margin:0 10px;
    position:relative;
    color:grey;
    transition:color 400ms;
}
.nav-arrow.active{
    cursor:pointer;
    color:black;
}

.nav-arrow:before{
    text-align:center;
    position:absolute;
    width:100%;
    height:100%;
    line-height:60px;
}
#nav-left-arrow:before{content:"\25C0\FE0E"}
#nav-right-arrow:before{content:"\25b6\FE0E"}

#nav-select-container{
    position:relative;
    flex-grow:1;
    opacity:1;
    transition:opacity 500ms;
}

#nav-container.show-country .nav-arrow, #nav-container.show-country #nav-select-container{
    opacity:0;
    pointer-events:none;
}

#nav-select{
    position:absolute;
    width:100%;
    height:100%;
    opacity:0;
    cursor:pointer;
    -moz-appearance:none;
    -webkit-appearance:none;
    appearance:none;
    border-radius:0;
}

#nav-select-label{
    position:absolute;
    width:100%;
    height:100%;
    z-index:0;
    text-align:center;
    font-weight:bold;
    line-height:60px;
    -webkit-user-select:none;
    user-select:none;
    pointer-events:none;
}

#live-container{
    display:flex;
    align-items:center;
    position:relative;
    font-weight:bold;
    opacity:0;
    cursor:default;
    pointer-events:none;
    transition:opacity 500ms;
}

#live-container.visible{ opacity: 1; pointer-events:auto }

#live-icon{
    width:40px;
    height:20px;
    margin:0 10px;
    position:absolute;
    left:0;
    animation:rotate 10s;
    animation-iteration-count:infinite;
    animation-timing-function:linear;
    animation-play-state:paused;
}

#live-container.visible #live-icon{
    animation-play-state:running;
}

#live-label{
    flex-grow:1;
    text-align:center;
}

@keyframes rotate{
    0%{ transform: rotate(0deg); opacity: 0 }
    15%{ transform: rotate(360deg); opacity: 1 }
    30%{ transform: rotate(720deg); opacity: 1 }
    45%{ transform: rotate(1080deg); opacity:1 }
    60%{ transform: rotate(1440deg); opacity:0 }
    61%{ transform: rotate(0deg); opacity:0 }
    100%{ transform: rotate(0deg); opacity:0 }
}

@media screen and (max-width: 1000px){
    #bar-content-container{
        flex-direction:column;
        padding:10px 0 30px 0;
    }

    #bar-graph-note{
        position:static;
        padding:0;
        overflow:hidden;
        height:0;
    }
    #bar-graph-note.visible{
        height:auto;
        padding:30px;
    }

    .bar-content-container{
        flex-direction:row;
        max-width:unset;
        margin:4px;
        flex:0 0 40px;
        padding:0 env(safe-area-inset-right,0) 0 env(safe-area-inset-left,0);
    }

    .bar-info-container{
        width:60px;
    }

    .bar-container{
        margin:0 10px;
    }

    .bar{
        background-size:auto 100%;
        height:100% !important;
    }
    
    .bar[data-flag="BIH"]{background-image:url(/eurovision/assets/images/BIH-col.png) !important}

    #interface-container{
        position:static;
        width:unset;
    }
}
@media screen and (min-width:1001px){
    .bar{ width:100% !important }
}

@media screen and (prefers-color-scheme: dark){
    header{ --bg: #000 !important; --color: #fff !important}
    header #header-logo-container img{ filter:invert(1) }

    body{
        background-image:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZlcnNpb249JzEuMScgd2lkdGg9JzMwMCcgaGVpZ2h0PSczMDAnPgoJPGRlZnM+CgkJPGZpbHRlciBjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM9J3NSR0InIGlkPSdmaWx0ZXIzMDAxJz4KCQkJPGZlVHVyYnVsZW5jZSB0eXBlPSdmcmFjdGFsTm9pc2UnIGJhc2VGcmVxdWVuY3k9JzEwMCAuODUnIG51bU9jdGF2ZXM9JzEnLz4KCQk8L2ZpbHRlcj4KCTwvZGVmcz4KCTxyZWN0IGhlaWdodD0nMjAwJScgd2lkdGg9JzIwMCUnIHN0eWxlPSdmaWx0ZXI6dXJsKCNmaWx0ZXIzMDAxKScgLz4KCTxyZWN0IGhlaWdodD0nMjAwJScgd2lkdGg9JzIwMCUnIHN0eWxlPSdmaWxsOiMwMDA7ZmlsbC1vcGFjaXR5OjAuNzU7Jy8+Cjwvc3ZnPg==');
    }
    *{ color:rgb(253,253,253) }

    .nav-arrow{
        color:rgb(100,100,100);
    }
    .nav-arrow.active{
        color:rgb(253,253,253);
    }

    #nav-country-container{
        background:linear-gradient(90deg, rgba(0,0,0,0.5) 0%, rgba(9,2,0,0.5) 100%);
    }

    #nav-country-close svg, #live-icon svg{fill: rgb(253,253,253)}

    .bar-score-icon.disqualified{
        filter:invert(1);
    }
}