* {
  box-sizing: border-box;
}
html {
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
body {
  font-family: "Benton Sans", Helvetica, Sans-serif;
  font-weight: normal;
  color: #dadada;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  margin: 0;
  overflow: hidden;
  background-color: #160f19;
  -webkit-tap-highlight-color: transparent;
}
a {
  color: #dadada;
}
#application {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 1px;
  min-width: 5%;
  position: relative;
  overflow: hidden;
  background-color: #160f19;
}
.dulled-secondary {
  opacity: 0.4;
}
.hidden {
  display: none !important;
}
.cursor-default {
  cursor: default !important;
}
.small-viewport-only {
  display: none !important;
}
@media (max-width: 580px) {
  .small-viewport-only {
    display: block !important;
  }
}
.small-viewport-only-inline {
  display: none !important;
}
@media (max-width: 580px) {
  .small-viewport-only-inline {
    display: inline-block !important;
  }
}
@media (max-width: 580px) {
  .hidden-on-small-viewport {
    display: none !important;
  }
}
.jiggle {
  -webkit-animation: jiggle 0.25s 1 ease-out forwards;
          animation: jiggle 0.25s 1 ease-out forwards;
}
.offline {
  -webkit-filter: grayscale(100%);
          filter: grayscale(100%);
}
.offline:hover {
  -webkit-filter: none;
          filter: none;
}
.embedded {
  border: 1px solid #484848;
  border-radius: 5px;
  box-shadow: 4px 4px #484848;
  background-color: transparent;
  margin-bottom: 4px;
  margin-right: 4px;
  overflow: hidden;
}
.embedded #application {
  border-radius: 5px;
}
@media (max-width: 580px) {
  .embedded #editor {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
.avatar {
  background-size: cover;
  border-radius: 5px;
  width: 26px;
  height: 25px;
  background-color: #404040;
}
.welcome-message {
  display: inline-block;
  font-size: 14px;
  color: #dadada;
  margin-left: 53px;
}
#community-auth-iframe {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 1px;
  width: 1px;
  border: 0;
  pointer-events: none;
}
@-webkit-keyframes jiggle {
  0% {
    -webkit-transform: rotate(-6deg);
            transform: rotate(-6deg);
  }
  33% {
    -webkit-transform: rotate(3deg);
            transform: rotate(3deg);
  }
  66% {
    -webkit-transform: rotate(-6deg);
            transform: rotate(-6deg);
  }
}
@keyframes jiggle {
  0% {
    -webkit-transform: rotate(-6deg);
            transform: rotate(-6deg);
  }
  33% {
    -webkit-transform: rotate(3deg);
            transform: rotate(3deg);
  }
  66% {
    -webkit-transform: rotate(-6deg);
            transform: rotate(-6deg);
  }
}
/* normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
html {
  font-family: Sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}
audio,
canvas,
progress,
video {
  display: inline-block;
  vertical-align: baseline;
}
audio:not([controls]) {
  display: none;
  height: 0;
}
[hidden],
template {
  display: none;
}
a {
  background-color: transparent;
}
a:active,
a:hover {
  outline: 0;
}
abbr[title] {
  border-bottom: 1px dotted;
}
b,
strong {
  font-weight: bold;
}
dfn {
  font-style: italic;
}
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
mark {
  background: #ff0;
  color: #000;
}
small {
  font-size: 80%;
}
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}
img {
  border: 0;
}
svg:not(:root) {
  overflow: hidden;
}
figure {
  margin: 1em 40px;
}
hr {
  box-sizing: content-box;
  height: 0;
}
pre {
  overflow: auto;
}
code,
kbd,
pre,
samp {
  font-family: Monospace, Monospace;
  font-size: 1em;
}
button,
input,
optgroup,
select,
textarea {
  color: inherit;
  font: inherit;
  margin: 0;
}
button {
  overflow: visible;
}
button,
select {
  text-transform: none;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
}
button[disabled],
html input[disabled] {
  cursor: default;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}
input {
  line-height: normal;
}
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}
input[type="search"] {
  -webkit-appearance: textfield;
  box-sizing: content-box;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}
legend {
  border: 0;
  padding: 0;
}
textarea {
  overflow: auto;
}
optgroup {
  font-weight: bold;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
td,
th {
  padding: 0;
}
.clock {
  background-image: url("../images/illustrations/clock.svg");
}
.assets-blank-slate {
  background-image: url("../images/illustrations/empty-assets-background.svg");
}
.project-loading {
  background-image: url("../images/illustrations/project-loading-background-dark.svg");
}
.anon-avatar {
  background-image: url("../images/anon-avatar-smile.svg");
  background-size: contain;
  vertical-align: middle;
}
.close {
  background-image: url("../images/background-dark/icons/x.svg");
}
.options {
  background-image: url("../images/background-dark/icons/options.svg");
}
.icon-collapse {
  background-image: url("../images/background-dark/icons/collapse.svg");
}
.new-stuff-cat {
  background-image: url("../images/illustrations/new-stuff-cat.svg");
}
.fire-truck {
  background-image: url("../images/illustrations/fire-truck.svg");
}
.private-icon {
  background-image: url("../images/background-dark/icons/private.svg");
}
.public-icon {
  background-image: url("../images/background-dark/icons/public.svg");
}
.search-input {
  background-image: url("../images/background-dark/icons/search.svg");
}
.show-app-icon {
  background-image: url("../images/background-dark/icons/show-app.svg");
}
.eye {
  background-image: url("../images/background-dark/icons/eye.svg");
}
.justice {
  background-image: url("../images/background-dark/icons/justice.svg");
}
.rewind {
  background-image: url("../images/background-dark/icons/rewind.svg");
}
.ask-for-help {
  background-image: url("../images/background-dark/icons/ask-for-help.svg");
}
.ask-for-help-face {
  background-image: url("../images/background-dark/icons/ask-for-help-face.svg");
}
.ask-for-help-hand {
  background-image: url("../images/background-dark/icons/ask-for-help-hand.svg");
}
.playhead-arrow {
  background-image: url("../images/background-dark/icons/playhead-arrow.svg");
}
.assets-sidebar-icon {
  background-image: url("../images/background-dark/sidebar-file-icons/assets.svg");
}
.assets-sidebar-icon.active {
  background-image: url("../images/background-dark/sidebar-file-icons/assets-active.svg");
}
.secrets-sidebar-icon {
  background-image: url("../images/background-dark/sidebar-file-icons/secrets.svg");
}
.secrets-sidebar-icon.active {
  background-image: url("../images/background-dark/sidebar-file-icons/secrets-active.svg");
}
.asking-for-help-sidebar-item {
  background-image: url("../images/background-dark/sidebar-file-icons/asking-for-help.svg");
}
.icon {
  display: inline-block;
  background-repeat: no-repeat;
  cursor: pointer;
  background-position: center;
  vertical-align: middle;
}
.down-arrow,
.up-arrow {
  background-image: url("../images/background-dark/icons/down-arrow.svg");
  width: 10px;
  height: 8px;
  margin-left: 5px;
  opacity: 0.4;
}
.down-arrow:hover,
.up-arrow:hover {
  opacity: 1;
}
.up-arrow {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
.left-arrow {
  background-image: url("../images/background-dark/icons/left-arrow.svg");
  width: 10px;
  height: 10px;
}
.glitch-logo {
  background-size: contain;
  background-position: initial;
  width: 31px;
  height: 26px;
  vertical-align: middle;
  background-image: url("../images/logos/glitch/logo-day.svg");
}
.glitch-logo.party {
  background-image: url("../images/logos/glitch/party.svg");
}
.glitch-logo.sunset {
  background-image: url("../images/logos/glitch/logo-sunset.svg");
}
.glitch-logo.night {
  background-image: url("../images/logos/glitch/logo-night.svg");
}
.glitch-logo.development {
  background-image: url("../images/logos/glitch/logo-day-dev.svg");
}
.glitch-logo.development.sunset {
  background-image: url("../images/logos/glitch/logo-sunset-dev.svg");
}
.glitch-logo.development.night {
  background-image: url("../images/logos/glitch/logo-night-dev.svg");
}
.add {
  font-size: 18px;
  font-weight: 600;
  padding-left: 5px;
  padding-right: 5px;
  position: relative;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  opacity: 0.3;
  opacity: 0.4;
  transition: none;
  vertical-align: -2px;
}
.add:hover {
  opacity: 1;
  background-color: #333;
  border-radius: 5px;
  border: none;
}
.add:active {
  border: none;
  background-color: #4e4e4e;
}
.add:hover {
  opacity: 0.8;
}
.icon-collapse {
  opacity: 0.4;
}
.icon-collapse:hover {
  opacity: 1;
  background-color: #333;
  border-radius: 5px;
  border: none;
}
.icon-collapse:active {
  border: none;
  background-color: #4e4e4e;
}
.icon-collapse:hover {
  opacity: 0.8;
}
.back {
  vertical-align: middle;
  padding-right: 5px;
  padding-left: 5px;
  opacity: 0.7;
  overflow: auto;
}
.back:hover {
  opacity: 1;
  background-color: #333;
  border-radius: 5px;
  border: none;
}
.back:active {
  border: none;
  background-color: #4e4e4e;
}
.npm {
  width: 38px;
  vertical-align: text-bottom;
  margin-right: 6px;
}
.makerbase {
  width: 20px;
  vertical-align: -1px;
  margin-right: 6px;
}
.private-icon,
.public-icon {
  background-repeat: no-repeat;
  background-position: center;
  width: 10px;
  height: 14px;
  display: inline-block;
  vertical-align: -2px;
}
.status-badge {
  font-weight: 600;
  font-size: 12px;
  line-height: 14px;
  vertical-align: middle;
  color: #160f19;
}
.status-badge .status {
  padding-top: 2px;
  padding-bottom: 0px;
  border-radius: 5px;
  padding-left: 5px;
  padding-right: 5px;
  display: inline-block;
  margin-left: 5px;
  background-color: #7b7b7b;
}
.status-badge .loading {
  padding: 0;
}
.status-badge .loading .loader {
  margin: 0;
  width: 14px;
  height: 14px;
  vertical-align: middle;
}
.status-badge .error {
  background-color: #ff5d5d;
}
.status-badge .off {
  background-color: #7b7b7b;
}
.status-badge .success,
.status-badge .ok {
  background-color: #55ff84;
}
.status-badge .warning {
  background-color: #ffaabf;
}
.status-badge.show-badge {
  vertical-align: middle;
}
.status-badge.show-badge .loader {
  width: 16px;
  height: 16px;
  vertical-align: -1px;
}
.eye,
.ask-for-help,
.justice {
  height: 12px;
  width: 18px;
  vertical-align: -2px;
  opacity: 0.4;
}
.eye,
.justice {
  height: 13px;
  vertical-align: middle;
}
.rewind {
  width: 14px;
  height: 10px;
  opacity: 0.4;
}
.playhead-arrow {
  width: 17px;
  height: 16px;
}
.rewind-tape {
  background-image: url("../images/background-dark/icons/rewind-tape.svg");
  width: 30px;
  height: 13px;
  background-repeat: no-repeat;
}
.rewind-tape-reel {
  background-image: url("../images/background-dark/icons/rewind-tape-reel.svg");
  width: 13px;
  height: 13px;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
}
.rewind-tape-reel.right {
  right: 0;
}
.fullscreen {
  background-image: url("../images/background-dark/icons/fullscreen.svg");
  width: 15px;
  height: 15px;
  opacity: 0.4;
}
.button .emoji:hover {
  background-color: transparent;
}
.emoji {
  display: inline-block;
  background-repeat: no-repeat;
  cursor: pointer;
  background-position: center;
  vertical-align: middle;
  width: 18px;
  height: 18px;
  background-size: contain;
  vertical-align: bottom;
  margin-left: 2px;
  vertical-align: sub;
  margin-top: -1px;
}
.emoji.ambulance {
  background-image: url("../images/emojis/ambulance.png");
}
.emoji.arrow_up {
  background-image: url("../images/emojis/arrow_up.png");
}
.emoji.balance-scale {
  background-image: url("../images/emojis/balance-scale.png");
}
.emoji.balloon {
  background-image: url("../images/emojis/balloon.png");
}
.emoji.bento {
  background-image: url("../images/emojis/bento.png");
}
.emoji.bomb {
  background-image: url("../images/emojis/bomb.png");
}
.emoji.bouquet {
  background-image: url("../images/emojis/bouquet.png");
}
.emoji.cat2 {
  background-image: url("../images/emojis/cat2.png");
}
.emoji.carp_streamer {
  background-image: url("../images/emojis/carp_streamer.png");
}
.emoji.chart_with_upwards_trend {
  background-image: url("../images/emojis/chart_with_upwards_trend.png");
}
.emoji.clap {
  background-image: url("../images/emojis/clap.png");
}
.emoji.clock3 {
  background-image: url("../images/emojis/clock3.png");
}
.emoji.crescent_moon {
  background-image: url("../images/emojis/crescent_moon.png");
}
.emoji.crystal_ball {
  background-image: url("../images/emojis/crystal_ball.png");
}
.emoji.cyclone {
  background-image: url("../images/emojis/cyclone.png");
}
.emoji.dancers {
  background-image: url("../images/emojis/dancers.png");
}
.emoji.earth_asia {
  background-image: url("../images/emojis/earth_asia.png");
}
.emoji.email {
  background-image: url("../images/emojis/email.png");
}
.emoji.eyes {
  background-image: url("../images/emojis/eyes.png");
}
.emoji.female_technologist {
  background-image: url("../images/emojis/female_technologist.png");
}
.emoji.ferris_wheel {
  background-image: url("../images/emojis/ferris_wheel.png");
}
.emoji.firebase {
  background-image: url("../images/logos/firebase.svg");
}
.emoji.framed_picture {
  background-image: url("../images/emojis/framed_picture.png");
}
.emoji.ghost {
  background-image: url("../images/emojis/ghost.png");
}
.emoji.globe-with-meridians {
  background-image: url("../images/emojis/globe_with_meridians.png");
}
.emoji.hamburger {
  background-image: url("../images/emojis/hamburger.png");
}
.emoji.heart_eyes {
  background-image: url("../images/emojis/heart_eyes.png");
}
.emoji.helmet_with_white_cross {
  background-image: url("../images/emojis/helmet_with_white_cross.png");
}
.emoji.hibiscus {
  background-image: url("../images/emojis/hibiscus.png");
}
.emoji.raising_hand_woman {
  background-image: url("../images/emojis/raising_hand_woman.png");
}
.emoji.lady_beetle {
  background-image: url("../images/emojis/lady_beetle.png");
}
.emoji.last_quarter_moon_with_face {
  background-image: url("../images/emojis/last_quarter_moon_with_face.png");
}
.emoji.lock {
  background-image: url("../images/emojis/lock.png");
}
.emoji.love_letter {
  background-image: url("../images/emojis/love_letter.png");
}
.emoji.love_hotel {
  background-image: url("../images/emojis/love_hotel.png");
}
.emoji.microphone {
  background-image: url("../images/emojis/microphone.png");
}
.emoji.minidisc {
  background-image: url("../images/emojis/minidisc.png");
}
.emoji.musical_keyboard {
  background-image: url("../images/emojis/musical_keyboard.png");
}
.emoji.newspaper {
  background-image: url("../images/emojis/newspaper.png");
}
.emoji.octocat {
  background-image: url("../images/emojis/github-logo-dark.svg");
}
.emoji.octagonal_sign {
  background-image: url("../images/emojis/octagonal_sign.png");
}
.emoji.facebook {
  background-image: url("../images/emojis/facebook.png");
  width: 15px;
}
.emoji.palm_tree {
  background-image: url("../images/emojis/palm_tree.png");
}
.emoji.pager {
  background-image: url("../images/emojis/pager.png");
}
.emoji.paperclip {
  background-image: url("../images/emojis/paperclip.png");
}
.emoji.rainbow {
  background-image: url("../images/emojis/rainbow.png");
}
.emoji.raised_hand {
  background-image: url("../images/emojis/raised_hand.png");
}
.emoji.repeat {
  background-image: url("../images/emojis/repeat.png");
}
.emoji.rewind {
  background-image: url("../images/emojis/rewind.png");
}
.emoji.rose {
  background-image: url("../images/emojis/rose.png");
}
.emoji.rotate {
  background-image: url("../images/emojis/rotate.png");
}
.emoji.seedling {
  background-image: url("../images/emojis/seedling.png");
}
.emoji.selfie {
  background-image: url("../images/emojis/selfie.png");
}
.emoji.sparkles {
  background-image: url("../images/emojis/sparkles.png");
  position: static;
}
.emoji.sparkling_heart {
  background-image: url("../images/emojis/sparkling_heart.png");
}
.emoji.splashing_sweat {
  background-image: url("../images/emojis/splashing_sweat.png");
}
.emoji.sunglasses {
  background-image: url("../images/emojis/sunglasses.png");
}
.emoji.sunny {
  background-image: url("../images/emojis/sunny.png");
}
.emoji.traffic_light {
  background-image: url("../images/emojis/traffic_light.png");
}
.emoji.truck {
  background-image: url("../images/emojis/truck.png");
}
.emoji.turtle {
  background-image: url("../images/emojis/turtle.png");
}
.emoji.two_women_holding_hands {
  background-image: url("../images/emojis/two_women_holding_hands.png");
}
.emoji.thumbsup {
  background-image: url("../images/emojis/thumbsup.png");
}
.emoji.tokyo_tower {
  background-image: url("../images/emojis/tokyo_tower.png");
}
.emoji.two {
  background-image: url("../images/emojis/two.png");
}
.emoji.umbrella {
  background-image: url("../images/emojis/umbrella.png");
}
.emoji.wave {
  background-image: url("../images/emojis/wave.png");
}
.emoji.avatar {
  width: 18px;
  height: 18px;
}
.emojiCache {
  visibility: hidden;
  height: 0;
  width: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.emojiCache .emoji {
  position: absolute;
  visibility: hidden;
  height: 0;
  width: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.button,
button {
  color: #dadada;
  border: 2px solid #dadada;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
  background-color: #160f19;
}
.button .icon,
button .icon {
  margin-right: 5px;
}
.button .icon.rewind,
button .icon.rewind {
  margin-right: 0;
}
.button:hover,
button:hover {
  background-color: #282828;
}
.button:active,
button:active,
.button:focus,
button:focus {
  background-color: #4e4e4e;
  outline: none;
}
.button:hover .icon,
button:hover .icon,
.button:active .icon,
button:active .icon,
.button:focus .icon,
button:focus .icon {
  opacity: 1;
}
.button.active,
button.active {
  background-color: #4e4e4e;
  color: #dadada;
}
.button.active .icon,
button.active .icon {
  opacity: 1;
}
.button .label,
button .label {
  vertical-align: middle;
}
.button.has-status,
button.has-status {
  padding-top: 4px;
}
.button .status-badge,
button .status-badge {
  margin-right: 0;
  font-size: 11px;
}
.button .status-badge .error,
button .status-badge .error,
.button .status-badge .warning,
button .status-badge .warning {
  padding-top: 1px;
}
.button .status-badge .loader,
button .status-badge .loader {
  margin-left: 0;
}
.button .glitch-logo,
button .glitch-logo {
  width: 18px;
  vertical-align: top;
  margin-top: -1px;
  margin-left: 2px;
}
.button .ask-for-help,
button .ask-for-help {
  width: 20px;
  height: 16px;
  margin: 0;
  opacity: 0.35;
}
.button.new-file,
button.new-file {
  margin: 0;
  margin-left: 20px;
}
.button .emoji,
button .emoji {
  cursor: pointer;
}
.button[disabled],
button[disabled] {
  opacity: 0.5;
  pointer-events: none;
  cursor: pointer;
}
.button a,
button a {
  color: #dadada;
}
.disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: pointer;
}
.button-large {
  border-radius: 5px;
  font-weight: 600;
  font-size: 14px;
  display: inline-block;
  padding-left: 12px;
  padding-right: 12px;
  padding-top: 6px;
  padding-bottom: 5px;
  margin-bottom: 12px;
}
.button-large.has-emoji {
  padding-top: 5px;
  padding-bottom: 5px;
}
.button-large .loader {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin: 0;
  margin-left: 2px;
}
.button-small {
  border-radius: 5px;
  font-weight: 600;
  font-size: 12px;
  padding: 4px 8px;
  padding-top: 5px;
}
.button-small.has-emoji {
  padding-top: 4px;
  padding-bottom: 3px;
}
.button-small .emoji {
  width: 16px;
  height: 16px;
}
.button-small .button-checkbox {
  vertical-align: 0;
}
.button-small.has-badge {
  padding-top: 4px;
  padding-bottom: 3px;
}
.button-small.has-badge .status-badge {
  vertical-align: 1px;
}
.button-small.has-badge .loader {
  margin-left: 5px;
  vertical-align: -4px;
}
.button-secondary {
  border-width: 1px;
  border-radius: 3px;
  font-size: 11px;
  padding: 2px 4px;
  padding-right: 5px;
  border-color: #7b7b7b;
  color: #727272;
}
.button-secondary:hover {
  color: #dadada;
  background-color: #4e4e4e;
}
.button-secondary:active {
  border-color: #dadada;
}
.button-tertiary {
  color: #9b9b9b;
  border-width: 1px;
  border-color: #484848;
  cursor: pointer;
  display: inline-block;
  margin-top: 10px;
}
.button-tertiary .down-arrow {
  vertical-align: initial;
  margin-left: 3px;
}
.button-tertiary:hover {
  color: #dadada;
  border-color: #7b7b7b;
}
.button-tertiary:hover .down-arrow {
  opacity: 1;
}
.button-tertiary:focus {
  color: #dadada;
}
.button-on-secondary-background {
  color: #727272;
  border-color: #7b7b7b;
  background-color: #282828;
}
.button-on-secondary-background:hover {
  color: #dadada;
  background-color: #4e4e4e;
}
.button-on-secondary-background:active,
.button-on-secondary-background:focus {
  border-color: #dadada;
  outline: none;
}
.button-wrap {
  display: block;
}
.close {
  opacity: 0.4;
  padding: 10px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  transition: right 0.1s;
  position: absolute;
  right: 20px;
  -webkit-transform: translateY(2px);
          transform: translateY(2px);
}
.close:hover {
  opacity: 1;
  background-color: #333;
  border-radius: 5px;
  border: none;
}
.close:active {
  border: none;
  background-color: #4e4e4e;
}
.section-has-tertiary-buttons .button:first-child,
.section-has-tertiary-buttons button:first-child,
.section-has-tertiary-buttons .button-wrap:first-child {
  margin: 0;
}
.section-has-tertiary-buttons .button-wrap {
  margin-top: 10px;
}
.button-checkbox {
  margin-right: 6px;
  vertical-align: middle;
  cursor: pointer;
  width: 12px;
  height: 12px;
}
.segmented-buttons button {
  margin-right: 0;
}
.segmented-buttons button:first-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.segmented-buttons button:last-child {
  border-left: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.segmented-buttons button:not(:first-child):not(:last-child) {
  border-radius: 0px;
  border-left: 0;
}
.button-count.button-tertiary {
  padding-top: 7px;
  padding-bottom: 3px;
}
.button-like .heart {
  margin-right: 0;
}
.button-like .count {
  margin-left: 5px;
}
.last-button {
  margin-bottom: 0;
}
.ask-for-help-container {
  position: relative;
}
.button-ask-for-help {
  position: relative;
  padding: 3px 6px;
  padding-bottom: 2px;
  margin: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.button-email-sign-in {
  margin-top: 10px;
}
.fade-in {
  -webkit-animation: fadeIn 0.2s ease-out;
          animation: fadeIn 0.2s ease-out;
}
.select-wrapper {
  display: inline-block;
  position: relative;
}
.select-wrapper:after {
  content: "";
  background-image: url("../images/background-dark/icons/down-arrow.svg");
  background-repeat: no-repeat;
  position: absolute;
  right: 6px;
  bottom: 8px;
  opacity: 0.5;
  width: 10px;
  height: 8px;
  opacity: 0.4;
  pointer-events: none;
}
.select-wrapper:hover:after {
  opacity: 1;
}
.button-cta {
  color: #dadada;
  font-weight: 600;
  cursor: pointer;
  background-color: #b1419f;
  box-shadow: 4px 4px 0 #dadada;
}
.button-cta:hover {
  background-color: #b1419f;
  box-shadow: 2px 2px 0 #dadada;
}
.button-cta:active {
  background-color: #b1419f;
  box-shadow: none;
}
select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  position: relative;
  cursor: pointer;
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
input,
textarea,
p[contenteditable=true] {
  font-family: Menlo, Consolas, Monaco, "Lucida Console", Monospace;
  font-size: 13px;
}
.search-input,
.replace-input,
.CodeMirror-search-field {
  border-color: #666;
  margin-left: 3%;
  max-width: 500px;
  height: 25px;
  border-radius: 3px;
  border-style: solid;
  border-width: 1px;
  padding-left: 10px;
  font-size: 13px;
  background-repeat: no-repeat;
  background-position: right 5px center;
  transition: all 0.1s;
  background-color: #160f19;
  vertical-align: middle;
}
.search-input:focus,
.replace-input:focus,
.CodeMirror-search-field:focus {
  outline: none;
  box-shadow: 0px 0px 3px 0px #a2d7ff;
}
.pop-over-input {
  position: relative;
  background-color: transparent;
  padding: 0;
  padding-bottom: 2px;
  line-height: 17px;
  border: none;
  outline: none;
  border-bottom: 1px solid #484848;
  width: 100%;
  color: #dadada;
}
.pop-over-search {
  width: 100%;
  margin-left: 0;
  background-color: #160f19;
  border-color: #666;
  font-weight: normal;
  background-image: none;
  padding-left: 6px;
  padding-bottom: initial;
  border: 1px solid #666;
}
.file-rename-input {
  color: #160f19;
  padding: 0;
  border: none;
}
.file-rename-input:focus {
  outline: none;
  border: none;
}
.field-error,
.field-warning {
  background-image: url("../images/emojis/fire_engine.png");
  background-repeat: no-repeat;
  background-size: 18px;
  background-position-x: 99%;
  border-color: #ffaabf;
}
.field-error-message,
.field-warning-message {
  color: #160f19;
  background-color: #ff5d5d;
  display: inline-block;
  padding: 3px 6px;
  border-radius: 5px;
  font-weight: 600;
  font-size: 13px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.field-warning {
  background-image: url("../images/emojis/raised_hand.png");
}
.field-warning-message {
  background-color: #ffaabf;
}
.tag-input-field {
  font-weight: normal;
  border-bottom: 1px solid #484848;
  padding-bottom: 2px;
  position: relative;
  margin-top: 0;
  margin-bottom: 1rem;
}
.tag-input-field .tag-pill {
  display: inline-block;
  color: #160f19;
  transition: all 0.1s;
  margin-bottom: 2px;
}
.tag-input-field .tag-pill.active {
  margin-right: 3px;
  border-radius: 5px;
  padding: 2px 5px;
}
.tag-input-field .tag-pill .tag-name {
  display: inline;
}
.tag-input-field .tag-pill .tag-remove {
  display: inline;
  cursor: pointer;
  padding-left: 3px;
  opacity: 0.7;
}
.tag-input-field .tag-pill .tag-remove:hover {
  opacity: 1;
}
.tag-input-field .tag-input {
  outline: none;
  border: none;
  width: 100px;
  background-color: transparent;
}
fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}
input[type="radio"] {
  margin-right: 5px;
}
input[disabled] {
  border: none;
}
progress {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  height: 9px;
  width: 70px;
  border: 1px solid #160f19;
  background-color: transparent;
  border-radius: 5px;
}
progress::-webkit-progress-bar {
  background-color: transparent;
}
progress::-webkit-progress-value {
  background-color: #160f19;
  border-radius: 0px;
}
progress::-moz-progress-bar {
  background-color: #160f19;
  border-radius: 0px;
}
.notify-progress {
  margin-left: 5px;
}
.progress-inline {
  border: 1px solid #7b7b7b;
}
.progress-inline::-webkit-progress-value {
  background-color: #7b7b7b;
  border-radius: 2px;
}
.progress-inline::-moz-progress-bar {
  background-color: #7b7b7b;
  border-radius: 2px;
}
.progress-inline.error::-webkit-progress-value {
  background-color: #ff5d5d;
}
.progress-inline.error::-moz-progress-bar {
  background-color: #ff5d5d;
}
.progress-inline.warning::-webkit-progress-value {
  background-color: #ffaabf;
}
.progress-inline.warning::-moz-progress-bar {
  background-color: #ffaabf;
}
header {
  border-bottom: 1px solid #404040;
  padding-left: 15px;
  padding-right: 15px;
  position: relative;
  margin-top: 11px;
  padding-bottom: 11px;
  height: 38px;
  z-index: 1;
}
header .header-nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}
header .header-project {
  font-size: 14px;
  cursor: pointer;
  display: inline-block;
  position: relative;
}
header .header-project:hover {
  opacity: 1;
  background-color: #333;
  border-radius: 5px;
  border: none;
}
header .header-project:active {
  border: none;
  background-color: #4e4e4e;
}
header .header-project .context {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  vertical-align: middle;
  font-weight: normal;
  max-width: 200px;
}
@media (max-width: 580px) {
  header .header-project .context {
    max-width: 150px;
  }
}
@media (max-width: 414px) {
  header .header-project .context {
    max-width: 100px;
  }
}
header .header-project .project-is-private {
  background-color: #b98e01;
  border-radius: 3px;
  margin-right: 4px;
  padding: 1px 6px;
  display: inline-block;
}
header .header-project .project-name-loader .loader {
  width: 18px;
  height: 18px;
  margin: 0;
  margin-right: 5px;
}
header .header-project .project-avatar-image {
  display: inline-block;
  width: 18px;
  border-radius: 3px;
  vertical-align: middle;
  margin-right: 5px;
}
header .header-project .project-avatar-image[src=""] {
  display: none;
}
header .header-project .project-name {
  font-weight: bold;
}
header .show-app {
  margin-left: 0.5%;
  opacity: 1;
  font-weight: 600;
  font-size: 14px;
  opacity: 0.7;
}
header .show-app .show-app-icon {
  vertical-align: -2px;
  width: 30px;
  height: 15px;
  margin-right: 2px;
}
@media (max-width: 580px) {
  header .show-app {
    margin-left: 0;
  }
  header .show-app .show-text {
    display: none;
  }
}
header .status-badge .status-loading {
  margin-left: 0;
  margin-top: -2px;
  background: transparent;
}
header .nav-item {
  padding-top: 5px;
  padding-bottom: 4px;
  padding-left: 5px;
  padding-right: 5px;
  white-space: nowrap;
  height: 28px;
}
header .nav-item:hover {
  opacity: 1;
  background-color: #333;
  border-radius: 5px;
  border: none;
}
header .nav-item:active {
  border: none;
  background-color: #4e4e4e;
}
header .project-search-wrapper {
  margin-top: 1px;
  position: relative;
  margin-left: 1.5%;
  margin-right: 4%;
  -webkit-box-flex: 2;
      -ms-flex-positive: 2;
          flex-grow: 2;
}
header .project-search-wrapper.expanded {
  position: absolute;
  width: 94%;
  margin: auto;
  z-index: 10;
  left: 1px;
}
header .project-search-wrapper .project-search-input {
  width: 100%;
}
header .user-options-pop-button,
header .about-pop-button {
  display: inline-block;
  cursor: pointer;
  margin-left: 5px;
  margin-right: 10px;
  padding-right: 5px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
header .user-options-pop-button:hover,
header .about-pop-button:hover {
  opacity: 1;
  background-color: #333;
  border-radius: 5px;
  border: none;
}
header .user-options-pop-button:active,
header .about-pop-button:active {
  border: none;
  background-color: #4e4e4e;
}
@media (max-width: 580px) {
  header .user-options-pop-button,
  header .about-pop-button {
    padding-right: 0;
  }
}
header .sign-in-button {
  margin-right: 15px;
}
header .header-project:hover .down-arrow,
header .user-options-pop-button:hover .down-arrow,
header .about-pop-button:hover .down-arrow {
  opacity: 1;
}
header .about-pop-button {
  margin: 0;
}
header .header-options {
  display: inline-block;
}
header .right-options {
  margin-left: auto;
  white-space: nowrap;
}
header .small-viewport-options {
  margin-left: 1%;
}
@media (max-width: 580px) {
  header .hidden-on-small-viewport {
    display: none;
  }
}
header a.show-app {
  text-decoration: none;
}
header .user-is-logging-in {
  display: inline-block;
  margin-right: 5px;
}
header .anon-avatar {
  background-size: 18px;
  background-position: center 9px;
}
.CodeMirror {
  position: relative;
  overflow: hidden;
  background: #fff;
}
.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: 50px solid transparent !important;
}
.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 {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
      user-select: none;
}
.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 */
  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;
  overflow: auto;
}
.CodeMirror-code {
  outline: none;
}
.CodeMirror-scroll,
.CodeMirror-sizer,
.CodeMirror-gutter,
.CodeMirror-gutters,
.CodeMirror-linenumber {
  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;
}
.cm-searching {
  background: rgba(255,255,0,0.5) !important;
}
.cm-force-border {
  padding-right: 0.1px;
}
@media print {
  .CodeMirror div.CodeMirror-cursors {
    visibility: hidden;
  }
}
.cm-tab-wrap-hack:after {
  content: '';
}
span.CodeMirror-selectedtext {
  background: none;
}
.CodeMirror-lint-markers {
  width: 16px;
}
.CodeMirror-lint-tooltip {
  background-color: #ffd;
  border: 1px solid #000;
  border-radius: 4px 4px 4px 4px;
  color: #000;
  font-family: Menlo, Consolas, Monaco, "Lucida Console", Monospace;
  font-size: 10pt;
  overflow: hidden;
  padding: 2px 5px;
  position: fixed;
  white-space: pre;
  white-space: pre-wrap;
  z-index: 100;
  max-width: 600px;
  opacity: 0;
}
.CodeMirror-lint-mark-error,
.CodeMirror-lint-mark-warning {
  background-position: left bottom;
  background-repeat: repeat-x;
}
.CodeMirror-lint-marker-error,
.CodeMirror-lint-marker-warning {
  background-position: center center;
  background-repeat: no-repeat;
  cursor: pointer;
  display: inline-block;
  height: 16px;
  width: 16px;
  vertical-align: middle;
  position: relative;
}
.CodeMirror-lint-message-error,
.CodeMirror-lint-message-warning {
  padding-left: 18px;
  background-position: top left;
  background-repeat: no-repeat;
}
.CodeMirror-lint-marker-multiple {
  width: 100%;
  height: 100%;
}
.CodeMirror-foldmarker {
  color: #00f;
  text-shadow: #b9f 1px 1px 2px, #b9f -1px -1px 2px, #b9f 1px -1px 2px, #b9f -1px 1px 2px;
  font-family: arial;
  line-height: 0.3;
  cursor: pointer;
}
.CodeMirror-foldgutter {
  width: 0.7em;
}
.CodeMirror-foldgutter-open,
.CodeMirror-foldgutter-folded {
  cursor: pointer;
}
.CodeMirror-foldgutter-open:after {
  content: "\25BE";
}
.CodeMirror-foldgutter-folded:after {
  content: "\25B8";
}
.CodeMirror-crosshair {
  cursor: crosshair;
}
#editor {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  -ms-flex-flow: nowrap;
      flex-flow: nowrap;
  overflow-y: hidden;
  overflow: auto;
  z-index: 0;
}
.editor-read-only {
  background-color: #282828;
}
.editor-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  -ms-flex-flow: nowrap;
      flex-flow: nowrap;
  overflow-y: hidden;
  overflow: auto;
  position: relative;
}
.assets-wrap {
  border-left: 1px solid #404040;
  overflow: auto;
  background-color: #282828;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  position: relative;
}
.editor-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  overflow-x: auto;
  overflow-y: hidden;
  position: relative;
}
.media-wrap {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-left: 1px solid #404040;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.media-wrap > img {
  max-width: 100%;
}
.text-editor {
  border-left: solid 1px #404040;
  -webkit-overflow-scrolling: touch;
}
.text-editor .CodeMirror {
  height: calc(100vh - 50px);
  font-family: Menlo, Consolas, Monaco, "Lucida Console", Monospace;
  font-size: 13px;
  line-height: 16px;
  background: transparent;
}
.text-editor .CodeMirror pre {
  padding-left: 6px;
}
.text-editor .CodeMirror-scrollbar-filler,
.text-editor .CodeMirror-scroll {
  background-color: transparent;
}
.text-editor .CodeMirror-cursors,
.text-editor .CodeMirror-line,
.text-editor .CodeMirror-selected {
  -webkit-transform: translateX(3px);
          transform: translateX(3px);
}
.text-editor .CodeMirror-cursor {
  border-left: 2px solid #dadada;
}
.text-editor .CodeMirror-linebackground {
  left: -100%;
}
.text-editor .CodeMirror-gutters {
  border-right: none;
  background-color: transparent;
  white-space: nowrap;
}
.text-editor .CodeMirror-gutter-background {
  background-color: rgba(255,255,255,0.07);
}
.text-editor .CodeMirror-linewidget {
  overflow: initial;
  position: absolute !important;
  top: 0;
  left: 15px;
}
.text-editor .CodeMirror-foldgutter-open,
.text-editor .CodeMirror-foldgutter-folded {
  background-image: url("../images/editor/fold-widget-dark.svg");
  width: 7px;
  height: 3px;
  padding: 8px 5px;
  background-repeat: no-repeat;
  background-position: center;
  margin-left: 1px;
  padding-right: 1px;
  opacity: 0.4;
}
.text-editor .CodeMirror-foldgutter-open::after,
.text-editor .CodeMirror-foldgutter-folded::after {
  content: "";
}
.text-editor .CodeMirror-foldgutter-open:hover,
.text-editor .CodeMirror-foldgutter-folded:hover {
  opacity: 1;
  background-color: #333;
  border-radius: 5px;
  border: none;
}
.text-editor .CodeMirror-foldgutter-open:active,
.text-editor .CodeMirror-foldgutter-folded:active {
  border: none;
  background-color: #4e4e4e;
}
.text-editor .CodeMirror-foldgutter-folded {
  background-image: url("../images/editor/fold-widget-folded-dark.svg");
}
.text-editor .CodeMirror-foldmarker {
  margin: 0 2px;
  padding: 0px 4px;
  color: #dadada;
  border-radius: 3px;
  background-color: #282828;
  text-shadow: none;
}
.text-editor .CodeMirror-foldmarker:hover {
  opacity: 1;
  background-color: #333;
  border-radius: 5px;
  border: none;
}
.text-editor .CodeMirror-foldmarker:active {
  border: none;
  background-color: #4e4e4e;
}
.text-editor .CodeMirror-linenumber {
  min-width: 20px;
  text-align: right;
  white-space: nowrap;
  color: #565656;
  font-size: 10px;
  padding-left: 0;
}
.text-editor .CodeMirror-lint-markers {
  width: 10px;
}
.text-editor .CodeMirror-lint-marker-error,
.text-editor .CodeMirror-lint-marker-warning {
  background-image: url("../images/editor/error.svg");
  background-position: center;
  width: 12px;
  margin-left: 4px;
}
.text-editor .CodeMirror-lint-marker-warning {
  background-image: url("../images/editor/warning.svg");
}
.text-editor .CodeMirror-lint-marker-multiple:after {
  content: "";
}
.text-editor .CodeMirror-lint-mark-error {
  background-image: url("../images/editor/lint-error-line.svg");
}
.text-editor .CodeMirror-lint-mark-warning {
  background-image: url("../images/editor/lint-warning-line.svg");
}
.CodeMirror-lint-tooltip {
  background-color: #f3929f;
  border-radius: 3px;
  font-size: 12px;
  margin-left: -10px;
  word-wrap: break-word;
  border: none;
}
.CodeMirror-lint-tooltip .CodeMirror-lint-message-error,
.CodeMirror-lint-tooltip .CodeMirror-lint-message-warning {
  background-image: url("../images/editor/error.svg");
  background-position: left 1px;
  padding-right: 2px;
  padding-left: 18px;
}
.CodeMirror-lint-tooltip .CodeMirror-lint-message-warning {
  background-image: url("../images/editor/warning.svg");
}
.CodeMirror-code .cm-keyword,
.CodeMirror-code .cm-def,
.CodeMirror-code .cm-comment,
.CodeMirror-code .cm-string,
.CodeMirror-code .cm-operator,
.CodeMirror-code .cm-variable {
  font-weight: normal;
  font-style: normal;
  color: #dadada;
}
.CodeMirror-code .CodeMirror-activeline-background {
  background-color: rgba(255,255,255,0.1);
}
.CodeMirror-code .cm-keyword {
  color: #79e6d9;
  font-weight: bold;
}
.CodeMirror-code .cm-comment {
  font-style: italic;
  color: #898989;
}
.CodeMirror-code .cm-string {
  color: #fddd88;
}
.CodeMirror-code .cm-property {
  color: #a4a4e4;
}
.CodeMirror-code .cm-operator,
.CodeMirror-code .cm-tag {
  color: #79e6d9;
  font-weight: bold;
}
.CodeMirror-code .cm-number,
.CodeMirror-code .cm-atom {
  color: #6eca98;
}
.CodeMirror-code .cm-qualifier {
  font-style: italic;
}
.CodeMirror-code .cm-def {
  color: #dadada;
}
.CodeMirror-code .cm-link {
  color: #a4a4e4;
}
.CodeMirror-code .cm-url {
  color: #dadada;
  text-decoration: underline;
}
.CodeMirror-code .cm-header {
  color: #79e6d9;
  font-weight: bold;
}
.CodeMirror-code .cm-strong {
  color: #fddd88;
  font-weight: bold;
}
.CodeMirror-code .cm-em {
  font-style: italic;
}
.CodeMirror-code .cm-quote {
  color: #fddd88;
}
.CodeMirror-matchingbracket {
  background-color: rgba(114,192,194,0.5);
}
.CodeMirror-matchingtag {
  background-color: #444122;
}
.CodeMirror-selected {
  background-color: #777;
}
.CodeMirror-focused .CodeMirror-selected {
  background-color: rgba(77,151,255,0.33);
}
.cm-matchhighlight {
  background-color: rgba(114,192,194,0.5);
}
.CodeMirror-selection-highlight-scrollbar {
  background-color: rgba(114,192,194,0.5);
  border-radius: 4px;
}
.diff-added-line {
  background-color: #284a35;
}
.diff-removed-line {
  background-color: #58243a;
}
.markdown-container {
  -webkit-overflow-scrolling: touch;
  border-left: 1px solid #404040;
  -webkit-box-flex: 1;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto;
  height: calc(100% - 50px);
  overflow: auto;
  padding: 0 20px;
  position: relative;
}
@media (max-width: 580px) {
  .markdown-container {
    padding-left: 10px;
    padding-right: 10px;
    font-size: 90%;
  }
}
.markdown-content {
  max-width: 612px;
  padding-bottom: 30%;
}
.markdown-content p {
  font-size: 16px;
  line-height: 20px;
}
.markdown-content a {
  color: #418cab;
}
.markdown-content a:hover {
  text-decoration: none;
}
.markdown-content h1 {
  font-size: 1.6em;
}
.markdown-content h2 {
  font-size: 1.35em;
}
.markdown-content img {
  max-width: 100%;
  display: block;
  margin: 1.5rem 0;
}
.markdown-content pre {
  background-color: #282828;
  padding: 16px;
  border-radius: 5px;
}
.markdown-content pre code {
  border-radius: 0;
  padding: 0;
}
.markdown-content code {
  font-family: Menlo, Consolas, Monaco, "Lucida Console", Monospace;
  background-color: #282828;
  border-radius: 3px;
  padding: 2px 3px;
  font-size: 14px;
}
.markdown-content table,
.markdown-content th,
.markdown-content td {
  border: 1px solid #404040;
  padding: 7px 14px;
}
.markdown-content tr:nth-child(even) {
  background-color: #282828;
}
.markdown-content hr {
  border: 0;
  border-top: 1px solid #404040;
}
.markdown-content ul,
.markdown-content ol {
  margin-bottom: 1rem;
}
.markdown-content ul {
  list-style-type: square;
}
.markdown-content ul ul {
  list-style-type: square;
}
.markdown-content ol ul {
  list-style-type: square;
}
.markdown-content li {
  line-height: 24px;
}
.markdown-content > :first-child {
  margin-top: 0;
}
.license-summary {
  font-size: 14px;
  margin-bottom: 1rem;
  overflow-x: scroll;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.license-summary .license-column {
  width: calc(33% - 5%);
  margin-right: 5%;
  min-width: 120px;
  max-width: 200px;
}
.license-summary .license-column:last-child {
  margin-right: 0;
}
.license-summary .license-column .column-title {
  margin-top: 0;
  font-weight: bold;
}
.license-summary .license-column ul {
  padding-left: 1rem;
  margin: 0;
}
.license-summary .license-column ul li {
  margin-bottom: 5px;
  background-position: center;
  background-repeat: no-repeat;
  list-style-type: square;
}
.sidebar {
  -webkit-overflow-scrolling: touch;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  max-width: 75%;
  min-width: 105px;
  position: relative;
  z-index: 5;
}
@media (min-width: 960px) {
  .sidebar {
    max-width: 50%;
  }
}
.sidebar .person:first-child span > .sidebar-avatar {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  border: none;
}
.sidebar .person:last-child span > .sidebar-avatar {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
.sidebar .icon-collapse {
  cursor: w-resize;
  width: 14px;
  height: 12px;
  background-size: 14px 12px;
  position: absolute;
  right: 6px;
  top: 6px;
  padding: 14px;
  margin-top: 2px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  transition: right 0.1s;
  z-index: 3;
}
.sidebar .sidebar-status-when-collapsed {
  display: none;
}
.sidebar .sidebar-files {
  margin-top: 10px;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.sidebar .files {
  margin-top: 8px;
}
.sidebar .files .filetree {
  border-bottom: none;
}
.sidebar .debug-buttons {
  border-bottom: 1px solid #404040;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  height: 34px;
  margin-top: 8px;
  padding-bottom: 8px;
}
.sidebar .debug-buttons .segmented-buttons {
  margin-left: 20px;
}
.sidebar .debug-buttons button {
  margin-top: 0;
  vertical-align: middle;
  height: 25px;
}
.sidebar .debug-buttons button .rewind {
  margin-bottom: 2px;
}
.sidebar .debug-buttons .status-badge {
  margin-top: 0px;
}
.sidebar .debug-buttons .status-badge .loading {
  vertical-align: 1px;
}
.sidebar .filetree .secrets-sidebar-icon,
.sidebar .filetree .assets-sidebar-icon,
.sidebar .filetree .asking-for-help-sidebar-item {
  background-repeat: no-repeat;
  background-position-y: center;
  background-position-x: 5px;
  padding-left: 25px;
}
.sidebar .filetree .secrets-sidebar-icon,
.sidebar .filetree .asking-for-help-sidebar-item {
  padding-left: 28px;
}
.sidebar > resizer {
  cursor: ew-resize;
  display: block;
  height: 100%;
  position: absolute;
  right: -8px;
  top: 0;
  width: 10px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  z-index: 1;
}
.sidebar-collapsed {
  -webkit-animation-duration: 0.1s;
          animation-duration: 0.1s;
  -webkit-animation-name: sidebar-collapse;
          animation-name: sidebar-collapse;
  cursor: e-resize;
  max-width: 30px;
  min-width: initial;
  overflow: hidden;
  transition-duration: 0.1s;
  transition: #160f19;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.sidebar-collapsed:hover {
  background-color: #333;
}
.sidebar-collapsed:hover .icon-collapse {
  opacity: 0.8;
}
.sidebar-collapsed > * {
  pointer-events: none;
}
.sidebar-collapsed > *:not(.icon-collapse),
.sidebar-collapsed > *:not(.sidebar-status-when-collapsed) {
  opacity: 0;
}
.sidebar-collapsed .icon-collapse {
  -webkit-transform: rotate(-180deg) translateX(-6px);
          transform: rotate(-180deg) translateX(-6px);
  cursor: e-resize;
  opacity: 0.4;
}
.sidebar-collapsed .sidebar-status-when-collapsed {
  display: block;
  position: absolute;
  top: 60px;
  left: 1px;
  opacity: 1;
}
.sidebar-collapsed .sidebar-status-when-collapsed .loader,
.sidebar-collapsed .sidebar-status-when-collapsed .error,
.sidebar-collapsed .sidebar-status-when-collapsed .off,
.sidebar-collapsed .sidebar-status-when-collapsed .warning {
  display: block;
  width: 14px;
  height: 14px;
  margin-top: -12px;
  margin-left: 8px;
  margin-bottom: 10px;
  border-radius: 100px;
}
.sidebar-collapsed .sidebar-status-when-collapsed .error {
  background-color: #ff5d5d;
}
.sidebar-collapsed .sidebar-status-when-collapsed .off {
  background-color: #7b7b7b;
}
.sidebar-collapsed .sidebar-status-when-collapsed .warning {
  background-color: #ffaabf;
}
.sidebar-collapsed > resizer {
  display: none;
}
@-webkit-keyframes sidebar-collapse {
  from {
    max-width: 75%;
  }
  to {
    max-width: 30px;
  }
}
@keyframes sidebar-collapse {
  from {
    max-width: 75%;
  }
  to {
    max-width: 30px;
  }
}
.sidebar-people {
  padding-left: 20px;
  padding-top: 10px;
  padding-bottom: 2px;
  border-bottom: 1px solid #404040;
  position: relative;
  clear: both;
  max-width: 100%;
}
.sidebar-people .collaborators {
  position: relative;
  transition: all 0.05s;
  margin-right: 5px;
}
.sidebar-people .avatar {
  width: 25px;
  height: 25px;
  cursor: pointer;
  display: inline-block;
  background-size: cover;
  border-bottom: 3px solid transparent;
  z-index: 1;
}
.sidebar-people .sidebar-avatar {
  vertical-align: middle;
  position: relative;
  border-radius: 0;
  margin-bottom: 8px;
}
.sidebar-people .team-avatar {
  border: 0;
}
.sidebar-people .collaborators-buttons {
  padding-right: 26px;
  position: relative;
}
.sidebar-people .join-project-button {
  margin-bottom: 0;
  margin-top: 0;
  margin-right: 8px;
}
.sidebar-people .anon-avatar {
  background-size: 18px;
  background-position: center 9px;
}
.sidebar-people .share-project,
.sidebar-people .join-people {
  vertical-align: top;
  margin-top: 0;
  position: relative;
  margin-bottom: 8px;
}
.sidebar-people .viewers {
  margin: 0;
  margin-top: 5px;
  margin-bottom: 0.5rem;
  font-size: 13px;
  padding-right: 20px;
}
.sidebar-people .asking-for-help p {
  margin: 0;
  margin-top: 5px;
  margin-bottom: 0.5rem;
  font-size: 13px;
  padding-right: 20px;
}
.sidebar-people .asking-for-help button {
  margin: 0;
  margin-bottom: 0.5rem;
}
.sidebar-people .sparkles-hidden .sparkles {
  display: none;
}
.sidebar-people .asking-for-help-loader {
  cursor: pointer;
  float: left;
  padding-top: 4px;
  margin-top: -4px;
  margin-left: -4px;
  padding-left: 4px;
}
.sidebar-people .asking-for-help-loader:hover {
  opacity: 1;
  background-color: #333;
  border-radius: 5px;
  border: none;
}
.sidebar-people .asking-for-help-loader:active {
  border: none;
  background-color: #4e4e4e;
}
.avatar .heart {
  opacity: 0;
  width: 14px;
  height: 13px;
  background-image: url("../images/editor/heart.svg");
  background-repeat: no-repeat;
  background-size: contain;
  -webkit-animation: floating 0.8s ease-out;
          animation: floating 0.8s ease-out;
  position: absolute;
}
.avatar .heart-child {
  width: 10px;
  height: 10px;
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
  -webkit-animation: floating-child 0.8s ease-out;
          animation: floating-child 0.8s ease-out;
  position: absolute;
}
@-webkit-keyframes floating {
  0% {
    -webkit-transform: translateX(10px) translateY(25px);
            transform: translateX(10px) translateY(25px);
  }
  50% {
    opacity: 1;
    -webkit-transform: translateX(6px) translateY(4px) rotate(-5deg);
            transform: translateX(6px) translateY(4px) rotate(-5deg);
  }
  85% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(10px) translateY(-10px) rotate(5deg);
            transform: translateX(10px) translateY(-10px) rotate(5deg);
  }
}
@keyframes floating {
  0% {
    -webkit-transform: translateX(10px) translateY(25px);
            transform: translateX(10px) translateY(25px);
  }
  50% {
    opacity: 1;
    -webkit-transform: translateX(6px) translateY(4px) rotate(-5deg);
            transform: translateX(6px) translateY(4px) rotate(-5deg);
  }
  85% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(10px) translateY(-10px) rotate(5deg);
            transform: translateX(10px) translateY(-10px) rotate(5deg);
  }
}
@-webkit-keyframes floating-child {
  0% {
    -webkit-transform: translateX(10px) translateY(25px);
            transform: translateX(10px) translateY(25px);
  }
  50% {
    opacity: 1;
    -webkit-transform: translateX(0px) translateY(14px) rotate(-8deg);
            transform: translateX(0px) translateY(14px) rotate(-8deg);
  }
  85% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(6px) translateY(4px) rotate(8deg);
            transform: translateX(6px) translateY(4px) rotate(8deg);
  }
}
@keyframes floating-child {
  0% {
    -webkit-transform: translateX(10px) translateY(25px);
            transform: translateX(10px) translateY(25px);
  }
  50% {
    opacity: 1;
    -webkit-transform: translateX(0px) translateY(14px) rotate(-8deg);
            transform: translateX(0px) translateY(14px) rotate(-8deg);
  }
  85% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(6px) translateY(4px) rotate(8deg);
            transform: translateX(6px) translateY(4px) rotate(8deg);
  }
}
.project-info {
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #404040;
  position: relative;
  clear: both;
  max-width: 100%;
}
.project-info .project-avatar {
  cursor: pointer;
  margin-right: 4px;
}
.project-info .project-avatar .avatar-image {
  width: 34px;
  border-radius: 3px;
  vertical-align: middle;
  position: relative;
}
.filetree {
  transition: all 0.1s;
  font-size: 13px;
  margin: 0;
  padding: 0;
  line-height: 1.5em;
  width: 100%;
  border-bottom: 1px #404040 solid;
  padding-bottom: 12px;
}
.filetree .file {
  transition: none;
  cursor: pointer;
  list-style-type: none;
  margin-left: 20px;
  padding-left: 5px;
  padding-right: 35px;
  position: relative;
  font-family: Menlo, Consolas, Monaco, "Lucida Console", Monospace;
  white-space: nowrap;
}
.filetree .file .current-users {
  height: 100%;
  position: absolute;
  left: -20px;
  pointer-events: none;
}
.filetree .file .current-users .current-user {
  width: 6px;
  height: 100%;
  float: left;
}
.filetree .file .options {
  width: 10px;
  height: 8px;
  position: absolute;
  right: 10px;
  top: 0;
  padding: 9px;
  background-position: center;
  padding-top: 10px;
  transition: all 0.1s;
  opacity: 0;
  z-index: 2;
}
.filetree .file .options:hover {
  opacity: 1;
}
.filetree .file .extension-type {
  pointer-events: none;
}
.filetree .file:hover,
.filetree .file.active {
  border-radius: 3px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.filetree .file:hover .options,
.filetree .file.active .options {
  display: inline-block;
}
.filetree .file.active {
  color: #160f19;
}
.filetree .file.active .folder-path {
  color: #160f19;
}
.rewind-state {
  display: inline-block;
  margin-right: 5px;
  margin-left: 1px;
  vertical-align: -2px;
}
.rewind-state .rewind-state-icon {
  background-color: #36945b;
  border-radius: 3px;
  position: relative;
  width: 13px;
  height: 13px;
}
.rewind-state .rewind-state-icon .mixed-lines-background {
  background-color: #b62d4e;
  position: absolute;
  height: 50%;
  width: 100%;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  bottom: 0;
  left: 0;
}
.rewind-state .rewind-state-icon.deleted {
  background-color: #b62d4e;
}
.rewind-state .rewind-state-icon.added .mixed-lines-background {
  display: none;
}
.display-file-name {
  position: relative;
  z-index: 1;
  display: inline-block;
}
.extension-type {
  color: #bd3874;
}
.file:hover .extension-type {
  color: #dadada;
  background-color: transparent;
}
.file:hover .options {
  opacity: 0.7;
}
.file.active .extension-type {
  color: #160f19;
  background-color: transparent;
}
.file.active .options {
  opacity: 0.7;
}
.secrets-sidebar-icon .extension-type {
  color: #dadada;
}
.logic .extension-type {
  color: #7059e0;
}
.logic:hover {
  background-color: rgba(112,89,224,0.2);
}
.logic.active {
  background-color: #7059e0;
}
.logic .file-rename-input {
  background-color: rgba(112,89,224,0.2);
}
.logic.mini-pop:hover {
  background-color: #160f19;
}
.logic.mini-pop .mini-pop-action:hover {
  background-color: rgba(112,89,224,0.2);
}
.logic.files {
  background-color: rgba(112,89,224,0.2);
}
.data .extension-type {
  color: #ce5c48;
}
.data:hover {
  background-color: rgba(206,92,72,0.2);
}
.data.active {
  background-color: #ce5c48;
}
.data .file-rename-input {
  background-color: rgba(206,92,72,0.2);
}
.data.mini-pop:hover {
  background-color: #160f19;
}
.data.mini-pop .mini-pop-action:hover {
  background-color: rgba(206,92,72,0.2);
}
.data.files {
  background-color: rgba(206,92,72,0.2);
}
.info .extension-type {
  color: #00b0b2;
}
.info:hover {
  background-color: rgba(0,176,178,0.2);
}
.info.active {
  background-color: #00b0b2;
}
.info .file-rename-input {
  background-color: rgba(0,176,178,0.2);
}
.info.mini-pop:hover {
  background-color: #160f19;
}
.info.mini-pop .mini-pop-action:hover {
  background-color: rgba(0,176,178,0.2);
}
.info.files {
  background-color: rgba(0,176,178,0.2);
}
.view .extension-type {
  color: #b39519;
}
.view:hover {
  background-color: rgba(179,149,25,0.2);
}
.view.active {
  background-color: #b39519;
}
.view .file-rename-input {
  background-color: rgba(179,149,25,0.2);
}
.view.mini-pop:hover {
  background-color: #160f19;
}
.view.mini-pop .mini-pop-action:hover {
  background-color: rgba(179,149,25,0.2);
}
.view.files {
  background-color: rgba(179,149,25,0.2);
}
.style .extension-type {
  color: #a158ab;
}
.style:hover {
  background-color: rgba(161,88,171,0.2);
}
.style.active {
  background-color: #a158ab;
}
.style .file-rename-input {
  background-color: rgba(161,88,171,0.2);
}
.style.mini-pop:hover {
  background-color: #160f19;
}
.style.mini-pop .mini-pop-action:hover {
  background-color: rgba(161,88,171,0.2);
}
.style.files {
  background-color: rgba(161,88,171,0.2);
}
li.file.audio:hover,
li.file.image:hover,
li.file.pdf:hover {
  background-color: rgba(189,56,116,0.2);
}
li.file.audio.active,
li.file.image.active,
li.file.pdf.active {
  background-color: #bd3874;
}
li.file.audio .file-rename-input,
li.file.image .file-rename-input,
li.file.pdf .file-rename-input {
  background-color: rgba(189,56,116,0.2);
}
li.file.audio.mini-pop:hover,
li.file.image.mini-pop:hover,
li.file.pdf.mini-pop:hover {
  background-color: #160f19;
}
li.file.audio.mini-pop .mini-pop-action:hover,
li.file.image.mini-pop .mini-pop-action:hover,
li.file.pdf.mini-pop .mini-pop-action:hover {
  background-color: rgba(189,56,116,0.2);
}
li.file.audio.files,
li.file.image.files,
li.file.pdf.files {
  background-color: rgba(189,56,116,0.2);
}
.other:hover {
  background-color: rgba(189,56,116,0.2);
}
.other.active {
  background-color: #bd3874;
}
.other .file-rename-input {
  background-color: rgba(189,56,116,0.2);
}
.other.mini-pop:hover {
  background-color: #160f19;
}
.other.mini-pop .mini-pop-action:hover {
  background-color: rgba(189,56,116,0.2);
}
.other.files {
  background-color: rgba(189,56,116,0.2);
}
.folder-path {
  font-style: italic;
  color: #727272;
}
.editor-helper {
  -webkit-box-flex: 0;
      -ms-flex: 0;
          flex: 0;
  border-left: 1px #404040 solid;
  padding-bottom: 15px;
  position: relative;
}
.editor-helper .button-small {
  margin-right: 5px;
  vertical-align: middle;
}
.editor-helper .button-small .down-arrow {
  margin-right: 0;
}
.editor-helper .button-small .down-arrow {
  margin-right: 0;
}
.editor-helper .helper-actions {
  padding-left: 10px;
}
.editor-helper .add-package .loader {
  margin-top: -1px;
}
.editor-helper .status {
  margin-left: 5px;
}
.assets-helper {
  padding-left: 10px;
  border-left: none;
  height: 30px;
  padding-bottom: 35px;
  background-color: transparent;
  position: relative;
}
.CodeMirror-dialog {
  position: absolute;
  top: 40px;
  z-index: 12;
  font-family: "Benton Sans", Helvetica, Sans-serif;
  padding: 8px;
  background-color: #282828;
  border: 1px solid #404040;
  border-right: none;
  max-width: initial;
  -webkit-transform: translateY(-40px);
          transform: translateY(-40px);
  border-radius: 0;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  width: 40%;
  right: 0;
  box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.27), 0px 1px 1px 0px rgba(0,0,0,0.15);
}
.CodeMirror-dialog .CodeMirror-search-field {
  width: 75%;
  margin-left: 0;
}
.CodeMirror-dialog .button-wrap {
  display: inline-block;
  width: 14%;
  vertical-align: middle;
}
@media (max-width: 750px) {
  .CodeMirror-dialog .button-wrap {
    display: none;
  }
}
.CodeMirror-dialog .close {
  display: inline;
  position: initial;
  width: 11%;
  margin-left: 0.2rem;
}
.CodeMirror-dialog .CodeMirror-search-hint {
  display: none;
}
.CodeMirror-dialog .CodeMirror-jump-input {
  max-width: 100px;
}
.CodeMirror-dialog .CodeMirror-search-button {
  cursor: pointer;
  background-color: #282828;
  text-transform: lowercase;
  opacity: 0.4;
  border-radius: 5px;
}
.CodeMirror-dialog .CodeMirror-search-button:hover {
  opacity: 1;
  background-color: #333;
}
.CodeMirror-dialog .CodeMirror-search-button.next,
.CodeMirror-dialog .CodeMirror-search-button.prev {
  padding: 10px;
  margin-left: 0.2rem;
}
.CodeMirror-dialog button {
  color: #9b9b9b;
  font-weight: 600;
  border-radius: 5px;
  border: 1px solid #c3c3c3;
  width: 45px;
  font-size: 12px;
}
.pop-over {
  background-color: #160f19;
  font-size: 14px;
  margin: 0;
  cursor: initial;
  display: block;
  position: absolute;
  top: 35px;
  border-radius: 3px;
  border: 1px solid #484848;
  box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.27), 0px 1px 1px 0px rgba(0,0,0,0.15);
  z-index: 10;
  width: 255px;
  padding: 0;
  -webkit-overflow-scrolling: touch;
  overflow-y: auto;
  max-height: calc(88vh - 45px);
}
.pop-over p {
  color: #dadada;
  font-weight: normal;
  margin-bottom: 10px;
}
.pop-over section,
.pop-over >form {
  color: #dadada;
  padding: 12px;
  padding-top: 14px;
  padding-bottom: 14px;
}
.pop-over section:first-child {
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}
.pop-over section:last-child {
  border-bottom: none;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
}
.pop-over .description-section {
  margin: 0;
  padding: 0;
  padding-bottom: 4px;
}
.pop-over .description {
  margin-top: 2px;
  margin-bottom: 12px;
}
.pop-over a {
  color: #418cab;
}
.pop-over a:hover {
  text-decoration: none;
}
.pop-over a.button {
  color: #dadada;
}
.pop-over .secrets-sidebar-icon {
  background-repeat: no-repeat;
  background-position-y: center;
  background-position-x: 5px;
  padding-left: 25px;
  padding-left: 22px;
  background-position: initial;
  margin-left: 3px;
}
.pop-over .project-pop-sign-up .github-sign-up {
  margin-bottom: 9px;
}
.pop-over .clickable-label {
  cursor: pointer;
}
.pop-over .clickable-label:hover .back,
.pop-over .clickable-label:active .back {
  opacity: 1;
  border-radius: 5px;
  border: none;
}
.pop-over .clickable-label:hover .back {
  background-color: #333;
}
.pop-over .clickable-label:active .back {
  background-color: #4e4e4e;
}
.pop-over .url-container {
  position: relative;
  margin-top: 12px;
}
.pop-over .danger-zone {
  background-color: #f3929f;
}
.pop-over-info {
  background-color: #282828;
  border-bottom: 1px solid #484848;
}
.pop-over-info .pop-title {
  font-size: 14px;
  font-weight: bold;
}
.pop-over-info .pop-title .emoji {
  cursor: pointer;
}
.pop-over-info .copy,
.pop-over-info .rename {
  margin-top: -2px;
  right: 12px;
  position: absolute;
  cursor: pointer;
}
.pop-over-info .info-description {
  margin-bottom: 0;
}
.pop-over-info .action-description {
  font-weight: normal;
  margin: 0;
}
.pop-over-info.pop-over-profile {
  padding: 0;
}
.pop-over-info.pop-over-profile .profile-wrap {
  padding: 12px;
  padding-top: 14px;
  padding-bottom: 14px;
  display: block;
  text-decoration: none;
}
.pop-over-info.pop-over-profile .new-profile-tip {
  padding-top: 0;
}
.pop-over-actions {
  border-bottom: 1px solid #484848;
  position: relative;
}
.pop-over-actions .action-description {
  margin-top: 0;
}
.pop-over-actions .button {
  display: inline-block;
}
.project-pop {
  left: 20px;
  top: 24px;
}
.project-pop .pop-over-info {
  padding-bottom: 12px;
}
.project-pop .project-avatar-image {
  width: 21%;
  border-radius: 3px;
  float: left;
  cursor: pointer;
}
.project-pop .project-privacy {
  margin-top: 10px;
  display: inline-block;
}
.project-pop .project-privacy .button-private {
  background-color: #b98e01;
  width: 24px;
  height: 18px;
}
.project-pop .project-privacy .button-private:hover {
  background-color: #c79d11;
}
.project-pop .project-privacy .button-public {
  width: 24px;
  height: 18px;
  opacity: 0.7;
}
.project-pop .project-info-container {
  position: relative;
  overflow: auto;
}
.project-pop .project-info-meta {
  float: left;
  width: 75%;
  margin-left: 4%;
}
.project-pop .project-name {
  cursor: text;
  font-weight: bold;
}
.project-pop .project-name[disabled="true"] {
  font-family: "Benton Sans", Helvetica, Sans-serif;
}
.project-pop .project-description {
  outline: none;
  border-bottom: 1px solid #484848;
  padding-bottom: 2px;
  position: relative;
  margin-top: 12px;
  margin-bottom: 0;
}
.project-pop .project-description.read-only {
  margin-top: 8px;
  border-color: transparent;
}
.project-pop .project-description-loader {
  position: absolute;
  top: 0;
  right: 0;
}
.project-pop .project-name-loader {
  position: absolute;
  right: 0;
}
.project-pop .loader {
  width: 16px;
  height: 16px;
}
.project-pop .pop-over-actions {
  padding-bottom: 3px;
}
.project-pop .project-avatar-loader {
  float: left;
  width: 21%;
}
.project-pop .project-avatar-loader .loader {
  width: 30px;
  height: 30px;
}
.new-project-pop {
  left: 20px;
  top: 24px;
}
.new-project-pop .octocat {
  margin-left: 0;
  margin-right: 5px;
  width: 18px;
  height: 18px;
}
.share-pop {
  left: 3px;
  top: 15px;
  opacity: 1;
  color: #dadada;
  max-height: calc(100vh - 90px);
}
.share-pop .loader {
  height: 21px;
  width: 21px;
}
.share-pop span {
  position: relative;
}
.share-pop .copy {
  position: absolute;
  cursor: pointer;
  right: 0;
  top: 0;
}
.share-pop .pop-title .emoji {
  margin: 0;
  margin-right: 5px;
}
.share-pop .pop-over-input {
  font-weight: normal;
}
.share-pop .secrets-sidebar-icon {
  background-repeat: no-repeat;
  background-position-y: center;
  background-position-x: 5px;
  padding-left: 25px;
  background-position: initial;
  margin: 0;
}
.share-pop .app-link {
  width: 85%;
  overflow: hidden;
  white-space: nowrap;
  display: inline-block;
  color: #418cab;
  vertical-align: middle;
  text-decoration: underline;
}
.share-pop .app-link:hover {
  text-decoration: none;
}
.share-pop .show-app-icon {
  width: 24px;
  height: 12px;
  background-size: contain;
  margin-right: 2px;
  cursor: default;
  vertical-align: 0px;
  opacity: 0.7;
}
.share-buttons-pop {
  left: 3px;
  top: 15px;
}
.share-buttons-pop .input-wrap {
  position: relative;
  margin-top: 12px;
}
.share-buttons-pop .pop-over-input {
  font-weight: normal;
}
.share-buttons-pop .copy {
  position: absolute;
  cursor: pointer;
  right: 0;
  top: -2px;
}
.share-buttons-pop .more-info {
  margin-bottom: 0;
}
.project-picker {
  padding-bottom: 2px;
}
.project-picker .projects {
  margin: 0;
  padding: 0;
}
.project-picker a {
  text-decoration: none;
  font-weight: 600;
}
.project-picker a:hover {
  text-decoration: underline;
}
.project-picker .project {
  list-style-type: none;
  padding-bottom: 12px;
}
.project-picker .project .remove {
  visibility: hidden;
}
.project-picker .project:hover .remove {
  visibility: initial;
}
.project-picker .project-name {
  padding-right: 2px;
  font-weight: bold;
}
.project-picker .project-description {
  color: #dadada;
  font-weight: normal;
  margin-top: 0;
  margin-bottom: 0;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
}
.pop-over-filter-section {
  padding-bottom: 0;
}
.pop-over-supplementary-info p {
  margin: 0;
  color: #9b9b9b;
  line-height: 20px;
}
.pop-over-supplementary-info a {
  color: #9b9b9b;
}
.pop-over-supplementary-info a:hover {
  text-decoration: none;
}
.entity-pop .segmented-buttons,
.user-options-pop .segmented-buttons {
  display: block;
}
.entity-pop .button-thanks,
.user-options-pop .button-thanks {
  display: block;
}
.entity-pop .avatar,
.user-options-pop .avatar {
  width: 44px;
  height: 44px;
  vertical-align: middle;
  margin-right: 10px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}
