html,
body,
div,
p,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
li,
dl,
dt,
dd,
form,
fieldset,
caption,
table,
tr,
td,
th,
address,
blockquote,
img,
button {
  margin: 0;
  padding: 0;
}

details.detailsMenu summary::-webkit-details-marker,
details.detailsMenu summary::marker,
.settingsMenu summary::-webkit-details-marker,
.settingsMenu summary::marker,
.resource summary::-webkit-details-marker,
.resource summary::marker {
  display: none;
  content: '';
}
summary:focus {
  outline: 0;
}

img,
fieldset,
button {
  border: none;
}

*,
*::after,
*::before {
  box-sizing: border-box;
}

img {
  max-width: 100%;
}

.print {
  display: none;
}

a {
  text-decoration: none;
  color: var(--primary-color);
}

html,
body {
  height: 100%;
  overflow: hidden;
}

body,
button,
input,
table,
textarea,
select {
  font: normal 1em/1.5 -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
    Helvetica Neue, Arial, Noto Sans, sans-serif, apple color emoji,
    segoe ui emoji, Segoe UI Symbol, noto color emoji;
}

h2,
h3,
h4,
h5,
h6 {
  line-height: 1.25;
  color: var(--text-color-dark);
}

p,
label {
  color: var(--text-color-base);
}

hr {
  border: none;
  margin: 0;
  border-top: 1px solid var(--text-color-light);
}

body {
  --base-scale: calc(100vw / 75);
  --h2-font-size: max(1.2em, min(4em, calc(var(--base-scale) * 4)));
  --padding-size: max(1rem, min(2rem, calc(var(--base-scale) * 2)));
  --margin-size: max(0.5rem, min(2rem, calc(var(--base-scale) * 2)));
  --border-radius: 0.5rem;
  --drop-shadow: 4px 4px 25px rgba(0, 0, 0, 0.2);
  --primary-color: #0e92c7;
  --secondary-color: #0dbaea;
  --text-color-light: #bdbdbd;
  --text-color-base: #444444;
  --text-color-dark: #242424;
  --border-color: #ececec;
  --background-color: #f7f7f7;
  --foreground-color: #ffffff;
  --alert-fail-color: #b94e4e;
  --alert-warn-color: #d68539;
  --alert-neutral-color: #39a4d6;
  --alert-success-color: #70b94e;
  --alert-info-color: #575757;
  --splash-image: linear-gradient(
    45deg,
    var(--primary-color),
    60%,
    var(--secondary-color)
  );
}

.sr-only {
  position: absolute;
  left: -100000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

#iwin-company {
  overflow: auto;
  z-index: 1;
  background-color: var(--background-color);
  text-align: center;
  min-height: 100vh;
  height: 100%;
}

.hidden {
  display: none !important;
}

.noRecords {
  text-align: center;
}

header.hasModal::after,
main.hasModal::after {
  content: '';
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-backdrop-filter: blur(7px) brightness(80%);
  backdrop-filter: blur(7px) brightness(80%);
  z-index: 5;
}

main.checkingAuth {
  display: grid;
  place-content: center;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
main.checkingAuth img {
  max-width: 5vw;
  min-width: 3rem;
  margin: auto;
}
main.checkingAuth h2 {
  margin-top: 1rem;
  font-size: 1.2em;
}

label .helper {
  font-size: 0.75rem;
  display: block;
}

.opposite-block.s-vx1W0O9_95yO {
  flex: none !important;
  margin: 0 !important;
}

#top {
  position: relative;
  height: calc(4rem + 1vw);
  z-index: 5;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition: all 0.2s ease;
}

#top nav {
  position: relative;
  height: 4rem;
  width: 98vw;
  background-color: white;
  overflow-x: auto;
  box-shadow: var(--drop-shadow);
  margin: auto;
  border-radius: var(--border-radius);
}

#top.isVisible {
  position: sticky;
  top: 0;
}
#top.isVisible.scrolling {
  animation: movedown 0.2s;
}
#top:not(.scrolling) {
  padding-top: 1vw;
}
#top.isVisible nav {
  position: sticky;
  top: 1vw;
}

main {
  min-height: calc(100% - 4rem - 2vw);
  margin-bottom: 1vw;
}

main section > h2 {
  text-align: left;
  padding: 1rem;
  font-weight: 600;
  font-size: 1.75rem;
}

a.primary {
  margin: 2vh auto;
}
a.primary,
a.secondary {
  display: block;
  width: fit-content;
  box-shadow: var(--drop-shadow);
  padding: 0.5rem 1rem;
  border-radius: var(--border-radius);
}

a.button,
button[type='submit'],
button.primary,
button.secondary,
button.danger,
summary.button.primary {
  padding: 1rem 1.5rem;
}

a.button.svg {
  padding: 0.61rem 0.61rem;
  display: grid;
}

button:not(.link):not(.tabulator-page),
a.button,
summary.button {
  border-radius: var(--border-radius);
  line-height: 1.3;
  transition: all 0.2s ease;
  width: fit-content;
  height: fit-content;
  margin: 0.5rem auto;
  padding: 0.75rem 1rem;
  border: 1px solid transparent;
}

button:not(.primary):not(.danger):not([type='submit']):not(.link):not(.tabulator-page),
a.button:not(.primary):not(.danger),
summary.button:not(.primary):not(.danger) {
  background-color: white;
}
button[type='submit'],
button.primary,
a.button.primary,
summary.button.primary {
  background-color: var(--primary-color);
  color: white;
}
button.danger {
  background-color: rgb(150, 41, 41);
  color: white;
}
/* button:hover {
	box-shadow: 0 0 15px rgb(151, 151, 151) !important;
} */
button:not(:disabled):not(.primary):not(.danger):not([type='submit']):not(.active):active,
button:not(:disabled):not(.primary):not(.danger):not([type='submit']):not(.active):hover {
  color: var(--primary-color);
}
button.link {
  background-color: transparent;
}
button.link:hover {
  cursor: pointer;
  color: initial;
}
button.danger:hover {
  background-color: white;
  color: rgb(150, 41, 41);
  border-color: rgb(150, 41, 41);
}

a:hover {
  color: var(--primary-color);
}

.dashboard .tabulator {
  max-width: calc(1150px - 4vw - 2rem);
}

.upload-progress {
  position: fixed;
  top: 1.5rem;
  z-index: 10;
  left: 1.5rem;
  width: 22rem;
}
.upload-progress div {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: var(--border-radius);
  border-radius: var(--border-radius);
  background-color: white;
  box-shadow: 0 0.375rem 1rem #9a9a9a;
  border-bottom: 0.625rem solid transparent;
}
.upload-progress div p {
  text-align: left;
  font-size: 0.9em;
}
.upload-progress div span {
  transition: all 0.2s ease;
  position: absolute;
  height: 0.625rem;
  left: 0;
  bottom: 0;
  background-color: var(--alert-success-color);
}
.upload-progress.msg {
  width: fit-content;
  border-radius: var(--border-radius);
  background-color: white;
  box-shadow: 0 0.375rem 1rem #9a9a9a;
  padding: 1vw;
}

