/* stylelint-disable import-notation */
/*
   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;
  }
}
#rotateContainer {
  display: none;
}
@media screen and (orientation: portrait) and (max-device-width: 900px) {
  #rotateContainer {
    display: block;
  }
}

.hide_toolbar_helper {
  position: fixed;
  top: 22px;
  left: 6%;
  color: #000;
  z-index: 1040;
  padding: 20px 40px 20px 20px;
  max-width: 40%;
  border-radius: 5px;
  background: #fff;
  border: 1px solid #000;
}
.hide_toolbar_helper em {
  font-size: 70%;
  font-family: inherit;
}
.hide_toolbar_helper p {
  font-size: 16px;
  margin-bottom: 0;
}

.hide_toolbar_helper:after,
.hide_toolbar_helper:before {
  bottom: 100%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.hide_toolbar_helper:after {
  border-color: rgba(255, 255, 255, 0);
  border-bottom-color: #fff;
  border-width: 20px;
  margin-left: -20px;
}

.hide_toolbar_helper:before {
  border-color: rgba(0, 0, 0, 0);
  border-bottom-color: #000;
  border-width: 21px;
  margin-left: -21px;
}

.blocklyHelp .blocklyText {
  text-anchor: middle;
  dominant-baseline: central;
}

.blocklyUnusedFrame {
  transition: opacity 2s;
  opacity: 0.8;
}

/*
Google Blockly moves dragging blocks to a separate SVG called the block drag
surface. When you drag a block over the toolbox area, we want the dragging
block to be on top of the toolbox. The toolbox has a z-index of 70.
*/
.blocklyBlockDragSurface {
  z-index: 80;
}

@keyframes wiggle {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-20deg);
  }
  75% {
    transform: rotate(20deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
.animate-hint {
  animation-name: wiggle;
  animation-duration: 200ms;
  transform-origin: 50% 50%;
  animation-iteration-count: 3;
}

body {
  font-family: "Figtree", "Noto Sans", "Noto Sans Math", "Noto Sans Arabic", "Noto Sans Armenian", "Noto Sans Bengali", "Noto Sans SC", "Noto Sans TC", "Noto Sans Devanagari", "Noto Sans Georgian", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans Kannada", "Noto Sans Khmer", "Noto Sans KR", "Noto Sans Myanmar", "Noto Sans Sinhala", "Noto Sans Tamil", "Noto Sans Telugu", "Noto Sans Thai", "Noto Sans Thaana", sans-serif;
  font-weight: 400;
  font-style: normal;
  background-color: #f2f2f2;
  font-weight: normal;
  margin-top: 0;
}

h1 {
  font-family: "Figtree", "Noto Sans", "Noto Sans Math", "Noto Sans Arabic", "Noto Sans Armenian", "Noto Sans Bengali", "Noto Sans SC", "Noto Sans TC", "Noto Sans Devanagari", "Noto Sans Georgian", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans Kannada", "Noto Sans Khmer", "Noto Sans KR", "Noto Sans Myanmar", "Noto Sans Sinhala", "Noto Sans Tamil", "Noto Sans Telugu", "Noto Sans Thai", "Noto Sans Thaana", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 140%;
}

h2 {
  font-family: "Figtree", "Noto Sans", "Noto Sans Math", "Noto Sans Arabic", "Noto Sans Armenian", "Noto Sans Bengali", "Noto Sans SC", "Noto Sans TC", "Noto Sans Devanagari", "Noto Sans Georgian", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans Kannada", "Noto Sans Khmer", "Noto Sans KR", "Noto Sans Myanmar", "Noto Sans Sinhala", "Noto Sans Tamil", "Noto Sans Telugu", "Noto Sans Thai", "Noto Sans Thaana", sans-serif;
  font-weight: 600;
  font-style: normal;
}

a {
  color: #0596ce;
}
a:hover {
  color: #0596ce;
  background: none;
}

strong {
  font-family: "Figtree", "Noto Sans", "Noto Sans Math", "Noto Sans Arabic", "Noto Sans Armenian", "Noto Sans Bengali", "Noto Sans SC", "Noto Sans TC", "Noto Sans Devanagari", "Noto Sans Georgian", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans Kannada", "Noto Sans Khmer", "Noto Sans KR", "Noto Sans Myanmar", "Noto Sans Sinhala", "Noto Sans Tamil", "Noto Sans Telugu", "Noto Sans Thai", "Noto Sans Thaana", sans-serif;
  font-weight: 700;
  font-style: normal;
}

em {
  font-family: "Figtree", "Noto Sans", "Noto Sans Math", "Noto Sans Arabic", "Noto Sans Armenian", "Noto Sans Bengali", "Noto Sans SC", "Noto Sans TC", "Noto Sans Devanagari", "Noto Sans Georgian", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans Kannada", "Noto Sans Khmer", "Noto Sans KR", "Noto Sans Myanmar", "Noto Sans Sinhala", "Noto Sans Tamil", "Noto Sans Telugu", "Noto Sans Thai", "Noto Sans Thaana", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-style: italic;
}

strong em,
em strong {
  font-family: "Figtree", "Noto Sans", "Noto Sans Math", "Noto Sans Arabic", "Noto Sans Armenian", "Noto Sans Bengali", "Noto Sans SC", "Noto Sans TC", "Noto Sans Devanagari", "Noto Sans Georgian", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans Kannada", "Noto Sans Khmer", "Noto Sans KR", "Noto Sans Myanmar", "Noto Sans Sinhala", "Noto Sans Tamil", "Noto Sans Telugu", "Noto Sans Thai", "Noto Sans Thaana", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-style: italic;
}

.clear {
  clear: both;
}

#visualizationColumn {
  position: relative;
  top: 0;
  left: auto;
  right: auto;
  overflow: visible;
}

#visualizationColumn.pin_bottom {
  position: absolute;
  bottom: 0;
}
#visualizationColumn.pin_bottom #belowVisualization {
  position: absolute;
  overflow: auto;
}

.no-focus-outline:focus:not(:focus-visible) {
  outline: none;
}

div.droplet-palette-group-header {
  font-family: "Figtree", "Noto Sans", "Noto Sans Math", "Noto Sans Arabic", "Noto Sans Armenian", "Noto Sans Bengali", "Noto Sans SC", "Noto Sans TC", "Noto Sans Devanagari", "Noto Sans Georgian", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans Kannada", "Noto Sans Khmer", "Noto Sans KR", "Noto Sans Myanmar", "Noto Sans Sinhala", "Noto Sans Tamil", "Noto Sans Telugu", "Noto Sans Thai", "Noto Sans Thaana", sans-serif;
  font-weight: 400;
  font-style: normal;
  line-height: 24px;
}

div.droplet-palette-header-row {
  height: 24px;
}

div.droplet-palette-group-header:active {
  color: #000;
}

div.droplet-palette-group-header-selected {
  font-weight: 400;
  color: #000;
}

div.droplet-palette-group-header.yellow {
  border-left: 10px solid #fff176;
}

div.droplet-palette-group-header-selected.yellow {
  background-color: #fff176;
}

div.droplet-palette-group-header.red {
  border-left: 10px solid #f78183;
}

div.droplet-palette-group-header-selected.red {
  background-color: #f78183;
}

div.droplet-palette-group-header.cyan {
  border-left: 10px solid #4dd0e1;
}

div.droplet-palette-group-header-selected.cyan {
  background-color: #4dd0e1;
}

div.droplet-palette-group-header.pink {
  border-left: 10px solid #f57ac6;
}

div.droplet-palette-group-header-selected.pink {
  background-color: #f57ac6;
}

div.droplet-palette-group-header.lightgreen {
  border-left: 10px solid #d3e965;
}

div.droplet-palette-group-header-selected.lightgreen {
  background-color: #d3e965;
}

div.droplet-palette-group-header.purple {
  border-left: 10px solid #bb77c7;
}

div.droplet-palette-group-header-selected.purple {
  background-color: #bb77c7;
}

div.droplet-palette-group-header.blue {
  border-left: 10px solid #64b5f6;
}

div.droplet-palette-group-header-selected.blue {
  background-color: #64b5f6;
}

div.droplet-palette-group-header.green {
  border-left: 10px solid #68d995;
}

div.droplet-palette-group-header-selected.green {
  background-color: #68d995;
}

div.droplet-palette-group-header.orange {
  border-left: 10px solid #ffb74d;
}

div.droplet-palette-group-header-selected.orange {
  background-color: #ffb74d;
}

.droplet-wrapper-div {
  overflow: hidden;
  outline-style: none;
}

#show-code-button {
  background-color: #b9bf15;
  border-color: #b9bf15;
  padding: 2px 8px;
  margin: -5px 0 0 6px;
  font-size: small;
  color: white;
}
@media screen and (max-device-width: 540px) {
  #show-code-button {
    display: none;
  }
}

.share-code-spacer {
  clear: both;
  min-height: 25px;
}

button.arrow {
  border: 1px solid #ffa000;
  background-color: #ffa000;
  color: #fff;
  margin: 5px 0;
  margin-inline-end: 9px;
  display: none;
}

button.arrow > img {
  opacity: 1;
  vertical-align: text-bottom;
}

button.arrow:disabled {
  border: 1px solid #D1D4D8;
  background-color: #D1D4D8;
  color: #D1D4D8;
}

#soft-buttons {
  display: inline-block;
  vertical-align: top;
  -webkit-touch-callout: none;
}
#soft-buttons.soft-buttons-compact {
  margin: 0;
}
#soft-buttons.soft-buttons-compact button {
  margin: 0;
  margin-inline-end: 4px;
}
#soft-buttons :last-child {
  margin-inline-end: 0;
}
@supports not (gap: 0 9px) {
  #soft-buttons {
    padding-inline-end: 9px;
  }
}

