.ocs-question-container{

    left:0;
    top:0;
    bottom:0;
    right: 0;
    width: 100%;
    padding:0;
    margin: 0;
}

.ocs-question-title{
    font-size:1.125em;
    margin-left:2em;
    margin-top:2em;
    color: #333333;
    margin-bottom: 1.5em;
}

.ocs-question-main-audio{
    padding: 2px;
    width: 540px;
    height: 80px;
    margin-left: 2em;
    margin-bottom: 2em;
    position: relative;
}

.ocs-question-body{
    display: table;
    margin-left:2em;
    margin-right: 2em;
}


.ocs-col-right{
    display: table-cell;
    padding-left: 1.25em;
}

.ocs-col-right .pic_box{
    width: 9.375em;
    max-height: 16.125em;
    min-height: 9.375em;
    display: block;
    padding: 4px;
    border: 1px solid #b6b6b6;
    overflow: hidden;
    box-sizing: border-box;
}
.ocs-col-right img{
    width: 100%;
    display: block;
}
.ocs-col-left{
    display: table-cell;
    width: 100%;
    vertical-align: top;
}

.ocs-question-option{
    display: table;
    border-radius:1.8em;
    border: 1px solid #b6b6b6;
    background: #ffffff;
    width: 100%;
    margin-bottom: 1.125em;
    box-sizing:border-box;
    overflow: hidden;
}


.ocs-question-option:hover{
    background: #f4f4f4;
}

.ocs-question-option:active{
    background: #f4f4f4;
}

.activation .ocs-question-option:hover{
    background: #ffffff;
}

.activation .ocs-question-option:active{
    background: #ffffff;
}

.activation .circle{
    background:rgba(255,255,255,0);
    color: #333;
}

.circle {
    width: 2.25em;
    height: 2.25em;
    background:#555555;
    border-radius: 50%;
    text-align: center;
    line-height: 2.25em;
    font-size:1.125em;
    color:white;
}

.option-left{
    display: table-cell;
    vertical-align:middle;
    padding:.56em;
    padding-right: 0;
}

.option-left-audio{
    display: table-cell;
    background-color: #e8e8e8;
    height:100%;
    vertical-align: middle;
}

.option-left-audio-inner{
    width: 3.43em;
    height:100%;
    display: table;
}

.option-left-audio-inner span{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.option-middle{
    width:100000px;
    padding: .9em 0;
    padding-left:.75em;
    display: table-cell;
    vertical-align: middle;
}

.option-middle .option-text{
    margin-right: 10px;
    display: block;
    font-size:1.25em;
    min-height: 1.56em;
}

.activation .option-middle .wrong{
    color:#f66464;
    margin-right: 10px;
    display: block;
}


.option-right{
    display: table-cell;
    vertical-align:middle;
    padding-right:.56em;
}

.activation .result-mark{
    width: 2.25em;
    height:2.25em;
    background-size: 2.25em;
}


.activation .correct{
    background-image: url('data:image/png;base64,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');
    display: block;
}

.activation .wrong{
    background-image: url('data:image/png;base64,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');
    display: block;
}


.ocs-solution-container{
    display: none;
    margin-left:2em;
    height: 100%;
    margin-top:1.5em;
    margin-right: 2em;
    margin-bottom:2em;
}

.activation .ocs-solution-container{
    display: block;
}

.ocs-solution-container .caption{
    line-height: 2em;
}

.ocs-solution-container .content{
    margin-top: 1em;
    color:#666666;
    line-height: 2em;
}

.ocs-question-image-wrapper{
    display: flex;
    justify-content: space-around;
}

.ocs-question-option-image{
    flex-grow: 1;
    max-width:7.5em;
    max-height:7.5em;
    padding: 4px;
    border: 1px solid #b6b6b6;
    box-sizing: border-box;
    margin: 0 2px;
    position:relative;
}

.ocs-question-result-mark{
    position: absolute;
    width: 2.25em;
    height: 2.25em;
    bottom: -1.125em;
    right: -1.125em;
}

.ocs-question-option-image-wrapper{
    width:100%;
    height:100%;
    overflow:hidden;
    display: flex;
    align-items: center;
}

.ocs-question-option-image-wrapper img{
    width:100%;
    display: block;
}