.seriesResultRank{
    margin-left:1%;
    float: left;
    width: 10%;
}

.seriesTitle{
    float: left;
    width: 40%;
}

.onNetflix{
    float: left;
    width: 15%;
    text-align: left;
}

.detailsDropdown{
    float: right;
    text-align: right;
    margin-right: 1%;
    width: 20%;
    text-decoration: underline;
    font-style: italic;
}

/* #################### LEADERBOARDS ##################### */
.results-container{
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left:  auto;
    margin-right: auto;
    width: 98%;
    font-size: 200%;
    min-width: 900px;
    max-width: 1200px;
    margin-bottom: 50px; /* will otherwise unscollably overlap with footer */
    background-image: linear-gradient(white,#fa739d,#d17d97);
}

.colum-names{
    width: 98%;
    padding-left: 1%;
    padding-right: 1%;
    font-weight: bold;
    background-color: #FF6B6B;
    overflow: hidden;
}

.line-even{
    width: 98%;
    padding-left: 1%;
    padding-right: 1%;
    background-color: #999999; /* 60% grey */
    overflow: hidden;
    padding-top: 2px;
    padding-bottom: 2px;
}

.line-odd{
    width: 98%;
    padding-left: 1%;
    padding-right: 1%;
    background-color: lightgrey;
    overflow: hidden;
    padding-top: 2px;
    padding-bottom: 2px;
}

.line-even:hover{
    opacity: 0.75;
}
.line-odd:hover{
    opacity: 0.75;
}

.seriesDetailsContainer{
    height: 300px;
    width: 99%;
    /* background: darkcyan; */
    display: none;
}

.traffic-light{
    margin-top:  40px;
    margin-left: 30px;
    height: 190px;
    width:   90px;
    float: left;
    background-color: #333;
    border-color: #4f4442;
    border-width: thick;
    border-style: solid;
    border-radius: 10%;
}

.light{
    opacity: 0.1;
    height: 50px;
    width:  50px;
    border-radius: 50%;
    margin-left:  auto;
    margin-right: auto;
    margin-top:   10px;
}

.green{
    background: lawngreen;
}

.yellow{
    background: yellow;
}

.red{
    background: red;
}

.description{
    height: 40%;
    width:  70%;
    float: left;
    margin-left: 50px;
    margin-top:  10px;
    padding: 20px;
    font-size: 25px;
}

.warning{
    background-color: yellow;
    width:  70%;
    font-style: italic;
    float: left;
    margin-left: 50px;
    margin-top:  10px;
    padding: 5px;
    font-size: 25px;
}

@media(max-width: 800px){
    .results-container{
        font-size: 4.5vw;
        width: 100%;
        min-width: 300px;
    }

    .traffic-light{
        margin-top: 5%;
        margin-left: 5%;
        height: 65%;
        width:  15%;
    }

    .description{
        margin-left: 5%;
        width: 60%;
        font-size: 4.5vw;
    }

    .warning{
        margin-left: 5%;
        font-size: 4.5vw;
    }
    
    .colum-names{
        white-space: nowrap;
        overflow: hidden;
    }

    .seriesTitle{
        overflow: hidden;
        white-space: nowrap;
        /* write over games */
        z-index: 2;
    }

    .dropdownButton{
        text-align: left;
    }

    .seriesResultRank{
        width: unset;
        margin-right: 20px;
    }

    .onNetflix{
        /* 19% is just enought to cut the last letter */
        width: 19%;
    }
}