styles.css

#page-admin-setting-formatsettingvisualsections button.imagethumb {
  min-width: 2.5em;
  min-height: 2.5em;
  -webkit-background-size: cover;
          background-size: cover; }
  #page-admin-setting-formatsettingvisualsections button.imagethumb i {
    opacity: 0.25; }

#page-admin-setting-formatsettingvisualsections .subsectiontypes button {
  pointer-events: none;
  opacity: 0.5; }

#page-admin-setting-formatsettingvisualsections .subsectiontypes.jsloaded button {
  pointer-events: all;
  opacity: 1; }

@-webkit-keyframes circleajax {
  0% {
    border-top-color: #646464;
    border-right-color: rgba(50, 50, 50, 0.25);
    border-bottom-color: rgba(50, 50, 50, 0.25);
    border-left-color: rgba(50, 50, 50, 0.25); }
  25% {
    border-top-color: rgba(50, 50, 50, 0.25);
    border-right-color: #646464;
    border-bottom-color: rgba(50, 50, 50, 0.25);
    border-left-color: rgba(50, 50, 50, 0.25); }
  50% {
    border-top-color: rgba(50, 50, 50, 0.25);
    border-right-color: rgba(50, 50, 50, 0.25);
    border-bottom-color: #646464;
    border-left-color: rgba(50, 50, 50, 0.25); }
  75% {
    border-top-color: rgba(50, 50, 50, 0.25);
    border-right-color: rgba(50, 50, 50, 0.25);
    border-bottom-color: rgba(50, 50, 50, 0.25);
    border-left-color: #646464; }
  100% {
    border-top-color: #646464;
    border-right-color: rgba(50, 50, 50, 0.25);
    border-bottom-color: rgba(50, 50, 50, 0.25);
    border-left-color: rgba(50, 50, 50, 0.25); } }

@keyframes circleajax {
  0% {
    border-top-color: #646464;
    border-right-color: rgba(50, 50, 50, 0.25);
    border-bottom-color: rgba(50, 50, 50, 0.25);
    border-left-color: rgba(50, 50, 50, 0.25); }
  25% {
    border-top-color: rgba(50, 50, 50, 0.25);
    border-right-color: #646464;
    border-bottom-color: rgba(50, 50, 50, 0.25);
    border-left-color: rgba(50, 50, 50, 0.25); }
  50% {
    border-top-color: rgba(50, 50, 50, 0.25);
    border-right-color: rgba(50, 50, 50, 0.25);
    border-bottom-color: #646464;
    border-left-color: rgba(50, 50, 50, 0.25); }
  75% {
    border-top-color: rgba(50, 50, 50, 0.25);
    border-right-color: rgba(50, 50, 50, 0.25);
    border-bottom-color: rgba(50, 50, 50, 0.25);
    border-left-color: #646464; }
  100% {
    border-top-color: #646464;
    border-right-color: rgba(50, 50, 50, 0.25);
    border-bottom-color: rgba(50, 50, 50, 0.25);
    border-left-color: rgba(50, 50, 50, 0.25); } }

@-webkit-keyframes circleajaxwhite {
  0% {
    border-top-color: white;
    border-right-color: rgba(250, 250, 250, 0.5);
    border-bottom-color: rgba(250, 250, 250, 0.5);
    border-left-color: rgba(250, 250, 250, 0.5); }
  25% {
    border-top-color: rgba(250, 250, 250, 0.5);
    border-right-color: white;
    border-bottom-color: rgba(250, 250, 250, 0.5);
    border-left-color: rgba(250, 250, 250, 0.5); }
  50% {
    border-top-color: rgba(250, 250, 250, 0.5);
    border-right-color: rgba(250, 250, 250, 0.5);
    border-bottom-color: white;
    border-left-color: rgba(250, 250, 250, 0.5); }
  75% {
    border-top-color: rgba(250, 250, 250, 0.5);
    border-right-color: rgba(250, 250, 250, 0.5);
    border-bottom-color: rgba(250, 250, 250, 0.5);
    border-left-color: white; }
  100% {
    border-top-color: white;
    border-right-color: rgba(250, 250, 250, 0.5);
    border-bottom-color: rgba(250, 250, 250, 0.5);
    border-left-color: rgba(250, 250, 250, 0.5); } }

@keyframes circleajaxwhite {
  0% {
    border-top-color: white;
    border-right-color: rgba(250, 250, 250, 0.5);
    border-bottom-color: rgba(250, 250, 250, 0.5);
    border-left-color: rgba(250, 250, 250, 0.5); }
  25% {
    border-top-color: rgba(250, 250, 250, 0.5);
    border-right-color: white;
    border-bottom-color: rgba(250, 250, 250, 0.5);
    border-left-color: rgba(250, 250, 250, 0.5); }
  50% {
    border-top-color: rgba(250, 250, 250, 0.5);
    border-right-color: rgba(250, 250, 250, 0.5);
    border-bottom-color: white;
    border-left-color: rgba(250, 250, 250, 0.5); }
  75% {
    border-top-color: rgba(250, 250, 250, 0.5);
    border-right-color: rgba(250, 250, 250, 0.5);
    border-bottom-color: rgba(250, 250, 250, 0.5);
    border-left-color: white; }
  100% {
    border-top-color: white;
    border-right-color: rgba(250, 250, 250, 0.5);
    border-bottom-color: rgba(250, 250, 250, 0.5);
    border-left-color: rgba(250, 250, 250, 0.5); } }

body.format-visualsections #section-carousel .carousel-control-prev, body.format-visualsections #section-carousel .carousel-control-next {
  width: 12.5%; }
  body.format-visualsections #section-carousel .carousel-control-prev img, body.format-visualsections #section-carousel .carousel-control-next img {
    width: 2em;
    height: 2em; }

