.secondary_button {
    font-size: 14px;    
    font-family: 'Roboto', Verdana, Arial, sans-serif;
    border: solid 2px #eb9421;
    transition: 0.3s;
    font-weight: 400;
    vertical-align: text-bottom;
    background-color: white;
    text-transform: uppercase;
    color: #eb9421;
    padding: 10px;
    display: inline-block;
    margin-left: 7px;
}

.secondary_button:hover {
    color: white;
    cursor: pointer;
}

a:hover {
    text-decoration: none;
}

.question {
    border-left: 5px solid #eb9421;
    padding: 15px 20px;
    margin-bottom: 20px;
}

    .question.already_predicted {
        border-color: #ccc;
        background-color: #f2f2f2;
        color: #666;
    }

.toggle_expand_prediction {
    margin-top: 15px;
    font-size: 20px;
    color: #666;
    text-decoration: none;
}

    .toggle_expand_prediction:hover {
        cursor: pointer;
        color: #eb9421;
    }

.slider_container {
    display: flex;
    align-items: center;
    flex: 1;
    max-width: 500px;
}

.prediction_container {
    display: flex;
    align-items: center;
}

.previous_prediction_explanation {
    font-family: inherit;
    white-space: pre-wrap;
    word-wrap: break-word;
}

@media (max-width: 1000px) {
    .prediction_container {
        flex-direction: column;
        align-items: flex-start;
    }

    .slider_container {
        width: 100%;
    }
}

.past_prediction_info {
    display: none;
}

.prediction_explanation {
    font-size: 16px;
    line-height: 1.3em;
    padding: 10px;
    height: 150px;
    max-width: 400px;
    width: 95%;
    margin: 10px 0;
}

.question_description {
    margin: 3px 0 0 0;
}

    #v-questions__js .question .explanation_text {
        font-size: 16px;
    }

.latest_prediction {
    font-size: 22px;
    margin-top: 15px;
}

.prediction_buttons {
    margin: 7px 0 20px 0;
}

.prediction_link_button {
    font-size: 15px;
    color: white;
    padding: 7px 10px;
    text-decoration: none;
    text-transform: uppercase;
}

.tweet_prediction {
    background-color: #1da1f2;
}

    .tweet_prediction:hover {
        background-color: #37BBFF;
    }

    .tweet_prediction i {
        color: white;
        font-size: 15px;
        vertical-align: text-bottom;
        margin-right: 2px;
    }

.update_prediction {
    background-color: #eb9421;
    margin-left: 4px;
}

    .update_prediction:hover {
        background-color: #FFAE3B;
    }

#intro {
    margin-bottom: 20px;
}

#tagline {
    text-transform: uppercase;
    font-size: 30px;
    color: #505050;
    margin: 0;
    font-weight: 400;
}

    #tagline em {
        font-weight: 500;
        font-style: normal;
        color: #eb9421;
    }

    #intro .explanation_text {
        font-size: 18px;
        text-transform: none;
    }

.explanation, .past_predictions {
    max-width: 400px;
}

.explanation {
    margin-top: 20px;
}

.explanation pre {
    font-family: inherit;
    font-size: 16px;
    margin: 0;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.explanation_header {
    color: #666;
    text-transform: uppercase;
    border-bottom: 1px solid #ccc;
    padding-bottom: 3px;
    margin-bottom: 5px;
}

.button {
    outline: 0;
}

.button:hover {
    color: white;
}

.submit_prediction_button:hover {
    background-color: #FFAE3B;
}

.notify_message {
    font-size: 22px;
    padding: 12px 0;    
    margin-bottom: 20px;
}

    .notify_message a, .not_logged_in_error a {
        color: #eb9721;
    }

.not_logged_in_error {
    margin-left: 10px;
}

.show_explanation {
    color: #666;
}

.anonymous {
    color: #66666680;
}

.user_row {
    font-weight: bold;
    background-color: #efefef;
}

.point_total {
    font-weight: 500;
}

.red {
    color: red;
}

.green {
    color: green;
}

.subtext {
    font-style: italic;
    font-size: 0.7em;
    margin: 15px 0;
}

.user_predictions {
    font-size: 0.7em;
    font-family: 'Roboto', Verdana, Arial, sans-serif;
    font-weight:300;
}
    
    .user_predictions th {
        text-align: left;
        border-bottom:1px #000 solid;        
    }

    .user_predictions td, th {
        padding: 6px 7px;
    }

    .user_predictions .stat {
        text-align: right;
    }

    #question_score_display .user_predictions {
        width: 100%;
    }

    .user_predictions .question_text {
        min-width: 500px;
    }

#leaderboard {
    width: 100%;
    margin: 0 0 10px 0;
}

    #leaderboard th {
        text-align: left;
        padding: 7px 12px;
    }

    #leaderboard .predict_rank {
        width: 20px;
    }

    #leaderboard .points {
        width: 75px;
    }

    #leaderboard .selected_user {
        background-color: #efefef;
    }

.leaderboard_row:hover {
    cursor: pointer;
}

@media (min-width: 800px) {
    #question_score_display {
        float: right;
        width: 70%;
    }

    #leaderboard {
        width: 25%;
    }
}

.pagination {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .pagination li {
        display: inline;
        font-size: 1.2em;
        padding: 0 3px;
    }

        .pagination li a {
            color: #eb9421;
        }

#user_predictions {
    display: none;
    margin-top: 15px;
}

#toggle_prediction_history {
    background-color: hsl(0, 0%, 85%);
    color: hsl(0, 0%, 40%);
    padding: 6px 12px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 16px;
}

    #toggle_prediction_history:hover {
        color: hsl(0, 0%, 20%);
        transition-duration: 0.3s;
    }