.term-color-foreground {
  color: #d6dbd8; }

.term-color-background {
  color: #352e3c; }

.term-color-black {
  color: #29282e; }

.term-color-red {
  color: #a63939; }

.term-color-green {
  color: #87a140; }

.term-color-yellow {
  color: #dba858; }

.term-color-blue {
  color: #5b81a0; }

.term-color-magenta {
  color: #85678f; }

.term-color-cyan {
  color: #5e8d87; }

.term-color-white {
  color: #818890; }

.term-color-brightBlack {
  color: #4f495f; }

.term-color-brightRed {
  color: #d85b7b; }

.term-color-brightGreen {
  color: #92c74d; }

.term-color-brightYellow {
  color: #f0d974; }

.term-color-brightBlue {
  color: #7daad1; }

.term-color-brightMagenta {
  color: #b294bb; }

.term-color-brightCyan {
  color: #87c6be; }

.term-color-brightWhite {
  color: #c5c8c6; }

html {
  font-family: "Montserrat", sans-serif; }

a, a:visited {
  color: #d6dbd8; }

html {
  box-sizing: border-box; }

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

html, body, #app {
  margin: 0;
  width: 100%;
  height: 100%;
  background: #352e3c;
  color: #d6dbd8; }

.primary-container {
  height: calc( 100% - 60px);
  width: 100%;
  position: relative; }

.code-container, .program-pane {
  width: 50%;
  height: 100%;
  padding: 15px;
  transition: width 0.3s ease-in-out, margin-left 0.3s ease-in-out;
  position: relative;
  background: #352e3c; }

.primary-container.open-sidebar .code-container,
.primary-container.open-sidebar .program-pane {
  width: calc(50% - 112.5px); }

.code-container {
  border-right: 1px solid #5d5081;
  float: left; }

.program-pane {
  float: right; }

.primary-container.open-sidebar .code-container {
  margin-left: 225px; }

.sidebar {
  position: absolute;
  top: 0;
  left: 0;
  width: 225px;
  height: 100%;
  padding: 15px;
  float: left;
  font-size: 0.8rem;
  overflow-y: auto;
  opacity: 0;
  transition: opacity 0.3s ease-out; }

.open-sidebar .sidebar {
  opacity: 1; }

.primary-container .code-container::before {
  content: ' ';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  border-left: 1px solid #5d5081;
  opacity: 0;
  transition: opacity 0.3s ease-out; }

.primary-container.open-sidebar .code-container::before {
  opacity: 1; }

.show-code-only .code-container {
  width: 100%;
  padding: 0px; }

.show-code-only.open-sidebar .code-container {
  width: calc(100% - 225px); }

.show-code-only .program-pane {
  position: absolute;
  visibility: hidden; }

.show-term-only .program-pane {
  width: 100%; }

.show-term-only.open-sidebar .program-pane {
  width: calc(100% - 225px); }

.show-term-only .code-container {
  position: absolute;
  visibility: hidden; }

.program-pane {
  padding: 0;
  height: 100%;
  display: flex;
  flex-direction: column; }
  .program-pane > div {
    width: 100%;
    flex-grow: 1;
    flex-basis: 0;
    overflow: auto; }

.terminal-container {
  padding: 15px; }

.debugger {
  border-top: 1px solid #5d5081; }

.topbar {
  height: 60px;
  width: 100%;
  background-color: #4f495f;
  border-bottom: 3px solid #5d5081;
  color: #fff; }

.topbar .btn {
  height: 100%;
  width: 120px;
  position: relative;
  text-align: center;
  display: inline-block;
  cursor: pointer;
  background-color: #4f495f;
  transition: background-color 0.3s ease-out; }

.topbar #settings-btn {
  width: 65px;
  border-right: 1px solid #5d5081; }

.btn i {
  font-size: 1.1em; }

.btn .main-text {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  transition: top 0.3s ease-out; }

.btn .shortcut {
  position: absolute;
  top: 65%;
  transform: translateY(-50%);
  font-size: 0.7em;
  width: 100%;
  opacity: 0;
  transition: top 0.3s ease-out, opacity 0.3s ease-out; }

.topbar .btn:hover {
  background-color: #5d5081; }

.topbar .btn.disabled:hover {
  background-color: #554f63;
  cursor: default; }

.btn.has-shortcut:hover:not(.disabled) .main-text {
  top: 40%; }

.btn.has-shortcut:hover:not(.disabled) .shortcut {
  top: 75%;
  opacity: 1; }

.btn .icon {
  display: inline-block;
  position: relative;
  margin-right: 10px; }

#run-btn .main-text {
  display: flex;
  justify-content: center;
  align-items: center; }
  #run-btn .main-text .active, #run-btn .main-text .inactive {
    transition: transform 0.4s ease-out;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden; }
  #run-btn .main-text .inactive {
    transform: rotateX(180deg);
    position: absolute; }

#run-btn .run-icon .filled {
  position: absolute;
  top: 0;
  left: 2px;
  opacity: 0;
  transition: opacity 0.3s ease-out, transform 0.3s ease-out; }

#run-btn .debug-icon .filled {
  left: 0; }

#run-btn .run-icon:after {
  content: " ";
  position: absolute;
  top: -3px;
  left: -4px;
  display: block;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  border: 2px solid #fff;
  border-color: #fff transparent #fff transparent;
  opacity: 0;
  transition: opacity 0.2s ease-out 0s; }

#run-btn.disabled .run-icon:after {
  opacity: 1;
  animation: loading-spinner 1.2s linear infinite;
  transition: opacity 0.3s ease-out 0.2s; }

@keyframes loading-spinner {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }

#run-btn.disabled .run-icon .filled {
  opacity: 1;
  transform: scale(0.75, 0.75); }

#run-btn .run-icon .outline {
  transition: opacity 0.3s ease-out, transform 0.3s ease-out; }

#run-btn.disabled .run-icon .outline {
  opacity: 0;
  transform: scale(0.75, 0.75); }

#open-in-cplayground-btn {
  font-size: 0.8em;
  float: right;
  width: 160px; }

.sidebar-footer-spacer {
  width: 100%;
  height: 90px; }

.sidebar-footer {
  background: linear-gradient(to top, #352e3c 0%, #352e3c 50%, rgba(0, 0, 0, 0) 100%);
  position: fixed;
  bottom: 0;
  left: 0;
  width: 225px;
  height: 90px;
  padding: 15px;
  padding-top: 25px;
  text-align: center; }

.sidebar h3 {
  font-size: 1.2em;
  font-weight: 400;
  margin-bottom: 8px; }

.sidebar h3:first-of-type {
  margin-top: 0px; }

.sidebar p {
  margin: 8px 0; }

.sidebar select, .sidebar input[type=text] {
  width: 100%; }

.flag-spacer {
  height: 0.7em; }

/* File uploads: */
input[type=file] {
  width: 100%; }

/* Don't show uploaded file status if nothing has been uploaded */
#uploaded-filename:empty {
  display: none; }

#uploaded-filename:empty + #btn-remove-uploaded-file {
  display: none; }

#uploaded-filename {
  float: left; }

#btn-remove-uploaded-file {
  float: right;
  cursor: pointer;
  line-height: 1.3em; }

#uploaded-filename, #btn-remove-uploaded-file {
  margin-top: 0;
  /* The preceding paragraph already has a bottom margin */
  margin-bottom: 8px; }

.small-loading-spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid #fff;
  border-color: #fff transparent #fff transparent;
  animation: loading-spinner 1.2s linear infinite; }

.file-upload-error:empty {
  display: none; }

.file-upload-error {
  color: #d85b7b; }

/* Make scrollbar background more subtle */
* {
  /* Firefox: */
  scrollbar-color: #cbc5d2 rgba(0, 0, 0, 0.08); }

*::-webkit-scrollbar {
  width: 8px;
  height: 8px; }

*::-webkit-scrollbar-track {
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.2);
  background-color: rgba(0, 0, 0, 0.08); }

*::-webkit-scrollbar-thumb {
  background-color: #cbc5d2;
  border-radius: 5px; }

.ace-tm {
  font-family: "Ubuntu Mono", monospace;
  font-size: 12pt;
  background-color: #352e3c;
  color: #d6dbd8; }
  .ace-tm .ace_gutter {
    background: #352e3c;
    color: #7d817f; }
  .ace-tm .ace_gutter-cell.ace_breakpoint::before {
    content: '';
    position: absolute;
    top: 2.5px;
    left: 0;
    width: 11px;
    height: 11px;
    background: #ff7e7e;
    border-radius: 10px; }
  .ace-tm .ace_print-margin {
    width: 0px;
    background: #FFF; }
  .ace-tm .ace_fold {
    background-color: #4f495f; }
  .ace-tm .ace_cursor {
    color: #eee; }
  .ace-tm .ace_entity.ace_name.ace_tag,
  .ace-tm .ace_keyword,
  .ace-tm .ace_meta.ace_tag,
  .ace-tm .ace_storage {
    color: #7daad1; }
  .ace-tm .ace_constant.ace_character,
  .ace-tm .ace_constant.ace_language,
  .ace-tm .ace_constant.ace_numeric,
  .ace-tm .ace_constant.ace_other {
    color: #b294bb; }
  .ace-tm .ace_support.ace_constant,
  .ace-tm .ace_support.ace_function {
    color: #87c6be; }
  .ace-tm .ace_support.ace_type,
  .ace-tm .ace_support.ace_class {
    font-style: italic;
    color: #87c6be; }
  .ace-tm .ace_keyword.ace_operator {
    color: inherit; }
  .ace-tm .ace_string {
    color: #f0d974; }
  .ace-tm .ace_comment,
  .ace-tm .ace_comment.ace_doc,
  .ace-tm .ace_doc {
    color: #7d817f; }
  .ace-tm .ace_variable {
    color: #d85b7b; }
  .ace-tm .ace_entity.ace_name.ace_function,
  .ace-tm .ace_entity.ace_other,
  .ace-tm .ace_entity.ace_other.ace_attribute-name {
    color: #92c74d; }
  .ace-tm .ace_marker-layer .ace_selection {
    background: #4f495f; }
  .ace-tm .ace-tm.ace_multiselect .ace_selection.ace_start {
    box-shadow: 0 0 3px 0px white; }
  .ace-tm .ace_marker-layer .ace_step {
    background: #210066; }
  .ace-tm .ace_marker-layer .ace_bracket {
    margin: -1px 0px 0px -1px;
    border: 1px solid #c5c8c6; }
  .ace-tm .ace_marker-layer .ace_active-line,
  .ace-tm .ace_gutter-active-line {
    background: rgba(0, 0, 0, 0.07); }
  .ace-tm .ace_marker-layer .ace_selected-word {
    background: none;
    border: 1px solid #7d817f;
    border-radius: 2px; }
  .ace-tm .ace_indent-guide {
    background: none; }

.inline-controls {
  display: inline-flex;
  height: 100%;
  margin-left: 10px;
  padding: 0 10px;
  font-size: 0.8em;
  background-color: #d6dbd8;
  color: #352e3c;
  border-radius: 1em;
  font-family: "Montserrat", sans-serif;
  cursor: auto;
  pointer-events: all; }
  .inline-controls .pill {
    margin-right: 10px;
    color: #d6dbd8; }
  .inline-controls svg use {
    fill: #352e3c;
    stroke: #352e3c; }

#terminal {
  width: 100%;
  height: 100%; }

select, input[type=text] {
  background-color: #4f495f;
  border: none;
  border-radius: 3px;
  height: 25px;
  color: inherit; }
  select.inline, input[type=text].inline {
    margin-left: 8px;
    padding: 0px 3px; }

.button {
  display: inline-block;
  cursor: pointer; }
  .button.inline-small {
    background-color: #d6dbd8;
    color: #352e3c;
    border-radius: 4px;
    height: 25px;
    margin: 0 8px;
    padding: 2px 4px; }

.pill {
  font-size: 0.9em;
  background-color: #7daad1;
  border-radius: 0.9em;
  display: inline-block; }
  .pill .pill-text {
    padding: 1px 0.7em;
    display: inline-block; }
  .pill .pill {
    margin-right: 0;
    margin-left: -0.2em;
    height: 100%; }

.debugger-tabbar {
  width: 100%;
  height: 30px;
  background-color: #4f495f;
  border-bottom: 1px solid #5d5081;
  color: #fff;
  font-size: 0.85em; }

.debugger-tab {
  height: 100%;
  padding: 0 15px;
  display: inline-flex;
  justify-content: center;
  flex-direction: column;
  transition: background-color 0.15s ease-out;
  cursor: pointer; }

.debugger-tab.active {
  background-color: #5d5081; }

.debugger-tab:hover {
  background-color: #5d5081; }

.debugger-body {
  width: 100%;
  height: calc(100% - 30px);
  padding: 15px;
  overflow: auto; }

.process {
  width: 100%;
  max-width: 400px;
  margin: 0 auto 15px auto;
  border: 1px solid #5d5081; }

.process:last-of-type {
  margin-bottom: 0; }

.process-header {
  height: 30px;
  width: 100%;
  display: inline-flex;
  align-items: center;
  flex-direction: row;
  padding: 0 8px;
  background-color: #5d5081;
  font-size: 0.85em; }
  .process-header .pill:first-of-type {
    margin-right: 8px; }

.process-body {
  font-size: 0.85em;
  padding: 30px; }

.debug-controls {
  flex-grow: 2;
  text-align: right; }
  .debug-controls .button {
    margin: 0 5px;
    height: 1.2em; }
    .debug-controls .button:first-of-type {
      margin-left: 0; }
    .debug-controls .button:last-of-type {
      margin-right: 0; }
  .debug-controls svg {
    height: 1em;
    width: 1.2em;
    position: relative;
    top: 50%;
    transform: translateY(-50%); }

.process-body {
  width: 100%;
  padding: 8px; }

#diagram {
  width: 100%;
  height: 100%; }