<commit_before>/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the top of the
 * compiled file, but it's generally better to create a new file per style scope.
 *
 *= require jquery.ui.all
 *= require jquery.qtip.min
 *= require video-js
 *= require_self
 *= require_directory .
 */

$baseFontFamily: 'Gotham A', 'Gotham B', sans-serif;
$headingsFontWeight: 400;
$btnPrimaryBackground: orange;
$btnPrimaryBackgroundHighlight: orange;

@import "bootstrap";
@import "color";
@import "font-awesome";

@mixin unselectable {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

@mixin selectable {
  -moz-user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text;
}

p,pre,span {
  @include selectable;
}

body {
  @include unselectable;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  padding: 10px;
  font-style: normal;
}

h1 {
  font-weight: 700;
  color: #7665a0;
}

h2 {
  font-weight: 500;
}

hr {
  border-color: #0094ca;
  border-bottom: none;
}

th {
  background-color: #5b6770;
  color: white;
  border: 1px solid white;
  text-align: left;
  font-size: 120%;
  font-weight: 500;
  padding: 5px;
}

.clear {
  clear: both;
}

.navbar {
  margin-bottom: 30px;
}

.production {
  background-color: lightgray;
}

.trophy_gold {
  background-color: gold;
}

.trophy_silver {
  background-color: silver;
}

.trophy_bronze {
  background-color: darkgoldenrod;
}

.report_cell {
  text-align: center;
  color: white;
  border: 1px solid black;
}

.report_row {
  height: 26px;
  border-top: 1px solid black;
}

.report_key {
  height: 16px;
  border-radius: 5px;
  display: block;
  float: left;
  clear: left;
  width: 23px;
  border: 1px solid lightgray;
  margin: 5px;
  vertical-align: middle;
}

.report_key_cell {
  padding: 3px;
  visibility: middle;
}

.report_tall_row {
  height: 35px;
}

.level_link, .level_link:link, level_link:visited {
  border-radius: 20px;
  min-width: 22px;
  line-height: 22px;
  padding: 4px;
  font-size: 16px;
  text-align: center;
  cursor: pointer;
  display: inline-block;
  margin: 2px;
  font-weight: 400;
  color: white;
}

.level_link.not_tried, .level_link.not_tried:link, .level_link.not_tried:visited {
  background-color: $level_not_tried;
  color: #666 !important;
  &:hover {
    background-color: $level_current;
    color: white;
    text-decoration: none;
  }
}

.level_link.attempted, .level_link.attempted:link, .level_link.attempted:visited {
  background-color: $level_attempted;
  color: #666 !important;
  &:hover {
    background-color: $level_current;
    color: white;
    text-decoration: none;
  }
}

.level_link.perfect, .level_link.perfect:link, .level_link.perfect:visited {
  background-color: $level_perfect;
  color: white !important;
  &:hover {
    background-color: $level_current;
    color: white;
    text-decoration: none;
  }
}


.level_link.passed, .level_link.passed:link, .level_link.passed:visited {
  background-color: $level_passed;
  color: white !important;
  &:hover {
    background-color: $level_current;
    color: white;
    text-decoration: none;
  }
}

.puzzle_outer_level,
.puzzle_outer_assessment,
.puzzle_outer_current {
  padding: 1px;
  display: inline-block;
  border-radius: 20px;
}

.puzzle_outer_level {
  background-color: #ccc;
}

.puzzle_outer_current {
  background-color: $level_current;
  padding: 1px;
  display: inline-block;
  border-radius: 20px;
}

.puzzle_outer_assessment {
  background-color: yellow;
  padding: 1px;
  display: inline-block;
  border-radius: 20px;
}

.user-stats-block
{
  display:inline-block;
  position:relative;
  overflow:hidden;
  float:left;
  width:100%;
}

.stage-lesson-plan-link a
{
  font-size: 10px;
  color: $purple;
  font-weight: 500;
}

.game-group {
  border-bottom: 2px solid #ccc;
  background-color: #eee;
  display: table;
  table-layout: fixed;
  padding: 10px;
  width: 100%;
  .stage {
    display: table-cell;
    width: 200px;
    vertical-align: middle;
    margin-right: 5px;
    .game-title {
      font-weight: 500
    }
  }
  .games {
    display: table-cell;
    vertical-align: middle;
    box-sizing: border-box;
    padding-right: 10px;
    .level {
      margin: 1px;
      display: inline-block;
      .puzzle-number {
        position: relative;
        top: 1px;
      }
    }
  }
}

.puzzle-named {
  font-size: 13px;
  padding-left: 6px;
  padding-right: 6px;
}

.header {
  padding-top: 15px;
  padding-bottom: 15px;
  @media screen and (max-width: 1150px) {
    padding-top: 0px;
    padding-bottom: 5px;
  }
  background-color: $bkgnd_color;
  color: $header_text;
  a:link {color:$header_text;}
  a:visited {color:$header_text;}
  //a:hover {color:#FF00FF;}  /* mouse over link */
  //a:active {color:#0000FF;}  /* selected link */

  #betainfo {
    font-size: 11px;
  }
}

