/* reset w3.css */
#header_notification_bar .notice-icon, .angle-down-icon { background: none; }


/* ------------------------  ------------------------ */

#layout-content::-webkit-scrollbar, 
.sider-wrap::-webkit-scrollbar,
.answer-modal-body::-webkit-scrollbar { width: 7px; background-color: #fff; }
#layout-content::-webkit-scrollbar-thumb, 
.sider-wrap::-webkit-scrollbar-thumb,
.answer-modal-body::-webkit-scrollbar-thumb { background-color: #dadae4; border-radius: 6px; }

#course_header .logo img { vertical-align: baseline; }

/* layout */
#layout-wrap { background-color: #fff; }
#layout-sider { height: 100%; overflow-x: hidden; position: relative; z-index: 2; width: 0; border-right: 1px solid #ddd; }
#layout-content {
    height: 100%;
    overflow-y: auto;   /*  */
}


/* */
.sider-wrap { overflow-x: hidden; overflow-y: auto; min-width: 340px; background-color: #f9fafd; height: 100%; }


/*  */
.play-content { padding: 48px 36px; max-width: 960px; margin: 0 auto; }
.play-progress { position: relative; background-color: #b5d1fa; text-align: center; line-height: 45px; border-radius: 4px 4px 0 0; }
.play-progress-list { display: inline-block; padding: 0 100px; vertical-align: bottom; }
.play-progress-list > li { width: 45px; height: 45px; margin-right: 10px; font-size: 24px; color: #fff; cursor: pointer; }
.play-progress-list > li.active { background-color: #f9fafd; color: #675f8f; }
.play-progress-list > li.locked { opacity: .8; cursor: not-allowed; }
.play-progress-list > li > .icon { vertical-align: baseline; }
.play-progress-nums { position: absolute; top: 0; right: 0; padding: 0 25px; font-size: 20px; color: #31285d; }
.play-progress-nums > span.separator { margin: 0 2px; }


/*  */
.play-addon { margin-bottom: 16px; color: #31285d; font-size: 14px; text-align: right; }
.play-addon .i-icon { margin-right: 6px; color: #b5d1fa; font-size: 18px; }
.play-addon .app { position: relative; display: inline-block; }
.play-addon .app-word { padding: 6px 0; cursor: pointer; }
.play-addon .app-qrcode { position: absolute; top: -34px; left: -92px; z-index: 1;
    transition: all 0.36s ease;
    -webkit-transform-origin: center right;
            transform-origin: center right;
    -webkit-transform: scale(0);
            transform: scale(0);
}
.play-addon .app-qrcode.show {
    -webkit-transform: scale(1);
            transform: scale(1);
}


/*  */
.subjective-answer-modal { display: none; position: fixed; top: 100px; left: 0; right: 0; z-index: 1000; width: 520px; margin: 0 auto; background-color: #fff; border-radius: 6px; line-height: 1.5; }

.answer-modal { position: relative; top: 100px; width: 520px; margin: 0 auto; background-color: #fff; border-radius: 6px; }

.answer-modal-close { position: absolute; top: 14px; right: 12px; color: #999; cursor: pointer; transition: color .24s ease; }
.answer-modal-close > .icon { font-size: 21px; vertical-align: top; }
.answer-modal-close:hover { color: #444; }

.answer-modal-header { padding: 14px 16px; border-bottom: 1px solid #e8eaec; color: #17233d; font-size: 14px; font-weight: 700; line-height: 20px; }

.answer-modal-body { max-height: 400px; overflow: auto; padding: 16px; font-size: 16px; }
.answer-modal-body img { display: block; max-width: 90%; margin: 0 auto; }

.answer-modal-footer { padding: 12px 18px; border-top: 1px solid #e8eaec; }
.answer-modal-footer .modal-btn { padding: 6px 15px; background-color: #b5d1fa; border: 1px solid #b5d1fa; border-radius: 4px; color: #31285d; font-size: 14px; cursor: pointer; }

@media1 (max-width: 576px) {
    .subjective-answer-modal { width: auto; margin: 0 15px; }
}


/*  */
.modal-box { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 999; background-color: rgba(0, 0, 0, .5); }


/*  */
@media1 (max-width: 1024px) {
    #course_header, #course_footer, #layout-sider, #play-footer, .play-addon { display: none; }
    .play-content { padding: 0; }
}
.btn-answer{
	display: inline-block;
    width: 150px;
    height: 45px;
    line-height: 45px;
    text-align: center;
    background-color: #b5d1fa;
    color: #31285d;
    border-radius: 4px;
    font-size: 16px;
}