/**
 * Wizard layout.
 */
.cws-wizard {
  font-size: 15px;
}

.cws-wizard .single-question {
  font-size: 13px;
}

.cws-wizard .wp-full-overlay {
  z-index: 1;
}

.cws-wizard .wp-full-overlay.expanded {
  margin-left: 40%;
}

.cws-wizard .wp-full-overlay-sidebar {
  min-width: 320px;
  max-width: 1200px;
  width: 40%;
  height: 100%;
}

#cws-preview iframe {
  width: 100%;
  height: 100%;
  position: absolute;
}

.cws-wizard .wp-full-overlay-sidebar .wp-full-overlay-sidebar-content {
  top: 0;
  position: relative;
  bottom: 0;
  height: 93%;
  height: calc( ~"100% - 48px"); /* LESS, there you go... */
  width: 100%;
  box-sizing: border-box;
}

.cws-wrap-screen {
  background: #f1f1f1;
  overflow: hidden;
}

.cws-wrap-screen h1 {
  padding-left: 12px;
  padding-right: 12px;
  padding-bottom: 10px;
}

#cws-wizard-screen, #cws-wizard-screen-transition {
  background: #fcfcfc;
  padding-left: 12px;
  padding-right: 12px;
  padding-bottom: 12px;
}

.cws-wrap-screen h2,
.cws-wrap-screen h3 {
  font-weight: 400;
}

.cws-wrap-screen h3 {
  border-top: 4px solid #ddd;
  padding-top: 1em;
}

.cws-wizard h2 + h3 {
  margin-top: 8px;
}

.cws-wrap-screen h2 {
  margin-top: 8px;
  margin-bottom: 8px;
}

.cws-wrap-screen .wrap {
  margin: 0;
}

/* Clear float after screen content */
#cws-wizard-screen:after {
  content: '';
  display: block;
  clear: both;
}




/**
 * Dashicons
 */
.cws-dashicon {
  width: auto;
  height: auto;
}

.cws-dashicon::before {

}

h1 .cws-dashicon::before {
  font-size: 1.4em;
}



/**
 * Hide WordPress admin menu, menu bar and footer.
 */
.course_page_course-wizard #adminmenumain,
.course_page_course-wizard #wpadminbar,
.course_page_course-wizard #wpfooter {
  display: none;
}

.course_page_course-wizard #wpcontent {
  margin-left: 0;
  margin-top: -32px;
}

/**
 * Hide admin update notices.
 */
.cws-wizard .wrap > .updated {
  display: none;
}


/**
 * Close wizard button.
 */
.cws-wrap-screen .cws-button .dashicons {
  line-height: 28px;
}

.cws-wrap-screen .cws-button {
  padding-left: 6px !important;
  padding-right: 6px !important;
}


/**
 * Forms
 */
.cws-wizard .form-field input[type="text"],
.cws-wizard .form-field textarea {
  width: 100%;
}

.cws-editor-wrapper,
.cws-editor-hidden {
  display: none;
  margin-bottom: 1em;
}

/* Fix editor iframe content height */
#cws-editor-id_ifr {
  min-height: 300px;
}


/**
 * Order links
 */
.cws-order-remove-link .dashicons::before {
  color: red;
}

.cws-order-link,
.cws-order-remove-link {
  float: right;
  margin-right: 10px !important;
}

.cws-wrap-screen .cws-order-items-link {
  margin-right: 0 !important;
  padding-left: 2px !important;
  padding-right: 12px !important;
}

/**
 * Back button + Order items button
 */
.cws-order-items-link,
.cws-back-button,
.cws-close-button {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

.cws-order-items-link:hover,
.cws-back-button:hover,
.cws-close-button:hover {
  color: #008EC2 !important;
}

.cws-back-button .dashicons,
.cws-order-items-link .dashicons,
.cws-close-button .dashicons {
  font-size: 24px;
}

.cws-back-button .dashicons {
  line-height: 34px !important;
}

.cws-next-button {
  float: right;
}


/**
 * Order item
 */
.cws-order-item {
  line-height: 200%;
  padding: 8px !important;
  padding-right: 0 !important;
}

.cws-order-item span {
  /* width: 80%; */
  width: calc( ~"100% - 126px" ); /* LESS, there you go... */
  display: inline-block;
  font-size: 16px;
  font-weight: normal;
}

.cws-order-item span .cws-dashicon {
  line-height: 30px;
  margin-right: 6px;
}


/**
 * Question order
 */
.sortable-question-list {
  border: 1px solid #e5e5e5;
  -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.04);
  box-shadow: 0 1px 1px rgba(0,0,0,.04);
}
.sortable-question-list .question {
  cursor: move;
  background: #FFF;
  margin: 0;
  padding: 10px;
  font-weight: bold;
}
.sortable-question-list .question span:before {
  font-family: dashicons;
  content: "\f333";
  font-size: 170%;
  vertical-align: bottom;
  margin-right: 10px;
  color: #BDBDBD;
}
.sortable-question-list .question.ui-sortable-helper {
  zoom: 1;
  filter: alpha(opacity=70);
  opacity: 0.7;
}
.sortable-question-list .question.ui-sortable-helper span:before {
  color: #444;
}
.sortable-question-list .question.alternate {
  background: #F9F9F9;
}
.sortable-question-list .ui-sortable-placeholder {
  background: #EBEBEB !important;
  border: 1px dashed #DDDDDD;
  visibility: visible !important;
  margin: 3px;
}