.header.hide_on_mobile {
  @media screen and (max-width: 900px) {
    display: none;
  }
}

.header_status_bar {
  background-color: $dark_color;
  border-radius: 5px;
  min-width: 20px;
  padding: 3px;
  font-size: 16px;
  display: inline-block;
}

a.header_status_bar:hover {
  background-color: orange;
}

.header_text {
  font-size: 16px;
  display: inline-block;
}

.main {
  padding-top: 15px;
  padding-bottom: 15px;
  a:link {font-weight: bold; color:$dark_color;}
  a:visited {font-weight: bold; color:$dark_color;}
  a:hover {font-weight: bold; color:$dark_color; background-color: transparent;   text-decoration: underline; }  /* mouse over link */
  a:active {font-weight: bold; color:$dark_color; background-color: transparent;}  /* selected link */
}

/* This styling helps to push the footer to the bottom of a page. */
$footer_height: 110px;
$footer_padding-top: 20px;
$footer_padding-bottom: 20px;
$footer_fullheight: $footer_height + $footer_padding-top + $footer_padding-bottom;
html, body {
  height: 100%;
}
.wrapper {
  min-height: 100%;
  margin-bottom: -$footer_fullheight;     /* This is the same as the height of .push. */
}
.push {
  height: $footer_fullheight;             /* This is the same as the height of .footer once its padding is included. */
}

.footer {
  height: $footer_height;                 /* A height is required to push this footer to the bottom of the page. */
  padding-top: $footer_padding-top;
  padding-bottom: $footer_padding-bottom;
  font-size: 14px;
  background-color: $dark_color;
  color: $header_text;
  a:link {font-weight: 400; color: white;}
  a:visited {font-weight: 400; color: white;}
  a:hover {font-weight: 400; color:white; background-color: transparent;   text-decoration: underline; }  /* mouse over link */
  a:active {font-weight: 400; color:white; background-color: transparent;}  /* selected link */
  select {
    width: auto;
    font-size:11px;
    height: 18px;
    margin-bottom: 4px
    }
  .fineprint {
    a:link {font-weight:600;}
    a:visited {font-weight:600;}
    a:hover {font-weight:600;}
    a:active {font-weight:600;}
  }
  .dim {
    display: inline-block;
    opacity: 0.5;
  }
}

#locale {
  font-family: sans-serif;
  height: 24px;
}

.header_separator {
  padding-left: 2px;
  margin-bottom: -18px;
  margin-top: -8px;
  margin-right: 2px;
  height: 42px;
  border-right: 1px solid $inset_color;
  border-right-style: inset;
  display: inline-block;
}

.user_menu {
  a:hover { background-color: transparent; text-decoration: none; display: inline-block; }
}

.user_menu a {
  vertical-align: bottom;
}

.user_options {
  display: inline-block;
  background-color: white;
  a:link {color:black;}
  a:visited {color:black;}
  a:hover { color:white; background-color: $dark_color; text-decoration: none; }
  a:active { color:white; background-color: $dark_color; }
  border: 1px solid black;
  z-index: 100001;
  text-align: left;
  white-space: nowrap;
  color: black;
  position: absolute;
  right: 0;
  padding: 10px;
  left: auto;
  bottom: auto;
}

.user_options a {
  color: black;
}

.full_container {
  padding: 25px;
}

.modal {
  a:hover {color:#FF0000; background-color: white; }
}

.modal-body {
  max-height: none;
}

.dash_modal {
  width: 640px;
  margin-left: -320px;
}

.dash_modal_body {
  padding-right: 25px;
}

.btn#dataConfirmOK:hover {
  color: white;
  background-color: orange;
}

