/* Colors:
    Blue: var(--color-accent-primary) rgb(26,83,216)
    Green: var(--color-accent-secondary) rgb(26,216,159)
    Red: var(--color-accent-danger) rgb(216,26,55)
    Text: var(--color-text-primary) rgb(60,69,100)
    Side Panel Text var(--color-text-secondary);;
*/

/* ── Dashboard Shell (CSS Grid app shell) ── */

.dashboard-shell {
  --header-h: 50px;
  --sidebar-w: 320px;
  display: grid;
  grid-template-rows: var(--header-h) 1fr;
  grid-template-columns: 1fr;
  grid-template-areas:
    "header"
    "main";
  width: 100%;
  height: 100dvh;
  overflow: hidden;
}

@media screen and (min-width: 900px) {
  .dashboard-shell {
    --header-h: 100px;
  }
}

@media screen and (min-width: 1100px) {
  .dashboard-shell {
    grid-template-columns: var(--sidebar-w) 1fr;
    grid-template-areas:
      "sidebar header"
      "sidebar main";
  }

  .dashboard-shell.sidebar-collapsed {
    grid-template-columns: 0 1fr;
  }
}

/* ── Header ── */

.header-dashboard {
  grid-area: header;
  z-index: 3000;
}

.header-container-v2 {
  width: auto;
  max-width: 1200px;
  height: 50px;
  flex-grow: 1;
  margin: auto;
  display: flex;
  flex-direction: row;
}

@media screen and (min-width: 900px) {

  .header-container-v2 {
    width: 90%;
  }
}

/* ── Sidebar (off-canvas drawer on mobile, static column on desktop) ── */

.dashboard-side-panel {
  position: fixed;
  top: var(--header-h);
  left: 0;
  width: 100%;
  max-width: none;
  height: calc(100dvh - var(--header-h));
  display: flex;
  flex-direction: column;
  background-color: var(--color-panel);
  z-index: 11000;
  overflow-x: hidden;
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}

.dashboard-shell.sidebar-open .dashboard-side-panel {
  transform: translateX(0);
}

/* ── Sidebar backdrop (mobile only) ── */

.dashboard-sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  top: var(--header-h);
  background: rgba(0, 0, 0, 0.4);
  z-index: 10999;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.dashboard-shell.sidebar-open .dashboard-sidebar-backdrop {
  display: block;
  opacity: 1;
  pointer-events: auto;
}

@media screen and (min-width: 1100px) {
  .dashboard-side-panel {
    position: relative;
    grid-area: sidebar;
    grid-row: 1 / -1;
    top: auto;
    width: var(--sidebar-w);
    max-width: none;
    height: 100%;
    transform: none;
    transition: width 0.3s ease, opacity 0.3s ease;
    overflow: hidden;
  }

  .dashboard-shell.sidebar-collapsed .dashboard-side-panel {
    width: 0;
    opacity: 0;
    pointer-events: none;
  }

  .dashboard-sidebar-backdrop {
    display: none !important;
  }
}

.side-panel-nav {
  width: auto;
  height: auto;
  margin: 20px 20px 0px 30px;
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  border-bottom: 0.5px solid var(--color-text-secondary);
}

.side-panel-nav-div {
  height: auto;
  min-height: 44px;
}

.side-panel-nav-btn,
.side-panel-course-nav-btn {
  width: auto;
  height: auto;
  flex-grow: 1;
  display: flex;
  margin: auto auto auto 0px;
  cursor: pointer;
  text-decoration: none;
}

.side-panel-nav-div-img {
  width: 20px;
  height: 20px;
  display: flex;
  margin: auto auto auto 0px;
}

.side-panel-nav-div-img svg path {
  -webkit-transition: all .4s;
  -moz-transition: all .4s;
  -o-transition: all .4s;
  -ms-transition: all .4s;
  transition: all .4s;
}

.side-panel-nav-div-text {
  width: auto;
  height: auto;
  flex-grow: 1;
  display: flex;
  margin: auto auto auto 15px;
}

.side-panel-nav-div-text p {
  font-size: 18px;
  color: var(--color-text-secondary);
  text-align: left;
  margin: auto auto auto 0px;
  -webkit-transition: all .4s;
  -moz-transition: all .4s;
  -o-transition: all .4s;
  -ms-transition: all .4s;
  transition: all .4s;
}

.side-panel-nav-btn:hover svg path,
.side-panel-course-nav-btn:hover svg path {
  fill: var(--color-accent-primary);
  color: var(--color-accent-primary);
}

.side-panel-nav-btn:hover .side-panel-nav-div-text p,
.side-panel-course-nav-btn:hover .side-panel-nav-div-text p {
  color: var(--color-accent-primary);
}

.side-panel-nav-btn-active p,
.side-panel-nav-btn-active svg,
.side-panel-nav-btn-active path {
  fill: var(--color-accent-primary);
  color: var(--color-accent-primary);
}

.side-panel-nav-expand-div {
  width: 30px;
  height: 30px;
  display: flex;
  border-radius: 15px;
  margin: auto 0px auto auto;
  cursor: pointer;
  -webkit-transition: all .7s;
  -moz-transition: all .7s;
  -o-transition: all .7s;
  -ms-transition: all .7s;
  transition: all .7s;
}

.side-panel-nav-expand-div p {
  font-size: 16px;
  color: var(--color-text-primary);
  margin: auto;
  -webkit-transition: all .7s;
  -moz-transition: all .7s;
  -o-transition: all .7s;
  -ms-transition: all .7s;
  transition: all .7s;
}

.side-panel-nav-expand-div:hover {
  background-color: var(--color-border-strong);
}

.side-panel-nav-expand-div:hover p {
  color: var(--color-accent-primary);
}

.side-panel-sub-nav-div {
  width: 100%;
  height: auto;
  display: none;
  flex-direction: row;
  margin: 0px 70px 15px auto;
}

.side-panel-sub-nav-btn {
  width: auto;
  height: auto;
  flex-grow: 1;
  display: flex;
  margin: 7px auto 7px 0px;
  cursor: pointer;
}

.side-panel-sub-nav-btn:hover .side-panel-nav-div-text p {
  color: var(--color-accent-primary);
}

.side-panel-enroll-div {
  width: auto;
  height: auto;
  display: flex;
  background-color: var(--color-accent-secondary);
  border-radius: 5px;
  border: 1px solid var(--color-bg-primary);
  -webkit-transition: all .7s;
  -moz-transition: all .7s;
  -o-transition: all .7s;
  -ms-transition: all .7s;
  transition: all .7s;
}

.side-panel-enroll-div p {
  font-size: 16px;
  color: var(--color-bg-primary);
  text-align: center;
  font-weight: 800;
  margin: auto 7px auto 7px;
}

.side-panel-sub-nav-btn:hover .side-panel-enroll-div {
  background-color: var(--color-accent-primary);
}

.js-dashboard-header-menu-container {
  width: 60px;
  height: 100%;
  display: flex;
  padding-left: 10px;
}

@media screen and (min-width: 1100px) {
  .js-dashboard-header-menu-container {
    display: none;
  }
}

/* ── Sidebar collapse toggle (desktop only, top-right of sidebar) ── */

.side-panel-collapse-toggle {
  display: none;
}

@media screen and (min-width: 1100px) {
  .side-panel-collapse-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 30px;
    right: 16px;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    cursor: pointer;
    color: var(--color-text-secondary);
    background: transparent;
    z-index: 10;
    transition: background-color 0.2s ease, color 0.2s ease;
  }

  .side-panel-collapse-toggle:hover {
    background-color: var(--color-border-strong);
    color: var(--color-accent-primary);
  }
}

/* ── Sidebar expand toggle (desktop collapsed state only) ── */

.sidebar-expand-toggle {
  display: none;
}

@media screen and (min-width: 1100px) {
  .dashboard-shell.sidebar-collapsed .sidebar-expand-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    width: 42px;
    height: 42px;
    margin: auto 40px;
    border-radius: 50%;
    border: 2px solid var(--color-border);
    background-color: var(--color-bg-primary);
    color: var(--color-text-secondary);
    cursor: pointer;
    flex-shrink: 0;
    box-sizing: border-box;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  }

  .dashboard-shell.sidebar-collapsed .sidebar-expand-toggle:hover {
    border-color: var(--color-accent-primary);
    color: var(--color-accent-primary);
  }
}

.js-dashboard-menu-btn {
  width: 40px;
  height: 40px;
  display: flex;
  border-radius: 10px;
  margin: auto auto auto 0px;
  background-color: var(--color-bg-primary);
  -webkit-transition: all .7s;
  -moz-transition: all .7s;
  -o-transition: all .7s;
  -ms-transition: all .7s;
  transition: all .7s;
  cursor: pointer;
}

.js-dashboard-menu-btn img {
  height: 40px;
  width: 40px;
  object-fit: contain;
  object-position: center;
  margin: auto;
}

.js-dashboard-menu-btn:hover {
  background-color: var(--color-border-strong);
}

@media screen and (min-width: 1100px) {

  .side-panel-nav {
    margin: 0px 20px 0px 30px;
  }
  .side-panel-nav-div.external-resources-nav-div {
    margin: 20px 0px 15px 0px !important;
  }

  .side-panel-nav-div {
    min-height: 14px;
    margin: 30px 0px 15px 0px;
  }

  .header-flex-grow-container {
    margin: 0px 20px 0px 0px;
    padding-left: 40px;
    box-sizing: border-box;
  }
}

/* Side Panel Course Section */

.side-panel-course-container {
  width: auto;
  height: auto;
  flex-grow: 1;
  margin: 0px 0px 0px 0px;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
  /* hides scroll bar */
}

.side-panel-course-inner-container {
  width: auto;
  height: auto;
}

.side-panel-course-progress-container {
  width: auto;
  height: auto;
  display: flex;
  flex-direction: column;
  margin: 0px 20px 20px 30px;
  border-bottom: 0.5px solid var(--color-text-secondary);
}

.side-panel-course-progress-text-container {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  margin: 20px auto 0px auto;
}

.side-panel-course-title {
  width: auto;
  height: auto;
  display: flex;
  flex-grow: 1;
  margin: 0px auto auto 0px;
}

.side-panel-course-title p {
  font-size: 18px;
  color: var(--color-text-secondary);
  text-align: left;
  margin: 0px auto auto 0px;
}

.side-panel-version-selector {
  align-items: center;
  gap: 6px;
  width: auto;
  height: auto;
  flex-direction: column;
  margin: 0px 20px 0px 30px;
  border-bottom: 0.5px solid var(--color-text-secondary);
  padding: 0.5rem;
}

.side-panel-version-selector label {
  font-size: 13px;
  color: var(--color-text-secondary);
  white-space: nowrap;
}
.side-panel-version-selector select {
  font-size: 13px;
  padding: 3px 6px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  color: var(--color-text-primary);
  cursor: pointer;
}

.side-panel-course-progress-num-div {
  width: auto;
  height: auto;
  display: flex;
  margin: 0px 0px auto auto;
}

.side-panel-course-progress-num {
  font-size: 18px;
  color: var(--color-text-secondary);
  text-align: right;
  margin: 0px 0px auto auto;
}

.side-panel-course-progress-bar {
  width: 100%;
  height: auto;
  display: flex;
  margin: 10px auto 20px auto;
}

.side-panel-progress-bar {
  width: 100%;
  height: 10px;
  display: flex;
  background-color: var(--color-bg-primary);
  border-radius: 5px;
  overflow: hidden;
}

.side-panel-progress-bar-value {
  height: 100%;
  background-color: var(--color-accent-secondary);
}

/* Side panel TOC */

.side-panel-toc-container {
  width: calc(100% - 5px);
  height: auto;
  display: flex;
  flex-direction: column;
  margin: 0px auto 0px auto;
}

.side-panel-toc-btn-container {
  width: auto;
  height: auto;
  display: flex;
  flex-direction: column;
  margin: 0px 20px 0px 30px;
  border-bottom: 0.5px solid var(--color-text-secondary);
}

.toc-btn {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: row;
  margin: 0px auto 20px 0px;
  cursor: pointer;
}

.toc-btn-text {
  width: auto;
  height: auto;
  display: flex;
  flex-grow: 1;
  margin: 0px auto auto 0px;
}

.toc-btn-text p {
  font-size: 18px;
  color: var(--color-text-secondary);
  margin: 0px auto auto 0px;
  text-align: left;
  -webkit-transition: all .7s;
  -moz-transition: all .7s;
  -o-transition: all .7s;
  -ms-transition: all .7s;
  transition: all .7s;
}

.toc-btn-arrow {
  width: 40px;
  height: 24px;
  display: flex;
  margin: 0px 0px auto auto;
}

#toc-arrow {
  width: 10px;
  height: 10px;
  object-fit: contain;
  object-position: center;
  margin: auto 0px auto auto;
  -webkit-transition: all .7s;
  -moz-transition: all .7s;
  -o-transition: all .7s;
  -ms-transition: all .7s;
  transition: all .7s;
}

.toc-btn:hover p {
  color: var(--color-accent-primary);
}

.toc-content-container {
  width: calc(100% - 2px);
  height: auto;
  display: none;
  margin: auto;
  border-right: 2px solid var(--color-panel);
}

.toc-header-1 {
  width: 100%;
  height: auto;
  display: flex;
  margin: 0px auto 0px auto;
  background-color: var(--color-panel-muted);
}

.toc-header-1-text {
  width: auto;
  height: auto;
  display: flex;
  flex-direction: row;
  margin: 15px 20px 15px 30px;
}

.toc-header-1-text p {
  font-size: 18px;
  color: var(--color-text-secondary);
  text-align: left;
  margin: 0px auto auto 0px;
}

.toc-unit-container {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  margin: 0px auto 0px auto;
  background-color: var(--color-bg-primary);
}

.toc-module-free-standing {
  width: auto;
  height: auto;
  display: flex;
  flex-direction: row;
  margin: 7px 20px 7px 20px;
  cursor: pointer;
  border-left: 2px solid var(--color-bg-primary);
  -webkit-transition: all .7s;
  -moz-transition: all .7s;
  -o-transition: all .7s;
  -ms-transition: all .7s;
  transition: all .7s;
}

.toc-module-free-standing:hover {
  background-color: var(--color-panel);
}

.toc-module-free-standing-img-div {
  width: 20px;
  height: 100%;
  display: flex;
  margin: auto 0px auto 10px;
}

.toc-module-free-standing-img {
  width: 20px;
  height: auto;
  display: flex;
  margin: auto auto auto auto;
}

.toc-module-free-standing-img svg path {
  -webkit-transition: all .4s;
  -moz-transition: all .4s;
  -o-transition: all .4s;
  -ms-transition: all .4s;
  transition: all .4s;
}

.toc-module-free-standing:hover svg path {
  color: var(--color-accent-primary);
  fill: var(--color-accent-primary);
}

.toc-module-free-standing-img-selected svg path {
  color: var(--color-accent-primary);
  fill: var(--color-accent-primary);
}

.toc-module-free-standing-text {
  width: auto;
  height: auto;
  display: flex;
  flex-grow: 1;
  margin: auto 8px auto 10px;
}

.toc-module-free-standing-text p {
  font-size: 16px;
  color: var(--color-text-secondary);
  margin: 0px auto auto 0px;
  text-align: left;
  -webkit-transition: all .7s;
  -moz-transition: all .7s;
  -o-transition: all .7s;
  -ms-transition: all .7s;
  transition: all .7s;
}

.toc-module-free-standing-text-selected p {
  color: var(--color-accent-primary);
}

.toc-module-free-standing:hover .toc-module-free-standing-text p {
  color: var(--color-accent-primary);
}

.toc-section-container {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  margin: 7px auto 7px 0px;
}

.toc-section-heading-container {
  width: auto;
  height: auto;
  min-height: 50px;
  flex-grow: 1;
  display: flex;
  flex-direction: row;
  background-color: var(--color-panel);
  border-radius: 5px;
  margin: auto 20px auto 20px;
  border: 1px solid var(--color-bg-primary);
  cursor: pointer;
  -webkit-transition: all .7s;
  -moz-transition: all .7s;
  -o-transition: all .7s;
  -ms-transition: all .7s;
  transition: all .7s;
}

.toc-section-heading-container:hover {
  border: 1px solid var(--color-accent-secondary);
}

.toc-section-heading-div {
  width: auto;
  height: auto;
  flex-grow: 1;
  display: flex;
  flex-direction: row;
  margin: 10px;
}

.toc-section-heading-text {
  width: calc(100% - 30px);
  height: auto;
  display: flex;
  margin: 0px auto auto 0px;
}

.toc-section-heading-text p {
  font-size: 16px;
  color: var(--color-text-secondary);
  text-align: left;
  margin: 0px auto auto 0px;
}

.toc-section-heading-column {
  width: 30px;
  height: 100%;
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  margin: 0px 0px auto auto;
}

.toc-section-heading-expand-div {
  width: 30px;
  height: 25px;
  display: flex;
  margin: 0px 0px auto auto;
}

.toc-section-heading-expand-div p {
  font-size: 20px;
  color: var(--color-text-secondary);
  margin: auto auto auto auto;
  text-align: center;
  position: relative;
  top: -5px;
  -webkit-transition: all .7s;
  -moz-transition: all .7s;
  -o-transition: all .7s;
  -ms-transition: all .7s;
  transition: all .7s;
}

.toc-section-heading-container:hover .toc-section-heading-expand-div p {
  color: var(--color-accent-secondary);
}

.toc-section-heading-count-div {
  width: 30px;
  height: auto;
  display: flex;
  flex-grow: 1;
  margin: auto auto 0px auto;
}