/**
 * Transition
 */
.cws-is-transition #cws-wizard-screen,
.cws-is-transition #cws-wizard-screen-transition {
  transition: left 0.25s linear;
}

#cws-wizard-screen-transition {
  left: -100%;
  display: none;
}

/*#cws-wizard-screen {
  left: 0;
  top: calc( ~"-100% + 24px"); /* LESS, there you go... */
/*}*/

.cws-before-transition #cws-wizard-screen-transition {
  left: 0;
  display: block;
}

.cws-before-transition #cws-wizard-screen {
  left: 100%;
  top: calc( ~"-100% + 48px"); /* LESS, there you go... */
}

.cws-before-transition.back #cws-wizard-screen {
  left: -100%;
}

.cws-is-transition #cws-wizard-screen-transition {
  left: -100%;
}

.cws-is-transition.back #cws-wizard-screen-transition {
  left: 100%;
}

.cws-is-transition #cws-wizard-screen,
.cws-is-transition.back #cws-wizard-screen {
  left: 0;
}



/**
 * Fix WordPress editor AJAX.
 * Sumbit button after hidden WordPress editor.
 */
.cws-wizard-screen-content {
  position: relative;
  margin-bottom: 4em;
}

.cws-form #cws-editor ~ .cws-button {
  position: absolute;
  bottom: -42px;
  right: 0;
}


/**
 * Preview button
 */
.cws-preview-button {
  display: none !important;
  float: right;
  margin-left: 1em;
  border-left: 0;
}

.cws-preview-button.show {
  z-index: 150;
  position: relative;

}

.cws-preview-button.show .dashicons::before {
  content: "\f530";
}

/**
 * Responsive
 */
.cws-wizard select {
  max-width: 100%;
}

.cws-wizard h2 {
  line-height: 1.7em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cws-wizard h2 .cws-dashicon {
  line-height: 1.7em;
}

.cws-wizard h3 .cws-dashicon,
.cws-wizard h3 {
 line-height: 1.4em;
}

.cws-wizard h3 .cws-back-button {
 line-height: 1.4em !important;
}

.cws-wizard h3 .cws-back-button,
.cws-wizard h2 .cws-back-button {
 padding-top: 0 !important;
}

.cws-wizard h3 > .cws-dashicon,
.cws-wizard h2 > .cws-dashicon {
  padding: 0 6px;
}

.cws-wizard h3 > .cws-dashicon::before,
.cws-wizard h2 > .cws-dashicon::before {
  font-size: 22px;
}

/* Display handle icon before module and other items in the sortable list */
.cws-wizard .sortable-module-list .cws-order-item span::before {
  font-family: dashicons;
  content: "\f333";
  font-size: 170%;
  vertical-align: bottom;
  margin-right: 10px;
  color: #BDBDBD;
}

.cws-wizard .sortable-module-list .cws-order-item {
  cursor: move;
  margin: 0;
  font-weight: bold;
}


@media (max-width: 1590px) {
  .cws-wizard .wp-full-overlay.expanded {
    margin-left: 50%;
  }

  .cws-wizard .wp-full-overlay-sidebar {
    width: 50%;
  }
}

@media (max-width: 1200px) {
  /* Wizard + Preview stacked & 100% width */
  /* @todo Fix, not working on iPhone: use a button to switch to Preview in full screen! */
  .cws-wizard .wp-full-overlay {
    overflow: auto;
  }

  .cws-wizard .wp-full-overlay.expanded {
    margin-left: 0;
  }

  .cws-wizard .wp-full-overlay-sidebar {
    width: 100%;
    position: relative;
    z-index: auto;
  }

  #cws-preview.wp-full-overlay-main {
    height: 100%;
    z-index: -100;
  }
  #cws-preview.wp-full-overlay-main.show {
    z-index: 100;
  }

  /**
   * Preview button
   */
  .cws-wrap-screen h1 {
    padding-right: 0;
  }
  .cws-preview-button {
    display: block !important;
  }
  /* End Wizard + Preview stacked & 100% width */
}


@media (max-width: 782px) {
  /* WordPress admin responsive: bigger buttons */
  .cws-wrap-screen .cws-button .dashicons {
    line-height: 1;
  }
}