#video {
  padding: 0;
}

.video-player {
  width: 100%;
  height: 100%;
  margin: 0;
}

.fallback-video-player-failed {
  video, div {
    visibility: hidden;
  }
  p {
    font-size: 22px;
    line-height: 26px;
    padding: 5px;

    a {
      color: white;
    }
  }
}

.video-modal {
  z-index: 10000;

  .ui-tabs {
    height: 100%;
    width: 100%;
  }
}

.header_row {
  min-height: 85px;
  @media screen and (max-width: 1150px) {
    min-height: 75px;
  }
}

.header_logo {
  position: absolute;
  float: left;
  left: 25px;
  min-width: 86px;
  z-index: 1;
  @media screen and (max-width: 1150px) {
    & > a > img {
      width: 55px;
      height: 55px;
    }
    padding-top: 10px;
    min-width: 0px;
  }
}

.header_middle {
  position: absolute;
  left: 0;
  right: 0;
}

.header_level_container {
  border-bottom: 1px solid $inset_color;
  border-bottom-style: inset;
  padding-bottom: 10px;
  display: inline-block;
}

.header_level {
  padding-top: 15px;
  padding-bottom: 10px;
  text-align: center;
  font-size: 150%;
  cursor: default;
  white-space: nowrap;
  @media screen and (max-width: 1150px) {
    padding-top: 10px;
  }

  .progress_container {
    background-color: #eee;
    border: 1px solid #ccc;
    display: inline-block;
    padding: 5px 10px;
    border-radius: 5px;
  }
  /* current and last are large dots */
  .puzzle_outer_current,
  .puzzle_outer_level.last,
  .puzzle_outer_assessment.last {
    margin: 0 -1px;
    vertical-align: middle;
    border-radius: 20px;

    .level_link {
      border-radius: 20px;
      height: 18px;
      min-width: 18px;
      width: 18px;
      font-size: 14px;
      padding: 0 2px 4px 2px;
      text-align: center;
      display: inline-block;
    }

    .level_link.unplugged_level {
      font-size: 12px;
      padding-left: 10px;
      padding-right: 10px;
      width: auto;
    }
  }

  /* all others are small dot */
  .puzzle_outer_level,
  .puzzle_outer_assessment {
    margin: 0 -1px;
    vertical-align: middle;
    border-radius: 11px;
    line-height: 1px;

    .level_link {
      min-width: 1px;
      width: 1px;
      height: 1px;
      border-radius: 9px;
      padding: 3px;
      margin: 1px;
      /* hack to hide the number: */
      font-size: 0px;
      color: transparent;
    }
  }

  .level_link:hover {
    text-decoration: none;
    background-color: $level_current;
  }

  .puzzle_outer_current,
  .puzzle_outer_current .level_link {
    background-color: $level_current;
    color: white !important;
  }

}


.header_user {
  position: absolute;
  float: left;
  right: 25px;
  text-align: right;
  @media screen and (max-width: 1150px) {
    padding-top: 10px;
  }
  background-color: rgb(255, 164, 0);
  border-radius: 5px;
  padding: 7px 14px;
  font-size: 14px;
  line-height: 20px;
  box-sizing: border-box;
  a:hover {
    text-decoration: none;
    background-color: rgb(255, 164, 0);
  }
}
.header_popup {
  display:none;
  top:auto;
  position:absolute;
  left:50%;
  width:635px;
  margin-left:-337px;
  margin-top:-20px;
  border: 20px solid $bkgnd_color;
  border-top: 5px;
  border-bottom: 5px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  z-index: 1050;
  background-color: white;
  overflow: hidden;
}

.header_popup_header {
  padding: 12px 15px;
  margin-bottom: 0;
  text-align: left;
  color: $header_text;
  background-color: $hdr_color;
  font-size: 22px;
  cursor: pointer;
}

.header_popup_body {
  position: relative;
  overflow-y: auto;
  display: block;
  min-height: 1100px;

  .loading {
    height: 400px;
    margin: 20px;
    background: image-url("spinner-big.gif") no-repeat center center;
  }
}

.header_popup_footer {
  padding: 12px 15px;
  margin-bottom: 0;
  text-align: right;
  color: $header_text;
  background-color: $bkgnd_color;
  cursor: pointer;
}

.header_popup_link {
  min-width: 40px;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  height: 26px;
  cursor: pointer;
}

