@charset "UTF-8";
button,
input,
optgroup,
select,
textarea {
  font-family: "Open Sans", sans-serif; }

html {
  box-sizing: border-box; }

*, *:before, *:after {
  box-sizing: inherit; }

body {
  background-color: #E1E1DB;
  padding: 0 1em;
  font-family: "Open Sans", sans-serif; }

.playground {
  display: flex;
  height: 100vh;
  flex-direction: column;
  padding-bottom: 1em; }
  .playground-split {
    display: flex;
    height: 100vh; }
    @media screen and (max-width: 1600px) {
      .playground-split-automatic {
        flex-direction: column; } }
    @media screen and (min-width: 1600px) {
      .playground-split-automatic {
        flex-direction: row; } }
    .playground-split-horizontal {
      flex-direction: column; }
    .playground-split-vertical {
      flex-direction: row; }
    .playground-split-vertical > *:first-child {
      margin-top: 0;
      margin-bottom: 0;
      margin-left: 0; }
    @media screen and (min-width: 1600px) {
      .playground-split-automatic > *:first-child {
        margin-top: 0;
        margin-bottom: 0;
        margin-left: 0; } }
    .playground-split-vertical > * {
      margin-left: 0.5em;
      margin-top: -0.2em;
      margin-bottom: 4px; }
    @media screen and (min-width: 1600px) {
      .playground-split-automatic > * {
        margin-left: 0.5em;
        margin-top: -0.2em;
        margin-bottom: 4px; } }
  .playground-editor {
    flex: 1 1 auto;
    position: relative;
    border: 4px solid #BBBBBB;
    border-radius: 4px; }
  .playground-output-focused {
    flex: 1 1 auto;
    position: relative; }

.configuration {
  position: relative;
  width: 100%;
  height: 100%; }
  .configuration-item {
    display: flex;
    margin-bottom: 0.5em; }
  .configuration-label {
    flex: 1 1 100%; }
  .configuration-value {
    flex: 1 1 100%; }
  .configuration-actions {
    right: 0;
    bottom: 0;
    position: absolute; }

#editor {
  position: absolute;
  font-size: 0.9em;
  font-family: 'Source Code Pro', monospace; }

.editor-simple {
  position: absolute;
  width: 100%;
  height: 100%;
  border: none;
  font-size: 0.9em;
  font-family: 'Source Code Pro', monospace; }

