:where(.mm-slideout) {
    position: initial !important;
}
.modal-backdrop {
    --bs-backdrop-bg: rgba(0, 0, 0, 0.5) !important;
}

.badge.text-bg-green,
.badge.text-bg-success {
    color: rgba(var(--bs-success-rgb), 1) !important;
    background-color: RGBA(
        var(--bs-success-rgb),
        var(--bs-bg-opacity, 1)
    ) !important;
}

.badge.text-bg-cyan {
    color: rgba(var(--bs-cyan-rgb), 1) !important;
    background-color: RGBA(
        var(--bs-cyan-rgb),
        var(--bs-bg-opacity, 1)
    ) !important;
}
.badge.text-bg-pink {
    color: rgba(var(--bs-pink-rgb), 1) !important;
    background-color: RGBA(
        var(--bs-pink-rgb),
        var(--bs-bg-opacity, 1)
    ) !important;
}
.badge.text-bg-red,
.badge.text-bg-error,
.badge.text-bg-danger {
    color: rgba(var(--bs-danger-rgb), 1) !important;
    background-color: RGBA(
        var(--bs-danger-rgb),
        var(--bs-bg-opacity, 1)
    ) !important;
}

.badge.text-bg-purple {
    color: rgba(var(--bs-purple-rgb), 1) !important;
    background-color: RGBA(
        var(--bs-purple-rgb),
        var(--bs-bg-opacity, 1)
    ) !important;
}

.badge.text-bg-blue,
.badge.text-bg-info {
    color: rgba(var(--bs-primary-rgb), 1) !important;
    background-color: RGBA(
        var(--bs-primary-rgb),
        var(--bs-bg-opacity, 1)
    ) !important;
}
.badge.text-bg-yellow {
    color: #897a0f !important;
    background-color: RGBA(
        var(--bs-yellow-rgb),
        var(--bs-bg-opacity, 1)
    ) !important;
}
.badge.text-bg-warning {
    color: rgba(var(--bs-warning-rgb), 1) !important;
    background-color: RGBA(
        var(--bs-warning-rgb),
        var(--bs-bg-opacity, 1)
    ) !important;
}

.list-item-contest {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 20px;
}

.list-item-contest .item-contest {
    background: #fff;
    border-radius: 5px;
    padding: 20px;
    -webkit-box-shadow: rgba(60, 64, 67, .3) 0 1px 2px 0, rgba(60, 64, 67, .15) 0 1px 3px 1px;
    box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .3), 0 1px 3px 1px rgba(60, 64, 67, .15);
}

.list-item-contest .item-contest .info .heading {
    color: #000;
    font-weight: bold;
    font-size: 18px;
    line-height: 1.5;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 14px;
}

.list-item-contest .item-contest .info .time {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 20px;
}
.list-item-contest .item-contest .info .time svg {
    width: 30px;
    height: 30px;
}
.list-item-contest .item-contest .info .time i {
    font-size: 20px;
    color: var(--theme-color);
}
.list-item-contest .item-contest .info .time span {
    font-size: 16px;
    line-height: 1.5;
    display: inline-block;
}
.list-item-contest .item-contest .info .button .btn {
    letter-spacing: 0;
    padding: 6px 12px;
}

.list-item-contest-horizontal .item-contest.item-horizontal {
    display: grid;
    grid-template-columns: 40px auto;
    align-items: center;
    gap: 20px;
}

.list-item-contest-horizontal .item-contest.item-horizontal a {
    color: #000;
}

.list-item-contest-horizontal .item-contest.item-horizontal .img svg {
    width: 40px;
    height: 40px;
}

.list-item-contest-horizontal .item-contest.item-horizontal .info .heading {
    margin: 0;
    font-size: 18px;
    line-height: 1.5;
    text-transform: uppercase;
}
.list-item-contest-horizontal .item-contest.item-horizontal .info .heading:hover {
    color: var(--theme-color);
}
.list-item-contest-horizontal .item-contest.item-horizontal .info .time {
    margin: 0;
}
.list-item-contest-horizontal .item-contest.item-horizontal .info .time i {
    color: var(--theme-color);
    margin-right: 8px;
}
.contest-detail {
}
.contest-detail .header-title.contest-name {
    padding: 14px;
    border-radius: 4px;
    background: var(--theme-color);
    color: #fff;
    text-transform: uppercase;
    font-size: 24px;
    line-height: 1.5;
    font-weight: 800;
}