.transparent_backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1040;
  background-color: transparent;
}

.header_trophy_link:hover {
  background-color: transparent;
  text-decoration: none;
}

.header_finished_link {
  display: inline-block;
  font-size: 16px;
}

.header_finished_link:hover {
  background-color: transparent;
  text-decoration: underline;
}

.header_popup_link:hover {
  background-color: transparent;
  text-decoration: none;
}

.header_popup_link_glyph {
  font-size: 22px;
  color: orange;
  line-height: 10px;
}

.header_popup_link_text {
  font-size: 10px;
  color: $header_text;
  display: inline-block;
  line-height: 20px;
}

.trophy_image {
  width: 45px;
  height: 45px;
}

#alert {
  color: red;
  font-size: 130%;
  border-style: solid;
  border-width: 2px;
  padding: 5px;
}

.modal-body {
  height: 100%;
  overflow: visible;
}

#blocklyApp {

  .loading {
    height: 520px;
    margin: 20px;
    background: image-url("spinner-big.gif") no-repeat center center;
  }

  .slow_load {
    display: none;
    text-align: center;
    position: relative;
    top: -230px;
  }

}

.reference_area {
  margin-top: 20px;

  .help_title {
    color: #1180be;
    font-weight: bold;
    font-size: 17.5px;
    display: inline-block;
  }

  .solution_link {
    font-size: 17.5px;
    padding-bottom: 4px;
  }

  .video_link {
    display: inline-block;
    margin: 6px;
  }

  .video_name {
    text-align: center;
    width: 183px;
  }

  .help_subtitle {
    display: inline-block;
  }
}

#notes-outer {
  overflow-y: scroll;
  padding: 0;
}
#notes {
  .note {
    padding-bottom: 10px;
    p {
      font-size: 20px;
      line-height: 24px;
      padding-right: 30px;
    }
    img {
      float: left;
      width: 450px;
      height: auto;
      padding-right: 30px;
    }
  }
}

// Tabs

.video-modal {
  .modal-body {
    padding: 0;
  }
  .ui-tabs-nav {
    background: $light_gray;

    li {
      border-top-right-radius: 4px;
      border-top-left-radius: 4px;

      a {
        background: $dark_color;
        color: white;
        &:hover {
          color: $light_green;
        }
        &:focus {
          outline: 0;
        }
      }
    }

    li.ui-state-active {
      a {
        background: white;
        color: $orange;
        &:hover {
          color: $orange;
        }
      }
    }
  }
}

@mixin close-button($cornerOffset) {
  $startWidth: 61px;
  $startHeight: 59px;
  $growth: 3px;
  $movement: 1px;

  position: absolute;
  cursor: pointer;
  z-index: 1;

  top: $cornerOffset;
  right: $cornerOffset;
  &:hover {
    top: $cornerOffset - $movement;
    right: $cornerOffset - $movement;
  }

  img {
    width: $startWidth;
    height: $startHeight;
    &:hover {
      width: $startWidth + $growth;
      height: $startHeight + $growth;
    }
  }
}

.x-close {
  @include close-button($cornerOffset: -20px);
}

.qtip-content {
  font-size: 20px;
  line-height: 28px;
  color: #7E5BA0;
  font-weight: 500;
}

.qtip-default {
  background-color: #fff;
  color: #000;
  border: 1px solid #000;
  border-radius: 8px;
  box-shadow: 5px 5px 5px #888;
  padding: 10px;
}

.no-tip .qtip-tip {
  visibility: hidden;
}

.cdo-qtips {
  z-index: 1;


  .tooltip-x-close {
    @include close-button($cornerOffset: -35px);
    background: none;
    color: none;
  }
}

a.download-video {
  z-index: 1;
  cursor: pointer;
  width: 40px;
  height: 36px;
  &:hover {
    background: none;
  }
  img {
    width: 40px;
    height: 41px;
    margin-top: -3px;
    margin-bottom: -2px;
  }
  img:hover {
    width: 41px;
    height: 42px;
    margin-bottom: -3px;
  }
}

