.course-consumption-section {
    height: 100vh;
    text-align: center;
    background-image: linear-gradient(60deg, #e9edf3, #edf1f7);
}

.course-consumption-section .close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
}

.close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
}

.course-consumption-section .progress-list {
    position: absolute;
    top: 35px;
    left: 50%;
    transform: translateX(-50%);
}

.list-unstyled {
    margin: 0;
    padding: 0;
    list-style: none;
}

.list-key-board {
    display: flex;
    align-items: center;
}

.course-consumption-section .progress-list li {
    display: inline-block;
    width: 58px;
    height: 5px;
    background-color: #d8d8d8;
}

.ph-blue {
    background-image: linear-gradient(29deg, #514bed, #38e5c7);
}

.course-consumption-section .progress-list li+li {
    margin-left: 15px;
}

.course-consumption-section .list-key-board li+li {
    margin-left: 50px !important;
    cursor: pointer;
}

.course-consumption-section .list-key-board li:hover {
    text-decoration: none;
    transform: translateY(-3px);
}

.course-consumption-section .list-key-board li {
    transition: all 0.3s ease;
}

.course-consumption-section .progress-list li {
    display: inline-block;
    width: 58px;
    height: 5px;
    background-color: #d8d8d8;
}

.course-consumption-section .shortcuts {
    position: absolute;
    left: 50%;
    bottom: 17px;
    transform: translateX(-50%);
    white-space: nowrap;
}

.list-unstyled {
    margin: 0;
    padding: 0;
    list-style: none;
}

.course-consumption-section .shortcuts li {
    display: inline-block;
}

.course-consumption-section .shortcuts li .icon {
    display: inline-block;
    margin-right: 10px;
}

.semi-bold,
.course-consumption-section .shortcuts li {
    font-weight: 600 !important;
}

.text-grey,
.text-light-grey,
.course-consumption-section .shortcuts li {
    color: var(--e-global-color-active-text);
}

.course-consumption-section .shortcuts li {
    font-size: 24px;
    letter-spacing: 0.5px;
    line-height: 1.36;
    display: flex;
    align-items: center;
}

li {
    display: list-item;
    text-align: -webkit-match-parent;
}

#modal-hoc-tut ol,
ul,
dl {
    margin-top: 0;
    margin-bottom: 1rem;
}

#modal-hoc-tut ul {
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
}

svg {
    overflow: hidden;
    vertical-align: middle;
}

.course-consumption-section .shortcuts li+li {
    margin-left: 30px;
}

.course-consumption-section .content {
    position: absolute;
    text-align: left;
    top: 50%;
    left: 50%;
    width: 80%;
    height: 80%;
    padding: 50px;
    transform: translate(-50%, -50%);
    background: #fff;
    overflow: scroll;
    overflow-x: hidden;
}

.course-consumption-section .buttons.prev {
    left: 125px;
}

.course-consumption-section .buttons.next {
    right: 143px;
}

.course-consumption-section .buttons {
    position: fixed;
    top: 50%;
    display: inline-block;
    width: 55px;
    height: 55px;
    line-height: 55px;
    text-align: center;
    border-radius: 50%;
    transform: translateY(-50%);
    background-image: linear-gradient(51deg, #e9edf3, #edf1f7);
    z-index: 999;
}

.justify-content-end {
    justify-content: flex-end !important;
}

.d-flex {
    display: flex !important;
}

.course-consumption-section .content .inner-content {
    position: relative;
    padding: 15px;
    min-height: 500px;
}

.course-consumption-section .content .max-content,
.course-consumption-section .content .h3 {
    max-width: 770px;
    margin-left: auto;
    margin-right: auto;
}

.p-b-45 {
    padding-bottom: 45px;
}

.p-t-30 {
    padding-top: 30px;
}

article,
aside,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section {
    display: block;
}

.container.mini {
    width: 698px;
}

.text-center {
    text-align: center;
}

.m-b-15 {
    margin-bottom: 15px;
}

#modal-hoc-tut .text-grey,
.program-codes-section .navigation .content ul li a.active,
.program-codes-section .navigation .content ul li a:hover {
    color: #434343;
}

.m-b-80 {
    margin-bottom: 80px !important;
}

.m-t-30 {
    margin-top: 30px !important;
}

.m-b-20 {
    margin-bottom: 20px !important;
}

.m-b-30 {
    margin-bottom: 30px !important;
}

.text-center {
    text-align: center !important;
}

.btn.btn-2.lg {
    padding: 17px 58px !important;
    border-radius: 30px !important;
}

.topic-completion-section {
    position: relative;
}

.btn.btn-2,
btn.btn-1.lg,
.btn.btn-2.lg,
.h4,
.bot-overlay .bot-section .content .button-group .btn,
.form-control,
.settings-section .setting-list li a,
.program-codes-section .navigation .content ul li a,
.course-consumption-section .content .square-btn {
    font-size: 20px;
    letter-spacing: 0.5px;
    line-height: 1.33;
}

.btn.btn-2 {
    min-width: 182px;
    text-align: center;
    padding: 10px 27px;
    color: #ffffff;
    border-radius: 22px;
}

.btn.bg-blue {
    background-image: linear-gradient(to right, #4187f7, #4c26ff);
}

.light,
.mat-radio-group .mat-radio-label-content,
.tabs .mat-tab-body-wrapper .mat-tab-body-content,
.accordian .mat-expansion-panel-body,
.accordian ol.ongoing-list li,
.program-codes-section .navigation .content ul li a,
.footer ul li a,
.notify-message-section .notify-body .notify-list li,
.mob-footer ul li a {
    font-weight: 300 !important;
}

.btn.btn-2 {
    min-width: 182px;
    text-align: center;
    padding: 10px 27px;
    color: #ffffff;
    border-radius: 22px;
}

.btn.bg-blue {
    background-image: linear-gradient(to right, #4187f7, #4c26ff);
}

@media (min-width: 776px) and (max-width: 1200px) {
    .course-consumption-section .list-key-board li {
        font-size: 26px !important
    }
}

.btn-success-modal-hoc-tuts {
    animation: shake-button-success 0.2s;
    animation-iteration-count: 7;
}

@keyframes shake-button-success {
    0% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(5deg);
    }
    50% {
        transform: rotate(0eg);
    }
    75% {
        transform: rotate(-5deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

.yeu-cau-mobile-modal-hoc-tuts {
    background: white;
    margin-top: 17%;
    padding-top: 29px;
}

.btn-disable-modal-hoc-tuts button {
    background-image: none !important;
    background-color: var(--e-global-color-disable-text) !important;
    pointer-events: none;
}

.text-disable-modal-hoc-tuts {
    color: var(--e-global-color-disable-text) !important;
    pointer-events: none;
}