.video-section::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 70%;
    height: 100vh;
    background: rgb(34,34,34);
    background: linear-gradient(90deg, rgba(34,34,34,1) 0%, rgba(34,34,34,0) 100%);
    z-index: 11;
}

.video-section::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -20vh;
    width: 100%;
    height: 40vh;
    background: rgb(34, 34, 34);
    background: linear-gradient(0deg, rgba(34, 34, 34, 0) 0%, rgba(34, 34, 34, 1) 50%, rgba(34, 34, 34, 0) 100%);
    z-index: 10;
}

.play-section {
    display: inline-flex;
    align-items: center;
    gap: 20px;
    width: auto;
}
.play-section .play-copies{
    display: flex;
    flex-direction: column;
    color: #fff;
    padding: 0 30px 0 0px;
}
.play-section .play-button{
    padding: 10px;
    border-radius: 100%;
}





/* LESSON SLIDER */
/* LESSON SLIDER */

.lessons-slider ul li {
    border-radius: 5.33px;
}
.lessons-slider ul li .lesson-status .lesson-status-icon {
    border-radius: 5.33px 0 5.33px 0;
}

.lessons-slider ul li a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 30%;
    background: rgb(34,34,34);
    background: linear-gradient(0deg, rgba(34,34,34,1) 0%, rgba(34,34,34,0) 100%);
    z-index: 0;
}

.lessons-slider ul li[data-status="played"] .lesson-status{
    display: none;
}

.lessons-slider ul li[data-status="played"] .lesson-thumb-con {
    justify-content: flex-end;
}

.lessons-slider ul li[data-status="locked"] .lesson-status .lesson-status-icon .completed{
    display: none;
}

.lessons-slider ul li[data-status="completed"] .lesson-status .lesson-status-icon .lock{
    display: none;
}

.lessons-slider ul li[data-status="completed"] .lesson-status .lesson-status-text{
    display: none;
}



/* LOGGEDIN */
/* LOGGEDIN */

.lessons-slider.loggedin ul li{
    border-radius: 5.33px 5.33px 0 0;
}

.lessons-slider.loggedin ul li .lesson-progress .progress-bar{
    position: relative;
    width: 100%;
    height: 3px;
}

.lessons-slider.loggedin ul li .lesson-progress .progress-bar .bar{
    position: absolute;
    left: 0;
    top: 0;
    height: 3px;
    max-width: 100%;
    z-index: 10;
}

.lessons-slider.loggedin ul li .lesson-progress .lesson-title{
    background: #343435;
    border-radius: 0 0 5.33px 5.33px;
}



.lesson-title {
    text-align: left;
}
/* DASHBOARD */
/* DASHBOARD */

.dashboard-section .video-col{
    width: 69%;
}
.dashboard-section aside{
    width: 27%;
    height: 60%;
    position: sticky;
    top: 80px;
}

button[data-complete-lesson="false"] .lesson-icon,
button[data-complete-lesson="false"] .lesson-copy.completed {
    display: none;
}

button[data-complete-lesson="true"] .lesson-icon,
button[data-complete-lesson="true"] .lesson-copy.completed
 {
    display: block;
    color: #fff;
}

button[data-complete-lesson="true"] {
    background-color: rgb(67 100 247 / var(--tw-bg-opacity)) !important;
}

button[data-complete-lesson="true"] .lesson-copy.not-completed {
    display: none;
}



button.goToLess[data-current-lesson="true"] {
    background-color: rgb(28 100 242/var(--tw-bg-opacity));
}



.mobile-prev,
.mobile-next {
    display: none;
    position: absolute;
    top: 48%;
    z-index: 40;
    transform: translateY(-50%);
}

.mobile-prev {left: 0;}
.mobile-next {right: 0;}

/* RESPONSIVE */
/* RESPONSIVE */

@media (max-width: 770px) {
    .dashboard-section .video-col {
        width: 100%;
    }
    .dashboard-section aside {
        width: 100%;
        position: relative;
        top: 0;
        height: auto;
    }
    .mobile-prev,
    .mobile-next {
        display: block;
    }
    .dsk-prev,
    .dsk-next {
        display: none;
    }
}