.toc-section-heading-count-div p,
.toc-section-heading-count-div p span {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin: auto auto 0px auto;
  text-align: center;
}

.toc-section-module-outer-container {
  width: auto;
  height: auto;
  display: none;
  flex-direction: column;
  border-left: 2px solid var(--color-panel);
}

.toc-section-module-inner-container {
  width: auto;
  height: auto;
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  border-left: 2px solid var(--color-panel);
  margin: 7px 20px 7px 40px;
}

.toc-module-primary {
  width: 100%;
  height: auto;
  flex-grow: 1;
  display: flex;
  flex-direction: row;
  margin: 0px auto 10px 0px;
  cursor: pointer;
  border-left: 2px solid var(--color-bg-primary);
  -webkit-transition: all .7s;
  -moz-transition: all .7s;
  -o-transition: all .7s;
  -ms-transition: all .7s;
  transition: all .7s;
}

.toc-module-primary:hover {
  background-color: var(--color-panel);
}

.toc-module-selected {
  border-left: 2px solid var(--color-accent-primary);
}

.toc-module-primary-img-div {
  width: 20px;
  height: 100%;
  display: flex;
  margin: auto 0px auto 10px;
}

.toc-module-primary-img {
  width: 20px;
  height: auto;
  display: flex;
  margin: auto auto auto auto;
}

.toc-module-primary-img svg path {
  -webkit-transition: all .4s;
  -moz-transition: all .4s;
  -o-transition: all .4s;
  -ms-transition: all .4s;
  transition: all .4s;
}

.toc-module-primary:hover svg path {
  color: var(--color-accent-primary);
  fill: var(--color-accent-primary);
}

.toc-module-primary-text {
  width: calc(100% - 30px);
  height: auto;
  display: flex;
  margin: auto 8px auto 10px;
}

.toc-module-primary-text p {
  font-size: 16px;
  color: var(--color-text-secondary);
  margin: 0px auto auto 0px;
  text-align: left;
  -webkit-transition: all .7s;
  -moz-transition: all .7s;
  -o-transition: all .7s;
  -ms-transition: all .7s;
  transition: all .7s;
}

.toc-module-primary-text-selected p {
  color: var(--color-accent-primary);
}

.toc-module-complete-div {
  width: 30px;
  height: 30px;
  display: flex;
  margin: 0px 0px auto auto;
}

.toc-module-complete-div img {
  width: 15px;
  height: 15px;
  object-fit: contain;
  object-position: center;
  margin: auto;
}

.toc-module-primary:hover .toc-module-primary-text p {
  color: var(--color-accent-primary);
}

.toc-module-subheading-container {
  width: auto;
  height: auto;
  display: none;
  flex-direction: column;
  margin: auto 20px auto 25px;
}

.toc-module-subheading-div {
  width: 100%;
  height: auto;
  display: flex;

  cursor: pointer;
}

.subheading-div-1 {
  margin: 7px auto 7px auto;
}

.subheading-div-2 {
  margin: 7px auto 7px 15px;
}

.toc-module-subheading-div p {
  font-size: 16px;
  color: var(--color-text-secondary);
  text-align: left;
  margin: 0px auto auto 0px;
  -webkit-transition: all .7s;
  -moz-transition: all .7s;
  -o-transition: all .7s;
  -ms-transition: all .7s;
  transition: all .7s;
}

.toc-module-subheading-div:hover p {
  color: var(--color-accent-primary);
}

/* Side Panel Course Nav */

.side-panel-course-nav-container {
  margin: 0px 20px 20px 30px;
  border-bottom: 0.5px solid var(--color-text-secondary);
}

/* Dashboard Main Body */

.dashboard-main-body {
  grid-area: main;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0 16px;
}

@media screen and (min-width: 768px) {
  .dashboard-main-body {
    padding: 0 24px;
  }
}

@media screen and (min-width: 1100px) {
  .dashboard-main-body {
    padding: 0;
  }

  /*
   * Standalone pages (tools, home, exam, etc.) need a top gap from the header.
   * .module-container is excluded: its audio player is sticky at top: 0 and
   * must stay flush, so a top margin there would let content peek above it.
   */
  .dashboard-home-container,
  .account-settings-container,
  .flashcard-outer-container,
  .stat-chart-outer-container,
  .cheat-sheet-container,
  .exam-hq-container,
  .exam-overview-container,
  .exam-review-container,
  .exam-questions-container {
    margin-top: 32px;
  }
}

/* Dashboard Home Body */

.dashboard-home-container {
  width: 90%;
  max-width: 900px;
  height: auto;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  overflow: visible;
}

.dashboard-home-heading {
  width: 100%;
  height: auto;
  display: flex;
  margin: 60px auto 0px auto;
}

.dashboard-home-heading h1 {
  font-size: 18px;
  color: var(--color-text-primary);
  opacity: 60%;
  margin: 0px auto auto 0px;
  text-align: left;
}

.dashboard-home-course-row-container {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 40px auto auto auto;
}

.dashboard-home-course-div {
  width: 195px;
  height: 360px;
  display: flex;
  flex-direction: column;
  margin: 0px auto 15px auto;
}

.dashboard-home-course-img {
  width: 100%;
  height: 154px;
  display: flex;
  border-radius: 10px;
  background-color: var(--color-panel);
}

.dashboard-home-course-img-active {
  background-color: var(--color-accent-secondary);
}

.dashboard-home-course-img img {
  width: auto;
  height: 90%;
  object-fit: contain;
  object-position: center;
  margin: auto;
}

.dashboard-home-course-title {
  width: 100%;
  height: auto;
  flex-grow: 1;
  display: flex;
  margin: 0px auto auto auto;
}

.dashboard-home-course-title p {
  font-size: 16px;
  text-align: left;
  color: var(--color-text-primary);
  opacity: 60%;
  line-height: 1.4;
}

.dashboard-home-course-progress-div {
  width: 100%;
  height: auto;
  display: flex;
  margin: 0px auto auto auto;
}

.dashboard-home-course-button-container {
  width: auto;
  height: auto;
  display: flex;
}

.dashboard-home-course-btn {
  margin-top: 30px;
}

@media screen and (min-width: 768px) {

  .dashboard-home-course-div {
    margin: 0px 30px 15px 0px;
  }

}

@media screen and (min-width: 1108px) {

  .side-panel-course-progress-container {
    margin: 0px 20px 0px 30px;
  }

}

/*  Account Settings */

.account-settings-container {
  width: 90%;
  max-width: 900px;
  height: auto;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  overflow: visible;
}

.account-settings-heading {
  width: 100%;
  height: auto;
  display: flex;
  margin: 60px auto 0px auto;
}

.account-settings-heading h1 {
  font-size: 18px;
  color: var(--color-text-primary);
  opacity: 60%;
  margin: 0px auto auto 0px;
  text-align: left;
}

.account-settings-form-container {
  width: 100%;
  height: 2900px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 40px auto auto auto;
}

.account-settings-form {
  width: 90%;
  height: auto;
  display: flex;
  flex-direction: column;
  margin: auto;
}

.account-settings-input-row {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 0px auto 30px auto;
}

.account-settings-email-pref-container {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  margin: 0px auto 0px 0px;
}

.account-settings-email-pref-check-div {
  width: auto;
  height: auto;
  display: flex;
  flex-direction: row;
}

.account-settings-email-pref-check-div input {
  height: 20px;
  width: 20px;
  margin: 0px auto auto 0px;
}

.account-settings-email-pref-check-div label {
  font-size: 16px;
  color: var(--color-text-muted);
  margin: 0px 0px auto 20px;
  text-align: left;
}

.account-settings-email-pref-text-div {
  width: 100%;
  height: auto;
  display: flex;
  margin: 20px auto 30px auto;
}

.account-settings-email-pref-text-div p {
  font-size: 14px;
  color: var(--color-text-muted);
  margin: 0px 0px auto 40px;
  text-align: left;
}

.account-settings-btn-row {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: row;
  margin: 0px auto 30px 0px;
}

.account-settings-btn-container {
  width: auto;
  height: auto;
  flex-grow: 1;
  display: block;
  margin: 0px auto auto 0px;
}

#account-settings-btn {
  cursor: default;
}

.account-settings-reset-password-div {
  width: auto;
  height: auto;
  display: flex;
  margin: auto 0px auto auto;
}

.account-settings-reset-password-link {
  height: auto;
  width: auto;
  font-size: 18px;
  color: var(--color-accent-primary);
  margin: auto auto auto auto;
  text-align: center;
  -webkit-transition: all .4s;
  -moz-transition: all .4s;
  -o-transition: all .4s;
  -ms-transition: all .4s;
  transition: all .4s;
  cursor: pointer;
  text-decoration: none;
}

.account-settings-reset-password-link:hover {
  color: var(--color-accent-danger);
}

/* flashcards */
/* Flashcard form*/
.flashcard-outer-container {
  width: 90%;
  max-width: 900px;
  height: auto;
  display: flex;
  flex-direction: column;
  margin: auto;
  overflow: visible;
}

.flashcard-inner-container {
  width: 90%;
  max-width: 370px;
  height: 390px;
  max-height: 390px;
  display: flex;
  flex-direction: column;
  margin: auto;
  background-color: var(--color-bg-primary);
  box-shadow: 3px 10px 40px 0px rgba(0, 21, 77, .2);
}

.flashcard-img-div {
  width: 64px;
  height: 64px;
  display: flex;
  margin: 20px auto auto auto;
}

.flashcard-img-div img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  object-position: center;
  margin: 0px auto auto auto;
}

.flashcard-form-heading-div {
  width: 100%;
  height: auto;
  display: flex;
  margin: 15px auto auto auto;
}

.flashcard-form-heading-div p {
  font-size: 28px;
  color: var(--color-text-primary);
  margin: 0px auto auto auto;
  text-align: center;
}

.flashcard-form-text-div {
  width: 90%;
  height: auto;
  display: flex;
  margin: 15px auto auto auto;
}

.flashcard-form-text-div p {
  font-size: 16px;
  color: var(--color-text-primary);
  opacity: 60%;
  margin: 0px auto auto auto;
  text-align: center;
}

.flashcard-form {
  width: 80%;
  height: auto;
  display: flex;
  flex-direction: column;
  margin: 0px auto 0px auto;
}

.flashcard-form-row {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: row;
  margin: 0px auto 20px auto;
}

@media screen and (min-width: 768px) {

  .flashcard-form-text-div p {
    font-size: 18px;
  }

}

/* Actual flashcards */

.flashcard-review-container {
  width: 100%;
  max-width: 900px;
  height: 270px;
  max-height: 300px;
  display: flex;
  flex-direction: row;
  margin: auto;
}

.flashcard-review-arrow-container {
  width: 10%;
  min-width: 35px;
  height: 100%;
  display: flex;
}

.flashcard-review-arrow-div {
  width: 50px;
  height: 50px;
  display: none;
  border-radius: 25px;
  background-color: var(--color-bg-primary);
  margin: auto auto auto auto;
  -webkit-transition: all .4s;
  -moz-transition: all .4s;
  -o-transition: all .4s;
  -ms-transition: all .4s;
  transition: all .4s;
  cursor: pointer;
}

.flashcard-review-arrow-div-show {
  display: flex;
}

.flashcard-review-arrow-div img {
  object-fit: contain;
  object-position: center;
  margin: auto;
}

.flashcard-review-arrow-div:hover {
  background-color: rgba(221, 238, 255, 0.5);
}

.flashcard-card-container {
  width: auto;
  height: auto;
  flex-grow: 1;
  display: flex;
  margin: auto auto auto auto;
}

.flashcard-card-div {
  width: 80%;
  max-width: 450px;
  height: 275px;
  display: none;
  flex-direction: column;
  margin: auto;
  box-shadow: 3px 10px 40px 0px rgba(0, 21, 77, .2);
  cursor: pointer;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -o-transition: all 1s;
  -ms-transition: all 1s;
  transition: all 1s;
}

.flashcard-card-div-active {
  display: flex;
}

.flashcard-card-front {
  width: 100%;
  height: 100%;
  display: none;
  flex-direction: column;
  background-color: var(--color-bg-primary);
  margin: 0px 0px auto auto;
}

.flashcard-card-front-show {
  display: flex;
}

.flashcard-card-front-count-div {
  width: auto;
  height: auto;
  display: flex;
  margin: 15px auto 5px 15px;
}

.flashcard-card-front-count-div p {
  font-size: 16px;
  color: var(--color-text-primary);
  opacity: 60%;
  text-align: left;
  margin: 0px auto auto 0px;
}

.flashcard-card-front-question-div {
  width: 90%;
  height: auto;
  display: flex;
  flex-grow: 1;
  margin: 10px auto 10px auto;
}

.flashcard-card-front-question-div p {
  font-size: 16px;
  line-height: 1.2;
  color: var(--color-text-primary);
  opacity: 80%;
  margin: auto auto auto auto;
  text-align: center;
}

.flashcard-card-front-flip-div {
  width: 100%;
  height: auto;
  display: flex;
  margin: 15px auto 5px auto;
}

.flashcard-card-front-flip-div p {
  font-size: 14px;
  color: var(--color-text-primary);
  opacity: 30%;
  text-align: center;
  margin: auto auto auto auto;
  -webkit-transition: all .4s;
  -moz-transition: all .4s;
  -o-transition: all .4s;
  -ms-transition: all .4s;
  transition: all .4s;
}

.flashcard-card-front:hover .flashcard-card-front-flip-div p {
  opacity: 80%;
}

.flashcard-card-back {
  width: 100%;
  height: 100%;
  display: none;
  flex-direction: column;
  background-color: var(--color-accent-secondary);
  margin: 0px 0px auto auto;
}

.flashcard-card-back-show {
  display: flex;
}

.flashcard-card-back-answer-div {
  width: 90%;
  height: auto;
  display: flex;
  flex-grow: 1;
  margin: 10px auto 10px auto;
}

.flashcard-card-back-answer-div p {
  font-size: 15px;
  line-height: 1.2;
  color: var(--color-bg-primary);
  margin: auto auto auto auto;
  text-align: center;
  -moz-transform: rotateX(180deg);
  -webkit-transform: rotateX(180deg);
  -o-transform: rotateX(180deg);
  transform: rotateX(180deg);
}

.flashcard-finish-div {
  width: 80%;
  max-width: 450px;
  height: 275px;
  display: none;
  flex-direction: column;
  margin: auto;
  cursor: pointer;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -o-transition: all 1s;
  -ms-transition: all 1s;
  transition: all 1s;
}

.flashcard-finish-div-show {
  display: flex;
}

.flashcard-finish-text-div {
  width: auto;
  height: auto;
  display: flex;
  margin: auto auto auto auto;
}

.flashcard-finish-text-div h6 {
  font-size: 18px;
  color: var(--color-text-primary);
  opacity: 90%;
  text-align: center;
  margin: auto auto auto auto;
}

.flashcard-finish-btn-container {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  margin: auto auto auto auto;
  justify-content: space-around;
}

.flashcard-finish-btn {
  margin: 10px auto 10px auto;
}

@media screen and (min-width: 768px) {

  .flashcard-card-front-question-div p {
    font-size: 18px;
  }

  .flashcard-card-back-answer-div p {
    font-size: 18px;
    line-height: 1.4;
  }

  .flashcard-finish-btn-container {
    flex-direction: row;
  }

}

/* Statutory Charts Form */

.stat-chart-outer-container {
  width: 90%;
  max-width: 900px;
  height: auto;
  display: flex;
  flex-direction: column;
  margin: auto;
  overflow: visible;
}

.stat-chart-inner-container {
  width: 90%;
  max-width: 370px;
  height: 390px;
  max-height: 390px;
  display: flex;
  flex-direction: column;
  margin: auto;
  background-color: var(--color-bg-primary);
  box-shadow: 3px 10px 40px 0px rgba(0, 21, 77, .2);
}

.stat-chart-img-div {
  width: 64px;
  height: 64px;
  display: flex;
  margin: 20px auto auto auto;
}

.stat-chart-img-div img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  object-position: center;
  margin: 0px auto auto auto;
}

.stat-chart-form-heading-div {
  width: 100%;
  height: auto;
  display: flex;
  margin: 15px auto auto auto;
}

.stat-chart-form-heading-div p {
  font-size: 28px;
  color: var(--color-text-primary);
  margin: 0px auto auto auto;
  text-align: center;
}

.stat-chart-form-text-div {
  width: 90%;
  height: auto;
  display: flex;
  margin: 15px auto auto auto;
}

.stat-chart-form-text-div p {
  font-size: 16px;
  color: var(--color-text-primary);
  opacity: 60%;
  margin: 0px auto auto auto;
  text-align: center;
}

.stat-chart-form {
  width: 80%;
  height: auto;
  display: flex;
  flex-direction: column;
  margin: 0px auto 0px auto;
}

.stat-chart-form-row {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: row;
  margin: 0px auto 20px auto;
}

@media screen and (min-width: 768px) {

  .stat-chart-form-text-div p {
    font-size: 18px;
  }

}

/* Individual Charts*/

.stat-chart-dropdown-container {
  width: 90%;
  max-width: 900px;
  height: auto;
  display: flex;
  flex-shrink: 0;
  margin: 20px auto 0 auto;
}

.stat-chart-individual-form {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
}

.stat-table-container {
  width: 90%;
  height: auto;
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  margin: 30px auto 30px auto;
}

.stat-table-header {
  width: 100%;
  height: auto;
  display: flex;
  margin: 0px auto auto 0px;
  background-color: var(--color-accent-secondary);
}

.stat-table-header h1 {
  font-size: 20px;
  color: var(--color-bg-primary);
  text-align: left;
  margin: 10px 30px 10px 30px;
}