.soft-buttons-1 {
  display: table-cell;
  vertical-align: top;
}

.soft-buttons-2 {
  display: table-cell;
  vertical-align: top;
}

.soft-buttons-3 {
  display: table-cell;
  vertical-align: top;
}

.soft-buttons-4 {
  display: table-cell;
  vertical-align: top;
}

/* Set z-index to one here so that .droplet-dropdown (z-index 500) appears in front of
 * other droplet elements, but behind anything with z-index > 1 outside of #codeTextbox,
 * such as dialogs. */
#codeTextbox {
  position: absolute;
  left: 0;
  right: 0;
  top: 30px;
  bottom: 0;
  font-size: 14px;
  min-height: calc(50% - 16px) !important;
  direction: ltr;
  z-index: 1;
}

#codeTextbox.pin_bottom {
  border: 1px solid #ddd;
}

#codeTextbox.has_banner {
  top: 60px;
}

html[dir=rtl] .editor-column {
  right: 400px;
}

.editor-column {
  left: 400px;
}

#codeWorkspace.pin_bottom {
  border: none;
  border-top: 1px solid #ddd;
}

#codeWorkspace.readonly .blocklySvg,
#codeWorkspace.readonly .droplet-main-scroller,
#codeWorkspace.readonly .ace_scroller,
#codeWorkspace.dimmed .blocklySvg,
#codeWorkspace.dimmed .droplet-main-scroller,
#codeWorkspace.dimmed .ace_scroller,
.libraryCodeViewerContainer .blocklySvg,
.libraryCodeViewerContainer .droplet-main-scroller,
.libraryCodeViewerContainer .ace_scroller {
  background-color: rgba(0, 0, 0, 0.1);
}

.ace-chrome .ace_marker-layer .ace_error {
  background: rgb(232, 47, 25);
}

.ace_marker-layer .ace_error {
  position: absolute;
  z-index: 3;
}

.ace_gutter-cell.ace_breakpoint,
.droplet-gutter-line.droplet_breakpoint {
  background-image: url("assets/blockly/media/common_images/gutterPause.png");
  background-size: 16px 16px;
  background-repeat: no-repeat;
  border-radius: 15px 0 0 15px;
  background-color: rgba(0, 0, 255, 0.5);
  color: white;
}

.droplet-gutter-line.droplet_breakpoint {
  background-position: 4px 4px;
}

.ace_gutter-cell.ace_error,
.droplet-gutter-line.droplet_error {
  background-image: url("assets/blockly/media/common_images/gutterError.png");
  background-size: 16px 16px;
  background-repeat: no-repeat;
}

.droplet-gutter-line.droplet_error,
.droplet-gutter-line.droplet_warning {
  background-position: 2px center;
}

.ace_gutter-cell.ace_warning,
.droplet-gutter-line.droplet_warning {
  background-image: url("assets/blockly/media/common_images/gutterWarn.png");
  background-size: 16px 16px;
  background-repeat: no-repeat;
}

.ace_gutter-cell.ace_error,
.ace_gutter-cell.ace_warning {
  background-position: 2px 0;
}

.droplet-gutter-line.droplet_warning {
  background-position: 2px 2px;
}

html[dir=rtl] #codeTextbox .droplet-wrapper-div {
  left: 0 !important;
}
html[dir=rtl] #codeTextbox .ace_editor {
  left: 0 !important;
}
html[dir=rtl] #codeTextbox .droplet-palette-wrapper {
  right: 0 !important;
  left: unset !important;
  z-index: 1;
}
html[dir=rtl] #codeTextbox .droplet-palette-header,
html[dir=rtl] #codeTextbox .droplet-palette-scroller {
  border-left: 2px solid #ddd;
}

#visualizationResizeBar {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 15px;
  left: 400px;
  cursor: ew-resize;
  text-align: center;
  color: #c6cacd;
  font-size: 24px;
  line-height: 400px;
}

html[dir=rtl] div#visualizationResizeBar {
  right: 400px;
}

#visualization {
  position: relative;
  height: 400px;
  margin-bottom: 5px;
}

.karel-counter-text {
  text-anchor: end;
  font-size: 16px;
  font-family: Verdana, Geneva, sans-serif;
  font-weight: bold;
  fill: white;
  stroke: black;
  stroke-width: 1;
  cursor: default;
}
html[dir=RTL] .karel-counter-text {
  text-anchor: start;
}

.karel-counter-text.paint {
  font-size: 33px;
  stroke-width: 2;
}

/* Shrink the visualization area on small displays. */
#visualization.responsive > * {
  -webkit-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  transform-origin: 0 0;
}
html[dir=RTL] #visualization.responsive > * {
  -webkit-transform-origin: 100% 0;
  -ms-transform-origin: 100% 0;
  transform-origin: 100% 0;
}

#studio-dpad-container.responsive > * {
  -webkit-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  transform-origin: 0 0;
}
html[dir=RTL] #studio-dpad-container.responsive > * {
  -webkit-transform-origin: 100% 0;
  -ms-transform-origin: 100% 0;
  transform-origin: 100% 0;
}

/* Make buttons, videos, etc. clickable. Otherwise, the scaled svg/canvas
 * obscures clicks on its original, unscaled position.  */
#belowVisualization {
  z-index: 1;
  position: relative;
}

@media screen and (min-width: 1101px) and (max-width: 1150px), screen and (min-height: 801px) and (max-height: 900px) {
  #visualization.responsive {
    max-height: 350px;
    max-width: 350px;
  }

  #visualizationColumn.responsive {
    max-width: 350px;
  }

  .small-footer-base.responsive {
    max-width: 350px;
  }

  .editor-column {
    left: 350px;
  }

  html[dir=rtl] .editor-column {
    right: 350px;
  }

  html[dir=rtl] body.readonly .editor-column {
    right: 0;
  }

  div#visualizationResizeBar {
    left: 350px;
    line-height: 350px;
  }

  html[dir=rtl] div#visualizationResizeBar {
    right: 350px;
  }

  #visualization.responsive > * {
    -webkit-transform: scale(0.875);
    -ms-transform: scale(0.875);
    transform: scale(0.875);
  }

  #studio-dpad-container.responsive > * {
    -webkit-transform: scale(0.875);
    -ms-transform: scale(0.875);
    transform: scale(0.875);
  }

  .karel-counter-text {
    font-size: 20px;
    stroke-width: 1.2px;
  }
}
@media screen and (min-width: 1051px) and (max-width: 1100px), screen and (min-height: 701px) and (max-height: 800px) {
  #visualization.responsive {
    max-height: 300px;
    max-width: 300px;
  }

  #visualizationColumn.responsive {
    max-width: 300px;
  }

  .small-footer-base.responsive {
    max-width: 300px;
  }

  .editor-column {
    left: 300px;
  }

  html[dir=rtl] .editor-column {
    right: 300px;
  }

  html[dir=rtl] body.readonly .editor-column {
    right: 0;
  }

  div#visualizationResizeBar {
    left: 300px;
    line-height: 300px;
  }

  html[dir=rtl] div#visualizationResizeBar {
    right: 300px;
  }

  #visualization.responsive > * {
    -webkit-transform: scale(0.75);
    -ms-transform: scale(0.75);
    transform: scale(0.75);
  }

  #studio-dpad-container.responsive > * {
    -webkit-transform: scale(0.75);
    -ms-transform: scale(0.75);
    transform: scale(0.75);
  }

  .karel-counter-text {
    font-size: 24px;
    stroke-width: 1.4px;
  }
}
@media screen and (min-width: 1001px) and (max-width: 1050px), screen and (min-height: 601px) and (max-height: 700px) {
  #visualization.responsive {
    max-height: 250px;
    max-width: 250px;
  }

  #visualizationColumn.responsive {
    max-width: 250px;
  }

  .small-footer-base.responsive {
    max-width: 250px;
  }

  .editor-column {
    left: 250px;
  }

  html[dir=rtl] .editor-column {
    right: 250px;
  }

  html[dir=rtl] body.readonly .editor-column {
    right: 0;
  }

  div#visualizationResizeBar {
    left: 250px;
    line-height: 250px;
  }

  html[dir=rtl] div#visualizationResizeBar {
    right: 250px;
  }

  #visualization.responsive > * {
    -webkit-transform: scale(0.625);
    -ms-transform: scale(0.625);
    transform: scale(0.625);
  }

  #studio-dpad-container.responsive > * {
    -webkit-transform: scale(0.625);
    -ms-transform: scale(0.625);
    transform: scale(0.625);
  }

  .karel-counter-text {
    font-size: 28px;
    stroke-width: 1.6px;
  }
}
@media screen and (max-width: 1000px), screen and (max-height: 600px) {
  #visualization.responsive {
    max-height: 200px;
    max-width: 200px;
  }

  #visualizationColumn.responsive {
    max-width: 200px;
  }

  .small-footer-base.responsive {
    max-width: 200px;
  }

  .editor-column {
    left: 200px;
  }

  html[dir=rtl] .editor-column {
    right: 200px;
  }

  html[dir=rtl] body.readonly .editor-column {
    right: 0;
  }

  div#visualizationResizeBar {
    left: 200px;
    line-height: 200px;
  }

  html[dir=rtl] div#visualizationResizeBar {
    right: 200px;
  }

  #visualization.responsive > * {
    -webkit-transform: scale(0.5);
    -ms-transform: scale(0.5);
    transform: scale(0.5);
  }

  #studio-dpad-container.responsive > * {
    -webkit-transform: scale(0.5);
    -ms-transform: scale(0.5);
    transform: scale(0.5);
  }

  .karel-counter-text {
    font-size: 32px;
    stroke-width: 2px;
  }

  #soft-buttons {
    margin: 5px 0 0 0;
  }
  #soft-buttons button {
    margin: 0 4px 0 0;
  }

  .small-footer-base.responsive small {
    float: left;
  }
}
/* Buttons */
button,
label.img-upload {
  margin: 5px;
  padding: 10px;
  border-radius: 4px;
  border: 1px solid #ddd;
  font-size: large;
  background-color: #eee;
  color: #000;
}

