/* In the name of Allah */
:root {
    --plyr-color-main: var(--main-color);
    --plyr-badge-border-radius: var(--border-radius);
    --plyr-control-radius: var(--border-radius);
    --plyr-menu-radius: var(--border-radius);
    --plyr-tooltip-radius: var(--border-radius);
}

#course-title {
	/*background-image: url(../img/course-title-bg5.jpg);*/
    /*background-position: top;*/
    /*background-size: cover;*/
    background-color: #4d4d4d;
    background-image: url("data:image/svg+xml,%3Csvg width='84' height='84' viewBox='0 0 84 84' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%233b3b3b' fill-opacity='0.4'%3E%3Cpath d='M84 23c-4.417 0-8-3.584-8-7.998V8h-7.002C64.58 8 61 4.42 61 0H23c0 4.417-3.584 8-7.998 8H8v7.002C8 19.42 4.42 23 0 23v38c4.417 0 8 3.584 8 7.998V76h7.002C19.42 76 23 79.58 23 84h38c0-4.417 3.584-8 7.998-8H76v-7.002C76 64.58 79.58 61 84 61V23zM59.05 83H43V66.95c5.054-.5 9-4.764 9-9.948V52h5.002c5.18 0 9.446-3.947 9.95-9H83v16.05c-5.054.5-9 4.764-9 9.948V74h-5.002c-5.18 0-9.446 3.947-9.95 9zm-34.1 0H41V66.95c-5.053-.502-9-4.768-9-9.948V52h-5.002c-5.184 0-9.447-3.946-9.95-9H1v16.05c5.053.502 9 4.768 9 9.948V74h5.002c5.184 0 9.447 3.946 9.95 9zm0-82H41v16.05c-5.054.5-9 4.764-9 9.948V32h-5.002c-5.18 0-9.446 3.947-9.95 9H1V24.95c5.054-.5 9-4.764 9-9.948V10h5.002c5.18 0 9.446-3.947 9.95-9zm34.1 0H43v16.05c5.053.502 9 4.768 9 9.948V32h5.002c5.184 0 9.447 3.946 9.95 9H83V24.95c-5.053-.502-9-4.768-9-9.948V10h-5.002c-5.184 0-9.447-3.946-9.95-9zM50 50v7.002C50 61.42 46.42 65 42 65c-4.417 0-8-3.584-8-7.998V50h-7.002C22.58 50 19 46.42 19 42c0-4.417 3.584-8 7.998-8H34v-7.002C34 22.58 37.58 19 42 19c4.417 0 8 3.584 8 7.998V34h7.002C61.42 34 65 37.58 65 42c0 4.417-3.584 8-7.998 8H50z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    padding: 3rem 0 7.5rem 0;
    position: relative;
    border-bottom-left-radius: var(--section-br);
    border-bottom-right-radius: var(--section-br);
}
#course-title small {
    color: white;
    text-align: center;
    display: block;
    margin-bottom: 1rem;
    font-size: 1.2rem;
}
#course-title h1 {
    font-weight: 900;
    color: var(--text-light);
    text-align: center;
    margin: 0; line-height: 1.5;
    /*text-shadow: 0 3px black;*/
    text-shadow: 0 3px 6px #0000008c;
}
/* ========================================== */
.inactive-msg {
    position: fixed;
    inset: 0;
    backdrop-filter: grayscale(1);
    z-index: 100;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}