body.format-visualsections #section-carousel .carousel-indicators.carousel-indicators-relative {
  position: relative;
  margin-top: 2em; }
  body.format-visualsections #section-carousel .carousel-indicators.carousel-indicators-relative li {
    width: 1em;
    height: 1em;
    text-indent: 0;
    background-color: none; }
    body.format-visualsections #section-carousel .carousel-indicators.carousel-indicators-relative li:not(.active) > img:last-of-type {
      display: none; }
    body.format-visualsections #section-carousel .carousel-indicators.carousel-indicators-relative li.active > img:first-of-type {
      display: none; }

body.format-visualsections #section-carousel .carousel-inner {
  padding-left: 15%;
  padding-right: 15%;
  opacity: 1;
  -webkit-transition: all 0.5s ease;
          transition: all 0.5s ease; }

body.format-visualsections #section-carousel .carousel-spinner {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  text-align: center;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center !important;
  -webkit-align-items: center !important;
      -ms-flex-align: center !important;
          align-items: center !important;
  -webkit-box-pack: center !important;
  -webkit-justify-content: center !important;
      -ms-flex-pack: center !important;
          justify-content: center !important;
  -webkit-transition: all 0.5s ease;
          transition: all 0.5s ease;
  opacity: 0; }
  body.format-visualsections #section-carousel .carousel-spinner:after {
    content: '';
    display: inline-block;
    position: relative;
    width: 200px;
    height: 200px;
    min-width: 200px;
    min-height: 200px;
    max-width: 200px;
    max-height: 200px;
    top: 0;
    left: 0;
    border: solid;
    border-width: 20px;
    border-radius: 50%;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    border-top-color: #323232;
    border-right-color: rgba(50, 50, 50, 0.25);
    border-bottom-color: rgba(50, 50, 50, 0.25);
    border-left-color: rgba(50, 50, 50, 0.25);
    -webkit-animation-name: circleajax;
            animation-name: circleajax;
    -webkit-animation-duration: 2s;
            animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
    margin: 0 auto 0 auto; }

body.format-visualsections #section-carousel:not(.carousel-ready) .carousel-inner {
  opacity: 0; }

body.format-visualsections #section-carousel:not(.carousel-ready) .carousel-spinner {
  opacity: 1;
  z-index: 2; }

body.format-visualsections #section-carousel .sectiontitle .badge {
  border-radius: 100%;
  width: 2em;
  height: 2em;
  line-height: 1.5em; }

body.format-visualsections #section-carousel .sectiontitle .badge-primary {
  background-color: #ff0000; }

body.format-visualsections #section-carousel .section-circle {
  width: 30%;
  min-width: 150px;
  display: inline-block;
  position: relative;
  padding: 1%; }
  body.format-visualsections #section-carousel .section-circle.locked i.fa-lock {
    position: absolute;
    top: 0.5em;
    right: 0.5em;
    font-size: 2em;
    color: #cccccc; }

body.format-visualsections #section-carousel .carousel-topics {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center; }

body.format-visualsections #section-carousel .circle-link {
  width: 10%;
  max-width: 2rem;
  height: 30px;
  position: absolute;
  top: 50%;
  right: -5%; }

body.format-visualsections #section-carousel .circle-link-unlocked {
  border-bottom: 2px dashed #ff0000; }

body.format-visualsections #section-carousel .circle-link-locked {
  border-bottom: 2px dashed #aaaaaa; }

body.format-visualsections #section-carousel svg.svg-circle {
  stroke: #eee; }
  body.format-visualsections #section-carousel svg.svg-circle .subsection-progress {
    stroke: #ff0000; }
  body.format-visualsections #section-carousel svg.svg-circle rect {
    stroke: none; }

body.format-visualsections #section-carousel .overlay-nav-trigger {
  border-radius: 50%;
  height: 3rem;
  width: 3rem;
  min-height: 3rem;
  max-height: 3rem;
  padding: 0;
  position: absolute;
  right: -20px;
  top: -20px;
  z-index: 999999; }