button.launch {
  border: 1px solid #ffa400;
  background-color: #ffa400;
  color: #fff;
  font-size: large;
  min-width: 96px;
  margin-left: 0;
  margin-right: 10px;
  /* Can't use "text-align: start" due to IE. */
  text-align: left;
}

button.launch[disabled] {
  pointer-events: none;
}

html[dir=RTL] button.launch {
  text-align: right;
}

button.launch > img {
  opacity: 1;
  vertical-align: text-bottom;
}

button.blocklyLaunch {
  display: inline-block;
  border: 1px solid #ffa400;
  background-color: #ffa400;
  padding: 7px 10px 7px 6px;
  /* Can't use "text-align: start" due to IE. */
  text-align: left;
}
button.blocklyLaunch.hide {
  display: none;
}
@media screen and (min-width: 1051px) {
  button.blocklyLaunch {
    min-width: 111px;
  }
}
button.blocklyLaunch img {
  float: left;
  margin-top: 0;
  margin-left: 6px;
}
button.blocklyLaunch div {
  text-align: left;
  margin-top: 3px;
  margin-right: 4px;
  float: right;
  padding: 0;
  margin-left: 6px;
}
@media screen and (min-width: 1051px) {
  button.blocklyLaunch div {
    min-width: 45px;
  }
}
html[dir=RTL] button.blocklyLaunch {
  margin-right: 0;
}
button.blocklyLaunch#resetButton {
  border: 1px solid #8C52BA;
  background-color: #8C52BA;
}
button.blocklyLaunch#resetButton:hover {
  background-color: #6C468A;
  border-color: #6C468A;
  box-shadow: none;
}
button.blocklyLaunch.hideText {
  width: 42px;
  height: 42px;
  min-width: 0;
  padding: 7px;
}
button.blocklyLaunch.hideText img {
  margin-left: 2px;
  margin-top: -2px;
}

button.share {
  border: 1px solid #ffa000;
  background-color: #ffa000;
  color: #fff;
  margin-left: 0;
  margin-right: 0;
}

button.share:focus {
  outline-style: none;
}

button:hover > img {
  opacity: 1;
}

button:active {
  border: 1px solid #888 !important;
}

button:hover {
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}

button.disabled,
button[disabled=disabled],
button:disabled {
  border: 1px solid #c7c7c7;
  background-color: #c7c7c7;
  box-shadow: none;
}
button.disabled:hover,
button[disabled=disabled]:hover,
button:disabled:hover {
  box-shadow: none;
}

button.disabled:hover > img {
  opacity: 0.6;
}

button.disabled {
  display: none;
}

button.notext {
  font-size: 10%;
}

label.img-upload {
  display: inline-block;
  vertical-align: middle;
}

input[type=radio] {
  margin-left: 40px;
  margin-right: 10px;
}

@media screen and (max-width: 1050px) {
  #stepButton {
    min-width: 0;
  }
}
#learn h1 {
  margin: 20px 0 0 0;
}
#learn img {
  margin-bottom: 5px;
}
#learn a {
  display: block;
}

#make-your-own-button {
  margin: 5px 0 5px 0;
}

#open-workspace {
  margin: 5px 0 5px 0;
}

#gameButtons {
  position: relative;
  margin-bottom: 10px;
  width: 100%;
  text-align: justify;
  -ms-text-justify: distribute-all-lines;
  text-justify: distribute-all-lines;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 9px;
}

#gameButtons:after {
  content: "";
  display: inline-block;
  width: 100%;
  height: 0;
  font-size: 0;
  line-height: 0;
}

#slider-cell {
  display: inline-block;
  vertical-align: top;
  touch-action: none;
  -ms-touch-action: none;
}

#slider {
  display: inline-block;
  vertical-align: middle;
}

#spinner {
  display: inline-block;
  vertical-align: middle;
}

/* Dialogs */
#help {
  padding: 0 10px;
  display: none;
}

#dialog {
  visibility: hidden;
  background-color: #fff;
  color: #000;
  border: 1px solid #000;
  position: absolute;
  border-radius: 8px;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
  padding: 10px;
  z-index: 20000;
}

#dialogBorder {
  visibility: hidden;
  position: absolute;
  background-color: #fff;
  color: #000;
  border-radius: 6px;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
}

#dialogShadow {
  height: 100%;
  width: auto;
  visibility: hidden;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #000;
  opacity: 0.3;
  z-index: 1;
}

.dialogAnimate {
  transition-property: width height left top opacity;
  transition-duration: 0.2s;
  transition-timing-function: linear;
}

.dialogHiddenContent {
  visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

#dialog button {
  min-width: 4em;
}

.feedback {
  font-family: "Figtree", "Noto Sans", "Noto Sans Math", "Noto Sans Arabic", "Noto Sans Armenian", "Noto Sans Bengali", "Noto Sans SC", "Noto Sans TC", "Noto Sans Devanagari", "Noto Sans Georgian", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans Kannada", "Noto Sans Khmer", "Noto Sans KR", "Noto Sans Myanmar", "Noto Sans Sinhala", "Noto Sans Tamil", "Noto Sans Telugu", "Noto Sans Thai", "Noto Sans Thaana", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 30px;
  margin: 20px 0 20px 0;
  line-height: 28px;
  color: #7e5ba0;
}

#show-code {
  margin-bottom: 5px;
}

#hint {
  color: #fff;
  padding: 5px 1em;
  font-size: large;
}

#puzzleRatingButtons hr {
  border-top: 2px solid #ccc;
}
#puzzleRatingButtons p {
  float: left;
  font-size: 16px;
  color: #949ca2;
  margin-right: 10px;
}
html[dir=rtl] #puzzleRatingButtons p {
  float: right;
  margin-right: 0;
  margin-left: 10px;
}
#puzzleRatingButtons svg {
  pointer-events: none;
}
#puzzleRatingButtons .puzzle-rating-btn {
  fill: #949ca2;
  padding: 0 5px;
  cursor: pointer;
  display: inline-block;
}
#puzzleRatingButtons .puzzle-rating-btn#like:hover {
  fill: #333;
}
#puzzleRatingButtons .puzzle-rating-btn#like.enabled {
  fill: #ff3014;
}
#puzzleRatingButtons .puzzle-rating-btn#like.enabled:hover {
  fill: #d62911;
}
#puzzleRatingButtons .puzzle-rating-btn#dislike:hover {
  fill: #4d4d4d;
}
#puzzleRatingButtons .puzzle-rating-btn#dislike.enabled {
  fill: #0094ca;
}
#puzzleRatingButtons .puzzle-rating-btn#dislike.enabled:hover {
  fill: #00647f;
}

/* Instructions. Not netsim-bubbles are styled in JSX */
#bubble.netsim-bubble {
  color: #000;
  margin-bottom: 10px;
  position: relative;
  cursor: pointer;
}

#prompt-table {
  display: inline-block;
  vertical-align: top;
}

.prompt-icon-cell {
  vertical-align: top;
  text-align: center;
  width: 50px;
  padding-right: 10px;
  height: auto;
  /* authored hints */
}
.prompt-icon-cell.authored_hints {
  width: 80px;
}
.prompt-icon-cell.authored_hints #prompt-icon {
  padding-top: 20px;
}
.prompt-icon-cell.authored_hints #lightbulb {
  position: absolute;
  left: 40px;
}

html[dir=RTL] .prompt-icon-cell {
  padding-right: 0;
  padding-left: 10px;
}
html[dir=RTL] .prompt-icon-cell.authored_hints #lightbulb {
  right: 40px;
  left: auto;
}

.qtip.cdo-qtips.qtip-authored-hint .qtip-content {
  font-family: "Figtree", "Noto Sans", "Noto Sans Math", "Noto Sans Arabic", "Noto Sans Armenian", "Noto Sans Bengali", "Noto Sans SC", "Noto Sans TC", "Noto Sans Devanagari", "Noto Sans Georgian", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans Kannada", "Noto Sans Khmer", "Noto Sans KR", "Noto Sans Myanmar", "Noto Sans Sinhala", "Noto Sans Tamil", "Noto Sans Telugu", "Noto Sans Thai", "Noto Sans Thaana", sans-serif;
  font-weight: 400;
  font-style: normal;
  padding: 10px 10px 0 10px;
  color: #5b6770;
}
.qtip.cdo-qtips.qtip-authored-hint .qtip-content h3 {
  font-family: "Figtree", "Noto Sans", "Noto Sans Math", "Noto Sans Arabic", "Noto Sans Armenian", "Noto Sans Bengali", "Noto Sans SC", "Noto Sans TC", "Noto Sans Devanagari", "Noto Sans Georgian", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans Kannada", "Noto Sans Khmer", "Noto Sans KR", "Noto Sans Myanmar", "Noto Sans Sinhala", "Noto Sans Tamil", "Noto Sans Telugu", "Noto Sans Thai", "Noto Sans Thaana", sans-serif;
  font-weight: 700;
  font-style: normal;
  margin-top: 0;
  font-size: 18px;
  line-height: 20px;
}

