/* 定制导航栏的背景 */
.main-header .navbar-brand {
    border-right: 0 solid #eee !important;
}

.main-header .navbar .navbar-nav > li > a {
    border-right: 0 solid #fff !important;
}

.main-header .navbar .navbar-custom-menu .navbar-nav > li > a,
.main-header .navbar .navbar-right > li > a {
    border-left: 0 solid #eee !important;
    border-right-width: 0 !important;
}

/* 学员端纯白背景 */
.learner-content-wrapper.content-wrapper {
    background: #fff;
}

.learner-content-wrapper .box {
    box-shadow: none;
}

.learner-content-wrapper .nav-tabs-custom > .nav-tabs li {
    border-top: 1px solid #F5F5F5;
    margin-right: 0;
}

.learner-content-wrapper .nav-tabs-custom > .nav-tabs li.active {
    border-top-width: 3px;
}

.learner-content-wrapper .nav-tabs-custom > .nav-tabs li:first-child {
    border-left: 1px solid #F5F5F5;
}

.learner-content-wrapper .nav-tabs-custom > .nav-tabs li:last-child:not(.active) {
    border-right: 1px solid #F5F5F5;
}

.learner-content-wrapper .nav-tabs-custom {
    /*box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);*/
}

.learner-content-wrapper .nav-tabs-custom > .tab-content {
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.1);
}

/* 学员端搜索框 */
.dropdown.search-menu .search-dropdown .fa-remove {
    display: none;
}

.dropdown.search-menu .search-dropdown .fa-search {
    display: inline-block;
}

.dropdown.search-menu.open .search-dropdown .fa-remove {
    display: inline-block;
}

.dropdown.search-menu.open .search-dropdown .fa-search {
    display: none;
}

.search-menu .search-menu-ul {
    min-height: 100px;
    padding: 15px;
}

.search-menu .search-menu-ul .search {
    margin: 10px 0;
}

.search-menu .search-menu-ul li .hot-tag-list {
    margin-left: 50px;
}

.search-menu .search-menu-ul li .hot-tag-list a.search-tag-button {
    display: inline-block;
    color: #00A65A;
    margin: 0 10px 10px 0;
    padding: 2px;
    border-bottom: 1px solid transparent;
}

.search-menu .search-menu-ul li .hot-tag-list .search-tag-button:hover {
    border-bottom: 1px solid #00a65a;
    background: transparent;
    cursor: pointer;
}

/* ========================================================================= */
/* 学员端布局 */
/* ========================================================================= */

.content-header {
    margin-left: -15px;
    margin-right: -15px;
    padding-top: 0;
}

.content {
    margin-left: -15px;
    margin-right: -15px;
    padding-top: 0;
}

/* 页面标题 */
.page-title {
    margin-top: 0;
    margin-bottom: 0;
    background: transparent;
}

.content-header .breadcrumb {
    background: transparent;
    margin-bottom: 0;
    padding-left: 0;
}

.circular {
    display: inline-block;
    width: 25px;
    height: 25px;
    text-align: center;
    background-color: #FFBDA0;
    border-radius: 50%;
    line-height: 25px;
    color: #FFF;
}

.not-select {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none;   /* Chrome/Safari/Opera */
    -khtml-user-select: none;     /* Konqueror HTML */
    -moz-user-select: none;       /* Firefox */
    -ms-user-select: none;        /* Internet Explorer/Edge */
    user-select: none;            /* Non-prefixed version, currently supported by most modern browsers */
}

/* ========================================================================= */

/* Container */
.container-header,
.container-full-blue,
.container-full-gray,
.container-full-write,
.container-full-top,
.container-full {
    margin-left: -15px;
    margin-right: -15px;
}

.container-header {
    padding: 15px 0;
}

.container-full {
    margin-top: 15px;
}

.container-full-blue,
.container-full-gray,
.container-full-write {
    margin-top: 0;
    padding-top: 15px;
}

.container-full-top {
    margin-top: 0;
    padding-top: 30px;
}

.container-header,
.container-full-write,
.index-page .container-full:nth-child(odd) {
    background-color: #FFFFFF;
}

.container-full-gray,
.index-page .container-full:nth-child(even) {
    background-color: #F5F5F5;
}

.container-full-blue {
    background-image: url(../image/bg_gray.svg);
    background-size: cover;
}

.container-full-default {
    background-color: #ecf0f5;
}

.container-full-bg {
    -webkit-background-size: cover;
    background-size: cover;
    padding-top: 15px;
    background-color: #fff;
}

.container-full .datatable-container {
    color: #000;
    background-color: #FFFFFF;
}

/* 首页宣传栏 */
.lms-carousel {
    width: 100%;
    display: block;
}

.lms-carousel .carousel-inner > .item > a {
    width: 100%;
    padding-bottom: 56.25%;
}

.lms-carousel .carousel-inner > .item > a > .lms-carousel-img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    object-position: center;
}

.lms-carousel .carousel-inner > .item > .carousel-caption > h3 {
    font-size: 1.4em;
}

/* 学员端公告页面样式 */
.view-announcement-content {
    overflow: hidden;
}

.announcement-slider-container a {
    color: #00a65a;
}

.announcement-list {
    border-bottom: 1px solid #f4f4f4;
    padding: 10px;
    margin: 0 5px;
}

/*更多*/
.box.box-lms > .box-header .more {
    margin: 8px 0;
}

.box.box-lms > .box-header .more, .box.box-solid > .box-header .more {
    font-size: 16px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 8px;
}

.box > .box-header .more:hover, .box > .box-header .more:active, .box > .box-header .more:visited,
.box.box-solid > .box-header .more:hover, .box.box-solid > .box-header .more:active, .box.box-solid > .box-header .more:visited {
    color: #777;
    background-color: transparent;
}

/*学员端同学圈*/
.grid {
    /*padding: 0 20px;*/
}

.grid-item {
    border-bottom: 1px solid #f4f4f4;
    margin-bottom: 10px;
    padding: 15px 0
}

.grid-item .btn-box-tool {
    margin: 0 5px;
}

.classmate-user-message {
    width: 60%;
    height: 40px;
    margin-left: 15px;
    position: relative;
}

.delete-classmate:hover {
    cursor: pointer;
}