details {
  position: relative;
  z-index: 4;
}

summary h3 {
  display: inline-block;
}

summary.withAction {
  display: flex;
  align-items: center;
}
summary.withAction button {
  margin-right: 0;
}

.detailsMenu.primary {
  width: 17rem;
  margin: auto;
}
summary.button + ul {
  position: absolute;
  background-color: white;
  width: 17rem;
  top: 3.8rem;
  right: 0;
  margin: 0 auto;
  padding: 1rem;
  list-style-type: none;
  box-shadow: var(--drop-shadow);
  border-radius: 0.625rem;
  transition: all 0.2s ease;
  z-index: 3;
}
summary.button + ul li ul {
  padding: 0 1rem;
  text-align: left;
  list-style-type: none;
}
summary.button + ul li button,
summary.button + ul li a,
summary.button + ul li ul li {
  text-align: left;
  margin: 0.5rem;
  border-bottom: 1px solid var(--text-color-light);
  padding: 0.5rem;
  border-radius: 0;
  display: block;
  color: initial;
  width: calc(100% - 1rem);
  cursor: pointer;
}
summary.button + ul li a:hover {
  color: var(--primary-color);
}

nav > ul {
  height: 100%;
  list-style-type: none;
}
nav > ul > li {
  display: inline-flex;
  align-items: center;
  height: 100%;
}
nav > ul > li:not(.alternate) {
  justify-content: center;
  width: 8em;
}
nav > ul > li > a {
  width: 100%;
  height: 100%;
  display: flex;
  place-content: center;
  gap: 0.5rem;
  align-items: center;
}
nav > ul > li:not(.alternate) a {
  border-bottom: 2px solid transparent;
}
nav > ul > li a {
  color: var(--text-color-base);
}
nav > ul > li a svg *,
nav > ul > li a svg {
  width: 1.35rem;
  height: 1.35rem;
  fill: var(--text-color-dark);
}
nav > ul > li a.current * {
  fill: var(--primary-color);
}
nav > ul > li:not(.alternate) a.current,
nav > ul > li:not(.alternate) a:hover,
nav > ul > li:not(.alternate) a:hover * {
  color: var(--primary-color);
  fill: var(--primary-color);
  border-bottom-color: var(--primary-color);
}
/* nav > ul > li:not(.alternate) a.current > * {
  fill: var(--primary-color);
} */
nav > ul > li.logo {
  left: 1.2em;
  top: 0;
}
nav > ul > li.logo a {
  display: block;
  height: 2.8em;
  width: 2.8em;
}
nav > ul > li.logo picture * {
  border-radius: var(--border-radius);
  height: 2.8rem;
  width: 2.8rem;
  object-fit: cover;
}
nav > ul > li.alternate {
  position: absolute;
  top: 0;
}
nav > ul > li.notifications {
  width: 2rem;
  right: 13rem;
  justify-content: center;
}
nav > ul > li.alternate.notifications * {
  width: 1.35rem;
  height: 1.35rem;
}
nav > ul > li.support {
  right: 15.5rem;
}
nav > ul > li.profile {
  right: 1.2rem;
  width: 11rem;
}
nav > ul > li.profile summary span {
  text-align: left;
  display: inline-block;
  color: var(--text-color-dark);
  width: 10rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}
nav > ul > li.profile details summary::after {
  content: '\25BC';
  font-size: 0.8em;
}
nav > ul > li.profile details[open] summary::after {
  content: '\25B2';
  font-size: 0.8em;
}
header.scrolling:not(.isVisible) nav > ul > li.profile details > div {
  top: 1vw;
  max-height: calc(100vh - 2vw);
}
nav li.profile details[open]::details-content {
  position: fixed;
}
nav li.profile details[open] > div {
  position: fixed;
  top: calc(4rem + 2vw);
  z-index: 2;
  text-align: left;
  background-color: var(--foreground-color);
  width: 25vw;
  min-width: 280px;
  right: 1vw;
  padding: 1em;
  border-radius: var(--border-radius);
  box-shadow: var(--drop-shadow);
  max-height: calc(100vh - 4rem - 3vw);
  overflow: auto;
}
nav > ul > li.profile details > div img {
  border-radius: 50%;
  object-fit: cover;
}
nav > ul > li.profile details > div .currentAccount {
  text-align: center;
  border-bottom: 1px solid var(--text-color-light);
  padding: 1rem;
  margin-bottom: 1rem;
}
nav > ul > li.profile details > div .currentAccount * {
  display: block;
  margin: 0 auto;
}
nav > ul > li.profile details > div .currentAccount a {
  border-radius: var(--border-radius);
  border: 1px solid;
  padding: 0.5rem 1rem;
  margin-top: 0.5rem;
}
nav > ul > li.profile details > div .currentAccount img {
  width: 5rem;
  height: 5rem;
  margin-bottom: 1rem;
}
nav > ul > li.profile details > div ul {
  list-style-type: none;
}
nav > ul > li.profile details > div ul li {
  padding: 0.5rem;
}
nav > ul > li.profile details > div ul li:hover {
  border-radius: var(--border-radius);
  background-color: var(--background-color);
}
nav > ul > li.profile details > div ul li:not(:last-of-type) {
  margin-bottom: 0.5em;
}
nav > ul > li.profile details > div ul li a,
nav > ul > li.profile details > div ul li button {
  display: flex;
  align-items: center;
  width: 100%;
}
nav > ul > li.profile details > div ul li a img,
nav > ul > li.profile details > div ul li button img {
  width: 3rem;
  height: 3rem;
  margin-right: 1rem;
}
nav > ul > li.profile details > div ul li a p:last-of-type,
nav > ul > li.profile details > div ul li button p:last-of-type {
  text-transform: capitalize;
  font-size: 0.75rem;
}

nav > ul > li.profile details > div ul li button > span {
  width: calc(100% - 4rem);
  text-align: left;
}