#prompt-cell {
  vertical-align: top;
}

#prompt2 {
  font-size: 12px;
  color: #5b6770;
}

.authored-hints h1,
.authored-hints p,
.authored-hints pre {
  color: #5b6770;
  font-size: 18px;
  line-height: 20px;
}
.authored-hints #hint-button {
  margin-left: 35px;
}
.authored-hints ol {
  counter-reset: list;
  margin: 0 0 35px 35px;
}
.authored-hints ol li {
  list-style: none;
  position: relative;
}
.authored-hints ol li:before {
  content: counter(list, decimal) ") ";
  counter-increment: list;
  position: absolute;
  left: -35px;
  font-size: 18px;
}

.workspace-header {
  text-align: center;
  white-space: nowrap;
  overflow-x: hidden;
  height: 30px;
  color: white;
  /* We don't want some of these styles to affect modal content. */
}
.workspace-header .workspace-header-clickable:hover {
  cursor: pointer;
  color: #ffb81d;
}
.workspace-header span {
  line-height: 30px;
}
.workspace-header .fa {
  font-size: 18px;
}
.workspace-header .ml-modal span {
  line-height: 12px;
}
.workspace-header .ml-modal .fa {
  font-size: 12px;
}
.workspace-header.is-running {
  background-color: #cfc9de;
  color: #4d575f;
}

.workspace-header-button {
  font-family: "Figtree", "Noto Sans", "Noto Sans Math", "Noto Sans Arabic", "Noto Sans Armenian", "Noto Sans Bengali", "Noto Sans SC", "Noto Sans TC", "Noto Sans Devanagari", "Noto Sans Georgian", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans Kannada", "Noto Sans Khmer", "Noto Sans KR", "Noto Sans Myanmar", "Noto Sans Sinhala", "Noto Sans Tamil", "Noto Sans Telugu", "Noto Sans Thai", "Noto Sans Thaana", sans-serif;
  font-weight: 600;
  font-style: normal;
  cursor: pointer;
  float: right;
  overflow: hidden;
  background-color: #a69bc1;
  margin-top: 3px;
  margin-bottom: 3px;
  margin-right: 3px;
  margin-left: 0;
  height: 24px;
  border-radius: 4px;
}
.workspace-header-button:hover {
  background-color: #0094ca;
}
.workspace-header-button span {
  padding: 0 12px;
  line-height: 24px;
}
.workspace-header-button .fa {
  line-height: 24px;
  padding-right: 8px;
  font-size: 15px;
}

#versions-header {
  display: none;
}

#design-headers {
  height: 30px;
  overflow-y: hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#headers #show-toolbox-icon,
#headers #hide-toolbox-icon,
.purple-header #show-toolbox-icon,
.purple-header #hide-toolbox-icon {
  position: absolute;
  top: 0;
  left: 8px;
  line-height: 30px;
  color: #cfc9de;
  cursor: pointer;
}
#headers #show-toolbox-icon:hover.fa,
#headers #hide-toolbox-icon:hover.fa,
.purple-header #show-toolbox-icon:hover.fa,
.purple-header #hide-toolbox-icon:hover.fa {
  color: #fff;
}
#headers #hide-toolbox-icon,
.purple-header #hide-toolbox-icon {
  -moz-transform: scale(-1, 1);
  -webkit-transform: scale(-1, 1);
  -o-transform: scale(-1, 1);
  -ms-transform: scale(-1, 1);
  transform: scale(-1, 1);
}
#headers #toolbox-header,
.purple-header #toolbox-header {
  width: 270px;
  border-right: 1px solid gray;
  float: left;
}
#headers #show-toolbox-header,
.purple-header #show-toolbox-header {
  border: 0;
  float: left;
  padding: 0 10px;
  cursor: pointer;
}
#headers #show-toolbox-header > span,
.purple-header #show-toolbox-header > span {
  margin: auto auto auto 18px;
}
#headers #blockCounter,
#headers #blockUsed,
.purple-header #blockCounter,
.purple-header #blockUsed {
  display: inline-block;
}
#headers #clear-puzzle-header:hover,
.purple-header #clear-puzzle-header:hover {
  background-color: #E5311A;
  color: #FFFFFF;
}
#headers .block-counter-overflow,
.purple-header .block-counter-overflow {
  color: #ffb81d;
}
#headers.is-running .block-counter-overflow,
.purple-header.is-running .block-counter-overflow {
  color: #ff8600;
}

#headers[dir=rtl] div {
  margin-right: 0;
}
#headers[dir=rtl] #show-toolbox-icon,
#headers[dir=rtl] #hide-toolbox-icon {
  left: auto;
  right: 8px;
}
#headers[dir=rtl] #show-toolbox-icon {
  -moz-transform: scale(-1, 1);
  -webkit-transform: scale(-1, 1);
  -o-transform: scale(-1, 1);
  -ms-transform: scale(-1, 1);
  transform: scale(-1, 1);
}
#headers[dir=rtl] #hide-toolbox-icon {
  -moz-transform: none;
  -webkit-transform: none;
  -o-transform: none;
  -ms-transform: none;
  transform: none;
}
#headers[dir=rtl] #toolbox-header {
  border-right: 0;
  border-left: 1px solid gray;
  float: right;
}
#headers[dir=rtl] #show-toolbox-header {
  float: right;
}
#headers[dir=rtl] .workspace-header-button {
  margin-left: 3px;
  margin-right: 0;
  float: left;
}
#headers[dir=rtl] .workspace-header-button .fa {
  padding-right: 0;
  padding-left: 8px;
}
#headers[dir=rtl] .workspace-header-button .blocks-glyph {
  -moz-transform: scale(-1, 1);
  -webkit-transform: scale(-1, 1);
  -o-transform: scale(-1, 1);
  -ms-transform: scale(-1, 1);
  transform: scale(-1, 1);
  padding-right: 0;
  padding-left: 8px;
}
#headers[dir=rtl] .show-toolbox-label {
  margin-right: 20px;
}

#showVersionsModal {
  width: 700px;
  margin-left: -350px;
}
#showVersionsModal h1 {
  border-bottom: solid 1px;
}
#showVersionsModal p {
  font-size: 14px;
  margin: 0;
}
#showVersionsModal td {
  vertical-align: middle;
}
#showVersionsModal tr.highlight {
  background-color: #ebe8f1;
}
#showVersionsModal .template-level-warning {
  font-family: "Figtree", "Noto Sans", "Noto Sans Math", "Noto Sans Arabic", "Noto Sans Armenian", "Noto Sans Bengali", "Noto Sans SC", "Noto Sans TC", "Noto Sans Devanagari", "Noto Sans Georgian", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans Kannada", "Noto Sans Khmer", "Noto Sans KR", "Noto Sans Myanmar", "Noto Sans Sinhala", "Noto Sans Tamil", "Noto Sans Telugu", "Noto Sans Thai", "Noto Sans Thaana", sans-serif;
  font-weight: 700;
  font-style: normal;
  color: #c00;
  line-height: normal;
  margin-top: 10px;
  margin-bottom: 16px;
}

.blocklyText,
.blocklyMenuText,
.blocklyTreeLabel,
.blocklyHtmlInput,
.blocklyIconMark,
.blocklyTooltipText,
.goog-menuitem-content {
  font-family: "Figtree", "Noto Sans", "Noto Sans Math", "Noto Sans Arabic", "Noto Sans Armenian", "Noto Sans Bengali", "Noto Sans SC", "Noto Sans TC", "Noto Sans Devanagari", "Noto Sans Georgian", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans Kannada", "Noto Sans Khmer", "Noto Sans KR", "Noto Sans Myanmar", "Noto Sans Sinhala", "Noto Sans Tamil", "Noto Sans Telugu", "Noto Sans Thai", "Noto Sans Thaana", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.blocklyRectangularDropdownMenu {
  border-color: rgb(84, 84, 84) !important;
}
.blocklyRectangularDropdownMenu .goog-menuitem-highlight,
.blocklyRectangularDropdownMenu .goog-menuitem-hover {
  background-color: rgba(255, 255, 255, 0.35);
}
.blocklyRectangularDropdownMenu.blocklyGridDropdownMenu {
  background-color: white;
  padding-top: 5px !important;
}
.blocklyRectangularDropdownMenu.blocklyGridDropdownMenu .goog-menuitem {
  display: inline-block;
  margin-left: 4px;
  margin-top: 4px;
}
.blocklyRectangularDropdownMenu.blocklyGridDropdownMenu .goog-menuitem-highlight,
.blocklyRectangularDropdownMenu.blocklyGridDropdownMenu .goog-menuitem-hover {
  margin: -4px -4px 0 0 !important;
}

.modal-content .show-code summary {
  font-family: "Figtree", "Noto Sans", "Noto Sans Math", "Noto Sans Arabic", "Noto Sans Armenian", "Noto Sans Bengali", "Noto Sans SC", "Noto Sans TC", "Noto Sans Devanagari", "Noto Sans Georgian", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans Kannada", "Noto Sans Khmer", "Noto Sans KR", "Noto Sans Myanmar", "Noto Sans Sinhala", "Noto Sans Tamil", "Noto Sans Telugu", "Noto Sans Thai", "Noto Sans Thaana", sans-serif;
  font-weight: 600;
  font-style: normal;
  color: #292F36;
}
.modal-content .show-code .generated-code-container {
  margin: 25px 10px 25px 0;
}
html[dir=rtl] .modal-content .show-code .generated-code-container {
  margin: 25px 0 25px 10px;
}
.modal-content.no-modal-icon .show-code .generated-code-container {
  margin-left: 0;
}