.inactive-text {
    text-align: center;
    background-color: white;
    padding: 1rem;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow-hover);
}
.inactive-text svg {
    display: inline-block;
    width: 100px;
    height: 100px;
}
.inactive-text h5 {
    margin: 1.4rem 0 1rem 0;
}
/* ========================================== */
#navigation {
    display: none;
}
#course-action-area {
    position: fixed;
    inset: auto 0 0;
    z-index: 5000;
    background-color: white;
    padding: .8rem;
    box-shadow: 0px -3px 13px #00000047;
    display: flex;
    align-items: stretch;
}
#course-action-area .alert {
    margin: 0;
    text-align: center;
    box-shadow: var(--box-shadow-hover);
    width: 100%;
}
#course-action-area a {
    font-size: 1.5rem;
    font-weight: 700;
    -webkit-box-shadow: 0px 5px 30px -15px var(--main-color);
    box-shadow: 0px 5px 30px -15px var(--main-color);
    width: 100%;
    padding: 0.8rem 1.1rem;
}
#course-action-area .comment-fixed-btn {
    flex-shrink: 0;
    margin-right: .8rem;
}
#course-action-area .comment-fixed-btn .badge {
    margin-right: .5rem;
    -webkit-border-radius: 20rem;
    -moz-border-radius: 20rem;
    border-radius: 20rem;
}
/* ========================================== */
.content-list-loader, .comment-list-loader {
    text-align: center;
    font-size: 2rem;
}
/* ========================================== */
.mobile-comments {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 10100;
    background: var(--body-bgc);
    overflow-y: auto;
    top: 105%;
    /*right: 105%;*/
    transition-duration: var(--tr-du);
}
.mobile-comments.active {
    top: 0;
    /*right: 0;*/
}
.mobile-comments .mobile-comments-title {
    background-color: white;
    box-shadow: var(--box-shadow);
    text-align: center;
    padding: 0.7rem 0;
    position: sticky;
    top: 0;
    z-index: 1;
}
.mobile-comments-wrap {
    padding-bottom: 3.1rem;
}
.mobile-comments .close-mobile-comments {
    color: red;
    margin-right: auto;
    background-color: #ffe1e1;
    display: none;
    position: fixed;
    width: 100%;
    right: 0;
    bottom: 0;
    align-items: center;
    justify-content: center;
    padding: .8rem 0;
    z-index: 10;
}
.mobile-comments .close-mobile-comments i {
    margin-left: 1rem;
}
.mobile-comments .close-mobile-comments.active {
    display: flex;
}
.mobile-comments .comment-form,
.mobile-comments .comment-list .comment {
    border-color: transparent;
    background-color: white;
    box-shadow: var(--box-shadow);
}
.mobile-comments .comment-list .comment.answer {
    border-color: var(--main-color);
}
.mobile-comments .comment-list .comment.answer::before {
    top: -14px;
}
.mobile-comments .comment-list .more-comment {
    display: none;
}
.mobile-comments .comment-list .comment {
    display: block !important;
}
/* ========================================== */
.portfolios {
    position: fixed;
    width: 110px;
    height: 33px;
    left: 1rem;
    bottom: 4rem;
    z-index: 10;
    transform: rotate(-90deg);
    transform-origin: top left;
    background-color: gold;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow-hover);
    transition: all var(--tr-du);
}
.portfolios.no-transform {
    transform: unset;
    z-index: 10100;
    overflow: auto;
    background-color: var(--body-bgc);
    bottom: 6.8rem;
}
.portfolios.active {
    /*right: 10px;*/
    /*bottom: 10px;*/
    /*width: calc(100% - 20px);*/
    /*height: calc(100% - 20px);*/
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
}
.portfolios .btn-title {
    font-weight: 700;
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    position: relative;
}
.portfolios .btn-title .fa-images {
    vertical-align: middle;
    margin-left: 0.7rem;
}
.portfolio-wrap {
    padding: 1rem 1rem 4rem 1rem;
}
.portfolios .close-portfolios {
    color: red;
    margin-right: auto;
    background-color: #ffe1e1;
    display: none;
    position: fixed;
    width: 100%;
    right: 0;
    bottom: 0;
    align-items: center;
    justify-content: center;
    padding: .8rem 0;
    z-index: 10;
}
.portfolios .close-portfolios i {
    margin-left: 1rem;
    font-size: 1.4rem;
}
.portfolios .btn-title.active {
    background-color: white;
    -webkit-box-shadow: var(--box-shadow);
    -moz-box-shadow: var(--box-shadow);
    box-shadow: var(--box-shadow);
}
.portfolios.active .close-portfolios {
    display: flex;
}
.portfolio-form-submit {
    min-width: 64px;
}
/* ========================================== */
/*.codeoff-wrap {*/
/*    padding: 3px;*/
/*    -webkit-border-radius: var(--border-radius);*/
/*    -moz-border-radius: var(--border-radius);*/
/*    border-radius: var(--border-radius);*/
/*    background: -webkit-gradient(linear, left top, right top, from(#FF8038), color-stop(30.43%, #FF0099), color-stop(68.23%, #00EBEB), to(#DB00FF));*/
/*    background: -webkit-linear-gradient(left, #FF8038 0%, #FF0099 30.43%, #00EBEB 68.23%, #DB00FF 100%);*/
/*    background: -moz-linear-gradient(left, #FF8038 0%, #FF0099 30.43%, #00EBEB 68.23%, #DB00FF 100%);*/
/*    background: -o-linear-gradient(left, #FF8038 0%, #FF0099 30.43%, #00EBEB 68.23%, #DB00FF 100%);*/
/*    background: linear-gradient(90deg, #FF8038 0%, #FF0099 30.43%, #00EBEB 68.23%, #DB00FF 100%);*/
/*    -webkit-background-size: 1000% 1000%;*/
/*    -moz-background-size: 1000% 1000%;*/
/*    -o-background-size: 1000% 1000%;*/
/*    background-size: 1000% 1000%;*/
/*    margin-bottom: 1rem;*/
/*    -webkit-animation: AnimateBorder 3s infinite;*/
/*    -moz-animation: AnimateBorder 3s infinite;*/
/*    -o-animation: AnimateBorder 3s infinite;*/
/*    animation: AnimateBorder 3s infinite;*/
/*}*/
/*@-webkit-keyframes AnimateBorder {*/
/*    0%{background-position:0% 50%}*/
/*    50%{background-position:100% 50%}*/
/*    100%{background-position:0% 50%}*/
/*}*/
/*@-moz-keyframes AnimateBorder {*/
/*    0%{background-position:0% 50%}*/
/*    50%{background-position:100% 50%}*/
/*    100%{background-position:0% 50%}*/
/*}*/
/*@-o-keyframes AnimateBorder {*/
/*    0%{background-position:0% 50%}*/
/*    50%{background-position:100% 50%}*/
/*    100%{background-position:0% 50%}*/
/*}*/
/*@keyframes AnimateBorder {*/
/*    0%{background-position:0% 50%}*/
/*    50%{background-position:100% 50%}*/
/*    100%{background-position:0% 50%}*/
/*}*/
.codeoff {
    background-color: #ff9800;
    border-radius: var(--border-radius);
    margin-bottom: 1rem;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: white;
}
.codeoff .percent {
    border-left: 2px dashed white;
    padding: 1rem;
}
.codeoff .percent strong {
    font-size: 2rem;
    border: 2px solid;
    border-radius: 20rem;
    padding: 0.5rem;
    letter-spacing: -2px;
    width: 60px;
    height: 60px;
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    flex-direction: row-reverse;
}
.codeoff .percent small {
    font-size: 1rem;
}
.codeoff .percent h5 {
    font-size: 1rem;
    font-weight: 900;
    animation: cheshmak 1s infinite;
}
@keyframes cheshmak {
    0% { color: white; }
    90% { color: white; }
    100% { color: black; }
}
.codeoff .code-wrap {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}
.codeoff .code-wrap h5 {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
}
.codeoff:before, .codeoff:after {
    content: '';
    position: absolute;
    background-color: white;
    border-radius: 20rem;
    width: 20px;
    height: 20px;
    right: 77px;
    top: -10px;
}
.codeoff:before {
    top: unset;
    bottom: -10px;
}
.codeoff .code {
    display: flex;
    align-items: center;
    flex-direction: column;
    flex-grow: 1;
    margin-right: 1rem;
    padding: 1rem 0 1rem 1rem;
}
.codeoff .code .copy {
    border-radius: var(--border-radius);
    border: 2px solid white;
    padding: 0.5rem;
    display: inline-flex;
    color: white;
    margin-right: 0.5rem;
    transition-duration: var(--tr-du);
    cursor: pointer;
}
.codeoff .code .copy span {
    font-weight: 700;
    font-size: 0.7rem;
}
.codeoff .code .copy:hover {
    color: var(--main-color);
    border-color: var(--main-color);
}
.codeoff .desc {
    font-size: 0.9rem;
    text-align: center;
    color: white;
}
.codeoff .desc strong {
    font-size: 1rem;
}
/* ========================================== */
.course-advertise {
    display: block;
    border-radius: var(--border-radius);
    overflow: hidden;
    margin-bottom: 1rem;
}
.course-advertise img {
    width: 100%;
}
/* ========================================== */
/*.badge {*/
/*    font-size: 0.85em;*/
/*}*/
/* ========================================== */
#detail-sidebar {
    margin-top: -5rem;
    position: relative;
}
#detail-sidebar .detail figure {
    position: relative;
    border-radius: var(--border-radius);
    -webkit-box-shadow: var(--box-shadow);
    box-shadow: var(--box-shadow);
    overflow: hidden;
}
#detail-sidebar .detail figure.hasPoster {
    width: 100%;
    padding-top: 56.25%;
}
#detail-sidebar .detail figure.hasPoster .plyr {
    position: absolute;
    inset: 0;
}
#detail-sidebar .detail figure img {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background-color: white;
}
#detail-sidebar .detail figure video {
    width: 100%;
    display: block;
}
#video-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: white;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    -webkit-align-items: end;
    -moz-box-align: end;
    -ms-flex-align: end;
    align-items: end;
    -webkit-box-pack: start;
    -webkit-justify-content: start;
    -moz-box-pack: start;
    -ms-flex-pack: start;
    justify-content: start;
    padding: 1rem;
    cursor: pointer;
}
#video-overlay i {
    font-size: 3rem;
    color: var(--main-color);
    margin-left: 1rem;
    cursor: pointer;
    -webkit-transition-duration: var(--tr-du);
         -o-transition-duration: var(--tr-du);
            transition-duration: var(--tr-du);
}
#video-overlay i:hover {
    color: var(--text-light);
    -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
            transform: scale(1.1);
}
#video-overlay small {
    font-size: 1rem;
    color: var(--text-light);
}
.poster-overlay .label {
    position: absolute;
    top: 0.3rem; right: 0.3rem;
}
#video-overlay .label {
    position: absolute;
    bottom: 4.5rem;
}
.poster-overlay {
    position: absolute;
    top: 0; bottom: 0; right: 0; left: 0;
    background-image: -o-linear-gradient(225deg, rgba(0, 0, 0, 0.5) 0% 10%, transparent 35%);
    background-image: linear-gradient(225deg, rgba(0, 0, 0, 0.5) 0% 10%, transparent 35%);
}
.nav-pills .nav-item {
    flex-shrink: 0;
    flex-basis: initial;
}
.nav-pills .nav-item:not(:last-child) {
    margin-left: 0.5rem;
}
.nav-pills .nav-link {
    color: var(--text-dark);
    border-radius: var(--border-radius);
    overflow: hidden; position: relative;
    background-color: var(--main2-color);
    padding: 0.8rem 1.1rem;
}
.nav-pills .nav-link::after {
    background: #fff;
    content: "";
    height: 155px;
    left: -75px;
    opacity: .2;
    position: absolute;
    top: -50px;
    width: 50px;
    -webkit-transform: rotate(35deg);
    -ms-transform: rotate(35deg);
        transform: rotate(35deg);
    -webkit-transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    -webkit-transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1);
    -o-transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1);
    transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1);
}
.nav-pills .nav-link:hover::after {
    left: 120%;
    -webkit-transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1);
    -o-transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1);
    transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1);
}
.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    border-radius: var(--border-radius);
    color: var(--text-light);
    background-color: var(--main-color);
    position: relative;
}
.nav-link:focus, .nav-link:hover {
    color: var(--text-dark);
    background-color: var(--main2-color);
}
#detail-sidebar .detail .nav{
    /*-webkit-box-orient: vertical;*/
    /*-webkit-box-direction: normal;*/
    /*    -ms-flex-direction: column;*/
    /*        flex-direction: column;*/
    /*border-radius: var(--border-radius);*/
    /*background-color: #fff;*/
    /*-webkit-box-shadow: var(--box-shadow);*/
    /*        box-shadow: var(--box-shadow);*/
    margin-bottom: 1rem;
    flex-wrap: nowrap;
    overflow: auto;
    display: inline-flex;
    width: 100%;
}
#detail-sidebar .detail .tab-pane {
/*#detail-sidebar .detail .tab-content {*/
    border-radius: var(--border-radius);
    background-color: #fff;
    -webkit-box-shadow: var(--box-shadow);
            box-shadow: var(--box-shadow);
    color: var(--text-dark);
    /*overflow: hidden;*/
}
#detail-sidebar .detail .tab-pane#program {
    background-color: transparent;
    -webkit-box-shadow: none;
    box-shadow: none;
}
#detail-sidebar .detail #detail {
    padding: 1.5rem;
}
#detail-sidebar .detail .tab-content p {
    line-height: 2;
}
#detail-sidebar .detail .tab-content .accordion {
    border-radius: var(--border-radius);
    /*overflow: hidden;*/
}
#detail-sidebar .detail .tab-content .accordion-flush .accordion-item:not(:last-child) {
    margin-bottom: 1rem;
}
#detail-sidebar .detail .tab-content .accordion-flush .accordion-item {
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    overflow: hidden;
}
.accordion-button {
    padding: 1rem !important;
}
.accordion-button .badge.stype {
    margin: 0 auto 0 0;
    width: 71px;
    flex-shrink: 0;
}
.accordion-button::after, .accordion-button .badge.free {
    margin-right: 5px;
}
.accordion-body .btn-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    margin-top: 1rem;
}
.accordion-body .btn-wrap .btn {
    width: 100%;
    padding: 0.8rem 1.1rem;
}
.accordion-body .btn-wrap .btn.disabled {
    pointer-events: none;
    cursor: default;
    -webkit-filter: grayscale(1);
            filter: grayscale(1);
}
#detail-sidebar .about-session {
    border-radius: var(--border-radius);
    border: 1px solid var(--bc);
    padding: 0.5rem 1rem;
    margin-bottom: 1rem;
    position: relative;
}
#detail-sidebar .program-info {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin-bottom: 0.5rem;
}
#detail-sidebar .program-info .info {
    border-radius: var(--border-radius);
    border: 1px solid var(--bc);
    padding: 0.5rem 1rem;
    margin-bottom: 0.5rem;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
    width: 100%;
}
#detail-sidebar .program-list .p-item {
    border-radius: var(--border-radius);
    border: 2px solid var(--bc);
    padding: 0.5rem .7rem;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; color: inherit;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
    flex-direction: column;
}
#detail-sidebar .program-list .p-item .icon {
    color: var(--main-color);
    margin-left: 5px;
}
#detail-sidebar .program-list .p-item .info {
    text-align: end;
}
#detail-sidebar .program-list .p-item .info span {
    font-size: 0.9rem;
}
#detail-sidebar .program-list .p-item .info .fa-clock {
    margin-left: 15px;
}
#detail-sidebar .program-list .p-item .info i {
    font-size: 0.8rem;
}
#detail-sidebar .program-list .p-item i {
    vertical-align: middle;
}
#detail-sidebar .program-list .p-item:not(:last-child) {
    margin-bottom: 0.5rem;
}
#detail-sidebar .program-info .info .dot, #detail-sidebar .about-session .dot {
    position: absolute;
    top: 50%;
    -webkit-transform: translate(0, -50%);
        -ms-transform: translate(0, -50%);
            transform: translate(0, -50%);
    right: -5px;
    width: 10px;
    height: 10px;
    background-color: var(--main-color);
    border-radius: 100rem;
}
#detail-sidebar .about-session .dot {
    top: 20px;
}
#comment {
    padding: 1rem;
}
#comment .comment-form {
    margin: 0;
}
#comment .comment-list {
    padding: 1rem 0 0;
}
#comment-form .btn {
    min-width: 79.33px;
}
#comment-form .btn i {
    vertical-align: middle;
}
/* 000000000000000000000000000000000000000000000 */
.tooltip {
    z-index: 10100 !important;
}
.share-modal .rate-this-course {
    display: flex;
    flex-direction: column;
    position: relative;
}
.share-modal .rate-this-course .stars {
    margin-top: 0.7rem;
    margin-bottom: 0;
}
.share-modal .rate-this-course .rate-overlay {
    position: absolute;
    inset: 0;
    background: var(--main-color);
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
}
/* 000000000000000000000000000000000000000000000 */
.stars {
    margin-bottom: 1.3rem;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
}
.stars input {
    display: none;
}
.stars label {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    display: inline-block;
    margin-left: 3px;
    height: 25px;
    width: 25px;
    background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='transparent' stroke='gold' stroke-width='38' d='M259.216 29.942L330.27 173.92l158.89 23.087L374.185 309.08l27.145 158.23-142.114-74.698-142.112 74.698 27.146-158.23L29.274 197.007l158.89-23.088z' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    font-size: 0;
    cursor: pointer;
} 
.stars input:nth-child(1):checked ~ label:nth-of-type(-n + 1),
.stars input:nth-child(2):checked ~ label:nth-of-type(-n + 2),
.stars input:nth-child(3):checked ~ label:nth-of-type(-n + 3),
.stars input:nth-child(4):checked ~ label:nth-of-type(-n + 4),
.stars input:nth-child(5):checked ~ label:nth-of-type(-n + 5) {
    background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='gold' stroke='gold' stroke-width='38' d='M259.216 29.942L330.27 173.92l158.89 23.087L374.185 309.08l27.145 158.23-142.114-74.698-142.112 74.698 27.146-158.23L29.274 197.007l158.89-23.088z' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* 000000000000000000000000000000000000000000000 */
#detail-sidebar .sidebar {
    color: var(--text-dark);
}
#detail-sidebar .sidebar .price {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    border: 2px dashed var(--bc);
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: var(--border-radius);
    position: relative;
}
#detail-sidebar .sidebar .price::before, #detail-sidebar .sidebar .price::after {
    position: absolute;
    content: '';
    width: 20px;
    height: 20px;
    top: calc(50% - 10px);
    background-color: #fff;
    border-radius: 5rem;
}
#detail-sidebar .sidebar .price::before {
    right: -10px;
    border-left: 3px dashed var(--bc);
}
#detail-sidebar .sidebar .price::after {
    left: -10px;
    border-right: 3px dashed var(--bc);
}
#detail-sidebar .sidebar .price .num {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
#detail-sidebar .sidebar .price .num.hasCode:after {
    content: '';
    position: absolute;
    top: 13px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #ff00008a;
    transform: rotate(-10deg);
}
#detail-sidebar .sidebar .price .num i {
    margin: 0 3px;
}
#detail-sidebar .sidebar .price .num img {
    width: 20px;
    margin-right: 5px;
}
#detail-sidebar .sidebar .price .num svg {
    width: 15px;
    height: 15px;
    margin-right: 5px;
}
#detail-sidebar .sidebar .price .h3 {
    margin: 0;
    font-weight: 800;
    color: var(--main-color);
}
#detail-sidebar .sidebar .price .discount {
    position: relative;
    color: red;
    margin-left: 10px;
}
#detail-sidebar .sidebar .price .discount span {
    width: 100%;
    height: 1px;
    top: 10px;
    left: 0;
    position: absolute;
    background-color: red;
    -webkit-transform: rotate(-18deg);
        -ms-transform: rotate(-18deg);
            transform: rotate(-18deg);
    content: '';
}
#detail-sidebar .sidebar .register .btn {
    width: 100%;
    padding: 0.7rem;
    font-size: 1.5rem;
    font-weight: 700;
    -webkit-box-shadow: 0px 5px 30px -15px var(--main-color);
            box-shadow: 0px 5px 30px -15px var(--main-color);
}
#detail-sidebar .sidebar .register .alert {
    margin: 0;
    text-align: center;
}
#detail-sidebar .sidebar .register .expired-btn {
    -webkit-filter: grayscale(1);
            filter: grayscale(1);
    pointer-events: none;
}
#detail-sidebar .sidebar .register .cancel-btn {
    background-color: var(--bs-warning);
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: normal;
}
#detail-sidebar .sidebar .forum-btn {
    width: 100%;
    margin-top: 1rem;
    padding: .8rem 1.1rem;
}
#detail-sidebar .sidebar .installment {
    overflow: hidden;
    padding: 0;
}
#detail-sidebar .sidebar .installment i {
    -webkit-transition-duration: var(--tr-du);
         -o-transition-duration: var(--tr-du);
            transition-duration: var(--tr-du);
}
#detail-sidebar .sidebar .installment .sbc-title {
    background-color: var(--main2-color);
    margin: 0;
    padding: 1rem;
    border: 0;
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}
#detail-sidebar .sidebar .installment .content {
    padding: 1rem;
}
#detail-sidebar .sidebar .installment .content .desc {
    opacity: 1;
    font-size: 0.9rem;
    text-align: justify;
    line-height: 1.8;
}
#detail-sidebar .sidebar .installment .content .desc i {
    color: var(--main-color);
    vertical-align: middle;
    margin-left: 5px;
}
#detail-sidebar .sidebar .installment .content .btn {
    width: 100%;
    /*margin-top: 1rem;*/
}
#detail-sidebar .sidebar .course-summary ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
#detail-sidebar .sidebar .course-summary ul li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}
#detail-sidebar .sidebar .course-summary ul li:not(:last-child) {
    margin-bottom: 10px;
}
#detail-sidebar .sidebar .course-summary i {
    vertical-align: middle;
    color: var(--main-color);
    margin-left: 5px;
}
#map {
    width: 100%;
    height: 250px;
    border-radius: var(--border-radius);
    background: #eee;
    border: 2px solid var(--main-color);
}
#detail-sidebar .sidebar .info {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}
#detail-sidebar .sidebar .info .rating,
#detail-sidebar .sidebar .info .share,
#detail-sidebar .sidebar .info .rate-this-course,
#detail-sidebar .sidebar .info .favorite {
    width: 47.5%; -webkit-transition-duration: var(--tr-du); -o-transition-duration: var(--tr-du); transition-duration: var(--tr-du);
    text-align: center;
}
#detail-sidebar .sidebar .info .rating i {
    color: gold; margin-bottom: 1rem;
    font-size: 2rem;
}
#detail-sidebar .sidebar .info .rating b {
    font-size: 1.2rem; margin: 0 2px;
}
#detail-sidebar .sidebar .info .share:hover {
    cursor: pointer;
    background-color: var(--main-color);
    color: var(--text-light);
}
#detail-sidebar .sidebar .info .share:hover i {
    color: var(--text-light);
}
#detail-sidebar .sidebar .info .share i {
    font-size: 2.2rem; color: var(--main-color);
    margin-bottom: 1rem;
}
#detail-sidebar .sidebar .share-modal .modal-body input {
    direction: ltr;
}
#detail-sidebar .sidebar .share-modal .modal-body .btn {
    width: 100%;
    margin: 0.7rem 0 0 0;
}
#detail-sidebar .sidebar .socials {
    text-align: center;
}
#detail-sidebar .sidebar .socials i {
    font-size: 2rem; color: var(--text-dark);
    -webkit-transition-duration: var(--tr-du);
         -o-transition-duration: var(--tr-du);
            transition-duration: var(--tr-du);
}
#detail-sidebar .sidebar .socials i:hover {
    color: var(--main-color);
}
#detail-sidebar .sidebar .socials a:not(:last-child) {
    margin-left: 5px;
}
#detail-sidebar .sidebar .info .favorite {
    color: var(--text-dark);
}
#detail-sidebar .sidebar .info .favorite.active {
    color: var(--text-light); background-color: #ff3f3f;
}
#detail-sidebar .sidebar .info .favorite.active i {
    color: var(--text-light);
}
#detail-sidebar .sidebar .info .favorite i {
    font-size: 2.3rem; color: #ff3f3f;
    margin-bottom: 1rem; -webkit-transition-duration: var(--tr-du); -o-transition-duration: var(--tr-du); transition-duration: var(--tr-du);
}
#detail-sidebar .sidebar .info .favorite:hover {
    color: var(--text-light); background-color: #ff3f3f;
}
#detail-sidebar .sidebar .info .favorite:hover i {
    color: var(--text-light);
}
#detail-sidebar .sidebar .info .rate-this-course {
    padding: 0.5rem; position: relative;
}
#detail-sidebar .sidebar .info .rate-this-course .rate-overlay {
    position: absolute; top: 0; bottom: 0; left: 0; right: 0;
    background-color: var(--main-color); font-size: 2rem;
    color: var(--text-light); display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
    border-radius: var(--border-radius)
}