.stat-table-main {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  margin: 0px auto 30px auto;
}

.stat-table-main tr {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: row;
  border-left: 2px solid var(--color-panel);
  border-right: 2px solid var(--color-panel);
  border-bottom: 2px solid var(--color-panel);
  box-sizing: border-box;
}

.stat-table-row-title {
  width: 40%;
  height: auto;
  display: flex;
  margin: 0px auto auto 0px;
}

.stat-table-row-title h2 {
  font-size: 16px;
  color: var(--color-text-primary);
  opacity: 90%;
  text-align: left;
  margin: 10px 20px 10px 30px;
}

.stat-table-row-value {
  width: 60%;
  height: auto;
  display: flex;
  flex-direction: column;
  margin: 0px auto auto 0px;
}

.stat-table-row-value p {
  font-size: 16px;
  color: var(--color-text-primary);
  opacity: 90%;
  text-align: left;
  margin: 10px 20px 10px 20px;
}

.stat-chart-btn-row {
  width: auto;
  height: auto;
  display: flex;
  margin: 15px auto auto 0px;
}

@media screen and (min-width: 768px) {

  .stat-chart-dropdown-container {
    margin: 20px auto 0 auto;
  }

}

/* Study Module */

.module-container {
  width: 100%;
  max-width: 900px;
  height: auto;
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  margin: 0 auto;
  overflow: visible;
}

/*
 * Section review / exam modules render a single self-contained legacy
 * component (flashcards, exam) that should sit centered in the viewport,
 * unlike normal reading content which is pinned to the top.
 */
.module-container.module-container-centered {
  margin: auto;
}

.module-primary-header-div {
  width: 100%;
  height: auto;
  display: flex;
  flex-shrink: 0;
  background-color: var(--color-panel);
  margin: 40px auto 0px auto;
}

.module-primary-header-div h1 {
  width: 90%;
  font-size: 18px;
  color: var(--color-text-primary);
  font-weight: 500;
  line-height: 1.2;
  text-align: left;
  margin: 15px 30px 15px 30px;
}

.module-text-container {
  width: 90%;
  height: auto;
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  margin: 20px auto 20px auto;
}

.module-primary-text {
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-primary);
  opacity: 90%;
  text-align: left;
  margin: 7px auto 7px 0px;
}

.module-primary-text-link {
  color: var(--color-accent-primary);
  text-decoration: none;
  cursor: pointer;
  -webkit-transition: all .7s;
  -moz-transition: all .7s;
  -o-transition: all .7s;
  -ms-transition: all .7s;
  transition: all .7s;
}

.module-primary-text-link:hover {
  color: var(--color-accent-secondary);
  text-decoration: underline;
}

.internal-ref {
  color: var(--color-accent-primary);
  text-decoration: none;
  cursor: pointer;
  -webkit-transition: all .7s;
  -moz-transition: all .7s;
  -o-transition: all .7s;
  -ms-transition: all .7s;
  transition: all .7s;
}

.internal-ref:hover {
  color: var(--color-accent-secondary);
  text-decoration: none;
}

.module-text-container ul,
.module-text-container ol {
  width: 90%;
  height: auto;
  display: flex;
  flex-direction: column;
  margin: 10px auto 10px 0px;

}

.module-text-container ul li,
.module-text-container ol li {
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-primary);
  opacity: 90%;
  text-align: left;
  margin: 7px auto 7px 20px;
}

.module-text-container ul li p,
.module-text-container ol li p {
  margin: 0px auto 0px auto;
  padding-left: 20px;
}

.module-heading-1 {
  font-size: 18px;
  color: var(--color-text-primary);
  opacity: 100%;
  text-align: left;
  margin: 25px auto 12px 0px;
}

.module-heading-2 {
  font-size: 16px;
  color: var(--color-text-primary);
  opacity: 100%;
  text-align: left;
  margin: 25px auto 12px 30px;
  font-style: italic;
}

.module-img-div {
  width: 90%;
  height: auto;
  max-height: 400px;
  display: flex;
  margin: 40px auto 40px auto;
}

.module-img-div img {
  width: 90%;
  height: auto;
  max-height: 400px;
  object-fit: contain;
  object-position: center;
  margin: auto;
}

.module-button-container {
  width: 90%;
  height: auto;
  display: flex;
  flex-shrink: 0;
  flex-direction: row;
  margin: auto auto auto auto;
}

.module-button-previous-div {
  width: auto;
  height: auto;
  flex-grow: 1;
  display: flex;
  margin: 40px auto 60px 0px;
}

.module-button-next-div {
  width: auto;
  height: auto;
  display: flex;
  margin: 40px 0px 60px auto;
}

.module-table-container {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  border-radius: 5px;
  margin: 20px auto 30px auto;
  overflow-x: auto;
  overflow-y: hidden;
}

.module-table-header {
  width: 100%;
  height: auto;
  margin: auto;
  display: flex;
  flex-direction: column;
  background-color: var(--color-accent-primary);
  box-sizing: border-box;
}

.module-table-header h1 {
  font-size: 1.2rem;
  line-height: 1.2;
  color: var(--color-bg-primary);
  text-align: left;
  margin: 15px 30px 15px 30px;
}

.module-table {
  width: auto;
  max-width: 100%;
  height: auto;
  margin: auto auto auto auto;
  display: flex;
}

.module-table-overflow {
  width: 100%;
  overflow-x: scroll;
}

.module-table-header-row {
  height: auto;
  width: 100%;
  max-width: 100%;
  background-color: var(--color-panel);
  margin: auto 0px auto 0px;
}

.module-table-header-row th {
  width: auto;
  flex-grow: 1;
  margin: 0px auto 0px auto;
  border-left: 1px solid var(--color-bg-primary);
}

.module-table-header-row th h6,
.module-table-header-row th {
  font-size: 1.1em;
  color: var(--color-accent-primary);
  opacity: 100%;
  text-align: left;
  margin: 15px 7px 15px 7px;
}

.module-table-row {
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: auto 0px auto 0px;
}

.module-table-row td {
  width: auto;
  min-width: 100px;
  border: 2px solid var(--color-panel);
  margin: 0px 0px 0px 0px;
}

.module-table-row td p,
.module-table-row td {
  font-size: 1em;
  color: var(--color-text-primary);
  opacity: 90%;
  text-align: left;
  line-height: 1.4;
  margin: 7px 2px auto 7px;
  padding: 7px;
}

.module-table-row td ul,
.module-table-row td ol {
  width: auto;
  height: auto;
  margin: 7px auto auto 0px;
  list-style-position: outside;
  text-align: left;
}

.module-table-row td ul li,
.module-table-row td ol li {
  font-size: 1em;
  color: var(--color-text-primary);
  opacity: 90%;
  text-align: left;
  line-height: 1.2;
  margin: 0px 0px 7px 0px;
  position: relative;
  left: -15px;
}

@media screen and (min-width: 650px) {
  .module-table-container {
    width: 90%;
  }

  .module-table-header-row th h6,
  .module-table-header-row th {
    font-size: 16px;
  }

  .module-table-row td p,
  .module-table-row td {
    font-size: 14px;
    margin: 7px 2px auto 7px;
    padding: 0px;
  }

  .module-table-row td ul li,
  .module-table-row td ol li {
    font-size: 14px;
    margin: 0px 0px 7px 0px;
  }

}

.module-key-points-container {
  width: 100%;
  height: auto;
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  box-sizing: border-box;
}

.module-key-points-div {
  width: 90%;
  height: auto;
  display: flex;
  flex-direction: column;
  border-radius: 5px;
  margin: 10px auto 20px auto;
  box-sizing: border-box;
  overflow: hidden;
}

.module-key-points-header {
  width: 100%;
  height: auto;
  display: flex;
  background-color: var(--color-accent-secondary);
  box-sizing: border-box;
}

.module-key-points-header h6 {
  font-size: 18px;
  color: var(--color-bg-primary);
  text-align: left;
  margin: 15px 30px 15px 30px;
}

.module-key-points-body {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  border-radius: 5px;
  border-left: 2px solid var(--color-panel);
  border-right: 2px solid var(--color-panel);
  border-bottom: 2px solid var(--color-panel);
  box-sizing: border-box;
}

.module-key-points-body-text {
  width: auto;
  height: auto;
  display: flex;
  flex-direction: column;
  margin: 15px 15px 15px 15px;
}

.key-points-ul-1 {
  width: auto;
  height: auto;
  display: flex;
  flex-direction: column;
  list-style-type: disc;
  margin: auto auto auto 0px;
}

.key-points-ul-1 li {
  font-size: 16px;
  color: var(--color-text-primary);
  opacity: 90%;
  text-align: left;
  margin: 7px auto 7px 0px;
}

.key-points-ul-2 {
  width: auto;
  height: auto;
  display: flex;
  flex-direction: column;
  list-style-type: circle;
  margin: auto auto auto 20px;
}

.key-points-ul-2 li {
  font-size: 16px;
  color: var(--color-text-primary);
  opacity: 90%;
  text-align: left;
  margin: 7px auto 7px 0px;
}

.key-points-ul-3 {
  width: auto;
  height: auto;
  display: flex;
  flex-direction: column;
  list-style-type: disc;
  margin: auto auto auto 40px;
}

.key-points-ul-3 li {
  font-size: 16px;
  color: var(--color-text-primary);
  opacity: 90%;
  text-align: left;
  margin: 7px auto 7px 0px;
}

@media screen and (min-width: 768px) {

  .module-key-points-div {
    width: 100%;
  }

}

.module-sources-container {
  width: 100%;
  height: auto;
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  box-sizing: border-box;
}

.module-sources-div {
  width: 90%;
  height: auto;
  display: flex;
  flex-direction: column;
  border-radius: 5px;
  margin: 10px auto 20px auto;
  box-sizing: border-box;
  overflow: hidden;
}

.module-sources-header {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: row;
  background-color: var(--color-panel);
  box-sizing: border-box;
  cursor: pointer;
}

.module-sources-header-text {
  width: auto;
  height: auto;
  flex-grow: 1;
  display: flex;
  margin: auto auto auto 30px;
}

.module-sources-header-text h6 {
  font-size: 18px;
  color: var(--color-text-primary);
  text-align: left;
  margin: 15px auto 15px 0px;
}

.module-sources-header-expand {
  width: 30px;
  height: auto;
  display: flex;
  margin: auto 30px auto auto;
}

.module-sources-header-expand p {
  font-size: 30px;
  color: var(--color-text-primary);
  text-align: right;
  margin: auto 0px auto 0px;
}

.module-sources-body {
  width: 100%;
  height: auto;
  display: none;
  flex-direction: column;
  background-color: var(--color-panel);
  border-radius: 5px;
  border-left: 2px solid var(--color-panel);
  border-right: 2px solid var(--color-panel);
  border-bottom: 2px solid var(--color-panel);
  box-sizing: border-box;
}

.module-sources-text {
  width: 90%;
  height: auto;
  display: flex;
  flex-direction: column;
  margin: 15px auto 15px auto;
}

.module-sources-text p {
  font-size: 15px;
  color: var(--color-text-primary);
  opacity: 90%;
  font-weight: 300;
  text-align: left;
  margin: 7px auto 7px 0px;
  word-wrap: break-word;
}

.source-text-reference:hover,
.source-text-reference:focus-visible {
  cursor: pointer;
  text-decoration: underline;
}

@media screen and (min-width: 768px) {

  .module-sources-div {
    width: 100%;
  }

  .module-sources-text p {
    font-size: 15px;
  }

}