.contest-detail .contest-box {
    background: #fff;
    border-radius: 5px;
    padding: 20px;
    -webkit-box-shadow: rgba(60, 64, 67, .3) 0 1px 2px 0, rgba(60, 64, 67, .15) 0 1px 3px 1px;
    box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .3), 0 1px 3px 1px rgba(60, 64, 67, .15);
}
.contest-detail .contest-title {
    font-size: 18px;
    line-height: 1.5;
    font-weight: bold;
    padding: 20px 0;
    margin-bottom: 8px;
}

.contest-detail .contest-box .total-time {
    padding: 15px 10px;
    background: #f1f1f1;
    text-align: center;
    margin-bottom: 18px;
}

.contest-detail .contest-box .total-time p {
    margin: 0;
    font-size: 18px;
    line-height: 1.5;
    font-weight: 700;
}
.contest-detail .contest-box .total-time p span {
    color: var(--theme-color);
}

.contest-detail .timeline__list {

}

.contest-detail .timeline__list .timeline__item {
    border-left: 1px solid #f1f1f1;
    padding: 8px 0 8px 48px;
    position: relative;
    font-size: 1.2rem;
}

.contest-detail .timeline__list .timeline__item:before {
    content: " ";
    width: 10px;
    height: 10px;
    background: var(--theme-color);
    border-radius: 50%;
    position: absolute;
    left: -.3em;
    top: .95rem;
}

.contest-detail .timeline__list .timeline__item > * {
    display: block;
}

.contest-detail .img-main {
    padding: 30px;
}

@media(max-width: 991px) {
    .list-item-contest {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 20px;
    }
}


@media(max-width: 768px) {
    .list-item-contest {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-gap: 20px;
    }
}

.form-question-group {
    background-color: #f6f8fb;
    border-radius: 5px;
    padding: 10px;
}

.box-footer {
    padding: 10px;
    background-color: #f6f8fb;
}

.contest-body .image-description {
}

.form-question-group input[type="color"] {
    max-width: 100px;
}

.form-control.form-small {
    max-width: 200px;
}

.contest-body .picture-group.picture-group-short {
    align-items: flex-end;
}
.contest-body .picture-group.picture-group-short .input {
    width: 50px;
    height: 50px;
}
.contest-body .picture-group.picture-group-short .input .form-control {
    font-size: 30px;
    line-height: 40px;
    text-align: center;
}

.contest-body .fill-word-group .line {
    display: grid;
    align-items: center;
    grid-template-columns: auto 4fr;
    gap: 4px;
    margin-bottom: 8px;
}

.contest-body .fill-word-group .line .fill-word-question {
    min-width: 100px;
}

.contest-body .fill-word-group .line .fill-word-answer .form-control-small {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 0;
    border: 0;
    border-bottom: 1px solid #aeaeae;
    width: 100px;
}

.contest-body .form-fill-character-box {
    display: flex;
    gap: 20px;
    align-items: center;
    margin-bottom: 20px;
}

.contest-body .form-fill-character-box .box-image  {
    width: 25%;
    max-height: 200px;
    max-width: 200px;
}

.contest-body .form-fill-character-box .box-image .image-description {

}
.contest-body .form-fill-character-box .box-image .image-description img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.contest-body .fill-character-group .line {
    display: grid;
    align-items: center;
    grid-template-columns: auto 4fr;
    gap: 4px;
    margin-bottom: 10px;
}

.contest-body .fill-character-group .line .fill-character-question {
    min-width: 20px;
}

.contest-body .fill-character-group .line .fill-character-answer .form-control-small {
    display: inline-block;
    padding: 2px;
    border-radius: 0;
    border: 0;
    border-bottom: 1px solid #aeaeae;
    width: 25px;
    text-align: center;
}