#detail-sidebar .sidebar .guarantee {
    display: flex;
    align-items: center;
}
#detail-sidebar .sidebar .guarantee svg {
    width: 115px;
    margin-left: 1rem;
    border-radius: var(--border-radius);
}}
#detail-sidebar .sidebar .guarantee h6 {
    font-weight: 800;
    margin-bottom: 3px;
}

#detail-sidebar .sidebar .prof-meta .p-avatar {
    width: 80px; height: 80px;
    background-position: center;
    background-size: cover;
    border-radius: var(--border-radius);
    margin: 0 auto 1rem;
    -webkit-box-shadow: var(--box-shadow);
            box-shadow: var(--box-shadow);
}
#detail-sidebar .sidebar .prof-meta .p-name {
    text-align: center;
    margin-bottom: 0.5rem;
    display: block;
    color: var(--text-dark);
    transition-duration: var(--tr-du);
}
#detail-sidebar .sidebar .prof-meta .p-name:hover {
    color: var(--main-color);
}
#detail-sidebar .sidebar .prof-meta .p-desc {
    text-align: center; margin-bottom: 0.5rem;
    font-size: .9rem;
}

/* 99999999999999999999999999999999999999999 */
#comment-tab {
    display: flex;
    align-items: center;
    justify-content: center;
}
#comment-tab .badge {
    margin-right: 8px;
    border-radius: 20rem;
    padding-bottom: 0.1rem;
}
/* 99999999999999999999999999999999999999999 */
#detail-sidebar .academy {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: #fff;
    padding: 8px; border-radius: var(--border-radius);
    -webkit-box-shadow: var(--box-shadow);
            box-shadow: var(--box-shadow); position: relative;
}
#detail-sidebar .academy .medal {
    position: absolute; top: 0; left: 10px; width: 40px;
    -webkit-transition-duration: var(--tr-du);
         -o-transition-duration: var(--tr-du);
            transition-duration: var(--tr-du);
}
#detail-sidebar .academy .logo {
    display: block; background-position: center; background-repeat: no-repeat; cursor: pointer;
    background-size: contain; width: 110px; height: 110px; -ms-flex-negative: 0; flex-shrink: 0;
    border-radius: var(--border-radius); -webkit-box-shadow: var(--box-shadow); box-shadow: var(--box-shadow); margin-left: 8px;
}
#detail-sidebar .academy .info {
    flex-direction: column;
}
#detail-sidebar .academy .info h3 {
    color: var(--text-dark); font-size: 1.2rem; margin-bottom: 0;
    font-weight: bold; -webkit-transition-duration: var(--tr-du); -o-transition-duration: var(--tr-du); transition-duration: var(--tr-du);
}
#detail-sidebar .academy .info h3:hover {
    color: var(--main-color);
}
#detail-sidebar .academy:hover .medal {
    -webkit-transform: scale(1.2);
        -ms-transform: scale(1.2);
            transform: scale(1.2); top: 4px;
}
@media (min-width:1200px) {
    #course-title h1 {
        font-size: 3rem;
    }
    #detail-sidebar .container-fluid {
        padding-left: 3.5rem; padding-right: 3.5rem;
    }
    #detail-sidebar .academy {
        padding: 15px;
    }
    #detail-sidebar .academy .logo {
        width: 125px; height: 125px; margin-left: 15px;
    }
    .codeoff:before, .codeoff:after {
        right: 84px;
    }
    #comment-form .btn {
        min-width: 98.11px;
    }
}
/* 99999999999999999999999999999999999999999 */
#suggest .owl-carousel .owl-nav {
    display: none;
}