/* Citation superscript tooltips (v2 course player) */
sup .citation-link {
  display: inline;
  padding: 0 0.1em;
  margin: 0;
  border: none;
  background: none;
  font: inherit;
  font-size: 0.95em;
  font-weight: 600;
  line-height: 1;
  vertical-align: super;
  color: var(--color-link, #1a53d8);
  text-decoration: none;
  text-underline-offset: 2px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

sup .citation-link:hover,
sup .citation-link:focus-visible {
  color: var(--color-link-hover, #0f3d9e);
  outline: 2px solid var(--color-link, #1a53d8);
  outline-offset: 2px;
  text-decoration: underline;
}

.citation-tooltip {
  position: fixed;
  z-index: 10050;
  max-width: min(28rem, calc(100vw - 2rem));
  padding: 1rem 1.125rem;
  border-radius: 8px;
  background: var(--color-panel, #ffffff);
  border: 1px solid var(--color-border, #d1d9e6);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16);
  box-sizing: border-box;
  pointer-events: auto;
}

.citation-tooltip--visible {
  display: block;
}

.citation-tooltip[hidden] {
  display: none !important;
}

.citation-tooltip-text {
  margin: 0 0 0.625rem 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-text-primary, #3c4564);
  font-weight: 400;
  text-align: left;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.citation-tooltip-view-source {
  display: block;
  width: 100%;
  padding: 0.55rem 0.75rem;
  border: none;
  border-radius: 5px;
  background: var(--color-link, #1a53d8);
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
}

.citation-tooltip-view-source:hover,
.citation-tooltip-view-source:focus-visible {
  background: var(--color-link-hover, #0f3d9e);
  outline: none;
}

.citation-source-highlight {
  background-color: rgba(26, 83, 216, 0.12);
  border-radius: 3px;
  transition: background-color 0.3s ease;
}

.module-block-quote-container {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: row;
  margin: 10px auto 10px auto;
  background-color: var(--color-panel-muted);
}

.module-block-quote-img {
  width: 30px;
  height: 30px;
  display: flex;
  margin: 15px auto auto 25px;
}

.module-block-quote-img img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  object-position: center;
  margin: 0px auto auto 0px;
}

.module-block-quote-text-div {
  width: auto;
  height: auto;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  margin: 15px 15px 15px 25px;
}

.module-block-quote-text {
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-primary);
  opacity: 90%;
  text-align: left;
  margin: 0px auto 15px 0px;
}

/* Cheat Sheet */

.cheat-sheet-container {
  width: 90%;
  max-width: 900px;
  height: auto;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  overflow: visible;
}

.cheat-sheet-heading {
  width: 100%;
  height: auto;
  display: flex;
  flex-shrink: 0;
  margin: 60px auto 0px auto;
}

.cheat-sheet-heading h1 {
  font-size: 22px;
  color: var(--color-text-primary);
  opacity: 90%;
  margin: 0px auto auto 0px;
  text-align: left;
}

.cheat-sheet-subheading {
  width: 100%;
  height: auto;
  display: flex;
  flex-shrink: 0;
  margin: 10px auto 30px auto;
}

.cheat-sheet-subheading-text {
  width: auto;
  height: auto;
  flex-grow: 1;
  display: flex;
  margin: auto auto auto 0px;
}

.cheat-sheet-subheading-text p {
  font-size: 18px;
  color: var(--color-text-primary);
  opacity: 90%;
  text-align: left;
  margin: auto auto auto 0px;
}

.cheat-sheet-subheading-btn-div {
  width: 180px;
  height: auto;
  display: flex;
  margin: 0px 0px auto auto;
}

.cheat-sheet-expand-btn {
  margin: auto 0px auto auto;
}

.cheat-sheet-body-container {
  width: 100%;
  height: auto;
  display: flex;
  flex-shrink: 0;
  flex-grow: 1;
  flex-direction: column;
  margin: auto;
  padding-bottom: 60px;
}

.cheat-sheet-div {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  border-radius: 5px;
  margin: 10px auto 30px auto;
  box-sizing: border-box;
  overflow: hidden;
}

.cheat-sheet-div-header {
  width: auto;
  height: auto;
  display: flex;
  background-color: var(--color-accent-secondary);
  box-sizing: border-box;
  cursor: pointer;
}

.cheat-sheet-div-header-text {
  width: auto;
  height: auto;
  flex-grow: 1;
  display: flex;
  margin: 0px auto auto 0px;
}

.cheat-sheet-div-header-text h6 {
  font-size: 18px;
  color: var(--color-bg-primary);
  text-align: left;
  margin: 15px 30px 15px 30px;
}

.cheat-sheet-div-header-expand {
  width: 30px;
  height: auto;
  display: flex;
  margin: auto 20px auto auto;
}

.cheat-sheet-div-header-expand p {
  font-size: 30px;
  color: var(--color-bg-primary);
  text-align: right;
  margin: auto auto auto auto;
}

.cheat-sheet-div-body {
  width: 100%;
  height: auto;
  display: none;
  flex-direction: column;
  border-radius: 5px;
  border-left: 2px solid var(--color-panel);
  border-right: 2px solid var(--color-panel);
  border-bottom: 2px solid var(--color-panel);
  box-sizing: border-box;
}

.cheat-sheet-div-module-heading {
  width: auto;
  height: auto;
  display: flex;
  flex-direction: column;
  margin: 15px 15px 0px 15px;
  background-color: var(--color-panel);
}

.cheat-sheet-div-module-heading h6 {
  font-size: 18px;
  color: var(--color-text-primary);
  opacity: 90%;
  text-align: left;
  margin: 7px auto 7px 15px;
}

.cheat-sheet-div-body-text {
  width: auto;
  height: auto;
  display: flex;
  flex-direction: column;
  margin: 15px 15px 15px 15px;
}

@media screen and (min-width: 768px) {

  .cheat-sheet-container {
    width: 100%;
  }

}

/* Exam HQ */

.exam-hq-container {
  width: 90%;
  max-width: 900px;
  height: auto;
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  margin: 0 auto;
  overflow: visible;
}

.exam-hq-nav-btn-container {
  width: auto;
  height: auto;
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  margin: 60px auto 0px 0px;
}

.exam-hq-nav-btn {
  width: auto;
  height: 50px;
  display: flex;
  border-radius: 5px;
  -webkit-transition: all .7s;
  -moz-transition: all .7s;
  -o-transition: all .7s;
  -ms-transition: all .7s;
  transition: all .7s;
  margin: 0px auto auto 0px;
}

.exam-hq-nav-btn-text {
  font-size: 16px;
  text-align: center;
  margin: auto 10px auto 10px;
  -webkit-transition: all .7s;
  -moz-transition: all .7s;
  -o-transition: all .7s;
  -ms-transition: all .7s;
  transition: all .7s;
}

.exam-hq-nav-btn-unselected {
  background-color: var(--color-bg-primary);
  cursor: pointer;
  border: 2px solid var(--color-panel);
}

.exam-hq-nav-btn-text-unselected {
  color: var(--color-text-subtle);
}

.exam-hq-nav-btn-selected {
  background-color: var(--color-accent-secondary);
  border: 2px solid var(--color-accent-secondary);
}

.exam-hq-nav-btn-text-selected {
  color: var(--color-bg-primary);
}

.exam-hq-nav-btn-unselected:hover {
  border: 2px solid var(--color-accent-secondary);
}

.exam-hq-nav-btn-unselected:hover .exam-hq-nav-btn-text-unselected {
  color: var(--color-accent-secondary);
}

#create-practice-exam {
  margin: 30px auto auto 0px;
}

.exam-hq-inner-container {
  width: 100%;
  height: auto;
  display: none;
  flex-shrink: 0;
  flex-direction: column;
  margin: 0px auto auto auto;
  padding-bottom: 60px;
}

.exam-hq-inner-container-show {
  display: flex;
}

.exam-hq-heading-div {
  width: 100%;
  height: auto;
  display: flex;
  flex-shrink: 0;
  margin: 30px auto 0px 0px;
}

.exam-hq-heading-div h5 {
  font-size: 20px;
  color: var(--color-text-primary);
  opacity: 90%;
  text-align: left;
  margin: auto auto auto 0px;
}

.exam-hq-exam-data-container {
  width: 100%;
  height: auto;
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  margin: 20px auto 0px auto;
}

.exam-hq-exam-data-div {
  width: 100%;
  height: 100px;
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  background-color: var(--color-panel);
  border-radius: 5px;
  margin: 3px auto 3px auto;
  overflow: hidden;
}

.exam-hq-exam-data-row-1 {
  width: 100%;
  height: 50px;
  display: flex;
  flex-direction: row;
  flex-grow: 1;
}

.exam-hq-exam-data-row-2 {
  width: 100%;
  height: 50px;
  display: flex;
  flex-direction: row;
}

.exam-hq-exam-status-div {
  width: 40px;
  height: 100%;
  display: flex;
  margin: auto 0px auto 0px;
}

.exam-hq-exam-status-div img {
  height: 20px;
  width: 20px;
  object-fit: contain;
  object-position: center;
  margin: auto 0px auto 20px;
}

.exam-hq-exam-status-title {
  width: auto;
  min-width: 180px;
  height: 100%;
  display: flex;
  margin: 0px 0px auto 0px;
  flex-grow: 1;
}

.exam-hq-exam-status-title p {
  font-size: 16px;
  color: var(--color-text-primary);
  opacity: 90%;
  margin: auto auto auto 15px;
}

.exam-hq-exam-score {
  width: auto;
  height: 100%;
  display: flex;
  margin: 0px 0px auto 0px;
}

.exam-hq-exam-score p {
  font-size: 16px;
  color: var(--color-text-primary);
  opacity: 90%;
  margin: auto 15px auto 30px;
}

.exam-hq-date-completed {
  width: auto;
  height: 100%;
  flex-grow: 1;
  display: none;
  margin: auto auto auto auto;
}

.exam-hq-date-completed p {
  font-size: 16px;
  color: var(--color-text-primary);
  opacity: 90%;
  margin: auto auto auto auto;
  display: none;
}

.exam-hq-retake-container {
  width: 100%;
  height: 100%;
  display: flex;
  margin: 0px auto 0px 0px;
}

.exam-hq-retake-btn {
  width: 100%;
  height: 100%;
  display: flex;
  cursor: pointer;
  -webkit-transition: all .7s;
  -moz-transition: all .7s;
  -o-transition: all .7s;
  -ms-transition: all .7s;
  transition: all .7s;
}

.exam-hq-retake-btn img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  object-position: center;
  margin: auto auto auto auto;
}

.exam-hq-retake-btn:hover {
  background-color: var(--color-panel-muted);
}

.exam-hq-review-container {
  width: 100%;
  height: 100%;
  display: flex;
  margin: 0px auto 0px 0px;
}

.exam-hq-review-btn {
  width: 100%;
  height: 100%;
  display: flex;
  cursor: pointer;
  -webkit-transition: all .7s;
  -moz-transition: all .7s;
  -o-transition: all .7s;
  -ms-transition: all .7s;
  transition: all .7s;
}

.exam-hq-review-btn img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  object-position: center;
  margin: auto auto auto auto;
}

.exam-hq-review-btn:hover {
  background-color: var(--color-panel-muted);
}

.exam-hq-go-container {
  width: 100%;
  height: 100%;
  display: flex;
  margin: 0px auto 0px 0px;
}

.exam-hq-go-filler {
  width: 50%;
  height: 100%;
  display: none;
}

.exam-hq-go-btn {
  width: 100%;
  height: 100%;
  display: flex;
  background-color: var(--color-accent-secondary);
  cursor: pointer;
  -webkit-transition: all .7s;
  -moz-transition: all .7s;
  -o-transition: all .7s;
  -ms-transition: all .7s;
  transition: all .7s;
}

.exam-hq-go-btn-text {
  font-size: 16px;
  color: var(--color-bg-primary);
  text-align: center;
  margin: auto auto auto auto;
  -webkit-transition: all .7s;
  -moz-transition: all .7s;
  -o-transition: all .7s;
  -ms-transition: all .7s;
  transition: all .7s;
}

.exam-hq-go-btn:hover {
  background-color: var(--color-panel-muted);
}

.exam-hq-go-btn:hover .exam-hq-go-btn-text {
  color: var(--color-accent-secondary);
}

.exam-hq-exam-data-none {
  width: 100%;
  height: 100%;
  display: flex;
}

.exam-hq-exam-data-none p {
  font-size: 18px;
  color: var(--color-text-primary);
  opacity: 90%;
  margin: auto auto auto auto;
}

@media screen and (min-width: 500px) {

  .exam-hq-nav-btn-container {
    flex-direction: row;
  }

  .exam-hq-nav-btn {
    margin: 0px 0px auto 0px;
  }

  #create-practice-exam {
    margin: auto auto auto 30px;
  }

  .exam-hq-nav-btn-text {
    font-size: 18px;
    margin: auto 20px auto 20px;
  }

  .exam-hq-exam-data-div {
    height: 50px;
    flex-direction: row;
  }

  .exam-hq-exam-data-row-1 {
    width: auto;
  }

  .exam-hq-exam-data-row-2 {
    width: auto;
  }

  .exam-hq-exam-status-title {
    flex-grow: 0;
  }

  .exam-hq-date-completed {
    display: flex;
  }

  .exam-hq-retake-container {
    width: 60px;
  }

  .exam-hq-review-container {
    width: 60px;
  }

  .exam-hq-go-container {
    width: 120px;
  }

  .exam-hq-go-filler {
    display: flex;
  }

  .exam-hq-go-btn {
    width: 50%;
  }

}

@media screen and (min-width: 768px) {

  .exam-hq-nav-btn-container {
    margin: 100px auto 0px 0px;
  }

  .exam-hq-date-completed {
    margin: auto 15px auto 15px;
  }

  .exam-hq-date-completed p {
    display: flex;
  }

}

/* Exam HQ Create Practice Exam */


.exam-hq-primary-text {
  width: 100%;
  height: auto;
  display: flex;
  margin: 30px auto 0px auto;
}

.exam-hq-primary-text p {
  font-size: 18px;
  color: var(--color-text-primary);
  opacity: 90%;
}

.exam-hq-create-exam-container {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  margin: 7px auto 7px auto;
  background-color: var(--color-panel);
  border-radius: 5px;
}

.exam-hq-create-exam-container-header {
  width: auto;
  height: auto;
  display: flex;
  margin: 20px 20px 0px 20px;
}

.exam-hq-create-exam-container-header h5 {
  font-size: 18px;
  color: var(--color-text-primary);
  opacity: 90%;
  text-align: left;
  margin: 0px auto auto 0px;
}

.exam-hq-create-exam-parameter-container {
  width: auto;
  height: auto;
  display: flex;
  flex-direction: column;
  margin: 20px 20px 20px 20px;
  justify-content: space-between;
}

.exam-hq-create-exam-parameter-div {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
}

.exam-hq-create-exam-parameter-row {
  width: 100%;
  height: 40px;
  display: flex;
  flex-direction: row;
}

.exam-hq-create-exam-parameter-row-text {
  width: auto;
  height: auto;
  display: flex;
  flex-grow: 1;
  margin: 0px auto auto 0px;
}

.exam-hq-create-exam-parameter-row-text p {
  font-size: 18px;
  color: var(--color-text-primary);
  opacity: 90%;
  text-align: left;
  margin: 0px 0px auto 0px;
}

.exam-hq-create-exam-parameter-row-text img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  object-position: center;
  margin: auto auto auto 20px;
  cursor: pointer;
}

.exam-hq-create-exam-parameter-row-right {
  width: auto;
  height: auto;
  display: flex;
  margin: 0px 0px auto auto;
}

.exam-hq-create-exam-parameter-row-right p {
  font-size: 18px;
  color: var(--color-accent-secondary);
  text-align: right;
  margin: 0px 0px auto auto;
}

/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 26px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--color-text-subtle);
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked+.slider {
  background-color: var(--color-accent-secondary);
}

input:focus+.slider {
  box-shadow: 0 0 1px var(--color-accent-secondary);
}

input:checked+.slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 35px;
}

.slider.round:before {
  border-radius: 50%;
}

.slidecontainer {
  width: 100%;
  /* Width of the outside container */
}

/* The slider itself */
.sliding-scale {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 10px;
  border-radius: 5px;
  background: var(--color-border-muted);
  outline: none;
  opacity: 1;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.sliding-scale::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-accent-secondary);
  cursor: pointer;
}

.sliding-scale::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-accent-secondary);
  cursor: pointer;
}

.sliding-scale::-moz-range-track {
  background-color: var(--color-accent-secondary);
  height: 0px;
}

.sliding-scale::-moz-range-progress {
  background-color: var(--color-accent-secondary);
  height: 10px;
  border-radius: 5px;
}

.sliding-scale::-ms-fill-upper {
  background-color: var(--color-accent-secondary);
}

.sliding-scale::-ms-fill-lower {
  background-color: var(--color-accent-primary);
}

.exam-hq-create-exam-sections-form {
  width: auto;
  height: auto;
  display: flex;
  flex-direction: column;
  margin: 10px 20px 20px 20px;
}

.exam-hq-checkbox-row {
  width: auto;
  max-width: calc(100% - 40px);
  height: auto;
  min-height: 35px;
  display: flex;
  flex-direction: row;
  margin: 3px auto 3px 0px;
}

.exam-hq-checkbox-div {
  width: 20px;
  height: 20px;
  display: flex;
  margin: auto auto auto 0px;
}

.exam-hq-checkbox {
  width: 20px;
  height: 20px;
  margin: auto auto auto auto;
}

.exam-hq-checkbox-label-div {
  width: auto;
  height: auto;
  display: flex;
  flex-grow: 1;
  margin: auto 30px auto 20px;
}

.exam-hq-checkbox-label {
  font-size: 18px;
  color: var(--color-text-primary);
  opacity: 90%;
  margin: auto auto auto 0px;
}

.exam-hq-create-exam-msg {
  width: auto;
  height: auto;
  display: flex;
  margin: 15px auto auto 0px;
}

.exam-hq-create-exam-msg p {
  font-size: 18px;
  color: var(--color-accent-danger);
  text-align: left;
  margin: 0px auto auto 0px;
}

.exam-hq-create-exam-btn-container {
  width: auto;
  height: auto;
  display: flex;
  margin: 20px auto auto 0px;
}

@media screen and (min-width: 768px) {

  .exam-hq-create-exam-parameter-container {
    flex-direction: row;
  }

  .exam-hq-create-exam-parameter-div {
    width: 45%;
  }

}

/* Exam Questions */

.exam-questions-container {
  width: 90%;
  max-width: 900px;
  height: auto;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  overflow: visible;
}

.exam-questions-timer-container {
  width: 100%;
  height: auto;
  min-height: 30px;
  display: flex;
  flex-direction: row;
  margin: 40px auto 0px 0px;
}

.exam-questions-return-div {
  width: auto;
  height: auto;
  flex-grow: 1;
  display: flex;
  margin: auto auto auto 0px;
}

#overview-return {
  font-size: 18px;
  color: var(--color-text-primary);
  opacity: 50%;
  text-align: left;
  margin: 0px auto auto 0px;
  cursor: pointer;
  -webkit-transition: all .7s;
  -moz-transition: all .7s;
  -o-transition: all .7s;
  -ms-transition: all .7s;
  transition: all .7s;
}

#overview-return:hover {
  color: var(--color-accent-danger);
}

.exam-questions-timer-div {
  width: auto;
  height: auto;
  display: flex;
  flex-direction: row;
  margin: auto 0px auto auto;
}

.exam-questions-timer-div img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  object-position: center;
  margin: auto 10px auto auto;
}

.exam-questions-timer-div p {
  font-size: 18px;
  color: var(--color-text-primary);
  opacity: 90%;
  text-align: right;
  margin: auto 0px auto auto;
}

.exam-questions-heading-container {
  width: 100%;
  height: 50px;
  display: flex;
  flex-shrink: 0;
  flex-direction: row;
  background-color: var(--color-accent-secondary);
  border-radius: 5px;
  margin: 15px auto 7px auto;
}

.exam-questions-heading-left-div {
  width: 70px;
  height: 50px;
  display: flex;
  margin: 0px auto auto 20px;
}

.exam-questions-heading-left-div p {
  font-size: 14px;
  color: var(--color-bg-primary);
  text-align: left;
  margin: auto auto auto 0px;
}

.exam-questions-heading-title-div {
  width: auto;
  height: 50px;
  display: flex;
  flex-grow: 1;
  margin: auto auto auto auto;
}

.exam-questions-heading-title-div h6 {
  font-size: 16px;
  color: var(--color-bg-primary);
  text-align: center;
  margin: auto auto auto auto;
}

.exam-questions-heading-right-div {
  width: 70px;
  height: 50px;
  display: flex;
  margin: 0px 20px auto auto;
}

.exam-questions-heading-right-div:first-child {
  flex-shrink: 0;
}

.exam-questions-heading-right-div p {
  font-size: 18px;
  color: var(--color-bg-primary);
  text-align: right;
  margin: auto 0px auto auto;
}

.exam-questions-heading-section {
  font-size: 18px;
  color: var(--color-bg-primary);
  text-align: right;
  margin: auto 0px auto auto;
  display: none;
}

.exam-questions-heading-section-show {
  display: flex;
}

.exam-questions-flag-div {
  display: flex;
  margin: auto 0px auto auto;
  cursor: pointer;
}

.exam-questions-flag-div svg {
  width: 18px;
  height: 24px;
  margin: auto auto auto auto;
  -webkit-transition: all .4s;
  -moz-transition: all .4s;
  -o-transition: all .4s;
  -ms-transition: all .4s;
  transition: all .4s;
  position: relative;
  top: 0;
  left: 0;
}

.exam-questions-flag-div svg path {
  margin: auto auto auto auto;
  -webkit-transition: all .4s;
  -moz-transition: all .4s;
  -o-transition: all .4s;
  -ms-transition: all .4s;
  transition: all .4s;
}

@media (hover: hover) {

  .exam-questions-flag-div:hover svg path {
    fill: var(--color-accent-danger);
    color: var(--color-accent-danger);
  }

}

.exam-questions-flag-div-active svg path {
  fill: var(--color-accent-danger);
  color: var(--color-accent-danger);
}

.exam-questions-question-container {
  width: 100%;
  height: auto;
  display: none;
  flex-direction: column;
  margin: 7px auto 7px auto;
  flex-shrink: 0;
}

.exam-questions-question-container-show {
  display: flex;
}

.exam-questions-prompt-container {
  width: 100%;
  height: auto;
  display: flex;
  margin: auto auto auto auto;
}

.exam-questions-prompt-div {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  margin: 7px 0px 7px 0px;
}

.exam-questions-prompt-div p {
  height: auto;
  font-size: 18px;
  color: var(--color-text-primary);
  opacity: 90%;
  line-height: 1.4;
  margin: 7px auto 7px 0px;
  text-align: left;
}

.exam-questions-question-div {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  margin: 0px auto 0px 0px;
  border-radius: 5px;
  background-color: var(--color-panel);
  padding: 20px 0px 20px 0px;
}

.exam-questions-question-text-1 {
  height: auto;
  font-size: 18px;
  color: var(--color-text-primary);
  opacity: 90%;
  text-align: left;
  line-height: 1.4;
  margin: 7px 30px 7px 30px;
}

.exam-questions-question-text-2 {
  font-size: 18px;
  color: var(--color-text-primary);
  opacity: 90%;
  text-align: left;
  line-height: 1.4;
  margin: 7px 30px 7px 50px;
}

.exam-questions-question-text-correct {
  color: var(--color-accent-secondary);
  opacity: 100%;
}

