/*
   Font Awesome S3 Bucket URLs
   Current version: 6.6.0
   If you are changing the location of these files,
   see the readme in this directory for more detail on manual steps to take when uploading new files.
 */
/* Style the vocab definitions generated by the Markdown Preprocessor */

span.vocab {
  text-decoration: underline;
}

/* Style the visual code blocks generated by Remark */
code.visual-block {
  border: none;
  box-shadow: inset -1px -1px 1px rgba(0, 0, 0, 0.5), inset 1px 1px 1px 0 rgba(255, 255, 255, 0.8);
  color: #000;
}

#ani-gif-preview-wrapper {
  vertical-align: top;
}

#ani-gif-preview {
  display: table-cell;
  background-size: 80px 60px;
  width: 80px;
  height: 60px;
  vertical-align: middle;
  text-align: center;
  border-radius: 12px;
}
#ani-gif-preview #play-button {
  clear: both;
  height: 40px;
  position: relative;
}

/* Place ani-gif next to text for column width 300px or wider. */
@media screen and (min-width: 1051px) {
  #prompt-table.with-ani-gif {
    margin-right: 80px;
    padding-right: 5px;
  }

  #ani-gif-preview-wrapper {
    position: absolute;
    right: 0;
    top: 0;
  }
}
@media screen {
  .print-only {
    height: 0;
    display: none;
  }
}
@media print {
  /* we have many components that we never want to include in a print view */
  #environment_tag,
.announcement-notification,
.extra-links,
.footer,
.header-wrapper,
.push {
    display: none;
  }

  /* I'm not 100% sure that this is necessary, but including
   * it for safety */
  @page {
    size: letter;
  }
  /* Our default website width of 970px is too wide to fit on a printed page;
   * shrink it a bit. */
  .container {
    /* width value comes from https://stackoverflow.com/a/11084797/1810460 */
    width: 670px !important;
  }

  .print-only {
    height: auto;
    visibility: visible;
  }

  /**
   * Bootstrap Fixes
   *
   * Bootstrap adds a BUNCH of print style which use !important styles
   * extensively. Unfortunately, that means we ourselves have to use !important
   * in order to make adjustments to them. Hacks beget hacks.
   *
   * If we could eventally get rid of Bootstrap - or at least get rid of its
   * print styles - we could remove these. Until then, we are forced to violate
   * CSS best practice by using !important.
   */
  /* Bootstrap adds the href of links to the print view by default; disable it
   * for lessons. */
  a[href]:after {
    content: none !important;
  }

  /* Bootstrap coerces the color of _everything_ to be black, but for the
   * progress bubble checkmarks this means we'd be drawing a black checkmark on
   * a black background. We attempt to scope this to just stacked checkmarks. */
  .fa-check.fa-stack-1x {
    color: white !important;
  }
}
@media print {
  /* we have components that we never want to include in a print view */
  .lesson-overview-header {
    display: none;
  }
}
.activity-section-text table thead th {
  border: 1px solid #949ca2;
}
.activity-section-text table tbody {
  /**
   * A pattern our curriculum authors often use is to include tables of
   * slides, where in each row there's a cell with a screenshot of the slide
   * and a cell with the description.
   *
   * Previously, they had been manually styling each screenshot with a
   * border. To replicate this functionality, we say that every image which
   * is an "only child" (ie, every image that's in a cell all by itself)
   * should have a border. If at some point in the future this ends up
   * styling images we _don't_ want to be styled, we could find a more
   * precise way to implement this.
   */
}
.activity-section-text table tbody img:only-child {
  border: 1px solid #000;
}
.activity-section-text table tbody td {
  padding: 10px;
  border: 1px solid #949ca2;
}
.activity-section-text .fa.fa-list-alt {
  color: #8c52ba;
}

.lessons-dropdown .Select-menu,
.lessons-dropdown .Select-menu-outer {
  z-index: 3000;
}

.modal .level-details a {
  font-family: var(--font-family-main);
  font-weight: var(--font-weight-regular);
  font-style: normal;
  color: #0596ce;
}
.modal .level-details a:hover {
  color: #0596ce;
  background: none;
}