.generated-code-container {
  margin-top: 10px;
}
html[dir=rtl] .generated-code-container .generatedCodeMessage {
  text-align: right;
}
.generated-code-container .generatedCodeMessage p {
  font-size: 14px;
  line-height: inherit;
  color: #292F36;
  margin-bottom: 10px;
}
.generated-code-container .generatedCodeMessage p.caption-text {
  font-family: "Figtree", "Noto Sans", "Noto Sans Math", "Noto Sans Arabic", "Noto Sans Armenian", "Noto Sans Bengali", "Noto Sans SC", "Noto Sans TC", "Noto Sans Devanagari", "Noto Sans Georgian", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans Kannada", "Noto Sans Khmer", "Noto Sans KR", "Noto Sans Myanmar", "Noto Sans Sinhala", "Noto Sans Tamil", "Noto Sans Telugu", "Noto Sans Thai", "Noto Sans Thaana", sans-serif;
  font-weight: 600;
  font-style: normal;
}
.generated-code-container .generatedCodeMessage p a {
  font-family: "Figtree", "Noto Sans", "Noto Sans Math", "Noto Sans Arabic", "Noto Sans Armenian", "Noto Sans Bengali", "Noto Sans SC", "Noto Sans TC", "Noto Sans Devanagari", "Noto Sans Georgian", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans Kannada", "Noto Sans Khmer", "Noto Sans KR", "Noto Sans Myanmar", "Noto Sans Sinhala", "Noto Sans Tamil", "Noto Sans Telugu", "Noto Sans Thai", "Noto Sans Thaana", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #8C52BA;
  text-decoration: underline;
}
.generated-code-container .generatedCodeMessage p a:hover {
  color: #6C468A;
}
.generated-code-container .generatedCode {
  font-size: 14px;
  overflow: scroll;
  max-height: 400px;
  margin: 12px 0;
}

.light-yellow-background {
  background-color: #fff7df;
}

.white-background {
  background-color: white;
}

.arrow-container {
  background-color: white !important;
}

.arrow-container.arrow-left {
  float: left;
}

.arrow-container.arrow-right {
  float: right;
}

.arrow-head,
.arrow-text {
  float: left;
  line-height: normal;
  margin-bottom: 25px;
  cursor: pointer;
}

.arrow-right .arrow-head {
  float: right;
}

.arrow-left .arrow-head {
  margin-right: -10px;
}

.arrow-left .arrow-text {
  border-radius: 0 8px 8px 0;
  padding: 10px 14px 10px 0;
  background-color: #babf33;
}

.arrow-right .arrow-text {
  margin-right: -10px;
  border-radius: 8px 0 0 8px;
  padding: 10px 0 10px 14px;
  background-color: #fb0;
}

.arrow-text {
  color: white;
  font-size: 35px;
  margin-top: 35px;
  height: 44px;
}

#again-button:not(.arrow-container) {
  background-color: #b9bf15;
  border: 1px solid #b9bf15;
  color: white;
  margin-left: 0;
  margin-right: 10px;
  text-align: center;
}

#continue-button:not(.arrow-container),
#confirm-button:not(.arrow-container) {
  background-color: #ffa400;
  border: 1px solid #ffa400;
  color: white;
  margin-left: 0;
  margin-right: 10px;
  text-align: center;
}

.hide {
  display: none;
}

.invisible {
  visibility: hidden;
}

.hide-source #visualization {
  display: inline-block;
}
.hide-source #belowVisualization {
  display: inline-block;
  vertical-align: top;
}
.hide-source #bubble {
  display: none;
}

#sharing {
  clear: both;
  margin-top: 25px;
  font-size: 18px;
  color: #5b6770;
}
#sharing .feedback-image {
  width: 180px;
  height: 180px;
  margin: 0;
  float: left;
  border: #c6cacd;
  border-style: solid;
}
html[dir=rtl] #sharing .feedback-image {
  float: right;
}
#sharing div {
  margin: 5px 0;
}
#sharing div.sharing-content {
  margin-left: 195px;
  margin-right: 25px;
}
#sharing div.sharing-content.no-image {
  margin-left: 0;
}
html[dir=rtl] #sharing div.sharing-content.no-image {
  margin-right: 0;
}
html[dir=rtl] #sharing div.sharing-content {
  margin-right: 195px;
  margin-left: 25px;
}
#sharing label {
  margin-top: 15px;
  font-size: 16px;
}
#sharing .social-buttons a,
#sharing .social-buttons a:hover,
#sharing .social-buttons a:link,
#sharing .social-buttons a:visited {
  background-color: transparent;
  text-decoration: none;
  color: white;
}
html[dir=rtl] #sharing .social-buttons {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row-reverse;
  justify-content: flex-end;
}
#sharing button {
  background-color: #8c52ba;
  color: white;
  font-size: 14px;
  min-width: 40px;
  text-align: center;
  margin: 2px 0;
}
#sharing button .disabled, #sharing button[disabled=disabled], #sharing button:disabled {
  border: 1px solid #8c52ba;
  background-color: #c6cacd;
  box-shadow: none;
}
#sharing #send-to-phone {
  clear: both;
}
#sharing #send-to-phone-left {
  float: left;
  width: 65%;
  padding-right: 20px;
  box-sizing: border-box;
}
#sharing #send-to-phone-right {
  float: left;
  width: 35%;
  margin-bottom: 0;
}
#sharing #send-to-phone-qr-code {
  margin-bottom: 0;
}
#sharing button.saved-to-gallery {
  font-family: "Figtree", "Noto Sans", "Noto Sans Math", "Noto Sans Arabic", "Noto Sans Armenian", "Noto Sans Bengali", "Noto Sans SC", "Noto Sans TC", "Noto Sans Devanagari", "Noto Sans Georgian", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans Kannada", "Noto Sans Khmer", "Noto Sans KR", "Noto Sans Myanmar", "Noto Sans Sinhala", "Noto Sans Tamil", "Noto Sans Telugu", "Noto Sans Thai", "Noto Sans Thaana", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-style: italic;
}
#sharing #sharing-input-container {
  overflow: hidden;
}
#sharing #sharing-input {
  margin: 0;
  width: calc(100% - 70px);
  padding: 10px;
  cursor: text;
}
#sharing #sharing-dialog-copy-button {
  margin-top: 1px;
  box-sizing: border-box;
}
#sharing .sharing-dialog-copy-button-shared {
  background-color: #a69bc1;
}
#sharing #copy-button {
  max-width: 100px;
}
#sharing #sharing-phone i.fa {
  font-size: 24px;
}
#sharing input#phone {
  height: 30px;
  padding: 5px;
  margin: 5px 0;
  font-size: 20px;
  width: 10em;
  font-family: sans-serif;
}
#sharing div#phone-charges {
  font-size: 10px;
  margin-top: 0;
  color: #c00;
}

.run26 {
  width: 26px;
  height: 26px;
  background: url("assets/blockly/media/common_images/shared-sprites-26x26.png") 0px 0px;
}

.reset26 {
  width: 26px;
  height: 26px;
  background: url("assets/blockly/media/common_images/shared-sprites-26x26.png") 0px 26px;
}

#stepButton {
  margin-right: 0;
  text-align: center;
}

#share-fail-explanation {
  font-size: 20px;
}

.share-fail-excerpt .generatedCode {
  font-size: 14px;
}

body.readonly {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: transparent;
}

body.readonly #codeWorkspace {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  height: 100%;
  width: 100%;
  border: none;
}

body.readonly #codeWorkspace > svg {
  background-color: transparent;
  border: none;
}

body.readonly.embed-block #codeWorkspace .userHidden {
  display: none;
}

.tooltip-example-link,
.tooltip-choose-link,
.tooltip-code-link {
  margin-top: 5px;
  float: right;
}

.tooltip-example-link > a:hover, .tooltip-example-link > a:link, .tooltip-example-link > a:active, .tooltip-example-link > a:visited,
.tooltip-choose-link > a:hover,
.tooltip-choose-link > a:link,
.tooltip-choose-link > a:active,
.tooltip-choose-link > a:visited,
.tooltip-code-link > a:hover,
.tooltip-code-link > a:link,
.tooltip-code-link > a:active,
.tooltip-code-link > a:visited {
  font-family: "Figtree", "Noto Sans", "Noto Sans Math", "Noto Sans Arabic", "Noto Sans Armenian", "Noto Sans Bengali", "Noto Sans SC", "Noto Sans TC", "Noto Sans Devanagari", "Noto Sans Georgian", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans Kannada", "Noto Sans Khmer", "Noto Sans KR", "Noto Sans Myanmar", "Noto Sans Sinhala", "Noto Sans Tamil", "Noto Sans Telugu", "Noto Sans Thai", "Noto Sans Thaana", sans-serif;
  font-weight: 600;
  font-style: normal;
  border-bottom: 3px solid #ffb81d;
  color: white;
}

.tooltip-choose-link {
  float: left;
}

.function-name {
  font-family: "Source Code Pro", Monaco, "Bitstream Vera Sans Mono", "Lucida Console", Terminal, monospace;
  font-size: 16px;
  margin-top: 3px;
  margin-bottom: 7px;
}

.current-tooltip-parameter-name {
  border-bottom: 3px solid #ffb81d;
}