.exam-questions-question-text-incorrect {
  color: var(--color-accent-danger);
  opacity: 100%;
}

.exam-questions-answers-form {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  margin: 0px auto 0px auto;
}

.exam-questions-answer-div {
  width: 100%;
  height: auto;
  min-height: 50px;
  display: flex;
  flex-direction: row;
  margin: 7px auto 7px auto;
  border: 2px solid var(--color-panel);
  box-sizing: border-box;
  border-radius: 5px;
  background-color: var(--color-bg-primary);
  cursor: pointer;
  -webkit-transition: all .7s;
  -moz-transition: all .7s;
  -o-transition: all .7s;
  -ms-transition: all .7s;
  transition: all .7s;
}

.exam-questions-answer-div:hover {
  border: 2px solid var(--color-accent-secondary);
}

.exam-questions-answer-div-selected {
  background-color: var(--color-panel);
}

.exam-questions-answer-inner-div {
  width: 100%;
  display: flex;
  margin: 7px 20px 7px 30px;
}

.exam-questions-answer-input-div {
  width: 35px;
  height: 15px;
  display: flex;
  margin: auto 0px auto 0px;
  cursor: inherit;
}

.exam-questions-answer-input {
  width: 15px;
  height: 15px;
  display: flex;
  margin: auto 20px auto 0px;
  cursor: inherit;
}

.exam-questions-answer-label {
  width: auto;
  flex-grow: 1;
  font-size: 18px;
  color: var(--color-text-primary);
  opacity: 90%;
  text-align: left;
  margin: auto auto auto 5px;
  cursor: inherit;
}

.exam-questions-explanation-container {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  margin: 0px auto 15px auto;
}

.exam-questions-explanation-answer {
  width: auto;
  height: auto;
  display: flex;
  text-align: left;
  margin: auto auto auto 30px;
}

.exam-questions-explanation-answer p {
  font-size: 18px;
  opacity: 90%;
  margin: 20px auto 20px 0px;
  text-align: left;
}

.exam-questions-explanation-answer-correct {
  color: var(--color-accent-secondary);
}

.exam-questions-explanation-answer-incorrect {
  color: var(--color-accent-danger);
}

.exam-questions-explanation-text {
  width: auto;
  height: auto;
  display: flex;
  text-align: left;
  margin: auto auto auto 30px;
}

.exam-questions-explanation-text p {
  font-size: 18px;
  color: var(--color-text-primary);
  opacity: 90%;
  line-height: 1.4;
  margin: 7px auto 7px 0px;
  text-align: left;
}

.exam-questions-explanation-source {
  width: auto;
  height: auto;
  display: flex;
  text-align: left;
  margin: auto auto auto 30px;
}

.exam-questions-explanation-source p {
  font-size: 16px;
  color: var(--color-text-primary);
  opacity: 90%;
  line-height: 1.2;
  margin: 7px auto 7px 0px;
  text-align: left;
}

.exam-questions-btn-container {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: row;
  margin: 20px auto 60px auto;
  flex-shrink: 0;
}

.exam-questions-previous-div {
  width: auto;
  height: auto;
  flex-grow: 1;
  display: flex;
  margin: 40px auto 60px 0px;
}

.exam-questions-next-div {
  width: auto;
  height: auto;
  display: flex;
  margin: 40px 0px 60px auto;
}

.exam-questions-button {
  display: none;
}

.exam-questions-button-show {
  display: flex;
}

@media screen and (min-width: 768px) {

  .exam-questions-heading-left-div p {
    font-size: 18px;
  }

  .exam-questions-heading-title-div h6 {
    font-size: 18px;
  }

}

/* Exam Overview */

.exam-overview-container {
  width: 90%;
  max-width: 900px;
  height: auto;
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  margin: 0 auto;
  overflow: visible;
}

.exam-overview-heading {
  width: 100%;
  height: auto;
  display: flex;
  margin: 60px auto 0px auto;
}

.exam-overview-heading h1 {
  font-size: 18px;
  color: var(--color-text-primary);
  opacity: 60%;
  margin: 0px auto auto 0px;
  text-align: left;
}

.exam-overview-text {
  width: 100%;
  height: auto;
  display: flex;
  flex-shrink: 0;
  margin: 40px auto 0px auto;
}

.exam-overview-text p {
  font-size: 18px;
  color: var(--color-text-primary);
  opacity: 90%;
  line-height: 1.4;
  text-align: left;
  margin: 0px auto auto 0px;
}

.exam-overview-submit-container {
  width: 100%;
  height: auto;
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  margin: 30px auto 0px 0px;
}

.exam-overview-submit-btn-div {
  width: auto;
  height: auto;
  display: flex;
  flex-shrink: 0;
  margin: 0px auto 0px 0px;
}

.exam-overview-summary-container {
  width: 100%;
  height: auto;
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  margin: 30px auto 0px auto;
}

.exam-overview-summary-section-container {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  background-color: var(--color-panel);
  margin: auto auto auto auto;
  border-radius: 5px 5px 0px 0px;
  padding-top: 20px;
  padding-bottom: 10px;
}

.exam-overview-summary-total-container {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  background-color: var(--color-panel);
  margin: 3px auto auto auto;
  border-radius: 0px 0px 5px 5px;
  padding-top: 10px;
  padding-bottom: 20px;
}

.exam-overview-summary-row {
  width: auto;
  height: auto;
  display: flex;
  flex-grow: 1;
  flex-direction: row;
  margin: 7px 30px 7px 30px;
}

.exam-overview-summary-title {
  width: auto;
  max-width: calc(100% - 150px);
  height: auto;
  display: flex;
  flex-grow: 1;
  margin: 0px auto auto 0px;
}

.exam-overview-summary-title h6 {
  font-size: 18px;
  color: var(--color-text-primary);
  opacity: 90%;
  font-weight: lighter;
  line-height: 1.2;
  text-align: left;
  margin: 0px auto auto 0px;
}

.exam-overview-summary-fraction-div {
  width: 75px;
  height: auto;
  display: flex;
  flex-direction: row;
  margin: 0px 0px auto auto;
}

.exam-overview-summary-fraction-div p {
  font-size: 18px;
  color: var(--color-text-primary);
  opacity: 90%;
  font-weight: 200;
  line-height: 1.2;
  text-align: center;
  margin: 0px auto auto auto;
}

.exam-overview-summary-percent-div {
  width: 75px;
  height: auto;
  display: flex;
  flex-direction: row;
  margin: 0px 0px auto auto;
}

.exam-overview-summary-percent-div p {
  font-size: 18px;
  color: var(--color-text-primary);
  opacity: 90%;
  font-weight: 200;
  line-height: 1.2;
  text-align: right;
  margin: 0px 0px auto auto;
}

.exam-overview-incorrect p {
  color: var(--color-accent-danger);
}

.exam-overview-questions-container {
  width: 100%;
  height: auto;
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  margin: 30px auto auto auto;
  padding-bottom: 60px;
}

.exam-overview-questions-heading-row {
  width: 100%;
  height: 50px;
  display: flex;
  flex-direction: row;
  background-color: var(--color-accent-primary);
  border-radius: 5px;
  margin: 3px auto 3px auto;
}

.exam-overview-questions-row {
  width: 100%;
  height: 50px;
  display: flex;
  flex-direction: row;
  background-color: var(--color-panel);
  border-radius: 5px;
  margin: 3px auto 3px auto;
  border: 1px solid var(--color-bg-primary);
  cursor: pointer;
  box-sizing: border-box;
  -webkit-transition: all .7s;
  -moz-transition: all .7s;
  -o-transition: all .7s;
  -ms-transition: all .7s;
  transition: all .7s;
}

.exam-overview-questions-row:hover {
  border: 1px solid var(--color-accent-secondary);
}

.exam-overview-questions-heading-row-num {
  width: 40px;
  height: 100%;
  display: flex;
  margin: 0px auto auto auto;
}

.exam-overview-questions-heading-row-num p {
  font-size: 16px;
  color: var(--color-bg-primary);
  font-weight: bold;
  margin: auto auto auto auto;
  text-align: center;
}

.exam-overview-questions-answer-container {
  width: auto;
  height: 100%;
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  margin: 0px auto auto auto;
}

.exam-overview-questions-heading-row-answer {
  width: 50%;
  height: 100%;
  display: flex;
  flex-grow: 1;
  margin: 0px auto auto auto;
}

.exam-overview-questions-heading-row-answer p {
  font-size: 16px;
  color: var(--color-bg-primary);
  font-weight: bold;
  margin: auto auto auto auto;
  text-align: center;
}

.exam-overview-questions-heading-row-correct {
  width: 50%;
  height: 100%;
  display: flex;
  flex-grow: 1;
  margin: 0px auto auto auto;
}

.exam-overview-questions-heading-row-correct p {
  font-size: 16px;
  color: var(--color-bg-primary);
  font-weight: bold;
  margin: auto auto auto auto;
  text-align: center;
}

.exam-overview-questions-heading-row-section {
  width: 80px;
  height: 100%;
  display: flex;
  margin: 0px 20px auto auto;
}

.exam-overview-questions-heading-row-section p {
  font-size: 16px;
  color: var(--color-bg-primary);
  font-weight: bold;
  margin: auto auto auto auto;
  text-align: right;
}

.exam-overview-questions-row-status {
  width: 20px;
  height: 100%;
  display: flex;
  margin: auto auto auto 20px;
}

.exam-overview-questions-row-status img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  object-position: center;
  margin: auto auto auto 0px;
}

.exam-overview-questions-row-num {
  width: 40px;
  height: 100%;
  display: flex;
  margin: 0px auto auto auto;
}

.exam-overview-questions-row-num p {
  font-size: 18px;
  color: var(--color-text-primary);
  opacity: 90%;
  margin: auto auto auto auto;
  text-align: center;
}

.exam-overview-questions-row-answer {
  width: 50%;
  height: 100%;
  display: flex;
  margin: 0px auto auto auto;
}

.exam-overview-questions-row-answer p {
  font-size: 18px;
  color: var(--color-text-primary);
  opacity: 90%;
  margin: auto auto auto auto;
  text-align: center;
}

.exam-overview-questions-row-correct {
  width: 50%;
  height: 100%;
  display: flex;
  margin: 0px auto auto auto;
}

.exam-overview-questions-row-correct p {
  font-size: 18px;
  color: var(--color-text-primary);
  opacity: 90%;
  margin: auto auto auto auto;
  text-align: center;
}

.exam-overview-questions-row-section {
  width: 80px;
  height: 100%;
  display: flex;
  margin: 0px 20px auto auto;
}

.exam-overview-questions-row-section p {
  font-size: 18px;
  color: var(--color-text-primary);
  opacity: 90%;
  margin: auto auto auto auto;
  text-align: right;
}

@media screen and (min-width: 768px) {

  .exam-overview-questions-heading-row-num p {
    font-size: 18px;
  }

  .exam-overview-questions-heading-row-answer p {
    font-size: 18px;
  }

  .exam-overview-questions-heading-row-correct p {
    font-size: 18px;
  }

  .exam-overview-questions-heading-row-section p {
    font-size: 18px;
  }

  .exam-overview-questions-heading-row-section {
    margin: 0px 30px auto auto;
  }

  .exam-overview-questions-row-status {
    margin: auto auto auto 30px;
  }

  .exam-overview-questions-row-section {
    margin: 0px 30px auto auto;
  }

}

/* Exam Review */

.exam-review-container {
  width: 90%;
  max-width: 900px;
  height: auto;
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  margin: 0 auto;
  overflow: visible;
}

.exam-review-heading {
  width: 100%;
  height: auto;
  display: flex;
  flex-shrink: 0;
  margin: 60px auto 0px auto;
}

.exam-review-heading h1 {
  font-size: 18px;
  color: var(--color-text-primary);
  opacity: 60%;
  margin: 0px auto auto 0px;
  text-align: left;
}

.exam-review-text {
  width: 100%;
  height: auto;
  display: flex;
  flex-shrink: 0;
  margin: 40px auto 0px auto;
}

.exam-review-text p {
  font-size: 18px;
  color: var(--color-text-primary);
  opacity: 90%;
  line-height: 1.4;
  text-align: left;
  margin: 0px auto auto 0px;
}

.exam-review-submit-container {
  width: 100%;
  height: auto;
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  margin: 30px auto 0px 0px;
}

.exam-review-submit-btn-div {
  width: auto;
  height: auto;
  display: flex;
  margin: auto auto auto 0px;
}

.exam-review-dropdown-div {
  width: auto;
  height: auto;
  flex-grow: 1;
  display: flex;
  margin: 30px auto 0px 0px;
}

.exam-review-dropdown-form {
  width: auto;
  height: auto;
  display: flex;
  margin: 0px auto auto 0px;
}

.exam-review-questions-container {
  width: 100%;
  height: auto;
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  margin: 50px auto auto auto;
  padding-bottom: 60px;
}

.exam-review-questions-heading-row {
  width: 100%;
  height: 50px;
  min-height: 50px;
  display: flex;
  flex-direction: row;
  background-color: var(--color-accent-secondary);
  border-radius: 5px;
  margin: 3px auto 3px auto;
}

.exam-review-questions-heading-num-div {
  width: 40px;
  height: 100%;
  display: flex;
  margin: 0px 0px auto 15px;
}

.exam-review-questions-heading-num-div p {
  font-size: 18px;
  color: var(--color-bg-primary);
  text-align: center;
  margin: auto auto auto auto;
}

.exam-review-questions-heading-answer-div {
  width: 100px;
  height: 100%;
  display: flex;
  margin: 0px 0px auto 0px;
}

.exam-review-questions-heading-answer-div p {
  font-size: 18px;
  color: var(--color-bg-primary);
  text-align: center;
  margin: auto auto auto auto;
}

.exam-review-questions-heading-status-div {
  width: 100px;
  height: 100%;
  display: flex;
  margin: 0px 0px auto 0px;
}

.exam-review-questions-heading-status-div p {
  font-size: 18px;
  color: var(--color-bg-primary);
  text-align: center;
  margin: auto auto auto auto;
}

.exam-review-questions-heading-flag-container {
  width: auto;
  height: 100%;
  flex-grow: 1;
  display: flex;
  margin: 0px 0px auto 0px;
}

.exam-review-questions-heading-flag-div {
  width: 50px;
  height: 100%;
  display: flex;
  margin: 0px 15px auto auto;
}

.exam-review-questions-heading-flag-div svg {
  margin: auto auto auto auto;
}

.exam-review-questions-heading-flag-div svg path {
  fill: var(--color-bg-primary);
  stroke: var(--color-bg-primary);
}

.exam-review-questions-row {
  width: 100%;
  height: auto;
  min-height: 50px;
  display: flex;
  flex-direction: row;
  background-color: var(--color-panel);
  border-radius: 5px;
  margin: 3px auto 3px auto;
  border: 1px solid var(--color-bg-primary);
  cursor: pointer;
  box-sizing: border-box;
  -webkit-transition: all .7s;
  -moz-transition: all .7s;
  -o-transition: all .7s;
  -ms-transition: all .7s;
  transition: all .7s;
}

.exam-review-questions-row:hover {
  border: 1px solid var(--color-accent-secondary);
}

.exam-review-questions-num-div {
  width: 40px;
  height: 50px;
  display: flex;
  margin: 0px 0px auto 15px;
}

.exam-review-questions-num-div p {
  height: auto;
  font-size: 18px;
  color: var(--color-text-primary);
  opacity: 90%;
  text-align: center;
  margin: auto auto auto auto;
}

.exam-review-questions-answer-div {
  width: 100px;
  height: 50px;
  display: flex;
  margin: 0px 0px auto 0px;
}

.exam-review-questions-answer-div p {
  font-size: 18px;
  color: var(--color-text-primary);
  opacity: 90%;
  text-align: center;
  margin: auto auto auto auto;
}

.exam-review-questions-status-div {
  width: 100px;
  height: 50px;
  display: flex;
  margin: 0px 0px auto 0px;
}

.exam-review-questions-status-div img {
  width: 25px;
  height: 25px;
  object-fit: contain;
  object-position: center;
  margin: auto auto auto auto;
}

.exam-review-questions-flag-container {
  width: auto;
  height: 50px;
  flex-grow: 1;
  display: flex;
  margin: 0px 0px auto 0px;
}

.exam-review-questions-flag-div {
  width: 50px;
  height: 100%;
  display: flex;
  margin: 0px 15px auto auto;
}

.exam-review-questions-flag-div img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  object-position: center;
  margin: auto auto auto auto;
}



@media screen and (min-width: 500px) {

  .exam-review-submit-container {
    flex-direction: row;
  }

  .exam-review-dropdown-div {
    margin: 0px 0px 0px auto;
  }

  .exam-review-dropdown-form {
    margin: 0px 0px auto auto;
  }

}

/* Digital Exercises */

.module-exercise-container {
  width: 100%;
  height: auto;
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  box-sizing: border-box;
}

.module-exercise-div {
  width: 90%;
  height: auto;
  display: flex;
  flex-direction: column;
  border-radius: 5px;
  margin: 10px auto 20px auto;
  box-sizing: border-box;
  overflow: hidden;
}

.module-exercise-header {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: row;
  background-color: var(--color-accent-primary);
  box-sizing: border-box;
  cursor: pointer;
}

.module-exercise-header-text {
  width: auto;
  height: auto;
  flex-grow: 1;
  display: flex;
  margin: auto 20px auto 30px;
}

.module-exercise-header-text h6 {
  font-size: 18px;
  color: var(--color-bg-primary);
  text-align: left;
  margin: 15px auto 15px 0px;
}