@mixin warning-banner {
  padding: 5px 20px;
  font-size: 28px;
  line-height: 32px;
  background-color: orange;
  text-align: center;
  color: white;
  a, a:visited {<commit_msg>Fix video download button in RTL locales<commit_after>/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the top of the
 * compiled file, but it's generally better to create a new file per style scope.
 *
 *= require jquery.ui.all
 *= require jquery.qtip.min
 *= require video-js
 *= require_self
 *= require_directory .
 */

$baseFontFamily: 'Gotham A', 'Gotham B', sans-serif;
$headingsFontWeight: 400;
$btnPrimaryBackground: orange;
$btnPrimaryBackgroundHighlight: orange;

@import "bootstrap";
@import "color";
@import "font-awesome";

@mixin unselectable {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

@mixin selectable {
  -moz-user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text;
}

p,pre,span {
  @include selectable;
}

body {
  @include unselectable;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  padding: 10px;
  font-style: normal;
}

h1 {
  font-weight: 700;
  color: #7665a0;
}

h2 {
  font-weight: 500;
}

hr {
  border-color: #0094ca;
  border-bottom: none;
}

th {
  background-color: #5b6770;
  color: white;
  border: 1px solid white;
  text-align: left;
  font-size: 120%;
  font-weight: 500;
  padding: 5px;
}

.clear {
  clear: both;
}

.navbar {
  margin-bottom: 30px;
}

.production {
  background-color: lightgray;
}

.trophy_gold {
  background-color: gold;
}

.trophy_silver {
  background-color: silver;
}

.trophy_bronze {
  background-color: darkgoldenrod;
}

.report_cell {
  text-align: center;
  color: white;
  border: 1px solid black;
}

.report_row {
  height: 26px;
  border-top: 1px solid black;
}

.report_key {
  height: 16px;
  border-radius: 5px;
  display: block;
  float: left;
  clear: left;
  width: 23px;
  border: 1px solid lightgray;
  margin: 5px;
  vertical-align: middle;
}

.report_key_cell {
  padding: 3px;
  visibility: middle;
}

.report_tall_row {
  height: 35px;
}

.level_link, .level_link:link, level_link:visited {
  border-radius: 20px;
  min-width: 22px;
  line-height: 22px;
  padding: 4px;
  font-size: 16px;
  text-align: center;
  cursor: pointer;
  display: inline-block;
  margin: 2px;
  font-weight: 400;
  color: white;
}

.level_link.not_tried, .level_link.not_tried:link, .level_link.not_tried:visited {
  background-color: $level_not_tried;
  color: #666 !important;
  &:hover {
    background-color: $level_current;
    color: white;
    text-decoration: none;
  }
}

.level_link.attempted, .level_link.attempted:link, .level_link.attempted:visited {
  background-color: $level_attempted;
  color: #666 !important;
  &:hover {
    background-color: $level_current;
    color: white;
    text-decoration: none;
  }
}

.level_link.perfect, .level_link.perfect:link, .level_link.perfect:visited {
  background-color: $level_perfect;
  color: white !important;
  &:hover {
    background-color: $level_current;
    color: white;
    text-decoration: none;
  }
}


.level_link.passed, .level_link.passed:link, .level_link.passed:visited {
  background-color: $level_passed;
  color: white !important;
  &:hover {
    background-color: $level_current;
    color: white;
    text-decoration: none;
  }
}

.puzzle_outer_level,
.puzzle_outer_assessment,
.puzzle_outer_current {
  padding: 1px;
  display: inline-block;
  border-radius: 20px;
}

.puzzle_outer_level {
  background-color: #ccc;
}

.puzzle_outer_current {
  background-color: $level_current;
  padding: 1px;
  display: inline-block;
  border-radius: 20px;
}

.puzzle_outer_assessment {
  background-color: yellow;
  padding: 1px;
  display: inline-block;
  border-radius: 20px;
}

.user-stats-block
{
  display:inline-block;
  position:relative;
  overflow:hidden;
  float:left;
  width:100%;
}

.stage-lesson-plan-link a
{
  font-size: 10px;
  color: $purple;
  font-weight: 500;
}

.game-group {
  border-bottom: 2px solid #ccc;
  background-color: #eee;
  display: table;
  table-layout: fixed;
  padding: 10px;
  width: 100%;
  .stage {
    display: table-cell;
    width: 200px;
    vertical-align: middle;
    margin-right: 5px;
    .game-title {
      font-weight: 500
    }
  }
  .games {
    display: table-cell;
    vertical-align: middle;
    box-sizing: border-box;
    padding-right: 10px;
    .level {
      margin: 1px;
      display: inline-block;
      .puzzle-number {
        position: relative;
        top: 1px;
      }
    }
  }
}

.puzzle-named {
  font-size: 13px;
  padding-left: 6px;
  padding-right: 6px;
}

.header {
  padding-top: 15px;
  padding-bottom: 15px;
  @media screen and (max-width: 1150px) {
    padding-top: 0px;
    padding-bottom: 5px;
  }
  background-color: $bkgnd_color;
  color: $header_text;
  a:link {color:$header_text;}
  a:visited {color:$header_text;}
  //a:hover {color:#FF00FF;}  /* mouse over link */
  //a:active {color:#0000FF;}  /* selected link */

  #betainfo {
    font-size: 11px;
  }
}

.header.hide_on_mobile {
  @media screen and (max-width: 900px) {
    display: none;
  }
}

.header_status_bar {
  background-color: $dark_color;
  border-radius: 5px;
  min-width: 20px;
  padding: 3px;
  font-size: 16px;
  display: inline-block;
}

a.header_status_bar:hover {
  background-color: orange;
}

.header_text {
  font-size: 16px;
  display: inline-block;
}

.main {
  padding-top: 15px;
  padding-bottom: 15px;
  a:link {font-weight: bold; color:$dark_color;}
  a:visited {font-weight: bold; color:$dark_color;}
  a:hover {font-weight: bold; color:$dark_color; background-color: transparent;   text-decoration: underline; }  /* mouse over link */
  a:active {font-weight: bold; color:$dark_color; background-color: transparent;}  /* selected link */
}

/* This styling helps to push the footer to the bottom of a page. */
$footer_height: 110px;
$footer_padding-top: 20px;
$footer_padding-bottom: 20px;
$footer_fullheight: $footer_height + $footer_padding-top + $footer_padding-bottom;
html, body {
  height: 100%;
}
.wrapper {
  min-height: 100%;
  margin-bottom: -$footer_fullheight;     /* This is the same as the height of .push. */
}
.push {
  height: $footer_fullheight;             /* This is the same as the height of .footer once its padding is included. */
}

.footer {
  height: $footer_height;                 /* A height is required to push this footer to the bottom of the page. */
  padding-top: $footer_padding-top;
  padding-bottom: $footer_padding-bottom;
  font-size: 14px;
  background-color: $dark_color;
  color: $header_text;
  a:link {font-weight: 400; color: white;}
  a:visited {font-weight: 400; color: white;}
  a:hover {font-weight: 400; color:white; background-color: transparent;   text-decoration: underline; }  /* mouse over link */
  a:active {font-weight: 400; color:white; background-color: transparent;}  /* selected link */
  select {
    width: auto;
    font-size:11px;
    height: 18px;
    margin-bottom: 4px
    }
  .fineprint {
    a:link {font-weight:600;}
    a:visited {font-weight:600;}
    a:hover {font-weight:600;}
    a:active {font-weight:600;}
  }
  .dim {
    display: inline-block;
    opacity: 0.5;
  }
}

#locale {
  font-family: sans-serif;
  height: 24px;
}

.header_separator {
  padding-left: 2px;
  margin-bottom: -18px;
  margin-top: -8px;
  margin-right: 2px;
  height: 42px;
  border-right: 1px solid $inset_color;
  border-right-style: inset;
  display: inline-block;
}

.user_menu {
  a:hover { background-color: transparent; text-decoration: none; display: inline-block; }
}

.user_menu a {
  vertical-align: bottom;
}

.user_options {
  display: inline-block;
  background-color: white;
  a:link {color:black;}
  a:visited {color:black;}
  a:hover { color:white; background-color: $dark_color; text-decoration: none; }
  a:active { color:white; background-color: $dark_color; }
  border: 1px solid black;
  z-index: 100001;
  text-align: left;
  white-space: nowrap;
  color: black;
  position: absolute;
  right: 0;
  padding: 10px;
  left: auto;
  bottom: auto;
}

.user_options a {
  color: black;
}

.full_container {
  padding: 25px;
}

.modal {
  a:hover {color:#FF0000; background-color: white; }
}

.modal-body {
  max-height: none;
}

.dash_modal {
  width: 640px;
  margin-left: -320px;
}

.dash_modal_body {
  padding-right: 25px;
}

.btn#dataConfirmOK:hover {
  color: white;
  background-color: orange;
}

#video {
  padding: 0;
}