nav > ul > li.profile details > div ul li button p.roles {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
nav
  > ul
  > li.profile
  details
  > div
  ul
  li
  button
  p.roles
  span:not(:last-of-type)::after {
  content: '•';
  margin: 0 0.5rem;
}

form {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
}
form fieldset legend:not(.sub) {
  font-size: 1.25em;
  color: var(--text-color-dark);
  margin-bottom: 1em;
  padding: 0;
  font-weight: 600;
}
form div label {
  display: block;
  color: var(--text-color-dark);
  margin-bottom: 0.25rem;
  margin-left: 0.25rem;
}
form > div > img {
  border-radius: var(--border-radius);
}
form img.withInput {
  margin-top: 2vh;
  max-height: 50vh;
  width: 100%;
}
form:not(.assessment) input,
form > div {
  text-align: left;
}
form input[name='title'] {
  font-size: 1.5em;
  height: auto;
  background: none;
  border: none;
  display: initial;
}
select,
textarea,
input:not([type='checkbox']):not(.mini) {
  display: block;
  padding: 0.25rem 0.5rem;
  border-radius: 0.625rem;
  border: 1px solid var(--text-color-light);
  line-height: 1.3;
  height: 2.5rem;
}
/* select,
textarea,
input:not(.question) {
  max-width: 13rem;
} */

select:focus,
textarea:not(:read-only):focus,
input:not(:read-only):focus {
  outline: none;
  border-color: var(--primary-color);
}
input[type='text']:not(.mini),
input[type='search'],
input[type='email'],
input[type='password'],
textarea {
  width: 100%;
}
input[type='text'].mini {
  width: 5rem;
  border: none;
}
input[type='checkbox'] + label {
  display: inline-block;
  text-align: right;
}
textarea:read-only,
input:read-only {
  color: var(--text-color-light);
  border-color: var(--text-color-light);
}
form div.alternate label,
form div.alternate input[type='checkbox'] {
  display: inline-block;
}
form div.alternate input[type='checkbox'] {
  height: auto;
}
/* form button:not(.ql-toolbar button) {
  margin: 1rem;
} */
fieldset.radioGroup {
  margin-bottom: 1.5rem;
}
fieldset.radioGroup,
fieldset .checkbox {
  display: flex;
}
fieldset.radioGroup legend {
  margin-bottom: 0.25rem;
  font-size: 1em;
  font-weight: 400;
}
fieldset.radioGroup input {
  position: absolute;
  height: 1px;
  width: 1px;
  left: -100000px;
}
fieldset.radioGroup label {
  padding: 0.5rem;
  flex-grow: 1;
  text-align: center;
  border-top: 1px solid;
  border-bottom: 1px solid;
  border-color: var(--text-color-light);
  background-color: white;
  transition: all 0.2s ease;
  height: 2.5rem;
  line-height: 1.4;
  margin: 0;
}
fieldset input[type='radio']:checked + label {
  background-color: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
}
fieldset.radioGroup label:first-of-type {
  border-left: 1px solid var(--text-color-light);
  border-top-left-radius: 0.625rem;
  border-bottom-left-radius: 0.625rem;
}
fieldset.radioGroup label:last-of-type {
  border-right: 1px solid var(--text-color-light);
  border-top-right-radius: 0.625rem;
  border-bottom-right-radius: 0.625rem;
}
fieldset input[type='radio']:focus + label {
  outline: 0;
  border: 1px solid var(--primary-color);
}
fieldset input[type='radio']:disabled + label {
  color: gray;
  cursor: not-allowed;
}

fieldset .checkbox {
  align-items: center;
  justify-content: space-between;
}

textarea {
  min-height: 3.25em;
}

form.steps div label,
form.steps fieldset legend {
  font-size: 1.2em;
  color: var(--text-color-base);
  font-weight: 600;
  text-align: left;
  margin-bottom: 1rem;
}
form.steps div label.alternate {
  font-size: 0.85rem;
  font-weight: 400;
  align-self: flex-end;
  margin-bottom: 0;
}
form.steps div:not(:first-of-type) label,
form.steps fieldset legend {
  margin-top: 1.5rem;
}

.splash {
  position: relative;
  height: 30vh;
  background-position: center;
  background-size: cover;
  width: 98vw;
  margin: auto;
  border-radius: var(--border-radius);
  margin-top: 1vw;
  display: flex;
  align-items: end;
  justify-content: space-between;
  padding: 1.25rem;
}
.splash-actions, .splash-content {
  position: relative;
  z-index: 1;
}
.splash-content h2 {
  color: white;
  margin-bottom: 0.75rem;
}
.splash::after {
  content: '';
  background: linear-gradient(hsla(0, 0%, 0%, 0), hsl(0, 0%, 0%));
  height: 24vh;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 0;
  border-bottom-left-radius: var(--border-radius);
  border-bottom-right-radius: var(--border-radius);
}
.splash.hasLabel {
  text-align: center;
  display: grid;
  place-content: center;
  align-content: flex-end;
  padding: 1rem;
}

.splash-actions {
  display: flex;
  gap: 0.75rem;
}
.splash-actions .collaborators {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.splash-actions button,
.splash-actions a {
  margin: 0 !important;
  box-shadow: none;
  display: grid;
  place-content: center;
}

.page-actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 1rem;
}

.page-actions button,
.page-actions a {
  margin: 0 !important;
}

section.block {
  background-color: white;
  padding: 2vw 3vw;
  width: 90vw;
  max-width: 1200px;
  border-radius: calc(var(--border-radius) * 2);
  margin: auto;
}
section.block.summary {
  position: relative;
  display: flex;
  margin: -5vw auto 2em;
}
section.block.summary > div {
  text-align: left;
}
section.block.summary > div:first-child {
  width: 11rem;
  margin-top: -5vw;
}
section.block.summary > div:first-child .companyLogo {
  position: relative;
  background-color: white;
  border-radius: var(--border-radius);
  box-shadow: var(--drop-shadow);
  padding: 0.25em;
  min-height: 10vw;
}
section.block.summary > div:first-child .companyLogo picture * {
  display: block;
  border-radius: var(--border-radius);
}
section.block.summary > div:first-child .companyLogo label {
  position: absolute;
  bottom: 0.25rem;
  left: 0.25rem;
  right: 0.25rem;
}
section.block.summary > div:first-child > label,
section.block.summary > div:first-child div {
  padding: 0.5rem;
}
section.block.summary > div:not(:first-child) {
  flex-grow: 1;
  margin: 0 1.5rem;
  min-width: 50%;
}
section.block.summary > div h2 {
  font-size: 1.75em;
}
section.block.summary > div ul {
  list-style-type: none;
}
section.block.summary > div ul,
section.block.summary > div .editable {
  display: grid;
  grid-template-columns: 30%, 35% 35%;
  grid-auto-flow: column;
}
section.block.summary > div ul li {
  height: 100%;
  font-size: 0.9em;
}

section.block.summary > div ul li.alternate,
section.block.summary > div .editable label.alternate {
  grid-column: 1;
  grid-row: 1 / 3;
  max-width: 18em;
}
section.block.summary > div .editable label * {
  display: block;
}
section.block.summary > div .editable label.alternate * {
  width: 90%;
  max-width: 90%;
  height: 6.25rem;
  max-height: 6.25rem;
}
section.block.summary > div ul li span {
  display: inline-block;
  width: 110px;
  color: var(--text-color-light);
}
section.block.summary > div .action {
  position: absolute;
  top: 1rem;
  right: 1.5rem;
  background-color: transparent;
}
section.block.summary > div h3 {
  font-size: 1em;
}
section.block.summary > div h3:not(:first-of-type) {
  margin-top: 0.5rem;
}
section.block.related {
  text-align: left;
  margin: 0 auto 2em;
}

.container.hasAside > section {
  padding-left: calc(17.5rem + 2vw);
}
.container:not(.hasAside):not([data-testid='container']) {
  max-width: 1150px;
  margin: 0 auto;
}
.container.hasAside aside {
  height: calc(100vh - 4rem - 3vw);
  background-color: white;
  padding: 1vw;
  position: fixed;
  width: 17.5rem;
  z-index: 2;
  display: grid;
  grid-gap: 1vw;
  grid-template-rows: 2.5rem calc(100vh - 8.5rem - 7vw) 2rem;
  border-radius: var(--border-radius);
  box-shadow: var(--drop-shadow);
  transition: all 0.2s ease;
  left: 1vw;
  bottom: 1vw;
}
.container.hasAside aside > *:nth-child(2),
.entity aside > *:nth-child(2) {
  overflow-y: auto;
}
main.hasHeader:not(.showingHeader) .container.hasAside aside,
main.hasHeader:not(.showingHeader) .container.hasAside .aside {
  height: calc(100vh - 2vw);
  grid-template-rows: 2.5rem calc(100vh - 4.5rem - 6vw) 2rem;
}

.container.lesson.hasAside aside,
.container.lesson.hasAside .aside {
  height: calc(100vh - 2vw);
  grid-template-rows: 4rem calc(100vh - 6rem - 6vw) 2rem;
}
/* main.hasHeader.showingHeader .entity nav {
  top: calc(4rem + 1vw);
} */
/* main:not(.showingHeader) .container.hasAside aside {
  grid-template-rows: 2.5rem calc(100vh - 2vw - 9.5rem) 2.5rem;
}
main:not(.showingHeader) .container.lesson.hasAside aside {
  grid-template-rows: 4rem calc(100vh - 2vw - 11rem) 2.5rem;
} */
/*
main .entity aside {
  top: 1vw;
  height: calc(100vh - 2vw);
} 
main:not(.showingHeader) .entity aside:not(.hasImg) {
  grid-template-rows: 4rem calc(100vh - 2vw - 11rem) 2.5rem;
}
main:not(.showingHeader) .entity aside.hasImg {
  grid-template-rows: 20vh calc(60vh - 2vw - 7rem) 2.5rem;
} */

main:not(.showingHeader) .entity nav {
  top: 0;
}
.container.hasStepper > aside,
.container.hasStepper > section {
  padding-bottom: 6.25rem;
}
.container.hasStepper.hasAside .stepper {
  width: calc(97vw - 17.5rem);
  left: calc(17.5rem + 2vw);
}

aside .actions {
  display: flex;
  gap: 0.5rem;
  height: 100%;
  align-items: center;
  justify-content: space-evenly;
}
aside .actions > button,
aside .actions > a,
aside .actions > details summary,
button.asideAction {
  height: 2rem !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 2rem !important;
  user-select: none;
  -webkit-user-select: none;
}
aside .actions > button,
aside .actions > a,
aside .actions > details,
button.asideAction {
  flex-grow: 1;
}
aside .actions > details summary {
  padding-left: 1rem !important;
}
.container.hasFooter footer {
  position: fixed;
  bottom: 1vw;
  width: 98vw;
  left: 1vw;
  padding: 0.5rem;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  background-color: white;
  border-radius: var(--border-radius);
  box-shadow: var(--drop-shadow);
  overflow-x: auto;
}
.container.hasFooter footer ul {
  display: grid;
  gap: 0.5rem;
  align-items: center;
  grid-auto-flow: column;
}
.container.hasFooter footer .cardThumbnail {
  position: relative;
  box-shadow: var(--drop-shadow);
  border: 1px solid transparent;
  overflow: hidden;
  aspect-ratio: 4/5;
  width: 5vw;
  display: grid;
  place-content: center;
}
.container.hasFooter footer .cardThumbnail.isCurrent {
  border-color: var(--primary-color);
}
.container.hasFooter footer .cardThumbnail span {
  line-height: 0.8;
}
.container.hasFooter footer .cardThumbnail:not(.isCurrent) span {
  font-size: 1.5rem;
  color: var(--text-color-light);
}
.container.hasFooter footer .cardThumbnail.isCurrent span {
  font-size: 2rem;
}
.container.hasFooter footer .cardThumbnail .content {
  overflow: hidden;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
}
.container.hasFooter footer .cardThumbnail .content * {
  font-size: 0.2em;
  padding: 2px;
  margin: 2px;
  word-wrap: initial;
}
.container.hasFooter footer .cardThumbnail.wide {
  aspect-ratio: 16/9;
  width: 5rem;
}
.container.hasFooter footer .cardThumbnail button {
  margin: 0;
  position: absolute;
}
.container.hasFooter footer .cardThumbnail button:not(.remove) {
  background: transparent !important;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  margin: 0;
}
.container.hasFooter footer .cardThumbnail button.remove {
  top: 0.25rem;
  right: 0.25rem;
  display: none;
  padding: 0;
  background-color: var(--alert-fail-color) !important;
  color: white;
  height: 1.5rem;
  width: 1.5rem;
  line-height: 1.1;
  padding-left: 0.08rem;
  z-index: 2;
}
.container.hasFooter footer .cardThumbnail:hover button.remove {
  display: block;
}
.container.hasFooter footer > button {
  display: grid;
  margin: 0 !important;
  background-color: var(--background-color) !important;
}
.container > section,
.dashboard > section {
  padding: 1vw;
}
.container > section > header {
  margin-bottom: 2rem;
}
.container section header h2 {
  padding: 0.4rem;
}
.container section.hasFilters h2 {
  padding-left: 0;
}
.container section header:not(.hasFilters) div {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.container section header div button {
  box-shadow: var(--drop-shadow);
}
.container section > details {
  margin: 1rem auto;
}
.container section > details > summary {
  text-align: left;
  font-size: 1.2em;
}
.container section > details > summary button {
  float: right;
  padding: 0.5rem 1rem;
  font-size: 0.8em;
}

.stepper {
  position: fixed;
  background-color: white;
  bottom: 1vw;
  left: 1vw;
  right: 1vw;
  width: 98vw;
  height: 4rem;
  box-shadow: var(--drop-shadow);
  z-index: 2;
  border-radius: var(--border-radius);
}
.previousStep,
.nextStep {
  position: fixed;
  bottom: 0;
  height: 4rem;
  text-align: left;
  padding: 0;
  color: var(--primary-color);
  margin: 0;
  z-index: 3;
  display: grid;
  place-content: center;
}
.nextStep {
  right: 1rem;
}
.nextStep button {
  padding: 0.75rem;
  border: 1px solid;
}
.nextStep button::after {
  content: '\2192';
  margin-left: 0.5rem;
}
.previousStep {
  left: 1rem;
  display: flex;
  align-items: center;
}
.previousStep::before {
  content: '\2190';
  margin-right: 0.5rem;
}
.stepper ul {
  position: relative;
  height: 100%;
  list-style-type: none;
  display: flex;
  justify-content: center;
  align-items: center;
}
.stepper li {
  display: inline-flex;
  align-items: center;
}
.stepper li:not(.alternate) {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background-color: white;
  border: 1px solid var(--text-color-dark);
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}
.stepper li.step.current {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.filters {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.filters * {
  margin: 0;
}

main .entity aside {
  top: 1vw;
  height: calc(68vh - 2vw);
}
main .entity aside:not(.hasImg) {
  grid-template-rows: 4rem calc(68vh - 6rem - 6vw) 2rem;
}
main .entity aside.hasImg {
  grid-template-rows: 8rem calc(68vh - 10rem - 6vw) 2rem;
}
.entity {
  display: flex;
  width: 98vw;
  /* max-width: 1400px; */
  min-width: none;
  margin: auto;
}
.entity aside,
.entity nav {
  position: sticky;
  transition: all 0.2s ease;
}
.entity nav {
  font-size: 1.2em;
  height: 3rem;
  text-align: left;
  background-color: var(--background-color);
  margin-top: 1rem;
  padding-bottom: 0.5rem;
  z-index: 3;
}
.entity nav > ul > li:not(.alternate) {
  width: fit-content;
}
.entity nav > ul > li:not(.alternate) a {
  padding-left: 0.5vw;
  padding-right: 0.5vw;
}
.entity aside {
  display: grid;
  grid-gap: 1vw;
  background-color: white;
  margin-top: -4vw;
  margin-bottom: 1vw;
  width: 25%;
  padding: 1vw;
  border-radius: var(--border-radius);
  box-shadow: var(--drop-shadow);
  transition: all 0.2s ease;
  z-index: 4;
}
.entity aside a.alternate {
  position: absolute;
  right: 1rem;
  top: 1rem;
}
.entity aside.hasImg img {
  border-radius: 50%;
  height: 4rem;
  width: 4rem;
  object-fit: cover;
}
.entity aside header,
.lesson aside header {
  display: grid;
}
.lesson aside header {
  text-align: left;
}
.entity aside header h2 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 92%;
}
aside dl {
  text-align: left;
  overflow: auto;
}
aside dt {
  font-size: 0.85em;
  color: var(--text-color-light);
  margin-top: 0.5rem;
}
/* .entity aside a:last-of-type {
  align-self: end;
} */
.entity aside details > ul {
  left: 26%;
}
.entity aside details > ul li > ul {
  left: calc(26% + 20rem);
  position: fixed;
  bottom: calc(1vw + 1.5rem);
  right: auto;
}
.entity > div {
  width: 100%;
  padding-left: 1vw;
  padding-right: 1vw;
}
.entity > div .content {
  text-align: left;
}
.entity > div .content > section {
  margin-bottom: 1rem;
  padding-left: 0.75vw;
  padding-right: 0.75vw;
}
.entity > div .content > section > h3 {
  margin-bottom: 0.75rem;
}

.entity > div .content > section .list {
  background-color: white;
  border-radius: var(--border-radius);
  list-style-type: none;
}
.entity > div .content > section .list li {
  display: flex;
  justify-content: space-between;
  padding: 1rem;
  align-items: center;
}
.entity > div .content > section .list li:not(:last-of-type) {
  border-bottom: 1px solid var(--background-color);
}
.entity > div .content > section.listDetail {
  display: flex;
  gap: 0.5rem;
}
.entity > div .content > section.listDetail .list {
  cursor: pointer;
  align-self: flex-start;
}
.entity > div .content > section.listDetail .list:not(.showingDetail) {
  flex-grow: 1;
}
.entity > div .content > section.listDetail .list li.selected {
  font-weight: bold;
}
.entity > div .content > section.listDetail .list li button {
  margin: 0;
}
.entity > div .content > section.listDetail .list li details {
  width: 100%;
}
.entity > div .content > section.listDetail .list li .detail {
  margin-top: 0.5rem;
}
.entity > div .content > section.listDetail .list li .detail > button {
  float: right;
  margin-top: -1.5rem;
}
.entity > div .content > section.listDetail .list li .detail form {
  margin-top: 1vw;
  display: grid;
  gap: 1vw;
  grid-auto-columns: auto;
  justify-items: center;
}
.entity > div .content > section.listDetail .detail .tabGroup header {
  display: flex;
  justify-content: space-around;
  border-bottom: 1px solid var(--background-color);
}
.entity > div .content > section.listDetail .detail .tabGroup header h3 {
  border-bottom: 2px solid transparent;
  padding: 1rem;
  transition: all 0.2s ease;
  cursor: pointer;
}
.entity > div .content > section.listDetail .detail .tabGroup header .current {
  border-bottom-color: var(--primary-color);
}
.entity > div .content > section.listDetail .detail .tabGroup .tabItem {
  padding: 1rem;
  text-align: center;
}

article.content header {
  display: flex;
  justify-content: space-between;
  align-content: center;
}
.content header:not(.lessonHeader) {
  margin-bottom: 1rem;
}

article.content header .heading h1 {
  font-size: 1.7rem;
}
article.content header .heading p {
  font-size: 0.9rem;
}

.filterAndSort fieldset:not(:first-child) {
  margin-top: 1rem;
}

.filterAndSort fieldset legend {
  text-align: left;
}

.tableContainer {
  position: relative;
}
table {
  width: 100%;
  padding: 0;
  text-align: left;
  border-collapse: collapse;
  position: relative;
  /* border-collapse: separate;
  border-spacing: 0 1vw;
  margin-bottom: -1vw; */
}
table caption {
  padding: 1rem;
  caption-side: bottom;
}
/* table thead th::before {
  content: '';
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  height: 1vw;
  width: 100%;
  position: absolute;
  top: -1vw;
  left: 0;
} */
table thead th {
  /* position: sticky;
  z-index: 1;
  top: calc(4rem + 2vw); */
  border-bottom: 1px solid #989898;
  background-color: #efefef;
  transition: all 0.2s ease;
  font-weight: 600;
  white-space: nowrap;
}
main.hasHeader:not(.showingHeader) table thead th {
  /* top: 1vw; */
}
/* table td:first-of-type, */
table th:first-of-type {
  border-top-left-radius: 0.625rem;
  /* border-bottom-left-radius: 0.625rem; */
}
table th:last-of-type {
  border-top-right-radius: 0.625rem;
  /* border-bottom-right-radius: 0.625rem; */
}
table tr:last-of-type td:first-of-type {
  border-bottom-left-radius: 0.625rem;
}
table tr:last-of-type td:last-of-type {
  border-bottom-right-radius: 0.625rem;
}

table tbody tr:nth-child(even) td {
  background-color: #f7f7f7;
}
table tbody tr:nth-child(odd) td {
  background-color: white;
}
table tbody tr.isClickable td {
  cursor: pointer;
}

table thead th,
table tbody td {
  text-align: center;
  padding: 1rem 0.5rem;
}
table tbody td img {
  display: inline-block;
  overflow: hidden;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.625rem;
  vertical-align: middle;
  margin-right: 0.5rem;
  object-fit: cover;
  object-position: center;
}
table thead th.alternate,
table tbody td.alternate {
  text-align: left;
}
table tbody details {
  position: initial;
}
table tbody details summary:hover {
  cursor: pointer;
}
table tbody details ul {
  text-align: left;
  list-style-type: none;
  position: absolute;
  padding: 1em;
  font-size: 0.8em;
  background-color: rgba(255, 255, 255, 0.3);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border-radius: 0.625em;
  box-shadow: var(--drop-shadow);
  z-index: 1;
}
table tbody details ul li:not(:last-of-type) {
  margin-bottom: 0.5em;
}
table tbody details ul li a,
table tbody details ul li button {
  display: block;
  color: var(--primary-color);
  padding: 0.25rem;
  margin: 0;
  background-color: transparent;
}

.vertical span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-align: left;
}

.modal.isFullScreen > section {
  width: 100vw;
  height: 100vh;
  border-radius: 0;
  transition: all 0.2s;
}

.selectedActions {
  position: absolute;
  margin-left: 2.25rem;
  width: calc(100% - 2.25rem);
  list-style-type: none;
  background-color: #f1f1f5;
  text-align: left;
  display: flex;
  justify-content: space-around;
  border-top-right-radius: 0.625rem;
  z-index: 3;
}
.selectedActions li {
  height: 3.5em;
  padding: 0;
  display: grid;
  place-content: center;
}
.selectedActions a {
  display: inline-block;
  color: var(--text-color-light);
  font-weight: 600;
  line-height: 2.5em;
}

.splash,
.moduleItem img,
table tbody td.alternate .feature {
  background-image: var(--splash-image);
}

table tbody td.alternate .feature {
  width: 2.5vw;
  height: 2.5vw;
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.5vw;
}

.feature {
  aspect-ratio: 1/1;
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: var(--border-radius);
}

.modal {
  position: fixed;
  display: grid;
  z-index: 6;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  place-content: center;
}
.modal > section {
  width: 80vw;
  max-height: 90vh;
  overflow: auto;
  position: relative;
  margin: auto;
  padding: 3rem;
  text-align: left;
  background-color: var(--background-color);
  border-radius: var(--border-radius);
}
.modal > section header {
  position: relative;
  margin-bottom: 1em;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1em;
}
.modal > section header h2 {
  padding: 0;
  color: var(--text-color-dark);
}
.modal > section header button[name='closeModal'],
.modal > section header a[title='Close modal'] {
  font-size: 1.5em;
  line-height: 1.3;
  color: var(--text-color-base);
}
.modal > section header button[name='closeModal'] {
  padding: 0 1rem 0.25rem;
  margin: 0;
}
.modal > section form,
.modal > section .modalSection {
  overflow: auto;
  max-height: calc(90vh - 12em);
}
.modal > section > form .formActions {
  text-align: center;
  display: flex;
  justify-content: center;
  gap: 1rem;
  padding-bottom: 2rem;
}
.modal > section > form .formActions a,
.modal > section > form .formActions button {
  margin: 0;
  padding: 1rem 1.5rem;
}
.modal > section > form > fieldset .grid-container {
  display: grid;
  grid-template-columns: calc(50% - 1em) calc(50% - 1em);
  grid-gap: 1em;
  margin-bottom: 2em;
  align-items: center;
}

.modal > section #enrol {
  width: calc(80vw - 6rem);
}

aside details:not(.detailsMenu) {
  margin: 1rem auto;
}
aside details summary,
.popUpMenu summary {
  position: relative;
  background-color: var(--primary-color);
  color: white;
  padding: 0 1rem;
  text-align: left;
  border-radius: 0.625rem;
  user-select: none;
  -webkit-user-select: none;
  height: 2rem;
  line-height: 2rem;
}
aside details summary svg {
  vertical-align: middle;
}
aside details summary svg .fill {
  fill: white;
}
aside details.detailsMenu summary::after {
  content: '\002B';
  position: absolute;
  top: 0;
  right: 0.75em;
  font-size: 1.5rem;
  line-height: 2rem;
}
aside details.detailsMenu[open] summary::after {
  content: '\002D';
}
aside details > ul {
  position: fixed;
  bottom: calc(1vw + 1.5rem);
  right: auto;
}
aside details > ul.notBottom {
  bottom: auto;
}
aside details > ul,
.popUpMenu ul {
  z-index: 2;
  padding: 1.5rem 1rem;
  text-align: left;
  background-color: var(--foreground-color);
  border-radius: calc(var(--border-radius) * 2);
  list-style-type: none;
  box-shadow: var(--drop-shadow);
}
aside details > ul {
  left: 17rem;
}
aside details > ul li,
.popUpMenu ul li {
  position: relative;
  padding: 0.5em;
  height: 2.5em;
}
aside details > ul li:not(:last-of-type),
.popUpMenu ul li:not(:last-of-type) {
  margin-bottom: 1em;
}
aside details > ul li::before,
.popUpMenu ul li::before {
  position: absolute;
  top: 0;
  content: '';
  border-radius: 50%;
  height: 2.5em;
  width: 2.5em;
  background-color: var(--primary-color);
  opacity: 0.1;
}
aside details > ul li::after,
.popUpMenu ul li::after {
  position: absolute;
  top: 0.725em;
  left: 1.25em;
  content: '';
  border-radius: 50%;
  height: 1em;
  width: 1em;
  background-color: var(--primary-color);
}
aside details > ul li a,
.popUpMenu ul li a {
  margin-left: 3.5em;
}
aside details > ul li button,
.popUpMenu ul li button {
  margin: 0 0 0 3.5rem !important;
  padding: 0;
  border-radius: initial;
}

.card-container button.active {
  color: white;
  background-color: var(--primary-color);
}
.card-container button.alternative {
  float: right;
}
.card {
  margin: auto;
  border-radius: var(--border-radius);
  width: 50%;
  max-width: 1200px;
  min-height: 50vh;
}
.card.wide {
  width: 100%;
}
.card.split {
  display: flex;
  gap: 2rem;
  position: relative;
  margin-top: 5rem;
}
.card.split > .editor {
  width: 50%;
}

@supports not (aspect-ratio: 4/5) {
  .card {
    width: 600px;
    height: 750px;
  }
}

@supports not (aspect-ratio: 16/9) {
  .card.wide {
    width: 800px;
    height: 450px;
  }
}

.lesson.container.hasFooter {
  margin-bottom: calc(4vw + 5rem);
}

.editorParent {
  border-radius: var(--border-radius);
}
.lesson.editorParent .editorToolbar {
  border-radius: var(--border-radius);
  z-index: 10;
  background-color: var(--background-color);
}
.lesson.editorParent:not(.split) .editorToolbar {
  position: sticky;
  top: 3rem;
}
.lesson.editorParent.split .editorToolbar {
  position: absolute;
  top: -4rem;
  z-index: 2;
}
.lesson.editorParent .editor {
  margin-top: 1vw;
  border-radius: var(--border-radius);
  position: relative;
  z-index: 0;
}
.lesson.editorParent:not(.split) .editorToolbar {
  width: 100%;
}
.lesson.editorParent.split .editorToolbar {
  width: calc(50% - 1rem);
}
.lesson.editorParent .editorToolbar:nth-child(1) {
  left: 0;
}
.lesson.editorParent .editorToolbar:nth-child(3) {
  right: 0;
}
.page-container.lesson.editorParent > .editor {
  min-height: calc(100vh - 8.5rem - 2vw);
}

.lesson.editorParent #quizForm {
  position: fixed;
  top: 5rem;
  left: 0;
  right: 0;
  max-height: calc(100vh - 10rem);
  z-index: 10;
  padding: 1.5rem 5rem;
  max-width: 600px;
  width: 90%;
  border-radius: var(--border-radius);
  background-color: var(--foreground-color);
  box-shadow: 0 9px 16px var(--text-color-light);
}
.lesson.editorParent #quizForm .answers {
  text-align: center;
}
.lesson.editorParent #quizForm .answers .answerContainer {
  display: flex;
  gap: 1rem;
  align-items: center;
}
.lesson.editorParent #quizForm .answers .answerContainer:not(:first-of-type) {
  margin-top: 1rem;
}
.lesson.editorParent #quizForm > button {
  border: 1px solid;
}
.lesson.editorParent #quizForm .answers button {
  margin: 0.5rem auto;
  border: 1px solid;
}