.entity-pop .anon-avatar,
.user-options-pop .anon-avatar {
  background-size: 26px;
  background-position: center 11px;
  border: 6px solid transparent;
}
.entity-pop .user-info,
.user-options-pop .user-info {
  display: inline-block;
  vertical-align: middle;
  line-height: 20px;
}
.entity-pop .name,
.user-options-pop .name,
.entity-pop .login,
.user-options-pop .login {
  font-weight: bold;
  margin: 0;
}
.entity-pop .login,
.user-options-pop .login {
  color: #727272;
  font-weight: 600;
}
.entity-pop .time-offset,
.user-options-pop .time-offset {
  margin: 0;
  margin-bottom: 12px;
  color: #9b9b9b;
}
.entity-pop .button,
.user-options-pop .button,
.entity-pop button,
.user-options-pop button {
  -webkit-user-select: initial;
     -moz-user-select: initial;
      -ms-user-select: initial;
          user-select: initial;
}
.entity-pop .button .emoji,
.user-options-pop .button .emoji,
.entity-pop button .emoji,
.user-options-pop button .emoji {
  cursor: pointer;
  margin: 0;
}
.entity-pop .button-with-avatar .emoji,
.user-options-pop .button-with-avatar .emoji {
  cursor: pointer;
  margin-left: 2px;
  border-radius: 3px;
}
.entity-pop .button-with-avatar .anon-avatar,
.user-options-pop .button-with-avatar .anon-avatar {
  background-position: center 7px;
  border-width: 0;
  background-size: 75%;
}
.entity-pop .pop-over-actions,
.user-options-pop .pop-over-actions {
  padding-bottom: 3px;
  color: #9b9b9b;
}
.entity-pop .pop-over-actions .thanks,
.user-options-pop .pop-over-actions .thanks {
  margin-bottom: 12px;
  margin-top: -12px;
}
.entity-pop .emoji,
.user-options-pop .emoji {
  cursor: default;
  margin-right: 5px;
  margin-left: 0;
}
.entity-pop .profile-description,
.user-options-pop .profile-description {
  margin: 0;
  margin-bottom: 12px;
  line-height: 20px;
  color: #727272;
}
.entity-pop .github-sign-up,
.user-options-pop .github-sign-up {
  padding-bottom: 12px;
}
.entity-pop .editing-location,
.user-options-pop .editing-location {
  font-size: 13px;
  font-family: Menlo, Consolas, Monaco, "Lucida Console", Monospace;
  margin-top: 2px;
  margin-bottom: 12px;
}
.entity-pop .offline-message,
.user-options-pop .offline-message {
  margin-top: 2px;
  margin-bottom: 12px;
  color: #9b9b9b;
}
.entity-pop .user-teams .avatar,
.user-options-pop .user-teams .avatar {
  width: 25px;
  height: 25px;
  border-radius: 0;
  margin: 0;
}
.entity-pop .user-teams a:first-child .avatar,
.user-options-pop .user-teams a:first-child .avatar {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.entity-pop .user-teams a:last-child .avatar,
.user-options-pop .user-teams a:last-child .avatar {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
.entity-pop .entity-description,
.user-options-pop .entity-description {
  padding: 12px;
  padding-top: 0;
  margin: 0;
}
.entity-pop .entity-description img,
.user-options-pop .entity-description img {
  max-width: 100%;
  margin-top: 5px;
  border-radius: 3px;
}
.entity-pop .entity-description p:first-child,
.user-options-pop .entity-description p:first-child {
  margin-top: 0;
}
.entity-pop .entity-description p:last-child,
.user-options-pop .entity-description p:last-child {
  margin-bottom: 0;
}
.user-options-pop {
  top: 24px;
  right: 82px;
  left: initial;
}
.user-options-pop .pop-over-actions {
  padding-bottom: 3px;
}
@media (max-width: 580px) {
  .user-options-pop {
    right: 20px;
  }
}
.wide-pop {
  width: 90%;
  max-width: 380px;
}
.pop-list .pop-list-title {
  display: inline-block;
  margin-right: 15px;
  font-weight: bold;
  vertical-align: middle;
}
.pop-list .pop-list-title .emoji {
  cursor: pointer;
}
.pop-list .title-has-no-emoji {
  margin-top: -2px;
}
.pop-list .pop-list-results {
  padding: 6px;
  overflow-y: auto;
  max-height: 500px;
}
.pop-list .pop-list-results .results {
  margin: 0;
  padding-left: 0;
}
.pop-list .pop-list-results .results .result {
  display: block;
  position: relative;
  text-decoration: none;
}
.pop-list .pop-list-results .results .result:hover,
.pop-list .pop-list-results .results .result.hover,
.pop-list .pop-list-results .results .result:focus,
.pop-list .pop-list-results .results .result.active {
  background-color: #418cab;
}
.pop-list .pop-list-results .results .result:hover a,
.pop-list .pop-list-results .results .result.hover a,
.pop-list .pop-list-results .results .result:focus a,
.pop-list .pop-list-results .results .result.active a {
  color: #160f19;
}
.pop-list .pop-list-results .result {
  list-style-type: none;
  cursor: pointer;
  border-bottom: 1px solid #404040;
  padding: 6px;
  padding-top: 12px;
  padding-bottom: 12px;
}
.pop-list .pop-list-results .result:hover,
.pop-list .pop-list-results .result.hover,
.pop-list .pop-list-results .result:focus,
.pop-list .pop-list-results .result.active {
  border-radius: 3px;
  outline: none;
  color: #160f19;
}
.pop-list .pop-list-results .result:hover .result-type,
.pop-list .pop-list-results .result.hover .result-type,
.pop-list .pop-list-results .result:focus .result-type,
.pop-list .pop-list-results .result.active .result-type {
  color: #dadada;
}
.pop-list .pop-list-results .result:hover .result-description,
.pop-list .pop-list-results .result.hover .result-description,
.pop-list .pop-list-results .result:focus .result-description,
.pop-list .pop-list-results .result.active .result-description {
  color: rgba(255,255,255,0.6);
}
.pop-list .pop-list-results .result:hover .extension-type,
.pop-list .pop-list-results .result.hover .extension-type,
.pop-list .pop-list-results .result:focus .extension-type,
.pop-list .pop-list-results .result.active .extension-type {
  color: #160f19;
  background-color: transparent;
}
.pop-list .pop-list-results .result:hover .result-name,
.pop-list .pop-list-results .result.hover .result-name,
.pop-list .pop-list-results .result:focus .result-name,
.pop-list .pop-list-results .result.active .result-name {
  color: #160f19;
}
.pop-list .pop-list-results .other .result:hover,
.pop-list .pop-list-results .other .result.hover,
.pop-list .pop-list-results .other .result:focus {
  background-color: #bd3874;
}
.pop-list .pop-list-results .logic .result:hover,
.pop-list .pop-list-results .logic .result.hover,
.pop-list .pop-list-results .logic .result:focus {
  background-color: #7059e0;
}
.pop-list .pop-list-results .data .result:hover,
.pop-list .pop-list-results .data .result.hover,
.pop-list .pop-list-results .data .result:focus {
  background-color: #ce5c48;
}
.pop-list .pop-list-results .info .result:hover,
.pop-list .pop-list-results .info .result.hover,
.pop-list .pop-list-results .info .result:focus {
  background-color: #00b0b2;
}
.pop-list .pop-list-results .view .result:hover,
.pop-list .pop-list-results .view .result.hover,
.pop-list .pop-list-results .view .result:focus {
  background-color: #b39519;
}
.pop-list .pop-list-results .style .result:hover,
.pop-list .pop-list-results .style .result.hover,
.pop-list .pop-list-results .style .result:focus {
  background-color: #a158ab;
}
.pop-list .pop-list-results .result-type {
  display: inline-block;
  background-color: #36945b;
  border-radius: 5px;
  margin-right: 5px;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 6px;
}
.pop-list .pop-list-results .result-name {
  color: #dadada;
  display: inline-block;
}
.pop-list .pop-list-results .result-loader {
  display: inline;
}
.pop-list .pop-list-results .result-loader .loader {
  display: inline-block;
  margin-left: 5px;
  width: 16px;
  height: 16px;
}
.pop-list .pop-list-results .result-description {
  color: #727272;
  word-break: break-word;
  font-family: Menlo, Consolas, Monaco, "Lucida Console", Monospace;
  font-size: 12px;
  line-height: 18px;
  padding-top: 5px;
}
.pop-list .pop-list-results .see-all {
  color: #727272;
  border-bottom: none;
  padding-bottom: 6px;
}
.pop-list .pop-list-results .result-match {
  font-weight: 600;
}
.pop-list .pop-list-results .avatar {
  margin-right: 5px;
  display: inline-block;
  vertical-align: sub;
  width: 18px;
  height: auto;
  border-radius: 3px;
  background-color: transparent;
}
.pop-list .result-icon {
  display: inline-block;
  margin-left: 0;
  margin-right: 5px;
}
.advanced-options-pop {
  left: 20px;
  top: 24px;
}
.advanced-options-pop .loader {
  height: 21px;
  width: 21px;
}
.advanced-options-pop .pop-over-actions {
  padding-bottom: 3px;
}
.advanced-options-pop .git-url .emoji {
  margin: 0;
  margin-right: 5px;
}
.advanced-options-pop .pop-over-input {
  font-weight: normal;
}
.advanced-options-pop .copy {
  right: 0;
}
.advanced-options-pop .write-container {
  margin-top: 14px;
}
.advanced-options-pop .write-container .copy {
  position: initial;
}
.projects-select-pop {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  left: 20px;
  top: 24px;
}
.projects-select-pop .new-project-button {
  cursor: pointer;
  float: right;
  margin-top: 2px;
}
.projects-select-pop .emoji {
  margin-right: 5px;
  display: inline-block;
  vertical-align: middle;
}
.projects-select-pop .result-type {
  vertical-align: middle;
}
.projects-select-pop .result-name {
  vertical-align: sub;
  margin-bottom: 0;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.projects-select-pop .projects-list-loading {
  margin-top: 12px;
  margin-bottom: 12px;
}
.mini-pop {
  max-width: 110px;
  font-family: "Benton Sans", Helvetica, Sans-serif;
  color: #dadada;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  position: absolute;
}
.mini-pop .pop-over-actions {
  padding: 0;
}
.mini-pop .mini-pop-action {
  font-weight: 600;
  cursor: pointer;
  padding: 12px;
  padding-top: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid #404040;
}
.new-file-pop {
  top: 22px;
  left: 82px;
}
.new-file-pop input {
  margin-bottom: 1rem;
}
.new-file-pop .add-file {
  margin-bottom: 0;
}
.new-file-pop .button-small {
  margin-bottom: 12px;
}
.new-file-pop .last-section {
  padding-bottom: 0;
}
.new-file-pop .loader {
  width: 16px;
  height: 16px;
  margin-left: 5px;
  vertical-align: bottom;
}
.project-search-pop {
  width: 96%;
  max-width: 560px;
  top: 22px;
  left: 5%;
  overflow-y: auto;
  max-height: 500px;
}
.project-search-pop .loader-ellipses {
  padding-left: 10px;
}
.project-search-pop .pop-over-actions {
  padding: 6px;
  border-bottom: none;
}
.project-search-pop .emoji {
  margin-right: 5px;
  vertical-align: sub;
}
.project-search-pop .results {
  margin: 0;
  padding-left: 0;
}
.project-search-pop .results .result {
  display: block;
  position: relative;
  text-decoration: none;
}
.project-search-pop .results .result:hover,
.project-search-pop .results .result.hover,
.project-search-pop .results .result:focus,
.project-search-pop .results .result.active {
  background-color: #418cab;
}
.project-search-pop .results .result:hover a,
.project-search-pop .results .result.hover a,
.project-search-pop .results .result:focus a,
.project-search-pop .results .result.active a {
  color: #160f19;
}
.project-search-pop .result {
  list-style-type: none;
  cursor: pointer;
  border-bottom: 1px solid #404040;
  padding: 6px;
  padding-top: 12px;
  padding-bottom: 12px;
}
.project-search-pop .result:hover,
.project-search-pop .result.hover,
.project-search-pop .result:focus,
.project-search-pop .result.active {
  border-radius: 3px;
  outline: none;
  color: #160f19;
}
.project-search-pop .result:hover .result-type,
.project-search-pop .result.hover .result-type,
.project-search-pop .result:focus .result-type,
.project-search-pop .result.active .result-type {
  color: #dadada;
}
.project-search-pop .result:hover .result-description,
.project-search-pop .result.hover .result-description,
.project-search-pop .result:focus .result-description,
.project-search-pop .result.active .result-description {
  color: rgba(255,255,255,0.6);
}
.project-search-pop .result:hover .extension-type,
.project-search-pop .result.hover .extension-type,
.project-search-pop .result:focus .extension-type,
.project-search-pop .result.active .extension-type {
  color: #160f19;
  background-color: transparent;
}
.project-search-pop .result:hover .result-name,
.project-search-pop .result.hover .result-name,
.project-search-pop .result:focus .result-name,
.project-search-pop .result.active .result-name {
  color: #160f19;
}
.project-search-pop .other .result:hover,
.project-search-pop .other .result.hover,
.project-search-pop .other .result:focus {
  background-color: #bd3874;
}
.project-search-pop .logic .result:hover,
.project-search-pop .logic .result.hover,
.project-search-pop .logic .result:focus {
  background-color: #7059e0;
}
.project-search-pop .data .result:hover,
.project-search-pop .data .result.hover,
.project-search-pop .data .result:focus {
  background-color: #ce5c48;
}
.project-search-pop .info .result:hover,
.project-search-pop .info .result.hover,
.project-search-pop .info .result:focus {
  background-color: #00b0b2;
}
.project-search-pop .view .result:hover,
.project-search-pop .view .result.hover,
.project-search-pop .view .result:focus {
  background-color: #b39519;
}
.project-search-pop .style .result:hover,
.project-search-pop .style .result.hover,
.project-search-pop .style .result:focus {
  background-color: #a158ab;
}
.project-search-pop .result-type {
  display: inline-block;
  background-color: #36945b;
  border-radius: 5px;
  margin-right: 5px;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 6px;
}
.project-search-pop .result-name {
  color: #dadada;
  display: inline-block;
}
.project-search-pop .result-loader {
  display: inline;
}
.project-search-pop .result-loader .loader {
  display: inline-block;
  margin-left: 5px;
  width: 16px;
  height: 16px;
}
.project-search-pop .result-description {
  color: #727272;
  word-break: break-word;
  font-family: Menlo, Consolas, Monaco, "Lucida Console", Monospace;
  font-size: 12px;
  line-height: 18px;
  padding-top: 5px;
}
.project-search-pop .see-all {
  color: #727272;
  border-bottom: none;
  padding-bottom: 6px;
}
.project-search-pop .result-match {
  font-weight: 600;
}
.project-search-pop .avatar {
  margin-right: 5px;
  display: inline-block;
  vertical-align: sub;
  width: 18px;
  height: auto;
  border-radius: 3px;
  background-color: transparent;
}
.sign-in-pop,
.sign-in-email-pop,
.sign-in-code-pop {
  top: 35px;
  right: 82px;
  left: initial;
}
.sign-in-email-pop,
.sign-in-code-pop {
  top: 25px;
}
.sign-in-code-pop .input-wrap {
  margin-bottom: 12px;
}
.sign-in-email-pop .input-wrap {
  margin-bottom: 12px;
}
.sign-in-email-pop .status {
  margin: 0;
  margin-bottom: 12px;
}
.about-pop {
  right: 20px;
  left: initial;
  top: 24px;
}
.about-pop .pop-over-actions {
  padding-bottom: 3px;
}
.small-viewport-options-pop {
  right: 20px;
  left: initial;
  top: 24px;
}
.small-viewport-options-pop .pop-over-actions {
  padding-bottom: 3px;
}
.small-viewport-options-pop .sign-up {
  padding-bottom: 14px;
}
.add-asset-pop {
  left: 15px;
  top: 33px;
}
.add-asset-pop .primary-actions {
  padding-bottom: 3px;
}
.add-asset-pop input {
  font-weight: normal;
}
.add-package-pop {
  left: 15px;
  top: 33px;
  overflow-y: auto;
  max-height: 500px;
}
.add-package-pop .pop-over-actions {
  padding: 6px;
  border-bottom: none;
}
.add-package-pop .packages-list-loading {
  margin-top: 12px;
  margin-bottom: 12px;
}
.add-package-pop .no-results {
  margin-left: 6px;
}
.add-package-pop .result-description {
  width: 80%;
}
.add-package-pop .result .button-docs {
  color: #dadada;
}
.add-package-pop .result:hover .button-docs {
  color: #160f19;
  background-color: #ce5c48;
  border-color: #160f19;
}
.add-package-pop .result .button-docs {
  position: absolute;
  right: 6px;
  top: 15px;
}
.add-package-pop .result .button-docs:hover {
  background-color: #282828;
  color: #dadada;
  border-color: #dadada;
}
.add-package-pop .results {
  margin: 0;
  padding-left: 0;
}
.add-package-pop .results .result {
  display: block;
  position: relative;
  text-decoration: none;
}
.add-package-pop .results .result:hover,
.add-package-pop .results .result.hover,
.add-package-pop .results .result:focus,
.add-package-pop .results .result.active {
  background-color: #418cab;
}
.add-package-pop .results .result:hover a,
.add-package-pop .results .result.hover a,
.add-package-pop .results .result:focus a,
.add-package-pop .results .result.active a {
  color: #160f19;
}
.add-package-pop .result {
  list-style-type: none;
  cursor: pointer;
  border-bottom: 1px solid #404040;
  padding: 6px;
  padding-top: 12px;
  padding-bottom: 12px;
}
.add-package-pop .result:hover,
.add-package-pop .result.hover,
.add-package-pop .result:focus,
.add-package-pop .result.active {
  border-radius: 3px;
  outline: none;
  color: #160f19;
}
.add-package-pop .result:hover .result-type,
.add-package-pop .result.hover .result-type,
.add-package-pop .result:focus .result-type,
.add-package-pop .result.active .result-type {
  color: #dadada;
}
.add-package-pop .result:hover .result-description,
.add-package-pop .result.hover .result-description,
.add-package-pop .result:focus .result-description,
.add-package-pop .result.active .result-description {
  color: rgba(255,255,255,0.6);
}
.add-package-pop .result:hover .extension-type,
.add-package-pop .result.hover .extension-type,
.add-package-pop .result:focus .extension-type,
.add-package-pop .result.active .extension-type {
  color: #160f19;
  background-color: transparent;
}
.add-package-pop .result:hover .result-name,
.add-package-pop .result.hover .result-name,
.add-package-pop .result:focus .result-name,
.add-package-pop .result.active .result-name {
  color: #160f19;
}
.add-package-pop .other .result:hover,
.add-package-pop .other .result.hover,
.add-package-pop .other .result:focus {
  background-color: #bd3874;
}
.add-package-pop .logic .result:hover,
.add-package-pop .logic .result.hover,
.add-package-pop .logic .result:focus {
  background-color: #7059e0;
}
.add-package-pop .data .result:hover,
.add-package-pop .data .result.hover,
.add-package-pop .data .result:focus {
  background-color: #ce5c48;
}
.add-package-pop .info .result:hover,
.add-package-pop .info .result.hover,
.add-package-pop .info .result:focus {
  background-color: #00b0b2;
}
.add-package-pop .view .result:hover,
.add-package-pop .view .result.hover,
.add-package-pop .view .result:focus {
  background-color: #b39519;
}
.add-package-pop .style .result:hover,
.add-package-pop .style .result.hover,
.add-package-pop .style .result:focus {
  background-color: #a158ab;
}
.add-package-pop .result-type {
  display: inline-block;
  background-color: #36945b;
  border-radius: 5px;
  margin-right: 5px;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 6px;
}
.add-package-pop .result-name {
  color: #dadada;
  display: inline-block;
}
.add-package-pop .result-loader {
  display: inline;
}
.add-package-pop .result-loader .loader {
  display: inline-block;
  margin-left: 5px;
  width: 16px;
  height: 16px;
}
.add-package-pop .result-description {
  color: #727272;
  word-break: break-word;
  font-family: Menlo, Consolas, Monaco, "Lucida Console", Monospace;
  font-size: 12px;
  line-height: 18px;
  padding-top: 5px;
}
.add-package-pop .see-all {
  color: #727272;
  border-bottom: none;
  padding-bottom: 6px;
}
.add-package-pop .result-match {
  font-weight: 600;
}
.add-package-pop .avatar {
  margin-right: 5px;
  display: inline-block;
  vertical-align: sub;
  width: 18px;
  height: auto;
  border-radius: 3px;
  background-color: transparent;
}
.waiting-for-invite-pop .pop-over-actions {
  padding-bottom: 3px;
}
.waiting-for-invite-pop .description .loader {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-left: 5px;
  margin-top: -2px;
}
.accepting-invite-pop .avatar {
  width: 44px;
  height: 44px;
  vertical-align: middle;
  margin-right: 10px;
  border: none;
  border-radius: 8px;
  cursor: auto;
}
.accepting-invite-pop .anon-avatar {
  background-size: 26px;
  background-position: center 11px;
  border: 6px solid transparent;
}
.accepting-invite-pop .user-info {
  display: inline-block;
  vertical-align: middle;
  line-height: 20px;
}
.accepting-invite-pop .name,
.accepting-invite-pop .login {
  font-weight: bold;
  margin: 0;
}
.accepting-invite-pop .login {
  color: #727272;
  font-weight: 600;
}
.accepting-invite-pop .pop-over-actions {
  padding-bottom: 3px;
  color: #9b9b9b;
}
.project-avatar-pop {
  left: 20px;
}
.project-avatar-pop .pop-over-actions {
  padding-bottom: 3px;
}
.project-avatar-pop .pop-title {
  display: inline-block;
}
.project-avatar-pop .avatar-image {
  max-width: 150px;
  border-radius: 3px;
  margin-bottom: 10px;
}
.ask-for-help-pop {
  top: -1px;
  left: 4px;
  position: relative;
  font-family: "Benton Sans", Helvetica, Sans-serif;
}
.ask-for-help-pop .ask-for-help-section {
  padding-bottom: 3px;
}
.ask-for-help-pop .ask-for-help-input {
  outline: none;
  border-bottom: 1px solid #484848;
  padding-bottom: 2px;
  position: relative;
  margin-top: 0;
  margin-bottom: 1rem;
}
.ask-for-help-pop .tag-input-field {
  margin-bottom: 0;
}
.ask-for-help-pop .read-only {
  background-color: transparent;
  border-color: transparent;
}
.ask-for-help-pop button {
  margin-top: 1rem;
}
.ask-for-help-pop .stop-asking-for-help {
  margin-top: 1rem;
  position: relative;
}
.ask-for-help-pop .stop-asking-for-help button {
  margin-top: 0;
}
.change-license-pop {
  left: 15px;
  top: 33px;
}
.project-status-pop {
  white-space: initial;
  top: 23px;
  left: -90px;
}
.project-status-pop code {
  font-family: Menlo, Consolas, Monaco, "Lucida Console", Monospace;
  background-color: #333;
  font-size: 13px;
}
.project-status-pop .status-badge {
  text-transform: capitalize;
  display: inline-block;
}
.project-status-pop .status-badge .status {
  background-color: #7b7b7b;
  margin: 0;
  margin-right: 5px;
}
.project-status-pop .status-badge .stopped {
  background-color: #ff5d5d;
}
.project-status-pop .status-badge .unstable {
  background-color: #ffaabf;
}
.project-status-pop .info-description {
  display: inline-block;
  font-size: 14px;
  line-height: 22px;
}
.custom-domain-pop {
  left: 20px;
  top: 24px;
}
.custom-domain-pop .pop-over-input {
  font-weight: normal;
}
.custom-domain-pop .add-domain {
  margin-top: 12px;
  margin-bottom: 0;
}
.custom-domain-pop .action-description:last-child {
  margin-bottom: 0;
}
.custom-domain-pop .status {
  margin-left: 0;
  margin-bottom: 12px;
}
.custom-domain-pop .bold {
  font-weight: 600;
}
.custom-domain-pop .flyio {
  padding-left: 5px;
  width: 16px;
}
.notifications {
  z-index: 11;
  top: 9px;
  right: 10px;
  position: absolute;
  margin-left: 10px;
}
.notifications .notification {
  background-color: #8383ff;
  color: #160f19;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 8px;
  border-radius: 5px;
  max-width: 260px;
  -webkit-animation-name: hideme;
          animation-name: hideme;
  -webkit-animation-delay: 2.5s;
          animation-delay: 2.5s;
  -webkit-animation-duration: 0.1s;
          animation-duration: 0.1s;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-direction: forward;
          animation-direction: forward;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-timing-function: ease-out;
          animation-timing-function: ease-out;
  margin-bottom: 5px;
  line-height: 16px;
}
.notifications .notification p {
  margin: 0;
}
.notifications .notification hr {
  opacity: 0.5;
  height: 1px;
  border: 0;
  background-color: #160f19;
}
.notifications .notification .loader {
  width: 20px;
  height: 19px;
  margin: 0;
  margin-right: 5px;
}
.notifications .notifyCopied,
.notifications .notifyAutosave,
.notifications .notifyPackageUpdated,
.notifications .notifyPackageAdded,
.notifications .notifyPreviewWindowOpened,
.notifications .notifyJoinedProject,
.notifications .notifyEditorRewoundProject,
.notifications .notifyCanNowUseCustomDomains,
.notifications .notifyCanEdit {
  background-color: #55ff84;
}
.notifications .notifyReconnected,
.notifications .notifyJoinedProject,
.notifications .notifyWelcomeImportedProjectUser {
  background-color: #55ff84;
  -webkit-animation-delay: 5s;
          animation-delay: 5s;
}
.notifications .notifyGithubImportSuccess,
.notifications .notifyGithubExportSuccess {
  background-color: #55ff84;
  -webkit-animation-delay: 5s;
          animation-delay: 5s;
}
.notifications .notifyAutosave {
  padding-right: 13px;
}
.notifications .notifyUploadFailure,
.notifications .notifyGenericError {
  background-color: #ff5d5d;
  -webkit-animation-delay: 10s;
          animation-delay: 10s;
  -webkit-user-select: text;
     -moz-user-select: text;
      -ms-user-select: text;
          user-select: text;
}
.notifications .notifyConnectionError {
  background-color: #ff5d5d;
  -webkit-animation: none;
          animation: none;
}
.notifications .notifyGithubImporting,
.notifications .notifyGithubExporting,
.notifications .notifyAnonUserLimits,
.notifications .notifyAnonProjectLimits,
.notifications .notifyRemixToEdit,
.notifications .notifyEditorIsHotRemixing,
.notifications .notifyEditorIsPreviewingRewind,
.notifications .notifyEditorIsRewindingProject,
.notifications .notifyCanNowUseCustomDomains,
.notifications .notifyOpenInFullEditor {
  -webkit-animation: none;
          animation: none;
}
.notifications .notifyRemixToEdit,
.notifications .notifyEditorIsPreviewingRewind {
  background-color: #484848;
}
.notifications .notifyEditorIsPreviewingRewind .rewind {
  vertical-align: -1px;
  opacity: 1;
}
.notifications .notifyCopyFailure {
  -webkit-animation-delay: 5s;
          animation-delay: 5s;
}
.notifications .notifyInvalidFileName {
  background-color: #ff5d5d;
  -webkit-animation-delay: 5s;
          animation-delay: 5s;
  max-width: 285px;
}
.notifications .notifyUploading {
  -webkit-animation: none;
          animation: none;
  background-repeat: no-repeat;
  background-position: 8px 5px;
  padding-left: 28px;
}
.notifications .notifyprojectIsReadOnlyForCurrentUser {
  width: 135px;
}
.notifications .notifyReconnecting {
  -webkit-animation: none;
          animation: none;
}
.notifications .notifyReconnecting .loader-ellipses {
  display: inline-block;
  padding: 0;
  width: 10px;
}
.notifications .notifyProjectSave {
  background-color: #484848;
}
.notifications .notifyCanNowUseCustomDomains .sparkling_heart {
  margin: 0;
  margin-right: 5px;
  vertical-align: middle;
  cursor: auto;
}
.notifications .notifyDeletedProject {
  -webkit-animation-delay: 6s;
          animation-delay: 6s;
}
.notifications .notifyDeletedProject .deleted-project-avatar {
  border-radius: 3px;
  display: inline-block;
  width: 18px;
  vertical-align: middle;
  margin-left: 5px;
}
.notifications .button-in-notification-container {
  pointer-events: auto;
  overflow: none;
  margin-top: 5px;
  margin-bottom: 2px;
}
.notifications .button-in-notification-container :last-child {
  margin-right: 0;
}
.notifications .button-in-notification-container .button-in-notification {
  height: 27px;
  vertical-align: middle;
  margin-right: 5px;
}
.notifications .button-in-notification-container.cta-container {
  padding-bottom: 4px;
}
.notifications .rewind-tape-container {
  position: relative;
  width: 30px;
  display: inline-block;
  margin-right: 5px;
  vertical-align: middle;
}
.notifications .rewind-tape-container .rewind-tape-reel {
  -webkit-animation: rotate-tape-reel 1s infinite linear;
          animation: rotate-tape-reel 1s infinite linear;
}
.notifications .rewind-tape-container.rewound-tape .rewind-tape-reel {
  -webkit-animation: rotate-tape-reel-rewound 5s cubic-bezier(0.165, 0.84, 0.44, 1);
          animation: rotate-tape-reel-rewound 5s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.notifications .notifyCloneError {
  -webkit-animation: none;
          animation: none;
  background-color: #ff5d5d;
}
@-webkit-keyframes hideme {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes hideme {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@-webkit-keyframes rotate-tape-reel {
  to {
    -webkit-transform: rotate(-360deg);
            transform: rotate(-360deg);
  }
}
@keyframes rotate-tape-reel {
  to {
    -webkit-transform: rotate(-360deg);
            transform: rotate(-360deg);
  }
}
@-webkit-keyframes rotate-tape-reel-rewound {
  20% {
    -webkit-transform: rotate(-1800deg);
            transform: rotate(-1800deg);
  }
  100% {
    -webkit-transform: rotate(-1801deg);
            transform: rotate(-1801deg);
  }
}
@keyframes rotate-tape-reel-rewound {
  20% {
    -webkit-transform: rotate(-1800deg);
            transform: rotate(-1800deg);
  }
  100% {
    -webkit-transform: rotate(-1801deg);
            transform: rotate(-1801deg);
  }
}
.overlay-background {
  background-color: rgba(0,0,0,0.8);
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  cursor: default;
}
.overlay {
  background-color: #160f19;
  color: #dadada;
  border: 2px #dadada solid;
  border-radius: 5px;
  max-width: 640px;
  width: 94%;
  max-height: 90%;
  height: initial;
  overflow-y: auto;
  display: block;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  padding: 0;
  margin-left: auto;
  margin-right: auto;
}
.overlay .overlay-title {
  font-weight: bold;
}
.overlay .overlay-title .emoji {
  cursor: auto;
}
.overlay a {
  color: #418cab;
}
.overlay a:hover {
  text-decoration: none;
}
.overlay.overlay-narrow {
  max-width: 460px;
}
.overlay.error-overlay {
  max-width: 500px;
}
.overlay .last-button {
  margin-bottom: 0;
}
.overlay textarea {
  height: 82px;
  border: 1px solid #484848;
  border-radius: 3px;
  padding: 6px;
  box-shadow: 4px 4px #484848;
}
.overlay .marketing-section {
  background-color: #7059e0;
  border-radius: 5px;
  margin-top: 12px;
  padding: 12px;
}
.keyboard-shortcuts .key {
  display: inline-block;
  border-radius: 3px;
  background-repeat: no-repeat;
  background-position: center;
  height: 25px;
  vertical-align: middle;
  padding-left: 8px;
  padding-right: 8px;
  margin-right: 10px;
  line-height: 28px;
  margin-bottom: 2px;
  background-color: #7059e0;
}
.keyboard-shortcuts .shortcut {
  font-family: Menlo, Consolas, Monaco, "Lucida Console", Monospace;
  font-size: 13px;
  line-height: 34px;
}
.keyboard-shortcuts .shortcut .shortcuts {
  display: inline-block;
}
.drag-to-upload {
  border: none;
  background-color: transparent;
  overflow: hidden;
}
.drag-to-upload p {
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  margin-top: 0;
  margin-bottom: 0.5em;
}
.drag-to-upload .emoji {
  width: 30px;
  height: 30px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.new-stuff-overlay .new-stuff-cat {
  width: 50px;
  height: 52px;
  background-size: cover;
  margin: 0;
  float: left;
  margin-right: 10px;
}
.new-stuff-overlay .overlay-title {
  margin-bottom: 8px;
}
.new-stuff-overlay article {
  margin-top: 1rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid #484848;
}
.new-stuff-overlay article:last-child {
  margin-bottom: auto;
  border: none;
}
.new-stuff-overlay article p {
  margin-bottom: 1rem;
}
.new-stuff-overlay article .title {
  margin-top: 0;
  font-weight: 600;
  font-size: 13px;
  background-color: #7059e0;
  padding: 2px 6px;
  padding-top: 4px;
}
.new-stuff-overlay article .body {
  margin-top: 0.5rem;
  margin-bottom: 1rem;
}
.new-stuff-overlay article .body h2 {
  font-size: 13px;
  font-weight: 600;
}
.new-stuff-overlay article .body p {
  line-height: 19px;
}
.new-stuff-overlay article .body code {
  font-family: Menlo, Consolas, Monaco, "Lucida Console", Monospace;
  background-color: #4e4e4e;
  font-size: 13px;
}
.new-stuff-overlay article .body ul {
  padding-left: 1.5rem;
}
.new-stuff-overlay article .body li {
  margin-bottom: 0.6rem;
}
.new-stuff-overlay article .body li:last-child {
  margin-bottom: auto;
}
.new-stuff-overlay article .body img {
  display: block;
  margin-top: 1rem;
  margin-bottom: 1rem;
  max-width: 100%;
  border-radius: 5px;
  border: 1px solid #666;
}
.new-stuff-overlay article .image {
  border-radius: 5px;
}
.share-embed-overlay {
  max-width: 960px;
}
.share-embed-overlay .pop-over-input {
  font-weight: normal;
}
.share-embed-overlay .input-wrap {
  position: relative;
}
.share-embed-overlay .swap-panes {
  margin: 0;
  margin-bottom: 12px;
}
.share-embed-overlay .toggle-attribution {
  margin: 0;
  margin-bottom: 12px;
}
.share-embed-overlay .copy {
  position: absolute;
  cursor: pointer;
  right: 5px;
  top: 5px;
}
.share-embed-overlay select {
  margin: 0;
  width: 240px;
}
.share-embed-overlay .resizer-wrap {
  display: block;
  height: 9px;
  background-color: #160f19;
  border-top: 1px solid #7b7b7b;
  border-bottom: 1px solid #7b7b7b;
  cursor: ns-resize;
  position: relative;
  margin-bottom: 12px;
}
.share-embed-overlay .resizer-wrap resizer {
  margin-top: 3px;
  border-top: 1px solid #7b7b7b;
  width: 100%;
  height: 1px;
  display: block;
}
.share-embed-overlay .resizer-wrap .resize-arrow {
  position: absolute;
  left: 50%;
  top: -3px;
}
.share-embed-overlay .glitch-embed-wrap {
  height: 420px;
  width: 100%;
  overflow: hidden;
  position: relative;
}
.share-embed-overlay .glitch-embed-iframe {
  height: 100%;
  width: 100%;
  border: 0;
}
.add-license-overlay button {
  margin-right: 0.5rem;
}
.add-license-overlay .information_source {
  margin-left: 0;
}
.error-overlay .pop-over-input {
  font-weight: normal;
  background-color: #282828;
  color: #727272;
}
.asset-details-overlay {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.asset-details-overlay .overlay {
  overflow: visible;
}
.asset-details-overlay .pop-over {
  background-color: #282828;
  max-height: initial;
}
.asset-details-overlay .pop-over-input {
  text-align: center;
  font-weight: 600;
}
.asset-details-overlay .asset-options {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.asset-details-overlay .asset-options .button {
  margin-top: 0;
  margin-right: 10px;
  margin-bottom: 5px;
}
.asset-details-overlay .asset-options .button:last-child {
  margin-right: 0;
}
.asset-details-overlay .pop-over-hero {
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  padding: 0;
  border-bottom: 1px solid #484848;
  background-color: #404040;
}
.asset-details-overlay .pop-over-hero .asset-hero-image {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  max-height: 50vh;
  height: auto;
  width: auto;
  padding: 0;
}
.asset-details-overlay .asset-info {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}
.asset-details-overlay .pop-over-info {
  border: none;
  background-color: transparent;
}
.asset-details-overlay .pop-over-info p,
.asset-details-overlay .pop-over-info input {
  color: #727272;
}
.asset-details-overlay .pop-over-info .date {
  color: #9b9b9b;
}
.asset-details-overlay .pop-over-info .copy {
  position: relative;
  margin: 0;
  right: 0;
}
.asset-details-overlay .asset-url {
  word-break: break-all;
}
.asset-details-overlay p {
  margin-bottom: 12px;
}
.other .pop-over-hero {
  height: 55px;
  background-size: 127px;
}
.other .pop-over-info .copy {
  margin-bottom: 12px;
}
.touch [data-tooltip]::before,
.touch [data-tooltip]::after {
  display: none;
}
[data-tooltip] {
  position: relative;
  box-sizing: border-box;
}
[data-tooltip]::before,
[data-tooltip]::after {
  border: none;
  box-sizing: inherit;
  display: inline-block;
  font-style: normal;
  font-weight: normal;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  -webkit-transform: translateX(50%);
          transform: translateX(50%);
  right: 50%;
  text-align: center;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  top: 100%;
  transition: opacity 0.2s step-start 100ms;
  visibility: hidden;
  z-index: 12;
}
[data-tooltip]::before {
  background: rgba(255,255,255,0.85);
  border-radius: 5px;
  font-size: 12px;
  padding: 6px 8px;
  color: #160f19;
  content: attr(data-tooltip);
  margin-top: 5px;
  white-space: pre;
  word-wrap: break-word;
}
[data-tooltip]::after {
  border: 5px solid transparent;
  border-bottom-color: rgba(255,255,255,0.85);
  content: '';
  margin-top: -5px;
}
[data-tooltip]:hover::before,
[data-tooltip]:hover::after {
  visibility: visible;
  opacity: 1;
}
[data-tooltip-left]::before,
[data-tooltip-left]::after {
  -webkit-transform: translateX(85%);
          transform: translateX(85%);
  right: 20px;
}
[data-tooltip-left-top]::before {
  -webkit-transform: translateX(85%);
          transform: translateX(85%);
  right: 20px;
  top: -40px;
}
[data-tooltip-left-top]::after {
  -webkit-transform: rotate(180deg) translateX(85%);
          transform: rotate(180deg) translateX(85%);
  right: 0;
  top: -4px;
}
[data-tooltip-project-pop]::before,
[data-tooltip-project-pop]::after {
  -webkit-transform: translateX(-10%);
          transform: translateX(-10%);
  left: 15px;
  right: initial;
}
[data-tooltip-right]::before,
[data-tooltip-right]::after {
  -webkit-transform: translateX(10%);
          transform: translateX(10%);
  right: 42%;
}
[data-tooltip-embed-helper]::before,
[data-tooltip-embed-helper]::after {
  -webkit-transform: translateX(55%);
          transform: translateX(55%);
  right: initial;
  left: 15%;
  top: -135%;
}
[data-tooltip-embed-helper]::after {
  -webkit-transform: rotate(180deg) translateX(-5px) translateY(-34px);
          transform: rotate(180deg) translateX(-5px) translateY(-34px);
}
[data-tooltip-embed-helper]::before {
  left: -120%;
  top: -36px;
}
[data-tooltip-embed-helper-button]::after {
  -webkit-transform: rotate(180deg) translateX(-5px) translateY(-31px);
          transform: rotate(180deg) translateX(-5px) translateY(-31px);
}
[data-tooltip-top]::before,
[data-tooltip-top]::after {
  top: -80%;
  right: 45px;
  -webkit-transform: translateX(75%);
          transform: translateX(75%);
}
[data-tooltip-top]::before {
  background-color: #8383ff;
}
[data-tooltip-top]::after {
  border-top-color: #8383ff;
  border-bottom-color: transparent;
  margin-top: 31px;
  right: 35px;
}
[data-tooltip-persistent]::before,
[data-tooltip-persistent]::after {
  visibility: visible;
  opacity: 1;
  font-weight: bold;
}
[data-tooltip-error]::before {
  background-color: #ff5d5d;
}
[data-tooltip-error]::after {
  border-top-color: #ff5d5d;
}
[data-tooltip-hidden]:hover::before,
[data-tooltip-hidden]:hover::after {
  visibility: hidden;
  opacity: 0;
}
[data-notification-tooltip] {
  position: relative;
  box-sizing: border-box;
}
[data-notification-tooltip]::before,
[data-notification-tooltip]::after {
  border: none;
  box-sizing: inherit;
  display: inline-block;
  font-style: normal;
  font-weight: normal;
  pointer-events: none;
  position: absolute;
  text-align: center;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  z-index: 9;
  -webkit-transform: translateX(85%);
          transform: translateX(85%);
  top: 65%;
  right: 10px;
  visibility: visible;
  opacity: 1;
}
[data-notification-tooltip]::before {
  background: #8383ff;
  border-radius: 5px;
  font-size: 12px;
  padding: 6px 8px;
  color: #160f19;
  content: attr(data-notification-tooltip);
  margin-top: 5px;
  white-space: pre;
  word-wrap: break-word;
}
[data-notification-tooltip]::after {
  border: 5px solid transparent;
  border-top-color: #8383ff;
  content: '';
  margin-top: -4px;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
.loader {
  overflow: hidden;
  display: inline-block;
  width: 26px;
  height: 25px;
  position: relative;
  border-radius: 100px;
  background-color: #000;
  vertical-align: middle;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
.loader .moon {
  height: 100%;
  width: 100%;
  border-radius: 100px;
  background-color: #fe84d4;
  position: absolute;
  top: 50%;
  margin-top: -50%;
  margin-left: -50%;
  -webkit-animation: slideMoon 2s ease-out infinite;
          animation: slideMoon 2s ease-out infinite;
  mix-blend-mode: exclusion;
}
.loader .earth {
  height: 100%;
  width: 100%;
  border-radius: 100px;
  background-color: #ffc0cb;
  position: absolute;
  top: 50%;
  margin-top: -50%;
  margin-left: -50%;
  -webkit-animation: slideEarth 3s ease-out infinite;
          animation: slideEarth 3s ease-out infinite;
  mix-blend-mode: exclusion;
}
.loader .asteroid {
  height: 30%;
  width: 30%;
  border-radius: 100px;
  background-color: MediumSpringGreen;
  position: absolute;
  top: 100%;
  margin-top: -50%;
  margin-left: -70%;
  -webkit-animation: slideAsteroid 1.5s ease-in infinite;
          animation: slideAsteroid 1.5s ease-in infinite;
  mix-blend-mode: exclusion;
}
.loader .asteroid-dust {
  height: 25%;
  width: 25%;
  border-radius: 100px;
  background-color: #b46bd2;
  position: absolute;
  top: 100%;
  margin-top: -70%;
  margin-left: -70%;
  -webkit-animation: slideAsteroidDust 1.3s ease-in infinite;
          animation: slideAsteroidDust 1.3s ease-in infinite;
  mix-blend-mode: exclusion;
}
.loader-ellipses {
  font-weight: bold;
  width: 200px;
  font-family: Menlo, Consolas, Monaco, "Lucida Console", Monospace;
  display: block;
  font-size: 13px;
  padding-left: 20px;
}
.loader-ellipses:after {
  overflow: hidden;
  display: inline-block;
  vertical-align: bottom;
  -webkit-animation: ellipsis steps(4, end) 1000ms infinite;
          animation: ellipsis steps(4, end) 1000ms infinite;
  content: "\2026";
  width: 0px;
}
@-webkit-keyframes slideMoon {
  from {
    left: -40%;
  }
  to {
    left: 145%;
  }
}
@keyframes slideMoon {
  from {
    left: -40%;
  }
  to {
    left: 145%;
  }
}
@-webkit-keyframes slideEarth {
  from {
    left: -60%;
  }
  to {
    left: 145%;
  }
}
@keyframes slideEarth {
  from {
    left: -60%;
  }
  to {
    left: 145%;
  }
}
@-webkit-keyframes slideAsteroid {
  from {
    left: -70%;
  }
  to {
    left: 150%;
  }
}
@keyframes slideAsteroid {
  from {
    left: -70%;
  }
  to {
    left: 150%;
  }
}
@-webkit-keyframes slideAsteroidDust {
  from {
    left: -55%;
  }
  to {
    left: 150%;
  }
}
@keyframes slideAsteroidDust {
  from {
    left: -55%;
  }
  to {
    left: 150%;
  }
}
@-webkit-keyframes ellipsis {
  to {
    width: 1.25em;
  }
}
@keyframes ellipsis {
  to {
    width: 1.25em;
  }
}
.asking-for-help-loader {
  position: relative;
}
.asking-for-help-loader .asking-for-help-icon {
  opacity: 0.4;
  margin-right: 6px;
  vertical-align: sub;
  bottom: 0;
}
.asking-for-help-loader .asking-for-help-icon .ask-for-help-hand {
  display: inline-block;
  background-repeat: no-repeat;
  -webkit-animation: raiseHand 1s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
          animation: raiseHand 1s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
  background-size: 11px;
  width: 11px;
  margin-right: -6px;
  height: 19px;
}
.asking-for-help-loader .asking-for-help-icon .ask-for-help-face {
  display: inline-block;
  background-size: 20px;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
}
.asking-for-help-loader .sparkles {
  position: absolute;
  top: 0;
}
.asking-for-help-loader .sparkles .sparkle {
  position: absolute;
}
.asking-for-help-loader .sparkles .sparkle .sparkle-child {
  content: '';
  display: block;
  -webkit-animation: sparkleY 1.5s ease-out infinite;
          animation: sparkleY 1.5s ease-out infinite;
  width: 6px;
  height: 6px;
  border-radius: 10px;
}
.asking-for-help-loader .sparkles .sparkle:first-child {
  -webkit-animation: sparkleXLeftLeft 1.5s ease-out infinite;
          animation: sparkleXLeftLeft 1.5s ease-out infinite;
  -webkit-animation-delay: 0.35s;
          animation-delay: 0.35s;
}
.asking-for-help-loader .sparkles .sparkle:first-child .sparkle-child {
  -webkit-animation-delay: 0.35s;
          animation-delay: 0.35s;
}
.asking-for-help-loader .sparkles .sparkle:nth-child(2) {
  -webkit-animation: sparkleXLeftRight 1.5s ease-out infinite;
          animation: sparkleXLeftRight 1.5s ease-out infinite;
  -webkit-animation-delay: 0.65s;
          animation-delay: 0.65s;
}
.asking-for-help-loader .sparkles .sparkle:nth-child(2) .sparkle-child {
  -webkit-animation-delay: 0.65s;
          animation-delay: 0.65s;
}
.asking-for-help-loader .sparkles .sparkle:last-child {
  -webkit-animation: sparkleXLeft 1.5s ease-out infinite;
          animation: sparkleXLeft 1.5s ease-out infinite;
}
.asking-for-help-loader .sparkles .middle .sparkle:first-child {
  -webkit-animation: sparkleXMiddleLeft 1.5s ease-out infinite;
          animation: sparkleXMiddleLeft 1.5s ease-out infinite;
  -webkit-animation-delay: 0.35s;
          animation-delay: 0.35s;
}
.asking-for-help-loader .sparkles .middle .sparkle:first-child .sparkle-child {
  -webkit-animation-delay: 0.35s;
          animation-delay: 0.35s;
}
.asking-for-help-loader .sparkles .middle .sparkle:nth-child(2) {
  -webkit-animation: sparkleXMiddleRight 1.5s ease-out infinite;
          animation: sparkleXMiddleRight 1.5s ease-out infinite;
  -webkit-animation-delay: 0.65s;
          animation-delay: 0.65s;
}
.asking-for-help-loader .sparkles .middle .sparkle:nth-child(2) .sparkle-child {
  -webkit-animation-delay: 0.65s;
          animation-delay: 0.65s;
}
.asking-for-help-loader .sparkles .middle .sparkle:last-child {
  -webkit-animation: sparkleXMiddle 1.5s ease-out infinite;
          animation: sparkleXMiddle 1.5s ease-out infinite;
}
.asking-for-help-loader .sparkles .right .sparkle:first-child {
  -webkit-animation: sparkleXRightRight 1.5s ease-out infinite;
          animation: sparkleXRightRight 1.5s ease-out infinite;
  -webkit-animation-delay: 0.35s;
          animation-delay: 0.35s;
}
.asking-for-help-loader .sparkles .right .sparkle:first-child .sparkle-child {
  -webkit-animation-delay: 0.35s;
          animation-delay: 0.35s;
}
.asking-for-help-loader .sparkles .right .sparkle:nth-child(2) {
  -webkit-animation: sparkleXRightLeft 1.5s ease-out infinite;
          animation: sparkleXRightLeft 1.5s ease-out infinite;
  -webkit-animation-delay: 0.65s;
          animation-delay: 0.65s;
}
.asking-for-help-loader .sparkles .right .sparkle:nth-child(2) .sparkle-child {
  -webkit-animation-delay: 0.65s;
          animation-delay: 0.65s;
}
.asking-for-help-loader .sparkles .right .sparkle:last-child {
  -webkit-animation: sparkleXRight 1.5s ease-out infinite;
          animation: sparkleXRight 1.5s ease-out infinite;
}
@-webkit-keyframes raiseHand {
  from {
    -webkit-transform: translateY(-10%);
            transform: translateY(-10%);
  }
  to {
    -webkit-transform: translateY(5%);
            transform: translateY(5%);
  }
}
@keyframes raiseHand {
  from {
    -webkit-transform: translateY(-10%);
            transform: translateY(-10%);
  }
  to {
    -webkit-transform: translateY(5%);
            transform: translateY(5%);
  }
}
@-webkit-keyframes sparkleY {
  60% {
    opacity: 1;
    width: 6px;
    height: 6px;
  }
  75% {
    opacity: 0.5;
    width: 8px;
    height: 8px;
  }
  85% {
    opacity: 0.8;
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-45px);
            transform: translateY(-45px);
    width: 5px;
    height: 5px;
  }
}
@keyframes sparkleY {
  60% {
    opacity: 1;
    width: 6px;
    height: 6px;
  }
  75% {
    opacity: 0.5;
    width: 8px;
    height: 8px;
  }
  85% {
    opacity: 0.8;
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-45px);
            transform: translateY(-45px);
    width: 5px;
    height: 5px;
  }
}
@-webkit-keyframes sparkleXLeft {
  to {
    -webkit-transform: translateX(-40px);
            transform: translateX(-40px);
  }
}
@keyframes sparkleXLeft {
  to {
    -webkit-transform: translateX(-40px);
            transform: translateX(-40px);
  }
}
@-webkit-keyframes sparkleXLeftLeft {
  to {
    -webkit-transform: translateX(-50px);
            transform: translateX(-50px);
  }
}
@keyframes sparkleXLeftLeft {
  to {
    -webkit-transform: translateX(-50px);
            transform: translateX(-50px);
  }
}
@-webkit-keyframes sparkleXLeftRight {
  to {
    -webkit-transform: translateX(-30px);
            transform: translateX(-30px);
  }
}
@keyframes sparkleXLeftRight {
  to {
    -webkit-transform: translateX(-30px);
            transform: translateX(-30px);
  }
}
@-webkit-keyframes sparkleXMiddle {
  to {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
}
@keyframes sparkleXMiddle {
  to {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
}
@-webkit-keyframes sparkleXMiddleLeft {
  to {
    -webkit-transform: translateX(-10px);
            transform: translateX(-10px);
  }
}
@keyframes sparkleXMiddleLeft {
  to {
    -webkit-transform: translateX(-10px);
            transform: translateX(-10px);
  }
}
@-webkit-keyframes sparkleXMiddleRight {
  to {
    -webkit-transform: translateX(10px);
            transform: translateX(10px);
  }
}
@keyframes sparkleXMiddleRight {
  to {
    -webkit-transform: translateX(10px);
            transform: translateX(10px);
  }
}
@-webkit-keyframes sparkleXRight {
  to {
    -webkit-transform: translateX(40px);
            transform: translateX(40px);
  }
}
@keyframes sparkleXRight {
  to {
    -webkit-transform: translateX(40px);
            transform: translateX(40px);
  }
}
@-webkit-keyframes sparkleXRightLeft {
  to {
    -webkit-transform: translateX(30px);
            transform: translateX(30px);
  }
}
@keyframes sparkleXRightLeft {
  to {
    -webkit-transform: translateX(30px);
            transform: translateX(30px);
  }
}
@-webkit-keyframes sparkleXRightRight {
  to {
    -webkit-transform: translateX(50px);
            transform: translateX(50px);
  }
}
@keyframes sparkleXRightRight {
  to {
    -webkit-transform: translateX(50px);
            transform: translateX(50px);
  }
}
.project-loading {
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  border-left: 1px #404040 solid;
}
.project-loading .welcome-message {
  margin-top: 20px;
}
.project-loading .loading:after {
  overflow: hidden;
  display: inline-block;
  vertical-align: bottom;
  -webkit-animation: ellipsis steps(4, end) 1000ms infinite;
          animation: ellipsis steps(4, end) 1000ms infinite;
  content: "\2026";
  width: 0px;
}
.project-loading .loading {
  font-weight: bold;
}
.project-loading .message {
  font-weight: normal;
}
.project-loading .loader {
  margin-left: 0;
  width: 30px;
  height: 30px;
}
.panel {
  background-color: #282828;
  border-top: 1px solid #7b7b7b;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 33%;
  min-height: 150px;
  position: relative;
  z-index: 5;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 600px) {
  .panel {
    max-height: calc(100% - 50px);
  }
}
.panel .down-arrow {
  margin-left: initial;
}
.panel .header,
.panel .logs {
  padding-left: 20px;
  padding-right: 20px;
}
.panel .header h1,
.panel .logs h1 {
  display: inline-block;
  font-size: 14px;
  margin-bottom: 0;
  margin-right: 10px;
}
.panel .header {
  background-color: #282828;
  border-bottom: 1px solid #404040;
  padding-bottom: 8px;
  padding-top: 3px;
  z-index: 1;
}
.panel .header .controls {
  display: inline-block;
}
.panel .header .controls .button-small {
  margin-right: 10px;
  margin-top: 0;
  vertical-align: 1px;
}
.panel .header .controls .emoji {
  vertical-align: bottom;
  margin-top: inherit;
}
.panel .button-tertiary {
  font-family: "Benton Sans", Helvetica, Sans-serif;
  margin: 0;
  margin-top: -2px;
  margin-right: 5px;
  font-size: 11px;
  padding: 2px 4px;
}
.panel > resizer {
  cursor: ns-resize;
  display: block;
  position: absolute;
  height: 6px;
  top: -1px;
  z-index: 2;
  width: 100%;
}
.panel .current-state-info {
  display: inline-block;
  border-radius: 5px;
  padding: 2px 6px;
  background-color: #404040;
  height: 25px;
  vertical-align: middle;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 78%;
}
.container-stats-panel {
  font-size: 14px;
  line-height: 18px;
}
.container-stats-panel .status-badge {
  vertical-align: 1px;
  cursor: auto;
}
.container-stats-panel .header .status {
  margin: 0;
}
.container-stats-panel .header .container-info {
  max-width: 500px;
  padding-top: 6px;
}
.container-stats-panel .stats-container {
  overflow: auto;
  padding-bottom: 20px;
}
.container-stats-panel article {
  padding: 12px 20px;
  border-bottom: 1px solid #404040;
}
.container-stats-panel article:last-child {
  border-bottom: none;
}
.container-stats-panel .status-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.container-stats-panel .status-summary {
  margin-right: 1rem;
}
.container-stats-panel .status-summary .status-badge {
  display: block;
}
.container-stats-panel .status-summary .status {
  margin: 0;
}
.container-stats-panel .status-hint {
  padding: 2px 6px;
  background-color: #404040;
  border-radius: 5px;
  display: inline-block;
  max-width: 500px;
}
.container-stats-panel .status-details {
  font-family: Menlo, Consolas, Monaco, "Lucida Console", Monospace;
  font-size: 13px;
}
.container-stats-panel .loader {
  width: 18px;
  height: 18px;
  margin: 0;
  vertical-align: -3px;
}
.container-stats-panel .status-item-without-progress {
  margin-bottom: 5px;
}
.container-stats-panel .marketing {
  background-color: #7059e0;
  display: block;
}
.container-stats-panel .close {
  top: 8px;
}
.rewind-panel .header {
  padding-top: 6px;
}
.rewind-panel .header h1 {
  margin-top: 0;
  vertical-align: baseline;
}
.rewind-panel .segmented-buttons {
  display: inline-block;
  vertical-align: middle;
  margin-right: 12px;
}
.rewind-panel .segmented-buttons .button-tertiary {
  padding: 4px 8px;
  padding-bottom: 6px;
  margin: 0;
}
.rewind-panel button .icon {
  margin: 0;
}
.rewind-panel .loading-rewinds {
  text-align: right;
  margin-right: 20px;
  margin-top: 1rem;
  display: block;
}
.rewind-panel .loading-revision {
  position: absolute;
  right: 0;
  top: -12px;
}
.rewind-panel .loading-revision .loader {
  width: 21px;
  height: 20px;
}
.rewind-panel .anon-avatar {
  background-size: 18px;
  background-position: center 9px;
}
.rewind-panel .users {
  margin-top: 25px;
}
.rewind-panel .person-container {
  position: absolute;
  right: 0;
  bottom: 0;
}
.rewind-panel .person-container .person {
  display: block;
  padding-left: 5px;
}
.rewind-panel .person-container .person .avatar {
  width: 22px;
  height: 23px;
}
.rewind-panel .person-container .glitch-system-user {
  opacity: 1;
  background-size: 60%;
  background-position: 4px;
}
.rewind-panel .timeline {
  overflow: auto;
  height: 100%;
  position: relative;
}
.rewind-panel playhead {
  position: absolute;
  height: 100%;
  cursor: ew-resize;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  right: 50px;
  background-size: contain;
}
.rewind-panel playhead .playhead-arrow {
  width: 39px;
  height: 40px;
  top: -12px;
  position: absolute;
  cursor: ew-resize;
}
.rewind-panel playhead .tail {
  height: 100%;
  width: 1px;
  background-color: #dadada;
  -webkit-animation: tailAnimated 0.5s ease-out infinite;
          animation: tailAnimated 0.5s ease-out infinite;
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
}
.rewind-panel .rewind-graph {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
  height: 100%;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  overflow-x: auto;
}
.rewind-panel .rewind-columns-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
  position: relative;
}
.rewind-panel .rewind-column {
  max-width: 50px;
  min-width: 50px;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  cursor: pointer;
  position: relative;
}
.rewind-panel .rewind-column:hover,
.rewind-panel .rewind-column.highlighted {
  background-color: #333;
}
.rewind-panel .rewind-column:active {
  background-color: #4e4e4e;
}
.rewind-panel .rewind-column .cell {
  height: 30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.rewind-panel .rewind-column .cell-border {
  width: 1px;
  position: absolute;
  background-color: #404040;
  height: 100%;
  z-index: -1;
}
.rewind-panel .rewind-column .time {
  height: initial;
  -webkit-box-align: end;
      -ms-flex-align: end;
              -ms-grid-row-align: flex-end;
          align-items: flex-end;
  height: 25px;
  border-bottom: 1px solid #404040;
}
.rewind-panel .rewind-column .time .time-label {
  color: #9b9b9b;
  padding-left: 4px;
  font-family: Menlo, Consolas, Monaco, "Lucida Console", Monospace;
  font-size: 11px;
  padding-top: 5px;
  padding-bottom: 2px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.rewind-panel .rewind-column .revisions {
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
      -ms-flex-direction: column-reverse;
          flex-direction: column-reverse;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 100%;
}
.rewind-panel .rewind-column .revisions .rewind-file {
  width: 100%;
  background-color: #bd3874;
  cursor: pointer;
}
.rewind-panel .rewind-column .revisions .logic {
  background-color: #7059e0;
}
.rewind-panel .rewind-column .revisions .data {
  background-color: #ce5c48;
}
.rewind-panel .rewind-column .revisions .info {
  background-color: #00b0b2;
}
.rewind-panel .rewind-column .revisions .view {
  background-color: #b39519;
}
.rewind-panel .rewind-column .revisions .style {
  background-color: #a158ab;
}
.rewind-panel .rewind-column .revisions .other {
  background-color: #bd3874;
}
.rewind-panel .rewind-column .git-revision {
  background-color: #ffc0cb;
  height: 100%;
  width: 100%;
}
.rewind-panel .rewind-column .git-revision .git-label {
  position: absolute;
  border: 1px solid #727272;
  color: #727272;
  border-radius: 3px;
  padding: 0 2px;
  font-size: 11px;
  bottom: 0;
  right: 0;
}
.rewind-panel .time-container,
.rewind-panel .label,
.rewind-panel .commit-message {
  display: inline-block;
}
.rewind-panel .time-container {
  font-size: 12px;
  font-family: Menlo, Consolas, Monaco, "Lucida Console", Monospace;
  vertical-align: middle;
}
.rewind-panel .labels {
  color: #727272;
  font-size: 8px;
}
.rewind-panel .labels .label:nth-child(2) {
  margin-left: 12px;
}
.rewind-panel .labels .label:last-child {
  margin-left: 7px;
}
.rewind-panel .labels .label.day {
  margin-left: 8px;
}
.rewind-panel .commit-message {
  margin-left: 12px;
  font-size: 14px;
  line-height: 0;
  position: relative;
}
.rewind-panel .instructions-container {
  margin-top: 1rem;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}
.rewind-panel .instructions-container .instructions {
  font-size: 14px;
  margin-left: 20px;
  margin-right: 4px;
  display: inline-block;
  max-width: 35%;
  vertical-align: middle;
}
.rewind-panel .instructions-container .clock {
  width: 30px;
  height: 40px;
  background-size: contain;
  background-repeat: no-repeat;
  display: inline-block;
  vertical-align: middle;
  margin-right: 1rem;
}
@-webkit-keyframes tailAnimated {
  from {
    background-color: #dadada;
  }
  to {
    background-color: #91b0ff;
  }
}
@keyframes tailAnimated {
  from {
    background-color: #dadada;
  }
  to {
    background-color: #91b0ff;
  }
}
.logs-panel .logs-container {
  overflow: auto;
}
.logs-panel .logs-container .logs {
  font-family: Menlo, Consolas, Monaco, "Lucida Console", Monospace;
  font-size: 13px;
  overflow: auto;
  padding-bottom: 15px;
  padding-top: 0.2rem;
}
.logs-panel .logs-container .logs p {
  margin: 0;
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
  font-size: 12px;
}
.logs-panel pre {
  word-break: break-all;
  word-wrap: break-word;
  white-space: pre-wrap;
  font-family: inherit;
  font-size: inherit;
  margin: 0;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.logs-panel .log-time {
  color: #727272;
  padding-left: 5px;
  opacity: 0.4;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.logs-panel .log {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.logs-panel .log:hover {
  background-color: #333;
}
.logs-panel .log:hover .log-time {
  opacity: 1;
}
.logs-panel .jump-line {
  cursor: pointer;
}
.logs-panel .file-path {
  text-decoration: underline;
  cursor: pointer;
}
.logs-panel .file-path:hover {
  text-decoration: none;
}
.logs-panel .success-log {
  color: #55ff84;
}
.logs-panel .error-log {
  color: #ff5d5d;
}
.logs-panel .sleep-log {
  color: #727272;
}
.logs-panel .instance-divider {
  width: 100%;
  overflow: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.logs-panel .instance-divider hr {
  background-color: #7b7b7b;
  height: 1px;
  border: 0;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.logs-panel .instance-divider .relative-time {
  text-align: right;
  opacity: 1;
}
.logs-panel .loader {
  position: relative;
  bottom: 2px;
  width: 13px;
  height: 12px;
  margin-right: 2px;
}
.logs-panel .button-debugger .loader {
  height: 12px;
  width: 12px;
  vertical-align: bottom;
  margin-top: 4px;
}
.logs-panel .button-debugger .down-arrow {
  vertical-align: text-top;
}
.logs-panel .button-debugger:hover .down-arrow {
  opacity: 1;
}
.logs-panel .button-debugger:hover .usage-label {
  color: #dadada;
}
.logs-panel .button-debugger progress {
  margin-top: 11px;
  width: 40px;
  display: inline-block;
  border: 1px solid #7b7b7b;
}
.logs-panel .button-debugger progress::-webkit-progress-value {
  background-color: #7b7b7b;
}
.logs-panel .button-debugger progress::-moz-progress-bar {
  background-color: #7b7b7b;
}
.logs-panel .button-debugger .unstable {
  border: 1px solid #ffaabf;
}
.logs-panel .button-debugger .unstable::-webkit-progress-value {
  background-color: #ffaabf;
}
.logs-panel .button-debugger .unstable::-moz-progress-bar {
  background-color: #ffaabf;
}
.logs-panel .button-debugger .stopped {
  border: 1px solid #ff5d5d;
}
.logs-panel .button-debugger .stopped::-webkit-progress-value {
  background-color: #ff5d5d;
}
.logs-panel .button-debugger .stopped::-moz-progress-bar {
  background-color: #ff5d5d;
}
.logs-panel .console-container {
  width: 100%;
  height: calc(100% - 43px);
  padding-left: 20px;
  background-color: #101010;
}
.logs-panel .console-frame {
  border: none;
  width: 100%;
  height: 100%;
}
.embed-preview {
  z-index: 2;
  position: relative;
  overflow: hidden;
  border-left: 1px solid #404040;
}
@media (min-width: 580px) {
  .embed-preview {
    height: 100% !important;
  }
}
@media (max-width: 580px) {
  .embed-preview {
    width: 100% !important;
    height: initial;
    border-left: none;
    border-right: none;
    border-top: 1px solid #404040;
  }
}
.embed-preview .iframe-wrap {
  width: 100%;
  height: 100%;
  opacity: 0;
  position: absolute;
  overflow: hidden;
}
.embed-preview resizer {
  display: block;
  position: absolute;
  left: -5px;
  z-index: 2;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  height: 100%;
  width: 10px;
  cursor: ew-resize;
}
@media (max-width: 580px) {
  .embed-preview resizer {
    width: 100%;
    height: 6px;
    cursor: ns-resize;
  }
}
.embed-preview iframe {
  width: 100%;
  height: 100%;
  border: 0;
  overflow: hidden;
  background-color: #fff;
}
.embed-preview .resize-arrow {
  position: absolute;
  top: 50%;
  left: 4px;
}
.embed-preview .resize-arrow .resize-arrow-vertical {
  display: none;
}
@media (max-width: 580px) {
  .embed-preview .resize-arrow {
    top: -2px;
    left: 50%;
  }
  .embed-preview .resize-arrow .resize-arrow-vertical {
    display: initial;
  }
  .embed-preview .resize-arrow .resize-arrow-horizontal {
    display: none;
  }
}
.embed-preview-first resizer {
  left: initial;
  right: 0;
}
@media (max-width: 580px) {
  .embed-preview-first resizer {
    bottom: 0;
  }
}
.embed-preview-first .resize-arrow {
  left: -4px;
}
@media (max-width: 580px) {
  .embed-preview-first .resize-arrow {
    left: 50%;
    top: -7px;
  }
}
.embed-preview-first .embed-preview {
  border: 0;
  border-right: 1px solid #404040;
}
@media (max-width: 580px) {
  .embed-preview-first .embed-preview {
    border-top: none;
    border-bottom: 1px solid #404040;
  }
}
.embed-preview-transition {
  transition: 0.2s;
}
.assets {
  padding: 20px;
  padding: 0;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-line-pack: stretch;
      align-content: stretch;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.assets .asset {
  margin: 5px;
  padding: 5px;
  border-radius: 3px;
  cursor: zoom-in;
  text-align: center;
  position: relative;
}
.assets .asset:hover {
  background-color: #404040;
}
.assets .asset:focus {
  outline: none;
  background-color: #404040;
}
.assets .asset-thumbnail {
  display: block;
  max-width: 220px;
  max-height: 220px;
  height: auto;
}
@media (max-width: 500px) {
  .assets .asset-thumbnail {
    max-width: 150px;
    max-height: 150px;
  }
}
.assets .asset-thumbnail-other {
  max-width: 140px;
  max-height: 140px;
}
.assets .asset-thumbnail-name {
  font-family: Menlo, Consolas, Monaco, "Lucida Console", Monospace;
  font-size: 13px;
  max-width: 220px;
  margin-top: 8px;
}
.assets .retina-badge {
  position: absolute;
  top: 5px;
  right: 5px;
  background-color: rgba(0,0,0,0.15);
  color: #fff;
  font-weight: 600;
  font-size: 12px;
  border-radius: 3px;
  padding: 3px 5px;
}
.assets-blank-slate {
  background-size: cover;
  background-repeat: no-repeat;
  padding-bottom: 100%;
}
.assets-blank-slate .welcome-message {
  margin-top: 11px;
}
.assets-blank-slate .headline {
  font-weight: bold;
}
.assets-blank-slate .message {
  font-weight: normal;
}
.error-page {
  background-color: #000;
  color: #fff;
  font-family: menlo;
  font-weight: bold;
  padding-left: 15px;
  padding-right: 15px;
  font-size: 80%;
  position: relative;
  max-width: 100%;
}
.error-page .container {
  margin-top: calc(20%);
  text-align: center;
  max-width: 425px;
  margin-left: auto;
  margin-right: auto;
}
.error-page h1 {
  margin-bottom: 2rem;
}
.error-page h2 {
  font-weight: normal;
}
.error-page .actions {
  margin-top: 3em;
}
.error-page .actions .button {
  font-family: "Benton Sans", Helvetica, Sans-serif;
}
.error-page .actions .support-link {
  color: #ffaabf;
}
@media (max-width: 500px) {
  .error-page {
    font-size: 70%;
  }
}
.error-page #stars {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
.error-page .glitch-logo {
  width: 60px;
  height: 60px;
  background-repeat: no-repeat;
  margin-left: auto;
  margin-right: auto;
}
.footer-options {
  position: absolute;
  right: 20px;
  bottom: 15px;
  z-index: 4;
}
.footer-options button {
  background-color: #160f19;
}
.footer-options button,
.footer-options .loader {
  display: inline-block;
  margin-left: 5px;
}
.footer-options .backend-unstable {
  display: inline-block;
  cursor: pointer;
}
.footer-options .backend-unstable .fire-truck {
  width: 55px;
  height: 47px;
  background-size: contain;
  -webkit-transform: translateY(31px);
          transform: translateY(31px);
  margin: 0;
  margin-right: 10px;
  margin-left: 5px;
}
.footer-options .new-stuff {
  display: inline-block;
  cursor: pointer;
}
.footer-options .new-stuff .new-stuff-cat {
  width: 50px;
  height: 52px;
  background-size: cover;
  -webkit-transform: translateY(40px);
          transform: translateY(40px);
  margin: 0;
  margin-right: 10px;
}
.embed-helper {
  padding-top: 12px;
  padding-bottom: 12px;
  padding-left: 20px;
  padding-right: 20px;
  background-color: #282828;
  border-top: 1px solid #404040;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}
.embed-helper .left-container {
  display: inline-block;
}
@media (max-width: 414px) {
  .embed-helper .left-container {
    margin-bottom: 10px;
  }
}
.embed-helper .left-container .loader {
  margin-right: 5px;
}
.embed-helper .right-container {
  display: inline-block;
  float: right;
}
.embed-helper .person-wrap {
  display: inline-block;
  vertical-align: middle;
}
.embed-helper .person-wrap .person:first-child span > a .embed-helper-avatar {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  border: none;
}
.embed-helper .person-wrap .person:last-child span > a .embed-helper-avatar {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
.embed-helper .anon-avatar {
  background-size: 18px;
}
.embed-helper .embed-helper-avatar {
  vertical-align: middle;
  position: relative;
  border-radius: 0;
}
.embed-helper .button-edit-in-glitch {
  margin: 0;
  margin-left: 5px;
  vertical-align: middle;
}
.embed-helper .button-edit-in-glitch .glitch-logo {
  vertical-align: middle;
  width: 19px;
  margin: 0;
  margin-right: 5px;
}
.embed-helper .button-edit-in-glitch .fullscreen {
  margin: 0;
}
.embed-helper .button-edit-in-glitch .label {
  vertical-align: -1px;
  margin-right: 3px;
}
.embed-helper .embed-helper-label {
  margin: 0;
  margin-right: 5px;
  font-size: 14px;
  display: inline-block;
}
@media (max-width: 414px) {
  .embed-helper .embed-helper-label {
    display: none;
  }
}
.embed-helper .project-avatar {
  background-size: contain;
  border-radius: 5px;
  margin-right: 5px;
  vertical-align: middle;
  background-color: transparent;
}
.embed-helper .segmented-buttons {
  display: inline-block;
}
.embed-helper .segmented-buttons button {
  margin: 0;
}
.debugger-page {
  padding-top: 11px;
  display: block;
}
.debugger-page h1 {
  font-size: 14px;
  display: inline-block;
}
.debugger-page h2 {
  font-size: 14px;
  font-weight: 600;
}
.debugger-page p {
  font-size: 14px;
}
.debugger-page header {
  padding: 0;
  margin: 0;
}
.debugger-page main,
.debugger-page section {
  margin-top: 1rem;
}
.debugger-page header,
.debugger-page main,
.debugger-page section {
  padding-left: 20px;
  padding-right: 20px;
}
.debugger-page .glitch-logo {
  display: inline-block;
  background-repeat: no-repeat;
  margin-right: 5px;
}
.debugger-page .pop-over-input {
  font-weight: normal;
}
.debugger-page .code-container {
  position: relative;
}
.debugger-page .copy {
  position: absolute;
  right: 0;
  top: 0;
}
.debugger-page .warning p {
  display: inline-block;
}
.debugger-page .info-container {
  border-radius: 5px;
  background-color: #282828;
  padding: 12px;
  color: #727272;
}
.debugger-page .info-container h2 {
  margin-top: 0;
}
.debugger-page .info-container p {
  margin-bottom: 0;
}
.debugger-page .info-container,
.debugger-page .code-container {
  max-width: 600px;
}
.debugger-page .button-cta {
  margin-top: 1rem;
}
.debugger-page .copy-notification {
  background-color: #55ff84;
}
/*# sourceMappingURL=cosmos.css.map */