.classmate-text {
    position: absolute;
    top: 50%;
    width: 100%;
    height: auto;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

.classmate-text p {
    margin-bottom: 0;
}

.classmate-time {
    font-size: 14px;
}

.classmate-content {
    margin: 10px 0 10px 55px;
    word-break: break-all;
}

.classmates-btn {
    position: absolute;
    top: 0;
    right: 0;
}

.classmate-image {
    margin: 10px 0 0 55px;
}

.attachment-container {
    display: inline-block;
}

.classmates-form, .classmates-sidebar {
    padding: 20px;
}

.personal-info {
    margin-bottom: 35px;
}

.personal-img {
    margin-bottom: 25px;
}

.classmates-sidebar-title {
    margin: 25px 0 30px;
    padding-bottom: 10px;
    border-bottom: 1px solid #D2D6DE;
}

.classmate-user-item {
    margin-bottom: 10px;
}

.classmate-username {
    margin-top: 5px;
}

/*学员端群组*/

.group-list-view {
    margin-bottom: 10px;
}

/*学员端群组详情*/

.group-introduction {
    width: 100%;
    word-break: break-all;
}

/*学员端群组话题*/
.topic-list-view {
    margin: 10px 0;
    border-bottom: 1px solid #F4F4F4;
}

.topic-list-view:last-child, .grid-item:last-child {
    border: none;
}

.topic-introduction {
    margin: 10px 0;
}

/*--------------------------问吧-------------------------------*/
.know-question {
    padding: 10px 10px 18px;
    border-bottom: 1px solid #e3e3e3;
    display: flex;
}

.know-question-summary-info {
    padding: 10px 5px;
    margin: 0 5px;
    text-align: center;
    display: inline-block;
    /*float: left;*/
    min-width: 55px;
    height: 60px;
    border: 1px solid transparent;
    border-radius: 4px;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.17);
}

.know-question-summary-info > small {
    display: block;
}

.know-question-detail {
    margin-left: 0px;
}

.know-question-detail > p {
    margin-bottom: 5px;
    color: #999;
    font-size: 14px;
    padding-left: 15px;
}

.know-question-detail > p > span {
    padding: 0 15px 0 8px;
}

.know-question-title {
    padding-left: 15px;
    text-align: left;
    font-size: 18px;
}

.know-question-title > a:hover {
    color: #017E66;
    text-decoration: underline;
}

.know-question-title > a > p {
    display: inline-block;
}

.know-similar-title {
    width: 73%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*-----------------------------------------------------------*/
.exam-attendance > span, .activity-attendance > span {
    display: block;
}

.exam-attendance > span > label, .activity-attendance > span > label {
    margin: 5px 10px;
}

.activity-table td {
    vertical-align: middle !important;
}

.exam-attendance-rank {
    padding: 0 8px;
    color: #fff;
    background-color: #727272;
    border-radius: 4px;
    margin: 0 5px;
}

/*--------------------------待办事项-------------------------------*/
.todo-item {
    padding: 16px 0;
    cursor: pointer;
}

.todo-item:hover, .todo-item:active {
    background-color: #f5f5f5;
}

.announcement-slider-container {
    display: inline-block;
    vertical-align: bottom;
}

.label-default {
    background-color: #00a65a;
    color: #fff;
}

.box-header.with-border {
    padding-top: 16px;
    border-bottom: 1px solid #ddd;
}

.recommended-activity .box, .latest-activity .box, .hottest-activity .box {
    background: transparent;
    box-shadow: none;
}

.content-wrapper {
    background: #F5F5F5;
    clear: both;
}

.main-footer {
    border: 0;
    background: #F5F5F5;
    color: #666;
    padding: 35px;
}

.announce-title {
    font-size: 16px !important;
    color: #00a65a !important;
    margin-right: 6px;
    font-weight: bold;
}

/* 首页顶部目录，宣传栏，用户信息 */
#top-container-div {
    background: #FFFFFF;
    position: relative;
    margin-left: -15px;
    margin-right: -15px;
    padding: 30px 0;
}

#top-container-div-bg {
    width: 100%;
    min-height: 300px;
    background: transparent;
    opacity: 0.85;
    filter: blur(100px);
    transform: translate3d(0, 0, 0);
    transition: all 0.3s;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

.top-container {
    width: 100%;
    display: table;
    table-layout: fixed;
    background: #FFFFFF;
    border-radius: 5px;
}

.top-container-nav {
    width: 22%;
    background: transparent;
    border-radius: 5px 0 0 5px;
    padding: 5px 0 5px 5px;
    box-shadow: 0 0 15px #E9E9E9;
    vertical-align: top;
    display: table-cell;
    position: relative;
}

.top-container-main {
    display: table-cell;
    background: transparent;
    width: 56.1%;
}

.top-container-user {
    display: table-cell;
    width: 22%;
    vertical-align: top;
    background: transparent;
    border-radius: 0 5px 5px 0;
    padding: 10px;
}