.contest-body .form-control.border-bottom {
    border-radius: 0;
    border: 0;
    border-bottom: 1px solid #aeaeae !important;
}

.contest-body .form-control.border-bottom:focus {
    box-shadow: none;
    border-bottom: 1px solid var(--theme-color) !important;
}

.contest-body .form-control.form-word {
    max-width: 100px;
    display: inline;
    text-align: center;
}

.exam__sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    background: #fff;
    padding: 20px;
}
.exam__timer {
    line-height: 36px;
    padding: 16px 0;
    margin: 10px 0;
    font-size: 36px;
    font-weight: bold;
    display: block;
    text-align: center;
    border: 2px solid var(--theme-color);
    border-radius: 4px;
    color: var(--theme-color);
}
.exam__table-content {
    display: block;
    max-height: calc(100vh - 66px);
    overflow-y: auto;
}

.exam__index__skill {
    margin-bottom: 8px;
}

.exam__index__skill.link {
    display: none;
}

.exam__index__skill.link.active {
    display: block;
}

.exam__index__title {
    padding: 8px 0;
    text-align: center;
    margin-bottom: 8px;
    color: #000;
    font-weight: 500;
    font-size: 24px;
    line-height: 1.4;
}

.exam__index__question {
    background: #e6e6e6;
    border-radius: 50%;
    color: #000 !important;
    display: inline-block;
    width: 36px;
    height: 36px;
    line-height: 36px;
    margin: 8px 0;
}

.exam__index__question:hover {
    -webkit-box-shadow: 0 0 8px #9e9e9e;
    box-shadow: 0 0 8px #9e9e9e;
    text-decoration: none;
}

.exam__index__question.active {
    background: var(--theme-color);
    color: #fff !important;
}

.exam__primary {
    font-size: 16px;
    line-height: 1.5;
}

.exam__skill__wrapper {
    display: none;
}

.exam__skill__wrapper.active {
    display: block;
}

.exam__skill__wrapper .exam__skill__title {
    text-align: center;
    padding: 8px 0;
    margin: 16px 0;
    color: #fff;
    background: var(--theme-color);
    font-size: 24px;
    line-height: 1.5;
}

.exam__skill__wrapper .exam__part__title-sub {
    text-align: center;
    padding: 8px 0;
    margin: 16px 0;
    color: #fff;
    font-size: 16px;
    line-height: 1.5;
    background: var(--theme-color-2);
}

.exam__skill__wrapper .contest-box {
    background: #fff;
    padding: 20px 20px 15px;
}

.exam__skill__wrapper .form-check {
    margin-bottom: 0;
    flex: 1
}

.exam__skill__wrapper label {
    font-weight: 400;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 0;
}

.exam__question__article {
    margin-bottom: 0;
}

.exam__question__article rt {
    font-family: DengXian !important;
    font-size: 15px !important;
}
.exam__question__article * {
    letter-spacing: 2px;
    word-spacing: 1px;
}
.exam__question__article *, .exam__skill__wrapper ruby {
    font-family: SimSun !important;
    font-size: 18px !important;
    margin-top: 4px;
}

.nav-bar-right {
    display: flex;
    justify-content: flex-end;
    gap: 20px;
    align-items: center;
}

.exam__total__time {
    margin: 0;
    font-size: 20px;
    line-height: 1.2;
}

.contest-header .btn-submit {
    text-transform: uppercase;
    font-size: 18px;
    padding: 10px 20px;
    border-radius: 40px;
}

.question__item {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    padding: 10px;
    border: 1px solid #f1f1f1;
}

.question__item .question__item__index {
    text-align: center;
    min-width: 40px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 50%;
    border: 1px solid var(--theme-color);
}
.question__item .question__item__content {
    flex: 1;
}

@media(max-width: 768px) {
    .question__item .question__item__content {
        overflow: scroll;
    }
    .question__item .quiz-answer-group {
        gap: 10px;
    }
    .exam__skill__wrapper .form-check {
        flex: auto;
    }
}