.output {
  display: flex;
  flex-direction: column;
  margin-top: 0.2em; }
  .playground-output-focused .output {
    position: absolute;
    width: 100%;
    height: 100%; }
  .output-tabs {
    display: flex; }
  .output-tab {
    flex: 1 1 auto;
    line-height: 1.5em;
    background-color: #fcfcfc;
    border: 1px solid #BBBBBB;
    border-right: none;
    cursor: pointer; }
    .output-tab:last-of-type {
      border-right: 1px solid #BBBBBB; }
    .output-tab-selected {
      background-color: #f9ffff;
      border-bottom: none;
      cursor: default; }
      .output-tab-selected:focus {
        outline: none; }
    .output-tab-close {
      flex: 0 0 auto; }
  .output-body {
    height: 100%;
    overflow: scroll;
    background-color: #f9ffff;
    border: 1px solid #BBBBBB;
    border-top: none;
    padding: 0.5em; }
  .output-header {
    display: flex;
    white-space: nowrap;
    color: #BBBBBB; }
    .output-header:before, .output-header:after {
      border-top: 1px solid #BBBBBB;
      content: '';
      flex: 1 1 auto;
      margin: auto; }
    .output-header:before {
      margin-right: 2%; }
    .output-header:after {
      margin-left: 2%; }
  .output code {
    font-size: 0.9em;
    font-family: 'Source Code Pro', monospace; }

.drop__toggle {
  font-size: 50%;
  height: 100%; }

.drop__menu {
  display: none;
  position: absolute;
  top: 90%;
  left: 0;
  z-index: 10;
  margin: 0;
  padding: 0;
  border: 1px solid #BBBBBB;
  box-shadow: 0.5px 0.5px 10px 1px rgba(0, 0, 0, 0.2); }
  .drop__menu--open {
    display: inherit; }

.drop__menu-item {
  list-style: none;
  white-space: nowrap;
  border-bottom: 1px solid #BBBBBB; }
  .drop__menu-item:last-child {
    border-bottom: none; }

.drop__button {
  width: 100%;
  background: white;
  border: none;
  cursor: pointer;
  text-align: left; }
  .drop__button:hover {
    background-color: #e6e6e6; }

.modal-backdrop {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 10; }

.modal-content {
  margin: 0 auto;
  background-color: #FFF;
  border: 1px solid black;
  padding: 1em;
  margin-top: 10em;
  width: 600px;
  height: 362.86771px; }

@keyframes loader-fade {
  0% {
    opacity: 0; }
  75% {
    opacity: 1; } }

.loader-dot {
  opacity: 0;
  animation: loader-fade 1s;
  animation-iteration-count: infinite; }
  .loader-dot:nth-child(2) {
    animation-delay: 0.2s; }
  .loader-dot:nth-child(3) {
    animation-delay: 0.4s; }

.language-rust_errors .warning {
  color: #f79a06; }

.language-rust_errors .error {
  color: #bf1b1b; }

.help {
  /**
 * okaidia theme for JavaScript, CSS and HTML
 * Loosely based on Monokai textmate theme by http://www.monokai.nl/
 * @author ocodia
 */
  /* Code blocks */
  /* Inline code */
  max-width: 800px;
  background-color: #fff;
  margin: 1em auto;
  padding: 1em;
  line-height: 1.5; }
  .help code[class*="language-"],
  .help pre[class*="language-"] {
    color: #f8f8f2;
    background: none;
    text-shadow: 0 1px rgba(0, 0, 0, 0.3);
    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
    text-align: left;
    white-space: pre;
    word-spacing: normal;
    word-break: normal;
    word-wrap: normal;
    line-height: 1.5;
    -moz-tab-size: 4;
    tab-size: 4;
    -webkit-hyphens: none;
    -ms-hyphens: none;
    hyphens: none; }
  .help pre[class*="language-"] {
    padding: 1em;
    margin: .5em 0;
    overflow: auto;
    border-radius: 0.3em; }
  .help :not(pre) > code[class*="language-"],
  .help pre[class*="language-"] {
    background: #272822; }
  .help :not(pre) > code[class*="language-"] {
    padding: .1em;
    border-radius: .3em;
    white-space: normal; }
  .help .token.comment,
  .help .token.prolog,
  .help .token.doctype,
  .help .token.cdata {
    color: slategray; }
  .help .token.punctuation {
    color: #f8f8f2; }
  .help .namespace {
    opacity: .7; }
  .help .token.property,
  .help .token.tag,
  .help .token.constant,
  .help .token.symbol,
  .help .token.deleted {
    color: #f92672; }
  .help .token.boolean,
  .help .token.number {
    color: #ae81ff; }
  .help .token.selector,
  .help .token.attr-name,
  .help .token.string,
  .help .token.char,
  .help .token.builtin,
  .help .token.inserted {
    color: #a6e22e; }
  .help .token.operator,
  .help .token.entity,
  .help .token.url,
  .help .language-css .token.string,
  .help .style .token.string,
  .help .token.variable {
    color: #f8f8f2; }
  .help .token.atrule,
  .help .token.attr-value,
  .help .token.function {
    color: #e6db74; }
  .help .token.keyword {
    color: #66d9ef; }
  .help .token.regex,
  .help .token.important {
    color: #fd971f; }
  .help .token.important,
  .help .token.bold {
    font-weight: bold; }
  .help .token.italic {
    font-style: italic; }
  .help .token.entity {
    cursor: help; }
  .help__code {
    background: #EEE;
    padding: 0 0.25em; }
  .help__logo {
    text-align: center; }
  .help__header:hover:after {
    content: ' \A7'; }
  .help__header-link {
    color: black;
    text-decoration: none; }
    .help__header-link:hover {
      text-decoration: underline; }
  .help__example {
    position: relative; }
  .help__load_example {
    position: absolute;
    right: 0;
    top: 0;
    border: none;
    background: rgba(255, 255, 255, 0.8);
    border-bottom-left-radius: 0.5em;
    visibility: hidden;
    opacity: 0;
    transition: all 0.5s;
    cursor: pointer; }
  .help__example:hover .help__load_example {
    visibility: visible;
    opacity: 1; }

.header {
  display: flex;
  font-size: 12px;
  padding: 1.25em 0; }
  .header__set {
    margin-right: 0.5em; }
    .header__set:last-child {
      margin-right: 0; }
    .header__set--channel-mode {
      margin-right: auto; }
  .header button:enabled {
    cursor: pointer; }

.segmented-button {
  display: flex;
  align-items: center;
  border-radius: 4px;
  box-shadow: 0 2px 4px -2px rgba(0, 0, 0, 0.4), inset 0 1px 0px white; }
  .segmented-button__button {
    border: none;
    padding: 0;
    text-align: inherit;
    line-height: inherit;
    background: inherit;
    background-color: transparent;
    background-color: #fff;
    background: linear-gradient(#fff, #f9f9f9);
    color: #444;
    border: 1px solid #dedede; }
    .segmented-button__button:first-child {
      border-top-left-radius: 4px;
      border-bottom-left-radius: 4px; }
    .segmented-button__button:last-child {
      border-top-right-radius: 4px;
      border-bottom-right-radius: 4px; }
    .segmented-button__button:not(:first-child) {
      border-left: none; }
    .segmented-button__button:not(:last-child) {
      border-right: 1px solid #dedede; }
    .segmented-button__button:hover {
      background: linear-gradient(#fff, #f3f3f3);
      color: #333; }
    .segmented-button__button:active {
      background: linear-gradient(#f9f9f9, #ededed);
      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2);
      border-top-color: #bababa;
      border-bottom-color: #d6d6d6; }
    .segmented-button__button--build {
      background: #AA4422;
      color: white;
      border-color: #88361b; }
      .segmented-button__button--build:not(:last-child) {
        border-right-width: 0; }
      .segmented-button__button--build .header-button {
        font-weight: 700; }
      .segmented-button__button--build:hover {
        background: #80331a;
        color: white; }
      .segmented-button__button--build:active {
        background: #80331a;
        border-top-color: #80331a;
        border-bottom-color: #80331a; }

.popper {
  z-index: 10;
  font-size: 12px;
  top: 0; }
  .popper__arrow {
    position: absolute;
    margin: 10px;
    border: 10px solid transparent; }
  .popper[data-placement^="bottom"] .popper__arrow {
    margin-top: 0;
    border-top-width: 0;
    border-bottom-color: white; }
  .popper__content {
    background: white;
    color: #222;
    margin: 10px;
    border-radius: 4px;
    box-shadow: 0 1px 4px -2px rgba(0, 0, 0, 0.6), inset 0 1px 0px white;
    border-left: 1px solid #cacaca;
    border-right: 1px solid #cacaca;
    border-bottom: 1px solid #bdbdbd; }
  .popper button:enabled {
    cursor: pointer; }

.menu-group {
  width: 27em;
  padding: 0.75em 1em 0 1em;
  line-height: normal; }
  .menu-group:last-child {
    padding-bottom: 0.75em; }
  .menu-group__title {
    margin: 0;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 11px;
    padding-bottom: 10px;
    border-bottom: 1px solid #dedede; }
  .menu-group__content {
    padding: 1em 0.25em; }

.menu-item {
  margin-bottom: 1em; }
  .menu-item:last-child {
    margin-bottom: 0; }

.button-menu-item {
  border: none;
  padding: 0;
  text-align: inherit;
  line-height: inherit;
  background: inherit;
  background-color: transparent;
  transition: color 0.2s ease-in-out; }
  .button-menu-item:hover {
    color: #428bca; }
  .button-menu-item__name {
    font-size: 13px;
    font-weight: 600;
    margin: 0; }
  .button-menu-item__description {
    margin: 0; }

.selectable-item {
  width: 100%;
  border: none;
  padding: 0;
  text-align: inherit;
  line-height: inherit;
  background: inherit;
  background-color: transparent;
  transition: color 0.2s ease-in-out; }
  .selectable-item__header {
    display: flex;
    align-items: center; }
  .selectable-item__name {
    font-size: 13px;
    font-weight: 600; }
  .selectable-item__description {
    padding-left: 2em; }
  .selectable-item:hover {
    color: #428bca; }
  .selectable-item--selected {
    font-weight: 600;
    color: #428bca; }
  .selectable-item__checkmark {
    margin-right: 0.5em;
    opacity: 0;
    transition: opacity 0.15s ease-in-out; }
  .selectable-item:hover .selectable-item__checkmark {
    opacity: 0.5;
    color: #428bca; }
  .selectable-item--selected .selectable-item__checkmark,
  .selectable-item--selected:hover .selectable-item__checkmark {
    opacity: 1; }

.build-menu__aside {
  margin: 0.25em 0 0 0;
  color: #888; }

.channel-menu__description {
  margin: 0; }

.advanced-options-menu__aside {
  margin: 0.25em 0 1em 0;
  color: #888; }

.config-element {
  display: flex;
  align-items: center; }
  .config-element__name {
    flex: 1;
    font-size: 13px; }
    .config-element__name--not-default {
      font-weight: 600;
      color: #428bca; }
  .config-element__value {
    flex: 1; }
  .config-element__select {
    width: 100%; }
  .config-element__toggle {
    display: flex; }
    .config-element__toggle input {
      display: none; }
    .config-element__toggle label {
      flex: 1;
      padding: 0 1em;
      text-transform: uppercase;
      font-size: 11px;
      font-weight: 600;
      color: #777;
      text-align: center;
      cursor: pointer;
      border: 1px solid #bbb;
      border-top-left-radius: 4px;
      border-bottom-left-radius: 4px;
      border-right-width: 0; }
      .config-element__toggle label ~ label {
        border-right-width: 1px;
        border-left: 1px solid #bbb;
        border-radius: 0 4px 4px 0; }
      .config-element__toggle label:hover {
        background: rgba(0, 117, 219, 0.1); }
    .config-element__toggle :checked + label {
      border-color: #428bca;
      background: #428bca;
      color: #fff; }
      .config-element__toggle :checked + label ~ label {
        border-left-width: 0; }

.header-button {
  height: 3em;
  padding: 0 1.25em;
  display: flex;
  align-items: center;
  text-transform: uppercase;
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap; }
  .header-button--expandable {
    padding-right: 1em; }
  .header-button--has-left-icon {
    padding-left: 1em; }
  .header-button--has-right-icon {
    padding-right: 1em; }
  .header-button--icon-only {
    padding: 0 0.75em; }
  .header-button__left-icon {
    margin-right: 0.5em; }
  .header-button--icon-only .header-button__left-icon {
    margin-right: 0; }
  .header-button__drop {
    margin-left: 0.75em; }
  .header-button__right-icon {
    margin-left: 0.75em; }

.icon {
  display: block;
  fill: currentColor; }