#sgq{
max-width:820px;
margin:35px 0;
font-family:inherit;
color:#222;
}

#sgq .sgq-status{
font-size:14px;
margin-bottom:8px;
color:#666;
}

#sgq .sgq-bar{
height:6px;
background:#e9e9e9;
margin-bottom:28px;
overflow:hidden;
}

#sgq .sgq-bar-inner{
height:100%;
background:#3df249;
transition:width .25s ease;
}

#sgq .sgq-card{
display:none;
}

#sgq .sgq-card.sgq-active{
display:block;
}

#sgq .sgq-question{
font-size:21px;
line-height:1.5;
font-weight:700;
margin:0 0 22px;
}

#sgq .sgq-option{
display:block;
width:100%;
box-sizing:border-box;
margin:0 0 11px;
padding:15px 18px;
border:1px solid #ccc;
background:#fff;
color:#222;
text-align:left;
font-family:inherit;
font-size:16px;
line-height:1.45;
cursor:pointer;
}

#sgq .sgq-option:hover{
border-color:#3df249;
}

#sgq .sgq-option.sgq-right{
border:2px solid #3df249;
background:#f4fff5;
}

#sgq .sgq-option.sgq-wrong{
border-color:#999;
background:#f4f4f4;
}

#sgq .sgq-option:disabled{
color:#222;
cursor:default;
opacity:1;
}

#sgq .sgq-feedback{
display:none;
margin-top:23px;
padding:19px 21px;
background:#f4f4f1;
border-left:4px solid #3df249;
line-height:1.6;
}

#sgq .sgq-feedback strong:first-child{
display:block;
margin-bottom:5px;
}

#sgq .sgq-next,
#sgq .sgq-restart{
display:none;
margin-top:22px;
padding:13px 22px;
border:0;
background:#222;
color:#fff;
font-family:inherit;
font-size:15px;
font-weight:700;
cursor:pointer;
}

#sgq .sgq-next:hover,
#sgq .sgq-restart:hover{
background:#3df249;
color:#111;
}

#sgq-result{
display:none;
padding:10px 0 25px;
}

#sgq-result .sgq-score{
font-size:30px;
font-weight:700;
margin-bottom:12px;
}

@media(max-width:600px){
#sgq .sgq-question{
font-size:19px;
}

#sgq .sgq-option{
padding:14px;
}
}