#dropdown_container {
    margin-left: 60px;
    margin-bottom: 8px;
    width: 78%;
}

@media only screen and (min-width: 1500px) {

    #dropdown_container{
        margin-left: 100px;
    }
}

@media only screen and (max-width: 620px) {

    #dropdown_container {
        width: 90%;
        margin-left: 20px;
    }
}

/* Figure 1 */
#f1_container{
    margin: auto;
    width: 1000px;
    margin-top: 20px;
}

.f1 {
    width: 100%;
    margin: auto;
}

.line_thin {
    fill: none;
    stroke: steelblue;
    stroke-width: 1.5px;
}

.line_thin.selected {
    stroke-width: 3px;
}

.line_fat {
    fill: none;
    stroke: gray;
    stroke-width: 15px;
    stroke-opacity: 0;
}

.team_text {
    font-size: 13px;
    font-family: Arial, sans-serif;
}

.rank_text {
    font-size: 11px;
    font-family: Arial, sans-serif;
}

.tick text {
    font-size: 11px;
}

.axis path, .axis .tick line {
    stroke: silver;
}

.axis text, .yaxis_title {
    fill: #666666;
    font-family: sans-serif;
}

.yaxis_title {
    font-size: 15px;
}

@media only screen and (min-width: 1500px) {

    #f1_container{
        width: 1300px;
    }
}

@media only screen and (max-width: 1000px) {

    #f1_container{
        width: 100%;
    }
}

@media only screen and (max-width: 620px) {

    #f1_container{
        margin-top: 10px;
    }

    .line_thin {
        stroke-width: 3px;
    }

    .line_thin.selected {
        stroke-width: 5px;
    }

    .team_text {
        font-size: 25px;
    }

    .rank_text {
        font-size: 18px;
    }

    .xaxis text {
        font-size: 18px;
    }

    .yaxis text, .yaxis_title {
        font-size: 20px;
    }
}