.module-exercise-body {
  width: 100%;
  height: auto;
  min-height: 100px;
  display: flex;
  flex-direction: column;
  background-color: var(--color-panel);
  border-radius: 5px;
  border-left: 2px solid var(--color-panel);
  border-right: 2px solid var(--color-panel);
  border-bottom: 2px solid var(--color-panel);
  box-sizing: border-box;
}

.module-exercise-btn-container {
  width: auto;
  height: auto;
  display: flex;
  margin: 0px auto 30px auto;
}

@media screen and (min-width: 768px) {

  .module-exercise-div {
    width: 100%;
  }

}

/* Exercise Type 1 - Multiple Choice */

.module-exercise-body-type-1 {
  width: 90%;
  height: auto;
  display: flex;
  flex-direction: column;
  margin: 30px auto 30px auto;
}

.module-exercise-body-container-1 {
  width: 100%;
  height: auto;
  display: none;
  flex-direction: column;
  margin: 0px auto 0px auto;
}

.module-exercise-body-container-1-show {
  display: flex;
}

.module-exercise-question-num {
  width: auto;
  height: auto;
  display: flex;
  margin: 0px auto auto 0px;
}

.module-exercise-question-num h6 {
  font-size: 18px;
  color: var(--color-text-primary);
  opacity: 90%;
  margin: 0px auto auto 0px;
  text-align: left;
}

.module-exercise-question-text {
  width: auto;
  height: auto;
  display: flex;
  margin: 30px auto auto 0px;
}

.module-exercise-question-text p {
  font-size: 18px;
  color: var(--color-text-primary);
  opacity: 90%;
  line-height: 1.4;
  margin: 0px auto auto 0px;
  text-align: left;
}

.module-exercise-answer-container {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  margin: 30px auto auto auto;
}

.module-exercise-answer-div {
  width: 165px;
  height: 150px;
  background-color: var(--color-bg-primary);
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-bg-primary);
  cursor: pointer;
  -webkit-transition: all .7s;
  -moz-transition: all .7s;
  -o-transition: all .7s;
  -ms-transition: all .7s;
  transition: all .7s;
  margin: 15px 10px 15px 10px;
}

.module-exercise-answer-div:hover,
.module-exercise-answer-div:focus {
  border: 1px solid var(--color-accent-secondary);
}

.module-exercise-answer-div-selected {
  background-color: var(--color-accent-secondary);
}

.module-exercise-answer-div-checkmark {
  width: 30px;
  height: 30px;
  position: relative;
  top: -15px;
  right: -150px;
  border-radius: 15px;
}

.module-exercise-answer-div-checkmark-img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  object-position: center;
  display: none;
  -webkit-transition: all .7s;
  -moz-transition: all .7s;
  -o-transition: all .7s;
  -ms-transition: all .7s;
  transition: all .7s;
}

.module-exercise-answer-div-checkmark-img-show {
  display: flex;
}

.module-exercise-answer-div-letter {
  width: 35px;
  height: 35px;
  display: flex;
  position: relative;
  top: -30px;
  margin: 10px auto 10px 10px;
  border-radius: 20px;
  background-color: var(--color-panel-muted);
}

.module-exercise-answer-div-letter p {
  font-size: 18px;
  color: var(--color-accent-primary);
  text-align: center;
  margin: auto auto auto;
}

.module-exercise-answer-div-text {
  width: auto;
  height: auto;
  display: flex;
  margin: 0px 15px auto 15px;
  position: relative;
  top: -30px;
}

.module-exercise-answer-div-text p {
  font-size: 16px;
  color: var(--color-text-primary);
  opacity: 90%;
  text-align: left;
  margin: 0px auto auto 0px;
  -webkit-transition: all .7s;
  -moz-transition: all .7s;
  -o-transition: all .7s;
  -ms-transition: all .7s;
  transition: all .7s;
}

.module-exercise-answer-div-text-selected p {
  color: var(--color-bg-primary);
  opacity: 100%;
}

.module-exercise-btn-1 {
  display: none;
}

.module-exercise-btn-1-show {
  display: flex;
}

/* Exercise Type 2 - Drafting */

.module-exercise-body-type-2 {
  width: 90%;
  height: auto;
  display: flex;
  flex-direction: column;
  margin: 20px auto 20px auto;
}

.module-exercise-directions {
  width: auto;
  height: auto;
  display: flex;
  margin: auto auto auto auto;
}

.module-exercise-directions p {
  font-size: 18px;
  color: var(--color-text-primary);
  opacity: 90%;
  text-align: center;
  margin: auto auto auto auto;
}

.module-exercise-body-container-2 {
  width: 100%;
  height: auto;
  display: none;
  flex-direction: column;
  margin: 0px auto 0px auto;
}

.module-exercise-body-container-2-show {
  display: flex;
}

.module-exercise-2-prompt {
  width: auto;
  height: auto;
  display: flex;
  margin: 20px auto 0px auto;
}

.module-exercise-2-prompt h6 {
  font-size: 18px;
  color: var(--color-accent-secondary);
  text-align: center;
  margin: auto auto auto auto;
}

.module-exercise-form-2 {
  width: 95%;
  height: auto;
  display: flex;
  margin: 20px auto 0px auto;
}

.module-exercise-form-2 textarea {
  width: 90%;
  height: auto;
  font-size: 16px;
  color: var(--color-text-primary);
  opacity: 90%;
  margin: auto auto auto auto;
  resize: none;
  border: 1px solid var(--color-text-disabled);
  padding: 5px;
}

.module-exercise-form-2 textarea::placeholder {
  color: var(--color-accent-secondary);
}

.module-exercise-answer-container-2 {
  width: 90%;
  height: auto;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  margin: 20px auto 0px auto;
}

.module-exercise-answer-container-2-p {
  font-size: 18px;
  color: var(--color-text-primary);
  text-align: center;
  margin: auto auto auto auto;
  opacity: 0;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -o-transition: all 1s;
  -ms-transition: all 1s;
  transition: all 1s;
}

.module-exercise-answer-container-2-h6 {
  font-size: 18px;
  color: var(--color-text-primary);
  text-align: center;
  margin: 20px auto auto auto;
  opacity: 0;
  -webkit-transition: all 2s;
  -moz-transition: all 2s;
  -o-transition: all 2s;
  -ms-transition: all 2s;
  transition: all 2s;
}

.module-exercise-btn-2 {
  display: none;
}

.module-exercise-btn-2-show {
  display: flex;
}

@media screen and (min-width: 768px) {

  .module-exercise-form-2 textarea {
    width: 70%;
  }

}

/* Exercise Type 3 - Selection */

.module-exercise-body-type-3 {
  width: 90%;
  height: auto;
  display: flex;
  flex-direction: column;
  margin: 20px auto 20px auto;
}

.module-exercise-body-container-3 {
  width: 100%;
  height: auto;
  display: none;
  flex-direction: column;
  margin: 0px auto 0px auto;
}

.module-exercise-body-container-3-show {
  display: flex;
}

.module-exercise-3-prompt {
  width: auto;
  height: auto;
  display: flex;
  margin: 20px auto 0px auto;
}

.module-exercise-3-prompt h6 {
  font-size: 18px;
  color: var(--color-accent-secondary);
  text-align: center;
  margin: auto auto auto auto;
}

.module-exercise-answer-container-3 {
  width: 90%;
  height: auto;
  display: flex;
  flex-direction: column;
  margin: 20px auto 20px auto;
}

.module-exercise-answer-div-3 {
  width: 100%;
  height: auto;
  min-height: 50px;
  display: flex;
  background-color: var(--color-bg-primary);
  margin: 20px auto 0px auto;
  border: 1px solid var(--color-bg-primary);
  border-radius: 5px;
  -webkit-transition: all .7s;
  -moz-transition: all .7s;
  -o-transition: all .7s;
  -ms-transition: all .7s;
  transition: all .7s;
  cursor: pointer;
}

.module-exercise-answer-div-3:hover {
  border: 1px solid var(--color-accent-secondary);
}

.module-exercise-answer-div-3-selected {
  background-color: var(--color-accent-secondary);
}

.module-exercise-3-img-div {
  width: 50px;
  height: 50px;
  display: flex;
  margin: 0px auto auto 0px;
}

.module-exercise-3-img {
  width: 30px;
  height: 30px;
  display: none;
  object-fit: contain;
  object-position: center;
  margin: auto auto auto auto;
}

.module-exercise-3-img-show {
  display: flex;
}

.module-exercise-answer-text-3 {
  width: auto;
  height: auto;
  display: flex;
  flex-grow: 1;
  margin: auto 5px auto 15px;
  -webkit-transition: all .7s;
  -moz-transition: all .7s;
  -o-transition: all .7s;
  -ms-transition: all .7s;
  transition: all .7s;
}

.module-exercise-answer-text-3 p {
  font-size: 18px;
  color: var(--color-text-primary);
  opacity: 90%;
  text-align: left;
  margin: 0px auto auto 0px;
  -webkit-transition: all .7s;
  -moz-transition: all .7s;
  -o-transition: all .7s;
  -ms-transition: all .7s;
  transition: all .7s;
}

.module-exercise-answer-text-3-selected p {
  color: var(--color-bg-primary);
  opacity: 100%;
}

.module-exercise-btn-3 {
  display: none;
}

.module-exercise-btn-3-show {
  display: flex;
}


/* Exercise Type 4 - Free Drafting */

.module-exercise-body-type-4 {
  width: 90%;
  height: auto;
  display: flex;
  flex-direction: column;
  margin: 20px auto 20px auto;
}

.module-exercise-form-4 {
  width: 95%;
  height: auto;
  display: flex;
  margin: 20px auto 0px auto;
}

.module-exercise-form-4 textarea {
  width: 90%;
  height: auto;
  font-size: 18px;
  color: var(--color-text-primary);
  opacity: 90%;
  margin: auto auto auto auto;
  resize: none;
  border: 1px solid var(--color-text-disabled);
  padding: 5px;
}

.module-exercise-form-4 textarea::placeholder {
  color: var(--color-accent-secondary);
}

.module-exercise-text-container-4 {
  width: 90%;
  height: auto;
  display: flex;
  flex-direction: column;
  margin: 20px auto 20px auto;
}

.module-exercise-text-container-4 p {
  font-size: 18px;
  color: var(--color-text-primary);
  text-align: center;
  margin: auto auto 15px auto;
  opacity: 0;
}

.module-exercise-text-ol-4 {
  width: auto;
  height: auto;
  display: flex;
  flex-direction: column;
  margin: auto auto auto auto;
}

.module-exercise-text-ol-4 li {
  font-size: 18px;
  color: var(--color-text-primary);
  text-align: center;
  margin: 7px auto 7px auto;
  opacity: 0;
  -webkit-transition: all .7s;
  -moz-transition: all .7s;
  -o-transition: all .7s;
  -ms-transition: all .7s;
  transition: all .7s;
}

.module-exercise-btn-4 {
  display: flex;
}

/* Button Links */

.module-button-link-container {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: row;
  margin: auto;
  flex-wrap: wrap;
}

.module-button-link {
  width: 200px;
  height: 70px;
  display: flex;
  margin: 10px auto 10px auto;
  border-radius: 15px;
  background-color: var(--color-panel);
  text-decoration: none;
  font-style: normal;
  border: 2px solid var(--color-accent-secondary);
  cursor: pointer;
}

.module-button-link-text {
  font-size: 20px;
  color: var(--color-text-primary);
  font-weight: 700;
  margin: auto;
  text-align: center;
  text-decoration: none;
  font-style: normal;
  -webkit-transition: all .7s;
  -moz-transition: all .7s;
  -o-transition: all .7s;
  -ms-transition: all .7s;
  transition: all .7s;
}

.module-button-link:hover .module-button-link-text {
  color: var(--color-accent-secondary);
}

/* Javascript Demo */

#javascript-demo-container {
  width: 200px;
  height: 200px;
  margin: 30px auto 30px auto;
  cursor: pointer;
}

#javascript-demo-div {
  width: 100px;
  height: 100px;
  border-radius: 10px;
  background-color: var(--color-accent-primary);
  display: flex;
  position: relative;
  left: 0;
  top: 0;
}

#javascript-demo-div p {
  color: var(--color-bg-primary);
  font-size: 16px;
  margin: auto;
  text-align: center;
}

/* Exam Timeout Modal */

.exam-timeout-modal-container {
  width: 100%;
  height: 100%;
  position: fixed;
  display: flex;
  top: 0;
  left: 0;
  background: rgba(255, 255, 255, 0.8);
  z-index: 3000;
  opacity: 0;
}

.exam-timeout-modal-div {
  width: 90%;
  max-width: 320px;
  height: 90%;
  max-height: 400px;
  display: flex;
  flex-direction: column;
  position: relative;
  bottom: -100%;
  margin: auto;
  background: var(--color-accent-primary);
  border-radius: 15px;
  box-shadow: 3px 10px 40px 0px rgba(0, 21, 77, .2);
}

.exam-timeout-modal-img-div {
  width: 100px;
  height: 100px;
  background-color: var(--color-bg-primary);
  border: 3px solid var(--color-accent-primary);
  border-radius: 750px;
  display: flex;
  margin: 0px auto 0px auto;
  position: relative;
  bottom: 50px;
}

.exam-timeout-modal-img-div img {
  width: 50px;
  height: 50px;
  object-fit: contain;
  object-position: center;
  margin: auto auto auto auto;
}

.exam-timeout-modal-heading {
  width: 90%;
  height: auto;
  display: flex;
  margin: 0px auto 0px auto;
}

.exam-timeout-modal-heading h6 {
  font-size: 20px;
  color: var(--color-bg-primary);
  text-align: center;
  margin: 0px auto auto auto;
}

.exam-timeout-modal-text {
  width: 90%;
  height: auto;
  display: flex;
  margin: 35px auto 0px auto;
}

.exam-timeout-modal-text p {
  font-size: 18px;
  color: var(--color-bg-primary);
  text-align: center;
  margin: 0px auto auto auto;
}

.exam-timeout-modal-text p a {
  font-size: 18px;
  color: var(--color-bg-primary);
  text-align: center;
  margin: 0px auto auto auto;
  text-decoration: none;
  -webkit-transition: all .7s;
  -moz-transition: all .7s;
  -o-transition: all .7s;
  -ms-transition: all .7s;
  transition: all .7s;
}

.exam-timeout-modal-text p a:hover {
  font-size: 18px;
  color: var(--color-accent-secondary);
}

.exam-timeout-modal-btn-div {
  width: 90%;
  height: auto;
  display: flex;
  margin: auto auto 20px auto;
}


.exam-timeout-modal-return-btn {
  width: 90%;
  height: auto;
  display: flex;
  margin: 0px auto 20px auto;
  cursor: pointer;
}

.exam-timeout-modal-return-btn p {
  font-size: 16px;
  color: var(--color-bg-primary);
  text-align: center;
  margin: auto auto auto auto;
  -webkit-transition: all .7s;
  -moz-transition: all .7s;
  -o-transition: all .7s;
  -ms-transition: all .7s;
  transition: all .7s;
}

.exam-timeout-modal-return-btn:hover p {
  color: var(--color-accent-danger);
}

/* Preview Modal */

.preview-modal-container {
  width: 100%;
  height: 100%;
  position: fixed;
  display: flex;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 12000;
  opacity: 0;
}

.preview-modal-div {
  width: 90%;
  max-width: 320px;
  height: 90%;
  max-height: 400px;
  display: flex;
  flex-direction: column;
  position: relative;
  bottom: -100%;
  margin: auto;
  background: var(--color-accent-primary);
  border-radius: 15px;
  box-shadow: 0 10px 50px 0px rgba(0, 0, 0, 0.4);
}

.preview-modal-img-div {
  width: 100px;
  height: 100px;
  background-color: var(--color-bg-primary);
  border: 3px solid var(--color-accent-primary);
  border-radius: 750px;
  display: flex;
  margin: 0px auto 0px auto;
  position: relative;
  bottom: 50px;
}

.preview-modal-img-div img {
  width: 50px;
  height: 50px;
  object-fit: contain;
  object-position: center;
  margin: auto auto auto auto;
}

.preview-modal-heading {
  width: 90%;
  height: auto;
  display: flex;
  margin: 0px auto 0px auto;
}

.preview-modal-heading h6 {
  font-size: 20px;
  color: var(--color-bg-primary);
  text-align: center;
  margin: 0px auto auto auto;
}

.preview-modal-text {
  width: 90%;
  height: auto;
  display: flex;
  margin: 35px auto 0px auto;
}

.preview-modal-text p {
  font-size: 18px;
  color: var(--color-bg-primary);
  text-align: center;
  margin: 0px auto auto auto;
}

.preview-modal-text p a {
  font-size: 18px;
  color: var(--color-bg-primary);
  text-align: center;
  margin: 0px auto auto auto;
  text-decoration: none;
  -webkit-transition: all .7s;
  -moz-transition: all .7s;
  -o-transition: all .7s;
  -ms-transition: all .7s;
  transition: all .7s;
}

.preview-modal-text p a:hover {
  font-size: 18px;
  color: var(--color-accent-secondary);
}

.preview-modal-btn-div {
  width: 90%;
  height: auto;
  display: flex;
  margin: auto auto 20px auto;
}


.preview-modal-return-btn {
  width: 90%;
  height: auto;
  display: flex;
  margin: 0px auto 20px auto;
  cursor: pointer;
}

.preview-modal-return-btn p {
  font-size: 16px;
  color: var(--color-bg-primary);
  text-align: center;
  margin: auto auto auto auto;
  -webkit-transition: all .7s;
  -moz-transition: all .7s;
  -o-transition: all .7s;
  -ms-transition: all .7s;
  transition: all .7s;
}

