/* 重置代码区的主题：highlight、ace */
.hljs, .ace_gutter, .ace-monokai { background-color: #201e2f !important; }

/* ======= header ======= */
#course_header { position: relative; z-index: 9; min-width: 1024px; height: 48px; background-color: #fff; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .06); line-height: 48px; }
#course_header .header-layout { height: 100%; padding: 0 20px; }
#course_header .header-l .logo { box-sizing: border-box; height: 48px; padding: 6px 0; }
#course_header .header-l .logo img { vertical-align: baseline; }
#course_header .h-right { margin-top: 6px; }

#mobile-course-header { display: none; height: 48px; padding: 0 52px; background-color: #fff; line-height: 48px; color: #212121; font-size: 18px; }
#mobile-course-header > a { position: absolute; top: 0; left: 20px; color: inherit; }
#mobile-course-header > a > .icon { vertical-align: baseline; }

@media (max-width: 1024px) {
    #course_header, .play-breadcrumb { display: none; }
    #mobile-course-header { display: block; }
}


/* ======= footer ======= */
#course_footer { padding: 20px 0; font-size: 14px; line-height: 35px; color: #666; text-align: center; }

#mobile-play-footer { display: none; height: 55px; justify-content: space-around; align-items: center; background-color: #f9f9f9; border-top: 1px solid #ddd; color: #31285d; position: absolute; bottom: 0; left: 0; right: 0; }
#mobile-play-footer a { color: inherit; }
#mobile-play-footer .icon { vertical-align: baseline; font-size: 32px; }
#mobile-play-footer > .play-nav { color: #4caf50; }

@media (max-width: 1024px) {
    #mobile-play-footer { display: flex; }
}


/* ======= 微课做题页、实战页 ======= */
/* 面包屑 */
.play-breadcrumb { position: absolute; top: 15px; left: 248px; font-size: 15px; z-index: 9; }
.play-breadcrumb .link > a { color: #333; }
.play-breadcrumb .link > a:hover { color: #31285d; }
.play-breadcrumb .link a > .icon { margin-right: 4px; font-size: 20px; color: #675f8f; }
.play-breadcrumb .separator { margin: 0 4px; }

/* 课程目录 */
.play-catalog { padding: 0 8px; color: #31285d; }
.play-catalog .icon { color: #675f8f; }
.play-catalog-title { padding: 15px 0; font-size: 16px; text-align: center; }
.play-catalog-title > a { display: inline-block; color: #31285d; }
.play-catalog-title span { display: inline-block; vertical-align: middle; }
.play-catalog-title span.img { height: 48px; margin: 0 7px; border-radius: 4px; overflow: hidden; }
.play-catalog-title span.word { margin: 7px 0; }

.play-catalog-buy { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; padding: 12px; margin-bottom: 12px; font-size: 14px; background-color: rgba(254, 106, 0, 0.1); border-radius: 4px; }
.play-catalog-buy-text { margin-right: 4px; color: #fe6a00; }
.play-catalog-buy-button { height: 32px; padding: 0 12px; color: #fff; line-height: 32px; white-space: nowrap; background-color: #fe6a00; border-radius: 999px; cursor: pointer; }
.play-catalog-buy.hidden { display: none; }

.play-catalog-list > .chapter-item { padding-bottom: 24px; }
.play-catalog-list .chapter-title { position: relative; margin-bottom: 8px; padding: 10px 40px 10px 12px; border-radius: 4px; font-size: 15px; font-weight: 600; line-height: 1.5; background-color: #dbe7f9; cursor: pointer; }
.play-catalog-list .chapter-title .icon { position: absolute; top: 50%; right: 12px; -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: transform 0.25s; transition: transform 0.25s; }
.play-catalog-list .chapter-title.r .icon { -webkit-transform: translateY(-50%) rotate(180deg); transform: translateY(-50%) rotate(180deg); }
.play-catalog-list .chapter-list { padding: 0 8px; }
.play-catalog-list .chapter-list li { border: 1px solid transparent; padding: 0 2px; }
.play-catalog-list .chapter-list li:hover{ border:1px solid #f0f0f0; background:#f0f0f0;border-radius: 4px; }
.play-catalog-list .chapter-list li > a { display: -webkit-flex; display: flex; padding: 13px 0; font-size: 14px; line-height: 1.5; color: #31285d; border-bottom: 1px dashed #ddd; }
.play-catalog-list .chapter-list li > a > .icon { margin-top: 1px; font-size: 18px; vertical-align: middle; }
.play-catalog-list .chapter-list li > a > .icon.w3c-icon-correct { color: #4caf50; }
.play-catalog-list .chapter-list li > a > .word { -webkit-flex: 1; flex: 1; margin-left: 8px; }
.play-catalog-list .chapter-list li .learning-tip,
.play-catalog-list .chapter-list li .duration-word { margin-left: 8px; }
.play-catalog-list .chapter-list li .learning-tip { color: #4caf50; }
.play-catalog-list .chapter-list li .learning-tip > .icon { margin-left: 7px; color: #4caf50; vertical-align: baseline; }

@media (max-width: 1024px) { .play-catalog-codecamp-list { display: none; } }

/* 课程底部 */
#play-footer { 
    height: 55px;
    background-color: #f9f9f9;
    border-top: 1px solid #ddd;
    color: #31285d;
    font-size: 15px;
    position: absolute;
    bottom: 0;
    width: 100%;

}
#play-footer > .play-catalog-switch { box-sizing: border-box; width: 340px; padding: 0 32px; line-height: 54px; }
#play-footer > .play-catalog-switch > .switch-btn { cursor: pointer; }
#play-footer > .play-catalog-switch > .switch-btn > .icon { margin-bottom: 2px; font-size: 24px; }
#play-footer > .play-catalog-switch > .switch-btn > .switch-word { padding-left: 10px; }
#play-footer > .play-user-active { padding: 0 32px; line-height: 54px; }
#play-footer > .play-user-active > .cell + .cell { margin-left: 32px; }
#play-footer > .play-user-active a { color: #31285d; }
#play-footer > .play-user-active a > .icon { font-size: 20px; vertical-align: text-top; }
#play-footer > .play-user-active a > .word { margin-left: 4px; font-size: 15px; }
#play-footer > .play-nav > .play-nav-box { width: 340px; margin: 0 auto; }
#play-footer > .play-nav > .play-nav-box > div { display: inline-block; line-height: 54px; }
#play-footer > .play-nav > .play-nav-box .icon { font-size: 40px; vertical-align: middle; color: #4caf50; cursor: pointer; }


/* ======= 富文本 ======= */
.rich-text { font-size: 16px; line-height: 1.7; }
.rich-text > * { box-sizing: border-box; }
.rich-text b, .rich-text strong { font-weight: bold; }
.rich-text p, .rich-text pre { margin-bottom: 5px; }
.rich-text ul, .rich-text ol { margin: 10px 0; padding-left: 28px; list-style: disc outside; }
.rich-text ul { list-style: disc outside; }
.rich-text ol { list-style: decimal outside; }
.rich-text li { margin-bottom: 5px; }
.rich-text img { width: 100%; }
.rich-text blockquote { margin: 15px 0; padding: 10px 5px 10px 15px; border-left: 5px solid #ddd; background-color: #f5f5f5; color: #555; }
.rich-text table { width: 100%; margin: 15px 0; table-layout: fixed; border-collapse: collapse; border-spacing: 0; }
.rich-text table td { min-width: 40px; height: 30px; padding: 2px 4px; border: 1px solid #ccc; vertical-align: top; }

/* ======= 评分 ======= */
.rate-star { display: inline-block; margin: 0 4px; }
.rate-star .i-icon { font-size: 32px; }
.rate-star-light { color: #fadb14; }
.rate-star-unlight { color: #e8e8e8; }
.rate-star-half { position: relative; }
.rate-star-half-first > .i-icon { color: #e8e8e8; }
.rate-star-half-second { position: absolute; top: 0; left: 0; width: 50%; overflow-x: hidden; }
.rate-star-half-second > .i-icon { color: #fadb14; }

/* ======= 名词解释 ======= */
a[target="_lemma"] { font-weight: 700; color: #900b09; text-decoration: none; }
a[target="_lemma"]:hover { color: #f00; }

.lemma-popover-mask, .lemma-popover-wrap { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1000; }
.lemma-popover-mask { background-color: rgba(0, 0, 0, .45); -webkit-animation: fadeIn 0.2s linear forwards; animation: fadeIn 0.2s linear forwards; }

.lemma-popover { position: absolute; width: calc(100% - 20px); max-width: 320px; -webkit-animation: easeIn 0.2s linear forwards; animation: easeIn 0.2s linear forwards; }
.lemma-popover-placement-top { padding-bottom: 16px; }
.lemma-popover-placement-bottom { padding-top: 16px; }

.lemma-popover-inner { position: relative; font-size: 14px; color: #333; line-height: 1.5; border-radius: 3px; background-color: #fff; }
.lemma-popover-arrow { position: absolute; z-index: -1; width: 16px; height: 16px; background-color: #fff;
    -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
            transform: rotate(45deg);
}
.lemma-popover-placement-top .lemma-popover-arrow { bottom: -7px; }
.lemma-popover-placement-bottom .lemma-popover-arrow { top: -7px; }
.lemma-popover-close { position: absolute; top: 12px; right: 12px; z-index: 1; color: #999; line-height: 1; cursor: pointer; -webkit-transition: color .24s; transition: color .24s; }
.lemma-popover-close:hover { color: #444; }
.lemma-popover-close > .i-icon { font-size: 20px; }

.lemma-popover-title { margin-right: 20px; padding: 12px 12px 0; font-size: 16px; font-weight: 700; color: #17233d; line-height: 20px; }
.lemma-popover-title > .decorate { content: ""; display: inline-block; width: 4px; height: 20px; margin-right: .4em; vertical-align: top; background-color: #b5d1fa; border-radius: 2px; }
.lemma-popover-content { padding: 12px; }
.lemma-popover-link { display: block; padding: 8px 0; color: #0062cc; text-align: center; background-color: #fafafa; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; }
.lemma-popover-link:hover { color: #0062cc; }

/* ======= animation ======= */
@-webkit-keyframes fadeIn {
     0% { opacity: 0; }
     100% { opacity: 1; }
}
@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@-webkit-keyframes easeIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}
@keyframes easeIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}