/* VIAL LMS 0.6.31: cleaner activity icons and lesson page drawer. */
:root{
  --vial-activity-size:44px;
  --vial-activity-small:36px;
}

.activity-row{
  grid-template-columns:var(--vial-activity-size) minmax(0,1fr) auto!important;
}

.activity-icon,
.builder-icon{
  width:var(--vial-activity-size)!important;
  height:var(--vial-activity-size)!important;
  min-width:var(--vial-activity-size)!important;
  border-radius:12px!important;
  border:1px solid #cfe0e1!important;
  background:#fff!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  position:relative!important;
  overflow:hidden!important;
  box-shadow:0 2px 7px rgba(15,23,42,.06)!important;
}

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

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

.activity-icon.lesson,
.builder-item[data-token^="lesson:"] .builder-icon{
  background:#f8fffe!important;
  border-color:#9fd7d3!important;
}

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

.activity-icon.lesson .vial-activity-glyph::after,
.builder-item[data-token^="lesson:"] .builder-icon::after{
  content:""!important;
  position:absolute!important;
  left:12px!important;
  top:12px!important;
  width:12px!important;
  height:2px!important;
  border:0!important;
  border-radius:2px!important;
  background:#00857f!important;
  box-shadow:0 6px 0 #00857f,0 12px 0 #8bcac7!important;
  transform:none!important;
}

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

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

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

body.lesson-page-view .lesson-course-nav .activity-icon,
body.course-view .course-left-drawer .activity-icon{
  width:var(--vial-activity-small)!important;
  height:var(--vial-activity-small)!important;
  min-width:var(--vial-activity-small)!important;
  border-radius:10px!important;
}

body.lesson-page-view .lesson-course-nav .activity-icon .vial-activity-glyph,
body.course-view .course-left-drawer .activity-icon .vial-activity-glyph{
  transform:scale(.82)!important;
}

body.lesson-page-view .lesson-sidebar-pages{
  display:block!important;
}

body.lesson-page-view .lesson-pages-drawer-block{
  border-radius:8px!important;
  border:1px solid #d8e3ea!important;
  background:#fff!important;
  padding:12px!important;
}

body.lesson-page-view .lesson-pages-drawer-block h3{
  margin:0 0 10px!important;
  font-size:16px!important;
  color:#0f172a!important;
}

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

body.lesson-page-view .lesson-drawer-page-list .lesson-page-link{
  display:grid!important;
  grid-template-columns:32px minmax(0,1fr)!important;
  gap:8px!important;
  align-items:center!important;
  min-height:38px!important;
  padding:7px 8px!important;
  border:1px solid #d8e3ea!important;
  border-radius:8px!important;
  background:#fbfdff!important;
  color:#0f172a!important;
  text-decoration:none!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:#edfdfb!important;
}

body.lesson-page-view .lesson-drawer-page-list .lesson-page-link span{
  width:26px!important;
  height:26px!important;
  border-radius:7px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:#dff6f3!important;
  color:#00857f!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;
  overflow-wrap:anywhere!important;
}

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:min(var(--vial-reader-width), calc(100vw - 36px))!important;
  max-width:var(--vial-reader-width)!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

@media(max-width:900px){
  .activity-row{
    grid-template-columns:var(--vial-activity-small) minmax(0,1fr)!important;
  }
}