.course-content-text {
    max-height: 350px;
    position: relative;
    overflow: hidden;
}

    .course-content-text.collapsed {
        height: auto;
        max-height: max-content;
    }

    .course-content-text .course-info-btn-display-more {
        height: 30px;
        width: 100%;
        position: absolute;
        bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 100px;
        padding-bottom: 15px;
        cursor: pointer;
        background-image: linear-gradient(180deg, hsla(0,0%,100%,.3),#fff);
    }

    .course-content-text.collapsed .course-info-btn-display-more {
        background-image: none;
    }

    .course-content-text .course-info-btn-display-more::before {
        content: attr(data-collapsed);
        margin-top: 10px;
        color: #00b3e9;
        font-weight: bolder;
    }

    .course-content-text.collapsed .course-info-btn-display-more::before {
        content: attr(data-expand);
        margin-top: 10px;
        color: #00b3e9;
        font-weight: bolder;
    }

    .course-content-text .course-info-icon-down-display-more {
        font-size: 32px;
        margin-right: 10px;
        margin-top: 10px;
        color: #00b3e9;
    }

    .course-content-text.collapsed .course-info-icon-down-display-more {
        transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        -o-transform: rotate(180deg);
    }

.rate-style {
    background-color: lightslategray;
    color: white;
    border-radius: 8px;
    padding: 3px 4px;
    margin-right: 6px;
    box-shadow: 0 0 6px 1px lightslategray;
}

.large-shadow {
    box-shadow: 0 0 20px 5px lightgrey !important;
    animation-name: Opacity;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-delay: .5s;
    transition: all ease 1s;
}

@keyframes Opacity {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }

    100% {
        opacity: 1;
    }
}

.gradient-border {
    --border-width: 4px;
    border-radius: var(--border-width);
}

    .gradient-border:before {
        position: absolute;
        content: "";
        top: calc(-1 * var(--border-width));
        left: calc(-1 * var(--border-width));
        z-index: -1;
        width: calc(100% + var(--border-width) * 2);
        height: calc(100% + var(--border-width) * 2);
        background: linear-gradient(60deg, #5f86f2, #a65ff2, #f25fd0, #f25f61, #f2cb5f, #abf25f, #5ff281, #5ff2f0);
        background-size: 300% 300%;
        background-position: 0 50%;
        border-radius: calc(2 * var(--border-width));
        animation: moveGradient 4s alternate infinite;
    }

@keyframes moveGradient {
    50% {
        background-position: 100% 50%;
    }
}

.course-item-title {
    padding: 7px 14px 4px;
    position: relative;
    z-index: 10;
}

    .course-item-title a {
        line-height: 40px;
        height: 40px;
        font-size: 14px;
        color: #1e2f38;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: block;
    }

.course-item > div {
    width: 100%;
    position: relative;
    margin-bottom: 30px;
    overflow: hidden;
}

    .course-item > div:before {
        width: 70px;
        height: 70px;
        background: url(../images/circle-bg.svg) no-repeat left bottom;
        content: '';
        position: absolute;
        left: -1px;
        bottom: 62px;
    }

    .course-item > div .detail {
        padding: 0 12px;
    }

        .course-item > div .detail .bottom {
            position: relative;
        }

            .course-item > div .detail .bottom .time {
                line-height: 35px;
                color: #00b3e9;
                font-size: 15px;
                word-spacing: 1px;
                padding: 7px 0 8px;
            }

                .course-item > div .detail .bottom .time i {
                    position: relative;
                    top: 2px;
                    margin-left: 3px;
                    font-size: 16px;
                }

            .course-item > div .detail .bottom .price {
                position: absolute;
                left: 0;
                bottom: 14px;
                font-size: 13px;
                color: #6fc341;
            }

                .course-item > div .detail .bottom .price i {
                    font-style: normal;
                    font-size: 17px;
                }

        .course-item > div .detail .top {
            border-bottom: 2px solid #eaeff2;
            padding-bottom: 12px;
        }

            .course-item > div .detail .top a {
                width: auto;
                display: inline-table;
                white-space: nowrap;
                font-size: 13px;
                color: #778286;
                line-height: 25px;
                padding-left: 20px;
            }

                .course-item > div .detail .top a i {
                    position: relative;
                    top: 2px;
                    margin-left: 5px;
                    font-size: 17px;
                    color: #d2dbdf;
                }

    .course-item > div .off-section {
        position: absolute;
        left: -60px;
        top: 10px;
        margin-top: 2px;
        background-color: #f00;
        padding: 0 15px;
        color: #fff;
        z-index: 800;
        border-radius: 0 15px 15px 0;
        transition: all ease .4s;
        box-shadow: 0px 0px 5px lightyellow;
    }

.course-item:hover > div .off-section {
    left: 0;
}

.course-item > div .off-section span {
    color: white;
    padding-right: 10px;
}

.view-more-MasterCourse {
    width: auto;
    white-space: nowrap;
    display: table;
    float: left;
    font-size: 15px;
    color: #1e2f38;
    word-spacing: -2px;
    margin-top: -3px;
}

    .view-more-MasterCourse i {
        font-size: 21px;
        position: relative;
        top: 5px;
        margin-right: 6px;
        color: #00bffe;
    }

.course-scroll-button {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    font-size: 13px;
    border: none;
    outline: none;
    background-color: #6fc341;
    color: #fff !important;
    cursor: pointer;
    padding: 12px;
    border-radius: 11px;
}

.course-scroll-button:hover {
    background-color: #61b832;
    color: #fff !important;
}


@media screen and (max-width: 991px) {
    #End-Of-Course-PhoneBellBox {
        margin-bottom: 25px;
        display: block;
    }
}

@media screen and (min-width: 992px) {
    #End-Of-Course-PhoneBellBox {
        display: none;
    }
}