#suggest .owl-carousel .owl-item {
    padding: 0;
}

#suggest .owl-carousel .owl-stage-outer {
    padding: 0;
}

#suggest .owl-carousel .card {
    border: 1px solid var(--bc);
    -webkit-box-shadow: none;
    box-shadow: none;
    width: unset;
    margin-bottom: 0;
}
#suggest .see-more i {
    font-size: 2.5rem;
}
#suggest .see-more div {
    font-size: 0.9rem;
}
#suggest .owl-carousel .card .img-link {
    min-height: 100px;
    max-height: 100px;
}

#suggest .owl-carousel .card .card-title {
    font-size: 1rem;
}
#suggest .card .card-footer {
    padding: 0.5rem 0;
}
#suggest .card .card-footer:hover {
    background-color: var(--main-color);
    color: white;
}
/* 99999999999999999999999999999999999999999 */

@media (min-width:768px) {
    #detail-sidebar .detail .nav{
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        background-color: transparent;
        -webkit-box-shadow: none;
                box-shadow: none;
    }
    #detail-sidebar .detail .nav {
        overflow: visible;
    }
    .nav-pills .nav-link.active {
        -webkit-box-shadow: var(--box-shadow-hover);
        box-shadow: var(--box-shadow-hover);
    }
    .nav-pills .nav-link.active {
        -webkit-box-shadow: var(--box-shadow);
                box-shadow: var(--box-shadow);
    }
    .nav-pills .nav-link:not(.active) {
        background-color: var(--main2-color);
    }
    .nav-pills .nav-link:not(.active):hover {
        background-color: var(--main-color);
        color: var(--text-light);
    }
    .nav-item:not(:last-child) .nav-link {
        border-left: 1px solid var(--bc);
    }
    .nav-item:not(:last-child) {
        margin-left: 1rem;
    }
    #detail-sidebar .program-info {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    }
    #detail-sidebar .program-info .info {
        -ms-flex-negative: 0;
            flex-shrink: 0;
    }
    #detail-sidebar .program-info .info {
        width: 49%;
    }
    .nav-pills .nav-item {
        flex-basis: 0;
    }
    .tab-pane {
        position: relative;
    }
    .tab-pane.active.show::before {
        content: '';
        position: absolute;
        top: -16px;
        width: 20px;
        height: 20px;
        border: 10px solid var(--main-color);
        border-bottom-color: transparent;
        border-left-color: transparent;
        border-right-color: transparent;
    }
    .tab-pane:nth-child(1).active.show::before {
        right: 10.1%;
    }
    .tab-pane:nth-child(2).active.show::before {
        right: 35.7%;
    }
    .tab-pane:nth-child(3).active.show::before {
        right: 61.2%;
    }
    .tab-pane:nth-child(4).active.show::before {
        right: 87%;
    }
}
@media (min-width:992px) {
    #course-action-area {
        display: none;
    }
    .codeoff .desc strong {
        font-size: 1.4rem;
    }
    #video-overlay i {
        font-size: 4rem;
    }
    #video-overlay small {
        font-size: 1.4rem;
    }
    #video-overlay .label {
        right: 1.5rem;
        bottom: 5.5rem;
    }
    /*.nav-link {*/
    /*    padding: 0.8rem 1rem;*/
    /*}*/
    .accordion-body .btn-wrap {
        -webkit-box-pack: end;
            -ms-flex-pack: end;
                justify-content: flex-end;
    }
    .accordion-body .btn-wrap .btn {
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
    }
    #detail-sidebar .sidebar .prof-meta .p-avatar {
        width: 100px; height: 100px;
    }
    #detail-sidebar .program-list .p-item {
        flex-direction: row;
        text-align: start;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        padding: 0.7rem 1rem;
        cursor: pointer;
        transition-duration: var(--tr-du);
    }
    #detail-sidebar .program-list .p-item:hover {
        border-color: var(--main-color);
    }
    #detail-sidebar .sidebar .forum-btn, .accordion-body .btn-wrap .btn {
        padding: .375rem .75rem;
    }
}
/*===========================*/
.pswp__portfolio-caption {
    background: #000000a6;
    color: #fff;
    width: calc(100% - 32px);
    max-width: 600px;
    padding: 1rem;
    border-radius: var(--border-radius);
    position: absolute;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
}
.pswp__portfolio-caption small {
    color: #bdbdbd;
}
/*===========================*/
#students-portfolio {
    padding: 1rem;
    position: relative;
    min-height: 100px;
}
.portfolio-overlay {
    position: absolute;
    inset: 0;
    background-color: white;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    font-size: 1.3rem;
    -webkit-border-radius: var(--border-radius);
    -moz-border-radius: var(--border-radius);
    border-radius: var(--border-radius);
}
.portfolio-overlay i {
     color: var(--main-color);
     margin-left: 1rem;
}
.portfolio-list {
    margin-bottom: 1rem;
}
.portfolio-item {
    width: 100%;
    padding-top: 100%;
    position: relative;
    border-radius: var(--border-radius);
    overflow: hidden;
    display: block;
    -webkit-box-shadow: var(--box-shadow);
    -moz-box-shadow: var(--box-shadow);
    box-shadow: var(--box-shadow);
    -webkit-transition-duration: var(--tr-du);
    -moz-transition-duration: var(--tr-du);
    -ms-transition-duration: var(--tr-du);
    -o-transition-duration: var(--tr-du);
    transition-duration: var(--tr-du);
    cursor: pointer;
}
.portfolio-item:hover {
    -webkit-box-shadow: var(--box-shadow-hover);
    -moz-box-shadow: var(--box-shadow-hover);
    box-shadow: var(--box-shadow-hover);
}
.portfolio-item img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.portfolio-caption {
    display: none;
}
.portfolio-like-count {
    padding: 0.2rem 0.5rem;
    border: 2px solid;
    border-radius: var(--border-radius);
    margin-left: 0.5rem;
}
.portfolio-like-count.liked {
    border-color: #ff6060;
    color: #ff6060;
}
.portfolio-like-count i {
    vertical-align: middle;
    margin-right: 0.5rem;
}
.pswp--touch .pswp__button--arrow {
    visibility: visible !important;
}
.pswp img {
    object-fit: contain;
}
.pswp__counter {
    margin: 15px 20px 0 0 !important;
}
.swal2-container {
    z-index: 100060 !important;
}
#compose-form .dropzone .dz-message {
     font-size: inherit !important;
}
/*@media (min-width: 768px) {*/
/*    .portfolio-item {*/
/*        height: 110px;*/
/*    }*/
/*}*/
/*@media (min-width: 1200px) {*/
/*    .portfolio-item {*/
/*        height: 100px;*/
/*    }*/
/*}*/
/*@media (min-width: 1400px) {*/
/*    .portfolio-item {*/
/*        height: 123px;*/
/*    }*/
/*}*/