.preview-modal-return-btn:hover p {
  opacity: 0.7;
}

/* Preview modal mobile responsiveness */
@media screen and (max-width: 480px) {
  .preview-modal-div {
    width: 95%;
    max-height: 360px;
  }

  .preview-modal-img-div {
    width: 80px;
    height: 80px;
  }

  .preview-modal-img-div img {
    width: 50px;
    height: 50px;
  }

  .preview-modal-heading h6 {
    font-size: 20px;
  }

  .preview-modal-text p {
    font-size: 14px;
  }
}

/* Completion modal */

.completion-modal-container {
  width: 100%;
  height: 100%;
  position: fixed;
  display: flex;
  top: 0;
  left: 0;
  background: rgba(255, 255, 255, 0.8);
  z-index: 3000;
  opacity: 0;
}

.completion-modal-div {
  width: 90%;
  max-width: 320px;
  height: 90%;
  max-height: 400px;
  display: flex;
  flex-direction: column;
  position: relative;
  bottom: -100%;
  margin: auto;
  background: var(--color-accent-primary);
  border-radius: 15px;
  box-shadow: 3px 10px 40px 0px rgba(0, 21, 77, .2);
}

.completion-modal-img-div {
  width: 100px;
  height: 100px;
  background-color: var(--color-bg-primary);
  border: 3px solid var(--color-accent-primary);
  border-radius: 750px;
  display: flex;
  margin: 0px auto 0px auto;
  position: relative;
  bottom: 50px;
}

.completion-modal-img-div img {
  width: 50px;
  height: 50px;
  object-fit: contain;
  object-position: center;
  margin: auto auto auto auto;
}

.completion-modal-heading {
  width: 90%;
  height: auto;
  display: flex;
  margin: 0px auto 0px auto;
}

.completion-modal-heading h6 {
  font-size: 20px;
  color: var(--color-bg-primary);
  text-align: center;
  margin: 0px auto auto auto;
}

.completion-modal-text {
  width: 90%;
  height: auto;
  display: flex;
  margin: 35px auto 0px auto;
}

.completion-modal-text p {
  font-size: 18px;
  color: var(--color-bg-primary);
  text-align: center;
  margin: 0px auto auto auto;
}

.completion-modal-text p a:hover {
  font-size: 18px;
  color: var(--color-accent-secondary);
  width: 90%;
  height: auto;
  display: flex;
  margin: auto auto 20px auto;
}

.completion-modal-btn-div {
  margin: auto auto 20px auto;
}

/* Manage Groups */

.manage-groups-container {
  width: 100%;
  max-width: 900px;
  height: auto;
  min-height: 290px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 40px auto auto auto;
  overflow: visible;
}

.manage-groups-heading {
  width: 100%;
  height: auto;
  display: flex;
  margin: 60px auto 0px auto;
}

.manage-groups-heading h1 {
  font-size: 18px;
  color: var(--color-text-primary);
  opacity: 60%;
  margin: 0px auto auto 0px;
  text-align: left;
}

/* When creating a group */
.create-group-form {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
}

.create-group-input-row {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 0px auto 30px auto;
}

.create-group-btn-row {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: row;
  margin: 0px auto 30px 0px;
}

.create-group-btn-container {
  width: auto;
  height: auto;
  flex-grow: 1;
  display: block;
  margin: 0px auto auto 0px;
}

.create-account-learn-more-div {
  width: auto;
  height: auto;
  display: flex;
  margin: auto 0px auto auto;
}

.create-account-learn-more-link {
  height: auto;
  width: auto;
  font-size: 18px;
  color: var(--color-accent-primary);
  margin: auto auto auto auto;
  text-align: center;
  -webkit-transition: all .4s;
  -moz-transition: all .4s;
  -o-transition: all .4s;
  -ms-transition: all .4s;
  transition: all .4s;
  cursor: pointer;
  text-decoration: none;
}

.create-account-learn-more-link:hover {
  color: var(--color-accent-danger);
}

.create-group-note-div {
  width: 100%;
  height: 40px;
  margin: 50px auto auto auto;
  display: flex;
  border-top: 1px solid var(--color-text-disabled);
}

.create-group-note-p {
  font-size: 14px;
  margin: 20px auto auto 0px;
  text-align: left;
  color: var(--color-text-muted);
}

/* After Group is created*/

.manage-groups-name-div {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  margin: 0px auto 15px auto;
}

.manage-groups-name-div h5 {
  font-size: 32px;
  color: var(--color-accent-primary);
  opacity: 90%;
  margin: 15px auto 0px 0px;
  text-align: left;
}

.manage-groups-name-div h6 {
  font-size: 20px;
  color: var(--color-text-muted);
  margin: 10px auto 0px 0px;
  text-align: left;
}

.manage-groups-unassigned-courses-section,
.manage-groups-assigned-courses-section {
  width: 100%;
  height: auto;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  margin: 20px 0px 0px 0px;
  border-radius: 10px;
}

.manage-groups-unassigned-courses-heading-div,
.manage-groups-assigned-courses-heading-div {
  width: 100%;
  height: auto;
  display: flex;
  flex-shrink: 0;
  margin: 30px auto 0px 0px;
  border-bottom: 1px solid var(--color-text-disabled);
}

.manage-groups-unassigned-courses-heading-div h5,
.manage-groups-assigned-courses-heading-div h5 {
  font-size: 20px;
  color: var(--color-text-primary);
  opacity: 90%;
  text-align: left;
  margin: auto auto auto 0px;
}

.manage-groups-unassigned-courses-data-container,
.manage-groups-assigned-courses-data-container {
  width: 100%;
  height: auto;
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  margin: 20px auto 0px auto;
}

.manage-groups-unassigned-courses-none-div {
  width: auto;
  height: auto;
  display: flex;
  flex-direction: column;
  margin: 20px auto 20px auto;
}

.manage-groups-unassigned-courses-none-div img {
  width: auto;
  height: 200px;
  display: flex;
  margin: 20px auto 20px auto;
  object-fit: contain;
  object-position: center;
}

.manage-groups-unassigned-courses-none-text {
  height: auto;
  width: auto;
  display: flex;
}

.manage-groups-unassigned-courses-none-text p {
  font-size: 18px;
  margin: auto;
  text-align: center;
  line-height: 1.6;
  color: var(--color-text-primary);
  opacity: 90%;
}

.manage-groups-assigned-courses-data-div {
  width: 100%;
  height: 100px;
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  background-color: var(--color-panel);
  border-radius: 5px;
  margin: 3px auto 3px auto;
  overflow: hidden;
}

.manage-groups-assigned-courses-data-row-1 {
  width: 100%;
  height: 50px;
  display: flex;
  flex-direction: row;
  flex-grow: 1;
}

.manage-groups-assigned-courses-name-div {
  width: auto;
  min-width: 180px;
  height: 100%;
  display: flex;
  margin: 0px 0px auto 0px;
  flex-grow: 1;
}

.manage-groups-assigned-courses-name-div p {
  font-size: 16px;
  color: var(--color-text-primary);
  opacity: 90%;
  margin: auto auto auto 20px;
}

.manage-groups-assigned-courses-date-div {
  width: auto;
  height: 100%;
  flex-grow: 1;
  display: none;
  margin: auto auto auto auto;
}

.manage-groups-assigned-courses-date-div p {
  font-size: 16px;
  color: var(--color-text-primary);
  opacity: 90%;
  margin: auto auto auto auto;
  display: none;
}

.manage-groups-assigned-courses-data-row-2 {
  width: 100%;
  height: 50px;
  display: flex;
  flex-direction: row;
}

.manage-groups-assigned-accepted-div {
  width: 100%;
  height: 100%;
  display: flex;
  margin: 0px auto 0px 0px;
  background-color: var(--color-accent-secondary);
}

.manage-groups-assigned-accepted-div p {
  font-size: 16px;
  color: var(--color-bg-primary);
  text-align: center;
  margin: auto auto auto auto;
}


.manage-groups-assigned-revoke-div {
  width: 100%;
  height: 100%;
  display: flex;
  margin: 0px auto 0px 0px;
  background-color: var(--color-panel-muted);
  cursor: pointer;
  -webkit-transition: all .7s;
  -moz-transition: all .7s;
  -o-transition: all .7s;
  -ms-transition: all .7s;
  transition: all .7s;
}

.manage-groups-assigned-revoke-div:hover {
  background-color: var(--color-accent-danger);
}

.manage-groups-assigned-revoke-p {
  font-size: 16px;
  color: var(--color-accent-danger);
  text-align: center;
  margin: auto auto auto auto;
  -webkit-transition: all .7s;
  -moz-transition: all .7s;
  -o-transition: all .7s;
  -ms-transition: all .7s;
  transition: all .7s;
}

.manage-groups-assigned-revoke-div:hover .manage-groups-assigned-revoke-p {
  color: var(--color-bg-primary);
}

@media screen and (min-width: 500px) {

  .manage-groups-assigned-courses-data-div {
    height: 50px;
    flex-direction: row;
  }

  .manage-groups-assigned-courses-data-row-1 {
    width: auto;
  }

  .manage-groups-assigned-courses-date-div {
    display: flex;
  }

  .manage-groups-assigned-courses-data-row-2 {
    width: auto;
  }

  .manage-groups-assigned-accepted-div,
  .manage-groups-assigned-revoke-div {
    width: 120px;
  }

}

.purchase-group-courses-section {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  margin: 20px auto auto auto;
  background-color: var(--color-bg-elevated);
  border: 2px solid var(--color-bg-primary);
  -webkit-transition: all .7s;
  -moz-transition: all .7s;
  -o-transition: all .7s;
  -ms-transition: all .7s;
  transition: all .7s;
  border-radius: 3px;
}

.purchase-group-courses-section-active {
  border: 2px solid var(--color-accent-secondary);
}

.purchase-group-courses-div {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  margin: 4px auto 4px auto;
  cursor: pointer;
  -webkit-transition: all .4s;
  -moz-transition: all .4s;
  -o-transition: all .4s;
  -ms-transition: all .4s;
  transition: all .4s;
}

.purchase-group-courses-header {
  display: flex;
  flex-direction: row;
  margin: 20px 20px 20px 20px;
}

.purchase-group-courses-header-text {
  width: 200px;
  height: auto;
  display: flex;
  flex-grow: 1;
}

.purchase-group-courses-header-text p {
  font-size: 20px;
  font-weight: bold;
  color: var(--color-text-primary);
  margin: auto auto auto 20px;
  text-align: left;
}

.purchase-group-courses-header-symbol {
  width: 50px;
  height: auto;
  display: flex;
}

.purchase-group-courses-header-symbol-text {
  font-size: 26px;
  margin: 0px auto 0px auto;
  color: var(--color-text-primary);
  -webkit-transition: all .7s;
  -moz-transition: all .7s;
  -o-transition: all .7s;
  -ms-transition: all .7s;
  transition: all .7s;
}

.purchase-group-courses-body {
  display: none;
  flex-direction: column;
  padding: 0px 20px 0px 20px;
  width: auto;
  height: auto;
}

.purchase-group-courses-section:hover,
.purchase-group-courses-section:focus {
  border: 2px solid var(--color-accent-secondary);
}

.purchase-group-courses-section:hover .purchase-group-courses-header-symbol-text {
  color: var(--color-accent-secondary);
}

.purchase-group-courses-section:focus .purchase-group-courses-header-symbol-text {
  color: var(--color-accent-secondary);
}

.purchase-group-courses-body-div {
  width: auto;
  height: auto;
  display: flex;
  flex-direction: column;
  margin: 20px 20px 20px 20px;
  justify-content: space-between;
}

.purchase-group-courses-amount-div {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
}

.purchase-group-courses-amount-div-row {
  width: 100%;
  height: 40px;
  display: flex;
  flex-direction: row;
}

.purchase-group-courses-amount-div-row-text {
  width: auto;
  height: auto;
  display: flex;
  flex-grow: 1;
  margin: 0px auto auto 0px;
}

.purchase-group-courses-amount-div-row-text p {
  font-size: 18px;
  color: var(--color-text-primary);
  opacity: 90%;
  text-align: left;
  margin: 0px 0px auto 0px;
}

.purchase-group-courses-amount-div-row-text img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  object-position: center;
  margin: auto auto auto 20px;
  cursor: pointer;
}

.purchase-group-courses-amount-div-row-right {
  width: auto;
  height: auto;
  display: flex;
  margin: 0px 0px auto auto;
}

.purchase-group-courses-amount-div-row-right p {
  font-size: 18px;
  color: var(--color-text-primary);
  opacity: 90%;
  text-align: right;
  margin: 0px 0px auto auto;
}

/* The slider */
.purchse-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--color-text-subtle);
  -webkit-transition: .4s;
  transition: .4s;
}

.purchase-slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked+.purchase-slider {
  background-color: var(--color-accent-secondary);
}

input:focus+.purchase-slider {
  box-shadow: 0 0 1px var(--color-accent-secondary);
}

input:checked+.purchase-slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.purchase-slider.round {
  border-radius: 35px;
}

.purchase-slider.round:before {
  border-radius: 50%;
}

.purchase-slidecontainer {
  width: 100%;
  /* Width of the outside container */
}

/* The slider itself */
.purchase-sliding-scale {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 10px;
  border-radius: 5px;
  background: var(--color-border-muted);
  outline: none;
  opacity: 1;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.purchase-sliding-scale::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-accent-secondary);
  cursor: pointer;
}

.purchase-sliding-scale::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-accent-secondary);
  cursor: pointer;
}

.purchase-sliding-scale::-moz-range-track {
  background-color: var(--color-accent-secondary);
  height: 0px;
}

.purchase-sliding-scale::-moz-range-progress {
  background-color: var(--color-accent-secondary);
  height: 10px;
  border-radius: 5px;
}

.purchase-sliding-scale::-ms-fill-upper {
  background-color: var(--color-accent-secondary);
}

.purchase-sliding-scale::-ms-fill-lower {
  background-color: var(--color-accent-primary);
}

.purchase-group-courses-total-div {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
}

.purchase-group-courses-total-div-row {
  width: 100%;
  height: 20px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 0px auto 7px auto;
}

.purchase-group-courses-total {
  border-top: 1px solid var(--color-text-primary);
}

.purchase-group-courses-total-div-row-right {
  font-size: 18px;
  color: var(--color-text-primary);
  opacity: 90%;
  text-align: center;
  margin: 0px auto 0px 0px;
}

.purchase-group-courses-total-div-row-left {
  font-size: 18px;
  color: var(--color-text-primary);
  opacity: 90%;
  text-align: center;
  margin: 0px 0px 0px auto;
  font-variant-numeric: tabular-nums;
}

.purchase-group-courses-continue-btn-div {
  width: 100%;
  height: auto;
  display: flex;
  margin: 45px auto 15px auto;
}


@media screen and (min-width: 768px) {

  .purchase-group-courses-body-div {
    flex-direction: row;
  }

  .purchase-group-courses-amount-div,
  .purchase-group-courses-total-div {
    width: 45%;
  }

}

/* Assign section */
.assign-group-course-input-row {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 0px auto 30px auto;
}

.assign-group-course-add-row {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: row;
  margin: 0px auto 10px auto;
}

.assign-group-course-add-row-p {
  font-size: 18px;
  color: var(--color-text-primary);
  opacity: 90%;
  -webkit-transition: all .7s;
  -moz-transition: all .7s;
  -o-transition: all .7s;
  -ms-transition: all .7s;
  transition: all .7s;
  cursor: pointer;
}

.assign-group-course-add-row-p:hover {
  font-size: 18px;
  color: var(--color-accent-primary);
}

.assign-group-course-btn-row {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  margin: 0px auto 30px 0px;
}

.assign-group-course-btn-container {
  width: auto;
  height: auto;
  flex-grow: 1;
  display: block;
  margin: 0px auto auto 0px;
}

#assign-group-course-btn {
  cursor: default;
  margin: auto auto auto 10px;
}

.assign-group-select-full {
  width: 100%;
}

.assign-self-course-btn-container {
  width: auto;
  height: 40px;
  display: flex;
  flex-direction: row;
  margin: 20px auto auto 0px;
}

.assign-self-course-btn {
  width: auto;
  height: 100%;
  display: flex;
  flex-direction: row;
  cursor: pointer;
}

.assign-self-course-btn-img {
  width: 30px;
  height: 30px;
  border-radius: 15px;
  background-color: var(--color-accent-secondary);
  display: flex;
  margin: auto auto auto 10px;
  -webkit-transition: all .7s;
  -moz-transition: all .7s;
  -o-transition: all .7s;
  -ms-transition: all .7s;
  transition: all .7s;
}

.assign-self-course-btn-img p {
  height: auto;
  width: auto;
  font-size: 22px;
  color: var(--color-bg-primary);
  margin: auto;
  text-align: center;
}

.assign-self-course-text-div {
  width: auto;
  height: 40px;
  display: flex;
  margin: 0px 0px 0px 0px;
}

.assign-self-course-text {
  font-size: 18px;
  color: var(--color-text-primary);
  opacity: 90%;
  margin: auto 10px auto 10px;
  -webkit-transition: all .7s;
  -moz-transition: all .7s;
  -o-transition: all .7s;
  -ms-transition: all .7s;
  transition: all .7s;
}

.assign-self-course-btn:hover .assign-self-course-btn-img,
.assign-self-course-btn:focus .assign-self-course-btn-img {
  background-color: var(--color-accent-primary);
}

.assign-self-course-btn:hover .assign-self-course-text,
.assign-self-course-btn:focus .assign-self-course-text {
  color: var(--color-accent-primary);
}