.top-container-nav > .top-container-catalog {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.top-container-nav > .top-container-catalog > ul {
    height: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    z-index: 9999;
}

.top-container-nav > .top-container-catalog > ul > li {
    position: relative;
    /*padding: 10px 0 10px 10px;*/
    border: 0 !important;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
}

.top-container-nav > .top-container-catalog > ul > li > a {
    padding: 5px 25px 5px 20px;
    border-left: 0 !important;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    width: 100%;
}

.top-container-nav > .top-container-catalog > ul > li > a > i {
    position: absolute;
    top: 5px;
    right: 10px;
}

.top-container-nav > .top-container-catalog > ul > li > dl {
    display: none;
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-radius: 0 5px 5px 0;
    padding: 10px;
    overflow: auto;
    background-color: #fff !important;
    opacity: 0.98;
    box-shadow: 0px 4px 20px #f1f1f1;
}

.top-container-nav > .top-container-catalog > ul > li > dl > .catalog-row > dt {
    word-break: keep-all;
}
.top-container-nav > .top-container-catalog > ul > li > dl > dt {
    clear: left;
}

.top-container-nav > .top-container-catalog > ul > li > dl > dt,
.top-container-nav > .top-container-catalog > ul > li > dl > dd,
.top-container-nav > .top-container-catalog > ul > li > dl > .catalog-row > dt,
.top-container-nav > .top-container-catalog > ul > li > dl > .catalog-row > dd {
    /*float: left;*/
    display: inline-block;
    padding: 10px 5px;
    vertical-align: top;
}
.top-container-catalog > ul > li > dl > .catalog-row {
    /*display: flex;*/
}
.top-container-nav > .top-container-catalog > ul > li > dl > dd,
.top-container-nav > .top-container-catalog > ul > li > dl > .catalog-row > dd{
    word-break: break-all;
}

.top-container-nav > .top-container-catalog > ul > li > dl > dt > a,
.top-container-nav > .top-container-catalog > ul > li > dl > dd > a,
.top-container-nav > .top-container-catalog > ul > li > dl > .catalog-row > dt > a,
.top-container-nav > .top-container-catalog > ul > li > dl > .catalog-row > dd > a {
    font-size: 13px;
}

.top-container-nav > .top-container-catalog > ul > li > dl > .catalog-row > dt > a,
.top-container-nav > .top-container-catalog > ul > li > dl > dt > a {
    padding: 5px;
    color: #222;
    font-weight: bold;
}

.top-container-nav > .top-container-catalog > ul > li > dl > .catalog-row > dd > a,
.top-container-nav > .top-container-catalog > ul > li > dl > dd > a {
    color: #222;
    margin-right: 10px;
    background: #f5f5f5;
    border-radius: 10%;
    padding: 5px 10px;
    font-size: 12px;
    display: inline-block;
    margin-bottom: 10px;
}

.top-container-nav > .top-container-catalog > ul > li:hover, .top-container-nav > .top-container-catalog > ul > li:focus {
    background: #f4f4f4;
    border-color: #f4f4f4 !important;
    border-radius: 5px 0 0 5px;
}

.top-container-nav > .top-container-catalog > ul > li:hover > dl, .top-container-nav > .top-container-catalog > ul > li:focus > dl {
    display: block;
    background: #f4f4f4;
}

.top-container-nav > .top-container-catalog > ul > li:hover > a > i, .top-container-nav > .top-container-catalog > ul > li:focus > a > i {
    display: none;
}

.top-container-nav ul li:hover > a,
.top-container-nav ul li:focus > a,
.top-container-nav ul li > a:hover,
.top-container-nav ul li > a:focus {
    border-color: transparent;
    background: transparent;
}

/* 用户信息-首页和用户主页 */
.user-info-container > .user-info-container-header {
    display: flex;
}

.user-info-container > .user-info-container-header > .user-info-container-avatar {
    padding: 10px;
    vertical-align: top;
}

.user-info-container > .user-info-container-header > .user-info-container-avatar > img {
    width: 50px;
    height: 50px;
}

.user-info-container > .user-info-container-header > .user-info-container-info {
    flex: 1;
    vertical-align: top;
}

.user-info-container > .user-info-container-header > .user-info-container-info > h4 {
    margin-top: 15px;
    font-size: 14px;
}

.user-info-container > .user-info-container-header > .user-info-container-info > .text-muted {
    font-size: 12px;
}

.user-info-container > .user-info-container-credit {
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
}

.user-info-container > .user-info-container-credit > .user-info-container-credit-item {
    width: 50%;
    font-size: 130%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: 5px;
}

.user-info-container > .user-info-container-credit > .user-info-container-credit-item > .credit {
    width: 100%;
    color: #333;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    display: block;
}

.user-info-container > .user-info-container-credit > .user-info-container-credit-item > .label {
    width: 100%;
    color: #999;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    display: block;
    margin-top: 10px;
}

.user-info-container > .user-info-container-activity {
    margin-top: 15px;
    display: flex;
    flex-wrap: wrap;
}

.user-info-container > .user-info-container-activity .user-info-container-activity-item {
    width: 50%;
    display: flex;
    justify-content: left;
    align-items: center;
    margin-top: 10px;
}

.user-info-container > .user-info-container-activity .user-info-container-activity-item .user-info-container-activity-icon {
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: left;
    align-items: center;
    margin: 0 5px;
}

.user-info-container > .user-info-container-activity .user-info-container-activity-item .user-info-container-activity-icon img {
    width: 30px;
    height: 30px;
}

.user-info-container > .user-info-container-activity .user-info-container-activity-item .user-info-container-activity-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    color: #666;
}

.user-info-container > .user-info-container-footer {
    margin-top: 15px;
    display: flex;
    flex-wrap: nowrap;
}