@media only screen and (max-width: 768px) {
  body.format-visualsections #section-carousel h3.sectiontitle {
    font-size: 0.8rem;
    min-height: 1em; }
  body.format-visualsections #section-carousel .carousel-topics {
    display: block; }
  body.format-visualsections #section-carousel .section-circle {
    width: 100%;
    display: block; }
  body.format-visualsections #section-carousel .circle-link {
    position: absolute;
    top: inherit;
    bottom: -5%;
    right: -webkit-calc(50% - 30px);
    right: calc(50% - 30px);
    -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
            transform: rotate(90deg); } }

body.format-visualsections.editing div.subsection .alert {
  width: -webkit-calc(100% - 90px);
  width: calc(100% - 90px); }

body.format-visualsections#page-course-editsection #fitem_id_parentid, body.format-visualsections#page-course-editsection #fitem_id_typecode, body.format-visualsections#page-course-editsection #fitem_id_size {
  display: none; }

body.format-visualsections:not(.editing) .subsection li.section > div.content h3.sectionname {
  display: none; }

body.format-visualsections .course-content ul.visualsections {
  margin: 0;
  list-style: none; }

body.format-visualsections .course-content > ul.visualsections > li.section > .content {
  margin: 0 40px; }

body.format-visualsections .course-content > ul.visualsections > li.section > .left, body.format-visualsections .course-content > ul.visualsections > li.section .right {
  width: 40px;
  padding: 0 6px; }

body.format-visualsections .course-content ul.visualsections li.section .left {
  padding-top: 22px;
  text-align: right; }

body.format-visualsections .jsenabled .course-content ul.visualsections li.section .left,
body.format-visualsections .jsenabled .course-content ul.visualsections li.section .right {
  width: auto; }

body.format-visualsections .course-content ul.visualsections li.section .left .section-handle img.icon {
  padding: 0;
  vertical-align: baseline; }

body.format-visualsections .course-content ul.visualsections li.section .section_action_menu .textmenu,
body.format-visualsections .course-content ul.visualsections li.section .section_action_menu .menu-action-text {
  white-space: nowrap; }

body.format-visualsections ul.visualsections > li.section {
  display: none; }
  body.format-visualsections ul.visualsections > li.section.active {
    display: block; }

body.format-visualsections ul.visualsections.capcourseupdate li.section {
  display: block; }

body.format-visualsections .subsection-icon {
  max-width: 3em;
  height: auto;
  margin-right: 1em; }

body.format-visualsections img.icon.size-icon {
  font-size: 1em;
  width: 2em;
  height: 2em;
  margin-left: 2em; }

body.format-visualsections li.section {
  margin-bottom: 2em; }

body.format-visualsections h3.sectiontitle {
  font-size: 1rem;
  min-height: 4em; }

body.format-visualsections .subsectiontyperow {
  margin-bottom: 0.25em;
  list-style: none; }

body.format-visualsections .subsectiontypes ul {
  padding-left: 0; }

body.format-visualsections .subsection.yui3-dd-drop-active-invalid .section.collapse {
  display: block; }

body.format-visualsections .card.subsection {
  border: none;
  border-bottom: 5px solid #000000; }
  body.format-visualsections .card.subsection .card-header {
    background-color: #ffffff;
    border-bottom: none;
    width: 100%;
    text-align: left; }
  body.format-visualsections .card.subsection .subsection-heading .btn-link, body.format-visualsections .card.subsection .subsection-heading .btn-link:hover {
    text-decoration: none; }
  body.format-visualsections .card.subsection span.inplaceeditable[data-itemtype="sectionname"] {
    display: none; }
  body.format-visualsections .card.subsection .subsection-title {
    color: #000000;
    font-size: 32px; }
  body.format-visualsections .card.subsection h2.subsection-heading > button {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row; }
    body.format-visualsections .card.subsection h2.subsection-heading > button .toggleicon {
      margin-left: auto;
      width: 16px;
      display: block;
      -webkit-transform: rotate(180deg);
          -ms-transform: rotate(180deg);
              transform: rotate(180deg); }
    body.format-visualsections .card.subsection h2.subsection-heading > button.collapsed .toggleicon {
      -webkit-transform: rotate(0deg);
          -ms-transform: rotate(0deg);
              transform: rotate(0deg); }

body.format-visualsections ul li.section:last-of-type .subsection:last-of-type .move-down {
  display: none; }

body.format-visualsections ul li.section:nth-of-type(2) .subsection:first-of-type .move-up {
  display: none; }

body.format-visualsections .subsection .section .card-body > ul {
  list-style: none; }

body.format-visualsections #format-footer {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 40px; }

body.format-visualsections.editing #format-footer {
  display: none; }