/* BASICS */
.CodeMirror {
  /* Set height, width, borders, and global font properties here */
  font-family: monospace;
  height: 300px;
  color: black;
  direction: ltr; }

/* PADDING */
.CodeMirror-lines {
  padding: 4px 0;
  /* Vertical padding around content */ }

.CodeMirror pre {
  padding: 0 4px;
  /* Horizontal padding of content */ }

.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
  background-color: white;
  /* The little square between H and V scrollbars */ }

/* GUTTER */
.CodeMirror-gutters {
  border-right: 1px solid #ddd;
  background-color: #f7f7f7;
  white-space: nowrap; }

.CodeMirror-linenumber {
  padding: 0 3px 0 5px;
  min-width: 20px;
  text-align: right;
  color: #999;
  white-space: nowrap; }

.CodeMirror-guttermarker {
  color: black; }

.CodeMirror-guttermarker-subtle {
  color: #999; }

/* CURSOR */
.CodeMirror-cursor {
  border-left: 1px solid black;
  border-right: none;
  width: 0; }

/* Shown when moving in bi-directional text */
.CodeMirror div.CodeMirror-secondarycursor {
  border-left: 1px solid silver; }

.cm-fat-cursor .CodeMirror-cursor {
  width: auto;
  border: 0 !important;
  background: #7e7; }

.cm-fat-cursor div.CodeMirror-cursors {
  z-index: 1; }

.cm-fat-cursor-mark {
  background-color: rgba(20, 255, 20, 0.5);
  -webkit-animation: blink 1.06s steps(1) infinite;
  -moz-animation: blink 1.06s steps(1) infinite;
  animation: blink 1.06s steps(1) infinite; }

.cm-animate-fat-cursor {
  width: auto;
  border: 0;
  -webkit-animation: blink 1.06s steps(1) infinite;
  -moz-animation: blink 1.06s steps(1) infinite;
  animation: blink 1.06s steps(1) infinite;
  background-color: #7e7; }

@-moz-keyframes blink {
  0% { }
  50% {
    background-color: transparent; }
  100% { } }

@-webkit-keyframes blink {
  0% { }
  50% {
    background-color: transparent; }
  100% { } }

@keyframes blink {
  0% { }
  50% {
    background-color: transparent; }
  100% { } }

/* Can style cursor different in overwrite (non-insert) mode */
.cm-tab {
  display: inline-block;
  text-decoration: inherit; }

.CodeMirror-rulers {
  position: absolute;
  left: 0;
  right: 0;
  top: -50px;
  bottom: -20px;
  overflow: hidden; }

.CodeMirror-ruler {
  border-left: 1px solid #ccc;
  top: 0;
  bottom: 0;
  position: absolute; }

/* DEFAULT THEME */
.cm-s-default .cm-header {
  color: blue; }

.cm-s-default .cm-quote {
  color: #090; }

.cm-negative {
  color: #d44; }

.cm-positive {
  color: #292; }

.cm-header, .cm-strong {
  font-weight: bold; }

.cm-em {
  font-style: italic; }

.cm-link {
  text-decoration: underline; }

.cm-strikethrough {
  text-decoration: line-through; }

.cm-s-default .cm-keyword {
  color: #708; }

.cm-s-default .cm-atom {
  color: #219; }

.cm-s-default .cm-number {
  color: #164; }

.cm-s-default .cm-def {
  color: #00f; }

.cm-s-default .cm-variable-2 {
  color: #05a; }

.cm-s-default .cm-variable-3, .cm-s-default .cm-type {
  color: #085; }

.cm-s-default .cm-comment {
  color: #999; }

.cm-s-default .cm-string {
  color: #a11; }

.cm-s-default .cm-string-2 {
  color: #f50; }

.cm-s-default .cm-meta {
  color: #555; }

.cm-s-default .cm-qualifier {
  color: #555; }

.cm-s-default .cm-builtin {
  color: #30a; }

.cm-s-default .cm-bracket {
  color: #997; }

.cm-s-default .cm-tag {
  color: #170; }

.cm-s-default .cm-attribute {
  color: #00c; }

.cm-s-default .cm-hr {
  color: #999; }

.cm-s-default .cm-link {
  color: #00c; }

.cm-s-default .cm-error {
  color: #f00; }

.cm-invalidchar {
  color: #f00; }

.CodeMirror-composing {
  border-bottom: 2px solid; }

/* Default styles for common addons */
div.CodeMirror span.CodeMirror-matchingbracket {
  color: #0b0; }

div.CodeMirror span.CodeMirror-nonmatchingbracket {
  color: #a22; }

.CodeMirror-matchingtag {
  background: rgba(255, 150, 0, 0.3); }

.CodeMirror-activeline-background {
  background: #e8f2ff; }

/* STOP */
/* The rest of this file contains styles related to the mechanics of
   the editor. You probably shouldn't touch them. */
.CodeMirror {
  position: relative;
  overflow: hidden;
  background: white; }

.CodeMirror-scroll {
  overflow: scroll !important;
  /* Things will break if this is overridden */
  /* 30px is the magic margin used to hide the element's real scrollbars */
  /* See overflow: hidden in .CodeMirror */
  margin-bottom: -30px;
  margin-right: -30px;
  padding-bottom: 30px;
  height: 100%;
  outline: none;
  /* Prevent dragging from highlighting the element */
  position: relative; }

.CodeMirror-sizer {
  position: relative;
  border-right: 30px solid transparent; }

/* The fake, visible scrollbars. Used to force redraw during scrolling
   before actual scrolling happens, thus preventing shaking and
   flickering artifacts. */
.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
  position: absolute;
  z-index: 6;
  display: none; }

.CodeMirror-vscrollbar {
  right: 0;
  top: 0;
  overflow-x: hidden;
  overflow-y: scroll; }

.CodeMirror-hscrollbar {
  bottom: 0;
  left: 0;
  overflow-y: hidden;
  overflow-x: scroll; }

.CodeMirror-scrollbar-filler {
  right: 0;
  bottom: 0; }

.CodeMirror-gutter-filler {
  left: 0;
  bottom: 0; }

.CodeMirror-gutters {
  position: absolute;
  left: 0;
  top: 0;
  min-height: 100%;
  z-index: 3; }

.CodeMirror-gutter {
  white-space: normal;
  height: 100%;
  display: inline-block;
  vertical-align: top;
  margin-bottom: -30px; }

.CodeMirror-gutter-wrapper {
  position: absolute;
  z-index: 4;
  background: none !important;
  border: none !important; }

.CodeMirror-gutter-background {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 4; }

.CodeMirror-gutter-elt {
  position: absolute;
  cursor: default;
  z-index: 4; }

.CodeMirror-gutter-wrapper ::selection {
  background-color: transparent; }

.CodeMirror-gutter-wrapper ::-moz-selection {
  background-color: transparent; }

.CodeMirror-lines {
  cursor: text;
  min-height: 1px;
  /* prevents collapsing before first draw */ }

.CodeMirror pre {
  /* Reset some styles that the rest of the page might have set */
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0;
  border-width: 0;
  background: transparent;
  font-family: inherit;
  font-size: inherit;
  margin: 0;
  white-space: pre;
  word-wrap: normal;
  line-height: inherit;
  color: inherit;
  z-index: 2;
  position: relative;
  overflow: visible;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-variant-ligatures: contextual;
  font-variant-ligatures: contextual; }

.CodeMirror-wrap pre {
  word-wrap: break-word;
  white-space: pre-wrap;
  word-break: normal; }

.CodeMirror-linebackground {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 0; }

.CodeMirror-linewidget {
  position: relative;
  z-index: 2;
  padding: 0.1px;
  /* Force widget margins to stay inside of the container */ }

.CodeMirror-rtl pre {
  direction: rtl; }

.CodeMirror-code {
  outline: none; }

/* Force content-box sizing for the elements where we expect it */
.CodeMirror-scroll,
.CodeMirror-sizer,
.CodeMirror-gutter,
.CodeMirror-gutters,
.CodeMirror-linenumber {
  -moz-box-sizing: content-box;
  box-sizing: content-box; }

.CodeMirror-measure {
  position: absolute;
  width: 100%;
  height: 0;
  overflow: hidden;
  visibility: hidden; }

.CodeMirror-cursor {
  position: absolute;
  pointer-events: none; }

.CodeMirror-measure pre {
  position: static; }

div.CodeMirror-cursors {
  visibility: hidden;
  position: relative;
  z-index: 3; }

div.CodeMirror-dragcursors {
  visibility: visible; }

.CodeMirror-focused div.CodeMirror-cursors {
  visibility: visible; }

.CodeMirror-selected {
  background: #d9d9d9; }

.CodeMirror-focused .CodeMirror-selected {
  background: #d7d4f0; }

.CodeMirror-crosshair {
  cursor: crosshair; }

.CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection {
  background: #d7d4f0; }

.CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection {
  background: #d7d4f0; }

.cm-searching {
  background-color: #ffa;
  background-color: rgba(255, 255, 0, 0.4); }

/* Used to force a border model for a node */
.cm-force-border {
  padding-right: .1px; }

@media print {
  /* Hide the cursor when printing */
  .CodeMirror div.CodeMirror-cursors {
    visibility: hidden; } }

/* See issue #2901 */
.cm-tab-wrap-hack:after {
  content: ''; }

/* Help users use markselection to safely style text background */
span.CodeMirror-selectedtext {
  background: none; }

@font-face {
  font-display: swap;
  font-family: 'Palanquin';
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/Palanquin-Regular.eot");
  src: url("../fonts/Palanquin-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/Palanquin-Regular.woff2") format("woff2"), url("../fonts/Palanquin-Regular.woff") format("woff"), url("../fonts/Palanquin-Regular.ttf") format("truetype"), url("../fonts/Palanquin-Regular.svg#Palanquin-Regular") format("svg"); }

@font-face {
  font-display: swap;
  font-family: 'Palanquin';
  font-style: normal;
  font-weight: 300;
  src: url("../fonts/Palanquin-Thin.eot");
  src: url("../fonts/Palanquin-Thin.eot?#iefix") format("embedded-opentype"), url("../fonts/Palanquin-Thin.woff2") format("woff2"), url("../fonts/Palanquin-Thin.woff") format("woff"), url("../fonts/Palanquin-Thin.ttf") format("truetype"), url("../fonts/Palanquin-Thin.svg#Palanquin-Thin") format("svg"); }

@font-face {
  font-display: swap;
  font-family: 'Palanquin';
  font-style: normal;
  font-weight: 500;
  src: url("../fonts/Palanquin-Medium.eot");
  src: url("../fonts/Palanquin-Medium.eot?#iefix") format("embedded-opentype"), url("../fonts/Palanquin-Medium.woff2") format("woff2"), url("../fonts/Palanquin-Medium.woff") format("woff"), url("../fonts/Palanquin-Medium.ttf") format("truetype"), url("../fonts/Palanquin-Medium.svg#Palanquin-Medium") format("svg"); }

@font-face {
  font-display: swap;
  font-family: 'Palanquin';
  font-style: normal;
  font-weight: 600;
  src: url("../fonts/Palanquin-SemiBold.eot");
  src: url("../fonts/Palanquin-SemiBold.eot?#iefix") format("embedded-opentype"), url("../fonts/Palanquin-SemiBold.woff2") format("woff2"), url("../fonts/Palanquin-SemiBold.woff") format("woff"), url("../fonts/Palanquin-SemiBold.ttf") format("truetype"), url("../fonts/Palanquin-SemiBold.svg#Palanquin-SemiBold") format("svg"); }

@font-face {
  font-display: swap;
  font-family: 'Palanquin';
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/Palanquin-Bold.eot");
  src: url("../fonts/Palanquin-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/Palanquin-Bold.woff2") format("woff2"), url("../fonts/Palanquin-Bold.woff") format("woff"), url("../fonts/Palanquin-Bold.ttf") format("truetype"), url("../fonts/Palanquin-Bold.svg#Palanquin-Bold") format("svg"); }

@font-face {
  font-display: swap;
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/SourceCodePro-Regular.eot");
  src: url("../fonts/SourceCodePro-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/SourceCodePro-Regular.woff") format("woff"); }

@font-face {
  font-display: swap;
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 500;
  src: url("../fonts/SourceCodePro-Medium.eot");
  src: url("../fonts/SourceCodePro-Medium.eot?#iefix") format("embedded-opentype"), url("../fonts/SourceCodePro-Medium.woff") format("woff"); }

@font-face {
  font-display: swap;
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 600;
  src: url("../fonts/SourceCodePro-Semibold.eot");
  src: url("../fonts/SourceCodePro-Semibold.eot?#iefix") format("embedded-opentype"), url("../fonts/SourceCodePro-Semibold.woff") format("woff"); }

@font-face {
  font-display: swap;
  font-family: 'icomoon';
  font-style: normal;
  font-weight: normal;
  src: url("../fonts/icomoon.eot?aimuzj");
  src: url("../fonts/icomoon.eot?aimuzj#iefix") format("embedded-opentype"), url("../fonts/icomoon.woff?aimuzj") format("woff"); }

[class^="icon-"], [class*=" icon-"] {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-family: 'icomoon' !important;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  speak: none;
  text-transform: none; }

.icon-alert-circle::before {
  content: '\e90e'; }

.icon-arrow-down::before {
  content: '\e90f'; }

.icon-arrow-down-circle::before {
  content: '\e910'; }

.icon-arrow-left::before {
  content: '\e911'; }

.icon-arrow-left-circle::before {
  content: '\e912'; }

.icon-arrow-right::before {
  content: '\e913'; }

.icon-arrow-right-circle::before {
  content: '\e914'; }

.icon-arrow-up::before {
  content: '\e915'; }

.icon-arrow-up-circle::before {
  content: '\e916'; }

.icon-at-sign::before {
  content: '\e900'; }

.icon-bell::before {
  content: '\e917'; }

.icon-chevron-down::before {
  content: '\e901'; }

.icon-chevron-left::before {
  content: '\e902'; }

.icon-chevron-right::before {
  content: '\e903'; }

.icon-chevron-up::before {
  content: '\e904'; }

.icon-chevrons-down::before {
  content: '\e918'; }

.icon-chevrons-left::before {
  content: '\e919'; }

.icon-chevrons-right::before {
  content: '\e91a'; }

.icon-chevrons-up::before {
  content: '\e91b'; }

.icon-external-link::before {
  content: '\e905'; }

.icon-github::before {
  content: '\e906'; }

.icon-gitlab::before {
  content: '\e907'; }

.icon-heart::before {
  content: '\e908'; }

.icon-info::before {
  content: '\e909'; }

.icon-map-pin::before {
  content: '\e90a'; }

.icon-message-circle::before {
  content: '\e90b'; }

.icon-slack::before {
  content: '\e90c'; }

.icon-twitter::before {
  content: '\e90d'; }

@-webkit-keyframes pulse {
  25% {
    -webkit-transform: scale(1.02); }
  75% {
    -webkit-transform: scale(0.98); } }

@keyframes pulse {
  25% {
    transform: scale(1.02); }
  75% {
    transform: scale(0.98); } }

@-webkit-keyframes big-pulse {
  25% {
    -webkit-transform: scale(1.1); }
  75% {
    -webkit-transform: scale(0.9); } }

@keyframes big-pulse {
  25% {
    transform: scale(1.1); }
  75% {
    transform: scale(0.9); } }

@-webkit-keyframes heartbeat {
  0% {
    -webkit-transform: scale(0.7); }
  20% {
    -webkit-transform: scale(0.7); }
  50% {
    -webkit-transform: scale(0.8); }
  80% {
    -webkit-transform: scale(0.7); }
  100% {
    -webkit-transform: scale(0.7); } }

@keyframes heartbeat {
  0% {
    transform: scale(0.7); }
  20% {
    transform: scale(0.7); }
  50% {
    transform: scale(0.8); }
  80% {
    transform: scale(0.7); }
  100% {
    transform: scale(0.7); } }

@-webkit-keyframes rotating {
  0% {
    -webkit-transform: rotate(0deg); }
  50% {
    -webkit-transform: rotate(180deg); }
  100% {
    -webkit-transform: rotate(360deg); } }

@keyframes rotating {
  0% {
    transform: rotate(0deg); }
  50% {
    transform: rotate(180deg); }
  100% {
    transform: rotate(360deg); } }

@-webkit-keyframes fade-in-top {
  from {
    -webkit-transform: translateY(-15px);
    opacity: 0; }
  to {
    -webkit-transform: translateY(0);
    opacity: 1; } }

@keyframes fade-in-top {
  from {
    -webkit-transform: translateY(-15px);
    opacity: 0;
    transform: translateY(-15px); }
  to {
    -webkit-transform: translateY(0);
    opacity: 1;
    transform: translateY(0); } }

@-webkit-keyframes fade-in-left {
  from {
    -webkit-transform: translateX(-15px);
    opacity: 0; }
  to {
    -webkit-transform: translateX(0);
    opacity: 1; } }

@keyframes fade-in-left {
  from {
    -webkit-transform: translateX(-15px);
    opacity: 0;
    transform: translateX(-15px); }
  to {
    -webkit-transform: translateX(0);
    opacity: 1;
    transform: translateX(0); } }

@-webkit-keyframes fade-in {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

@keyframes fade-in {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

@-webkit-keyframes sk-bouncedelay {
  0%,
  80%,
  100% {
    -webkit-transform: scale(0); }
  40% {
    -webkit-transform: scale(1); } }

@keyframes sk-bouncedelay {
  0%,
  80%,
  100% {
    -webkit-transform: scale(0);
    transform: scale(0); }
  40% {
    -webkit-transform: scale(1);
    transform: scale(1); } }

@keyframes float {
  0% {
    transform: translatey(0); }
  50% {
    transform: translatey(-10px); }
  100% {
    transform: translatey(0); } }

@keyframes float-invert {
  0% {
    transform: translatey(0); }
  50% {
    transform: translatey(10px); }
  100% {
    transform: translatey(0); } }

@keyframes bounce-right {
  0% {
    transform: translateX(0); }
  50% {
    transform: translateX(6px); }
  100% {
    transform: translateX(0); } }

/*
  MDN-LIKE Theme - Mozilla
  Ported to CodeMirror by Peter Kroon <plakroon@gmail.com>
  Report bugs/issues here: https://github.com/codemirror/CodeMirror/issues
  GitHub: @peterkroon

  The mdn-like theme is inspired on the displayed code examples at: https://developer.mozilla.org/en-US/docs/Web/CSS/animation

*/
.cm-s-mdn-like.CodeMirror {
  color: #999;
  background-color: #fff; }

.cm-s-mdn-like div.CodeMirror-selected {
  background: #cfc; }

.cm-s-mdn-like .CodeMirror-line::selection, .cm-s-mdn-like .CodeMirror-line > span::selection, .cm-s-mdn-like .CodeMirror-line > span > span::selection {
  background: #cfc; }

.cm-s-mdn-like .CodeMirror-line::-moz-selection, .cm-s-mdn-like .CodeMirror-line > span::-moz-selection, .cm-s-mdn-like .CodeMirror-line > span > span::-moz-selection {
  background: #cfc; }

.cm-s-mdn-like .CodeMirror-gutters {
  background: #f8f8f8;
  border-left: 6px solid rgba(0, 83, 159, 0.65);
  color: #333; }

.cm-s-mdn-like .CodeMirror-linenumber {
  color: #aaa;
  padding-left: 8px; }

.cm-s-mdn-like .CodeMirror-cursor {
  border-left: 2px solid #222; }

.cm-s-mdn-like .cm-keyword {
  color: #6262FF; }

.cm-s-mdn-like .cm-atom {
  color: #F90; }

.cm-s-mdn-like .cm-number {
  color: #ca7841; }

.cm-s-mdn-like .cm-def {
  color: #8DA6CE; }

.cm-s-mdn-like span.cm-variable-2, .cm-s-mdn-like span.cm-tag {
  color: #690; }

.cm-s-mdn-like span.cm-variable-3, .cm-s-mdn-like span.cm-def, .cm-s-mdn-like span.cm-type {
  color: #07a; }

.cm-s-mdn-like .cm-variable {
  color: #07a; }

.cm-s-mdn-like .cm-property {
  color: #905; }

.cm-s-mdn-like .cm-qualifier {
  color: #690; }

.cm-s-mdn-like .cm-operator {
  color: #cda869; }

.cm-s-mdn-like .cm-comment {
  color: #777;
  font-weight: normal; }

.cm-s-mdn-like .cm-string {
  color: #07a;
  font-style: italic; }

.cm-s-mdn-like .cm-string-2 {
  color: #bd6b18; }

/*?*/
.cm-s-mdn-like .cm-meta {
  color: #000; }

/*?*/
.cm-s-mdn-like .cm-builtin {
  color: #9B7536; }

/*?*/
.cm-s-mdn-like .cm-tag {
  color: #997643; }

.cm-s-mdn-like .cm-attribute {
  color: #d6bb6d; }

/*?*/
.cm-s-mdn-like .cm-header {
  color: #FF6400; }

.cm-s-mdn-like .cm-hr {
  color: #AEAEAE; }

.cm-s-mdn-like .cm-link {
  color: #ad9361;
  font-style: italic;
  text-decoration: none; }

.cm-s-mdn-like .cm-error {
  border-bottom: 1px solid red; }

div.cm-s-mdn-like .CodeMirror-activeline-background {
  background: #efefff; }

div.cm-s-mdn-like span.CodeMirror-matchingbracket {
  outline: 1px solid grey;
  color: inherit; }

.cm-s-mdn-like.CodeMirror {
  background-image: url(data:image/png;base64,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); }

#exampleWrapper {
  filter: alpha(opacity=1);
  opacity: 1;
  -moz-transition: 0.3s all ease;
  -o-transition: 0.3s all ease;
  -webkit-transition: 0.3s all ease;
  transition: 0.3s all ease; }

#exampleQuestion,
select.example,
#exampleOnYourOwn {
  font-size: 20px;
  font-size: 1.33333rem;
  font-weight: 400;
  line-height: 1.5;
  margin-top: -8px; }

select.example {
  -webkit-border-radius: 4px;
  border-radius: 4px;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  /* stops bg color from leaking outside the border: */
  line-height: 26px;
  line-height: 1.73333rem;
  font-size: 18px;
  font-size: 1.2rem;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-color: #f7f8f9;
  border-style: none;
  color: #000;
  font-weight: 500;
  margin-bottom: -5px;
  margin-right: -18px;
  min-width: 44px;
  padding: 0 24px 1px 5px;
  position: relative;
  z-index: 9999; }

.small-arrow-down {
  border-left: .27em solid transparent;
  border-right: .27em solid transparent;
  border-top: .3em solid #5dbec8;
  display: inline-block;
  height: 8px;
  margin-left: 0;
  margin-right: 18px;
  position: relative;
  width: 9px;
  z-index: 99999; }

#exampleQuestion,
#exampleOnYourOwn {
  margin-bottom: 10px; }

#exampleQuestion,
#exampleRun,
#exampleOnYourOwn {
  width: 100%; }

#exampleRun {
  font-size: 22px;
  font-size: 1.46667rem;
  -moz-transition: filter 0.2s ease;
  -o-transition: filter 0.2s ease;
  -webkit-transition: filter 0.2s ease;
  transition: filter 0.2s ease;
  font-weight: 500;
  height: 89px;
  margin-top: -89px;
  padding: 20px 10px 24px; }
  #exampleRun:hover {
    filter: brightness(1.1); }

#exampleRun,
#exampleReset {
  display: block;
  text-align: center; }

#exampleReset {
  display: inline-block;
  font-weight: 600;
  margin-left: 10px; }
  #exampleReset:hover {
    cursor: pointer;
    filter: alpha(opacity=0.9);
    opacity: 0.9; }

#exampleResult {
  -webkit-border-radius: 8px;
  border-radius: 8px;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  /* stops bg color from leaking outside the border: */
  font-size: 18px;
  font-size: 1.2rem;
  background-color: #5dbec8;
  color: #fff;
  display: block;
  font-weight: 500;
  min-height: 89px;
  padding: 30px;
  text-align: center;
  width: 100%; }
  #exampleResult .retry-button {
    filter: alpha(opacity=0.6);
    opacity: 0.6;
    -moz-transition: none;
    -o-transition: none;
    -webkit-transition: none;
    transition: none;
    color: #fff;
    cursor: pointer;
    font-weight: 700;
    margin-left: 6px;
    text-decoration: underline;
    text-transform: lowercase;
    white-space: nowrap; }
    #exampleResult .retry-button:hover {
      filter: alpha(opacity=0.9);
      opacity: 0.9; }

#exampleRun {
  background-image: linear-gradient(-218deg, #849dd3 0%, #35c3cf 50%, #3ce0bd 100%);
  font-weight: 600; }

.CodeMirror {
  -webkit-border-radius: 4px;
  border-radius: 4px;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  /* stops bg color from leaking outside the border: */
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  border: 1px solid #dedede;
  height: unset;
  margin-top: 20px;
  viewportMargin: Infinity; }
  .CodeMirror pre {
    color: #333;
    font-family: Source Code Pro, monospace;
    font-size: 12px !important;
    font-weight: 500;
    line-height: 1.5 !important;
    padding: 0 10px; }
  .CodeMirror .CodeMirror-gutter-elt {
    font-family: Source Code Pro, monospace;
    font-size: 12px !important;
    line-height: 20px !important; }

.cm-s-mdn-like.CodeMirror {
  background-color: #f7f8f9;
  background-image: none;
  border: 0;
  border-right: 5px solid #f7f8f9;
  padding: 12px 6px; }

.cm-s-mdn-like .CodeMirror-gutters {
  -webkit-border-radius: 4px 0 0 4px;
  border-radius: 4px 0 0 4px;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  /* stops bg color from leaking outside the border: */
  border: 0; }

.cm-s-mdn-like .CodeMirror-scroll {
  min-height: 240px; }
  @media screen and (min-width: 64em) {
    .cm-s-mdn-like .CodeMirror-scroll {
      max-height: 340px; } }

.cm-s-mdn-like .cm-operator {
  color: #333; }

.cm-s-mdn-like .cm-comment {
  color: #91a2b0; }

.cm-s-mdn-like .cm-string {
  color: #07a;
  font-style: normal; }

.cm-s-mdn-like .cm-string-2 {
  color: #07a; }

.cm-s-mdn-like .cm-property {
  color: #d14; }

.cm-s-mdn-like .cm-keyword {
  color: #6262ff; }

.cm-s-mdn-like .cm-variable {
  color: #159570; }

.cm-s-mdn-like span.cm-variable-3,
.cm-s-mdn-like span.cm-def,
.cm-s-mdn-like span.cm-type,
.cm-s-mdn-like .cm-def {
  color: #333; }

.cm-s-mdn-like span.cm-variable-2,
.cm-s-mdn-like span.cm-tag {
  color: #159570; }

.cm-s-mdn-like .cm-number {
  color: #fa755a; }

.magic-box .intro {
  font-size: 20px;
  font-size: 1.33333rem;
  display: block;
  font-weight: 500;
  line-height: 1.5;
  margin-bottom: 12px;
  padding-top: 40px; }

.code-overlay {
  -webkit-border-radius: 0 0 4px 4px;
  border-radius: 0 0 4px 4px;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  /* stops bg color from leaking outside the border: */
  font-size: 14px;
  font-size: 0.93333rem;
  background-image: linear-gradient(rgba(255, 0, 0, 0) 30%, #f8f8f8 85%);
  color: #5dbec8;
  font-weight: 600;
  height: 240px;
  margin-bottom: -1px;
  margin-top: -240px;
  padding: 200px 0 0;
  position: relative;
  text-align: center;
  z-index: 999999; }
  .code-overlay a {
    cursor: pointer;
    font-weight: 500; }

.flavor {
  font-size: 12px;
  font-size: 0.8rem;
  color: #555;
  font-weight: 400;
  margin-bottom: 20px;
  margin-top: -1px;
  position: relative;
  z-index: 99999; }
  .flavor a {
    -webkit-border-radius: 0 0 6px 6px;
    border-radius: 0 0 6px 6px;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    /* stops bg color from leaking outside the border: */
    font-size: 14px;
    font-size: 0.93333rem;
    -moz-transition: 0.2s ease all;
    -o-transition: 0.2s ease all;
    -webkit-transition: 0.2s ease all;
    transition: 0.2s ease all;
    background: transparent;
    border: 1px solid transparent;
    color: #666;
    display: inline-block;
    font-weight: 500;
    padding: 4px 0;
    text-align: center;
    width: calc(25% - 2px); }
    @media screen and (min-width: 48em) {
      .flavor a {
        font-size: 14px;
        font-size: 0.93333rem; } }
    .flavor a:hover {
      filter: alpha(opacity=0.8);
      opacity: 0.8;
      cursor: pointer; }
  .flavor a.current {
    background: #f8f8f8;
    color: #999; }
    .flavor a.current:hover {
      filter: alpha(opacity=1);
      opacity: 1;
      cursor: default; }

#type {
  border-bottom: 2px solid #5dbec8;
  text-decoration: none; }

#dummy {
  filter: alpha(opacity=0);
  opacity: 0; }

#exampleRefresh {
  -webkit-border-radius: 30px;
  border-radius: 30px;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  /* stops bg color from leaking outside the border: */
  color: #5dbec8;
  display: inline-block;
  float: right;
  font-size: 13px;
  font-weight: 600;
  height: 24px;
  line-height: 22px;
  margin-right: 32px;
  margin-top: -3px;
  padding: 0 10px;
  transition: .3s all ease-out;
  vertical-align: middle; }
  #exampleRefresh:hover {
    background: #5dbec8;
    color: #fff;
    cursor: pointer;
    filter: brightness(1.1);
    opacity: 1;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-name: pulse;
    -webkit-animation-timing-function: linear;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-name: pulse;
    animation-timing-function: linear; }