.lesson.editorParent .ql-editor {
  overflow-y: initial;
}
.lesson.editorParent .ql-container {
  min-height: 50vh;
}

.ql-editor > *:not(img.background) {
  position: relative;
  z-index: 1;
}
.ql-editor > img:not(.background) {
  z-index: 2;
}
.ql-editor img.background {
  height: 100%;
  width: 100%;
  object-fit: cover;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 0;
  border-radius: var(--border-radius);
}
.ql-editor iframe {
  width: 100%;
  border-radius: var(--border-radius);
  border: none;
  aspect-ratio: 16/9;
}
.ql-editor .interactive {
  background-color: white;
  border-radius: var(--border-radius);
  box-shadow: var(--drop-shadow);
  margin-bottom: 2rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.ql-editor .interactive h2 {
  font-size: medium;
  border-bottom: 1px solid #eee;
  margin-bottom: 2rem;
  padding: 2rem;
}
.ql-editor .interactive > div {
  padding: 1rem;
}
.ql-editor .interactive > div:last-of-type {
  margin-top: 2rem;
}
.ql-editor .interactive > div:last-of-type div {
  margin-bottom: 1rem;
}
.ql-editor .interactive > div:last-of-type div::before {
  content: '';
  border: 1px solid;
  height: 1rem;
  width: 1rem;
  border-radius: 50%;
  display: inline-block;
  background-color: white;
  margin-right: 1rem;
}
.ql-editor .interactive > div:last-of-type div.selected::before {
  border-color: var(--primary-color);
  background-color: var(--primary-color);
}

.ql-editor .ql-video {
  width: 100%;
  aspect-ratio: 16/9;
  min-height: 60vh;
}

.ql-snow.ql-toolbar button,
.ql-snow .ql-toolbar button {
  margin: auto !important;
  border-radius: 0 !important;
  line-height: initial !important;
  border: none !important;
  background-color: transparent !important;
  width: 28px !important;
  height: 24px !important;
  padding: 3px 5px !important;
}

.ql-iframe-input {
  height: 5.5rem;
  padding: 0.5rem;
}

.ql-toolbar .ql-iframe-input button {
  display: inline-block !important;
  width: fit-content !important;
  line-height: 1 !important;
  margin-top: 0.5rem !important;
  border: 1px solid !important;
  border-radius: var(--border-radius) !important;
}
.ql-toolbar .ql-iframe-input button:nth-of-type(2) {
  margin-left: 0.5rem !important;
}

.moduleItem,
.sectionItem {
  position: relative;
  display: flex;
  justify-content: space-between;
  background-color: white;
  border-radius: 0.625rem;
  padding-top: 0.5rem;
  padding-right: 1.5rem;
  padding-bottom: 0.5rem;
  padding-left: 0.5rem;
  margin-bottom: 1vw;
  height: 6rem;
  align-items: center;
  gap: 1vw;
}
.sectionItem {
  padding: 2rem;
}
.moduleItem img {
  height: 100%;
  width: 15%;
  object-fit: cover;
  border-radius: 0.625rem;
}
.moduleItem > div {
  padding: 0.5rem 1.5rem;
  flex-grow: 1;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-self: stretch;
}
.moduleItem .moduleDetails {
  display: flex;
  gap: 0.5rem;
}
.moduleItem .moduleDetails p:not(:last-of-type)::after {
  content: '°';
  margin-left: 0.5rem;
}
.moduleItem label {
  font-size: 0.8em;
}
.moduleItem input {
  width: 6rem;
}

.contentContainer {
  background-color: white;
  padding: 1rem;
  border-radius: var(--border-radius);
}

.datePicker {
  position: relative;
  font-size: 1rem;
  font-weight: 500;
  background-color: white;
  border: 1px solid var(--text-color-light);
  border-radius: var(--border-radius);
  padding: 0.4rem 0.5rem;
  line-height: 1.4;
}
.datePicker .date-input-hidden {
  position: absolute;
  visibility: hidden;
  height: 1px;
  padding: 0;
  width: 1px;
  right: 0;
  bottom: -1vw;
}

.ql-toolbar,
.ql-bubble {
  border-top-left-radius: var(--border-radius);
  border-top-right-radius: var(--border-radius);
}

.editorContent,
.editorBlock,
.editor.ql-container {
  font-family: 'Poppins';
  font-size: 1em;
  background-color: white;
}
.editor.ql-container.standalone {
  border: 1px solid var(--text-color-light);
  border-bottom-left-radius: var(--border-radius);
  border-bottom-right-radius: var(--border-radius);
  margin-bottom: 1.5rem;
}
.editor.ql-container.ql-snow:not(.standalone) {
  border: none;
}
.ql-editor img {
  object-fit: cover;
}

.ql-image-editor:not(:empty) {
  position: absolute;
  top: 0;
  bottom: 0;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  /* opacity: .5; */
  background-color: rgba(255, 255, 255, 0.3);
  left: 0;
  right: 0;
  border-radius: var(--border-radius);
  z-index: 3;
}
.ql-image-editor .cropper-actions {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 3;
}

.cr-slider {
  margin: auto;
}

.ql-video {
  background-color: black;
  border-radius: var(--border-radius);
}

/* Set dropdown font-families */
.ql-font span[data-label='Poppins']::before {
  font-family: 'Poppins';
}
.ql-font span[data-label='Sans Serif']::before {
  font-family: sans-serif;
}
.ql-font span[data-label='Roboto']::before {
  font-family: 'Roboto';
}

.ql-font-roboto {
  font-family: 'Roboto';
}

.editorBlock {
  padding: 1rem 3rem;
}
.editorContent,
.codex-editor {
  text-align: left;
  padding: 1rem;
  border-radius: var(--border-radius);
}
.editorContent h3,
.codex-editor h3 {
  font-size: 1.75em;
}
.editorContent h4,
.codex-editor h4 {
  font-size: 1.25em;
}
.editorContent h5,
.codex-editor h5 {
  font-size: 1.17em;
}
.editorContent h6,
.codex-editor h6 {
  font-size: 1.1em;
}
.editorContent p,
.editorContent h3 {
  margin-bottom: 1em;
}
.editor.ql-container .ql-editor h3:not(:first-child),
.editor.ql-container .ql-editor h4,
.editor.ql-container .ql-editor h5 {
  margin-top: 0.5em;
  margin-bottom: 1em;
}
.editor.ql-container .ql-editor h3 {
  font-size: x-large;
}
.editor.ql-container .ql-editor h4 {
  font-size: larger;
}
.editor.ql-container .ql-editor h5 {
  font-size: large;
}
.editor.ql-container .ql-editor h6 {
  font-size: medium;
}
.editorContent ul,
.editorContent ol {
  padding-left: 2rem;
}

.ce-block__content,
.ce-toolbar__content {
  max-width: unset;
}

.cdx-list {
  margin: 0;
  padding-left: 40px;
  outline: none;
}
.cdx-list__item {
  padding: 5.5px 0 5.5px 3px;
  line-height: 1.6em;
}

.cdx-list--unordered:not(.cdx-list__item-children) {
  list-style-type: disc;
}

.cdx-list--ordered:not(.cdx-list__item-children) {
  list-style-type: decimal;
}

.cdx-list__item-children.cdx-list--ordered {
  list-style-type: lower-alpha;
}

.cdx-list__item-children.cdx-list--unordered {
  list-style-type: circle;
}

.cdx-list-settings {
  display: flex;
}
.cdx-list-settings .cdx-settings-button {
  width: 50%;
}

#publishModuleForm {
  display: none;
}