.video-player {
  width: 100%;
  height: 100%;
  margin: 0;
}

.fallback-video-player-failed {
  video, div {
    visibility: hidden;
  }
  p {
    font-size: 22px;
    line-height: 26px;
    padding: 5px;

    a {
      color: white;
    }
  }
}

.video-modal {
  z-index: 10000;

  .ui-tabs {
    height: 100%;
    width: 100%;
  }
}

.header_row {
  min-height: 85px;
  @media screen and (max-width: 1150px) {
    min-height: 75px;
  }
}

.header_logo {
  position: absolute;
  float: left;
  left: 25px;
  min-width: 86px;
  z-index: 1;
  @media screen and (max-width: 1150px) {
    & > a > img {
      width: 55px;
      height: 55px;
    }
    padding-top: 10px;
    min-width: 0px;
  }
}

.header_middle {
  position: absolute;
  left: 0;
  right: 0;
}

.header_level_container {
  border-bottom: 1px solid $inset_color;
  border-bottom-style: inset;
  padding-bottom: 10px;
  display: inline-block;
}

.header_level {
  padding-top: 15px;
  padding-bottom: 10px;
  text-align: center;
  font-size: 150%;
  cursor: default;
  white-space: nowrap;
  @media screen and (max-width: 1150px) {
    padding-top: 10px;
  }

  .progress_container {
    background-color: #eee;
    border: 1px solid #ccc;
    display: inline-block;
    padding: 5px 10px;
    border-radius: 5px;
  }
  /* current and last are large dots */
  .puzzle_outer_current,
  .puzzle_outer_level.last,
  .puzzle_outer_assessment.last {
    margin: 0 -1px;
    vertical-align: middle;
    border-radius: 20px;

    .level_link {
      border-radius: 20px;
      height: 18px;
      min-width: 18px;
      width: 18px;
      font-size: 14px;
      padding: 0 2px 4px 2px;
      text-align: center;
      display: inline-block;
    }

    .level_link.unplugged_level {
      font-size: 12px;
      padding-left: 10px;
      padding-right: 10px;
      width: auto;
    }
  }

  /* all others are small dot */
  .puzzle_outer_level,
  .puzzle_outer_assessment {
    margin: 0 -1px;
    vertical-align: middle;
    border-radius: 11px;
    line-height: 1px;

    .level_link {
      min-width: 1px;
      width: 1px;
      height: 1px;
      border-radius: 9px;
      padding: 3px;
      margin: 1px;
      /* hack to hide the number: */
      font-size: 0px;
      color: transparent;
    }
  }

  .level_link:hover {
    text-decoration: none;
    background-color: $level_current;
  }

  .puzzle_outer_current,
  .puzzle_outer_current .level_link {
    background-color: $level_current;
    color: white !important;
  }

}