.droplet-block-tooltipster {
  border-radius: 14px;
  border: none;
  background: #0094ca;
  color: #fff;
  -webkit-box-shadow: 5px 5px 5px 0 rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 5px 5px 5px 0 rgba(0, 0, 0, 0.3);
  box-shadow: 5px 5px 5px 0 rgba(0, 0, 0, 0.3);
}

.droplet-block-tooltipster .tooltipster-content {
  font-family: "Figtree", "Noto Sans", "Noto Sans Math", "Noto Sans Arabic", "Noto Sans Armenian", "Noto Sans Bengali", "Noto Sans SC", "Noto Sans TC", "Noto Sans Devanagari", "Noto Sans Georgian", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans Kannada", "Noto Sans Khmer", "Noto Sans KR", "Noto Sans Myanmar", "Noto Sans Sinhala", "Noto Sans Tamil", "Noto Sans Telugu", "Noto Sans Thai", "Noto Sans Thaana", sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  padding: 8px 10px;
  overflow: hidden;
}

.droplet-hover-div {
  max-width: 100% !important;
}

.WireframeButtons_container {
  display: flex;
}

.WireframeButtons_containerLeft {
  flex: 1 1 372px;
  overflow: hidden;
  padding-top: 20px;
  padding-right: 20px;
}

.wrapper.withWireframeButtons {
  flex: 0 0 auto;
  margin-bottom: 0;
}

.WireframeButtons_containerRight {
  flex: 1 0 372px;
  overflow: hidden;
  padding-top: 20px;
  padding-right: 20px;
  text-align: right;
}

@media (max-width: 845px) {
  .WireframeButtons_containerRight {
    flex: 1 1 372px;
  }

  .WireframeButtons_containerLeft {
    flex: 1 1 auto;
  }
}
a.WireframeButtons_button {
  background-color: #8c52ba;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  font-size: 0.8em;
  line-height: 3;
  margin: 5px;
  padding: 8px;
  text-decoration: none;
  white-space: nowrap;
}

a.WireframeButtons_active {
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}

div.WireframeButtons_active {
  cursor: default;
  display: inline-block;
}

a.WireframeButtons_active,
div.WireframeButtons_active {
  background-color: #ebe8f1;
  border-radius: 5px;
  color: #4d575f;
  font-size: 0.8em;
  line-height: 3em;
  margin: 5px;
  padding: 8px;
}

#visualizationColumn.wireframeShare {
  background: url("assets/blockly/media/common_images/phone_wireframe.png") center center no-repeat;
  background-size: 432px 757px;
}

@media screen and (max-height: 780px) {
  .legacy-share-view div#visualizationColumn.wireframeShare {
    width: 402px !important;
    height: 602px !important;
    background-size: 402px 602px;
  }
  .legacy-share-view div#visualizationColumn.wireframeShare div#phoneFrameScreen {
    border-width: 1px;
    border-color: gray;
    top: 0;
    left: 0;
  }
}
.legacy-share-view {
  overflow: hidden;
}
.legacy-share-view.legacy-share-view-mobile {
  position: fixed;
}
.legacy-share-view #belowVisualization,
.legacy-share-view .hide-source #belowVisualization {
  display: none;
}
.legacy-share-view #visualizationColumn {
  margin: 0 auto;
}
.legacy-share-view #visualizationColumn #phoneFrameScreen {
  overflow: hidden;
}
.legacy-share-view #visualizationColumn #phoneFrameScreen #visualizationContainer {
  display: inline-block;
}
.legacy-share-view #visualizationColumn #phoneFrameScreen #visualizationContainer #visualization {
  overflow: hidden;
}
.legacy-share-view #visualizationColumn.wireframeShare {
  width: 432px !important;
  height: 757px !important;
  margin: 0 auto;
  padding: 20px 0;
  overflow: hidden;
}
.legacy-share-view #visualizationColumn.wireframeShare #phoneFrameScreen {
  position: relative;
  top: 78px;
  left: 16px;
  border: solid thin #202b34;
  background-color: #202b34;
  width: 400px;
  height: 600px;
}
.legacy-share-view #gameButtons {
  width: auto;
  padding: 4px 5%;
}
.legacy-share-view #gameButtons #right-button-cell {
  display: none;
  /* don't show Finish button in share view */
}
.legacy-share-view #gameButtons #soft-buttons button {
  margin: 5px 1px;
}
.legacy-share-view .small-footer-base {
  left: 0;
  right: 0;
  width: auto !important;
}
.legacy-share-view #more-menu,
.legacy-share-view #copyright-flyout {
  border-top: solid thin #202b34;
  left: 0;
  right: 0;
  width: auto !important;
}
.legacy-share-view .full_container {
  padding: 0;
}
.legacy-share-view .admin {
  display: none;
}

.embedded_iframe #visualizationColumn.wireframeShare {
  padding: 0;
}

#manageAssetsModal {
  width: 800px;
  margin-left: -400px;
}#debugResizeBar {
  width: 100%;
  height: 13px;
  line-height: 13px;
  color: #c6cacd;
  font-size: 24px;
  text-align: center;
  cursor: ns-resize;
  white-space: nowrap;
}

#debug-buttons {
  display: inline;
  white-space: normal;
}

.debugger_button {
  border: 1px solid #0094ca;
  background-color: #0094ca;
  color: #fff;
  margin-left: 0;
  margin-right: 3px;
  padding: 3px 6px;
  font-size: 14px;
  min-width: 120px;
}
.debugger_button:disabled {
  cursor: not-allowed;
}
.debugger_button:disabled:active {
  border: none !important;
}

#continueButton {
  border-color: #ffa400;
  background-color: #ffa400;
}

.debugger_button:focus {
  outline-style: none;
}

.debugger_button > img {
  float: left;
  opacity: 1;
}

#debug-area {
  position: absolute;
  bottom: 0;
  height: 43px;
  left: 0;
  right: 0;
  z-index: 2;
  max-height: calc(50% - 16px) !important;
}

#codeTextbox.pin_bottom {
  bottom: 43px;
}

#debug-commands-header {
  width: 270px;
  float: left;
  border-right: 1px solid gray;
}
#debug-commands-header .fa {
  margin: 0 0.25em;
}

#watchersResizeBar {
  height: 100%;
  width: 13px;
  cursor: ew-resize;
  position: absolute;
  right: 193.5px;
  z-index: 1;
  top: 13px;
}

.debug-commands,
.debug-console,
.debug-watch {
  display: block;
  background-color: #fff;
  border: 1px solid #ddd;
  position: absolute;
  top: 43px;
  bottom: 0;
}

.debug-commands {
  left: 0;
  width: 270px;
  text-align: center;
}

.debug-watch {
  right: 0;
  width: 200px;
  overflow-y: scroll;
}
.debug-watch.no-commands {
  max-width: calc(100% - 130px);
}

.debug-watch *,
.debug-watch input {
  font-family: monospace;
  font-size: 12px;
}

.debug-watch-item {
  margin: 0;
  line-height: 14px;
  clear: both;
  margin-bottom: 1px;
}
.debug-watch-item .watch-variable,
.debug-watch-item .watch-separator {
  color: purple;
}
.debug-watch-item .watch-unavailable {
  color: red;
}

.debug-console {
  left: 270px;
  right: 200px;
  min-width: 130px;
}
.debug-console.no-commands {
  left: 0;
}
.debug-console.no-watch {
  right: 0;
}

.debug-console *,
.debug-console input {
  font-family: monospace;
  font-size: 12px;
}

#slider-cell {
  float: left;
  cursor: default;
}

/* Slider. */
.sliderContainer {
  float: left;
}

.sliderTrack {
  stroke: #ebe8f1;
  stroke-width: 4px;
  stroke-linecap: round;
}

.sliderKnob {
  fill: #ddd;
  stroke: #bbc;
  stroke-width: 1px;
  stroke-linejoin: round;
}

.sliderKnob:hover {
  fill: #eee;
}

/* Sprited icons. */
.pause-btn {
  background-position: 0 -84px;
  margin-right: 3px;
}

.continue-btn {
  background-position: -21px -84px;
  margin-right: 3px;
}

.step-in-btn {
  background-position: 0 -105px;
  margin-right: 3px;
}

.step-out-btn {
  background-position: -21px -105px;
  margin-right: 3px;
}

.step-over-btn {
  background-position: 0 21px;
  margin-right: 3px;
}

#visualizationOverlay {
  position: absolute;
  top: 0;
  left: auto;
  overflow: hidden;
  outline: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  pointer-events: none;
}