.user-info-container > .user-info-container-footer .user-info-container-footer-text{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-info-container > .user-info-container-nav {
    margin-top: 15px;
}

.user-info-container > .user-info-container-nav > ul > li {
    border-bottom: 0;
}

.user-info-container > .user-info-container-nav > ul > li.header {
    border-bottom: 1px solid #ddd;
    padding: 10px 0;
}

.user-info-container > .user-info-container-nav > ul > li.header > i {
    margin: 0 10px;
}

.user-info-container > .user-info-container-nav > ul > li.header > span {
    font-weight: bold;
}

.user-info-container > .user-info-container-nav > ul > li.active > a > span {
    font-weight: bold;
}

/* 首页宣传栏 */
.top-container-main > .poster-slider {
    display: flex;
    height: 300px;
}

.top-container-main > .poster-slider > .poster-slider-wrapper {
    flex: 1;
    width: 100%;
    height: 100%;
}

.top-container-main > .poster-slider > .poster-slider-wrapper > .poster-slider-slide {
    display: flex;
    justify-content: left;
    align-items: center;
    border-radius: 5px;
}

.top-container-main > .poster-slider > .poster-slider-wrapper > .poster-slider-slide > a {
    width: 100%;
    height: 100%;
}

.top-container-main > .poster-slider > .poster-slider-wrapper > .poster-slider-slide > a > img {
    width: 100%;
    height: 300px;
    object-fit: fill;
    object-position: center;
}

/* 首页公告 */
.announcement-container {
    display: flex;
    background: #FFFFFF;
    border-radius: 5px;
    margin-top: 15px;
    padding: 5px;
    height: 40px;
    box-shadow: 0 0 15px #E9E9E9;
}

.announcement-container > .announcement-icon, .announcement-container > .announcement-more {
    height: 100%;
}

.announcement-container > .announcement-more > a, .announcement-container > .announcement-icon > i {
    line-height: 20px;
    margin: 5px 10px;
}

.announcement-container > .announcement-slider {
    flex: 1;
    height: 100%;
}

.announcement-container > .announcement-slider > .announcement-slider-wrapper {
    width: 100%;
    height: 100%;
}

.announcement-container > .announcement-slider > .announcement-slider-wrapper > .announcement-slide {
    display: flex;
    justify-content: left;
    align-items: center;
}

.announcement-container > .announcement-slider > .announcement-slider-wrapper > .announcement-slide > a {
    line-height: 20px;
}

/* 学员首页置顶入口 */
.top-entry-catalog-container {
    margin-top: 15px;
    width: 100%;
    height: 150px;
}

.top-entry-catalog-container > .top-entry-catalog-slider {
    display: flex;
}

.top-entry-catalog-container > .top-entry-catalog-slider > .top-entry-catalog-slider-wrapper {
    flex: 1;
    width: 100%;
}

.top-entry-catalog-container > .top-entry-catalog-slider > .top-entry-catalog-slider-wrapper > .top-catalog-entry-slide {
    display: flex;
    justify-content: left;
    align-items: center;
    border-radius: 5px;
}

.top-entry-catalog-container > .top-entry-catalog-slider > .top-entry-catalog-slider-wrapper > .top-catalog-entry-slide > a > img {
    display: block;
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 5px;
    box-shadow: 0 0 15px #E9E9E9;
}

/* 学员首页公开入口 */
.top-open-catalog-container {
    margin-top: 15px;
    width: 100%;
    height: 150px;
    display: none;
}

.top-open-catalog-container > .top-open-catalog-slider {
    display: flex;
}

.top-open-catalog-container > .top-open-catalog-slider > .top-open-catalog-slider-wrapper {
    flex: 1;
    width: 100%;
}

.top-open-catalog-container > .top-open-catalog-slider > .top-open-catalog-slider-wrapper > .top-catalog-open-slide {
    display: flex;
    justify-content: left;
    align-items: center;
    border-radius: 5px;
}

.top-open-catalog-container > .top-open-catalog-slider > .top-open-catalog-slider-wrapper > .top-catalog-open-slide > a > img {
    display: block;
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 5px;
    box-shadow: 0 0 15px #E9E9E9;
}

/* 学员端积分 */

.rank-container {
    position: relative;
    left: 0;
    top: 0;
    border-radius: 5px;
    margin-top: 15px;
}

.ranking-item {
    padding: 5px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.ranking-item .ranking-item-grade {
    padding: 5px 10px;
}

.ranking-item .ranking-item-avatar {
    padding: 5px 10px 5px 0;
}

.ranking-item .ranking-item-user {
    flex: 1;
}

.ranking-item .ranking-item-user .ranking-username {
    vertical-align: middle;
    color: #000;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ranking-item .ranking-item-point {
    padding: 5px 10px 5px 10px;
}

.rank-container .simple-list-content{
    font-size: 16px;
}

.rank-container .credit-pagination{
    height: 33px;
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: normal;
    text-align: center;
    letter-spacing: 0em;
    box-sizing: border-box;
    border-radius: 6px;
    opacity: 1;
}

.rank-container .credit-pagination a{
    color: grey;
}
.rank-container .credit-pagination i{
    height: 16px;
    display: inline-block;
    width: 16px;
    font-size: 18px;
    font-weight: bolder;
}

/* 学员端置顶课程 */
.hot-activity-container, .top-home-activity-container, .instructor-container {
    margin-top: 15px;
}

.full6 .hot-activity-container .datagrid-container .datagrid-body .card-view-wrapper {
    width: 33.3333% !important;
}

.full8 .hot-activity-container .datagrid-container .datagrid-body .card-view-wrapper {
    width: 25% !important;
}

.activity-container {
    padding-left: 15px;
    padding-top: 15px;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* 选课中心目录导航 */
/* ------------------------------------------------------------------------------------------------------------------ */
.training-center-catalog {
    background: #FFF;
}

.training-center-catalog > ul, .training-center-catalog > ul > li > ul {
    list-style: none;
}

.training-center-catalog > ul > li {
    position: relative;
    padding: 10px 0 10px 15px;
    border: 0 !important;
}

.training-center-catalog > ul > li > a {
    display: block;
    color: #333;
    font-size: 16px;
    font-weight: bold;
    border: 0 !important;
    padding: 5px 25px 5px 0;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
}

.training-center-catalog > ul > li > a > i {
    position: absolute;
    top: 23%;
    right: 15px;
}

.training-center-catalog > ul > li > ul {
    padding: 0;
}

.training-center-catalog > ul > li > ul > li {
    display: block;
    text-align: left;
    width: 100%;
    padding: 0 10px;
    line-height: 32px;
}

.training-center-catalog > ul > li > ul > li > i {
    display: block;
    text-align: left;
    font-size: 12px;
    color: #666;
    font-weight: normal;
    font-style: normal;
}

.training-center-catalog > ul > li > ul > li > a {
    display: block;
    width: 100%;
    color: #666;
    font-size: 14px;
    font-weight: normal;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.training-center-catalog > ul > li:hover > dl, .training-center-catalog > ul > li:focus > dl {
    display: block;
}

.training-center-catalog > ul > li > dl {
    display: none;
    position: absolute;
    z-index: 9999;
    top: 0;
    left: 100%;
}

.training-center-catalog > ul > li > dl > .catalog-expand-body{
    margin-left: 15px;
    width: 700px;
    padding: 10px;
    min-height: 81px;
    opacity: 0.98;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0px 4px 20px #f1f1f1;
    border: 1px solid #d4e2fc;
}

/*.training-center-catalog > ul > li > dl > .catalog-row {*/
/*    display: flex;*/
/*}*/

.training-center-catalog > ul > li > dl > .catalog-expand-body> .catalog-row > dt,
.training-center-catalog > ul > li > dl > .catalog-expand-body> dt {
    clear: left;
    word-break: break-word;
}

.training-center-catalog > ul > li > dl> .catalog-expand-body > .catalog-row > dd {
    word-break: break-all;
}
.training-center-catalog > ul > li > dl> .catalog-expand-body > .catalog-row > dt,
.training-center-catalog > ul > li > dl> .catalog-expand-body > .catalog-row > dd{
    display: inline-block;
    padding: 10px 5px;
    vertical-align: top;
}

.training-center-catalog > ul > li > dl> .catalog-expand-body > .catalog-row  > dt > a,
.training-center-catalog > ul > li > dl> .catalog-expand-body > .catalog-row  > dd > a {
    font-size: 14px;
}

.training-center-catalog > ul > li > dl> .catalog-expand-body > .catalog-row  > dt > a {
    /*padding: 5px;*/
    color: #222;
    font-weight: bold;
}

.training-center-catalog > ul > li > dl> .catalog-expand-body > .catalog-row  > dd > a {
    color: #222;
    margin-right: 10px;
    background: #f5f5f5;
    border-radius: 10%;
    padding: 5px 10px;
    font-size: 12px;
    display: inline-block;
    margin-bottom: 10px;
}

.training-center-catalog > ul > li:hover, .training-center-catalog > ul > li:focus {
    background: #f4f4f4;
    border-color: #f4f4f4 !important;
}

.training-center-catalog > ul > li:hover > dl, .training-center-catalog > ul > li:focus > dl {
    display: block;
    background: #f4f4f4;
}

.training-center-catalog > ul > li:hover > a > i, .training-center-catalog > ul > li:focus > a > i {
    /*display: none;*/
    /*color: #333;*/
}

.training-center-catalog > ul > li:hover > a,
.training-center-catalog > ul > li:focus > a,
.training-center-catalog > ul > li > a:hover,
.training-center-catalog > ul > li > a:focus {
    border-color: transparent;
    background: transparent;
}

.activity-nav-header {
    margin-bottom: 0;
}

.activity-nav-header .breadcrumb {
    margin-bottom: 0;
}

.activity-nav-header .breadcrumb > li, .activity-next-container .breadcrumb > li {
    display: inline;
}

/*.activity-nav-header .activity-nav-item {*/
/*    text-overflow: ellipsis;*/
/*    white-space: nowrap;*/
/*}*/

/* */
.openCatalog-container {
    padding-right: 15px;
}

.open-catalog-entry {
    padding-right: 0;
}

/*.openCatalog-container .open-catalog-entry:first-child .open-catalog-entry-content img {
    border-bottom-left-radius: 10px;
}

.openCatalog-container .open-catalog-entry:last-child .open-catalog-entry-content img {
    border-bottom-right-radius: 10px;
}*/

.open-catalog-entry-content img {
    border: 1px solid #eee;
    border-radius: 3px;
}

/* 学员端我的证书 */
.cert-box {
}

.cert-position {
    height: 180px;
}

.cert-invalid {
    width: 250px;
    height: 180px;
    float: left;
    padding-top: 80px;
    position: absolute;
    background: rgba(128, 128, 128, 0.5);
}

.learner-logo {
    padding: 0;
}

.system-help {
    padding: 8px 12px;
    border-bottom: 1px solid #e3e3e3;
}

.system-help-title {
    text-align: left;
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
}

.help-title-style-p {
    margin-left: 20px;
    margin-top: 0;
    margin-bottom: 0;
    padding-bottom: 10px;
}
.system-help:hover {
    background-color: #fafafa;
    color:#2E6CF6;
    border-radius: 4px;
}

.system-help-title > a:hover {
    color: #017E66;
    text-decoration: underline;
}
.system-help  .system-help-content{
    font-size: 14px;
    font-weight: normal;
    line-height: 22px;
    letter-spacing: 0em;
    color: #666666;
    margin-top: 4px;
}
/*
========================================================================================================================
  学员端在线课程详情页新UI样式
========================================================================================================================
*/
.activity-next-container {
    overflow: hidden;
    position: relative;
    background: transparent;
    margin-bottom: 15px;
}

.activity-next-container > .activity-detail-div-bg {
    width: 100%;
    height: 100%;
    background-image: url("/static/image/activity-detail/background.png");
    background-size: 100% 240px;
    background-repeat: no-repeat;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

.activity-next-container > .container > .activity-detail-row {
    position: relative;
    background: #FFFFFF;
    margin: 30px auto;
    padding: 30px 15px;
    box-shadow: 0 0 10px rgba(244, 248, 252);
}

.activity-next-container .activity-title > .activity-title-el {
    line-height: 30px;
}

.activity-next-container .activity-title > .activity-content > .tag-btn {
    vertical-align: middle;
}

.activity-next-container .activity-title > .activity-title-el,
.activity-next-container .activity-title > .activity-content {
    display: inline-block;
}

.activity-next-container .activity-title > .srm-activity-content {
    display: block;
}

.activity-next-container .progress-col {
    height: 20px;
}

.activity-next-container .progress {
    border-radius: 5px;
    margin: 7px 0 0;
}

.activity-next-container .progress > .progress-bar {
}

.activity-next-container .activity-detail-img {
    width: 250px;
    height: 144px;
    margin-top: 5px;
}

@media (min-width: 992px) {
    .activity-next-container .activity-detail-img {
        float: right;
    }
}

.activity-next-container .activity-detail-img, .activity-next-container .activity-detail-img > img {
    border-radius: 3px;
}

.activity-next-container .activity-detail-img > .activity-detail-type-card {
    display: none;
    top: 2px;
}

.activity-next-container .activity-detail-row:hover .activity-detail-img > .activity-detail-type-card {
    display: block;
}

.activity-next-container .activity-detail-img > .activity-detail-type-card > .label {
    font-size: 12px;
    padding: .5rem;
}

.activity-dropdown-menu {
    /*position: absolute;*/
    top: 0px !important;
    right: 0px;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    cursor: pointer;
}

.activity-next-container .activity-detail-img > .activity-dropdown-menu {
    display: none;
    top: 120px;
}

.activity-next-container .activity-detail-row:hover .activity-detail-img > .activity-dropdown-menu {
    display: block;
}

.activity-next-container .activity-detail-img > .activity-dropdown-menu > .label {
    font-size: 12px;
    padding: .5rem;
}

.activity-next-container .activity-detail-data {
    overflow: hidden;
}

.activity-next-container .activity-detail-data .activity-detail-status {
    padding: 5px 15px;
    border: 2px solid;
    border-radius: 5px;
    position: absolute;
    top: 30px;
    right: 18%;
    opacity: 0.5;
    font-size: 1.8rem;
    transform: rotate(-10deg);
    color: darkgoldenrod;
}

.activity-next-container .qr-code-operation {
    font-size: 14px;
    color: #000000;
}

.activity-next-container .activity-detail {
    font-weight: lighter;
    color: #666666;
    margin: 0;
}

.activity-next-container .activity-detail .activity-detail-items span {
    padding-right: 0;
}

.activity-next-container .activity-detail .activity-detail-items > span {
    margin-left: 20px;
    padding-left: 20px;
    border-left: 1px solid #efefef;
}

.activity-next-container .activity-detail .activity-detail-items > span:first-child {
    margin-left: 0;
    padding-left: 0;
    border-left: none;
}

.activity-next-container .activity-detail .activity-detail-items > span,
.activity-next-container .activity-detail .activity-detail-items > label {
    vertical-align: middle;
}

.activity-next-container .activity-detail .activity-detail-extra > span,
.activity-next-container .activity-detail .activity-detail-extra > label {
    font-size: 12px;
}

.activity-next-container .activity-detail > .row > div > p {
    line-height: 36px;
    margin-bottom: 0;
}

.activity-next-container .activity-detail label {
    /*font-size: 20px;*/
    font-weight: normal;
    color: #000000;
    margin-bottom: 0;
}

.activity-next-container .activity-data-row {
    padding-top: 10px;
}

.activity-next-container .activity-detail-btns {
    display: flex;
    align-items: center;
}

.activity-next-container .activity-detail-btns > .btn {
    padding: 12px 24px;
}

.floating-back-parent-training {
    position: fixed;
    bottom: 39px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    width: 56px;
    height: 56px;
    overflow: visible;
    border-radius: 1000px;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 4px 10px 0 rgba(2, 11, 24, 0.1);
    transition: box-shadow 0.2s;
    user-select: none;
}

.floating-back-parent-training:hover {
    box-shadow: 0 6px 14px 0 rgba(2, 11, 24, 0.16);
}

.floating-back-parent-training:active {
    box-shadow: 0 2px 6px 0 rgba(2, 11, 24, 0.08);
}

.floating-back-parent-training .floating-back-icon {
    width: 32px;
    height: 32px;
}

.floating-back-parent-training .floating-back-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background-color: #141737;
    color: #ffffff;
    font-size: 12px;
    line-height: 1.67;
    padding: 5px 8px;
    border-radius: 2px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s;
}

.floating-back-parent-training .floating-back-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #141737;
}

.floating-back-parent-training:hover .floating-back-tooltip {
    opacity: 1;
}

.activity-next-container .activity-detail > .btn.btn-main {
    margin-top: 20px;
    font-size: 16px;
    width: 120px;
}

.activity-next-container .sns-score {
    display: flex;
    align-items: center;
}

.activity-next-container .sns-score > img {
    width: 16px;
    height: 16px;
}

.activity-next-container .activity-data-col {
    display: flex;
    line-height: 46px;
}

.activity-next-container .activity-data-col > div {
    display: flex;
    align-items: center;
    justify-content: center;
}

.activity-next-container .activity-data-col > div > img {
    width: 12px;
    height: 12px;
}

.activity-next-container .activity-data-col > div > img.btn-praise {
    cursor: pointer;
}

.activity-content-div .comment-area {
    padding: 0 0 15px;
}

.activity-content-div .activity-attendance span, .activity-content-div .activity-attendance span > label {
    font-weight: normal;
    color: #666666;
}

.activity-content-div .pie {
    width: 14px;
    height: 14px;
    margin-right: 8px;
    margin-top: -2px;
    display: inline-block;
    vertical-align: middle;
    border-radius: 50%;
    background: #655;
}

.activity-content-div .pie::before {
    content: '';
    display: block;
    margin-left: 50%;
    height: 100%;
    border-radius: 0 100% 100% 0/50%;
    background-color: inherit;
    transform-origin: left;
}

.activity-content-div .pie.more-than-half::before {
    background-color: yellowgreen;
}

.simple-pull-item {
    font-size: 10px;
}

.simple-pull-item-width {
    max-width: 50%;
}

.simple-pull-item-white-space {
    white-space: nowrap;
}

.activity-related-row > a, .activity-related-row .activity-related-img, .activity-related-row .activity-related-message {
    display: flex;
    color: black;
}

.activity-related-row .activity-related-img {
    flex-shrink: 0;
    width: 96px;
    height: 68px;
    background-size: 96px 68px;
    position: relative;
    border-radius: 3px;
}

.activity-related-row .activity-related-img > .activity-type-card {
    position: absolute;
    top: -1px;
    left: 0;
}

.activity-related-row .activity-related-img > .activity-type-card > .label {
    border-radius: 3px 0 3px 0;
}

.activity-related-row .activity-related-message {
    flex-direction: column;
    justify-content: space-between;
    border-bottom: 1px solid #efefef;
    padding-bottom: 5px;
}

.activity-related-row .activity-related-message > h5 {
    line-height: 1.5;
}

.activity-related-row .activity-related-message > .activity-related-icons {
    display: flex;
    font-size: 12px;
    font-weight: lighter;
    line-height: 12px;
    height: 12px;
}

.activity-related-row .activity-related-message > .activity-related-icons > div {
    display: flex;
    align-items: center;
}

.activity-related-row .activity-related-message > .activity-related-icons img {
    width: 12px;
    height: 12px;
}

#activity .lms-nav-tabs-custom {
    box-shadow: 0 0 10px rgba(244, 248, 252);
}

.package-container {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid #efefef;
    padding: 10px 0 10px 5px;
}

.package-container > .package-detail {
    justify-content: space-between;
}

.package-message > .package-index, .package-message > .package-title {
    font-size: 15px;
    font-weight: bold;
    overflow: hidden;
    white-space: break-spaces;
    text-overflow: ellipsis;
    line-height: initial;
}

.package-message > .package-index {
    padding-right: 20px;
    min-width: 60px;
}

.package-detail > .package-message, .package-message > .package-title {
    flex-grow: 1;
}

.package-detail > .package-message > div, .package-detail > .package-tools {
    min-height: 40px;
    display: flex;
    align-self: center;
    align-items: center;
}

.package-container > .package-detail, .package-detail > .package-message {
    display: flex;
}

.package-detail > .package-message {
    max-width: calc(100% - 80px);
}

.package-container > ul.nav {
    margin: 0 -10px;
}

.package-container .package-resource, .package-resource > .package-resource-type {
    display: flex;
    align-items: center;
}

.package-container .package-resource {
    padding: 10px 10px 10px 30px;
    cursor: pointer;
    border-radius: 3px;
}

.package-container .package-resource.active {
    background-color: #eff4ff;
}

.package-container > .package-detail .disabled, .package-container .package-resource .disabled {
    opacity: .6;
}

.package-resource > .package-resource-type > img {
    width: 18px;
    height: 18px;
    margin-right: 6px;
    display: flex;
    flex-shrink: 0;
}

.package-resource > .package-resource-type > span, .package-resource > .package-resource-index {
    display: flex;
    flex-shrink: 0;
    padding: 0 6px;
}

.package-resource > .package-resource-title {
    display: flex;
    flex-grow: 1;
    padding: 0 6px;
    word-break: break-word;
}

.package-resource > .package-resource-title.active, .package-resource > .package-resource-index.active,
.package-resource-status > .package-resource-percent {
    color: #3c8dbc;
}

.package-resource > .package-resource-status-div {
    display: flex;
    flex-shrink: 0;
}

.package-resource > .package-resource-status {
    display: flex;
    align-items: center;
    line-height: 20px;
}

.package-resource-status > .package-resource-status-icon {
    width: 16px;
    height: 16px;
    font-size: 16px;
    margin-left: 5px;
    margin-right: 10px;
}

.package-resource-status > i.package-resource-status-icon:before {
    margin-left: 1px;
}

.micro-course-header {
    aspect-ratio: 32 / 5;
    width: 100%;
    text-align: center;
    background-image: url("/static/image/micro-course-background.png");
    background-size: cover;
    display: flex;
    align-items: center;
}

.live-header {
    aspect-ratio: 32 / 5;
    width: 100%;
    text-align: center;
    background-image: url("/static/image/live-center-bg.png");
    background-size: cover;
    display: flex;
    align-items: center;
}

.micro-course-title, .live-title {
    margin: auto;
    height: 81px;
    opacity: 1;
    font-family: Source Han Sans CN;
    font-size: 56px;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0em;
    color: #FFFFFF;
}

.micro-course-tab {
    width: 100%;
    margin-bottom: 0px;
    box-shadow: none;
}

.micro-course-nav {
    width: 100%;
    height: 100px;
    box-shadow: none;
    position: relative;
    margin: 0px;
}

.micro-course-nav-tabs {
    border: none;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
}

.micro-course-tab-font {
    opacity: 1;
    font-family: Source Han Sans CN;
    font-size: 14px;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0em;
    color: #2E6CF5;
    top: 52px;
}

.micro-course-tab-font2 {
    opacity: 1;
    font-family: Source Han Sans CN;
    font-size: 16px;
    font-weight: normal;
    line-height: normal;
    letter-spacing: 0em;
    color: #333333;
    margin-right: 40px;
    margin-bottom: 12px;
}

.micro-course-tab-font3 {
    color: #333333;
}

.micro-course-tab-font2:hover {
    color: #999;
    cursor: pointer;
}

.micro-course-tab-font3:hover {
    color: #999;
    cursor: pointer;
}

.micro-course-create {
    height: 47px;
    border-radius: 5px !important;
    opacity: 1;
    background: #2E6CF5;
    font-size: 16px;
    font-weight: normal;
    line-height: normal;
    margin-top: 40px;
}

.micro-course-card-view-wrapper {
    padding: 0px;
    margin-bottom: 24px;
    flex-basis: calc(25% - 18px);
}

.micro-course-margin {
    margin-right: 24px;
}

.micro-course, .live {
    display: flex;
    flex-wrap: wrap;
}

.micro-course-card-view {
    /*box-shadow: none !important;*/
    border-radius: 10px
}

.micro-course-content {
    padding: 0px 50px 20px 50px;
}

.micro-course-box {
    border: 0px;
}

.micro-course-box-header {
    padding: 20px;
}

.micro-course-container {
    width: 100%;
}

.creatorInfo {
    border-top: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
}

.creatorInfoAvatar {
    display: inline-block;
    width: 15%;
    height: 15%;
    border-radius: 50%;
    border: 1px solid #e0e0e0;
    margin: 10px 15px 0px 10px;
    position: relative;
    overflow: hidden;
}

.creatorInfoAvatar::before {
    content: "";
    display: block;
    padding-top: 100%;
}

.creatorInfoName {
    width: calc(85% - 10px);
    color: #7a7979;
    margin-top: 10px;
}

.myMicroCourse {
    display: flex;
    font-size: 20px;
    color: #333333;
    font-weight: 500;
    margin-top: 50px;
    position: absolute;
    bottom: 12px;
}

.myMicroCourseTab {
    display: flex;
    font-size: 14px;
    color: #999999;
    font-weight: 400;
    margin-left: 20px;
    margin-top: 7px;
}

.myMicroCourseTabItem {
    margin-left: 10px;
}

.MicroCourseFlex {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.textMaxTowRowLearn {
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    max-height: 2.4em;
    line-height: 1.2em;
    border-bottom: 0px !important;
}

.myMicroCourseCenter, .myLiveCenter {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 65vh;
    flex-direction: column;
}

.error {
    border-color: #dd4b39 !important;
}

.skin-blue .main-color-svg.active, .skin-blue-light .main-color-svg.active, .skin-blue .angle-center, .skin-blue-light .angle-center {
    color: #2e6cf6;
    fill: #2e6cf6;
}

.skin-blue .svg-stroke-color, .skin-blue-light .svg-stroke-color {
    stroke: #2e6cf6;
}

.skin-red .main-color-svg.active, .skin-red-light .main-color-svg.active, .skin-red .angle-center, .skin-red-light .angle-center {
    color: #dd4b39;
    fill: #dd4b39;
}

.skin-red .svg-stroke-color, .skin-red-light .svg-stroke-color {
    stroke: #dd4b39;
}

.skin-yellow .main-color-svg.active, .skin-yellow-light .main-color-svg.active, .skin-yellow .angle-center, .skin-yellow-light .angle-center {
    color: #f39c12;
    fill: #f39c12;
}

.skin-yellow .svg-stroke-color, .skin-yellow-light .svg-stroke-color {
    stroke: #f39c12;
}

.skin-purple .main-color-svg.active, .skin-purple-light .main-color-svg.active, .skin-purple .angle-center, .skin-purple-light .angle-center {
    color: #605ca8;
    fill: #605ca8;
}

.skin-purple .svg-stroke-color, .skin-purple-light .svg-stroke-color {
    stroke: #605ca8;
}
.skin-black .main-color-svg.active, .skin-black-light .main-color-svg.active, .skin-black .angle-center, .skin-black-light .angle-center {
    color: #444;
    fill: #444;
}

.skin-green .main-color-svg.active, .skin-green-light .main-color-svg.active, .skin-green .angle-center, .skin-green-light .angle-center {
    color: #008d4c;
    fill: #008d4c;
}

.skin-green .svg-stroke-color, .skin-green-light .svg-stroke-color {
    stroke: #008d4c;
}

.myMCEmptyTpl {
    display: flex;
    flex-direction: column;
    align-items: center;
}


/*
========================================================================================================================
  学员端在线课程详情页新UI样式
========================================================================================================================
*/

/* 外部平台轮播图 */
.external-learn-platform-slider {
    display: flex;
}

.external-learn-platform-slider > .external-learn-platform-slider-wrapper {
    flex: 1;
    width: 100%;
    height: 100%;
}

.external-learn-platform-slider > .external-learn-platform-slider-wrapper > .external-platform-item {
    display: flex;
    justify-content: left;
    align-items: center;
}

.external-learn-platform-slider > .external-learn-platform-slider-wrapper > .external-platform-item > a {
    width: 100%;
    height: 100%;
}

.external-learn-platform-slider > .external-learn-platform-slider-wrapper > .external-platform-item > a > img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    object-position: center;
    border-radius: 5px;
}

.roadmap-section-tip {
    word-break: break-word;
}

.search-page em, .search-page i, .system-help-search-page em, .system-help-search-page i {
    font-style: normal;
}

.search-page em,.system-help-search-page em {
    color: #CC0000;
}

.nav-tabs-custom {
    margin-bottom: 20px;
    background: #fff;
    border-radius: 8px;
    box-shadow:none;
}

.live-status-tab {
    display: flex;
    height: 80px;
    align-items: center;
}

.credit-tabs, .credit-time-tabs {
    display: flex;
    position: relative;
    background-color: #ddd;
    border-radius: 25px; /* 整体圆角 */
    overflow: hidden;
    border: solid 1px #ddd;
}

.credit-tabs-background, .credit-time-tabs-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background: white;
    border-radius: 25px;
    transition: all 0.5s ease; /* 平滑的移动动画 */
    z-index: 0;
}

.credit-tab, .credit-time-tab {
    flex: 1;
    text-align: center;
    line-height: 28px;
    font-size: 14px;
    cursor: pointer;
    position: relative;
    z-index: 1; /* 确保文本显示在背景层上方 */
    color: #555;
    transition: color 0.3s ease;
}

.skin-blue .credit-tab.active, .skin-blue .credit-time-tab.active {
    color: #2e6cf6;
    fill: #2e6cf6;
}

.skin-red .credit-tab.active, .skin-red .credit-time-tab.active {
    color: #dd4b39;
    fill: #dd4b39;
}

.skin-yellow .credit-tab.active, .skin-yellow .credit-time-tab.active {
    color: #f39c12;
    fill: #f39c12;
}

.skin-purple .credit-tab.active, .skin-purple .credit-time-tab.active {
    color: #605ca8;
    fill: #605ca8;
}

.skin-black .credit-tab.active, .skin-black .credit-time-tab.active {
    color: #444;
    fill: #444;
}

.skin-green .credit-tab.active, .skin-green .credit-time-tab.active {
    color: #008d4c;
    fill: #008d4c;
}

.credit-rank, .credit-time-rank {
    background: #FFF;
    box-shadow: 0 0 15px #E9E9E9;
    margin-top: 10px;
    border-radius: 8px;
}

ul.rank-nav-tabs {
    display: flex;
}

ul.rank-nav-tabs > li > a {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    word-break: break-all;
    -webkit-line-clamp: 1;
}

.package-resource .package-resource-status-div > .package-resource-status {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.resource-icon {
    display: flex;
    align-items: center;
}

.resource-icon > img {
    width: 18px;
    height: 18px;
    margin-right: 6px;
    display: flex;
    flex-shrink: 0;
}

/* Credit display styles - adjust layout to prevent overflow */
.card-view-wrapper .card-view.main-card-view .card-view-content-course .card-view-content-text {
    display: flex !important;
    align-items: center;
    height: auto !important;
    min-height: 22px !important;
}

.card-view-wrapper .card-view.main-card-view .card-view-content-course .card-view-content-text > .enrollment-count {
    float: none !important;
}

.card-view-wrapper .card-view.main-card-view .card-view-content-course .card-view-content-text > .collect-operation {
    float: none !important;
}

.card-view-wrapper .card-view.main-card-view .card-view-content-course .card-view-content-text > .credit-display {
    display: flex;
    align-items: center;
    margin-left: auto;
}

.card-view-wrapper .card-view.main-card-view .card-view-content-course .card-view-bottom-live .card-view-content-text > .credit-display {
    margin-left: inherit !important;
}

.card-view-wrapper .card-view.main-card-view .card-view-content-course .card-view-content-text > .credit-display .credit-img {
    width: 14px;
    height: 13px;
    margin-right: 4px;
}

/* Live view bottom layout - align time/count/credit on left, button on right */
.card-view-content-live .card-view-bottom-live {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    width: 100%;
}

.card-view-content-live .card-view-bottom-live > div:first-child {
    flex: 1 1 auto;
    display: flex !important;
    flex-direction: column !important;
}

.card-view-content-live .card-view-bottom-live .card-view-btn-content {
    flex: 0 0 auto;
    margin-left: 10px;
}

/* Live view credit display styles */
.card-view-content-text.card-view-live-bottom-left {
    position: static !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 8px;
}

.card-view-live-bottom-left .enrollment-count {
    float: none !important;
    display: flex !important;
    align-items: center;
    flex-shrink: 0;
}

.card-view-live-bottom-left .live-credit-display {
    float: none !important;
    display: flex !important;
    align-items: center;
    flex-shrink: 0;
}

.card-view-live-bottom-left .live-credit-display .credit-img {
    width: 14px;
    height: 13px;
    margin-right: 6px;
}

/* List view credit display styles */
.list-view-wrapper .list-view.main-list-view .list-view-content {
    position: relative;
    display: flex;
    flex-direction: column;
}

.list-view-wrapper .list-view.main-list-view .list-view-content .list-view-content-text {
    flex: 0 0 auto;
}

.list-view-wrapper .list-view.main-list-view .list-view-content .list-credit-display {
    display: flex;
    align-items: center;
    margin-top: auto;
    padding-top: 10px;
    font-size: 12px;
}

.list-view-wrapper .list-view.main-list-view .list-view-content .list-credit-display .credit-img {
    width: 14px;
    height: 13px;
    margin-right: 6px;
}

.only-credit-time-box {
    padding: 0 !important;
    display: inline-block !important;
    width: 100%;
}
.only-credit-time-box .user-info-container-credit-time-box {
    position: relative;
    min-height: 58px;
    display: flex;
}
.only-credit-time-box .user-info-container-credit-time-box img {
    width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
}
.only-credit-time-box .user-info-container-credit-time-box .credit-time-clock-icon {
    z-index: 2;
    width: 70px;
    display: flex;
    justify-content: end;
    align-items: center;
    padding-right: 10px;
}
.only-credit-time-box .user-info-container-credit-time-box .credit-time-clock-icon svg {
    z-index: 2;
}
.only-credit-time-box .user-info-container-credit-time-box .user-credit-time-point-box {
    flex: 1;
    display: flex;
    align-items: center;
    z-index: 2;
    font-weight: 700;
    font-size: 14px;
}
.credit-learn-content-box {
    display: flex;
    height: 110px;
    justify-content: end;
}
.credit-learn-item {
    min-width: 33%;
}
.credit-vertical-line-box {
    width: 2px;
    height: 100%;
    align-content: center;
}

.credit-vertical-line-box .credit-vertical-line {
    width: 2px;
    height: 46px;
    background-color: #E8EBF0;
    align-content: center;
}