@charset "UTF-8";
/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  margin: 0;
  padding: 0; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after, q:before, q:after {
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

body {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
  height: 100%;
  background: #f1f1f1; }

#extra-ui-text {
  display: none; }

.input {
  width: 100%;
  margin: 0 auto;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  -webkit-transition: max-height 1s, margin 1s, opacity 0.5s;
  -moz-transition: max-height 1s, margin 1s, opacity 0.5s;
  transition: max-height 1s, margin 1s, opacity 0.5s; }

.input.active {
  max-height: 300px;
  margin: 25px auto;
  opacity: 1; }

#lastfile, #formats {
  color: #BBB;
  font-size: 12px;
  margin: 0 auto 4px auto;
  width: 20%; }
  #lastfile a, #formats a {
    color: inherit; }

#lastfile .media-reload {
  color: #3482b1;
  cursor: pointer; }

#lastfile .media-reload:hover {
  text-decoration: underline; }

#formats.warning {
  transition: color 1s;
  color: darkred; }

.file-input-wrapper {
  color: white;
  text-align: center;
  background-color: #3482b1;
  border-radius: 5px;
  cursor: pointer;
  width: 200px;
  padding: 15px;
  overflow: hidden;
  position: relative;
  margin: 20px auto 5px auto;
  border: 0;
  text-indent: 0;
  position: relative;
  overflow: hidden; }
  .file-input-wrapper:hover, .file-input-wrapper.hover {
    background: #4d9ccb; }
  .file-input-wrapper > input[type="file"] {
    font-size: 200px;
    position: absolute;
    top: 0;
    right: 0;
    opacity: 0;
    cursor: pointer; }

.btn-file-input i {
  font-size: 40px;
  display: block;
  margin-bottom: 5px; }

.file-input-wrapper > .btn-file-input {
  display: inline-block;
  width: 200px; }

.btn-file-input {
  width: auto;
  border: 0 none;
  margin: 0;
  padding: 0;
  background: transparent;
  overflow: visible;
  /* Stupid IE */
  font: 14px arial, sans-serif;
  text-decoration: none;
  text-align: center;
  text-shadow: 1px 1px 0px #2b6e8f;
  color: #ffffff;
  font-family: arial;
  font-size: 15px;
  font-style: normal; }
  .btn-file-input::-moz-focus-inner {
    border: 0;
    padding: 0; }

.alt-input-button {
  color: white;
  text-align: center;
  background-color: #3482b1;
  border-radius: 5px;
  cursor: pointer;
  margin: 0 auto 20px auto;
  padding: 10px;
  font-size: 14px;
  display: block;
  border: 0;
  width: 230px; }
  .alt-input-button:hover, .alt-input-button.hover {
    background: #4d9ccb; }

.ext-input-field {
  width: 30%;
  margin: 0 auto;
  background: #262626;
  border-radius: 3px;
  padding: 8px;
  margin-bottom: 20px;
  display: none;
  position: absolute;
  top: 60px;
  left: 35%;
  box-shadow: 0 0 5px grey;
  text-align: center; }
  .ext-input-field label {
    color: white;
    font-size: 14px; }
  .ext-input-field input {
    width: 100%;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    font-size: 14px;
    font-family: inherit;
    padding: 3px;
    margin-top: 8px; }
  .ext-input-field .close-ext-input {
    float: right;
    color: white;
    cursor: pointer;
    opacity: 0.5; }
    .ext-input-field .close-ext-input:hover {
      opacity: 1; }
  .ext-input-field .ext-input-warning {
    color: white;
    text-align: left;
    font-size: 12px;
    padding-top: 5px;
    display: none; }

.ext-input-active .file-input-wrapper,
.ext-input-active .alt-input-button,
.ext-input-active #lastfile,
.ext-input-active #formats {
  opacity: 0.2;
  pointer-events: none; }

.about {
  -webkit-touch-callout: text;
  -webkit-user-select: text;
  -khtml-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
  color: #262626;
  background: #f1f1f1;
  z-index: 200;
  position: relative;
  padding: 40px 0;
  margin-bottom: -100%;
  display: none; }
  .about.active {
    display: block; }
  .about .container {
    width: 850px;
    margin: 0 auto; }
  .about h1 {
    font-size: 50px;
    text-align: center;
    margin-bottom: 20px;
    color: #3482b1; }
  .about p.lead {
    font-size: 20px;
    text-align: center;
    margin: 0 auto;
    display: block;
    line-height: 32px; }
  .about ul {
    text-align: center;
    margin: 2em 0 0 0; }
  .about li {
    width: 18%;
    display: inline-block;
    vertical-align: top;
    font-size: 16px;
    line-height: 20px;
    text-align: center;
    padding: 0 3%;
    padding-bottom: 25px; }
    .about li strong {
      font-weight: bold;
      color: #3482b1; }
  .about a {
    color: inherit; }
    .about a:hover {
      color: #777; }
  .about .press {
    color: #3482b1;
    font-weight: bold;
    text-align: center;
    padding: 0; }
    .about .press p {
      font-size: 20px;
      padding-bottom: 10px; }
    .about .press a {
      display: inline-block;
      width: 33%;
      vertical-align: middle;
      opacity: 0.6; }
      .about .press a:hover {
        opacity: 1; }
    .about .press img {
      width: 80%; }
  .about .credits {
    text-align: center;
    margin-top: 40px; }
    .about .credits .twitter {
      display: inline-block;
      background: #777;
      padding: 5px;
      border-radius: 5px;
      text-decoration: none;
      color: white;
      font-size: 12px;
      margin-right: 10px; }
      .about .credits .twitter:hover {
        background: #5e5e5e; }
    .about .credits p {
      font-size: 14px;
      margin-top: 10px; }
  .about .start {
    display: block;
    padding: 0.7em 1em;
    border-radius: 5px;
    color: white;
    margin: 0 auto;
    margin-top: 20px;
    width: 14em;
    text-align: center;
    background: grey;
    cursor: default;
    font-size: 21px; }
    .about .start .start-loading {
      display: inline; }
    .about .start .start-ready {
      display: none; }
    .about .start.ready {
      cursor: pointer;
      background: #3482b1; }
      .about .start.ready:hover {
        background: #28658a; }
      .about .start.ready .start-loading {
        display: none; }
      .about .start.ready .start-ready {
        display: inline; }
  .about #old-browser, .about .mobile {
    width: 400px;
    max-width: 98%;
    padding: 0;
    margin: 0 auto;
    color: darkred;
    line-height: 20px;
    margin-top: 20px;
    text-align: center; }
  .about .mobile {
    display: none; }

@media (max-width: 850px) {
  .about {
    padding: 40px 10%; }
    .about h1 {
      font-size: 35px; }
    .about p.lead {
      font-size: 18px;
      font-weight: bold;
      line-height: 24px; }
    .about .container {
      width: 100%; }
    .about ul {
      margin: 2em 0; }
    .about li {
      width: auto;
      padding: 3px 0;
      padding-bottom: 5px;
      text-align: left;
      display: block;
      height: auto; }
    .about .press {
      text-align: left;
      padding-top: 0; }
      .about .press p {
        padding-bottom: 20px;
        font-size: inherit; }
      .about .press a {
        width: 100%; }
        .about .press a img {
          max-width: 225px; }
    .about .start {
      width: 80%; }
    .about .credits a {
      margin-right: 0; }
    .about .credits span {
      display: block;
      padding-top: 10px; }
  #old-browser {
    width: auto; }
  .about .mobile {
    display: block; } }

.separate-page {
  -webkit-touch-callout: text;
  -webkit-user-select: text;
  -khtml-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
  color: #262626;
  background: #f1f1f1;
  z-index: 200;
  position: relative;
  padding: 40px 0;
  margin-bottom: -100%;
  display: none;
  display: block; }
  .separate-page.active {
    display: block; }
  .separate-page .container {
    width: 850px;
    margin: 0 auto; }
  .separate-page h1 {
    font-size: 3em;
    margin: 0.3em 0 0 0; }
  .separate-page p, .separate-page ul, .separate-page ol {
    margin-top: 1em; }
  .separate-page h2, .separate-page h3 {
    margin-top: 1.4em; }
  .separate-page h2 {
    font-size: 1.4em;
    margin-top: 1.8em;
    position: relative; }
    .separate-page h2 small {
      font-size: 0.8em;
      font-weight: normal; }
    .separate-page h2:hover .permalink {
      display: inline-block; }
    .separate-page h2 .permalink {
      display: none;
      margin-left: 0.25em;
      color: inherit;
      text-decoration: none;
      opacity: 0.5; }
      .separate-page h2 .permalink:hover {
        opacity: 1; }
      .separate-page h2 .permalink:visited {
        color: inherit; }
  .separate-page strong, .separate-page h2, .separate-page h3 {
    font-weight: bold; }
  .separate-page li {
    list-style-type: disc;
    margin-left: 2em; }
  .separate-page p, .separate-page li {
    line-height: 1.3em; }
  .separate-page .container {
    max-width: 600px; }
  .separate-page a {
    color: #3482b1; }
    .separate-page a:visited {
      color: #112b3b; }
  .separate-page #close-help {
    color: #3482b1;
    text-decoration: none;
    font-size: 1em; }
    .separate-page #close-help:hover {
      text-decoration: underline; }
  .separate-page .row {
    padding: 20px;
    margin: 20px 0;
    background: #e1e1e1;
    border-radius: 4px; }
    .separate-page .row h2 {
      margin: 0; }
  .separate-page .button {
    color: white;
    text-align: center;
    background-color: #3482b1;
    border-radius: 5px;
    cursor: pointer;
    display: inline-block;
    padding: 8px;
    text-decoration: none !important;
    color: white !important; }
    .separate-page .button:hover, .separate-page .button.hover {
      background: #4d9ccb; }

@media (max-width: 850px) {
  .separate-page {
    padding: 0; }
    .separate-page .container {
      width: auto;
      padding: 5%; } }

.controls {
  display: flex;
  -webkit-flex: 1;
  flex: 1; }
  .controls .button {
    display: inline-block;
    vertical-align: top;
    height: 36px;
    min-width: 36px;
    text-align: center;
    border-right: 1px solid #404040;
    background: #262626;
    color: white;
    padding: 10px 0;
    height: 16px; }
    .controls .button:hover {
      background-color: #404040;
      cursor: pointer; }
    .controls .button:active {
      background-color: #0d0d0d; }

.play-pause.playing .fa-pause {
  display: inline; }

.play-pause.playing .fa-play {
  display: none; }

.play-pause .fa-pause {
  display: none; }

.play-pause .fa-play {
  display: inline; }

.button.refresh {
  border-left: 1px solid #404040; }

.button .topbar-button-shortcut {
  opacity: 0;
  padding-top: 2em;
  color: #000;
  font-size: 9px;
  cusor: default;
  display: block;
  pointer-events: none;
  text-transform: uppercase;
  -webkit-transition: opacity 0.25s;
  -moz-transition: opacity 0.25s;
  transition: opacity 0.25s; }

.topbar:hover .button .topbar-button-shortcut {
  opacity: 1; }

.video-player {
  position: absolute;
  top: 55px;
  left: 20px;
  width: calc((100% - 800px)/2);
  min-width: 200px;
  box-shadow: 0px 0px 5px black;
  background: #262626; }

.progressor {
  display: inline-block;
  width: 100%;
  height: 14px;
  margin: 10px;
  color: lightgrey;
  background: #4d4d4d;
  text-align: center;
  cursor: default;
  font-size: 13px;
  padding-top: 2px;
  vertical-align: middle;
  overflow: hidden; }

#player-hook {
  display: inline-block;
  flex: 1;
  -webkit-flex: 1;
  min-width: 100px; }
  #player-hook > span {
    position: relative;
    z-index: 200; }

.progressor-progress {
  background: white;
  background: grey;
  z-index: 100 !important; }

.media-title {
  display: inline-block;
  padding: 11px 0;
  color: lightgrey;
  text-align: center;
  font-size: 14px;
  border-right: 1px solid #404040; }

.player-time {
  -webkit-touch-callout: text;
  -webkit-user-select: text;
  -khtml-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
  display: inline-block;
  font-size: 13px;
  border-left: 1px solid #404040;
  border-right: 1px solid #404040;
  padding: 11px 10px 9px 10px !important; }

.time-selection {
  position: fixed;
  top: 20px;
  z-index: 50;
  top: 200px;
  background: #262626;
  padding: 7px;
  color: white;
  top: 25px;
  box-shadow: 0px 0px 5px black;
  right: 160px;
  border: 1px solid #404040;
  display: none; }
  .time-selection.active {
    display: block; }
  .time-selection input {
    width: 60px;
    font-size: 16px;
    text-align: center; }
  .time-selection span {
    padding: 0 7px; }

.topbar {
  background: #262626;
  color: white;
  box-shadow: 0px 0px 10px #666;
  -webkit-box-shadow: 0px 0px 10px #666;
  z-index: 50;
  position: relative;
  font-size: 16px;
  display: flex; }
  .topbar.inputting .controls {
    display: none; }
  .topbar.inputting .help-title {
    border-right: 1px solid #404040; }

.title {
  padding: 10px;
  text-align: left;
  display: inline-block;
  vertical-align: top;
  width: auto;
  background: #262626;
  color: white;
  border-right: 1px solid #404040; }
  .title i {
    font-size: 0.90em; }
  .title:hover {
    background-color: #404040;
    cursor: pointer; }
  .title.active {
    color: #262626;
    background: #f1f1f1; }
    .title.active:hover {
      background: #DDD; }
  .title:active {
    background-color: #0d0d0d; }

.help-title {
  padding: 10px;
  text-align: left;
  display: inline-block;
  vertical-align: top;
  width: auto;
  background: #262626;
  color: white;
  border-right: 1px solid #404040;
  text-decoration: none; }
  .help-title i {
    font-size: 0.90em; }
  .help-title:hover {
    background-color: #404040;
    cursor: pointer; }
  .help-title.active {
    color: #262626;
    background: #f1f1f1; }
    .help-title.active:hover {
      background: #DDD; }
  .help-title:active {
    background-color: #0d0d0d; }

.language-title {
  padding: 10px;
  text-align: left;
  display: inline-block;
  vertical-align: top;
  width: auto;
  background: #262626;
  color: white; }
  .language-title i {
    font-size: 0.90em; }
  .language-title:hover {
    background-color: #404040;
    cursor: pointer; }
  .language-title.active {
    color: #262626;
    background: #f1f1f1; }
    .language-title.active:hover {
      background: #DDD; }
  .language-title:active {
    background-color: #0d0d0d; }
  .language-title i {
    font-size: 0.90em; }

.settings-button {
  padding: 10px;
  text-align: left;
  display: inline-block;
  vertical-align: top;
  width: auto;
  background: #262626;
  color: white;
  border-left: 1px solid #404040;
  border-right: 1px solid #404040;
  align-self: flex-end; }
  .settings-button i {
    font-size: 0.90em; }
  .settings-button:hover {
    background-color: #404040;
    cursor: pointer; }
  .settings-button.active {
    color: #262626;
    background: #f1f1f1; }
    .settings-button.active:hover {
      background: #DDD; }
  .settings-button:active {
    background-color: #0d0d0d; }

.language-picker {
  -webkit-touch-callout: text;
  -webkit-user-select: text;
  -khtml-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
  color: #262626;
  background: #f1f1f1;
  z-index: 200;
  position: relative;
  padding: 40px 0;
  margin-bottom: -100%;
  display: none;
  padding: 20px 0 10px 0;
  box-shadow: 0px 8px 15px rgba(120, 120, 120, 0.3);
  -webkit-box-shadow: 0px 8px 15px rgba(120, 120, 120, 0.3);
  width: 100%;
  position: absolute;
  z-index: 1000;
  text-align: center;
  border-bottom: 2px solid #3482b1; }
  .language-picker.active {
    display: block; }
  .language-picker .container {
    width: 850px;
    margin: 0 auto; }
  .language-picker .language-button {
    display: inline-block;
    padding: 0.6em;
    margin-bottom: 10px;
    width: 22%;
    cursor: pointer;
    border: 1px solid #DDD; }
    .language-picker .language-button:hover {
      background: #3482b1;
      border-color: #3482b1;
      color: white; }

.button.speed {
  width: auto;
  padding-left: 10px;
  padding-right: 10px; }
  .button.speed.fixed {
    background: white;
    color: #262626; }
    .button.speed.fixed .speed-box {
      display: block; }

.speed-box {
  background: #262626;
  color: white;
  width: 190px;
  padding: 8px 0px 5px 0px;
  z-index: -50;
  cursor: default;
  vertical-align: middle;
  font-size: 13px;
  box-shadow: 0px 0px 10px #666;
  -webkit-box-shadow: 0px 0px 10px #666;
  text-transform: uppercase;
  position: absolute;
  top: 36px;
  left: 214px;
  display: none; }
  .speed-box:hover {
    display: block; }
  .speed-box .speed-slider {
    display: inline;
    vertical-align: middle;
    width: 120px; }

.speed:hover > .speed-box {
  display: block; }

.slider-origin {
  height: 24px;
  border-right: 1px solid grey;
  position: relative;
  left: 39px;
  left: 44px;
  z-index: -50;
  display: inline-block;
  vertical-align: middle; }

/* custom player */
.audiojs {
  font-family: inherit;
  box-shadow: none;
  -webkit-box-shadow: none;
  background: #262626;
  display: inline-block;
  width: auto;
  height: 33px; }
  .audiojs .play-pause {
    display: none; }
  .audiojs .time {
    border-color: #404040; }
  .audiojs .scrubber {
    border: none; }

.scrubber .progress {
  background: white;
  opacity: 0.3; }

.scrubber .loaded {
  background: #4d4d4d;
  color: lightgrey;
  padding: 1px 2px;
  text-align: center;
  cursor: default; }

#textbox {
  -webkit-touch-callout: text;
  -webkit-user-select: text;
  -khtml-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
  resize: none;
  font-size: 15px;
  line-height: 20px;
  font-family: Arial;
  padding: 5px;
  margin: 50px auto;
  width: 50%;
  display: block;
  border: none;
  padding: 50px 25% 5px 25%;
  outline: none;
  background: white;
  box-shadow: 0px 0px 10px #CCC;
  width: 600px;
  padding: 50px;
  min-height: 700px;
  overflow-y: hidden;
  color: #262626; }
  #textbox b, #textbox strong {
    font-weight: bold; }
  #textbox i, #textbox em {
    font-style: italic; }
  #textbox .timestamp {
    color: #3482b1;
    border-radius: 5px;
    border-left: 2px solid #3482b1;
    border-right: 2px solid #3482b1;
    padding: 0 3px;
    margin: 0 3px; }
    #textbox .timestamp:hover {
      background: #ebf4f9;
      cursor: pointer; }
    #textbox .timestamp:active {
      background: #c3deee; }

.textbox-container {
  overflow-y: scroll;
  position: fixed;
  height: calc(100% - 36px);
  background: #eee;
  top: 36px;
  width: 100%; }

#partial-container {
  display: flex;
  justify-content: center;
  white-space: nowrap; }

#partial {
  width: 25%;
  min-width: 350px;
  color: #4C6777;
  display: inline-block;
  overflow-x: hidden;
  height: 1rem;
  direction: rtl;
  text-align: center; }

#tips {
  display: flex;
  justify-content: center;
  margin: 2rem 0; }
  #tips div.content {
    max-width: 400px;
    border: 2px solid #BBB;
    display: inline-block;
    border-radius: 4px;
    padding-top: .25rem;
    padding-right: .25rem; }
  #tips div.button {
    padding: .25rem;
    display: flex;
    justify-content: flex-end; }
    #tips div.button button {
      cursor: pointer; }
  #tips div.text {
    padding: 1rem;
    line-height: 1.5rem;
    color: #888888; }
    #tips div.text:hover {
      color: black; }

.message-panel {
  width: 600px;
  margin: 20px auto -20px;
  background: #ddd;
  padding: 10px;
  font-size: 12px;
  border-radius: 3px; }
  .message-panel.hidden {
    display: none; }
  .message-panel.stuck {
    position: fixed;
    top: 30px; }
  .message-panel .message-content > a {
    color: inherit; }

.close-message-panel {
  float: right;
  cursor: pointer;
  opacity: 0.6; }
  .close-message-panel:hover {
    opacity: 1; }

.text-panel {
  position: fixed;
  top: 100px;
  left: calc( 50% + 350px);
  width: 200px;
  padding-left: 20px;
  text-align: left;
  padding-top: 200px;
  -webkit-transition: padding 1s;
  transition: padding 1s;
  opacity: 0.3;
  -webkit-transition: opacity 0.2s, color 0.2s, padding 1s;
  transition: opacity 0.2s, color 0.2s, padding 1s; }
  .text-panel.editing {
    padding-top: 0px; }
  .text-panel .sbutton {
    display: block;
    background: inherit;
    border: none;
    padding: 0;
    margin: 0;
    outline: none;
    padding: 5px 0;
    color: #262626; }
    .text-panel .sbutton.time {
      display: none;
      height: 0; }
      .text-panel .sbutton.time.active {
        display: block;
        height: auto; }
    .text-panel .sbutton.backup.flash i {
      -webkit-animation: save-flash 1s;
      animation: save-flash 1s; }
    .text-panel .sbutton i {
      font-size: 20px;
      min-width: 20px;
      text-align: center;
      display: inline-block;
      vertical-align: middle;
      padding: 3px;
      border: 1px solid #CCC;
      border-radius: 2px; }
      .text-panel .sbutton i:hover {
        border-color: #AAA;
        cursor: pointer; }
      .text-panel .sbutton i:active {
        box-shadow: 0 0 3px grey inset; }
      .text-panel .sbutton i.active {
        color: #3482b1; }
    .text-panel .sbutton .label {
      text-transform: uppercase;
      font-size: 10px;
      padding: 0 5px;
      display: inline-block;
      opacity: 0;
      -webkit-transition: opacity 0.2s, color 0.2s, padding 1s;
      transition: opacity 0.2s, color 0.2s, padding 1s; }
  .text-panel .wordcount {
    -webkit-touch-callout: text;
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
    padding: 5px 0;
    color: #262626;
    font-size: 16px;
    margin-top: 10px; }
    .text-panel .wordcount .wc-text {
      color: rgba(0, 0, 0, 0);
      -webkit-transition: opacity 0.2s, color 0.2s, padding 1s;
      transition: opacity 0.2s, color 0.2s, padding 1s; }
      .text-panel .wordcount .wc-text .word-count-number {
        color: #262626; }
  .text-panel:hover {
    opacity: 1; }
    .text-panel:hover .wordcount .wc-text {
      color: #262626; }
    .text-panel:hover .sbutton .label {
      opacity: 0.5; }

.import-file-wrapper {
  position: relative;
  overflow: hidden; }
  .import-file-wrapper > input[type="file"] {
    font-size: 200px;
    position: absolute;
    top: 0;
    right: 0;
    opacity: 0;
    cursor: pointer; }

@-webkit-keyframes save-flash {
  0% {
    color: #262626; }
  15% {
    color: #3482b1; }
  100% {
    color: #262626; } }

@keyframes save-flash {
  0% {
    color: #262626; }
  15% {
    color: #3482b1; }
  100% {
    color: #262626; } }

.export-panel {
  position: relative;
  position: fixed;
  top: 200px;
  width: 260px;
  text-align: left;
  background: #262626;
  color: white;
  border-radius: 3px;
  -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.5s;
  -webkit-transform: scale(0.1);
  -webkit-transform-origin: 110% 25%;
  transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.5s;
  transform: scale(0.1);
  transform-origin: 110% 25%;
  opacity: 0;
  z-index: 100; }
  .export-panel:after {
    top: 21%;
    left: 0%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(51, 51, 51, 0);
    border-left-color: #262626;
    border-width: 15px;
    margin-left: 260px; }
  .export-panel.active {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1; }
  .export-panel p {
    padding: 0 10px 10px 10px;
    font-size: 11px;
    line-height: 13px; }
    .export-panel p a {
      color: white; }
  .export-panel .export-title {
    font-weight: bold;
    margin: 10px;
    font-size: 16px; }
  .export-panel .export-block-md, .export-panel .export-block-txt {
    display: block;
    text-align: center;
    font-size: 14px;
    padding: 10px;
    margin: 10px;
    border-radius: 3px;
    color: white;
    text-decoration: none;
    background: #555;
    cursor: pointer;
    border: none; }
    .export-panel .export-block-md:hover, .export-panel .export-block-txt:hover {
      background: #3482b1; }
  .export-panel .export-block-gd {
    display: block;
    text-align: center;
    font-size: 14px;
    padding: 10px;
    margin: 10px;
    border-radius: 3px;
    color: white;
    text-decoration: none;
    border: 1px solid #555;
    padding: 8px 10px;
    cursor: default; }
    .export-panel .export-block-gd.unauth {
      text-align: left; }
      .export-panel .export-block-gd.unauth .sign-in {
        display: inline-block; }
    .export-panel .export-block-gd.gd-authenticated {
      background: #555;
      cursor: pointer;
      border: none;
      text-align: center; }
      .export-panel .export-block-gd.gd-authenticated:hover {
        background: #3482b1; }
    .export-panel .export-block-gd .sign-in {
      background: #555;
      cursor: pointer;
      border: none;
      display: none;
      font-size: 12px;
      padding: 6px;
      vertical-align: top;
      margin: -5px -5px 0 0;
      float: right;
      border-radius: 2px; }
      .export-panel .export-block-gd .sign-in:hover {
        background: #3482b1; }

.backup-panel {
  position: fixed;
  width: 100%;
  background: #262626;
  top: 12%;
  z-index: 1000;
  box-shadow: 0px 0px 10px #666;
  -webkit-box-shadow: 0px 0px 10px #666;
  padding-bottom: 20px;
  display: none; }
  .backup-panel .backup-description {
    color: white;
    width: 800px;
    margin: 20px auto; }
    .backup-panel .backup-description .backup-title {
      font-size: 2em;
      margin-bottom: 0.4em; }
    .backup-panel .backup-description .backup-instructions {
      font-size: 0.9em; }
    .backup-panel .backup-description .backup-close {
      float: right;
      font-size: 1.6em;
      opacity: 0.5;
      cursor: pointer;
      transition: opacity 0.1s; }
      .backup-panel .backup-description .backup-close:hover {
        opacity: 1; }
  .backup-panel .backup-window {
    background: #404040;
    height: 300px;
    width: 800px;
    margin: 0 auto;
    overflow-y: scroll;
    padding: 5px;
    box-sizing: border-box; }
    .backup-panel .backup-window .no-backups {
      color: #ccc;
      text-align: center;
      padding-top: 10px; }
    .backup-panel .backup-window .more-backups {
      color: white;
      text-align: center;
      background: #555;
      padding: 1em 0;
      margin: 10px;
      cursor: pointer; }
      .backup-panel .backup-window .more-backups:hover {
        background: #666; }
    .backup-panel .backup-window .backup-block {
      -webkit-touch-callout: text;
      -webkit-user-select: text;
      -khtml-user-select: text;
      -moz-user-select: text;
      -ms-user-select: text;
      user-select: text;
      padding: 10px;
      box-sizing: border-box;
      width: 25%;
      display: inline-block;
      vertical-align: top; }
      .backup-panel .backup-window .backup-block.new-block {
        opacity: 0;
        width: 0; }
        .backup-panel .backup-window .backup-block.new-block .backup-restore-button {
          display: none; }
      .backup-panel .backup-window .backup-block .backup-doc {
        overflow-y: scroll;
        overflow-x: hidden;
        background: white;
        height: 180px;
        padding: 10px;
        font-size: 8px; }
      .backup-panel .backup-window .backup-block .backup-restore-button {
        text-align: center;
        margin-top: 10px;
        color: white;
        font-size: 12px; }
        .backup-panel .backup-window .backup-block .backup-restore-button span {
          text-decoration: underline;
          cursor: pointer; }

.settings-panel {
  max-width: 800px;
  margin: 30px auto;
  display: none; }
  .settings-panel.active {
    display: block; }
  .settings-panel h2 {
    font-size: 32px;
    font-weight: 300;
    margin-bottom: 20px; }
  .settings-panel h3 {
    font-size: 24px;
    font-weight: 300;
    margin-bottom: 20px; }
  .settings-panel .reset-button {
    color: white;
    text-align: center;
    background-color: #3482b1;
    border-radius: 5px;
    cursor: pointer;
    display: inline-block;
    padding: 8px 10px;
    margin: 10px 0; }
    .settings-panel .reset-button:hover, .settings-panel .reset-button.hover {
      background: #4d9ccb; }

.keyboard-shortcuts li {
  line-height: 3em;
  display: flex;
  padding: 0 1em; }
  .keyboard-shortcuts li:nth-child(2n - 1) {
    background: white; }

.keyboard-shortcuts .shortcut-name {
  width: 20%;
  min-width: 200px; }

.keyboard-shortcuts .key-combo, .keyboard-shortcuts .add-combo {
  cursor: default;
  display: inline-block;
  white-space: nowrap;
  font-size: 14px;
  border: 1px solid black;
  border-radius: 2px;
  padding: 0px 4px;
  margin-right: 5px;
  line-height: 21px;
  background: #262626;
  color: white; }

.keyboard-shortcuts .remove-combo {
  font-size: 8px;
  color: #f1f1f1;
  border-radius: 100%;
  display: inline-block;
  line-height: 0;
  vertical-align: top;
  cursor: pointer;
  margin-left: 4px;
  text-align: center;
  padding: 3px 4px;
  vertical-align: middle;
  margin-bottom: 2px;
  border-radius: 1px;
  opacity: 0.75; }
  .keyboard-shortcuts .remove-combo:hover {
    background: #f1f1f1;
    color: #262626; }

.keyboard-shortcuts .add-combo {
  color: white;
  text-align: center;
  background-color: #3482b1;
  border-radius: 5px;
  cursor: pointer;
  border: none;
  border-radius: 2px;
  padding-top: 1px;
  padding-bottom: 1px; }
  .keyboard-shortcuts .add-combo:hover, .keyboard-shortcuts .add-combo.hover {
    background: #4d9ccb; }

.keyboard-shortcuts .listening-combo {
  cursor: default;
  color: black;
  font-size: 14px;
  margin-left: 4px; }
  .keyboard-shortcuts .listening-combo > span {
    color: white;
    text-align: center;
    background-color: #3482b1;
    border-radius: 5px;
    cursor: pointer;
    border: none;
    border-radius: 2px;
    padding: 3px 4px;
    margin-left: 5px; }
    .keyboard-shortcuts .listening-combo > span:hover, .keyboard-shortcuts .listening-combo > span.hover {
      background: #4d9ccb; }

.fa {
  display: inline-block; }
  .fa:before {
    content: '◉'; }

.fa-play:before {
  content: "▶︎"; }

.fa-pause:before {
  content: "🁢🁢"; }

.fa-backward:before {
  content: "◀︎◀︎"; }

.fa-forward:before {
  content: "▶︎▶︎"; }

.fa-speed:before {
  content: " "; }

.fa-refresh:before {
  content: "♲"; }

.fa-bold:before {
  content: "B"; }

.fa-italic:before {
  content: "I"; }

.fa-clock-o:before {
  content: "⌚︎"; }

.fa-times:before {
  content: "x"; }