/*
 * Company
 */
.companyColour {
  position: relative;
  margin-right: 1.5rem;
}
.companyColour::before {
  content: '';
  position: absolute;
  top: 0.25rem;
  right: -1.5rem;
  background-color: var(--primary-color);
  width: 1rem;
  height: 1rem;
  border-radius: 0.2rem;
}
.companyColour.primary::before {
  background-color: var(--primary-color);
}
.companyColour::before {
  background-color: var(--secondary-color);
}

.cropperContainer {
  position: relative;
  width: 100%;
  height: 50vh;
  margin: 1rem auto;
}
.cropperContainer .container {
  border-radius: var(--border-radius);
}

.learnItem {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border-radius: var(--border-radius);
  margin-bottom: 1rem;
  background-color: white;
}
ul li .learnItem:hover {
  cursor: grab;
}
.learnItem button {
  padding: 0.25rem 1rem;
}
.learnItem details:hover {
  cursor: pointer;
}
.learnItem label {
  flex-grow: 1;
}
.learnItem label span {
  transform: translateY(1vh);
}
.learnItem .popout.hidden {
  display: none;
}
.learnItem .popout {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: grid;
  place-content: center;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  z-index: 5;
}
.learnItem .popout .popoutContainer {
  background-color: white;
  max-width: 50vw;
  max-height: 50vh;
  margin: auto;
  border-radius: var(--border-radius);
  overflow: scroll;
  padding: 3rem 3rem 2.5rem;
  box-shadow: var(--drop-shadow);
}
.learnItem .popout .popoutContainer fieldset {
  margin-top: 1rem;
}
.learnItem .popout .close {
  float: right;
  height: 2.5rem;
  margin: -2.5rem;
}