.header_user {
  position: absolute;
  float: left;
  right: 25px;
  text-align: right;
  @media screen and (max-width: 1150px) {
    padding-top: 10px;
  }
  background-color: rgb(255, 164, 0);
  border-radius: 5px;
  padding: 7px 14px;
  font-size: 14px;
  line-height: 20px;
  box-sizing: border-box;
  a:hover {
    text-decoration: none;
    background-color: rgb(255, 164, 0);
  }
}
.header_popup {
  display:none;
  top:auto;
  position:absolute;
  left:50%;
  width:635px;
  margin-left:-337px;
  margin-top:-20px;
  border: 20px solid $bkgnd_color;
  border-top: 5px;
  border-bottom: 5px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  z-index: 1050;
  background-color: white;
  overflow: hidden;
}

.header_popup_header {
  padding: 12px 15px;
  margin-bottom: 0;
  text-align: left;
  color: $header_text;
  background-color: $hdr_color;
  font-size: 22px;
  cursor: pointer;
}

.header_popup_body {
  position: relative;
  overflow-y: auto;
  display: block;
  min-height: 1100px;

  .loading {
    height: 400px;
    margin: 20px;
    background: image-url("spinner-big.gif") no-repeat center center;
  }
}

.header_popup_footer {
  padding: 12px 15px;
  margin-bottom: 0;
  text-align: right;
  color: $header_text;
  background-color: $bkgnd_color;
  cursor: pointer;
}

.header_popup_link {
  min-width: 40px;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  height: 26px;
  cursor: pointer;
}

.transparent_backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1040;
  background-color: transparent;
}

.header_trophy_link:hover {
  background-color: transparent;
  text-decoration: none;
}

