.lessons{display:flex;flex-flow:column;box-sizing:border-box}.lessons>ul{width:100%;background-color:var(--color-white);height:52px;display:flex;align-items:center;top:0;list-style:none;margin:0;padding:0 0 0 30px;border-bottom:1px solid gray;position:fixed;z-index:1}.lessons>ul img{width:150px}.lessons .layout{display:flex;padding-top:52px;max-height:100vh}.lessons .sidebar{width:348px;transition:width .125s linear;background-color:#313131;background-color:var(--bg-color-2)}.lessons .sidebar .top-sidebar{display:flex;align-items:center;justify-content:space-between;border-bottom:2px solid gray;color:var(--color-white)}.lessons .sidebar .top-sidebar .close{width:30px;aspect-ratio:1;height:30px;border-radius:30px;line-height:30px;text-align:center;border:2px solid gray;color:gray;margin-right:10px;transition:all .125s linear;cursor:pointer}.lessons .sidebar .top-sidebar .close:hover{border:2px solid var(--color-white);color:var(--color-white)}.lessons .sidebar.none{width:0}.lessons .main{width:100%;position:relative;overflow-y:scroll}.lessons .main .video-section{background-color:var(--color-dark);height:500px;z-index:10}.lessons .main .video-section .video{width:800px;height:500px;top:0;margin:auto;display:grid;place-items:center;color:var(--color-white)}.lessons .main .video-section.scrolled{display:flex;flex-flow:row-reverse;align-items:center;position:fixed;width:50%;height:200px}.lessons .main .video-section .top-bar{position:absolute;display:flex;align-items:center;height:62px;border-bottom:2px solid gray;width:100%;color:var(--color-white);background-image:linear-gradient(-180deg,#000,transparent);opacity:0;transition:all .25s linear}.lessons .main .video-section .top-bar:hover{opacity:1}.lessons .content-btn{width:150px;display:flex;align-items:center;justify-content:space-around;height:60px;cursor:pointer}.lessons .main .video-section .content-btn{border-right:2px solid gray}.lessons .main .video-section .top-bar .title{display:flex;flex-direction:column;padding-left:10px}.lessons .main .video-section.scrolled .top-bar{width:100%;position:unset;border-bottom:unset;opacity:1;background-image:unset}.lessons .main .video-section.scrolled .top-bar .title{width:100%}.lessons .main .video-section.scrolled .video{height:200px}.lessons .main .additional{padding:20px}.lessons .main .additional .center #nav-tab{display:flex;justify-content:center;width:100%}.lessons .main .additional.scrolled{margin-top:200px}.sidebar{color:var(--color-white)}.sidebar .r90{transform:rotate(90deg)}.sidebar .collapsed{border-bottom:1px solid gray}.sidebar .collapsed,.sidebar .list-item{padding:10px 20px;display:flex;align-items:center;justify-content:space-between}.sidebar .list-item{align-items:flex-start;cursor:pointer}.sidebar .list-item:hover{background-color:#008b8b}.sidebar .list-item i{padding-top:7.5px}.sidebar .list-items{overflow-y:scroll;height:calc(100vh - 112px)}.sidebar .green{color:var(--color-primary)}.additional.scrolled #lesson-navbar{padding-top:200px;z-index:2;background-color:var(--color-bg-body)}[data-theme=dark] .additional.scrolled #lesson-navbar{background-color:var(--dark-color-bg-body)}.creator{display:flex;flex-flow:column;box-sizing:border-box}.creator>ul{width:100%;background-color:var(--color-white);height:52px;display:flex;align-items:center;top:0;list-style:none;margin:0;padding:0 0 0 30px;border-bottom:1px solid gray;position:fixed;z-index:1}.creator>ul img{width:150px}.creator .layout{margin-top:52px;display:flex}.creator .left{width:25vw}.creator .right{padding:50px;width:75vw}.creator li{cursor:pointer}