@media screen and (min-width: 500px) {

  .assign-group-course-btn-row {
    flex-direction: row;
  }

  #assign-group-course-btn {
    margin: auto auto auto 0px;
  }

  .assign-self-course-btn-container {
    margin: 0px 0px auto auto;
  }

}

/* Revoke Assignment Modal and Self Assign Modal */

.revoke-assignment-modal-container,
.self-assign-modal-container {
  width: 100%;
  height: 100%;
  position: fixed;
  display: flex;
  top: 0;
  left: 0;
  background: rgba(255, 255, 255, 0.8);
  z-index: 3000;
  opacity: 0;
}

.revoke-assignment-modal-div,
.self-assign-modal-div {
  width: 90%;
  max-width: 320px;
  height: 90%;
  max-height: 400px;
  display: flex;
  flex-direction: column;
  position: relative;
  bottom: -100%;
  margin: auto;
  background: var(--color-accent-primary);
  border-radius: 15px;
  box-shadow: 3px 10px 40px 0px rgba(0, 21, 77, .2);
}

.revoke-assignment-modal-img-div,
.self-assign-modal-img-div {
  width: 100px;
  height: 100px;
  background-color: var(--color-bg-primary);
  border: 3px solid var(--color-accent-primary);
  border-radius: 750px;
  display: flex;
  margin: 0px auto 0px auto;
  position: relative;
  bottom: 50px;
}

.revoke-assignment-modal-img-div img,
.self-assign-modal-img-div img {
  width: 50px;
  height: 50px;
  object-fit: contain;
  object-position: center;
  margin: auto auto auto auto;
}

.revoke-assignment-modal-heading,
.self-assign-modal-heading {
  width: 90%;
  height: auto;
  display: flex;
  margin: 0px auto 0px auto;
}

.revoke-assignment-modal-heading h6,
.self-assign-modal-heading h6 {
  font-size: 20px;
  color: var(--color-bg-primary);
  text-align: center;
  margin: 0px auto auto auto;
}

.revoke-assignment-modal-text,
.self-assign-modal-text {
  width: 90%;
  height: auto;
  display: flex;
  margin: 35px auto 0px auto;
}

.revoke-assignment-modal-text p,
.self-assign-modal-text p {
  font-size: 16px;
  color: var(--color-bg-primary);
  text-align: center;
  margin: 0px auto auto auto;
}

.revoke-assignment-modal-text p a,
.self-assign-modal-text p a {
  font-size: 18px;
  color: var(--color-bg-primary);
  text-align: center;
  margin: 0px auto auto auto;
  text-decoration: none;
  -webkit-transition: all .7s;
  -moz-transition: all .7s;
  -o-transition: all .7s;
  -ms-transition: all .7s;
  transition: all .7s;
}

.revoke-assignment-modal-text p a:hover,
.self-assign-modal-text p a:hover {
  font-size: 18px;
  color: var(--color-accent-secondary);
}

.revoke-assignment-modal-btn-div,
.self-assign-modal-btn-div {
  width: 90%;
  height: auto;
  display: flex;
  margin: auto auto 20px auto;
}

.revoke-assignment-modal-return-btn,
.self-assign-modal-return-btn {
  width: 90%;
  height: auto;
  display: flex;
  margin: 0px auto 20px auto;
  cursor: pointer;
}

.revoke-assignment-modal-return-btn p,
.self-assign-modal-return-btn p {
  font-size: 16px;
  color: var(--color-bg-primary);
  text-align: center;
  margin: auto auto auto auto;
  -webkit-transition: all .7s;
  -moz-transition: all .7s;
  -o-transition: all .7s;
  -ms-transition: all .7s;
  transition: all .7s;
}

.revoke-assignment-modal-return-btn:hover p,
.self-assign-modal-return-btn:hover p {
  color: var(--color-accent-danger);
}

/* Module Audio */

#AudioNativeElevenLabsPlayer {
  position: sticky;
  background-color: var(--color-bg-primary);
  top: 0px;
  z-index: 10000;
}

.module-hide-audio-container {
  position: sticky;
  background-color: var(--color-bg-primary);
  top: 90px;
  z-index: 10000;
  width: 100%;
  height: 25px;
  margin: 0px auto 0px auto;
  display: flex;
}

.toggle-audio {
  width: auto;
  height: 15px;
  margin: 0px 40px 10px auto;
  display: flex;
  cursor: pointer;
}

.hide-audio-text {
  width: auto;
  height: 15px;
  font-size: 12px;
  margin: 0px auto 0px auto;
  color: var(--color-text-primary);
  -webkit-transition: all .7s;
  -moz-transition: all .7s;
  -o-transition: all .7s;
  -ms-transition: all .7s;
  transition: all .7s;
}

.toggle-audio:hover .hide-audio-text {
  color: var(--color-accent-primary)
}

/* NEW main dashboard*/

.main-dashboard-outer-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
  margin: auto
}

.main-dashboard-container {
  width: 100%;
  max-width: 1400px;
  height: auto;
  display: flex;
  flex-direction: column;
  margin: auto;
  flex-grow: 1;
}

.main-dashboard-heading-nav-container {
  width: 90%;
  height: auto;
  min-height: 50px;
  display: flex;
  flex-direction: row;
  margin: 10px auto auto auto;
  border-bottom: 1px solid var(--color-border-strong);
  overflow-y: hidden;
  overflow-x: scroll;
  scrollbar-width: auto;
}

@media screen and (min-width: 600px) {

  .main-dashboard-heading-nav-container {
    scrollbar-width: none;
  }

}

.main-dashboard-heading-nav-div {
  width: auto;
  height: 40px;
  display: flex;
  margin: 0px 0px 0px 30px;
  cursor: pointer;
  -webkit-transition: all .7s;
  -moz-transition: all .7s;
  -o-transition: all .7s;
  -ms-transition: all .7s;
  transition: all .7s;
}

.main-dashboard-heading-nav-div-selected {
  border-bottom: 1px solid var(--color-accent-primary);
}

.main-dashboard-heading-nav-p {
  width: auto;
  height: auto;
  font-size: 18px;
  color: var(--color-text-primary);
  opacity: 80%;
  -webkit-transition: all .7s;
  -moz-transition: all .7s;
  -o-transition: all .7s;
  -ms-transition: all .7s;
  transition: all .7s;
  white-space: nowrap;
}

.main-dashboard-heading-nav-p-selected {
  color: var(--color-accent-primary);
}

.main-dashboard-heading-nav-div:hover {
  border-bottom: 1px solid var(--color-accent-primary);
}

.main-dashboard-heading-nav-div:hover .main-dashboard-heading-nav-p {
  color: var(--color-accent-primary);
}

.main-dashboard-body-container {
  width: 90%;
  height: auto;
  min-height: 50px;
  display: flex;
  flex-direction: row;
  margin: 40px auto auto auto;
  flex-grow: 1;
}

.main-dashboard-body-inner-container {
  width: 100%;
  height: auto;
  display: none;
  flex-direction: row;
  margin: 0px auto auto auto;
  flex-wrap: wrap;
  flex-grow: 1;
}

.main-dashboard-body-inner-container-show {
  display: flex;
}

.main-dashboard-course-div {
  width: 260px;
  height: 280px;
  display: flex;
  flex-direction: column;
  margin: auto 0px 30px 30px;
  border-radius: 10px;
  border: 1px solid var(--color-border-strong);
  text-decoration: none;
}

.main-dashboard-course-div-purchased {
  cursor: pointer;
  -webkit-transition: all .7s;
  -moz-transition: all .7s;
  -o-transition: all .7s;
  -ms-transition: all .7s;
  transition: all .7s;
  text-decoration: none;
}

.main-dashboard-course-div-purchased:hover {
  border: 1px solid var(--color-accent-secondary);
}

.main-dashboard-course-img-div {
  width: 260px;
  height: 160px;
  display: flex;
  background-color: var(--color-bg-elevated);
  border-radius: 10px 10px 0px 0px;
}

.main-dashboard-course-img-div img {
  width: auto;
  height: 90%;
  object-fit: contain;
  object-position: center;
  margin: auto;
}

.main-dashboard-course-text-div {
  width: 100%;
  height: 60px;
  display: flex;
  margin: auto;
}

.main-dashboard-course-text-div p {
  width: auto;
  font-size: 16px;
  text-align: left;
  color: var(--color-text-primary);
  opacity: 80%;
  margin: auto 15px auto 15px;
  line-height: 1.4;
}

.main-dashboard-course-progress-div {
  width: 90%;
  height: 60px;
  margin: auto;
  display: flex;
  flex-direction: column;
}

.dashboard-home-course-progress-bar {
  width: 100%;
  height: 10px;
  display: flex;
  background-color: var(--color-panel);
  border-radius: 5px;
  overflow: hidden;
  margin: auto auto 5px auto;
}

.dashboard-home-course-progress {
  height: 100%;
  background-color: var(--color-accent-secondary);
}

.dashboard-home-course-progress-num {
  width: 100%;
  height: auto;
  display: flex;
  margin: 0px auto auto auto;
}

.dashboard-home-course-progress-num p {
  font-size: 16px;
  color: var(--color-text-primary);
  opacity: 60%;
  margin: 0px auto auto 0px;
  text-align: left;
}

.main-dashboard-course-btn-div {
  width: 90%;
  height: 60px;
  margin: auto;
  display: flex;
  flex-direction: column;
}

.main-dashboard-course-enroll-btn {
  width: 100%;
  min-width: 140px;
  height: 40px;
  border-radius: 20px;
  background-color: var(--color-accent-secondary);
  padding: 0px auto 0px auto;
  display: flex;
  border: 1px solid var(--color-bg-primary);
  text-decoration: none;
  -webkit-transition: all .4s;
  -moz-transition: all .4s;
  -o-transition: all .4s;
  -ms-transition: all .4s;
  transition: all .4s;
  cursor: pointer;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: auto;
}

.main-dashboard-course-enroll-btn-text {
  font-size: 18px;
  color: var(--color-text-primary-buttons);
  font-family: 'DM Sans', 'Arial', sans-serif;
  text-align: center;
  margin: auto;
  -webkit-transition: all .4s;
  -moz-transition: all .4s;
  -o-transition: all .4s;
  -ms-transition: all .4s;
  transition: all .4s;
}

.main-dashboard-course-enroll-btn:hover,
.main-dashboard-course-enroll-btn:focus {
  background-color: var(--color-bg-primary);
  border: 1px solid var(--color-accent-secondary);
}

.main-dashboard-course-enroll-btn:hover .main-dashboard-course-enroll-btn-text,
.main-dashboard-course-enroll-btn:focus .main-dashboard-course-enroll-btn-text {
  color: var(--color-accent-secondary);
}

/* New Dashboard - Downloads */

.main-dashboard-tools-package-div {
  width: 90%;
  max-width: 340px;
  height: 320px;
  border-radius: 5px;
  border: 1px solid var(--color-border-strong);
  display: flex;
  flex-direction: column;
  margin: 15px;
}

.main-dashboard-tools-package-heading-div {
  width: 100%;
  height: 50px;
  display: flex;
  flex-direction: column;
  margin: 0px auto 0px auto;
  border-radius: 5px 5px 0px 0px;
  background-color: var(--color-bg-elevated);
  border-bottom: 1px solid var(--color-border-strong);
}

.main-dashboard-tools-package-heading-div p {
  font-size: 14px;
  margin: auto auto auto 20px;
  text-align: left;
  letter-spacing: 2px;
  font-weight: bold;
}

.main-dashboard-tools-package-heading-text-green {
  color: var(--color-accent-secondary);
}

.main-dashboard-tools-package-heading-text-blue {
  color: var(--color-accent-primary);
}

.main-dashboard-tools-package-heading-text-orange {
  color: var(--color-accent-warm);
}

.main-dashboard-tools-package-heading-text-red {
  color: var(--color-accent-danger);
}

.main-dashboard-tools-package-text-div {
  width: 100%;
  height: auto;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  margin: 0px auto 0px auto;
}

.main-dashboard-tools-package-text-div h6 {
  width: calc(100% - 40px);
  height: auto;
  font-size: 24px;
  color: var(--color-text-primary);
  font-weight: bold;
  margin: 20px 20px 0px 20px;
}

.main-dashboard-tools-package-text-div p {
  width: calc(100% - 40px);
  height: auto;
  font-size: 16px;
  color: var(--color-text-primary);
  opacity: 80%;
  margin: 7px 20px auto 20px;
}

.main-dashboard-tools-package-bottom-div {
  width: 100%;
  height: 80px;
  display: flex;
  flex-direction: row;
  margin: 0px auto 0px auto;
}

.main-dashboard-tools-package-add-div {
  width: 90%;
  height: 100%;
  display: flex;
  margin: auto;
}

.main-dashboard-body {
  width: 100%;
  height: auto;
  flex-grow: 1;
  display: flex;
  margin: auto;
  flex-direction: column;
}

#manage-groups-body-container {
  width: 90%;
  max-width: 1100px;
  margin-bottom: 50px;
  overflow: visible;
}

/* V2 sidebar: module links use <a> instead of legacy <div> + AJAX */
.side-panel-course-inner-container[id$="-v2-side-panel"] a.toc-module {
  text-decoration: none;
  color: inherit;
}

/*
 * V2 sidebar layout.
 * Mobile: entire sidebar scrolls as one unit (parent handles scroll).
 * Desktop: progress + nav + TOC header stay fixed; only .side-panel-toc-scroll scrolls.
 */
.dashboard-side-panel .side-panel-course-container:has([id$="-v2-side-panel"]) {
  display: flex;
  flex-direction: column;
}

.side-panel-course-inner-container[id$="-v2-side-panel"] {
  display: flex;
  flex-direction: column;
}

.side-panel-course-inner-container[id$="-v2-side-panel"] .side-panel-course-progress-container {
  flex-shrink: 0;
}

.side-panel-course-inner-container[id$="-v2-side-panel"] .side-panel-toc-btn-container {
  flex-shrink: 0;
  z-index: 5;
  background-color: var(--color-panel);
}

@media screen and (min-width: 1100px) {
  .dashboard-side-panel .side-panel-course-container:has([id$="-v2-side-panel"]) {
    overflow-x: hidden;
    overflow-y: hidden;
    min-height: 0;
  }

  .side-panel-course-inner-container[id$="-v2-side-panel"] {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
  }

  .side-panel-course-inner-container[id$="-v2-side-panel"] .side-panel-toc-container {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    border-right: 2px solid var(--color-panel);
  }

  .side-panel-course-inner-container[id$="-v2-side-panel"] .side-panel-toc-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .side-panel-course-inner-container[id$="-v2-side-panel"] .side-panel-toc-scroll::-webkit-scrollbar {
    display: none;
  }
}

.side-panel-course-inner-container[id$="-v2-side-panel"] .toc-content-container {
  width: 100%;
  height: auto;
}

/* Module row alignment (anchors vs legacy divs) */
.side-panel-course-inner-container[id$="-v2-side-panel"] a.toc-module {
  box-sizing: border-box;
  align-items: center;
}

.side-panel-course-inner-container[id$="-v2-side-panel"] a.toc-module.toc-module-primary {
  width: 100%;
}

.side-panel-course-inner-container[id$="-v2-side-panel"] a.toc-module.toc-module-free-standing {
  width: auto;
  align-items: center;
}

.side-panel-course-inner-container[id$="-v2-side-panel"] .toc-module-free-standing-img-div {
  height: auto;
  align-self: center;
  flex-shrink: 0;
}

.side-panel-course-inner-container[id$="-v2-side-panel"] .toc-module-free-standing-img {
  align-items: center;
  justify-content: center;
}

.side-panel-course-inner-container[id$="-v2-side-panel"] .toc-module-free-standing-text,
.side-panel-course-inner-container[id$="-v2-side-panel"] .toc-module-primary-text {
  align-self: center;
  margin-top: 0;
  margin-bottom: 0;
}

.side-panel-course-inner-container[id$="-v2-side-panel"] .toc-module-complete-div {
  align-self: center;
  flex-shrink: 0;
  margin: 0 auto;
  height: 30px;
}

.side-panel-course-inner-container[id$="-v2-side-panel"] .toc-module-complete-div img {
  display: block;
}

/* Unit-level modules (knowledge review, etc.) after a section — legacy spacing */
.side-panel-course-inner-container[id$="-v2-side-panel"] .toc-unit-container-standalone {
  margin-top: 0;
}

/* In-section review modules (e.g. Section I.E. Review) — overlapping pages icon */
.side-panel-course-inner-container[id$="-v2-side-panel"] a.toc-module.toc-module-primary .toc-module-primary-img-div {
  align-self: center;
  flex-shrink: 0;
  height: auto;
}

.side-panel-course-inner-container[id$="-v2-side-panel"] a.toc-module.toc-module-primary .toc-module-primary-text {
  flex: 1 1 auto;
  min-width: 0;
}

/* Avoid expand animation flash before TOC init (full page load only) */
.side-panel-course-inner-container[id$="-v2-side-panel"].v2-toc-pending .toc-section-module-outer-container {
  display: none;
}

.side-panel-course-inner-container[id$="-v2-side-panel"].v2-toc-pending .toc-section-container.toc-section-expanded .toc-section-module-outer-container {
  display: flex;
}

.side-panel-course-inner-container[id$="-v2-side-panel"].v2-toc-pending .toc-module-subheading-container {
  display: none;
}

.side-panel-course-inner-container[id$="-v2-side-panel"].v2-toc-pending .toc-module-selected + .toc-module-subheading-container {
  display: flex;
}