#divApplab,
#designModeViz,
.draggingParent {
  overflow: hidden;
  outline: none;
  position: relative;
  z-index: 1;
  background-color: white;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
#divApplab canvas,
#designModeViz canvas,
.draggingParent canvas {
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  z-index: -1;
}
#divApplab img,
#designModeViz img,
.draggingParent img {
  opacity: 1;
  max-width: none;
}
#divApplab label,
#designModeViz label,
.draggingParent label {
  display: inline-block;
}
#divApplab div,
#designModeViz div,
.draggingParent div {
  overflow: hidden;
}
#divApplab div.textArea,
#designModeViz div.textArea,
.draggingParent div.textArea {
  overflow: auto;
  word-wrap: break-word;
  /* needed by Firefox */
  -moz-user-select: text;
}
#divApplab button,
#designModeViz button,
.draggingParent button {
  padding: 7px 12px;
  margin: 2px;
  font-size: 14px;
}
#divApplab input,
#divApplab div.textArea,
#divApplab button,
#divApplab select,
#divApplab img,
#divApplab label,
#designModeViz input,
#designModeViz div.textArea,
#designModeViz button,
#designModeViz select,
#designModeViz img,
#designModeViz label,
.draggingParent input,
.draggingParent div.textArea,
.draggingParent button,
.draggingParent select,
.draggingParent img,
.draggingParent label {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  line-height: 1.2em;
  margin: 5px;
}
#divApplab input p,
#divApplab div.textArea p,
#divApplab button p,
#divApplab select p,
#divApplab img p,
#divApplab label p,
#designModeViz input p,
#designModeViz div.textArea p,
#designModeViz button p,
#designModeViz select p,
#designModeViz img p,
#designModeViz label p,
.draggingParent input p,
.draggingParent div.textArea p,
.draggingParent button p,
.draggingParent select p,
.draggingParent img p,
.draggingParent label p {
  line-height: inherit;
}
#divApplab .chart,
#designModeViz .chart,
.draggingParent .chart {
  position: absolute;
  display: block;
  overflow: hidden;
}
#divApplab .chart .loading,
#designModeViz .chart .loading,
.draggingParent .chart .loading {
  background: url("assets/blockly/media/applab/spinner-big.gif") no-repeat center center;
}
#divApplab .design-mode-hidden,
#designModeViz .design-mode-hidden,
.draggingParent .design-mode-hidden {
  visibility: hidden;
}

#divApplab.notRunning canvas:not(#turtleCanvas),
#designModeViz canvas:not(#turtleCanvas),
.draggingParent canvas:not(#turtleCanvas) {
  background-color: #eee;
}
#divApplab.notRunning .chart,
#designModeViz .chart,
.draggingParent .chart {
  background-color: #eee;
}
#divApplab.notRunning .design-mode-hidden,
#designModeViz .design-mode-hidden,
.draggingParent .design-mode-hidden {
  visibility: visible;
  opacity: 0.3;
}

#divApplab.appModern,
#designModeViz.appModern,
.draggingParent {
  color: #333;
}
#divApplab.appModern button,
#designModeViz.appModern button,
.draggingParent button {
  border: 0;
  border-radius: 0;
}
#divApplab.appModern button:hover,
#designModeViz.appModern button:hover,
.draggingParent button:hover {
  background-image: url("assets/blockly/media/applab/brighter.png");
  box-shadow: none;
}
#divApplab.appModern button:active,
#designModeViz.appModern button:active,
.draggingParent button:active {
  background-image: url("assets/blockly/media/applab/darker.png");
  border: 0 !important;
}
#divApplab.appModern input[type=text],
#divApplab.appModern input:not([type]),
#divApplab.appModern div.textArea,
#designModeViz.appModern input[type=text],
#designModeViz.appModern input:not([type]),
#designModeViz.appModern div.textArea,
.draggingParent input[type=text],
.draggingParent input:not([type]),
.draggingParent div.textArea {
  border: 1px solid #999;
  padding: 5px;
  /* padding clips text in text inputs in Firefox */
}
#divApplab.appModern select,
#designModeViz.appModern select,
.draggingParent select {
  -webkit-appearance: none;
  -moz-appearance: none;
  border: 0;
  border-radius: 0;
  padding: 0 30px 0 10px;
  color: #fff;
  background-position: right 10px center;
  background-repeat: no-repeat;
  background-size: auto 50%;
  padding-right: 0\9 ;
  background-color: transparent\9 ;
}
#divApplab.appModern select::-ms-expand,
#designModeViz.appModern select::-ms-expand,
.draggingParent select::-ms-expand {
  display: none;
}
#divApplab.appModern select:hover,
#designModeViz.appModern select:hover,
.draggingParent select:hover {
  opacity: 0.8;
}
#divApplab.appModern button,
#divApplab.appModern select,
#divApplab.appModern input,
#divApplab.appModern .textArea,
#designModeViz.appModern button,
#designModeViz.appModern select,
#designModeViz.appModern input,
#designModeViz.appModern .textArea,
.draggingParent button,
.draggingParent select,
.draggingParent input,
.draggingParent .textArea {
  outline: 0;
}
#divApplab.appModern img[data-canonical-image-url=""],
#designModeViz.appModern img[data-canonical-image-url=""],
.draggingParent img[data-canonical-image-url=""] {
  display: none;
}
#divApplab.appModern .screen,
#designModeViz.appModern .screen,
.draggingParent .screen {
  outline: 0;
}

/* stylelint-disable */
_:-ms-fullscreen select,
:root #divApplab.appModern select,
#designModeViz.appModern select,
.draggingParent select {
  background-position-x: right -35px;
}

/* stylelint-enable */
#divApplab.notRunning img[data-canonical-image-url=""],
#divApplab.notRunning canvas:not(#turtleCanvas),
#divApplab.notRunning .chart,
#designModeViz.appModern img[data-canonical-image-url=""],
#designModeViz.appModern canvas:not(#turtleCanvas),
#designModeViz.appModern .chart,
.draggingParent img[data-canonical-image-url=""],
.draggingParent canvas:not(#turtleCanvas),
.draggingParent .chart {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  outline: 1px solid #bdc3c7;
  outline-offset: -1px;
}
#divApplab.notRunning img[data-canonical-image-url=""],
#designModeViz.appModern img[data-canonical-image-url=""],
.draggingParent img[data-canonical-image-url=""] {
  display: block;
  background: #bdc3c7 url("assets/blockly/media/applab/placeholder_img.png") center center no-repeat !important;
}
#divApplab.notRunning canvas:not(#turtleCanvas),
#designModeViz.appModern canvas:not(#turtleCanvas),
.draggingParent canvas:not(#turtleCanvas) {
  background: #bdc3c7 url("assets/blockly/media/applab/placeholder_canvas.png") center center no-repeat;
}
#divApplab.notRunning .chart,
#designModeViz.appModern .chart,
.draggingParent .chart {
  background: #bdc3c7 url("assets/blockly/media/applab/placeholder_chart.png") center center no-repeat;
}

div#visualization {
  height: 562.5px;
  width: 400px;
}

div#visualization.with_padding {
  border: 1px solid #ddd;
}

div#visualizationResizeBar {
  top: 30px;
}

#playSpaceHeader > div {
  height: 30px;
}

/*
 * Shrink the visualization area on small displays.
 *
 * Above 1150px, the play space is 400px wide. Between 1150px and 950px, the
 * play space width responsively decreases by 50px as the window width is
 * reduced by 50px. The scale factor and the play space height are scaled down
 * so as to preserve the aspect ratio.
 *
 * Vertical responsiveness causes the playspace width to grow and shrink by the
 * same increments. min-height and max-height breakpoints are chosen
 * experimentally to keep about the same amount of space below the phone frame
 * throughout the responsive range.
 */
@media screen and (min-width: 1151px), screen and (min-height: 849px) {
  div#visualization.responsive {
    max-height: 562.5px;
    max-width: 400px;
  }

  div#visualizationColumn.responsive {
    max-width: 400px;
  }

  div#visualizationColumn.responsive.with_padding {
    max-width: 402px;
  }

  .small-footer-base.responsive {
    max-width: 400px;
  }

  div.editor-column {
    left: 400px;
  }

  html[dir=rtl] div.editor-column {
    right: 400px;
  }

  div#visualizationResizeBar {
    left: 400px;
    line-height: 562.5px;
  }

  html[dir=rtl] div#visualizationResizeBar {
    right: 400px;
  }

  div#visualization.responsive > * {
    -webkit-transform: scale(1.25);
    -ms-transform: scale(1.25);
    transform: scale(1.25);
  }
}
@media screen and (min-width: 1101px) and (max-width: 1150px), screen and (min-height: 777px) and (max-height: 848px) {
  div#visualization.responsive {
    max-height: 492.1875px;
    max-width: 350px;
  }

  div#visualizationColumn.responsive {
    max-width: 350px;
  }

  div#visualizationColumn.responsive.with_padding {
    max-width: 352px;
  }

  .small-footer-base.responsive {
    max-width: 350px;
  }

  div.editor-column {
    left: 350px;
  }

  html[dir=rtl] div.editor-column {
    right: 350px;
  }

  div#visualizationResizeBar {
    left: 350px;
    line-height: 492.1875px;
  }

  html[dir=rtl] div#visualizationResizeBar {
    right: 350px;
  }

  div#visualization.responsive > * {
    -webkit-transform: scale(1.09375);
    -ms-transform: scale(1.09375);
    transform: scale(1.09375);
  }
}
@media screen and (min-width: 1051px) and (max-width: 1100px), screen and (min-height: 708px) and (max-height: 778px) {
  div#visualization.responsive {
    max-height: 421.875px;
    max-width: 300px;
  }

  div#visualizationColumn.responsive {
    max-width: 300px;
  }

  div#visualizationColumn.responsive.with_padding {
    max-width: 302px;
  }

  .small-footer-base.responsive {
    max-width: 300px;
  }

  div.editor-column {
    left: 300px;
  }

  html[dir=rtl] div.editor-column {
    right: 300px;
  }

  div#visualizationResizeBar {
    left: 300px;
    line-height: 421.875px;
  }

  html[dir=rtl] div#visualizationResizeBar {
    right: 300px;
  }

  div#visualization.responsive > * {
    -webkit-transform: scale(0.9375);
    -ms-transform: scale(0.9375);
    transform: scale(0.9375);
  }
}
@media screen and (min-width: 1001px) and (max-width: 1050px), screen and (min-height: 638px) and (max-height: 707px) {
  div#visualization.responsive {
    max-height: 351.5625px;
    max-width: 250px;
  }

  div#visualizationColumn.responsive {
    max-width: 250px;
  }

  div#visualizationColumn.responsive.with_padding {
    max-width: 252px;
  }

  .small-footer-base.responsive {
    max-width: 250px;
  }

  div.editor-column {
    left: 250px;
  }

  html[dir=rtl] div.editor-column {
    right: 250px;
  }

  div#visualizationResizeBar {
    left: 250px;
    line-height: 351.5625px;
  }

  html[dir=rtl] div#visualizationResizeBar {
    right: 250px;
  }

  div#visualization.responsive > * {
    -webkit-transform: scale(0.78125);
    -ms-transform: scale(0.78125);
    transform: scale(0.78125);
  }
}
@media screen and (max-width: 1000px), screen and (max-height: 637px) {
  div#visualization.responsive {
    max-height: 281.25px;
    max-width: 200px;
  }

  div#visualizationColumn.responsive {
    max-width: 200px;
  }

  div#visualizationColumn.responsive.with_padding {
    max-width: 202px;
  }

  .small-footer-base.responsive {
    max-width: 200px;
  }

  div.editor-column {
    left: 200px;
  }

  html[dir=rtl] div.editor-column {
    right: 200px;
  }

  div#visualizationResizeBar {
    left: 200px;
    line-height: 281.25px;
  }

  html[dir=rtl] div#visualizationResizeBar {
    right: 200px;
  }

  div#visualization.responsive > * {
    -webkit-transform: scale(0.625);
    -ms-transform: scale(0.625);
    transform: scale(0.625);
  }
}
#visualizationColumn.wireframeShare {
  max-width: none !important;
  width: 352px;
  height: 612px;
  margin: 0 auto;
  padding: 20px 0;
  background-size: initial;
}
#visualizationColumn.wireframeShare #playSpaceHeader,
#visualizationColumn.wireframeShare #gameButtons {
  display: none;
}
#visualizationColumn.wireframeShare #phoneFrameScreen {
  width: 320px;
  height: 480px;
}
#visualizationColumn.wireframeShare #visualization {
  top: 68px;
  left: 16px;
  border: 0;
}

