h2.title{
    font-family: BlinkMacSystemFont,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
    font-weight:700;
    font-size:1.5rem;
}
.question_step{
    text-align:center;
    background:rgb(241,241,241);
    margin:20px 10px 30px 10px;
    height:30px;
    position:relative;
    font-size: 14px;
}
.question_step span{
    margin:0px auto;
    z-index:3;
    position: absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}
.question_step .progress{
    position: absolute;
    left:0;
    top:0px;
    background:rgb(191,203,212);
    display:block;
    height:30px;
    z-index:2;
    max-width:100%;
}
.question img{
    width:96%;
    margin:0 2%;
}
ul.options{
    list-style: none;
    display:flex;
    flex-direction: column;
    padding-inline-start:0;
    margin-block-start:10px;
    margin-block-end:10px;
    margin:0px 0 0px;
    padding:10px 10px 0;
}
ul.options li{
    border:1px solid rgb(200,200,200);
    display:flex;
    border-radius:5px;
    margin:5px 0;
    background:white;
    cursor:pointer;
    line-height: 1.5;
}
ul.options li .image{
    line-height: 0.7;
    text-align:center;
}
ul.options li .image img{
    width:70%;
    margin:0 0 20px;
}
ul.options li.selected{
    border:1px solid #dcebf2;
    background:#dcebf2;
}
ul.options li.selected .image img{
    /*border-left:3px solid rgb(115,195,179);*/
    /*border-right:3px solid rgb(115,195,179);*/
    /*border-bottom:3px solid rgb(115,195,179);*/
    /*border-top:3px solid rgb(236,255,251);*/
}
ul.options li .text_image{
    display:flex;
    flex-direction: column;
}
ul.options li .prefix{
    width: 40px;
    text-align: center;
    padding: 15px 10px 15px 12px;
    background: rgb(242,242,242);
    color: #555555;
    font-weight: 700;
    font-size: 14px;
    display: flex;
    align-items: center;
}
ul.options li.selected .prefix{
    background:rgb(124 165 217 / 81%);
    color:#333;
}
ul.options li .text{
    padding:15px 10px;
    font-size:16px;
    display: flex;
    align-items: center;
    font-weight:500;
}
ul.options li .text_image .text{
    display:block;
    text-align:center;
}
.operation_area{
    padding:0px 10px 0px;
    display:flex;
    align-items: center;
    margin:10px 0;
}
.operation_area a{
    display:inline-block;
    text-align:center;
    color:white;
    border:1px solid #404040;
    background:#404040;
    border-radius:5px;
    padding:10px 10px;
    text-decoration: none;
    width:100%;
    font-size:14px;
    font-weight:600;
}
.operation_area a.next,.operation_area a.submit{
    padding:15px 0;
    font-size:20px;
}
.operation_area a.font14{
    font-size:12px;
}
@media (min-width: 728px){
    .operation_area a{
        min-width:15%;
    }
}
.operation_area .get_clue{
    font-size:14px;
    color:#777;
    text-decoration: underline;
    background:transparent;
    border:0;
}
.operation_area a.get_clue{
    padding:0 10px;
}
.operation_area .hint_container{
    margin:0 0 0 auto;
}
.operation_area .hint_container img{
    margin:5px 0 0;
    width:20px;
    height:20px;
}
.operation_area .hint_container span{
    color:#777;
    font-weight:400;
    font-size:14px;
}
    /***option_statistics***/
ul.option_statistics{
    list-style: none;
    display:flex;
    flex-direction: column;
    padding-inline-start:0;
    margin-block-start:10px;
    margin-block-end:10px;
    margin:0px 0;
    padding:10px;
}
ul.option_statistics li{
    display:flex;
}
ul.option_statistics li .prefix{
    width:30px;
    padding:19px 10px;
    background:rgb(242,242,242);
}
ul.option_statistics li .status_bar{
    width:calc(100% - 30px);
    display:flex;
    flex-direction: column;
    padding:5px 10px;
}
.status_bar .top_text{
    width:100%;
    position:relative;
    height:15px;
}
.status_bar .top_text .percent{
    position:absolute;
    left:0;
    top:0;
    color:#404040;
    font-size:14px;
}
.status_bar .top_text .vote_num{
    position:absolute;
    right:0;
    top:0;
    font-size:14px;
}
.status_bar .full_bar{
    width:100%;
    height:15px;
    border:1px solid #619cb7;
    position:relative;
}
.status_bar .full_bar .progress{
    background:#619cb7;
    height:14px;
    display:inline-block;
    position:absolute;
    left:0;
    top:0;
}
a.back_button{
    display:inline-block;
    text-align:center;
    border:1px solid #096e9d;
    background:#096e9d;
    border-radius:5px;
    padding:10px 10px;
    text-decoration: none;
    margin-left:10px;
    font-size:12px;
    color:white;
}


.next_link{
    margin:10px;
    font-size:14px;
}
.next_link a{
    font-size:14px;
    display:inline-block;
    margin:0 10px;
}
@media (max-width: 768px) {
    .next_link{
        display:flex;
        flex-direction: column;
    }
    .next_link a{
        margin:10px 0;
        line-height:1.5;
    }
}
span.of{
    display:inline-block;
    font-size:12px;
    margin:0 10px 0 10px;
    color:#777;
}
span.of a{
    color:#777;
    text-decoration: none;
    font-style: italic;
    text-transform: capitalize;
    font-size: 12px;
}
h2#results{
    text-transform: capitalize;
}
a.statistics{
    background:#666;
    border:1px solid #666;
}
a.unclickable-link {
    pointer-events: none;
    background:#999;
    border:1px solid #999;
}
.question_h1{
    text-transform: none;
}
h1.question_h1{
    font-size:1.8rem;
    line-height:1.3;
}
.hint_container{
    display:flex;
    justify-content: flex-end;
    margin:10px 10px 0;
}
.hint_container a{
    display: flex;
    margin-right:10px;
}
.hint_container img{
    width:30px;
    height:30px;
}
.hint_container span{
    white-space: nowrap;
    color:#777;
    font-size:16px;
    line-height:30px;
}
.right-aligned {
    margin-left: auto;
}
ul.latest li{
    min-height:85px;
}