.materialItem header {
  flex-direction: row-reverse;
  z-index: 3;
  padding: 0.5rem;
  position: sticky;
  top: 2.5rem;
}
.materialItem header:not(.lessonHeader) {
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.materialItem header .page-actions {
  margin: 0;
}

.actionBlock {
  display: block;
  margin-bottom: 0.5rem;
}

.tabulator {
  background: none;
  border: none;
  overflow: initial;
}
.tabulator .pill {
  background-color: white;
  border: 1px solid;
  border-radius: 10px;
  padding: 0.15rem 0.5rem;
  text-transform: capitalize;
}
.tabulator .pill.info {
  color: var(--alert-info-color);
}
.tabulator .pill.success {
  color: var(--alert-success-color);
}
.tabulator .pill.neutral {
  color: var(--alert-neutral-color);
}

.tabulator .tabulator-header {
  background: var(--background-color);
  border: 1px solid rgb(234, 235, 242);
  border-top-left-radius: var(--border-radius);
  border-top-right-radius: var(--border-radius);
  position: sticky;
  top: 0px;
  z-index: 1;
}
.tabulator .tabulator-header .tabulator-col:not(.tabulator-col-group) {
  background: var(--background-color);
  padding: 1rem;
  border: none;
}
.tabulator .tabulator-tableholder .tabulator-table {
  background: none;
  border-bottom-left-radius: var(--border-radius);
  border-bottom-right-radius: var(--border-radius);
}
.tabulator-row {
  border-left: 1px solid rgb(234, 235, 242);
  border-right: 1px solid rgb(234, 235, 242);
}
.tabulator-row:last-of-type {
  border-bottom-left-radius: var(--border-radius);
  border-bottom-right-radius: var(--border-radius);
  border-bottom: 1px solid rgb(234, 235, 242);
}
.tabulator-row .tabulator-cell {
  border-right: none;
  padding: 0.5rem;
}
.tabulator-cell.orange {
  background-color: orange;
}
.tabulator-cell.red {
  background-color: red;
}
.tabulator-cell.blue {
  background-color: rgb(0, 143, 179);
}
.tabulator-row:not(.tabulator-selected):not(.tabulator-selectable):not(:hover).tabulator-row-even {
  background-color: var(--background-color);
}
.tabulator-header-filter input {
  height: 2rem;
}
.tabulator .tabulator-footer {
  margin-top: 1rem;
  background: none;
  border: none;
}

.tabulator .tabulator-footer .tabulator-page.active {
  color: white;
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}
.tabulator .tabulator-footer .tabulator-page:not(:disabled):hover {
  background: white;
  color: var(--primary-color);
}
.tabulator .tabulator-footer .tabulator-page:disabled:hover {
  cursor: initial;
  color: grey;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
  display: inline-block;
}
/* .learnItem a {
  display: flex;
  gap: 1rem;
}
.learnItem a::before {
  color: white;
  border-radius: var(--border-radius);
  padding: 0.25rem 0.5rem;
  font-size: 0.8rem;
  width: 100px;
}
.learnItem.lesson a::before {
  content: 'Lesson';
  background-color: rgba(92, 185, 79, 0.7)
}
.learnItem.assessment a::before {
  content: 'Assessment';
  background-color: rgba(98, 79, 185, 0.7)
} */

.asg-question {
  padding: 4.375rem;
  border-bottom: 1px solid #eaeaea;
}

.asg-question .options {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(calc(50% - 18px), 1fr));
}

.asg-question .options label {
  cursor: pointer;
  border: 1px solid #fff;
  border-radius: 0.625rem;
  box-shadow: 0 8px 24px hsl(210deg 8% 62% / 20%);
  display: flex;
  padding: 1.375rem;
  gap: 0.7rem;
  width: 100%;
  transition: all 0.1s ease-in;
}

.asg-question .options label:hover {
  transform: scale(1.01);
}

@keyframes movedown {
  from {
    transform: translateY(-5rem);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes fadeout {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@media screen and (min-width: calc(10vw + 1401px)) {
  .entity aside details > ul {
    left: calc(350px - 1.25rem + ((100vw - 1400px) / 2));
  }
  .entity aside details > ul li > ul {
    left: calc(350px + 18.75rem + ((100vw - 1400px) / 2));
  }
}