#visualizationColumn.chromelessShare #playSpaceHeader,
#visualizationColumn.chromelessShare #gameButtons {
  display: none;
}

#visualizationColumn.widgetWidth,
#visualization.widgetWidth {
  width: 600px;
  max-width: 600px;
}
#visualizationColumn.widgetHeight,
#visualization.widgetHeight {
  height: 450px;
  max-height: 450px;
}

#divApplab,
#designModeViz {
  outline: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#divApplab {
  position: relative;
  z-index: 1;
  background-color: white;
}
#divApplab label,
#divApplab input,
#divApplab button,
#divApplab select,
#divApplab textarea {
  font-size: 14px;
}
#divApplab select {
  height: 30px;
  width: 220px;
}
#divApplab button,
#divApplab input,
#divApplab select,
#divApplab textarea {
  vertical-align: middle;
}

#designModeViz {
  overflow: visible;
  /* In design mode, show grab/grabbing cursor for all UI elements
  * so that they look draggable. */
}
#designModeViz.clip-content {
  overflow: hidden;
}
#designModeViz .screen {
  overflow: visible;
}
#designModeViz button,
#designModeViz label,
#designModeViz select,
#designModeViz input,
#designModeViz img,
#designModeViz div.chart,
#designModeViz canvas,
#designModeViz div[contenteditable=true] {
  cursor: move;
  /* fallback if grab cursor is unsupported */
  cursor: grab;
  cursor: -moz-grab;
  cursor: -webkit-grab;
}
#designModeViz button:active,
#designModeViz label:active,
#designModeViz select:active,
#designModeViz input:active,
#designModeViz img:active,
#designModeViz div.chart:active,
#designModeViz canvas:active,
#designModeViz div[contenteditable=true]:active {
  cursor: grabbing;
  cursor: -moz-grabbing;
  cursor: -webkit-grabbing;
}
#designModeViz button.toDelete,
#designModeViz label.toDelete,
#designModeViz select.toDelete,
#designModeViz input.toDelete,
#designModeViz img.toDelete,
#designModeViz div.chart.toDelete,
#designModeViz canvas.toDelete,
#designModeViz div[contenteditable=true].toDelete {
  opacity: 0.5;
}
#designModeViz.withCrosshair {
  cursor: crosshair;
}

#visualizationOverlay {
  z-index: 3;
}

#divApplab canvas,
#designModeViz canvas {
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  z-index: -1;
}

#divApplab.running label {
  cursor: default;
}

/* When not running, show default arrow cursor for all UI elements
   so that they do not look active. */
#divApplab.notRunning button,
#divApplab.notRunning label,
#divApplab.notRunning select,
#divApplab.notRunning input,
#divApplab.notRunning img,
#divApplab.notRunning div.chart,
#divApplab.notRunning canvas,
#divApplab.notRunning div[contenteditable=true] {
  cursor: default;
}

#divApplab.notRunning.withCrosshair {
  cursor: crosshair;
}
#divApplab.notRunning.withCrosshair button,
#divApplab.notRunning.withCrosshair label,
#divApplab.notRunning.withCrosshair select,
#divApplab.notRunning.withCrosshair input,
#divApplab.notRunning.withCrosshair img,
#divApplab.notRunning.withCrosshair div.chart,
#divApplab.notRunning.withCrosshair canvas,
#divApplab.notRunning.withCrosshair div[contenteditable=true] {
  cursor: crosshair;
}

#visualizationResizeBar {
  margin-left: 2px;
  width: 13px;
}

#runButton,
#resetButton {
  margin-right: 0;
  outline-style: none;
}

/* Sprited icons. */
.icon21 {
  height: 21px;
  width: 21px;
  background-image: url("assets/blockly/media/applab/icons.png");
  background-size: 42px 147px;
  margin-bottom: -3px;
}

.code {
  background-position: -21px 0;
}

.link {
  background-position: 0 0;
}

.run {
  background-position: 0 -21px;
  margin-right: 3px;
}

.stop {
  background-position: -21px -21px;
  margin-right: 3px;
}

.left-btn {
  background-position: -21px -42px;
  margin-right: 3px;
}

.right-btn {
  background-position: -21px -63px;
  margin-right: 3px;
}

.up-btn {
  background-position: 0 -63px;
  margin-right: 3px;
}

.down-btn {
  background-position: 0 -42px;
  margin-right: 3px;
}

#share-cell {
  display: inline-block;
  vertical-align: top;
}
#share-cell.share-cell-none {
  display: none;
}

#submitButton {
  border-color: #8c52ba;
  background-color: #8c52ba;
  color: white;
}

#unsubmitButton {
  border-color: #a69bc1;
  background-color: #a69bc1;
  color: white;
}

.assetRow {
  border-bottom: 1px solid #999;
}

.assetRow:last-child {
  border-bottom: none;
}

.assetRow:hover {
  background: #cfc9de;
}

.no-outline:focus {
  outline: none;
}

.justify-contents {
  text-align: justify;
  line-height: 0;
}
.justify-contents:after {
  content: "";
  width: 100%;
  display: inline-block;
}

.rightalign-contents {
  text-align: right;
  line-height: 0;
}
.rightalign-contents:after {
  content: "";
  width: 100%;
  display: inline-block;
}

.hover-pointer:hover {
  cursor: pointer;
}

.chooseAssetDropdownOption {
  color: #0596ce;
  text-decoration: underline;
}

*[contenteditable] {
  -webkit-user-select: auto !important;
}

.inline-flex {
  /* PhantomJS 2.1.3 requires this vendor-specific prefix, which
   * Radium 0.18.1 does not automatically apply. */
  display: -webkit-inline-flex;
  display: inline-flex;
}

.flex {
  /* PhantomJS 2.1.3 requires this vendor-specific prefix, which
   * Radium 0.18.1 does not automatically apply. */
  display: -webkit-flex;
  display: flex;
}

.design-element-image {
  width: 72px;
}

/* stylelint-disable */
.rainbow-gradient {
  background: -webkit-linear-gradient(to bottom right, red, orange, yellow, green, blue);
  /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(to bottom right, red, orange, yellow, green, blue);
  /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(to bottom right, red, orange, yellow, green, blue);
  /* For Firefox 3.6 to 15 */
  background: linear-gradient(to bottom right, red, orange, yellow, green, blue);
  /* Standard syntax */
}

/* stylelint-enable */
#divApplab img#turtleImage {
  position: absolute;
  height: 24px;
  width: 24px;
  margin: 0;
}

/*
 * Reposition the bottom and right click targets to keep them from overlapping with
 * the bottom-right resize handle. Also increase the effective size of the bottom and
 * right click targets by making them overlap more with the wrapper.
 */
#designModeViz .ui-resizable-e {
  height: calc(100% - 12px);
  right: 0;
}

#designModeViz .ui-resizable-s {
  width: calc(100% - 12px);
  bottom: 0;
}

.theme-dropdown .Select-value {
  height: 44px;
}
.theme-dropdown .Select-value .theme-dropdown-label img {
  width: 36px;
  height: 36px;
}
.theme-dropdown .Select-value-label .checkbox {
  visibility: hidden;
}
.theme-dropdown .Select-menu,
.theme-dropdown .Select-menu-outer {
  height: 70vh;
  max-height: 70vh;
  border-bottom: 1px solid #ccc;
  border-radius: 4px;
  text-align: center;
}
.theme-dropdown .Select-control {
  height: 44px;
}
.theme-dropdown .form-control .Select-arrow-zone {
  display: table-cell !important;
}