/* VIAL LMS 0.6.23: stable lesson overlays, lesson pages in right drawer, unified activity icons. */
:root{
  --vial-drawer-width:300px;
  --vial-page-width:1120px;
}

body.lesson-page-view.with-sidebar .moodle-layout,
body.lesson-page-view.with-sidebar:not(.sidebar-hidden) .moodle-layout,
body.lesson-page-view.with-sidebar.sidebar-hidden .moodle-layout,
body.lesson-page-view.with-sidebar:not(.sidebar-hidden) .moodle-layout.with-sidebar,
body.lesson-page-view.with-sidebar.sidebar-hidden .moodle-layout.with-sidebar,
body.lesson-page-view.with-sidebar:not(.sidebar-hidden):has(.lesson-reading-layout.lesson-nav-open) .moodle-layout,
body.lesson-page-view.sidebar-hidden:has(.lesson-reading-layout.lesson-nav-open) .moodle-layout{
  display:block!important;
  width:min(var(--vial-page-width), calc(100vw - 36px))!important;
  max-width:var(--vial-page-width)!important;
  margin-left:auto!important;
  margin-right:auto!important;
  padding-left:18px!important;
  padding-right:18px!important;
  grid-template-columns:none!important;
  transition:none!important;
}

body.lesson-page-view .main-content,
body.lesson-page-view .lesson-reading-layout,
body.lesson-page-view .lesson-reading-main,
body.lesson-page-view .lesson-reader-card,
body.lesson-page-view .lesson-reader-head{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
}

body.lesson-page-view .lesson-reader-card{
  padding:20px 22px!important;
}

body.lesson-page-view .lesson-reader-grid{
  display:block!important;
}

body.lesson-page-view .lesson-content{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
}

body.lesson-page-view .lesson-page-toc{
  display:none!important;
}

body.lesson-page-view .lesson-course-nav,
body.lesson-page-view .right-sidebar.moodle-drawer{
  width:var(--vial-drawer-width)!important;
  max-width:min(86vw, var(--vial-drawer-width))!important;
  top:var(--vial-topbar-space,78px)!important;
  bottom:0!important;
  height:calc(100vh - var(--vial-topbar-space,78px))!important;
  background:#f8fafc!important;
  border-color:#d8e3ea!important;
  box-shadow:0 8px 24px rgba(15,23,42,.12)!important;
  z-index:13010!important;
}

body.lesson-page-view .right-sidebar.moodle-drawer{
  right:0!important;
  left:auto!important;
  padding:12px!important;
}

body.lesson-page-view:not(.sidebar-hidden) .right-sidebar.moodle-drawer{
  transform:translateX(0)!important;
}

body.lesson-page-view.sidebar-hidden .right-sidebar.moodle-drawer{
  transform:translateX(105%)!important;
}

body.lesson-page-view .lesson-sidebar-pages{
  display:grid!important;
  gap:10px!important;
}

body.lesson-page-view .lesson-pages-drawer-block{
  margin:0!important;
  padding:14px!important;
}

body.lesson-page-view .lesson-pages-drawer-block h3{
  margin:0 0 10px!important;
  font-size:17px!important;
  line-height:1.25!important;
}

body.lesson-page-view .lesson-drawer-page-list{
  display:grid!important;
  gap:7px!important;
}

body.lesson-page-view .lesson-drawer-page-list .lesson-page-link{
  display:grid!important;
  grid-template-columns:30px minmax(0,1fr)!important;
  gap:10px!important;
  align-items:center!important;
  min-height:42px!important;
  padding:8px!important;
  border:1px solid #d8e3ea!important;
  border-radius:8px!important;
  background:#fff!important;
}

body.lesson-page-view .lesson-drawer-page-list .lesson-page-link.active,
body.lesson-page-view .lesson-drawer-page-list .lesson-page-link:hover{
  border-color:#00857f!important;
  background:#ecfdfb!important;
}

body.lesson-page-view .lesson-drawer-page-list .lesson-page-link span{
  width:28px!important;
  height:28px!important;
  border-radius:8px!important;
  background:#dff6f3!important;
  color:#00756f!important;
  font-size:15px!important;
  font-weight:800!important;
}

body.lesson-page-view .lesson-drawer-page-list .lesson-page-link b{
  font-size:13px!important;
  line-height:1.25!important;
}

.activity-icon,
.builder-icon{
  width:38px!important;
  height:38px!important;
  min-width:38px!important;
  border-radius:10px!important;
  border:1px solid #cbd5e1!important;
  background:#fff!important;
  position:relative!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
}

.activity-icon .vial-activity-glyph,
.builder-icon::before,
.builder-icon::after{
  position:relative!important;
}

.builder-icon{
  font-size:0!important;
  color:transparent!important;
}

.activity-icon .vial-activity-glyph{
  width:24px!important;
  height:26px!important;
  display:block!important;
  position:relative!important;
}

.activity-icon.lesson,
.builder-item[data-token^="lesson:"] .builder-icon{
  background:#f8fafc!important;
  border-color:#b8c8d8!important;
  color:#0f766e!important;
}

.activity-icon.lesson .vial-activity-glyph::before,
.builder-item[data-token^="lesson:"] .builder-icon::before{
  content:""!important;
  position:absolute!important;
  left:8px!important;
  top:6px!important;
  width:18px!important;
  height:22px!important;
  border:2px solid #0f766e!important;
  border-radius:3px!important;
  background:#fff!important;
  box-shadow:-4px 4px 0 #dff6f3!important;
}

.activity-icon.lesson .vial-activity-glyph::after,
.builder-item[data-token^="lesson:"] .builder-icon::after{
  content:""!important;
  position:absolute!important;
  left:13px!important;
  top:12px!important;
  width:10px!important;
  height:9px!important;
  border-top:2px solid #0f766e!important;
  border-bottom:2px solid #0f766e!important;
  box-shadow:0 5px 0 -1px #0f766e!important;
}

.activity-icon.test,
.builder-item[data-token^="test:"] .builder-icon{
  background:#f0fdfa!important;
  border-color:#99f6e4!important;
  color:#0d9488!important;
}

.activity-icon.test .vial-activity-glyph::before,
.builder-item[data-token^="test:"] .builder-icon::before{
  content:""!important;
  position:absolute!important;
  left:7px!important;
  top:7px!important;
  width:21px!important;
  height:21px!important;
  border:2px solid #0d9488!important;
  border-radius:5px!important;
  background:#fff!important;
}

.activity-icon.test .vial-activity-glyph::after,
.builder-item[data-token^="test:"] .builder-icon::after{
  content:""!important;
  position:absolute!important;
  left:13px!important;
  top:15px!important;
  width:11px!important;
  height:6px!important;
  border-left:3px solid #0d9488!important;
  border-bottom:3px solid #0d9488!important;
  transform:rotate(-45deg)!important;
}

.course-element-nav-item{
  grid-template-columns:42px minmax(0,1fr)!important;
  text-align:left!important;
}

.course-element-nav-item b{
  text-align:left!important;
}

@media(max-width:980px){
  body.lesson-page-view.with-sidebar .moodle-layout,
  body.lesson-page-view.with-sidebar:not(.sidebar-hidden) .moodle-layout,
  body.lesson-page-view.with-sidebar.sidebar-hidden .moodle-layout{
    width:100%!important;
    max-width:100%!important;
    padding-left:12px!important;
    padding-right:12px!important;
  }
}