.header_finished_link {
  display: inline-block;
  font-size: 16px;
}

.header_finished_link:hover {
  background-color: transparent;
  text-decoration: underline;
}

.header_popup_link:hover {
  background-color: transparent;
  text-decoration: none;
}

.header_popup_link_glyph {
  font-size: 22px;
  color: orange;
  line-height: 10px;
}

.header_popup_link_text {
  font-size: 10px;
  color: $header_text;
  display: inline-block;
  line-height: 20px;
}

.trophy_image {
  width: 45px;
  height: 45px;
}

#alert {
  color: red;
  font-size: 130%;
  border-style: solid;
  border-width: 2px;
  padding: 5px;
}

.modal-body {
  height: 100%;
  overflow: visible;
}

#blocklyApp {

  .loading {
    height: 520px;
    margin: 20px;
    background: image-url("spinner-big.gif") no-repeat center center;
  }

  .slow_load {
    display: none;
    text-align: center;
    position: relative;
    top: -230px;
  }

}

.reference_area {
  margin-top: 20px;

  .help_title {
    color: #1180be;
    font-weight: bold;
    font-size: 17.5px;
    display: inline-block;
  }

  .solution_link {
    font-size: 17.5px;
    padding-bottom: 4px;
  }

  .video_link {
    display: inline-block;
    margin: 6px;
  }

  .video_name {
    text-align: center;
    width: 183px;
  }

  .help_subtitle {
    display: inline-block;
  }
}

#notes-outer {
  overflow-y: scroll;
  padding: 0;
}
#notes {
  .note {
    padding-bottom: 10px;
    p {
      font-size: 20px;
      line-height: 24px;
      padding-right: 30px;
    }
    img {
      float: left;
      width: 450px;
      height: auto;
      padding-right: 30px;
    }
  }
}

// Tabs

.video-modal {
  .modal-body {
    padding: 0;
  }
  .ui-tabs-nav {
    background: $light_gray;

    li {
      border-top-right-radius: 4px;
      border-top-left-radius: 4px;

      a {
        background: $dark_color;
        color: white;
        &:hover {
          color: $light_green;
        }
        &:focus {
          outline: 0;
        }
      }
    }

    li.ui-state-active {
      a {
        background: white;
        color: $orange;
        &:hover {
          color: $orange;
        }
      }
    }
  }
}

@mixin close-button($cornerOffset) {
  $startWidth: 61px;
  $startHeight: 59px;
  $growth: 3px;
  $movement: 1px;

  position: absolute;
  cursor: pointer;
  z-index: 1;

  top: $cornerOffset;
  right: $cornerOffset;
  &:hover {
    top: $cornerOffset - $movement;
    right: $cornerOffset - $movement;
  }

  img {
    width: $startWidth;
    height: $startHeight;
    &:hover {
      width: $startWidth + $growth;
      height: $startHeight + $growth;
    }
  }
}

.x-close {
  @include close-button($cornerOffset: -20px);
}

.qtip-content {
  font-size: 20px;
  line-height: 28px;
  color: #7E5BA0;
  font-weight: 500;
}

.qtip-default {
  background-color: #fff;
  color: #000;
  border: 1px solid #000;
  border-radius: 8px;
  box-shadow: 5px 5px 5px #888;
  padding: 10px;
}

.no-tip .qtip-tip {
  visibility: hidden;
}

.cdo-qtips {
  z-index: 1;


  .tooltip-x-close {
    @include close-button($cornerOffset: -35px);
    background: none;
    color: none;
  }
}

a.download-video {
  float: left;
  z-index: 1;
  cursor: pointer;
  width: 40px;
  height: 36px;
  &:hover {
    background: none;
  }
  img {
    width: 40px;
    height: 41px;
    margin-top: -3px;
    margin-bottom: -2px;
  }
  img:hover {
    width: 41px;
    height: 42px;
    margin-bottom: -3px;
  }
}

@mixin warning-banner {
  padding: 5px 20px;
  font-size: 28px;
  line-height: 32px;
  background-color: orange;
  text-align: center;
  color: white;
  a, a:visited {
{'fraction_non_alphanumeric': 0.135306682941715, 'fraction_numerical': 0.03301800427220018, 'mean_word_length': 2.909221042586186, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 7, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 3, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4225205', 'n_tokens_mistral': 13565, 'n_tokens_neox': 12334, 'n_words': 2792}