.ttyplayer {
  font-size: 12px;
  font-family: monospace;
}
.ttyplayer .tty-hide {
  display: none;
}
.ttyplayer a {
  color: #fff;
  text-decoration: none;
}
.ttyplayer-header {
  text-align: center;
  padding: 3px;
  background: #222;
  color: #fff;
}
.ttyplayer-body {
  padding: 5px;
  background: #000;
}
.ttyplayer-footer {
  background: #000;
  color: #999;
  text-align: right;
  padding: 0 5px;
}
.ttyplayer-footer button {
  position: relative;
  background: none;
  border: 0;
  outline: 0;
  padding: 4px;
  color: #999;
  cursor: pointer;
  line-height: 1em;
  text-align: left;
}
.ttyplayer-footer button:hover {
  color: #fff;
}
.ttyplayer-footer button.tty-play,
.ttyplayer-footer button.tty-pause {
  width: 60px;
}
.ttyplayer-footer button > i {
  position: relative;
  display: inline-block;
  overflow: hidden;
  width: 6px;
  height: 8px;
  margin-right: 3px;
  vertical-align: middle;
}
.ttyplayer-footer button.tty-play > i:after {
  content: '';
  display: block;
  border: solid transparent;
  border-left-color: currentColor;
  border-width: 4px 6px;
}
.ttyplayer-footer button.tty-pause > i:before,
.ttyplayer-footer button.tty-pause > i:after {
  content: '';
  position: absolute;
  width: 2px;
  height: 8px;
  top: 0;
  background: currentColor;
}
.ttyplayer-footer button.tty-pause > i:before {
  left: 0;
}
.ttyplayer-footer button.tty-pause > i:after {
  right: 0;
}
.ttyplayer-footer .tty-button-wrap {
  position: relative;
  display: inline-block;
}
.ttyplayer-footer .tty-select-wrap {
  position: relative;
}
.ttyplayer-footer .tty-select {
  position: absolute;
  background: #333;
  bottom: 0;
  right: 0;
}
.ttyplayer-footer .tty-select a {
  display: block;
  padding: 1px 3px;
}
.ttyplayer-footer .tty-select a.tty-selected {
  color: #999;
}
/**
 * xterm.js: xterm, in the browser
 * Copyright (c) 2014, sourceLair Limited (www.sourcelair.com (MIT License)
 * Copyright (c) 2012-2013, Christopher Jeffrey (MIT License)
 * https://github.com/chjj/term.js
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 * THE SOFTWARE.
 *
 * Originally forked from (with the author's permission):
 *   Fabrice Bellard's javascript vt100 for jslinux:
 *   http://bellard.org/jslinux/
 *   Copyright (c) 2011 Fabrice Bellard
 *   The original design remains. The terminal itself
 *   has been extended to include xterm CSI codes, among
 *   other features.
 */
/*
 *  Default style for xterm.js
 */
.terminal {
  background-color: #000;
  color: #fff;
  font-family: courier-new, courier, monospace;
  font-feature-settings: "liga" 0;
  position: relative;
}
.terminal.focus,
.terminal:focus {
  outline: none;
}
.terminal .xterm-helpers {
  position: absolute;
  top: 0;
}
.terminal .xterm-helper-textarea {
  position: absolute;
  /*
     * HACK: to fix IE's blinking cursor
     * Move textarea out of the screen to the far left, so that the cursor is not visible.
     */
  left: -9999em;
  opacity: 0;
  width: 0;
  height: 0;
  z-index: -10;
}
.terminal .terminal-cursor {
  background-color: #fff;
  color: #000;
}
.terminal:not(.focus) .terminal-cursor {
  outline: 1px solid #fff;
  outline-offset: -1px;
  background-color: transparent;
}
.terminal.focus .terminal-cursor.blinking {
  animation: blink-cursor 1.2s infinite step-end;
}
@keyframes blink-cursor {
  0% {
    background-color: #fff;
    color: #000;
  }
  50% {
    background-color: transparent;
    color: #FFF;
  }
}
.terminal .composition-view {
  background: #000;
  color: #FFF;
  display: none;
  position: absolute;
  white-space: nowrap;
}
.terminal .composition-view.active {
  display: block;
}
.terminal .xterm-viewport {
  /* On OS X this is required in order for the scroll bar to appear fully opaque */
  background-color: #000;
  overflow-y: scroll;
}
.terminal .xterm-rows {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
}
.terminal .xterm-scroll-area {
  visibility: hidden;
}
.terminal .xterm-char-measure-element {
  display: inline-block;
  visibility: hidden;
  position: absolute;
  left: -9999em;
}
/*
 *  Determine default colors for xterm.js
 */
.terminal .xterm-bold {
  font-weight: bold;
}
.terminal .xterm-underline {
  text-decoration: underline;
}
.terminal .xterm-blink {
  text-decoration: blink;
}
.terminal .xterm-hidden {
  visibility: hidden;
}