/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */
html {
  font-family: sans-serif;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
}
/**
 * Remove default margin.
 */
body {
  margin: 0;
}
/* HTML5 display definitions
   ========================================================================== */
/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11
 * and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}
/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */
audio,
canvas,
progress,
video {
  display: inline-block;
  /* 1 */
  vertical-align: baseline;
  /* 2 */
}
/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0;
}
/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
 */
[hidden],
template {
  display: none;
}
/* Links
   ========================================================================== */
/**
 * Remove the gray background color from active links in IE 10.
 */
a {
  background-color: transparent;
}
/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */
a:active,
a:hover {
  outline: 0;
}
/* Text-level semantics
   ========================================================================== */
/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */
abbr[title] {
  border-bottom: 1px dotted;
}
/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */
b,
strong {
  font-weight: bold;
}
/**
 * Address styling not present in Safari and Chrome.
 */
dfn {
  font-style: italic;
}
/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
/**
 * Address styling not present in IE 8/9.
 */
mark {
  background: #ff0;
  color: #000;
}
/**
 * Address inconsistent and variable font size in all browsers.
 */
small {
  font-size: 80%;
}
/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}
/* Embedded content
   ========================================================================== */
/**
 * Remove border when inside `a` element in IE 8/9/10.
 */
img {
  border: 0;
}
/**
 * Correct overflow not hidden in IE 9/10/11.
 */
svg:not(:root) {
  overflow: hidden;
}
/* Grouping content
   ========================================================================== */
/**
 * Address margin not present in IE 8/9 and Safari.
 */
figure {
  margin: 1em 40px;
}
/**
 * Address differences between Firefox and other browsers.
 */
hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
}
/**
 * Contain overflow in all browsers.
 */
pre {
  overflow: auto;
}
/**
 * Address odd `em`-unit font size rendering in all browsers.
 */
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}
/* Forms
   ========================================================================== */
/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */
/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */
button,
input,
optgroup,
select,
textarea {
  color: inherit;
  /* 1 */
  font: inherit;
  /* 2 */
  margin: 0;
  /* 3 */
}
/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */
button {
  overflow: visible;
}
/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */
button,
select {
  text-transform: none;
}
/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  /* 2 */
  cursor: pointer;
  /* 3 */
}
/**
 * Re-set default cursor for disabled elements.
 */
button[disabled],
html input[disabled] {
  cursor: default;
}
/**
 * Remove inner padding and border in Firefox 4+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}
/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
input {
  line-height: normal;
}
/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}
/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}
/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
 *    (include `-moz` to future-proof).
 */
input[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  /* 2 */
  box-sizing: content-box;
}
/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
/**
 * Define consistent border, margin, and padding.
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}
/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */
legend {
  border: 0;
  /* 1 */
  padding: 0;
  /* 2 */
}
/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */
textarea {
  overflow: auto;
}
/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */
optgroup {
  font-weight: bold;
}
/* Tables
   ========================================================================== */
/**
 * Remove most spacing between table cells.
 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}
td,
th {
  padding: 0;
}

.clearfix:after {
  clear: both;
}
.clearfix:after,
.clearfix:before {
  content: " ";
  display: table;
}
.clear {
  clear: both;
}
.box-shadow {
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.075);
}
.box-shadow-high {
  box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.075);
}
.box-shadow-inset {
  box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.075);
}
.text-shadow {
  text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
}
.normal-font {
  font-family: "Helvetica Light", Helvetica, sans-serif;
  font-weight: normal;
}
.thin-font {
  font-family: 'roboto-thin', helvetica, sans-serif;
  text-rendering: optimizeLegibility;
  font-weight: lighter;
}
.thin-italic-font {
  font-family: 'roboto-thin-italic', helvetica, sans-serif;
}
.bold-font {
  font-family: 'raleway-black', helvetica, sans-serif;
}
.x {
  position: relative;
  cursor: pointer;
  height: 10px;
  width: 10px;
}
.x:before,
.x:after {
  content: '';
  position: absolute;
  left: 50%;
  width: 20%;
  height: 100%;
  background: #fff;
}
.x:before {
  transform: rotate(-45deg);
}
.x:after {
  transform: rotate(45deg);
}
body {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  font-family: "Helvetica Light", Helvetica, sans-serif;
  font-weight: normal;
  color: #667273;
  letter-spacing: 1px;
  background: #fff;
  -webkit-font-smoothing: antialiased;
}
strong {
  font-weight: normal;
}
button {
  border-radius: 0;
}
a.disabled,
button.disabled {
  pointer-events: none;
  opacity: .5;
}
a:focus,
button:focus {
  outline: none;
}
a {
  cursor: pointer;
  color: #7a9cff;
  text-decoration: none;
}
a:hover {
  color: #93afff;
}
a.underlined {
  text-decoration: underline;
}
a.blue {
  color: #3498db;
}
a.blue:hover {
  color: #2980b9;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: lighter;
}
.spinner {
  width: 30px;
  height: 30px;
  background-color: #333;
  -webkit-animation: rotateplane 1.2s infinite ease-in-out;
  -moz-animation: rotateplane 1.2s infinite ease-in-out;
  animation: rotateplane 1.2s infinite ease-in-out;
}
.blur {
  -webkit-filter: blur(3px);
  -moz-filter: blur(3px);
  filter: blur(3px);
}
.link {
  cursor: pointer;
  color: #7a9cff;
}
.link:hover {
  color: #93afff;
}
.link.underlined {
  text-decoration: underline;
}
.link.blue {
  color: #3498db;
}
.link.blue:hover {
  color: #2980b9;
}
.content {
  max-width: 960px;
  min-width: 540px;
  margin: 0 auto;
  padding: 30px;
}
.content:after {
  clear: both;
}
.content:after,
.content:before {
  content: " ";
  display: table;
}
.content.full-page {
  max-width: 100%;
  padding: 0;
}
@font-face {
  font-family: "lobster";
  src: url('/media/fonts/lobster/lobster.ttf') format("truetype");
}
@font-face {
  font-family: "roboto-thin";
  src: url('/media/fonts/roboto/roboto-regular.ttf') format("truetype");
}
@font-face {
  font-family: "roboto-thin-italic";
  src: url('/media/fonts/roboto/roboto-italic.ttf') format("truetype");
}
@font-face {
  font-family: "raleway-black";
  src: url('/media/fonts/raleway/raleway-black.ttf') format("truetype");
}
html {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
}
/* Keyframes =================================== */
@-webkit-keyframes recording {
  0%,
  100% {
    background: #e74c3c;
  }
  50% {
    background: #921e12;
  }
}
@-webkit-keyframes stream {
  0% {
    -webkit-transform: translatex(0);
    transform: translatex(0);
  }
  100% {
    -webkit-transform: translatex(-50%);
    transform: translatex(-50%);
  }
}
@-moz-keyframes stream {
  0% {
    -webkit-transform: translatex(0);
    transform: translatex(0);
  }
  100% {
    -webkit-transform: translatex(-50%);
    transform: translatex(-50%);
  }
}
@keyframes stream {
  0% {
    -webkit-transform: translatex(0);
    transform: translatex(0);
  }
  100% {
    -webkit-transform: translatex(-50%);
    transform: translatex(-50%);
  }
}
@-webkit-keyframes arrowBob {
  0% {
    -webkit-transform: translateY(0) rotate(-135deg);
    transform: translateY(0) rotate(-135deg);
  }
  90% {
    -webkit-transform: translateY(0) rotate(-135deg);
    transform: translateY(0) rotate(-135deg);
  }
  95% {
    -webkit-transform: translateY(10px) rotate(-135deg);
    transform: translateY(10px) rotate(-135deg);
  }
  100% {
    -webkit-transform: translateY(0) rotate(-135deg);
    transform: translateY(0) rotate(-135deg);
  }
}
@-moz-keyframes arrowBob {
  0% {
    -webkit-transform: translateY(0) rotate(-135deg);
    transform: translateY(0) rotate(-135deg);
  }
  90% {
    -webkit-transform: translateY(0) rotate(-135deg);
    transform: translateY(0) rotate(-135deg);
  }
  95% {
    -webkit-transform: translateY(10px) rotate(-135deg);
    transform: translateY(10px) rotate(-135deg);
  }
  100% {
    -webkit-transform: translateY(0) rotate(-135deg);
    transform: translateY(0) rotate(-135deg);
  }
}
@-moz-keyframes bob {
  0% {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px) rotate(0.001deg);
  }
  50% {
    -webkit-transform: translateY(2px);
    transform: translateY(2px) rotate(0.001deg);
  }
  100% {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px) rotate(0.001deg);
  }
}
@keyframes bob {
  0% {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px) rotate(0.001deg);
  }
  50% {
    -webkit-transform: translateY(2px);
    transform: translateY(2px) rotate(0.001deg);
  }
  100% {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px) rotate(0.001deg);
  }
}
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotateZ(0deg);
    transform: rotateZ(0deg);
  }
  100% {
    -webkit-transform: rotateZ(360deg);
    transform: rotateZ(360deg);
  }
}
@-moz-keyframes spin {
  0% {
    -webkit-transform: rotateZ(0deg);
    transform: rotateZ(0deg);
  }
  100% {
    -webkit-transform: rotateZ(360deg);
    transform: rotateZ(360deg);
  }
}
@keyframes spin {
  0% {
    -webkit-transform: rotateZ(0deg);
    transform: rotateZ(0deg);
  }
  100% {
    -webkit-transform: rotateZ(360deg);
    transform: rotateZ(360deg);
  }
}
@keyframes blink {
  0% {
    opacity: 1.0;
  }
  30% {
    opacity: 0.5;
  }
  100% {
    opacity: 1.0;
  }
}
@-webkit-keyframes blink {
  0% {
    opacity: 1.0;
  }
  30% {
    opacity: 0.5;
  }
  100% {
    opacity: 1.0;
  }
}
@keyframes borderGlow {
  0% {
    border-color: #fff;
  }
  30% {
    border-color: #ffc800;
  }
  100% {
    border-color: #fff;
  }
}
@-webkit-keyframes glow {
  0% {
    border-color: #fff;
  }
  30% {
    border-color: #ffc800;
  }
  100% {
    border-color: #fff;
  }
}
@-webkit-keyframes rotateplane {
  0% {
    -webkit-transform: perspective(120px);
    transform: perspective(120px);
  }
  50% {
    -webkit-transform: perspective(120px) rotateY(180deg);
    transform: perspective(120px) rotateY(180deg);
  }
  100% {
    -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg);
    transform: perspective(120px) rotateY(180deg) rotateX(180deg);
  }
}
@-moz-keyframes rotateplane {
  0% {
    -webkit-transform: perspective(120px);
    transform: perspective(120px);
  }
  50% {
    -webkit-transform: perspective(120px) rotateY(180deg);
    transform: perspective(120px) rotateY(180deg);
  }
  100% {
    -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg);
    transform: perspective(120px) rotateY(180deg) rotateX(180deg);
  }
}
@keyframes rotateplane {
  0% {
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
  }
  50% {
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
  }
  100% {
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes dropIn {
  0% {
    top: -75px;
    opacity: 0;
  }
  100% {
    top: 0;
    opacity: 1;
  }
}
@-webkit-keyframes Gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@-moz-keyframes Gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@keyframes Gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.button {
  padding: 15px;
  background: #bab0ff;
  cursor: pointer;
  display: inline-block;
  border: 1px solid #8d7dff;
  color: #fff;
  text-shadow: 0 0 1px #8d7dff;
  letter-spacing: .05em;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.075);
}
.button:hover {
  color: #fff;
  background-color: #c7bfff;
}
.button:active {
  background-color: #ada1ff;
}
.button:focus {
  outline: none;
}
.button.small {
  padding: 5px 15px;
}
.button.primary {
  background-color: #7a9cff;
  border-color: #6089ff;
  text-shadow: 0 0 1px #6089ff;
  color: #fff;
}
.button.primary .text-box {
  border-color: #6089ff;
  text-shadow: 0 0 1px #6089ff;
}
.button.primary:hover {
  color: #fff;
  background-color: #89a7ff;
}
.button.primary:active {
  background-color: #6a90ff;
}
.button.secondary {
  background-color: #bab0ff;
  border-color: #8d7dff;
  text-shadow: 0 0 1px #8d7dff;
  color: #fff;
}
.button.secondary .text-box {
  border-color: #8d7dff;
  text-shadow: 0 0 1px #8d7dff;
}
.button.secondary:hover {
  color: #fff;
  background-color: #c7bfff;
}
.button.secondary:active {
  background-color: #ada1ff;
}
.button.green {
  background-color: #48D684;
  border-color: #2bc06a;
  color: #fff;
}
.button.green .text-box {
  border-color: #2bc06a;
}
.button.green:hover {
  color: #fff;
  background-color: #3cd37c;
}
.button.blue {
  background-color: #3498db;
  border-color: #2980b9;
  color: #fff;
}
.button.blue .text-box {
  border-color: #2980b9;
}
.button.blue:hover {
  color: #fff;
  background-color: #2791d9;
}
.button.bright-blue {
  background-color: #bab0ff;
  border-color: #8d7dff;
  color: #fff;
}
.button.bright-blue .text-box {
  border-color: #8d7dff;
  text-shadow: 0 0 1px #8d7dff;
}
.button.bright-blue:hover {
  color: #fff;
  background-color: #ada1ff;
}
.button.bright-blue:hover .text-box {
  border-color: #806eff;
}
.button.light-blue {
  background: #2fd9e9;
  border-color: #16bfcf;
}
.button.light-blue .text-box {
  border-color: #16bfcf;
  text-shadow: 0 0 1px #16bfcf;
}
.button.light-blue:hover {
  background-color: #21d6e8;
}
.button.light-blue:hover .text-box {
  border-color: #14b2c1;
}
.button.white {
  background: #fff;
  border-color: #ecf0f1;
  color: #7a9cff;
  font-family: "Helvetica Light", Helvetica, sans-serif;
  font-weight: normal;
}
.button.white .text-box {
  border-color: #adc2ff;
  text-shadow: 0 0 1px #adc2ff;
}
.button.white:hover {
  background-color: #ffffff;
  color: #6a90ff;
}
.button.white:hover .text-box {
  border-color: #e3b90d;
}
.button.white:hover .icon-box svg use {
  fill: #6a90ff;
}
.button.white .icon-box svg use {
  fill: #7a9cff;
}
.button.dark-blue {
  background: #34495e;
  border-color: #2c3e50;
}
.button.dark-blue .text-box {
  border-color: #2c3e50;
}
.button.dark-blue:hover {
  background-color: #2f4154;
}
.button.purple {
  background: #9b59b6;
  border-color: #8e44ad;
}
.button.purple .text-box {
  border-color: #8e44ad;
}
.button.purple:hover {
  background-color: #954eb1;
}
.button.fuchsia {
  background: #CF8FE5;
  border-color: #bd66db;
}
.button.fuchsia .text-box {
  border-color: #bd66db;
  text-shadow: 0 0 1px #bd66db;
}
.button.fuchsia:hover {
  background-color: #ca83e2;
}
.button.fuchsia:hover .text-box {
  border-color: #b859d9;
}
.button.orange {
  background: #ff7b34;
  border-color: #ff5a01;
}
.button.orange .text-box {
  border-color: #ff5a01;
}
.button.orange:hover {
  background-color: #ff7125;
}
.button.orange:hover .text-box {
  border-color: #f15400;
}
.button.teal {
  background: #36CA97;
  border-color: #30b688;
  text-shadow: 0 0 1px #30b688;
}
.button.teal .text-box {
  border-color: #30b688;
  text-shadow: 0 0 1px #30b688;
}
.button.teal:hover {
  background-color: #42cd9d;
}
.button.teal:hover .text-box {
  border-color: #52d1a6;
}
.button.teal:active {
  background-color: #32be8e;
}
.button.teal:active .text-box {
  border-color: #2eae82;
}
.icon-button {
  padding: 15px;
  background: #bab0ff;
  cursor: pointer;
  border: 1px solid #8d7dff;
  color: #fff;
  text-shadow: 0 0 1px #8d7dff;
  letter-spacing: .05em;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.075);
  display: inline-block;
  border: 1px solid;
  border-radius: 0;
  padding: 0;
}
.icon-button:hover {
  color: #fff;
  background-color: #c7bfff;
}
.icon-button:active {
  background-color: #ada1ff;
}
.icon-button:focus {
  outline: none;
}
.icon-button.small {
  padding: 5px 15px;
}
.icon-button.primary {
  background-color: #7a9cff;
  border-color: #6089ff;
  text-shadow: 0 0 1px #6089ff;
  color: #fff;
}
.icon-button.primary .text-box {
  border-color: #6089ff;
  text-shadow: 0 0 1px #6089ff;
}
.icon-button.primary:hover {
  color: #fff;
  background-color: #89a7ff;
}
.icon-button.primary:active {
  background-color: #6a90ff;
}
.icon-button.secondary {
  background-color: #bab0ff;
  border-color: #8d7dff;
  text-shadow: 0 0 1px #8d7dff;
  color: #fff;
}
.icon-button.secondary .text-box {
  border-color: #8d7dff;
  text-shadow: 0 0 1px #8d7dff;
}
.icon-button.secondary:hover {
  color: #fff;
  background-color: #c7bfff;
}
.icon-button.secondary:active {
  background-color: #ada1ff;
}
.icon-button.green {
  background-color: #48D684;
  border-color: #2bc06a;
  color: #fff;
}
.icon-button.green .text-box {
  border-color: #2bc06a;
}
.icon-button.green:hover {
  color: #fff;
  background-color: #3cd37c;
}
.icon-button.blue {
  background-color: #3498db;
  border-color: #2980b9;
  color: #fff;
}
.icon-button.blue .text-box {
  border-color: #2980b9;
}
.icon-button.blue:hover {
  color: #fff;
  background-color: #2791d9;
}
.icon-button.bright-blue {
  background-color: #bab0ff;
  border-color: #8d7dff;
  color: #fff;
}
.icon-button.bright-blue .text-box {
  border-color: #8d7dff;
  text-shadow: 0 0 1px #8d7dff;
}
.icon-button.bright-blue:hover {
  color: #fff;
  background-color: #ada1ff;
}
.icon-button.bright-blue:hover .text-box {
  border-color: #806eff;
}
.icon-button.light-blue {
  background: #2fd9e9;
  border-color: #16bfcf;
}
.icon-button.light-blue .text-box {
  border-color: #16bfcf;
  text-shadow: 0 0 1px #16bfcf;
}
.icon-button.light-blue:hover {
  background-color: #21d6e8;
}
.icon-button.light-blue:hover .text-box {
  border-color: #14b2c1;
}
.icon-button.white {
  background: #fff;
  border-color: #ecf0f1;
  color: #7a9cff;
  font-family: "Helvetica Light", Helvetica, sans-serif;
  font-weight: normal;
}
.icon-button.white .text-box {
  border-color: #adc2ff;
  text-shadow: 0 0 1px #adc2ff;
}
.icon-button.white:hover {
  background-color: #ffffff;
  color: #6a90ff;
}
.icon-button.white:hover .text-box {
  border-color: #e3b90d;
}
.icon-button.white:hover .icon-box svg use {
  fill: #6a90ff;
}
.icon-button.white .icon-box svg use {
  fill: #7a9cff;
}
.icon-button.dark-blue {
  background: #34495e;
  border-color: #2c3e50;
}
.icon-button.dark-blue .text-box {
  border-color: #2c3e50;
}
.icon-button.dark-blue:hover {
  background-color: #2f4154;
}
.icon-button.purple {
  background: #9b59b6;
  border-color: #8e44ad;
}
.icon-button.purple .text-box {
  border-color: #8e44ad;
}
.icon-button.purple:hover {
  background-color: #954eb1;
}
.icon-button.fuchsia {
  background: #CF8FE5;
  border-color: #bd66db;
}
.icon-button.fuchsia .text-box {
  border-color: #bd66db;
  text-shadow: 0 0 1px #bd66db;
}
.icon-button.fuchsia:hover {
  background-color: #ca83e2;
}
.icon-button.fuchsia:hover .text-box {
  border-color: #b859d9;
}
.icon-button.orange {
  background: #ff7b34;
  border-color: #ff5a01;
}
.icon-button.orange .text-box {
  border-color: #ff5a01;
}
.icon-button.orange:hover {
  background-color: #ff7125;
}
.icon-button.orange:hover .text-box {
  border-color: #f15400;
}
.icon-button.teal {
  background: #36CA97;
  border-color: #30b688;
  text-shadow: 0 0 1px #30b688;
}
.icon-button.teal .text-box {
  border-color: #30b688;
  text-shadow: 0 0 1px #30b688;
}
.icon-button.teal:hover {
  background-color: #42cd9d;
}
.icon-button.teal:hover .text-box {
  border-color: #52d1a6;
}
.icon-button.teal:active {
  background-color: #32be8e;
}
.icon-button.teal:active .text-box {
  border-color: #2eae82;
}
.icon-button:after {
  clear: both;
}
.icon-button:after,
.icon-button:before {
  content: " ";
  display: table;
}
.icon-button .icon-box {
  position: relative;
  float: left;
  width: 40px;
  height: 100%;
}
.icon-button .icon-box svg {
  width: 50%;
  height: 25px;
  margin-left: 25%;
  margin-top: 20%;
}
.icon-button .icon-box svg use {
  fill: #fff;
}
.icon-button .text-box {
  padding: 0 15px 0 0;
  line-height: 32px;
}
.icon-button.separated .text-box {
  border-left: 1px solid;
  padding: 0 15px;
}
.icon-button.large .icon-box {
  width: 64px;
  height: 64px;
}
.icon-button.large .text-box {
  height: 64px;
  line-height: 64px;
}
.link-button {
  border: solid #7a9cff;
  border-width: 0 0 1px 0;
  padding: 0 0 1px 0;
  background: none;
  color: #7a9cff;
  line-height: 100%;
}
.link-button:hover {
  color: #adc2ff;
  border-color: #adc2ff;
}
.link-button:active {
  color: #6089ff;
  border-color: #6089ff;
}
input[type=text],
input[type=password],
input[type=number] {
  padding: 15px;
  border: 1px solid #bdc3c7;
  line-height: 1.4em;
}
input[type=text]:focus,
input[type=password]:focus,
input[type=number]:focus {
  outline: none;
  border-color: #e0e8ff;
  background-image: linear-gradient(rgba(255, 255, 255, 0), #fcfbff);
}
.form-block {
  display: block;
  margin-bottom: 15px;
}
.form-block input,
.form-block button {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  margin-bottom: 15px;
}
select {
  letter-spacing: 1px;
  padding: 15px 25px 15px 65px;
  font-size: 18px;
  width: 100%;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 3px;
  border: 1px solid #cfd9db;
  background-image: linear-gradient(rgba(255, 255, 255, 0), #fcfbff);
  cursor: pointer;
  margin-top: 0px;
  background: url('/media/images/headphones.svg') no-repeat 15px center, url('/media/images/downarrow.png') 95% center no-repeat, linear-gradient(rgba(255, 255, 255, 0), #fcfbff);
  background-size: 35px, 15px, contain;
}
select:focus {
  outline: none;
}
select:hover {
  border-color: #c0cdd1;
}
select:empty {
  display: none;
}
.error {
  color: #e74c3c;
  font-size: 12px;
  padding: 5px 0;
}
.switch-box {
  border: 1px solid #cfd9db;
  border-radius: 3px;
  padding: 2px;
  position: relative;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  align-items: flex-end;
}
.switch-box.a {
  align-items: flex-start;
}
.switch-box.a .b {
  opacity: .5;
  color: #fff;
}
.switch-box.a .a {
  color: #667273;
  opacity: 1;
}
.switch-box .switch {
  background: #cfd9db;
  width: 28px;
  height: 50px;
}
.switch-box .a,
.switch-box .b {
  position: absolute;
  width: 50%;
  height: 100%;
  top: 0;
  font-size: 10px;
  text-align: center;
  line-height: 26px;
  font-weight: bold;
}
.switch-box .a {
  left: 0;
  opacity: .5;
}
.switch-box .b {
  right: 0;
  font-weight: bold;
  color: #7a9cff;
}
.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 500;
  overflow-y: auto;
}
.modal > .content {
  border-top: solid #7a9cff;
  border-top-width: 3px;
  padding: 0;
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translateY(-100px);
  opacity: 0;
  transition: all 250ms ease-in-out;
  margin-bottom: 50px;
}
.modal .panel .title {
  background: none;
  border: none;
  box-shadow: none;
  padding-top: 30px;
  font-size: 1.5em;
}
.modal .modal-image {
  display: block;
  max-width: 100%;
  margin: 20px auto 20px;
}
.modal .form-block input,
.modal .form-block button {
  width: 100%;
  margin-bottom: 15px;
}
.plans-modal.modal > .content {
  border-top: none;
}
.popup {
  position: fixed;
  top: 30%;
  left: 50%;
}
.popup .content {
  padding: 0;
  width: 500px;
  overflow: hidden;
  line-height: 1.4em;
}
.popup .content a {
  color: #3498db;
}
.popup .content a:hover {
  color: #2980b9;
}
.popup .content header {
  display: block;
  background: #f5f7f7;
  border-bottom: 1px solid #bdc3c7;
  padding: 15px 30px;
}
.popup .content header h3 {
  margin: 0;
}
.popup .content .body {
  padding: 30px;
}
.popup .content .body:after {
  clear: both;
}
.popup .content .body:after,
.popup .content .body:before {
  content: " ";
  display: table;
}
.popup .content .button {
  float: right;
  margin: 15px 0 0 0;
}
.popup.modal {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.popup.modal.vert-centered {
  top: 0;
}
.popup.modal.vert-centered .content {
  top: 50%;
}
.popup.modal .content {
  width: 500px;
  position: absolute;
  top: 30%;
  left: 50%;
}
.popup.vert-centered {
  top: 50%;
}
.popup.modal.vert-centered {
  top: 0;
}
.popup.modal.vert-centered .content {
  top: 50%;
}
.global-notification {
  position: fixed;
  top: 0px;
  max-width: 960px;
  min-width: 540px;
  margin: 0 auto;
  padding: 30px;
  padding: 30px 0 0 0;
  right: 30px;
  width: 500px;
  z-index: 1000;
}
.global-notification:after {
  clear: both;
}
.global-notification:after,
.global-notification:before {
  content: " ";
  display: table;
}
.global-notification.full-page {
  max-width: 100%;
  padding: 0;
}
.global-notification:empty {
  padding: 0;
}
.global-notification .notification {
  position: relative;
  padding: 15px 42px 15px 15px;
  font-size: 15px;
  border: 1px solid #ecf0f1;
  background-color: #fff;
  transform: translateY(-100px);
  opacity: 0;
  transition: all 250ms ease-in-out;
}
.global-notification .notification strong {
  font-weight: normal;
  text-transform: uppercase;
}
.global-notification .notification:after {
  background-position: center center;
  background-size: 34px;
  content: '';
  position: absolute;
  top: -1px;
  left: -49px;
  width: 50px;
  height: 100%;
  border: 1px solid;
  border-width: 1px 0;
}
.global-notification .notification.success:after {
  background-color: #48D684;
  background-image: url('../images/check-white.svg');
  background-repeat: no-repeat;
  border-color: #48D684;
}
.global-notification .notification.alert:after {
  background-color: #f1c40f;
  background-image: url('../images/alert-white.svg');
  background-repeat: no-repeat;
  border-color: #f1c40f;
}
.global-notification .notification.error {
  color: #667273;
}
.global-notification .notification.error:after {
  background-color: #ff4500;
  background-image: url('../images/warning-white.svg');
  background-repeat: no-repeat;
  border-color: #ff4500;
}
.global-notification .notification .close {
  position: relative;
  cursor: pointer;
  height: 10px;
  width: 10px;
  position: absolute;
  top: 17px;
  right: 15px;
  float: right;
  height: 17px;
  width: 17px;
}
.global-notification .notification .close:before,
.global-notification .notification .close:after {
  content: '';
  position: absolute;
  left: 50%;
  width: 20%;
  height: 100%;
  background: #fff;
}
.global-notification .notification .close:before {
  transform: rotate(-45deg);
}
.global-notification .notification .close:after {
  transform: rotate(45deg);
}
.global-notification .notification .close:before,
.global-notification .notification .close:after {
  background: #95a5a6;
}
.global-notification .notification .close:hover:before,
.global-notification .notification .close:hover:after {
  background: #7f8c8d;
}
.pagination {
  padding: 30px 0;
  text-align: center;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.pagination .page-button {
  flex: 1 1;
  max-width: 50px;
  padding: 7px;
  margin: 0 5px 5px 0;
  background: #fff;
  border: 1px solid #cfd9db;
}
.pagination .page-button:first-child {
  margin-left: 0;
}
.pagination .page-button:last-child {
  margin-right: 0;
}
.pagination .page-button.current {
  color: #fff;
  text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
  background: #7a9cff;
  border-color: #6089ff;
  pointer-events: none;
}
.pagination .page-button:hover {
  border-color: #b1c2c6;
}
.app .loading-logo {
  display: none;
}
.app.page-loading {
  color: #6089ff;
  padding-top: 20%;
  height: 70%;
}
.app.page-loading .loading-logo {
  display: block;
  margin: auto;
  width: 360px;
}
.app.page-loading .loading-logo svg {
  display: block;
  width: 360px;
  height: 96px;
}
.app.page-loading .loading-logo .loading-text {
  margin-left: 5px;
}
.logo {
  font-family: lobster;
  margin: 0;
}
.app {
  height: 100%;
}
.header {
  background: #fff;
  border-bottom: 1px solid #cfd9db;
  background-color: #fff;
  background-image: linear-gradient(rgba(255, 255, 255, 0), #fcfbff);
  position: relative;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.075);
  flex-grow: 0;
  flex-shrink: 0;
  flex-direction: column;
  z-index: 600;
}
.header.full-page .content {
  padding: 10px 30px;
}
.header .content {
  padding: 0 30px;
  display: flex;
  align-items: stretch;
}
.header .logo {
  float: left;
  margin-right: 45px;
  padding: 15px 0;
}
.header .logo .logo-white {
  display: none;
}
.header .logo svg {
  height: 20px;
  width: 76px;
}
.header .header-links-wrap {
  display: flex;
  justify-content: space-between;
  flex-grow: 5;
}
.header .header-links {
  list-style-type: none;
  font-size: 16px;
  margin: 0;
  float: right;
  padding: 0;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
}
.header .header-links:after {
  clear: both;
}
.header .header-links:after,
.header .header-links:before {
  content: " ";
  display: table;
}
.header .header-links.left-links {
  float: left;
}
.header .header-links.right-links {
  float: right;
}
.header .header-links a {
  display: flex;
  align-items: center;
  color: #7a9cff;
  text-decoration: none;
  letter-spacing: 3px;
  padding: 0 5px;
}
.header .header-links a:hover {
  color: #89a7ff;
  background: #fff;
}
.header .header-links a:active {
  color: #6a90ff;
}
.page {
  opacity: 0;
  transition: opacity 200ms linear;
}
.login-page,
.signup-page,
.reset-password-page {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.login-page > .header,
.signup-page > .header,
.reset-password-page > .header,
.login-page > .footer,
.signup-page > .footer,
.reset-password-page > .footer {
  flex: 0 0 auto;
}
.login-page > .content,
.signup-page > .content,
.reset-password-page > .content {
  flex: 5 0 auto;
}
.panel {
  border: 1px solid #cfd9db;
  background: #fff;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.075);
}
.panel .title {
  border-bottom: 1px solid #cfd9db;
  background-image: linear-gradient(rgba(255, 255, 255, 0), #fcfbff);
  padding: 15px 30px 10px 30px;
  margin: 0;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.075);
}
.panel .title span {
  font-weight: lighter;
  font-size: 16px;
}
.panel .content {
  max-width: initial;
  min-width: initial;
}
.panel .content h3 {
  border-bottom: 1px dashed #cfd9db;
  padding-bottom: 5px;
  margin-bottom: 15px;
}
.content-block {
  background: #fff;
  border-radius: 3px;
}
.content-block .content-text {
  line-height: 1.4em;
}
.content-block .content-text a {
  color: #3498db;
}
.content-block .content-text a:hover {
  color: #2980b9;
}
.tilted-left {
  transform: rotateZ(-1deg);
  transform-origin: bottom;
}
.tilted-left > * {
  transform: rotateZ(1deg);
  transform-origin: bottom;
}
.tilted-right {
  transform: rotateZ(1deg);
  transform-origin: bottom;
}
.tilted-right > * {
  transform: rotateZ(-1deg);
  transform-origin: bottom;
}
.footer {
  text-align: center;
  margin: 30px 0;
}
.footer .footer-links {
  display: flex;
  justify-content: center;
}
.footer .footer-links a {
  margin: 0 10px;
}
.social {
  height: 75px;
}
.social .social-icon {
  display: inline-block;
  position: relative;
  height: 100%;
}
.social .social-icon svg {
  height: 100%;
  width: 100%;
}
.social .social-icon svg path {
  fill: #fff;
}
.social .social-icon:hover svg {
  transition: transform 75ms linear;
  transform: translateY(-3px) scale(1.1);
}
.social .social-icon:hover svg path {
  fill: #fff;
}
.social .facebook {
  height: 77%;
  top: -13%;
}
.footer-social {
  text-align: center;
  margin: 30px 0;
}
.footer-social .social .social-icon {
  width: 75px;
}
.footer-social .social .social-icon svg path {
  fill: #bab0ff;
}
.landing-page {
  height: 100%;
  overflow-x: hidden;
}
.landing-page .landing-bg {
  background: linear-gradient(0deg, #C2A4FE, #5FAEFF);
  transform: rotateZ(-1deg);
  transform-origin: bottom;
  position: relative;
  z-index: 100;
  box-shadow: 0 4px 2px #e7ff00;
}
.landing-page .landing-bg > * {
  transform: rotateZ(1deg);
  transform-origin: bottom;
}
.landing-page .landing-bg:before {
  content: '';
  position: absolute;
  width: 120%;
  height: 120%;
  bottom: 0;
  left: 0;
  background: linear-gradient(0deg, #C2A4FE, #5FAEFF);
}
.landing-page .landing-bg #particles {
  position: absolute;
  top: -5%;
  left: -5%;
  height: 110%;
  width: 110%;
}
.landing-page .header {
  background: none;
  padding: 38px 0 30px 0;
  border: none;
  box-shadow: none;
  font-family: 'roboto-thin', helvetica, sans-serif;
  text-rendering: optimizeLegibility;
  font-weight: lighter;
}
.landing-page .header .logo {
  height: 45px;
  display: flex;
  padding-top: 0px;
  padding-left: 8px;
  position: relative;
  top: -1px;
  flex-direction: column;
  filter: drop-shadow(0 0 2px #7a9cff);
}
.landing-page .header .logo .logo-grad {
  display: block;
}
.landing-page .header .logo .logo-white {
  display: none;
}
.landing-page .header .logo:hover {
  filter: drop-shadow(0 0 2px #6089ff);
}
.landing-page .header .logo svg {
  width: 136px;
  height: inherit;
}
.landing-page .header .logo svg use {
  fill: #fff;
}
.landing-page .header .header-links a {
  color: #fff;
  font-weight: lighter;
}
.landing-page .header .header-links a:hover {
  background: none;
  text-shadow: 1px 1px 0 #6089ff;
}
.landing-page .header .header-links a.account-link {
  display: none;
}
.landing-page .splash .content {
  position: relative;
  top: 20px;
}
.landing-page .splash .content:before {
  content: '';
  position: absolute;
  left: 500px;
  top: -100px;
  width: 694px;
  height: 678px;
  background: url('../images/splash-imac.png') center center no-repeat;
  z-index: 100;
}
.landing-page .splash .content:after {
  content: '';
  position: absolute;
  left: 450px;
  top: 200px;
  width: 146px;
  height: 375px;
  background: url('../images/retromic.png') center center no-repeat;
  z-index: 150;
}
.landing-page .splash .content .intro-column {
  width: 400px;
  color: #fff;
  text-align: left;
}
.landing-page .splash .content .intro-column .tagline .high-fidelity-podcasting {
  text-transform: uppercase;
  font-size: 48px;
  font-weight: bold;
  text-shadow: 1px 1px 0 #CF8FE5;
  font-family: 'raleway-black', sans-serif;
  letter-spacing: .06em;
}
.landing-page .splash .content .intro-column .short-intro {
  font-family: 'roboto-thin', helvetica, sans-serif;
  text-rendering: optimizeLegibility;
  font-weight: lighter;
  font-size: 22px;
  padding: 30px 0;
  text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
}
.landing-page .splash .content .intro-column .short-intro .intro-item {
  margin-bottom: 20px;
}
.landing-page .splash .content .intro-column .get-started {
  margin-bottom: 10px;
}
.landing-page .splash .content .intro-column .get-started .button {
  font-family: "Helvetica Light", Helvetica, sans-serif;
  font-weight: normal;
  border-color: #CF8FE5;
  padding: 15px 30px;
  width: 300px;
  background: linear-gradient(#fff, #fcf4ff);
  color: #CF8FE5;
  font-size: 22px;
  text-shadow: none;
  text-align: center;
}
.landing-page .splash .content .intro-column .get-started .button:hover {
  background: #fff;
}
.landing-page .splash .content .intro-column .no-installation {
  width: 335px;
  font-family: 'roboto-thin-italic', helvetica, sans-serif;
  font-style: italic;
  text-align: center;
  font-size: 15px;
  margin-bottom: 40px;
}
.landing-page .content-block {
  position: relative;
  padding: 50px;
  margin: 0 auto;
  z-index: 20;
  margin-bottom: 50px;
}
.landing-page .content-block:after {
  clear: both;
}
.landing-page .content-block:after,
.landing-page .content-block:before {
  content: " ";
  display: table;
}
.landing-page .content-block h1,
.landing-page .content-block h2 {
  margin: 0 0 5px 0;
  font-weight: lighter;
  line-height: normal;
}
.landing-page .content-block .heading {
  margin-bottom: 50px;
  font-family: lobster;
  font-size: 50px;
  position: relative;
  padding: 5px 0 5px 0px;
  color: #bab0ff;
  text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
}
.landing-page .content-block .sub-heading {
  font-size: 15px;
  font-weight: lighter;
  color: #7f8c8d;
  width: 400px;
  line-height: 20px;
  overflow: hidden;
}
.landing-page .content-block .signup-link {
  margin: 50px auto;
  display: block;
  padding: 30px 60px;
  font-size: 26px;
  font-family: 'roboto-thin', helvetica, sans-serif;
  text-rendering: optimizeLegibility;
  font-weight: lighter;
  width: 500px;
  text-align: center;
}
.landing-page .content-block .person {
  position: relative;
  width: 150px;
  height: 150px;
}
.landing-page .content-block .person .logo {
  position: absolute;
  top: 52px;
  left: 44px;
  color: #1abc9c;
}
.landing-page .content-block .person svg.laptop {
  width: 100%;
  height: 100%;
}
.landing-page .content-block .person svg.laptop path {
  fill: #34495e;
}
.landing-page .content-block .host {
  float: left;
}
.landing-page .content-block .host .person {
  margin-top: 150px;
}
.landing-page .content-block .guests {
  float: right;
}
.landing-page .content-block .line {
  position: relative;
  height: 2px;
  width: 150px;
  background: rgba(189, 195, 199, 0.63);
}
.landing-page .content-block .line:after {
  content: '';
  position: absolute;
  top: -5px;
  right: 0px;
  border: solid rgba(189, 195, 199, 0.63);
  border-width: 2px;
  border-bottom: none;
  border-right: none;
  width: 10px;
  height: 10px;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
}
.landing-page .app-features {
  padding-top: 120px;
}
.landing-page .app-features .feature-list {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}
.landing-page .app-features .feature {
  flex: 1 0 auto;
  width: 45%;
  margin-bottom: 45px;
}
.landing-page .app-features .feature:nth-child(odd) {
  margin-right: 45px;
}
.landing-page .app-features .feature .feature-icon {
  float: left;
  margin-right: 15px;
  width: 75px;
  height: 75px;
}
.landing-page .app-features .feature .feature-icon use {
  fill: #CF8FE5;
}
.landing-page .app-features .feature .feature-icon.soundboard-icon {
  transform: scale(1.23);
}
.landing-page .app-features .feature .feature-icon.soundboard-icon use {
  stroke: #CF8FE5;
}
.landing-page .app-features .feature .feature-icon.cloud-drive-icon {
  transform: scale(1.15);
}
.landing-page .app-features .feature .feature-text {
  overflow: hidden;
}
.landing-page .app-features .feature .feature-heading {
  color: #CF8FE5;
}
.landing-page .app-features .feature .feature-description {
  color: #7f8c8d;
  line-height: 1.4em;
}
.landing-page .more-features {
  padding-top: 0;
}
.landing-page .testimonials {
  background: linear-gradient(0deg, #C2A4FE, #5FAEFF, #C2A4FE);
  transform: rotateZ(1deg);
  transform-origin: bottom;
  height: 400px;
  box-shadow: 0 4px 2px #e7ff00;
}
.landing-page .testimonials > * {
  transform: rotateZ(-1deg);
  transform-origin: bottom;
}
.landing-page .testimonials:before {
  content: '';
  position: absolute;
  display: block;
  width: 120%;
  height: 100%;
  bottom: 0;
  right: 0;
  background: linear-gradient(0deg, #C2A4FE, #5FAEFF, #C2A4FE);
  box-shadow: 0 -4px 2px #e7ff00;
}
.landing-page .testimonials .testimonial {
  padding: 60px 0;
  color: #fff;
  font-size: 22px;
  text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
  font-family: 'roboto-thin', helvetica, sans-serif;
  text-rendering: optimizeLegibility;
  font-weight: lighter;
  position: absolute;
  opacity: 0;
  transition: all 250ms ease-in-out;
}
.landing-page .testimonials .testimonial .image-block {
  display: inline-block;
  overflow: hidden;
  border-radius: 50%;
  border: 5px solid #fff;
  box-shadow: 1px 1px 0 #CF8FE5;
  float: left;
  margin-right: 30px;
  width: 150px;
  height: 150px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}
.landing-page .testimonials .testimonial .content-text {
  overflow: hidden;
}
.landing-page .testimonials .testimonial .name {
  margin-bottom: 15px;
  color: #e7ff00;
}
.landing-page .testimonials .testimonial .site {
  color: #fff;
}
.landing-page .testimonials .testimonial .quote {
  font-size: 26px;
  margin-bottom: 15px;
  line-height: 1.4em;
  text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
}
.landing-page .learn-more {
  margin-bottom: 100px;
}
.landing-page .learn-more .explainer-video-block {
  height: 500px;
}
.landing-page .pricing {
  background: linear-gradient(0deg, transparent, rgba(255, 255, 255, 0.5) 35%, rgba(255, 255, 255, 0.1) 35%, rgba(255, 255, 255, 0.35)), linear-gradient(0deg, #C2A4FE, #5FAEFF);
  box-shadow: 0 4px 2px #e7ff00;
  padding-left: 0;
  padding-right: 0;
}
.landing-page .pricing .content {
  padding-left: 0;
  padding-right: 0;
}
.landing-page .pricing .heading {
  color: #fff;
}
.landing-page .pricing .plan {
  position: relative;
}
.landing-page .pricing .plan .name,
.landing-page .pricing .plan .bottom {
  border-color: #63a6bf;
}
.landing-page .pricing .plan:before {
  content: '';
  position: absolute;
  bottom: 0px;
  width: 100%;
  height: 30px;
  border-radius: 50%;
  box-shadow: 0 40px 80px #8d7dff;
  z-index: -5;
}
.landing-page .pricing .content-text {
  margin-bottom: 30px;
}
.plans {
  margin: 50px auto;
  min-width: 960px;
}
.plans .plans-wrap {
  display: flex;
  margin-bottom: 50px;
}
.plans .plan {
  margin: 30px 0;
  background: #fff;
  flex: 1;
  width: 33.33%;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.075);
}
.plans .plan:first-child .band {
  border-width: 1px 0 1px 1px;
}
.plans .plan:last-child .band {
  border-width: 1px 1px 1px 0;
}
.plans .plan.popular {
  margin: 0;
  box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.075);
}
.plans .plan.popular .features {
  flex-grow: 0;
}
.plans .plan:first-child .name,
.plans .plan:first-child .bottom {
  border-right: none;
}
.plans .plan:last-child .name,
.plans .plan:last-child .bottom {
  border-left: none;
}
.plans .plan.trialing .subscribe:before {
  position: absolute;
  top: 9px;
  left: 0;
  width: 100%;
  content: '(Trialing)';
  display: block;
  font-size: 12px;
  font-weight: normal;
  letter-spacing: 1.5px;
  opacity: .8;
}
.plans .plan .name {
  font-size: 25px;
  font-weight: normal;
  text-align: center;
  color: #667273;
  padding: 30px;
  border: 1px solid #bdc3c7;
  border-width: 1px 1px 0 1px;
}
.plans .plan .band {
  text-align: center;
  padding: 33px 0 0px 0;
  border: 1px solid;
  color: #fff;
  font-family: 'roboto-thin', helvetica, sans-serif;
  text-rendering: optimizeLegibility;
  font-weight: lighter;
}
.plans .plan .band .price {
  font-size: 75px;
  font-family: "Helvetica Light", Helvetica, sans-serif;
  font-weight: normal;
  text-shadow: 1px 1px 0px #7a9cff;
  font-family: 'raleway-black';
}
.plans .plan .band .price:before {
  content: '$';
  font-family: 'roboto-thin', helvetica, sans-serif;
  text-rendering: optimizeLegibility;
  font-weight: lighter;
  font-size: 20px;
  position: relative;
  bottom: 35px;
  left: 17px;
}
.plans .plan .band .plus {
  font-family: 'roboto-thin', helvetica, sans-serif;
  text-rendering: optimizeLegibility;
  font-weight: lighter;
  font-family: 'Helvetica Light', helvetica, sans-serif;
  position: relative;
  bottom: 25px;
  right: 23px;
  font-size: 3em;
}
.plans .plan .band .interval {
  font-family: 'roboto-thin', helvetica, sans-serif;
  text-rendering: optimizeLegibility;
  font-weight: lighter;
  font-size: 12px;
  text-transform: uppercase;
}
.plans .plan .band .interval-switch-box {
  width: 60%;
  margin: 15px auto 0 auto;
  height: 30px;
  border: none;
  padding: 0;
  font-weight: normal;
}
.plans .plan .band .interval-switch-box .switch {
  background: none;
  border: 1px solid #fff;
  border-width: 0 0 1px 0;
  width: 50%;
  height: 100%;
}
.plans .plan .band .interval-switch-box .a,
.plans .plan .band .interval-switch-box .b {
  line-height: 33px;
  font-family: "Helvetica Light", Helvetica, sans-serif;
  font-weight: normal;
  font-size: 15px;
}
.plans .plan .band .interval-switch-box .a:hover,
.plans .plan .band .interval-switch-box .b:hover {
  opacity: 1;
}
.plans .plan .band .interval-switch-box .b {
  color: #fff;
}
.plans .plan .band .interval-switch-box.a .a {
  color: #fff;
  opacity: 1;
}
.plans .plan .bottom {
  border: 1px solid #bdc3c7;
  border-width: 0 1px 1px 1px;
  flex-grow: 2;
  display: flex;
  flex-direction: column;
}
.plans .plan .features {
  padding: 30px;
  text-align: center;
  flex-grow: 1;
}
.plans .plan .features .feature {
  margin-bottom: 10px;
}
.plans .plan .subscribe {
  padding: 15px;
  background: #bab0ff;
  cursor: pointer;
  display: inline-block;
  border: 1px solid #8d7dff;
  text-shadow: 0 0 1px #8d7dff;
  letter-spacing: .05em;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.075);
  position: relative;
  display: block;
  margin: 0 30px 30px 30px;
  padding: 25px 30px;
  border: 1px solid;
  color: #fff;
  font-size: 26px;
  text-shadow: 1px 1px 0px #7a9cff;
}
.plans .plan .subscribe:hover {
  color: #fff;
  background-color: #c7bfff;
}
.plans .plan .subscribe:active {
  background-color: #ada1ff;
}
.plans .plan .subscribe:focus {
  outline: none;
}
.plans .plan .subscribe.small {
  padding: 5px 15px;
}
.plans .plan .subscribe.primary {
  background-color: #7a9cff;
  border-color: #6089ff;
  text-shadow: 0 0 1px #6089ff;
  color: #fff;
}
.plans .plan .subscribe.primary .text-box {
  border-color: #6089ff;
  text-shadow: 0 0 1px #6089ff;
}
.plans .plan .subscribe.primary:hover {
  color: #fff;
  background-color: #89a7ff;
}
.plans .plan .subscribe.primary:active {
  background-color: #6a90ff;
}
.plans .plan .subscribe.secondary {
  background-color: #bab0ff;
  border-color: #8d7dff;
  text-shadow: 0 0 1px #8d7dff;
  color: #fff;
}
.plans .plan .subscribe.secondary .text-box {
  border-color: #8d7dff;
  text-shadow: 0 0 1px #8d7dff;
}
.plans .plan .subscribe.secondary:hover {
  color: #fff;
  background-color: #c7bfff;
}
.plans .plan .subscribe.secondary:active {
  background-color: #ada1ff;
}
.plans .plan .subscribe.green {
  background-color: #48D684;
  border-color: #2bc06a;
  color: #fff;
}
.plans .plan .subscribe.green .text-box {
  border-color: #2bc06a;
}
.plans .plan .subscribe.green:hover {
  color: #fff;
  background-color: #3cd37c;
}
.plans .plan .subscribe.blue {
  background-color: #3498db;
  border-color: #2980b9;
  color: #fff;
}
.plans .plan .subscribe.blue .text-box {
  border-color: #2980b9;
}
.plans .plan .subscribe.blue:hover {
  color: #fff;
  background-color: #2791d9;
}
.plans .plan .subscribe.bright-blue {
  background-color: #bab0ff;
  border-color: #8d7dff;
  color: #fff;
}
.plans .plan .subscribe.bright-blue .text-box {
  border-color: #8d7dff;
  text-shadow: 0 0 1px #8d7dff;
}
.plans .plan .subscribe.bright-blue:hover {
  color: #fff;
  background-color: #ada1ff;
}
.plans .plan .subscribe.bright-blue:hover .text-box {
  border-color: #806eff;
}
.plans .plan .subscribe.light-blue {
  background: #2fd9e9;
  border-color: #16bfcf;
}
.plans .plan .subscribe.light-blue .text-box {
  border-color: #16bfcf;
  text-shadow: 0 0 1px #16bfcf;
}
.plans .plan .subscribe.light-blue:hover {
  background-color: #21d6e8;
}
.plans .plan .subscribe.light-blue:hover .text-box {
  border-color: #14b2c1;
}
.plans .plan .subscribe.white {
  background: #fff;
  border-color: #ecf0f1;
  color: #7a9cff;
  font-family: "Helvetica Light", Helvetica, sans-serif;
  font-weight: normal;
}
.plans .plan .subscribe.white .text-box {
  border-color: #adc2ff;
  text-shadow: 0 0 1px #adc2ff;
}
.plans .plan .subscribe.white:hover {
  background-color: #ffffff;
  color: #6a90ff;
}
.plans .plan .subscribe.white:hover .text-box {
  border-color: #e3b90d;
}
.plans .plan .subscribe.white:hover .icon-box svg use {
  fill: #6a90ff;
}
.plans .plan .subscribe.white .icon-box svg use {
  fill: #7a9cff;
}
.plans .plan .subscribe.dark-blue {
  background: #34495e;
  border-color: #2c3e50;
}
.plans .plan .subscribe.dark-blue .text-box {
  border-color: #2c3e50;
}
.plans .plan .subscribe.dark-blue:hover {
  background-color: #2f4154;
}
.plans .plan .subscribe.purple {
  background: #9b59b6;
  border-color: #8e44ad;
}
.plans .plan .subscribe.purple .text-box {
  border-color: #8e44ad;
}
.plans .plan .subscribe.purple:hover {
  background-color: #954eb1;
}
.plans .plan .subscribe.fuchsia {
  background: #CF8FE5;
  border-color: #bd66db;
}
.plans .plan .subscribe.fuchsia .text-box {
  border-color: #bd66db;
  text-shadow: 0 0 1px #bd66db;
}
.plans .plan .subscribe.fuchsia:hover {
  background-color: #ca83e2;
}
.plans .plan .subscribe.fuchsia:hover .text-box {
  border-color: #b859d9;
}
.plans .plan .subscribe.orange {
  background: #ff7b34;
  border-color: #ff5a01;
}
.plans .plan .subscribe.orange .text-box {
  border-color: #ff5a01;
}
.plans .plan .subscribe.orange:hover {
  background-color: #ff7125;
}
.plans .plan .subscribe.orange:hover .text-box {
  border-color: #f15400;
}
.plans .plan .subscribe.teal {
  background: #36CA97;
  border-color: #30b688;
  text-shadow: 0 0 1px #30b688;
}
.plans .plan .subscribe.teal .text-box {
  border-color: #30b688;
  text-shadow: 0 0 1px #30b688;
}
.plans .plan .subscribe.teal:hover {
  background-color: #42cd9d;
}
.plans .plan .subscribe.teal:hover .text-box {
  border-color: #52d1a6;
}
.plans .plan .subscribe.teal:active {
  background-color: #32be8e;
}
.plans .plan .subscribe.teal:active .text-box {
  border-color: #2eae82;
}
.plans .plan.hobbyist {
  animation-name: fadeIn;
  animation-duration: 450ms;
  animation-timing-function: ease-out;
}
.plans .plan.hobbyist .band {
  background: #bab0ff;
  border-color: #8d7dff;
  text-shadow: 0 0 100px #8d7dff;
}
.plans .plan.hobbyist .band .plug {
  font-family: "Helvetica Light", Helvetica, sans-serif;
  font-weight: normal;
}
.plans .plan.hobbyist .subscribe {
  background-color: #bab0ff;
  border-color: #8d7dff;
  text-shadow: 0 0 1px #8d7dff;
  color: #fff;
  text-shadow: 1px 1px 0px #7a9cff;
}
.plans .plan.hobbyist .subscribe .text-box {
  border-color: #8d7dff;
  text-shadow: 0 0 1px #8d7dff;
}
.plans .plan.hobbyist .subscribe:hover {
  color: #fff;
  background-color: #c7bfff;
}
.plans .plan.hobbyist .subscribe:active {
  background-color: #ada1ff;
}
.plans .plan.professional {
  flex-grow: 1.15;
  position: relative;
  animation-name: dropIn;
  animation-duration: 500ms;
  animation-timing-function: ease-out;
}
.plans .plan.professional .band {
  background: #7a9cff;
  border-color: #6089ff;
  text-shadow: 0 0 100px #6089ff;
}
.plans .plan.professional .band .price {
  position: relative;
  left: -7px;
  text-shadow: 1px 1px #CF8FE5;
  font-size: 90px;
}
.plans .plan.professional .band .price:before {
  bottom: 45px;
}
.plans .plan.professional .subscribe {
  background-color: #7a9cff;
  border-color: #6089ff;
  text-shadow: 0 0 1px #6089ff;
  color: #fff;
}
.plans .plan.professional .subscribe .text-box {
  border-color: #6089ff;
  text-shadow: 0 0 1px #6089ff;
}
.plans .plan.professional .subscribe:hover {
  color: #fff;
  background-color: #89a7ff;
}
.plans .plan.professional .subscribe:active {
  background-color: #6a90ff;
}
.plans .plan.network {
  animation-name: fadeIn;
  animation-duration: 450ms;
  animation-timing-function: ease-out;
}
.plans .plan.network .band {
  background: #bab0ff;
  border-color: #8d7dff;
  text-shadow: 0 0 100px #8d7dff;
}
.plans .plan.network .band .price {
  position: relative;
  left: 6px;
}
.plans .plan.network .subscribe {
  background-color: #bab0ff;
  border-color: #8d7dff;
  text-shadow: 0 0 1px #8d7dff;
  color: #fff;
  text-shadow: 1px 1px 0px #7a9cff;
}
.plans .plan.network .subscribe .text-box {
  border-color: #8d7dff;
  text-shadow: 0 0 1px #8d7dff;
}
.plans .plan.network .subscribe:hover {
  color: #fff;
  background-color: #c7bfff;
}
.plans .plan.network .subscribe:active {
  background-color: #ada1ff;
}
.plans .plan.network .interested-in-network {
  text-align: center;
  width: 100%;
  position: absolute;
  bottom: 9px;
  font-size: 12px;
  font-style: italic;
  color: #7a9cff;
  display: block;
}
.plans .plan.network .interested-in-network:hover {
  color: #f1c40f;
  cursor: pointer;
}
.plans .plan.free .band .price {
  font-size: 65px;
  margin-bottom: 15px;
}
.plans .plan.free .band .price:before {
  content: '';
}
.plans .plan.free .band .plug {
  margin-bottom: 14px;
}
.coupon-form .input-wrap {
  display: flex;
}
.coupon-form .coupon-code-input {
  border-width: 1px 0 1px 1px;
}
.coupon-form button {
  padding: 15px;
  background: #bab0ff;
  cursor: pointer;
  display: inline-block;
  border: 1px solid #8d7dff;
  text-shadow: 0 0 1px #8d7dff;
  letter-spacing: .05em;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.075);
  background-color: #7a9cff;
  border-color: #6089ff;
  text-shadow: 0 0 1px #6089ff;
  color: #fff;
}
.coupon-form button:hover {
  color: #fff;
  background-color: #c7bfff;
}
.coupon-form button:active {
  background-color: #ada1ff;
}
.coupon-form button:focus {
  outline: none;
}
.coupon-form button.small {
  padding: 5px 15px;
}
.coupon-form button.primary {
  background-color: #7a9cff;
  border-color: #6089ff;
  text-shadow: 0 0 1px #6089ff;
  color: #fff;
}
.coupon-form button.primary .text-box {
  border-color: #6089ff;
  text-shadow: 0 0 1px #6089ff;
}
.coupon-form button.primary:hover {
  color: #fff;
  background-color: #89a7ff;
}
.coupon-form button.primary:active {
  background-color: #6a90ff;
}
.coupon-form button.secondary {
  background-color: #bab0ff;
  border-color: #8d7dff;
  text-shadow: 0 0 1px #8d7dff;
  color: #fff;
}
.coupon-form button.secondary .text-box {
  border-color: #8d7dff;
  text-shadow: 0 0 1px #8d7dff;
}
.coupon-form button.secondary:hover {
  color: #fff;
  background-color: #c7bfff;
}
.coupon-form button.secondary:active {
  background-color: #ada1ff;
}
.coupon-form button.green {
  background-color: #48D684;
  border-color: #2bc06a;
  color: #fff;
}
.coupon-form button.green .text-box {
  border-color: #2bc06a;
}
.coupon-form button.green:hover {
  color: #fff;
  background-color: #3cd37c;
}
.coupon-form button.blue {
  background-color: #3498db;
  border-color: #2980b9;
  color: #fff;
}
.coupon-form button.blue .text-box {
  border-color: #2980b9;
}
.coupon-form button.blue:hover {
  color: #fff;
  background-color: #2791d9;
}
.coupon-form button.bright-blue {
  background-color: #bab0ff;
  border-color: #8d7dff;
  color: #fff;
}
.coupon-form button.bright-blue .text-box {
  border-color: #8d7dff;
  text-shadow: 0 0 1px #8d7dff;
}
.coupon-form button.bright-blue:hover {
  color: #fff;
  background-color: #ada1ff;
}
.coupon-form button.bright-blue:hover .text-box {
  border-color: #806eff;
}
.coupon-form button.light-blue {
  background: #2fd9e9;
  border-color: #16bfcf;
}
.coupon-form button.light-blue .text-box {
  border-color: #16bfcf;
  text-shadow: 0 0 1px #16bfcf;
}
.coupon-form button.light-blue:hover {
  background-color: #21d6e8;
}
.coupon-form button.light-blue:hover .text-box {
  border-color: #14b2c1;
}
.coupon-form button.white {
  background: #fff;
  border-color: #ecf0f1;
  color: #7a9cff;
  font-family: "Helvetica Light", Helvetica, sans-serif;
  font-weight: normal;
}
.coupon-form button.white .text-box {
  border-color: #adc2ff;
  text-shadow: 0 0 1px #adc2ff;
}
.coupon-form button.white:hover {
  background-color: #ffffff;
  color: #6a90ff;
}
.coupon-form button.white:hover .text-box {
  border-color: #e3b90d;
}
.coupon-form button.white:hover .icon-box svg use {
  fill: #6a90ff;
}
.coupon-form button.white .icon-box svg use {
  fill: #7a9cff;
}
.coupon-form button.dark-blue {
  background: #34495e;
  border-color: #2c3e50;
}
.coupon-form button.dark-blue .text-box {
  border-color: #2c3e50;
}
.coupon-form button.dark-blue:hover {
  background-color: #2f4154;
}
.coupon-form button.purple {
  background: #9b59b6;
  border-color: #8e44ad;
}
.coupon-form button.purple .text-box {
  border-color: #8e44ad;
}
.coupon-form button.purple:hover {
  background-color: #954eb1;
}
.coupon-form button.fuchsia {
  background: #CF8FE5;
  border-color: #bd66db;
}
.coupon-form button.fuchsia .text-box {
  border-color: #bd66db;
  text-shadow: 0 0 1px #bd66db;
}
.coupon-form button.fuchsia:hover {
  background-color: #ca83e2;
}
.coupon-form button.fuchsia:hover .text-box {
  border-color: #b859d9;
}
.coupon-form button.orange {
  background: #ff7b34;
  border-color: #ff5a01;
}
.coupon-form button.orange .text-box {
  border-color: #ff5a01;
}
.coupon-form button.orange:hover {
  background-color: #ff7125;
}
.coupon-form button.orange:hover .text-box {
  border-color: #f15400;
}
.coupon-form button.teal {
  background: #36CA97;
  border-color: #30b688;
  text-shadow: 0 0 1px #30b688;
}
.coupon-form button.teal .text-box {
  border-color: #30b688;
  text-shadow: 0 0 1px #30b688;
}
.coupon-form button.teal:hover {
  background-color: #42cd9d;
}
.coupon-form button.teal:hover .text-box {
  border-color: #52d1a6;
}
.coupon-form button.teal:active {
  background-color: #32be8e;
}
.coupon-form button.teal:active .text-box {
  border-color: #2eae82;
}
.coupon-form button .text-box {
  border-color: #6089ff;
  text-shadow: 0 0 1px #6089ff;
}
.coupon-form button:hover {
  color: #fff;
  background-color: #89a7ff;
}
.coupon-form button:active {
  background-color: #6a90ff;
}
.coupon-form .applied-coupon {
  display: flex;
}
.coupon-form .applied-coupon .meta {
  border: 1px solid #cfd9db;
  border-right-width: 0;
  padding: 15px;
  min-width: 175px;
}
.dropbox-receiver-page {
  text-align: center;
}
.dashboard .notice {
  border: 1px solid #f1c40f;
  padding: 0 15px 15px 15px;
  background: #f9e8a0;
}
.dashboard .notice .title,
.dashboard .notice strong {
  font-weight: bold;
}
.dashboard .dashboard-content {
  background: #fff;
  padding: 30px 0;
  border-radius: 3px;
  display: flex;
  justify-content: space-between;
}
.dashboard .dashboard-content .connect-cloud-drive-panel {
  width: 500px;
  margin: 0 auto;
  justify-content: space-around;
}
.dashboard .dashboard-content .connect-cloud-drive-panel .tip {
  padding-left: 30px;
}
.dashboard .dashboard-content .connect-cloud-drive {
  position: relative;
  border: 1px solid #7a9cff;
  cursor: pointer;
  background: #007ee5;
  color: #fff;
  margin: 30px 0;
  display: block;
  width: 100%;
  font-size: 22px;
  padding: 0;
}
.dashboard .dashboard-content .connect-cloud-drive:hover {
  border-color: #6089ff;
}
.dashboard .dashboard-content .connect-cloud-drive:before {
  content: '';
  position: absolute;
  left: 5px;
  top: 4px;
  width: 30px;
  height: 30px;
  background-size: cover;
}
.dashboard .dashboard-content .connect-dropbox {
  position: relative;
  padding: 15px 0 15px 55px;
  text-shadow: none;
  margin: 0 auto;
  display: inline-block;
}
.dashboard .dashboard-content .connect-dropbox:before {
  content: '';
  position: absolute;
  background-size: cover;
  top: 5px;
  left: 0;
  width: 45px;
  height: 45px;
  background-image: url('../images/dropbox-white-on-blue.png');
}
.dashboard .dashboard-content .connect-gdrive {
  display: none;
  background-color: #d14836;
  border-color: #d14836;
}
.dashboard .dashboard-content .connect-gdrive:hover {
  border-color: #832a1e;
}
.dashboard .dashboard-content .connect-gdrive:before {
  top: 9px;
  left: 14px;
  background-image: url('../images/gdrive-logo-32x32.png');
}
.dashboard .dashboard-content .sidebar {
  flex: 0 0 300px;
}
.dashboard .dashboard-content .main-content {
  flex-grow: 1;
}
.dashboard .dashboard-content .create-project {
  margin: 30px 0;
  background-color: #7a9cff;
  border-color: #6089ff;
  text-shadow: 0 0 1px #6089ff;
  color: #fff;
}
.dashboard .dashboard-content .create-project .text-box {
  border-color: #6089ff;
  text-shadow: 0 0 1px #6089ff;
}
.dashboard .dashboard-content .create-project:hover {
  color: #fff;
  background-color: #89a7ff;
}
.dashboard .dashboard-content .create-project:active {
  background-color: #6a90ff;
}
.dashboard .dashboard-content .projects {
  margin-right: 30px;
  clear: both;
}
.dashboard .dashboard-content .projects .projects-title {
  float: left;
  margin-right: 30px;
}
.dashboard .dashboard-content .projects .toggle-archived {
  border: solid #7a9cff;
  border-width: 0 0 1px 0;
  padding: 0 0 1px 0;
  background: none;
  color: #7a9cff;
  line-height: 100%;
  color: #b1c2c6;
  border-bottom: none;
  margin-top: 23px;
  font-size: .875em;
}
.dashboard .dashboard-content .projects .toggle-archived:hover {
  color: #adc2ff;
  border-color: #adc2ff;
}
.dashboard .dashboard-content .projects .toggle-archived:active {
  color: #6089ff;
  border-color: #6089ff;
}
.dashboard .dashboard-content .projects .toggle-archived:hover {
  color: #f1c40f;
}
.projects {
  margin-bottom: 30px;
}
.projects .project-link {
  padding: 15px 0 10px 0;
  border-bottom: 1px solid #ecf0f1;
  clear: both;
}
.projects .project-link:last-child {
  border-bottom: none;
}
.projects .project-link .created-at {
  font-size: 11px;
  color: #7f8c8d;
}
.projects .project-link .actions {
  display: flex;
  align-content: space-between;
  font-size: 14px;
}
.projects .project-link .actions .recording-count {
  flex-grow: 2;
}
.projects .project-link .actions .local-storage-used {
  flex-grow: 2;
}
.projects .project-link .actions .archive,
.projects .project-link .actions .unarchive {
  align-self: flex-end;
  cursor: pointer;
  padding: 0;
  border: none;
  background: none;
}
.projects .project-link .actions .archive .icon,
.projects .project-link .actions .unarchive .icon {
  width: 24px;
  height: 24px;
}
.projects .project-link .actions .archive .icon use,
.projects .project-link .actions .unarchive .icon use {
  stroke-width: 2px;
}
.projects .project-link .actions .unarchive .icon {
  position: relative;
  top: -5px;
  height: 26px;
}
.projects .project-link .project-name {
  font-size: 20px;
  margin: 10px 0;
  display: inline-block;
  cursor: pointer;
  color: #7a9cff;
}
.projects .project-link .project-name:hover {
  color: #93afff;
}
.projects .project-link .project-name.underlined {
  text-decoration: underline;
}
.projects .project-link .project-name.blue {
  color: #3498db;
}
.projects .project-link .project-name.blue:hover {
  color: #2980b9;
}
.projects .project-link .delete {
  cursor: pointer;
}
.sidebar .item {
  margin-bottom: 5px;
}
.sidebar .item:after {
  clear: both;
}
.sidebar .item:after,
.sidebar .item:before {
  content: " ";
  display: table;
}
.sidebar .item .label {
  float: left;
  font-weight: normal;
}
.sidebar .item .value {
  float: right;
}
.sidebar .panel {
  margin-bottom: 30px;
}
.cloud-drive-info.loading .content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cloud-drive-info .provider .value {
  text-transform: capitalize;
}
.cloud-drive-info .disconnect {
  border: solid #7a9cff;
  border-width: 0 0 1px 0;
  padding: 0 0 1px 0;
  background: none;
  color: #7a9cff;
  line-height: 100%;
  float: right;
  margin-top: 10px;
}
.cloud-drive-info .disconnect:hover {
  color: #adc2ff;
  border-color: #adc2ff;
}
.cloud-drive-info .disconnect:active {
  color: #6089ff;
  border-color: #6089ff;
}
.local-storage-info.warning .free .value {
  color: #f1c40f;
}
.local-storage-info.unsupported .item-list,
.local-storage-info.unsupported .alert {
  display: none;
}
.local-storage-info .item-list {
  margin-bottom: 15px;
}
.local-storage-info .alert {
  margin-bottom: 15px;
  border: 1px solid;
  padding: 10px;
  color: #fff;
  font-size: 12px;
  text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
}
.local-storage-info .alert:empty {
  display: none;
}
.local-storage-info .alert .alert-name {
  font-weight: bold;
  text-transform: capitalize;
}
.local-storage-info .alert.caution {
  border-color: #f1c40f;
  background: #f7dc6f;
}
.local-storage-info .alert.caution .alert-name {
  color: #f1c40f;
}
.local-storage-info .alert.warning {
  border-color: #f1c40f;
  background: #f7dc6f;
}
.local-storage-info .alert.warning .alert-name {
  color: #f1c40f;
}
.plan-info .postproduction-credits-heading,
.plan-usage .postproduction-credits-heading {
  margin-top: 0;
}
.plan-info .status .value,
.plan-usage .status .value {
  text-transform: capitalize;
}
.plan-info .plan-actions,
.plan-usage .plan-actions {
  display: flex;
  justify-content: space-between;
  margin: 15px 0;
}
.plan-info .plan-actions .change-plan,
.plan-usage .plan-actions .change-plan {
  padding: 15px;
  background: #bab0ff;
  cursor: pointer;
  display: inline-block;
  border: 1px solid #8d7dff;
  text-shadow: 0 0 1px #8d7dff;
  letter-spacing: .05em;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.075);
  background-color: #7a9cff;
  border-color: #6089ff;
  text-shadow: 0 0 1px #6089ff;
  color: #fff;
  padding: 5px 15px;
  flex: 1 1 auto;
}
.plan-info .plan-actions .change-plan:hover,
.plan-usage .plan-actions .change-plan:hover {
  color: #fff;
  background-color: #c7bfff;
}
.plan-info .plan-actions .change-plan:active,
.plan-usage .plan-actions .change-plan:active {
  background-color: #ada1ff;
}
.plan-info .plan-actions .change-plan:focus,
.plan-usage .plan-actions .change-plan:focus {
  outline: none;
}
.plan-info .plan-actions .change-plan.small,
.plan-usage .plan-actions .change-plan.small {
  padding: 5px 15px;
}
.plan-info .plan-actions .change-plan.primary,
.plan-usage .plan-actions .change-plan.primary {
  background-color: #7a9cff;
  border-color: #6089ff;
  text-shadow: 0 0 1px #6089ff;
  color: #fff;
}
.plan-info .plan-actions .change-plan.primary .text-box,
.plan-usage .plan-actions .change-plan.primary .text-box {
  border-color: #6089ff;
  text-shadow: 0 0 1px #6089ff;
}
.plan-info .plan-actions .change-plan.primary:hover,
.plan-usage .plan-actions .change-plan.primary:hover {
  color: #fff;
  background-color: #89a7ff;
}
.plan-info .plan-actions .change-plan.primary:active,
.plan-usage .plan-actions .change-plan.primary:active {
  background-color: #6a90ff;
}
.plan-info .plan-actions .change-plan.secondary,
.plan-usage .plan-actions .change-plan.secondary {
  background-color: #bab0ff;
  border-color: #8d7dff;
  text-shadow: 0 0 1px #8d7dff;
  color: #fff;
}
.plan-info .plan-actions .change-plan.secondary .text-box,
.plan-usage .plan-actions .change-plan.secondary .text-box {
  border-color: #8d7dff;
  text-shadow: 0 0 1px #8d7dff;
}
.plan-info .plan-actions .change-plan.secondary:hover,
.plan-usage .plan-actions .change-plan.secondary:hover {
  color: #fff;
  background-color: #c7bfff;
}
.plan-info .plan-actions .change-plan.secondary:active,
.plan-usage .plan-actions .change-plan.secondary:active {
  background-color: #ada1ff;
}
.plan-info .plan-actions .change-plan.green,
.plan-usage .plan-actions .change-plan.green {
  background-color: #48D684;
  border-color: #2bc06a;
  color: #fff;
}
.plan-info .plan-actions .change-plan.green .text-box,
.plan-usage .plan-actions .change-plan.green .text-box {
  border-color: #2bc06a;
}
.plan-info .plan-actions .change-plan.green:hover,
.plan-usage .plan-actions .change-plan.green:hover {
  color: #fff;
  background-color: #3cd37c;
}
.plan-info .plan-actions .change-plan.blue,
.plan-usage .plan-actions .change-plan.blue {
  background-color: #3498db;
  border-color: #2980b9;
  color: #fff;
}
.plan-info .plan-actions .change-plan.blue .text-box,
.plan-usage .plan-actions .change-plan.blue .text-box {
  border-color: #2980b9;
}
.plan-info .plan-actions .change-plan.blue:hover,
.plan-usage .plan-actions .change-plan.blue:hover {
  color: #fff;
  background-color: #2791d9;
}
.plan-info .plan-actions .change-plan.bright-blue,
.plan-usage .plan-actions .change-plan.bright-blue {
  background-color: #bab0ff;
  border-color: #8d7dff;
  color: #fff;
}
.plan-info .plan-actions .change-plan.bright-blue .text-box,
.plan-usage .plan-actions .change-plan.bright-blue .text-box {
  border-color: #8d7dff;
  text-shadow: 0 0 1px #8d7dff;
}
.plan-info .plan-actions .change-plan.bright-blue:hover,
.plan-usage .plan-actions .change-plan.bright-blue:hover {
  color: #fff;
  background-color: #ada1ff;
}
.plan-info .plan-actions .change-plan.bright-blue:hover .text-box,
.plan-usage .plan-actions .change-plan.bright-blue:hover .text-box {
  border-color: #806eff;
}
.plan-info .plan-actions .change-plan.light-blue,
.plan-usage .plan-actions .change-plan.light-blue {
  background: #2fd9e9;
  border-color: #16bfcf;
}
.plan-info .plan-actions .change-plan.light-blue .text-box,
.plan-usage .plan-actions .change-plan.light-blue .text-box {
  border-color: #16bfcf;
  text-shadow: 0 0 1px #16bfcf;
}
.plan-info .plan-actions .change-plan.light-blue:hover,
.plan-usage .plan-actions .change-plan.light-blue:hover {
  background-color: #21d6e8;
}
.plan-info .plan-actions .change-plan.light-blue:hover .text-box,
.plan-usage .plan-actions .change-plan.light-blue:hover .text-box {
  border-color: #14b2c1;
}
.plan-info .plan-actions .change-plan.white,
.plan-usage .plan-actions .change-plan.white {
  background: #fff;
  border-color: #ecf0f1;
  color: #7a9cff;
  font-family: "Helvetica Light", Helvetica, sans-serif;
  font-weight: normal;
}
.plan-info .plan-actions .change-plan.white .text-box,
.plan-usage .plan-actions .change-plan.white .text-box {
  border-color: #adc2ff;
  text-shadow: 0 0 1px #adc2ff;
}
.plan-info .plan-actions .change-plan.white:hover,
.plan-usage .plan-actions .change-plan.white:hover {
  background-color: #ffffff;
  color: #6a90ff;
}
.plan-info .plan-actions .change-plan.white:hover .text-box,
.plan-usage .plan-actions .change-plan.white:hover .text-box {
  border-color: #e3b90d;
}
.plan-info .plan-actions .change-plan.white:hover .icon-box svg use,
.plan-usage .plan-actions .change-plan.white:hover .icon-box svg use {
  fill: #6a90ff;
}
.plan-info .plan-actions .change-plan.white .icon-box svg use,
.plan-usage .plan-actions .change-plan.white .icon-box svg use {
  fill: #7a9cff;
}
.plan-info .plan-actions .change-plan.dark-blue,
.plan-usage .plan-actions .change-plan.dark-blue {
  background: #34495e;
  border-color: #2c3e50;
}
.plan-info .plan-actions .change-plan.dark-blue .text-box,
.plan-usage .plan-actions .change-plan.dark-blue .text-box {
  border-color: #2c3e50;
}
.plan-info .plan-actions .change-plan.dark-blue:hover,
.plan-usage .plan-actions .change-plan.dark-blue:hover {
  background-color: #2f4154;
}
.plan-info .plan-actions .change-plan.purple,
.plan-usage .plan-actions .change-plan.purple {
  background: #9b59b6;
  border-color: #8e44ad;
}
.plan-info .plan-actions .change-plan.purple .text-box,
.plan-usage .plan-actions .change-plan.purple .text-box {
  border-color: #8e44ad;
}
.plan-info .plan-actions .change-plan.purple:hover,
.plan-usage .plan-actions .change-plan.purple:hover {
  background-color: #954eb1;
}
.plan-info .plan-actions .change-plan.fuchsia,
.plan-usage .plan-actions .change-plan.fuchsia {
  background: #CF8FE5;
  border-color: #bd66db;
}
.plan-info .plan-actions .change-plan.fuchsia .text-box,
.plan-usage .plan-actions .change-plan.fuchsia .text-box {
  border-color: #bd66db;
  text-shadow: 0 0 1px #bd66db;
}
.plan-info .plan-actions .change-plan.fuchsia:hover,
.plan-usage .plan-actions .change-plan.fuchsia:hover {
  background-color: #ca83e2;
}
.plan-info .plan-actions .change-plan.fuchsia:hover .text-box,
.plan-usage .plan-actions .change-plan.fuchsia:hover .text-box {
  border-color: #b859d9;
}
.plan-info .plan-actions .change-plan.orange,
.plan-usage .plan-actions .change-plan.orange {
  background: #ff7b34;
  border-color: #ff5a01;
}
.plan-info .plan-actions .change-plan.orange .text-box,
.plan-usage .plan-actions .change-plan.orange .text-box {
  border-color: #ff5a01;
}
.plan-info .plan-actions .change-plan.orange:hover,
.plan-usage .plan-actions .change-plan.orange:hover {
  background-color: #ff7125;
}
.plan-info .plan-actions .change-plan.orange:hover .text-box,
.plan-usage .plan-actions .change-plan.orange:hover .text-box {
  border-color: #f15400;
}
.plan-info .plan-actions .change-plan.teal,
.plan-usage .plan-actions .change-plan.teal {
  background: #36CA97;
  border-color: #30b688;
  text-shadow: 0 0 1px #30b688;
}
.plan-info .plan-actions .change-plan.teal .text-box,
.plan-usage .plan-actions .change-plan.teal .text-box {
  border-color: #30b688;
  text-shadow: 0 0 1px #30b688;
}
.plan-info .plan-actions .change-plan.teal:hover,
.plan-usage .plan-actions .change-plan.teal:hover {
  background-color: #42cd9d;
}
.plan-info .plan-actions .change-plan.teal:hover .text-box,
.plan-usage .plan-actions .change-plan.teal:hover .text-box {
  border-color: #52d1a6;
}
.plan-info .plan-actions .change-plan.teal:active,
.plan-usage .plan-actions .change-plan.teal:active {
  background-color: #32be8e;
}
.plan-info .plan-actions .change-plan.teal:active .text-box,
.plan-usage .plan-actions .change-plan.teal:active .text-box {
  border-color: #2eae82;
}
.plan-info .plan-actions .change-plan .text-box,
.plan-usage .plan-actions .change-plan .text-box {
  border-color: #6089ff;
  text-shadow: 0 0 1px #6089ff;
}
.plan-info .plan-actions .change-plan:hover,
.plan-usage .plan-actions .change-plan:hover {
  color: #fff;
  background-color: #89a7ff;
}
.plan-info .plan-actions .change-plan:active,
.plan-usage .plan-actions .change-plan:active {
  background-color: #6a90ff;
}
.plan-info .plan-actions .cancel,
.plan-usage .plan-actions .cancel {
  border: solid #7a9cff;
  border-width: 0 0 1px 0;
  padding: 0 0 1px 0;
  background: none;
  color: #7a9cff;
  line-height: 100%;
  flex: 0 1 auto;
  margin-left: 15px;
  align-self: center;
}
.plan-info .plan-actions .cancel:hover,
.plan-usage .plan-actions .cancel:hover {
  color: #adc2ff;
  border-color: #adc2ff;
}
.plan-info .plan-actions .cancel:active,
.plan-usage .plan-actions .cancel:active {
  color: #6089ff;
  border-color: #6089ff;
}
.buy-more-time {
  padding: 15px;
  background: #bab0ff;
  cursor: pointer;
  display: inline-block;
  border: 1px solid #8d7dff;
  letter-spacing: .05em;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.075);
  background-color: #bab0ff;
  border-color: #8d7dff;
  text-shadow: 0 0 1px #8d7dff;
  color: #fff;
  padding: 5px 15px;
  display: block;
  width: 100%;
  margin-top: 20px;
}
.buy-more-time:hover {
  color: #fff;
  background-color: #c7bfff;
}
.buy-more-time:active {
  background-color: #ada1ff;
}
.buy-more-time:focus {
  outline: none;
}
.buy-more-time.small {
  padding: 5px 15px;
}
.buy-more-time.primary {
  background-color: #7a9cff;
  border-color: #6089ff;
  text-shadow: 0 0 1px #6089ff;
  color: #fff;
}
.buy-more-time.primary .text-box {
  border-color: #6089ff;
  text-shadow: 0 0 1px #6089ff;
}
.buy-more-time.primary:hover {
  color: #fff;
  background-color: #89a7ff;
}
.buy-more-time.primary:active {
  background-color: #6a90ff;
}
.buy-more-time.secondary {
  background-color: #bab0ff;
  border-color: #8d7dff;
  text-shadow: 0 0 1px #8d7dff;
  color: #fff;
}
.buy-more-time.secondary .text-box {
  border-color: #8d7dff;
  text-shadow: 0 0 1px #8d7dff;
}
.buy-more-time.secondary:hover {
  color: #fff;
  background-color: #c7bfff;
}
.buy-more-time.secondary:active {
  background-color: #ada1ff;
}
.buy-more-time.green {
  background-color: #48D684;
  border-color: #2bc06a;
  color: #fff;
}
.buy-more-time.green .text-box {
  border-color: #2bc06a;
}
.buy-more-time.green:hover {
  color: #fff;
  background-color: #3cd37c;
}
.buy-more-time.blue {
  background-color: #3498db;
  border-color: #2980b9;
  color: #fff;
}
.buy-more-time.blue .text-box {
  border-color: #2980b9;
}
.buy-more-time.blue:hover {
  color: #fff;
  background-color: #2791d9;
}
.buy-more-time.bright-blue {
  background-color: #bab0ff;
  border-color: #8d7dff;
  color: #fff;
}
.buy-more-time.bright-blue .text-box {
  border-color: #8d7dff;
  text-shadow: 0 0 1px #8d7dff;
}
.buy-more-time.bright-blue:hover {
  color: #fff;
  background-color: #ada1ff;
}
.buy-more-time.bright-blue:hover .text-box {
  border-color: #806eff;
}
.buy-more-time.light-blue {
  background: #2fd9e9;
  border-color: #16bfcf;
}
.buy-more-time.light-blue .text-box {
  border-color: #16bfcf;
  text-shadow: 0 0 1px #16bfcf;
}
.buy-more-time.light-blue:hover {
  background-color: #21d6e8;
}
.buy-more-time.light-blue:hover .text-box {
  border-color: #14b2c1;
}
.buy-more-time.white {
  background: #fff;
  border-color: #ecf0f1;
  color: #7a9cff;
  font-family: "Helvetica Light", Helvetica, sans-serif;
  font-weight: normal;
}
.buy-more-time.white .text-box {
  border-color: #adc2ff;
  text-shadow: 0 0 1px #adc2ff;
}
.buy-more-time.white:hover {
  background-color: #ffffff;
  color: #6a90ff;
}
.buy-more-time.white:hover .text-box {
  border-color: #e3b90d;
}
.buy-more-time.white:hover .icon-box svg use {
  fill: #6a90ff;
}
.buy-more-time.white .icon-box svg use {
  fill: #7a9cff;
}
.buy-more-time.dark-blue {
  background: #34495e;
  border-color: #2c3e50;
}
.buy-more-time.dark-blue .text-box {
  border-color: #2c3e50;
}
.buy-more-time.dark-blue:hover {
  background-color: #2f4154;
}
.buy-more-time.purple {
  background: #9b59b6;
  border-color: #8e44ad;
}
.buy-more-time.purple .text-box {
  border-color: #8e44ad;
}
.buy-more-time.purple:hover {
  background-color: #954eb1;
}
.buy-more-time.fuchsia {
  background: #CF8FE5;
  border-color: #bd66db;
}
.buy-more-time.fuchsia .text-box {
  border-color: #bd66db;
  text-shadow: 0 0 1px #bd66db;
}
.buy-more-time.fuchsia:hover {
  background-color: #ca83e2;
}
.buy-more-time.fuchsia:hover .text-box {
  border-color: #b859d9;
}
.buy-more-time.orange {
  background: #ff7b34;
  border-color: #ff5a01;
}
.buy-more-time.orange .text-box {
  border-color: #ff5a01;
}
.buy-more-time.orange:hover {
  background-color: #ff7125;
}
.buy-more-time.orange:hover .text-box {
  border-color: #f15400;
}
.buy-more-time.teal {
  background: #36CA97;
  border-color: #30b688;
  text-shadow: 0 0 1px #30b688;
}
.buy-more-time.teal .text-box {
  border-color: #30b688;
  text-shadow: 0 0 1px #30b688;
}
.buy-more-time.teal:hover {
  background-color: #42cd9d;
}
.buy-more-time.teal:hover .text-box {
  border-color: #52d1a6;
}
.buy-more-time.teal:active {
  background-color: #32be8e;
}
.buy-more-time.teal:active .text-box {
  border-color: #2eae82;
}
.buy-more-time .text-box {
  border-color: #8d7dff;
  text-shadow: 0 0 1px #8d7dff;
}
.buy-more-time:hover {
  color: #fff;
  background-color: #c7bfff;
}
.buy-more-time:active {
  background-color: #ada1ff;
}
.buy-more-time span {
  margin-right: 15px;
}
.connect {
  padding: 15px;
  background: #bab0ff;
  cursor: pointer;
  display: inline-block;
  border: 1px solid #8d7dff;
  letter-spacing: .05em;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.075);
  background-color: #bab0ff;
  border-color: #8d7dff;
  text-shadow: 0 0 1px #8d7dff;
  color: #fff;
  padding: 5px 15px;
  display: block;
  width: 100%;
  margin-top: 20px;
}
.connect:hover {
  color: #fff;
  background-color: #c7bfff;
}
.connect:active {
  background-color: #ada1ff;
}
.connect:focus {
  outline: none;
}
.connect.small {
  padding: 5px 15px;
}
.connect.primary {
  background-color: #7a9cff;
  border-color: #6089ff;
  text-shadow: 0 0 1px #6089ff;
  color: #fff;
}
.connect.primary .text-box {
  border-color: #6089ff;
  text-shadow: 0 0 1px #6089ff;
}
.connect.primary:hover {
  color: #fff;
  background-color: #89a7ff;
}
.connect.primary:active {
  background-color: #6a90ff;
}
.connect.secondary {
  background-color: #bab0ff;
  border-color: #8d7dff;
  text-shadow: 0 0 1px #8d7dff;
  color: #fff;
}
.connect.secondary .text-box {
  border-color: #8d7dff;
  text-shadow: 0 0 1px #8d7dff;
}
.connect.secondary:hover {
  color: #fff;
  background-color: #c7bfff;
}
.connect.secondary:active {
  background-color: #ada1ff;
}
.connect.green {
  background-color: #48D684;
  border-color: #2bc06a;
  color: #fff;
}
.connect.green .text-box {
  border-color: #2bc06a;
}
.connect.green:hover {
  color: #fff;
  background-color: #3cd37c;
}
.connect.blue {
  background-color: #3498db;
  border-color: #2980b9;
  color: #fff;
}
.connect.blue .text-box {
  border-color: #2980b9;
}
.connect.blue:hover {
  color: #fff;
  background-color: #2791d9;
}
.connect.bright-blue {
  background-color: #bab0ff;
  border-color: #8d7dff;
  color: #fff;
}
.connect.bright-blue .text-box {
  border-color: #8d7dff;
  text-shadow: 0 0 1px #8d7dff;
}
.connect.bright-blue:hover {
  color: #fff;
  background-color: #ada1ff;
}
.connect.bright-blue:hover .text-box {
  border-color: #806eff;
}
.connect.light-blue {
  background: #2fd9e9;
  border-color: #16bfcf;
}
.connect.light-blue .text-box {
  border-color: #16bfcf;
  text-shadow: 0 0 1px #16bfcf;
}
.connect.light-blue:hover {
  background-color: #21d6e8;
}
.connect.light-blue:hover .text-box {
  border-color: #14b2c1;
}
.connect.white {
  background: #fff;
  border-color: #ecf0f1;
  color: #7a9cff;
  font-family: "Helvetica Light", Helvetica, sans-serif;
  font-weight: normal;
}
.connect.white .text-box {
  border-color: #adc2ff;
  text-shadow: 0 0 1px #adc2ff;
}
.connect.white:hover {
  background-color: #ffffff;
  color: #6a90ff;
}
.connect.white:hover .text-box {
  border-color: #e3b90d;
}
.connect.white:hover .icon-box svg use {
  fill: #6a90ff;
}
.connect.white .icon-box svg use {
  fill: #7a9cff;
}
.connect.dark-blue {
  background: #34495e;
  border-color: #2c3e50;
}
.connect.dark-blue .text-box {
  border-color: #2c3e50;
}
.connect.dark-blue:hover {
  background-color: #2f4154;
}
.connect.purple {
  background: #9b59b6;
  border-color: #8e44ad;
}
.connect.purple .text-box {
  border-color: #8e44ad;
}
.connect.purple:hover {
  background-color: #954eb1;
}
.connect.fuchsia {
  background: #CF8FE5;
  border-color: #bd66db;
}
.connect.fuchsia .text-box {
  border-color: #bd66db;
  text-shadow: 0 0 1px #bd66db;
}
.connect.fuchsia:hover {
  background-color: #ca83e2;
}
.connect.fuchsia:hover .text-box {
  border-color: #b859d9;
}
.connect.orange {
  background: #ff7b34;
  border-color: #ff5a01;
}
.connect.orange .text-box {
  border-color: #ff5a01;
}
.connect.orange:hover {
  background-color: #ff7125;
}
.connect.orange:hover .text-box {
  border-color: #f15400;
}
.connect.teal {
  background: #36CA97;
  border-color: #30b688;
  text-shadow: 0 0 1px #30b688;
}
.connect.teal .text-box {
  border-color: #30b688;
  text-shadow: 0 0 1px #30b688;
}
.connect.teal:hover {
  background-color: #42cd9d;
}
.connect.teal:hover .text-box {
  border-color: #52d1a6;
}
.connect.teal:active {
  background-color: #32be8e;
}
.connect.teal:active .text-box {
  border-color: #2eae82;
}
.connect .text-box {
  border-color: #8d7dff;
  text-shadow: 0 0 1px #8d7dff;
}
.connect:hover {
  color: #fff;
  background-color: #c7bfff;
}
.connect:active {
  background-color: #ada1ff;
}
.connect span {
  margin-right: 15px;
}
.buy-postproduction-credits {
  width: 600px;
}
.buy-postproduction-credits .description {
  margin-bottom: 30px;
}
.buy-postproduction-credits .credit-bundles {
  margin-bottom: 30px;
}
.buy-postproduction-credits .credit-bundles-heading {
  display: flex;
  justify-content: space-around;
  margin-bottom: 15px;
  font-weight: normal;
}
.buy-postproduction-credits .credit-bundles-heading > * {
  width: 33.33%;
  text-align: center;
}
.buy-postproduction-credits .credit-bundle {
  display: flex;
  justify-content: space-around;
  padding: 15px;
  border: 1px solid transparent;
  font-size: 28px;
}
.buy-postproduction-credits .credit-bundle:hover {
  border-color: #cfd9db;
  cursor: pointer;
}
.buy-postproduction-credits .credit-bundle.selected {
  border-color: #cfd9db;
  background-image: linear-gradient(rgba(255, 255, 255, 0), #fcfbff);
}
.buy-postproduction-credits .credit-bundle > * {
  width: 33.33%;
  text-align: center;
}
.buy-postproduction-credits .purchase {
  padding: 15px;
  background: #bab0ff;
  cursor: pointer;
  display: inline-block;
  border: 1px solid #8d7dff;
  text-shadow: 0 0 1px #8d7dff;
  letter-spacing: .05em;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.075);
  background-color: #7a9cff;
  border-color: #6089ff;
  text-shadow: 0 0 1px #6089ff;
  color: #fff;
  font-size: 28px;
  width: 100%;
}
.buy-postproduction-credits .purchase:hover {
  color: #fff;
  background-color: #c7bfff;
}
.buy-postproduction-credits .purchase:active {
  background-color: #ada1ff;
}
.buy-postproduction-credits .purchase:focus {
  outline: none;
}
.buy-postproduction-credits .purchase.small {
  padding: 5px 15px;
}
.buy-postproduction-credits .purchase.primary {
  background-color: #7a9cff;
  border-color: #6089ff;
  text-shadow: 0 0 1px #6089ff;
  color: #fff;
}
.buy-postproduction-credits .purchase.primary .text-box {
  border-color: #6089ff;
  text-shadow: 0 0 1px #6089ff;
}
.buy-postproduction-credits .purchase.primary:hover {
  color: #fff;
  background-color: #89a7ff;
}
.buy-postproduction-credits .purchase.primary:active {
  background-color: #6a90ff;
}
.buy-postproduction-credits .purchase.secondary {
  background-color: #bab0ff;
  border-color: #8d7dff;
  text-shadow: 0 0 1px #8d7dff;
  color: #fff;
}
.buy-postproduction-credits .purchase.secondary .text-box {
  border-color: #8d7dff;
  text-shadow: 0 0 1px #8d7dff;
}
.buy-postproduction-credits .purchase.secondary:hover {
  color: #fff;
  background-color: #c7bfff;
}
.buy-postproduction-credits .purchase.secondary:active {
  background-color: #ada1ff;
}
.buy-postproduction-credits .purchase.green {
  background-color: #48D684;
  border-color: #2bc06a;
  color: #fff;
}
.buy-postproduction-credits .purchase.green .text-box {
  border-color: #2bc06a;
}
.buy-postproduction-credits .purchase.green:hover {
  color: #fff;
  background-color: #3cd37c;
}
.buy-postproduction-credits .purchase.blue {
  background-color: #3498db;
  border-color: #2980b9;
  color: #fff;
}
.buy-postproduction-credits .purchase.blue .text-box {
  border-color: #2980b9;
}
.buy-postproduction-credits .purchase.blue:hover {
  color: #fff;
  background-color: #2791d9;
}
.buy-postproduction-credits .purchase.bright-blue {
  background-color: #bab0ff;
  border-color: #8d7dff;
  color: #fff;
}
.buy-postproduction-credits .purchase.bright-blue .text-box {
  border-color: #8d7dff;
  text-shadow: 0 0 1px #8d7dff;
}
.buy-postproduction-credits .purchase.bright-blue:hover {
  color: #fff;
  background-color: #ada1ff;
}
.buy-postproduction-credits .purchase.bright-blue:hover .text-box {
  border-color: #806eff;
}
.buy-postproduction-credits .purchase.light-blue {
  background: #2fd9e9;
  border-color: #16bfcf;
}
.buy-postproduction-credits .purchase.light-blue .text-box {
  border-color: #16bfcf;
  text-shadow: 0 0 1px #16bfcf;
}
.buy-postproduction-credits .purchase.light-blue:hover {
  background-color: #21d6e8;
}
.buy-postproduction-credits .purchase.light-blue:hover .text-box {
  border-color: #14b2c1;
}
.buy-postproduction-credits .purchase.white {
  background: #fff;
  border-color: #ecf0f1;
  color: #7a9cff;
  font-family: "Helvetica Light", Helvetica, sans-serif;
  font-weight: normal;
}
.buy-postproduction-credits .purchase.white .text-box {
  border-color: #adc2ff;
  text-shadow: 0 0 1px #adc2ff;
}
.buy-postproduction-credits .purchase.white:hover {
  background-color: #ffffff;
  color: #6a90ff;
}
.buy-postproduction-credits .purchase.white:hover .text-box {
  border-color: #e3b90d;
}
.buy-postproduction-credits .purchase.white:hover .icon-box svg use {
  fill: #6a90ff;
}
.buy-postproduction-credits .purchase.white .icon-box svg use {
  fill: #7a9cff;
}
.buy-postproduction-credits .purchase.dark-blue {
  background: #34495e;
  border-color: #2c3e50;
}
.buy-postproduction-credits .purchase.dark-blue .text-box {
  border-color: #2c3e50;
}
.buy-postproduction-credits .purchase.dark-blue:hover {
  background-color: #2f4154;
}
.buy-postproduction-credits .purchase.purple {
  background: #9b59b6;
  border-color: #8e44ad;
}
.buy-postproduction-credits .purchase.purple .text-box {
  border-color: #8e44ad;
}
.buy-postproduction-credits .purchase.purple:hover {
  background-color: #954eb1;
}
.buy-postproduction-credits .purchase.fuchsia {
  background: #CF8FE5;
  border-color: #bd66db;
}
.buy-postproduction-credits .purchase.fuchsia .text-box {
  border-color: #bd66db;
  text-shadow: 0 0 1px #bd66db;
}
.buy-postproduction-credits .purchase.fuchsia:hover {
  background-color: #ca83e2;
}
.buy-postproduction-credits .purchase.fuchsia:hover .text-box {
  border-color: #b859d9;
}
.buy-postproduction-credits .purchase.orange {
  background: #ff7b34;
  border-color: #ff5a01;
}
.buy-postproduction-credits .purchase.orange .text-box {
  border-color: #ff5a01;
}
.buy-postproduction-credits .purchase.orange:hover {
  background-color: #ff7125;
}
.buy-postproduction-credits .purchase.orange:hover .text-box {
  border-color: #f15400;
}
.buy-postproduction-credits .purchase.teal {
  background: #36CA97;
  border-color: #30b688;
  text-shadow: 0 0 1px #30b688;
}
.buy-postproduction-credits .purchase.teal .text-box {
  border-color: #30b688;
  text-shadow: 0 0 1px #30b688;
}
.buy-postproduction-credits .purchase.teal:hover {
  background-color: #42cd9d;
}
.buy-postproduction-credits .purchase.teal:hover .text-box {
  border-color: #52d1a6;
}
.buy-postproduction-credits .purchase.teal:active {
  background-color: #32be8e;
}
.buy-postproduction-credits .purchase.teal:active .text-box {
  border-color: #2eae82;
}
.buy-postproduction-credits .purchase .text-box {
  border-color: #6089ff;
  text-shadow: 0 0 1px #6089ff;
}
.buy-postproduction-credits .purchase:hover {
  color: #fff;
  background-color: #89a7ff;
}
.buy-postproduction-credits .purchase:active {
  background-color: #6a90ff;
}
.confirm-purchase {
  border: 1px solid #cfd9db;
  background: #fff;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.075);
  width: 600px;
}
.confirm-purchase .title {
  border-bottom: 1px solid #cfd9db;
  background-image: linear-gradient(rgba(255, 255, 255, 0), #fcfbff);
  padding: 15px 30px 10px 30px;
  margin: 0;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.075);
}
.confirm-purchase .title span {
  font-weight: lighter;
  font-size: 16px;
}
.confirm-purchase .content {
  max-width: initial;
  min-width: initial;
}
.confirm-purchase .content h3 {
  border-bottom: 1px dashed #cfd9db;
  padding-bottom: 5px;
  margin-bottom: 15px;
}
.confirm-purchase .reason textarea {
  box-sizing: border-box;
  width: 100%;
  padding: 15px;
  font-size: 18px;
  line-height: 1.4;
  border: 1px solid #bdc3c7;
}
.confirm-purchase .reason textarea.required {
  border-color: #e74c3c;
}
.confirm-purchase .reason textarea:focus {
  outline: none;
  border-color: #e0e8ff;
  background-image: linear-gradient(rgba(255, 255, 255, 0), #fcfbff);
}
.confirm-purchase .actions {
  margin-top: 15px;
}
.confirm-purchase .actions .confirm {
  padding: 15px;
  background: #bab0ff;
  cursor: pointer;
  display: inline-block;
  border: 1px solid #8d7dff;
  text-shadow: 0 0 1px #8d7dff;
  letter-spacing: .05em;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.075);
  padding: 5px 15px;
  background-color: #7a9cff;
  border-color: #6089ff;
  text-shadow: 0 0 1px #6089ff;
  color: #fff;
  margin-right: 15px;
}
.confirm-purchase .actions .confirm:hover {
  color: #fff;
  background-color: #c7bfff;
}
.confirm-purchase .actions .confirm:active {
  background-color: #ada1ff;
}
.confirm-purchase .actions .confirm:focus {
  outline: none;
}
.confirm-purchase .actions .confirm.small {
  padding: 5px 15px;
}
.confirm-purchase .actions .confirm.primary {
  background-color: #7a9cff;
  border-color: #6089ff;
  text-shadow: 0 0 1px #6089ff;
  color: #fff;
}
.confirm-purchase .actions .confirm.primary .text-box {
  border-color: #6089ff;
  text-shadow: 0 0 1px #6089ff;
}
.confirm-purchase .actions .confirm.primary:hover {
  color: #fff;
  background-color: #89a7ff;
}
.confirm-purchase .actions .confirm.primary:active {
  background-color: #6a90ff;
}
.confirm-purchase .actions .confirm.secondary {
  background-color: #bab0ff;
  border-color: #8d7dff;
  text-shadow: 0 0 1px #8d7dff;
  color: #fff;
}
.confirm-purchase .actions .confirm.secondary .text-box {
  border-color: #8d7dff;
  text-shadow: 0 0 1px #8d7dff;
}
.confirm-purchase .actions .confirm.secondary:hover {
  color: #fff;
  background-color: #c7bfff;
}
.confirm-purchase .actions .confirm.secondary:active {
  background-color: #ada1ff;
}
.confirm-purchase .actions .confirm.green {
  background-color: #48D684;
  border-color: #2bc06a;
  color: #fff;
}
.confirm-purchase .actions .confirm.green .text-box {
  border-color: #2bc06a;
}
.confirm-purchase .actions .confirm.green:hover {
  color: #fff;
  background-color: #3cd37c;
}
.confirm-purchase .actions .confirm.blue {
  background-color: #3498db;
  border-color: #2980b9;
  color: #fff;
}
.confirm-purchase .actions .confirm.blue .text-box {
  border-color: #2980b9;
}
.confirm-purchase .actions .confirm.blue:hover {
  color: #fff;
  background-color: #2791d9;
}
.confirm-purchase .actions .confirm.bright-blue {
  background-color: #bab0ff;
  border-color: #8d7dff;
  color: #fff;
}
.confirm-purchase .actions .confirm.bright-blue .text-box {
  border-color: #8d7dff;
  text-shadow: 0 0 1px #8d7dff;
}
.confirm-purchase .actions .confirm.bright-blue:hover {
  color: #fff;
  background-color: #ada1ff;
}
.confirm-purchase .actions .confirm.bright-blue:hover .text-box {
  border-color: #806eff;
}
.confirm-purchase .actions .confirm.light-blue {
  background: #2fd9e9;
  border-color: #16bfcf;
}
.confirm-purchase .actions .confirm.light-blue .text-box {
  border-color: #16bfcf;
  text-shadow: 0 0 1px #16bfcf;
}
.confirm-purchase .actions .confirm.light-blue:hover {
  background-color: #21d6e8;
}
.confirm-purchase .actions .confirm.light-blue:hover .text-box {
  border-color: #14b2c1;
}
.confirm-purchase .actions .confirm.white {
  background: #fff;
  border-color: #ecf0f1;
  color: #7a9cff;
  font-family: "Helvetica Light", Helvetica, sans-serif;
  font-weight: normal;
}
.confirm-purchase .actions .confirm.white .text-box {
  border-color: #adc2ff;
  text-shadow: 0 0 1px #adc2ff;
}
.confirm-purchase .actions .confirm.white:hover {
  background-color: #ffffff;
  color: #6a90ff;
}
.confirm-purchase .actions .confirm.white:hover .text-box {
  border-color: #e3b90d;
}
.confirm-purchase .actions .confirm.white:hover .icon-box svg use {
  fill: #6a90ff;
}
.confirm-purchase .actions .confirm.white .icon-box svg use {
  fill: #7a9cff;
}
.confirm-purchase .actions .confirm.dark-blue {
  background: #34495e;
  border-color: #2c3e50;
}
.confirm-purchase .actions .confirm.dark-blue .text-box {
  border-color: #2c3e50;
}
.confirm-purchase .actions .confirm.dark-blue:hover {
  background-color: #2f4154;
}
.confirm-purchase .actions .confirm.purple {
  background: #9b59b6;
  border-color: #8e44ad;
}
.confirm-purchase .actions .confirm.purple .text-box {
  border-color: #8e44ad;
}
.confirm-purchase .actions .confirm.purple:hover {
  background-color: #954eb1;
}
.confirm-purchase .actions .confirm.fuchsia {
  background: #CF8FE5;
  border-color: #bd66db;
}
.confirm-purchase .actions .confirm.fuchsia .text-box {
  border-color: #bd66db;
  text-shadow: 0 0 1px #bd66db;
}
.confirm-purchase .actions .confirm.fuchsia:hover {
  background-color: #ca83e2;
}
.confirm-purchase .actions .confirm.fuchsia:hover .text-box {
  border-color: #b859d9;
}
.confirm-purchase .actions .confirm.orange {
  background: #ff7b34;
  border-color: #ff5a01;
}
.confirm-purchase .actions .confirm.orange .text-box {
  border-color: #ff5a01;
}
.confirm-purchase .actions .confirm.orange:hover {
  background-color: #ff7125;
}
.confirm-purchase .actions .confirm.orange:hover .text-box {
  border-color: #f15400;
}
.confirm-purchase .actions .confirm.teal {
  background: #36CA97;
  border-color: #30b688;
  text-shadow: 0 0 1px #30b688;
}
.confirm-purchase .actions .confirm.teal .text-box {
  border-color: #30b688;
  text-shadow: 0 0 1px #30b688;
}
.confirm-purchase .actions .confirm.teal:hover {
  background-color: #42cd9d;
}
.confirm-purchase .actions .confirm.teal:hover .text-box {
  border-color: #52d1a6;
}
.confirm-purchase .actions .confirm.teal:active {
  background-color: #32be8e;
}
.confirm-purchase .actions .confirm.teal:active .text-box {
  border-color: #2eae82;
}
.confirm-purchase .actions .confirm .text-box {
  border-color: #6089ff;
  text-shadow: 0 0 1px #6089ff;
}
.confirm-purchase .actions .confirm:hover {
  color: #fff;
  background-color: #89a7ff;
}
.confirm-purchase .actions .confirm:active {
  background-color: #6a90ff;
}
.confirm-purchase .actions .cancel {
  border: solid #7a9cff;
  border-width: 0 0 1px 0;
  padding: 0 0 1px 0;
  background: none;
  color: #7a9cff;
  line-height: 100%;
}
.confirm-purchase .actions .cancel:hover {
  color: #adc2ff;
  border-color: #adc2ff;
}
.confirm-purchase .actions .cancel:active {
  color: #6089ff;
  border-color: #6089ff;
}
.account-page .account-content {
  background: #fff;
  padding: 30px 0;
  border-radius: 3px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.account-page .panel {
  margin-bottom: 30px;
}
.account-page .main-content {
  flex: 1 0  300px;
  margin-right: 30px;
}
.account-page .sidebar {
  flex: 0 0 300px;
}
.payment-source .card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}
.payment-source .card .brand {
  flex: 0 0;
  margin-right: 30px;
}
.payment-source .card .number {
  flex: 0 0 300px;
  font-size: 20px;
}
.payment-source .card .expiry {
  flex: 1 0;
  text-align: right;
}
.payment-source .payment-source-actions .change-payment-source {
  padding: 15px;
  background: #bab0ff;
  cursor: pointer;
  display: inline-block;
  border: 1px solid #8d7dff;
  text-shadow: 0 0 1px #8d7dff;
  letter-spacing: .05em;
  background-color: #7a9cff;
  border-color: #6089ff;
  text-shadow: 0 0 1px #6089ff;
  color: #fff;
  padding: 5px 15px;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.075);
}
.payment-source .payment-source-actions .change-payment-source:hover {
  color: #fff;
  background-color: #c7bfff;
}
.payment-source .payment-source-actions .change-payment-source:active {
  background-color: #ada1ff;
}
.payment-source .payment-source-actions .change-payment-source:focus {
  outline: none;
}
.payment-source .payment-source-actions .change-payment-source.small {
  padding: 5px 15px;
}
.payment-source .payment-source-actions .change-payment-source.primary {
  background-color: #7a9cff;
  border-color: #6089ff;
  text-shadow: 0 0 1px #6089ff;
  color: #fff;
}
.payment-source .payment-source-actions .change-payment-source.primary .text-box {
  border-color: #6089ff;
  text-shadow: 0 0 1px #6089ff;
}
.payment-source .payment-source-actions .change-payment-source.primary:hover {
  color: #fff;
  background-color: #89a7ff;
}
.payment-source .payment-source-actions .change-payment-source.primary:active {
  background-color: #6a90ff;
}
.payment-source .payment-source-actions .change-payment-source.secondary {
  background-color: #bab0ff;
  border-color: #8d7dff;
  text-shadow: 0 0 1px #8d7dff;
  color: #fff;
}
.payment-source .payment-source-actions .change-payment-source.secondary .text-box {
  border-color: #8d7dff;
  text-shadow: 0 0 1px #8d7dff;
}
.payment-source .payment-source-actions .change-payment-source.secondary:hover {
  color: #fff;
  background-color: #c7bfff;
}
.payment-source .payment-source-actions .change-payment-source.secondary:active {
  background-color: #ada1ff;
}
.payment-source .payment-source-actions .change-payment-source.green {
  background-color: #48D684;
  border-color: #2bc06a;
  color: #fff;
}
.payment-source .payment-source-actions .change-payment-source.green .text-box {
  border-color: #2bc06a;
}
.payment-source .payment-source-actions .change-payment-source.green:hover {
  color: #fff;
  background-color: #3cd37c;
}
.payment-source .payment-source-actions .change-payment-source.blue {
  background-color: #3498db;
  border-color: #2980b9;
  color: #fff;
}
.payment-source .payment-source-actions .change-payment-source.blue .text-box {
  border-color: #2980b9;
}
.payment-source .payment-source-actions .change-payment-source.blue:hover {
  color: #fff;
  background-color: #2791d9;
}
.payment-source .payment-source-actions .change-payment-source.bright-blue {
  background-color: #bab0ff;
  border-color: #8d7dff;
  color: #fff;
}
.payment-source .payment-source-actions .change-payment-source.bright-blue .text-box {
  border-color: #8d7dff;
  text-shadow: 0 0 1px #8d7dff;
}
.payment-source .payment-source-actions .change-payment-source.bright-blue:hover {
  color: #fff;
  background-color: #ada1ff;
}
.payment-source .payment-source-actions .change-payment-source.bright-blue:hover .text-box {
  border-color: #806eff;
}
.payment-source .payment-source-actions .change-payment-source.light-blue {
  background: #2fd9e9;
  border-color: #16bfcf;
}
.payment-source .payment-source-actions .change-payment-source.light-blue .text-box {
  border-color: #16bfcf;
  text-shadow: 0 0 1px #16bfcf;
}
.payment-source .payment-source-actions .change-payment-source.light-blue:hover {
  background-color: #21d6e8;
}
.payment-source .payment-source-actions .change-payment-source.light-blue:hover .text-box {
  border-color: #14b2c1;
}
.payment-source .payment-source-actions .change-payment-source.white {
  background: #fff;
  border-color: #ecf0f1;
  color: #7a9cff;
  font-family: "Helvetica Light", Helvetica, sans-serif;
  font-weight: normal;
}
.payment-source .payment-source-actions .change-payment-source.white .text-box {
  border-color: #adc2ff;
  text-shadow: 0 0 1px #adc2ff;
}
.payment-source .payment-source-actions .change-payment-source.white:hover {
  background-color: #ffffff;
  color: #6a90ff;
}
.payment-source .payment-source-actions .change-payment-source.white:hover .text-box {
  border-color: #e3b90d;
}
.payment-source .payment-source-actions .change-payment-source.white:hover .icon-box svg use {
  fill: #6a90ff;
}
.payment-source .payment-source-actions .change-payment-source.white .icon-box svg use {
  fill: #7a9cff;
}
.payment-source .payment-source-actions .change-payment-source.dark-blue {
  background: #34495e;
  border-color: #2c3e50;
}
.payment-source .payment-source-actions .change-payment-source.dark-blue .text-box {
  border-color: #2c3e50;
}
.payment-source .payment-source-actions .change-payment-source.dark-blue:hover {
  background-color: #2f4154;
}
.payment-source .payment-source-actions .change-payment-source.purple {
  background: #9b59b6;
  border-color: #8e44ad;
}
.payment-source .payment-source-actions .change-payment-source.purple .text-box {
  border-color: #8e44ad;
}
.payment-source .payment-source-actions .change-payment-source.purple:hover {
  background-color: #954eb1;
}
.payment-source .payment-source-actions .change-payment-source.fuchsia {
  background: #CF8FE5;
  border-color: #bd66db;
}
.payment-source .payment-source-actions .change-payment-source.fuchsia .text-box {
  border-color: #bd66db;
  text-shadow: 0 0 1px #bd66db;
}
.payment-source .payment-source-actions .change-payment-source.fuchsia:hover {
  background-color: #ca83e2;
}
.payment-source .payment-source-actions .change-payment-source.fuchsia:hover .text-box {
  border-color: #b859d9;
}
.payment-source .payment-source-actions .change-payment-source.orange {
  background: #ff7b34;
  border-color: #ff5a01;
}
.payment-source .payment-source-actions .change-payment-source.orange .text-box {
  border-color: #ff5a01;
}
.payment-source .payment-source-actions .change-payment-source.orange:hover {
  background-color: #ff7125;
}
.payment-source .payment-source-actions .change-payment-source.orange:hover .text-box {
  border-color: #f15400;
}
.payment-source .payment-source-actions .change-payment-source.teal {
  background: #36CA97;
  border-color: #30b688;
  text-shadow: 0 0 1px #30b688;
}
.payment-source .payment-source-actions .change-payment-source.teal .text-box {
  border-color: #30b688;
  text-shadow: 0 0 1px #30b688;
}
.payment-source .payment-source-actions .change-payment-source.teal:hover {
  background-color: #42cd9d;
}
.payment-source .payment-source-actions .change-payment-source.teal:hover .text-box {
  border-color: #52d1a6;
}
.payment-source .payment-source-actions .change-payment-source.teal:active {
  background-color: #32be8e;
}
.payment-source .payment-source-actions .change-payment-source.teal:active .text-box {
  border-color: #2eae82;
}
.payment-source .payment-source-actions .change-payment-source .text-box {
  border-color: #6089ff;
  text-shadow: 0 0 1px #6089ff;
}
.payment-source .payment-source-actions .change-payment-source:hover {
  color: #fff;
  background-color: #89a7ff;
}
.payment-source .payment-source-actions .change-payment-source:active {
  background-color: #6a90ff;
}
.payment-source .billing-link {
  display: block;
  font-size: 18px;
  margin-top: 20px;
}
.user-info .item,
.billing-address .item {
  margin-bottom: 20px;
}
.user-info .item .label,
.billing-address .item .label {
  margin-bottom: 5px;
}
.user-info .item input,
.billing-address .item input {
  width: 100%;
  box-sizing: border-box;
}
.user-info .reset-password-link,
.billing-address .reset-password-link {
  display: block;
  margin: 5px 0 20px 0;
}
.user-info .error,
.billing-address .error {
  margin-bottom: 10px;
}
.user-info .error:empty,
.billing-address .error:empty {
  margin-bottom: 0;
  padding: 0;
}
.user-info .submit,
.billing-address .submit {
  padding: 15px;
  background: #bab0ff;
  cursor: pointer;
  display: inline-block;
  border: 1px solid #8d7dff;
  text-shadow: 0 0 1px #8d7dff;
  letter-spacing: .05em;
  background-color: #7a9cff;
  border-color: #6089ff;
  text-shadow: 0 0 1px #6089ff;
  color: #fff;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.075);
}
.user-info .submit:hover,
.billing-address .submit:hover {
  color: #fff;
  background-color: #c7bfff;
}
.user-info .submit:active,
.billing-address .submit:active {
  background-color: #ada1ff;
}
.user-info .submit:focus,
.billing-address .submit:focus {
  outline: none;
}
.user-info .submit.small,
.billing-address .submit.small {
  padding: 5px 15px;
}
.user-info .submit.primary,
.billing-address .submit.primary {
  background-color: #7a9cff;
  border-color: #6089ff;
  text-shadow: 0 0 1px #6089ff;
  color: #fff;
}
.user-info .submit.primary .text-box,
.billing-address .submit.primary .text-box {
  border-color: #6089ff;
  text-shadow: 0 0 1px #6089ff;
}
.user-info .submit.primary:hover,
.billing-address .submit.primary:hover {
  color: #fff;
  background-color: #89a7ff;
}
.user-info .submit.primary:active,
.billing-address .submit.primary:active {
  background-color: #6a90ff;
}
.user-info .submit.secondary,
.billing-address .submit.secondary {
  background-color: #bab0ff;
  border-color: #8d7dff;
  text-shadow: 0 0 1px #8d7dff;
  color: #fff;
}
.user-info .submit.secondary .text-box,
.billing-address .submit.secondary .text-box {
  border-color: #8d7dff;
  text-shadow: 0 0 1px #8d7dff;
}
.user-info .submit.secondary:hover,
.billing-address .submit.secondary:hover {
  color: #fff;
  background-color: #c7bfff;
}
.user-info .submit.secondary:active,
.billing-address .submit.secondary:active {
  background-color: #ada1ff;
}
.user-info .submit.green,
.billing-address .submit.green {
  background-color: #48D684;
  border-color: #2bc06a;
  color: #fff;
}
.user-info .submit.green .text-box,
.billing-address .submit.green .text-box {
  border-color: #2bc06a;
}
.user-info .submit.green:hover,
.billing-address .submit.green:hover {
  color: #fff;
  background-color: #3cd37c;
}
.user-info .submit.blue,
.billing-address .submit.blue {
  background-color: #3498db;
  border-color: #2980b9;
  color: #fff;
}
.user-info .submit.blue .text-box,
.billing-address .submit.blue .text-box {
  border-color: #2980b9;
}
.user-info .submit.blue:hover,
.billing-address .submit.blue:hover {
  color: #fff;
  background-color: #2791d9;
}
.user-info .submit.bright-blue,
.billing-address .submit.bright-blue {
  background-color: #bab0ff;
  border-color: #8d7dff;
  color: #fff;
}
.user-info .submit.bright-blue .text-box,
.billing-address .submit.bright-blue .text-box {
  border-color: #8d7dff;
  text-shadow: 0 0 1px #8d7dff;
}
.user-info .submit.bright-blue:hover,
.billing-address .submit.bright-blue:hover {
  color: #fff;
  background-color: #ada1ff;
}
.user-info .submit.bright-blue:hover .text-box,
.billing-address .submit.bright-blue:hover .text-box {
  border-color: #806eff;
}
.user-info .submit.light-blue,
.billing-address .submit.light-blue {
  background: #2fd9e9;
  border-color: #16bfcf;
}
.user-info .submit.light-blue .text-box,
.billing-address .submit.light-blue .text-box {
  border-color: #16bfcf;
  text-shadow: 0 0 1px #16bfcf;
}
.user-info .submit.light-blue:hover,
.billing-address .submit.light-blue:hover {
  background-color: #21d6e8;
}
.user-info .submit.light-blue:hover .text-box,
.billing-address .submit.light-blue:hover .text-box {
  border-color: #14b2c1;
}
.user-info .submit.white,
.billing-address .submit.white {
  background: #fff;
  border-color: #ecf0f1;
  color: #7a9cff;
  font-family: "Helvetica Light", Helvetica, sans-serif;
  font-weight: normal;
}
.user-info .submit.white .text-box,
.billing-address .submit.white .text-box {
  border-color: #adc2ff;
  text-shadow: 0 0 1px #adc2ff;
}
.user-info .submit.white:hover,
.billing-address .submit.white:hover {
  background-color: #ffffff;
  color: #6a90ff;
}
.user-info .submit.white:hover .text-box,
.billing-address .submit.white:hover .text-box {
  border-color: #e3b90d;
}
.user-info .submit.white:hover .icon-box svg use,
.billing-address .submit.white:hover .icon-box svg use {
  fill: #6a90ff;
}
.user-info .submit.white .icon-box svg use,
.billing-address .submit.white .icon-box svg use {
  fill: #7a9cff;
}
.user-info .submit.dark-blue,
.billing-address .submit.dark-blue {
  background: #34495e;
  border-color: #2c3e50;
}
.user-info .submit.dark-blue .text-box,
.billing-address .submit.dark-blue .text-box {
  border-color: #2c3e50;
}
.user-info .submit.dark-blue:hover,
.billing-address .submit.dark-blue:hover {
  background-color: #2f4154;
}
.user-info .submit.purple,
.billing-address .submit.purple {
  background: #9b59b6;
  border-color: #8e44ad;
}
.user-info .submit.purple .text-box,
.billing-address .submit.purple .text-box {
  border-color: #8e44ad;
}
.user-info .submit.purple:hover,
.billing-address .submit.purple:hover {
  background-color: #954eb1;
}
.user-info .submit.fuchsia,
.billing-address .submit.fuchsia {
  background: #CF8FE5;
  border-color: #bd66db;
}
.user-info .submit.fuchsia .text-box,
.billing-address .submit.fuchsia .text-box {
  border-color: #bd66db;
  text-shadow: 0 0 1px #bd66db;
}
.user-info .submit.fuchsia:hover,
.billing-address .submit.fuchsia:hover {
  background-color: #ca83e2;
}
.user-info .submit.fuchsia:hover .text-box,
.billing-address .submit.fuchsia:hover .text-box {
  border-color: #b859d9;
}
.user-info .submit.orange,
.billing-address .submit.orange {
  background: #ff7b34;
  border-color: #ff5a01;
}
.user-info .submit.orange .text-box,
.billing-address .submit.orange .text-box {
  border-color: #ff5a01;
}
.user-info .submit.orange:hover,
.billing-address .submit.orange:hover {
  background-color: #ff7125;
}
.user-info .submit.orange:hover .text-box,
.billing-address .submit.orange:hover .text-box {
  border-color: #f15400;
}
.user-info .submit.teal,
.billing-address .submit.teal {
  background: #36CA97;
  border-color: #30b688;
  text-shadow: 0 0 1px #30b688;
}
.user-info .submit.teal .text-box,
.billing-address .submit.teal .text-box {
  border-color: #30b688;
  text-shadow: 0 0 1px #30b688;
}
.user-info .submit.teal:hover,
.billing-address .submit.teal:hover {
  background-color: #42cd9d;
}
.user-info .submit.teal:hover .text-box,
.billing-address .submit.teal:hover .text-box {
  border-color: #52d1a6;
}
.user-info .submit.teal:active,
.billing-address .submit.teal:active {
  background-color: #32be8e;
}
.user-info .submit.teal:active .text-box,
.billing-address .submit.teal:active .text-box {
  border-color: #2eae82;
}
.user-info .submit .text-box,
.billing-address .submit .text-box {
  border-color: #6089ff;
  text-shadow: 0 0 1px #6089ff;
}
.user-info .submit:hover,
.billing-address .submit:hover {
  color: #fff;
  background-color: #89a7ff;
}
.user-info .submit:active,
.billing-address .submit:active {
  background-color: #6a90ff;
}
.billing-content .billing-history .item {
  padding: 20px 30px;
  display: flex;
  flex-direction: row;
  align-items: center;
  border-bottom: 1px solid #ecf0f1;
}
.billing-content .billing-history .item:last-child {
  border-bottom: none;
}
.billing-content .billing-history .invoice-data {
  flex: 1;
}
.billing-content .billing-history .period {
  color: #7a9cff;
  font-size: 18px;
  margin: 0;
}
.billing-content .billing-history .plan-name {
  font-size: 14px;
  margin: 0;
  margin-top: 10px;
}
.billing-content .billing-history .print {
  cursor: pointer;
}
.billing-content .invoice-container {
  display: none;
}
.project {
  height: 100%;
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: #667273;
}
.project .header {
  margin-top: 0;
  transition: margin-top 0.25s ease-in-out;
}
.project .header .content {
  padding: 0 30px;
}
.project .header .header-links .account-link,
.project .header .header-links .logout-link,
.project .header .header-links .blog-link {
  display: none;
}
.project .main {
  display: flex;
  flex-grow: 5;
  background: #fff;
  min-height: 0;
}
.project .main .content {
  display: flex;
  flex-direction: column;
  min-width: 960px;
  min-height: 0;
}
.project .sidebar {
  flex: 0 0 220px;
  min-height: 100%;
}
.project .sidebar:empty {
  display: none;
}
.project .content {
  max-width: 100%;
  padding: 0;
  margin: 0;
  flex-grow: 5;
  position: relative;
}
.project .top-block {
  flex-grow: 0 0;
}
.project .bottom-block {
  flex-grow: 5;
  display: flex;
  flex-direction: column;
  overflow: auto;
}
.project .left-block {
  flex-grow: 0 0;
}
.project .right-block {
  flex-grow: 5;
  margin-left: 30px;
  display: flex;
  flex-direction: column;
}
.project h1,
.project h2,
.project h3,
.project h4 {
  font-weight: lighter;
}
.project .finished-recording {
  margin: 30px;
  font-size: 20px;
}
.project .recordings {
  background: #ecf0f1;
  border-right: 1px solid #ecf0f1;
  overflow: auto;
}
.project .recordings .recording-link {
  padding: 15px 15px;
  background: #fcfcfc;
  border-bottom: 1px solid #ecf0f1;
  height: 34px;
  font-size: 16px;
}
.project .recordings .recording-link:hover,
.project .recordings .recording-link.active {
  cursor: pointer;
  background: #fff;
}
.project .recordings .recording-link:hover .icon use,
.project .recordings .recording-link.active .icon use {
  fill: #f1c40f;
}
.project .recordings .recording-link.active .icon use {
  fill: #7a9cff;
}
.project .recordings .recording-link.disabled {
  pointer-events: none;
}
.project .recordings .recording-link .name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.project .recordings .recording-link .duration {
  font-size: 12px;
  line-height: 12px;
}
.project .recordings .recording-link .icon {
  float: left;
  width: 61px;
  height: 40px;
  margin-top: -2px;
  margin-right: 15px;
}
.project .recordings .recording-link .icon use {
  fill: #bdc3c7;
}
.project .project-header .project-name {
  font-weight: lighter;
  text-transform: uppercase;
  font-size: 25px;
  margin: 60px 0 60px 30px;
  line-height: normal;
  display: none;
}
.project .project-content {
  flex-grow: 5;
  display: flex;
  flex-direction: column;
}
.recorder:after {
  clear: both;
}
.recorder:after,
.recorder:before {
  content: " ";
  display: table;
}
.recorder.guest.is-recording .controls .record .icon-box {
  opacity: 1;
}
.recorder.guest.is-recording .controls .record .label {
  display: none;
}
.recorder.guest .controls {
  flex: 0 0 86px;
}
.recorder.guest .controls .record {
  pointer-events: none;
  padding: 0 10px;
}
.recorder.guest .controls .record .icon-box {
  opacity: .4;
}
.recorder.guest .controls .record .label {
  display: none;
}
.recorder.guest .waiting-for-mics:before {
  opacity: 0;
}
.recorder .defer-uploads-block {
  margin-bottom: 10px;
}
.recorder .defer-uploads-block label {
  font-size: 13px;
}
.recorder .defer-uploads-block .defer-uploads-help {
  position: relative;
  color: #bdc3c7;
  font-size: 16px;
}
.recorder .defer-uploads-block .defer-uploads-help .defer-uploads-info {
  display: none;
  font-weight: normal;
  color: #2c3e50;
  position: absolute;
  background: #fff;
  width: 500px;
  border: 1px solid #bdc3c7;
  padding: 15px;
  border-radius: 3px;
  top: -105px;
}
.recorder .defer-uploads-block .defer-uploads-help:hover .defer-uploads-info {
  display: block;
}
.recorder .top-tools .first-row {
  display: flex;
  background: #e0e8ff;
  margin-top: 0px;
  transition: margin-top 0.25s ease-out;
  min-height: 86px;
}
.recorder .top-tools .first-row:after {
  clear: both;
}
.recorder .top-tools .first-row:after,
.recorder .top-tools .first-row:before {
  content: " ";
  display: table;
}
.recorder .second-row .actions {
  overflow: hidden;
  display: flex;
  flex-flow: row wrap;
  border-top: 1px solid #f1c40f;
  justify-content: space-between;
}
.recorder .second-row .actions .action {
  border-width: 0 0 1px 0 !important;
  z-index: 20;
  position: relative;
  display: block;
  flex: 1;
}
.recorder .second-row .actions .action .button-label {
  display: flex;
  margin: 0 auto;
}
.recorder .second-row .actions .action {
  padding: 15px;
  background: #bab0ff;
  cursor: pointer;
  border: 1px solid #8d7dff;
  color: #fff;
  text-shadow: 0 0 1px #8d7dff;
  letter-spacing: .05em;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.075);
  display: inline-block;
  border: 1px solid;
  border-radius: 0;
  padding: 0;
  background: #fff;
  border-color: #ecf0f1;
  color: #7a9cff;
  font-family: "Helvetica Light", Helvetica, sans-serif;
  font-weight: normal;
  background-color: #fcfcfc;
}
.recorder .second-row .actions .action:hover {
  color: #fff;
  background-color: #c7bfff;
}
.recorder .second-row .actions .action:active {
  background-color: #ada1ff;
}
.recorder .second-row .actions .action:focus {
  outline: none;
}
.recorder .second-row .actions .action.small {
  padding: 5px 15px;
}
.recorder .second-row .actions .action.primary {
  background-color: #7a9cff;
  border-color: #6089ff;
  text-shadow: 0 0 1px #6089ff;
  color: #fff;
}
.recorder .second-row .actions .action.primary .text-box {
  border-color: #6089ff;
  text-shadow: 0 0 1px #6089ff;
}
.recorder .second-row .actions .action.primary:hover {
  color: #fff;
  background-color: #89a7ff;
}
.recorder .second-row .actions .action.primary:active {
  background-color: #6a90ff;
}
.recorder .second-row .actions .action.secondary {
  background-color: #bab0ff;
  border-color: #8d7dff;
  text-shadow: 0 0 1px #8d7dff;
  color: #fff;
}
.recorder .second-row .actions .action.secondary .text-box {
  border-color: #8d7dff;
  text-shadow: 0 0 1px #8d7dff;
}
.recorder .second-row .actions .action.secondary:hover {
  color: #fff;
  background-color: #c7bfff;
}
.recorder .second-row .actions .action.secondary:active {
  background-color: #ada1ff;
}
.recorder .second-row .actions .action.green {
  background-color: #48D684;
  border-color: #2bc06a;
  color: #fff;
}
.recorder .second-row .actions .action.green .text-box {
  border-color: #2bc06a;
}
.recorder .second-row .actions .action.green:hover {
  color: #fff;
  background-color: #3cd37c;
}
.recorder .second-row .actions .action.blue {
  background-color: #3498db;
  border-color: #2980b9;
  color: #fff;
}
.recorder .second-row .actions .action.blue .text-box {
  border-color: #2980b9;
}
.recorder .second-row .actions .action.blue:hover {
  color: #fff;
  background-color: #2791d9;
}
.recorder .second-row .actions .action.bright-blue {
  background-color: #bab0ff;
  border-color: #8d7dff;
  color: #fff;
}
.recorder .second-row .actions .action.bright-blue .text-box {
  border-color: #8d7dff;
  text-shadow: 0 0 1px #8d7dff;
}
.recorder .second-row .actions .action.bright-blue:hover {
  color: #fff;
  background-color: #ada1ff;
}
.recorder .second-row .actions .action.bright-blue:hover .text-box {
  border-color: #806eff;
}
.recorder .second-row .actions .action.light-blue {
  background: #2fd9e9;
  border-color: #16bfcf;
}
.recorder .second-row .actions .action.light-blue .text-box {
  border-color: #16bfcf;
  text-shadow: 0 0 1px #16bfcf;
}
.recorder .second-row .actions .action.light-blue:hover {
  background-color: #21d6e8;
}
.recorder .second-row .actions .action.light-blue:hover .text-box {
  border-color: #14b2c1;
}
.recorder .second-row .actions .action.white {
  background: #fff;
  border-color: #ecf0f1;
  color: #7a9cff;
  font-family: "Helvetica Light", Helvetica, sans-serif;
  font-weight: normal;
}
.recorder .second-row .actions .action.white .text-box {
  border-color: #adc2ff;
  text-shadow: 0 0 1px #adc2ff;
}
.recorder .second-row .actions .action.white:hover {
  background-color: #ffffff;
  color: #6a90ff;
}
.recorder .second-row .actions .action.white:hover .text-box {
  border-color: #e3b90d;
}
.recorder .second-row .actions .action.white:hover .icon-box svg use {
  fill: #6a90ff;
}
.recorder .second-row .actions .action.white .icon-box svg use {
  fill: #7a9cff;
}
.recorder .second-row .actions .action.dark-blue {
  background: #34495e;
  border-color: #2c3e50;
}
.recorder .second-row .actions .action.dark-blue .text-box {
  border-color: #2c3e50;
}
.recorder .second-row .actions .action.dark-blue:hover {
  background-color: #2f4154;
}
.recorder .second-row .actions .action.purple {
  background: #9b59b6;
  border-color: #8e44ad;
}
.recorder .second-row .actions .action.purple .text-box {
  border-color: #8e44ad;
}
.recorder .second-row .actions .action.purple:hover {
  background-color: #954eb1;
}
.recorder .second-row .actions .action.fuchsia {
  background: #CF8FE5;
  border-color: #bd66db;
}
.recorder .second-row .actions .action.fuchsia .text-box {
  border-color: #bd66db;
  text-shadow: 0 0 1px #bd66db;
}
.recorder .second-row .actions .action.fuchsia:hover {
  background-color: #ca83e2;
}
.recorder .second-row .actions .action.fuchsia:hover .text-box {
  border-color: #b859d9;
}
.recorder .second-row .actions .action.orange {
  background: #ff7b34;
  border-color: #ff5a01;
}
.recorder .second-row .actions .action.orange .text-box {
  border-color: #ff5a01;
}
.recorder .second-row .actions .action.orange:hover {
  background-color: #ff7125;
}
.recorder .second-row .actions .action.orange:hover .text-box {
  border-color: #f15400;
}
.recorder .second-row .actions .action.teal {
  background: #36CA97;
  border-color: #30b688;
  text-shadow: 0 0 1px #30b688;
}
.recorder .second-row .actions .action.teal .text-box {
  border-color: #30b688;
  text-shadow: 0 0 1px #30b688;
}
.recorder .second-row .actions .action.teal:hover {
  background-color: #42cd9d;
}
.recorder .second-row .actions .action.teal:hover .text-box {
  border-color: #52d1a6;
}
.recorder .second-row .actions .action.teal:active {
  background-color: #32be8e;
}
.recorder .second-row .actions .action.teal:active .text-box {
  border-color: #2eae82;
}
.recorder .second-row .actions .action:after {
  clear: both;
}
.recorder .second-row .actions .action:after,
.recorder .second-row .actions .action:before {
  content: " ";
  display: table;
}
.recorder .second-row .actions .action .icon-box {
  position: relative;
  float: left;
  width: 40px;
  height: 100%;
}
.recorder .second-row .actions .action .icon-box svg {
  width: 50%;
  height: 25px;
  margin-left: 25%;
  margin-top: 20%;
}
.recorder .second-row .actions .action .icon-box svg use {
  fill: #fff;
}
.recorder .second-row .actions .action .text-box {
  padding: 0 15px 0 0;
  line-height: 32px;
}
.recorder .second-row .actions .action.separated .text-box {
  border-left: 1px solid;
  padding: 0 15px;
}
.recorder .second-row .actions .action.large .icon-box {
  width: 64px;
  height: 64px;
}
.recorder .second-row .actions .action.large .text-box {
  height: 64px;
  line-height: 64px;
}
.recorder .second-row .actions .action .icon-box {
  width: 64px;
  height: 64px;
}
.recorder .second-row .actions .action .text-box {
  height: 64px;
  line-height: 64px;
}
.recorder .second-row .actions .action .text-box {
  border-color: #adc2ff;
  text-shadow: 0 0 1px #adc2ff;
}
.recorder .second-row .actions .action:hover {
  background-color: #ffffff;
  color: #6a90ff;
}
.recorder .second-row .actions .action:hover .text-box {
  border-color: #e3b90d;
}
.recorder .second-row .actions .action:hover .icon-box svg use {
  fill: #6a90ff;
}
.recorder .second-row .actions .action .icon-box svg use {
  fill: #7a9cff;
}
.recorder .second-row .actions .action:hover {
  background-image: none;
}
.recorder .second-row .actions .action .icon-box,
.recorder .second-row .actions .action .text-box {
  height: 50px;
  line-height: 50px;
  letter-spacing: .04em;
}
.recorder .second-row .actions .action .icon-box {
  width: 50px;
  display: flex;
  align-items: center;
}
.recorder .second-row .actions .action .icon-box .icon {
  margin: auto;
  width: 50%;
  height: 50%;
}
.recorder .second-row .actions .action.invite .button-label {
  width: 133px;
}
.recorder .second-row .actions .action.add-footnote .button-label {
  width: 225px;
}
.recorder .second-row .actions .action.add-footnote .icon-box {
  width: 38px;
}
.recorder .second-row .actions .action.add-footnote .icon-box .icon {
  width: 87%;
  height: 68%;
  margin-top: 10px;
}
.recorder .second-row .actions .action.add-footnote .icon-box .icon use {
  stroke-width: 1px;
  stroke: #7a9cff;
}
.recorder .second-row .actions .action.toggle-voip {
  display: none;
}
.recorder .second-row .actions .action.toggle-voip .button-label {
  width: 189px;
}
.recorder .second-row .actions .action.toggle-voip .icon {
  width: 65%;
  height: 65%;
  position: relative;
}
.recorder .second-row .actions .action.view-on-cloud-drive {
  display: none;
}
.recorder .second-row .actions .action.view-on-cloud-drive .button-label {
  width: 189px;
}
.recorder .second-row .actions .action.view-on-cloud-drive .icon {
  width: 55%;
  height: 55%;
  position: relative;
  top: 4px;
}
.recorder .second-row .actions .action.postproduction {
  display: none;
  position: relative;
}
.recorder .second-row .actions .action.postproduction .button-label {
  width: 291px;
}
.recorder .second-row .actions .action.postproduction.loading {
  cursor: default;
}
.recorder .second-row .actions .action.postproduction.loading .icon {
  display: none;
}
.recorder .second-row .actions .action.postproduction.loading:after {
  position: absolute;
  top: 17px;
  left: 24px;
  width: 26px;
  height: 24px;
  border: 1px solid #fff;
  border-radius: 50%;
  border-width: 2px 2px 2px 0;
  border-bottom-color: transparent;
  -webkit-animation: spin 1s linear infinite;
  -moz-animation: spin 1s linear infinite;
  animation: spin 1s linear infinite;
}
.recorder .second-row .actions .action.postproduction .icon {
  width: 40%;
  height: 40%;
}
.recorder .second-row .actions .action.start-over {
  display: none;
}
.recorder .second-row .actions .action.start-over .button-label {
  width: 218px;
}
.recorder .second-row .actions .action.start-over .icon {
  position: relative;
  top: -1px;
}
.recorder .audio-settings {
  background-color: #7a9cff;
  border-color: #6089ff;
  text-shadow: 0 0 1px #6089ff;
  color: #fff;
  flex: 0 1 100px;
  position: relative;
  cursor: pointer;
  transition: transform 250ms linear;
  max-height: 101px;
  text-align: center;
}
.recorder .audio-settings .text-box {
  border-color: #6089ff;
  text-shadow: 0 0 1px #6089ff;
}
.recorder .audio-settings:hover {
  color: #fff;
  background-color: #89a7ff;
}
.recorder .audio-settings:active {
  background-color: #6a90ff;
}
.recorder .audio-settings .audio-settings-icon {
  transition: transform 250ms linear;
  height: 100%;
  width: 53px;
}
.recorder .audio-settings .audio-settings-icon use {
  fill: #fff;
  stroke: #fff;
  stroke-width: 1.9px;
}
.recorder .audio-settings.disabled {
  pointer-events: none;
}
.recorder .audio-settings.disabled .icon {
  opacity: .4;
}
.recorder .controls {
  position: relative;
}
.recorder .controls:after {
  clear: both;
}
.recorder .controls:after,
.recorder .controls:before {
  content: " ";
  display: table;
}
.recorder .controls:before {
  background: rgba(121, 155, 255, 0.95);
  top: 0;
  left: 0;
  z-index: 50;
  text-align: center;
  line-height: 28px;
  color: #fff;
  text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 15px;
  box-sizing: border-box;
}
.recorder .controls.waiting-for-mics:before {
  content: 'Waiting for all mics to be armed...';
  position: absolute;
  width: 100%;
  height: 100%;
}
.recorder .controls.waiting-for-health-checks:before {
  content: 'Waiting for health checks to pass...';
  position: absolute;
  width: 100%;
  height: 100%;
}
.recorder .controls .record.disabled {
  pointer-events: none;
}
.recorder .controls .record.disabled .icon-box {
  opacity: .4;
}
.recorder .controls .record,
.recorder .controls .new-recording {
  padding: 15px;
  background: #bab0ff;
  cursor: pointer;
  border: 1px solid #8d7dff;
  text-shadow: 0 0 1px #8d7dff;
  letter-spacing: .05em;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.075);
  display: inline-block;
  border: 1px solid;
  border-radius: 0;
  padding: 0;
  background-color: #7a9cff;
  border-color: #6089ff;
  text-shadow: 0 0 1px #6089ff;
  color: #fff;
  font-family: "Helvetica Light", Helvetica, sans-serif;
  font-weight: normal;
  box-shadow: none;
  position: relative;
  height: 100%;
  padding: 0 30px 0 10px;
  float: left;
  border-color: #7a9cff;
  display: flex;
  align-items: center;
}
.recorder .controls .record:hover,
.recorder .controls .new-recording:hover {
  color: #fff;
  background-color: #c7bfff;
}
.recorder .controls .record:active,
.recorder .controls .new-recording:active {
  background-color: #ada1ff;
}
.recorder .controls .record:focus,
.recorder .controls .new-recording:focus {
  outline: none;
}
.recorder .controls .record.small,
.recorder .controls .new-recording.small {
  padding: 5px 15px;
}
.recorder .controls .record.primary,
.recorder .controls .new-recording.primary {
  background-color: #7a9cff;
  border-color: #6089ff;
  text-shadow: 0 0 1px #6089ff;
  color: #fff;
}
.recorder .controls .record.primary .text-box,
.recorder .controls .new-recording.primary .text-box {
  border-color: #6089ff;
  text-shadow: 0 0 1px #6089ff;
}
.recorder .controls .record.primary:hover,
.recorder .controls .new-recording.primary:hover {
  color: #fff;
  background-color: #89a7ff;
}
.recorder .controls .record.primary:active,
.recorder .controls .new-recording.primary:active {
  background-color: #6a90ff;
}
.recorder .controls .record.secondary,
.recorder .controls .new-recording.secondary {
  background-color: #bab0ff;
  border-color: #8d7dff;
  text-shadow: 0 0 1px #8d7dff;
  color: #fff;
}
.recorder .controls .record.secondary .text-box,
.recorder .controls .new-recording.secondary .text-box {
  border-color: #8d7dff;
  text-shadow: 0 0 1px #8d7dff;
}
.recorder .controls .record.secondary:hover,
.recorder .controls .new-recording.secondary:hover {
  color: #fff;
  background-color: #c7bfff;
}
.recorder .controls .record.secondary:active,
.recorder .controls .new-recording.secondary:active {
  background-color: #ada1ff;
}
.recorder .controls .record.green,
.recorder .controls .new-recording.green {
  background-color: #48D684;
  border-color: #2bc06a;
  color: #fff;
}
.recorder .controls .record.green .text-box,
.recorder .controls .new-recording.green .text-box {
  border-color: #2bc06a;
}
.recorder .controls .record.green:hover,
.recorder .controls .new-recording.green:hover {
  color: #fff;
  background-color: #3cd37c;
}
.recorder .controls .record.blue,
.recorder .controls .new-recording.blue {
  background-color: #3498db;
  border-color: #2980b9;
  color: #fff;
}
.recorder .controls .record.blue .text-box,
.recorder .controls .new-recording.blue .text-box {
  border-color: #2980b9;
}
.recorder .controls .record.blue:hover,
.recorder .controls .new-recording.blue:hover {
  color: #fff;
  background-color: #2791d9;
}
.recorder .controls .record.bright-blue,
.recorder .controls .new-recording.bright-blue {
  background-color: #bab0ff;
  border-color: #8d7dff;
  color: #fff;
}
.recorder .controls .record.bright-blue .text-box,
.recorder .controls .new-recording.bright-blue .text-box {
  border-color: #8d7dff;
  text-shadow: 0 0 1px #8d7dff;
}
.recorder .controls .record.bright-blue:hover,
.recorder .controls .new-recording.bright-blue:hover {
  color: #fff;
  background-color: #ada1ff;
}
.recorder .controls .record.bright-blue:hover .text-box,
.recorder .controls .new-recording.bright-blue:hover .text-box {
  border-color: #806eff;
}
.recorder .controls .record.light-blue,
.recorder .controls .new-recording.light-blue {
  background: #2fd9e9;
  border-color: #16bfcf;
}
.recorder .controls .record.light-blue .text-box,
.recorder .controls .new-recording.light-blue .text-box {
  border-color: #16bfcf;
  text-shadow: 0 0 1px #16bfcf;
}
.recorder .controls .record.light-blue:hover,
.recorder .controls .new-recording.light-blue:hover {
  background-color: #21d6e8;
}
.recorder .controls .record.light-blue:hover .text-box,
.recorder .controls .new-recording.light-blue:hover .text-box {
  border-color: #14b2c1;
}
.recorder .controls .record.white,
.recorder .controls .new-recording.white {
  background: #fff;
  border-color: #ecf0f1;
  color: #7a9cff;
  font-family: "Helvetica Light", Helvetica, sans-serif;
  font-weight: normal;
}
.recorder .controls .record.white .text-box,
.recorder .controls .new-recording.white .text-box {
  border-color: #adc2ff;
  text-shadow: 0 0 1px #adc2ff;
}
.recorder .controls .record.white:hover,
.recorder .controls .new-recording.white:hover {
  background-color: #ffffff;
  color: #6a90ff;
}
.recorder .controls .record.white:hover .text-box,
.recorder .controls .new-recording.white:hover .text-box {
  border-color: #e3b90d;
}
.recorder .controls .record.white:hover .icon-box svg use,
.recorder .controls .new-recording.white:hover .icon-box svg use {
  fill: #6a90ff;
}
.recorder .controls .record.white .icon-box svg use,
.recorder .controls .new-recording.white .icon-box svg use {
  fill: #7a9cff;
}
.recorder .controls .record.dark-blue,
.recorder .controls .new-recording.dark-blue {
  background: #34495e;
  border-color: #2c3e50;
}
.recorder .controls .record.dark-blue .text-box,
.recorder .controls .new-recording.dark-blue .text-box {
  border-color: #2c3e50;
}
.recorder .controls .record.dark-blue:hover,
.recorder .controls .new-recording.dark-blue:hover {
  background-color: #2f4154;
}
.recorder .controls .record.purple,
.recorder .controls .new-recording.purple {
  background: #9b59b6;
  border-color: #8e44ad;
}
.recorder .controls .record.purple .text-box,
.recorder .controls .new-recording.purple .text-box {
  border-color: #8e44ad;
}
.recorder .controls .record.purple:hover,
.recorder .controls .new-recording.purple:hover {
  background-color: #954eb1;
}
.recorder .controls .record.fuchsia,
.recorder .controls .new-recording.fuchsia {
  background: #CF8FE5;
  border-color: #bd66db;
}
.recorder .controls .record.fuchsia .text-box,
.recorder .controls .new-recording.fuchsia .text-box {
  border-color: #bd66db;
  text-shadow: 0 0 1px #bd66db;
}
.recorder .controls .record.fuchsia:hover,
.recorder .controls .new-recording.fuchsia:hover {
  background-color: #ca83e2;
}
.recorder .controls .record.fuchsia:hover .text-box,
.recorder .controls .new-recording.fuchsia:hover .text-box {
  border-color: #b859d9;
}
.recorder .controls .record.orange,
.recorder .controls .new-recording.orange {
  background: #ff7b34;
  border-color: #ff5a01;
}
.recorder .controls .record.orange .text-box,
.recorder .controls .new-recording.orange .text-box {
  border-color: #ff5a01;
}
.recorder .controls .record.orange:hover,
.recorder .controls .new-recording.orange:hover {
  background-color: #ff7125;
}
.recorder .controls .record.orange:hover .text-box,
.recorder .controls .new-recording.orange:hover .text-box {
  border-color: #f15400;
}
.recorder .controls .record.teal,
.recorder .controls .new-recording.teal {
  background: #36CA97;
  border-color: #30b688;
  text-shadow: 0 0 1px #30b688;
}
.recorder .controls .record.teal .text-box,
.recorder .controls .new-recording.teal .text-box {
  border-color: #30b688;
  text-shadow: 0 0 1px #30b688;
}
.recorder .controls .record.teal:hover,
.recorder .controls .new-recording.teal:hover {
  background-color: #42cd9d;
}
.recorder .controls .record.teal:hover .text-box,
.recorder .controls .new-recording.teal:hover .text-box {
  border-color: #52d1a6;
}
.recorder .controls .record.teal:active,
.recorder .controls .new-recording.teal:active {
  background-color: #32be8e;
}
.recorder .controls .record.teal:active .text-box,
.recorder .controls .new-recording.teal:active .text-box {
  border-color: #2eae82;
}
.recorder .controls .record:after,
.recorder .controls .new-recording:after {
  clear: both;
}
.recorder .controls .record:after,
.recorder .controls .new-recording:after,
.recorder .controls .record:before,
.recorder .controls .new-recording:before {
  content: " ";
  display: table;
}
.recorder .controls .record .icon-box,
.recorder .controls .new-recording .icon-box {
  position: relative;
  float: left;
  width: 40px;
  height: 100%;
}
.recorder .controls .record .icon-box svg,
.recorder .controls .new-recording .icon-box svg {
  width: 50%;
  height: 25px;
  margin-left: 25%;
  margin-top: 20%;
}
.recorder .controls .record .icon-box svg use,
.recorder .controls .new-recording .icon-box svg use {
  fill: #fff;
}
.recorder .controls .record .text-box,
.recorder .controls .new-recording .text-box {
  padding: 0 15px 0 0;
  line-height: 32px;
}
.recorder .controls .record.separated .text-box,
.recorder .controls .new-recording.separated .text-box {
  border-left: 1px solid;
  padding: 0 15px;
}
.recorder .controls .record.large .icon-box,
.recorder .controls .new-recording.large .icon-box {
  width: 64px;
  height: 64px;
}
.recorder .controls .record.large .text-box,
.recorder .controls .new-recording.large .text-box {
  height: 64px;
  line-height: 64px;
}
.recorder .controls .record .text-box,
.recorder .controls .new-recording .text-box {
  border-color: #6089ff;
  text-shadow: 0 0 1px #6089ff;
}
.recorder .controls .record:hover,
.recorder .controls .new-recording:hover {
  color: #fff;
  background-color: #89a7ff;
}
.recorder .controls .record:active,
.recorder .controls .new-recording:active {
  background-color: #6a90ff;
}
.recorder .controls .record .label,
.recorder .controls .new-recording .label {
  text-align: left;
}
.recorder .controls .record .icon-box {
  height: 73px;
  width: 73px;
}
.recorder .controls .record .icon-box:after {
  content: '';
  position: absolute;
  left: 22%;
  top: 20%;
  width: 50%;
  height: 50%;
  border: 2px solid #fff;
  border-radius: 50%;
}
.recorder .controls .record .label.stop {
  display: none;
}
.recorder .controls .new-recording {
  display: none;
}
.recorder .controls .pause-icon {
  position: absolute;
  left: 24%;
  top: 22%;
  width: 52%;
  height: 50%;
}
.recorder .controls .pause-icon:before,
.recorder .controls .pause-icon:after {
  border: 2px solid #fff;
  background: none;
}
.recorder .controls .resume {
  padding: 15px;
  background: #bab0ff;
  cursor: pointer;
  border: 1px solid #8d7dff;
  color: #fff;
  text-shadow: 0 0 1px #8d7dff;
  letter-spacing: .05em;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.075);
  display: inline-block;
  border: 1px solid;
  border-radius: 0;
  padding: 0;
  background: #34495e;
  border-color: #2c3e50;
  display: none;
}
.recorder .controls .resume:hover {
  color: #fff;
  background-color: #c7bfff;
}
.recorder .controls .resume:active {
  background-color: #ada1ff;
}
.recorder .controls .resume:focus {
  outline: none;
}
.recorder .controls .resume.small {
  padding: 5px 15px;
}
.recorder .controls .resume.primary {
  background-color: #7a9cff;
  border-color: #6089ff;
  text-shadow: 0 0 1px #6089ff;
  color: #fff;
}
.recorder .controls .resume.primary .text-box {
  border-color: #6089ff;
  text-shadow: 0 0 1px #6089ff;
}
.recorder .controls .resume.primary:hover {
  color: #fff;
  background-color: #89a7ff;
}
.recorder .controls .resume.primary:active {
  background-color: #6a90ff;
}
.recorder .controls .resume.secondary {
  background-color: #bab0ff;
  border-color: #8d7dff;
  text-shadow: 0 0 1px #8d7dff;
  color: #fff;
}
.recorder .controls .resume.secondary .text-box {
  border-color: #8d7dff;
  text-shadow: 0 0 1px #8d7dff;
}
.recorder .controls .resume.secondary:hover {
  color: #fff;
  background-color: #c7bfff;
}
.recorder .controls .resume.secondary:active {
  background-color: #ada1ff;
}
.recorder .controls .resume.green {
  background-color: #48D684;
  border-color: #2bc06a;
  color: #fff;
}
.recorder .controls .resume.green .text-box {
  border-color: #2bc06a;
}
.recorder .controls .resume.green:hover {
  color: #fff;
  background-color: #3cd37c;
}
.recorder .controls .resume.blue {
  background-color: #3498db;
  border-color: #2980b9;
  color: #fff;
}
.recorder .controls .resume.blue .text-box {
  border-color: #2980b9;
}
.recorder .controls .resume.blue:hover {
  color: #fff;
  background-color: #2791d9;
}
.recorder .controls .resume.bright-blue {
  background-color: #bab0ff;
  border-color: #8d7dff;
  color: #fff;
}
.recorder .controls .resume.bright-blue .text-box {
  border-color: #8d7dff;
  text-shadow: 0 0 1px #8d7dff;
}
.recorder .controls .resume.bright-blue:hover {
  color: #fff;
  background-color: #ada1ff;
}
.recorder .controls .resume.bright-blue:hover .text-box {
  border-color: #806eff;
}
.recorder .controls .resume.light-blue {
  background: #2fd9e9;
  border-color: #16bfcf;
}
.recorder .controls .resume.light-blue .text-box {
  border-color: #16bfcf;
  text-shadow: 0 0 1px #16bfcf;
}
.recorder .controls .resume.light-blue:hover {
  background-color: #21d6e8;
}
.recorder .controls .resume.light-blue:hover .text-box {
  border-color: #14b2c1;
}
.recorder .controls .resume.white {
  background: #fff;
  border-color: #ecf0f1;
  color: #7a9cff;
  font-family: "Helvetica Light", Helvetica, sans-serif;
  font-weight: normal;
}
.recorder .controls .resume.white .text-box {
  border-color: #adc2ff;
  text-shadow: 0 0 1px #adc2ff;
}
.recorder .controls .resume.white:hover {
  background-color: #ffffff;
  color: #6a90ff;
}
.recorder .controls .resume.white:hover .text-box {
  border-color: #e3b90d;
}
.recorder .controls .resume.white:hover .icon-box svg use {
  fill: #6a90ff;
}
.recorder .controls .resume.white .icon-box svg use {
  fill: #7a9cff;
}
.recorder .controls .resume.dark-blue {
  background: #34495e;
  border-color: #2c3e50;
}
.recorder .controls .resume.dark-blue .text-box {
  border-color: #2c3e50;
}
.recorder .controls .resume.dark-blue:hover {
  background-color: #2f4154;
}
.recorder .controls .resume.purple {
  background: #9b59b6;
  border-color: #8e44ad;
}
.recorder .controls .resume.purple .text-box {
  border-color: #8e44ad;
}
.recorder .controls .resume.purple:hover {
  background-color: #954eb1;
}
.recorder .controls .resume.fuchsia {
  background: #CF8FE5;
  border-color: #bd66db;
}
.recorder .controls .resume.fuchsia .text-box {
  border-color: #bd66db;
  text-shadow: 0 0 1px #bd66db;
}
.recorder .controls .resume.fuchsia:hover {
  background-color: #ca83e2;
}
.recorder .controls .resume.fuchsia:hover .text-box {
  border-color: #b859d9;
}
.recorder .controls .resume.orange {
  background: #ff7b34;
  border-color: #ff5a01;
}
.recorder .controls .resume.orange .text-box {
  border-color: #ff5a01;
}
.recorder .controls .resume.orange:hover {
  background-color: #ff7125;
}
.recorder .controls .resume.orange:hover .text-box {
  border-color: #f15400;
}
.recorder .controls .resume.teal {
  background: #36CA97;
  border-color: #30b688;
  text-shadow: 0 0 1px #30b688;
}
.recorder .controls .resume.teal .text-box {
  border-color: #30b688;
  text-shadow: 0 0 1px #30b688;
}
.recorder .controls .resume.teal:hover {
  background-color: #42cd9d;
}
.recorder .controls .resume.teal:hover .text-box {
  border-color: #52d1a6;
}
.recorder .controls .resume.teal:active {
  background-color: #32be8e;
}
.recorder .controls .resume.teal:active .text-box {
  border-color: #2eae82;
}
.recorder .controls .resume:after {
  clear: both;
}
.recorder .controls .resume:after,
.recorder .controls .resume:before {
  content: " ";
  display: table;
}
.recorder .controls .resume .icon-box {
  position: relative;
  float: left;
  width: 40px;
  height: 100%;
}
.recorder .controls .resume .icon-box svg {
  width: 50%;
  height: 25px;
  margin-left: 25%;
  margin-top: 20%;
}
.recorder .controls .resume .icon-box svg use {
  fill: #fff;
}
.recorder .controls .resume .text-box {
  padding: 0 15px 0 0;
  line-height: 32px;
}
.recorder .controls .resume.separated .text-box {
  border-left: 1px solid;
  padding: 0 15px;
}
.recorder .controls .resume.large .icon-box {
  width: 64px;
  height: 64px;
}
.recorder .controls .resume.large .text-box {
  height: 64px;
  line-height: 64px;
}
.recorder .controls .resume .text-box {
  border-color: #2c3e50;
}
.recorder .controls .resume:hover {
  background-color: #2f4154;
}
.recorder .controls .download {
  display: none;
  float: left;
  margin-right: 5px;
}
.recorder .recording-visuals {
  position: relative;
  opacity: 0;
  flex: none;
  display: flex;
  padding: 0 25px;
}
.recorder .recording-visuals .duration-block {
  min-width: 215px;
  height: 100%;
  pointer-events: none;
  flex: 0 1 150px;
}
.recorder .recording-visuals .duration-block .timer {
  position: absolute;
  top: 0;
  left: 27px;
  padding: 0 15px;
}
.recorder .recording-visuals .duration-block .timer .digits {
  font-size: 52px;
}
.recorder .recording-visuals .graphics {
  position: relative;
  flex: 1;
  height: 84px;
}
.recorder .recording-visuals .graphics .disabled-notification {
  font-size: 12px;
  color: #fff;
  margin-top: 5px;
  position: relative;
  z-index: 100;
  opacity: .8;
}
.recorder .recording-visuals .graphics .frequency-analyser {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.recorder .recording-visuals .graphics .oscilloscope {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: .5;
}
.recorder.is-recording .recording-visuals .duration-block,
.recorder.is-recording .recording-visuals .oscilloscope {
  opacity: 1;
  pointer-events: all;
}
.recorder.is-recording .record .icon-box:after {
  background: #d44a16;
  border-color: #cc3700;
  animation: blink 1.5s step-start 0s 5;
  -webkit-animation: blink 1.5s step-start 0s 5;
}
.recorder.is-recording .record .label.start {
  display: none;
}
.recorder.is-recording .record .label.stop {
  display: inline;
}
.recorder.finished .record {
  display: none;
}
.recorder.finished .new-recording {
  background-color: #7a9cff;
  border-color: #6089ff;
  text-shadow: 0 0 1px #6089ff;
  color: #fff;
  padding: 0 30px 0 10px;
  border-color: #7a9cff;
  display: flex;
}
.recorder.finished .new-recording .text-box {
  border-color: #6089ff;
  text-shadow: 0 0 1px #6089ff;
}
.recorder.finished .new-recording:hover {
  color: #fff;
  background-color: #89a7ff;
}
.recorder.finished .new-recording:active {
  background-color: #6a90ff;
}
.recorder.finished .new-recording .icon-box.x {
  display: block;
  height: 33px;
  width: 32px;
  margin: 0 20px 0 20px;
  border: 2px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;
}
.recorder.finished .new-recording .icon-box.x:before,
.recorder.finished .new-recording .icon-box.x:after {
  width: 7%;
  height: 55%;
  top: 8px;
  left: 15px;
}
.recorder.finished .new-recording .icon-box.x:before {
  transform: rotate(0deg);
}
.recorder.finished .new-recording .icon-box.x:after {
  transform: rotate(90deg);
}
.recorder.finished.guest .record {
  display: flex;
}
.recorder.finished.guest .new-recording {
  display: none;
}
.timer {
  color: #7a9cff;
  display: flex;
  align-content: space-between;
  align-items: center;
  height: 100%;
}
.timer .digit-block {
  flex: 1 1 28%;
  text-align: center;
}
.timer .digit-block .digits {
  font-size: 60%;
  font-weight: lighter;
  line-height: 95%;
}
.timer .digit-block .label {
  font-size: 9px;
  line-height: 100%;
  text-transform: uppercase;
  color: #93afff;
}
.timer .colon {
  color: #adc2ff;
  text-align: center;
  font-size: 200%;
  flex: 0 0 5%;
  display: flex;
  align-items: center;
  position: relative;
  top: -7%;
}
.invite-form {
  position: relative;
  border: solid #95a5a6;
  border-width: 0 0 1px 0;
  border-top-color: transparent;
  height: 65px;
}
.invite-form .invite-link {
  color: #667273;
  border-radius: 0;
  border: solid #cfd9db;
  border-width: 1px 0 1px 1px;
  padding: 0 30px;
  width: 435px;
  height: 63px;
  line-height: 64px;
  display: block;
  float: left;
}
.invite-form .invite-link:focus {
  outline: none;
}
.invite-form.visible {
  left: 0;
}
.invite-form .ok {
  float: right;
  padding: 15px;
  background: #bab0ff;
  cursor: pointer;
  border: 1px solid #8d7dff;
  text-shadow: 0 0 1px #8d7dff;
  letter-spacing: .05em;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.075);
  display: inline-block;
  border: 1px solid;
  border-radius: 0;
  padding: 0;
  background-color: #bab0ff;
  border-color: #8d7dff;
  color: #fff;
  border-width: 0;
  height: 65px;
  width: 64px;
}
.invite-form .ok:hover {
  color: #fff;
  background-color: #c7bfff;
}
.invite-form .ok:active {
  background-color: #ada1ff;
}
.invite-form .ok:focus {
  outline: none;
}
.invite-form .ok.small {
  padding: 5px 15px;
}
.invite-form .ok.primary {
  background-color: #7a9cff;
  border-color: #6089ff;
  text-shadow: 0 0 1px #6089ff;
  color: #fff;
}
.invite-form .ok.primary .text-box {
  border-color: #6089ff;
  text-shadow: 0 0 1px #6089ff;
}
.invite-form .ok.primary:hover {
  color: #fff;
  background-color: #89a7ff;
}
.invite-form .ok.primary:active {
  background-color: #6a90ff;
}
.invite-form .ok.secondary {
  background-color: #bab0ff;
  border-color: #8d7dff;
  text-shadow: 0 0 1px #8d7dff;
  color: #fff;
}
.invite-form .ok.secondary .text-box {
  border-color: #8d7dff;
  text-shadow: 0 0 1px #8d7dff;
}
.invite-form .ok.secondary:hover {
  color: #fff;
  background-color: #c7bfff;
}
.invite-form .ok.secondary:active {
  background-color: #ada1ff;
}
.invite-form .ok.green {
  background-color: #48D684;
  border-color: #2bc06a;
  color: #fff;
}
.invite-form .ok.green .text-box {
  border-color: #2bc06a;
}
.invite-form .ok.green:hover {
  color: #fff;
  background-color: #3cd37c;
}
.invite-form .ok.blue {
  background-color: #3498db;
  border-color: #2980b9;
  color: #fff;
}
.invite-form .ok.blue .text-box {
  border-color: #2980b9;
}
.invite-form .ok.blue:hover {
  color: #fff;
  background-color: #2791d9;
}
.invite-form .ok.bright-blue {
  background-color: #bab0ff;
  border-color: #8d7dff;
  color: #fff;
}
.invite-form .ok.bright-blue .text-box {
  border-color: #8d7dff;
  text-shadow: 0 0 1px #8d7dff;
}
.invite-form .ok.bright-blue:hover {
  color: #fff;
  background-color: #ada1ff;
}
.invite-form .ok.bright-blue:hover .text-box {
  border-color: #806eff;
}
.invite-form .ok.light-blue {
  background: #2fd9e9;
  border-color: #16bfcf;
}
.invite-form .ok.light-blue .text-box {
  border-color: #16bfcf;
  text-shadow: 0 0 1px #16bfcf;
}
.invite-form .ok.light-blue:hover {
  background-color: #21d6e8;
}
.invite-form .ok.light-blue:hover .text-box {
  border-color: #14b2c1;
}
.invite-form .ok.white {
  background: #fff;
  border-color: #ecf0f1;
  color: #7a9cff;
  font-family: "Helvetica Light", Helvetica, sans-serif;
  font-weight: normal;
}
.invite-form .ok.white .text-box {
  border-color: #adc2ff;
  text-shadow: 0 0 1px #adc2ff;
}
.invite-form .ok.white:hover {
  background-color: #ffffff;
  color: #6a90ff;
}
.invite-form .ok.white:hover .text-box {
  border-color: #e3b90d;
}
.invite-form .ok.white:hover .icon-box svg use {
  fill: #6a90ff;
}
.invite-form .ok.white .icon-box svg use {
  fill: #7a9cff;
}
.invite-form .ok.dark-blue {
  background: #34495e;
  border-color: #2c3e50;
}
.invite-form .ok.dark-blue .text-box {
  border-color: #2c3e50;
}
.invite-form .ok.dark-blue:hover {
  background-color: #2f4154;
}
.invite-form .ok.purple {
  background: #9b59b6;
  border-color: #8e44ad;
}
.invite-form .ok.purple .text-box {
  border-color: #8e44ad;
}
.invite-form .ok.purple:hover {
  background-color: #954eb1;
}
.invite-form .ok.fuchsia {
  background: #CF8FE5;
  border-color: #bd66db;
}
.invite-form .ok.fuchsia .text-box {
  border-color: #bd66db;
  text-shadow: 0 0 1px #bd66db;
}
.invite-form .ok.fuchsia:hover {
  background-color: #ca83e2;
}
.invite-form .ok.fuchsia:hover .text-box {
  border-color: #b859d9;
}
.invite-form .ok.orange {
  background: #ff7b34;
  border-color: #ff5a01;
}
.invite-form .ok.orange .text-box {
  border-color: #ff5a01;
}
.invite-form .ok.orange:hover {
  background-color: #ff7125;
}
.invite-form .ok.orange:hover .text-box {
  border-color: #f15400;
}
.invite-form .ok.teal {
  background: #36CA97;
  border-color: #30b688;
  text-shadow: 0 0 1px #30b688;
}
.invite-form .ok.teal .text-box {
  border-color: #30b688;
  text-shadow: 0 0 1px #30b688;
}
.invite-form .ok.teal:hover {
  background-color: #42cd9d;
}
.invite-form .ok.teal:hover .text-box {
  border-color: #52d1a6;
}
.invite-form .ok.teal:active {
  background-color: #32be8e;
}
.invite-form .ok.teal:active .text-box {
  border-color: #2eae82;
}
.invite-form .ok:after {
  clear: both;
}
.invite-form .ok:after,
.invite-form .ok:before {
  content: " ";
  display: table;
}
.invite-form .ok .icon-box {
  position: relative;
  float: left;
  width: 40px;
  height: 100%;
}
.invite-form .ok .icon-box svg {
  width: 50%;
  height: 25px;
  margin-left: 25%;
  margin-top: 20%;
}
.invite-form .ok .icon-box svg use {
  fill: #fff;
}
.invite-form .ok .text-box {
  padding: 0 15px 0 0;
  line-height: 32px;
}
.invite-form .ok.separated .text-box {
  border-left: 1px solid;
  padding: 0 15px;
}
.invite-form .ok.large .icon-box {
  width: 64px;
  height: 64px;
}
.invite-form .ok.large .text-box {
  height: 64px;
  line-height: 64px;
}
.invite-form .ok .text-box {
  border-color: #8d7dff;
  text-shadow: 0 0 1px #8d7dff;
}
.invite-form .ok:hover {
  color: #fff;
  background-color: #ada1ff;
}
.invite-form .ok:hover .text-box {
  border-color: #806eff;
}
.invite-form .ok .icon-box .icon {
  width: 104%;
  margin-left: 28%;
  height: 40px;
  margin-top: 12px;
}
.tip {
  color: #bab0ff;
  font-size: .75em;
  padding-left: 15px;
  font-weight: normal;
  background: url('/media/images/info.svg') no-repeat;
}
.audio-settings .setting {
  margin-bottom: 30px;
}
.audio-settings .label {
  margin: 10px 0 10px 0;
}
.audio-settings .label .tip {
  margin-left: 15px;
}
.audio-settings .submit {
  padding: 15px;
  background: #bab0ff;
  cursor: pointer;
  display: inline-block;
  border: 1px solid #8d7dff;
  text-shadow: 0 0 1px #8d7dff;
  letter-spacing: .05em;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.075);
  background-color: #7a9cff;
  border-color: #6089ff;
  text-shadow: 0 0 1px #6089ff;
  color: #fff;
  width: 100%;
}
.audio-settings .submit:hover {
  color: #fff;
  background-color: #c7bfff;
}
.audio-settings .submit:active {
  background-color: #ada1ff;
}
.audio-settings .submit:focus {
  outline: none;
}
.audio-settings .submit.small {
  padding: 5px 15px;
}
.audio-settings .submit.primary {
  background-color: #7a9cff;
  border-color: #6089ff;
  text-shadow: 0 0 1px #6089ff;
  color: #fff;
}
.audio-settings .submit.primary .text-box {
  border-color: #6089ff;
  text-shadow: 0 0 1px #6089ff;
}
.audio-settings .submit.primary:hover {
  color: #fff;
  background-color: #89a7ff;
}
.audio-settings .submit.primary:active {
  background-color: #6a90ff;
}
.audio-settings .submit.secondary {
  background-color: #bab0ff;
  border-color: #8d7dff;
  text-shadow: 0 0 1px #8d7dff;
  color: #fff;
}
.audio-settings .submit.secondary .text-box {
  border-color: #8d7dff;
  text-shadow: 0 0 1px #8d7dff;
}
.audio-settings .submit.secondary:hover {
  color: #fff;
  background-color: #c7bfff;
}
.audio-settings .submit.secondary:active {
  background-color: #ada1ff;
}
.audio-settings .submit.green {
  background-color: #48D684;
  border-color: #2bc06a;
  color: #fff;
}
.audio-settings .submit.green .text-box {
  border-color: #2bc06a;
}
.audio-settings .submit.green:hover {
  color: #fff;
  background-color: #3cd37c;
}
.audio-settings .submit.blue {
  background-color: #3498db;
  border-color: #2980b9;
  color: #fff;
}
.audio-settings .submit.blue .text-box {
  border-color: #2980b9;
}
.audio-settings .submit.blue:hover {
  color: #fff;
  background-color: #2791d9;
}
.audio-settings .submit.bright-blue {
  background-color: #bab0ff;
  border-color: #8d7dff;
  color: #fff;
}
.audio-settings .submit.bright-blue .text-box {
  border-color: #8d7dff;
  text-shadow: 0 0 1px #8d7dff;
}
.audio-settings .submit.bright-blue:hover {
  color: #fff;
  background-color: #ada1ff;
}
.audio-settings .submit.bright-blue:hover .text-box {
  border-color: #806eff;
}
.audio-settings .submit.light-blue {
  background: #2fd9e9;
  border-color: #16bfcf;
}
.audio-settings .submit.light-blue .text-box {
  border-color: #16bfcf;
  text-shadow: 0 0 1px #16bfcf;
}
.audio-settings .submit.light-blue:hover {
  background-color: #21d6e8;
}
.audio-settings .submit.light-blue:hover .text-box {
  border-color: #14b2c1;
}
.audio-settings .submit.white {
  background: #fff;
  border-color: #ecf0f1;
  color: #7a9cff;
  font-family: "Helvetica Light", Helvetica, sans-serif;
  font-weight: normal;
}
.audio-settings .submit.white .text-box {
  border-color: #adc2ff;
  text-shadow: 0 0 1px #adc2ff;
}
.audio-settings .submit.white:hover {
  background-color: #ffffff;
  color: #6a90ff;
}
.audio-settings .submit.white:hover .text-box {
  border-color: #e3b90d;
}
.audio-settings .submit.white:hover .icon-box svg use {
  fill: #6a90ff;
}
.audio-settings .submit.white .icon-box svg use {
  fill: #7a9cff;
}
.audio-settings .submit.dark-blue {
  background: #34495e;
  border-color: #2c3e50;
}
.audio-settings .submit.dark-blue .text-box {
  border-color: #2c3e50;
}
.audio-settings .submit.dark-blue:hover {
  background-color: #2f4154;
}
.audio-settings .submit.purple {
  background: #9b59b6;
  border-color: #8e44ad;
}
.audio-settings .submit.purple .text-box {
  border-color: #8e44ad;
}
.audio-settings .submit.purple:hover {
  background-color: #954eb1;
}
.audio-settings .submit.fuchsia {
  background: #CF8FE5;
  border-color: #bd66db;
}
.audio-settings .submit.fuchsia .text-box {
  border-color: #bd66db;
  text-shadow: 0 0 1px #bd66db;
}
.audio-settings .submit.fuchsia:hover {
  background-color: #ca83e2;
}
.audio-settings .submit.fuchsia:hover .text-box {
  border-color: #b859d9;
}
.audio-settings .submit.orange {
  background: #ff7b34;
  border-color: #ff5a01;
}
.audio-settings .submit.orange .text-box {
  border-color: #ff5a01;
}
.audio-settings .submit.orange:hover {
  background-color: #ff7125;
}
.audio-settings .submit.orange:hover .text-box {
  border-color: #f15400;
}
.audio-settings .submit.teal {
  background: #36CA97;
  border-color: #30b688;
  text-shadow: 0 0 1px #30b688;
}
.audio-settings .submit.teal .text-box {
  border-color: #30b688;
  text-shadow: 0 0 1px #30b688;
}
.audio-settings .submit.teal:hover {
  background-color: #42cd9d;
}
.audio-settings .submit.teal:hover .text-box {
  border-color: #52d1a6;
}
.audio-settings .submit.teal:active {
  background-color: #32be8e;
}
.audio-settings .submit.teal:active .text-box {
  border-color: #2eae82;
}
.audio-settings .submit .text-box {
  border-color: #6089ff;
  text-shadow: 0 0 1px #6089ff;
}
.audio-settings .submit:hover {
  color: #fff;
  background-color: #89a7ff;
}
.audio-settings .submit:active {
  background-color: #6a90ff;
}
.media-device-select {
  flex: 0 1 250px;
  position: relative;
}
.media-device-select .audio-input-select {
  background: url('/media/images/mic-unmuted.svg') no-repeat 5px center, url('/media/images/downarrow.png') 95% center no-repeat, linear-gradient(rgba(255, 255, 255, 0), #fcfbff);
  background-size: 55px, 15px, contain;
}
.media-device-select .audio-output-select {
  background: url('/media/images/headphones.svg') no-repeat 15px center, url('/media/images/downarrow.png') 95% center no-repeat, linear-gradient(rgba(255, 255, 255, 0), #fcfbff);
  background-size: 35px, 15px, contain;
}
.media-device-select .activate-mic {
  padding: 15px;
  background: #bab0ff;
  cursor: pointer;
  border: 1px solid #8d7dff;
  text-shadow: 0 0 1px #8d7dff;
  letter-spacing: .05em;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.075);
  display: inline-block;
  border: 1px solid;
  border-radius: 0;
  padding: 0;
  background-color: #bab0ff;
  border-color: #8d7dff;
  color: #fff;
}
.media-device-select .activate-mic:hover {
  color: #fff;
  background-color: #c7bfff;
}
.media-device-select .activate-mic:active {
  background-color: #ada1ff;
}
.media-device-select .activate-mic:focus {
  outline: none;
}
.media-device-select .activate-mic.small {
  padding: 5px 15px;
}
.media-device-select .activate-mic.primary {
  background-color: #7a9cff;
  border-color: #6089ff;
  text-shadow: 0 0 1px #6089ff;
  color: #fff;
}
.media-device-select .activate-mic.primary .text-box {
  border-color: #6089ff;
  text-shadow: 0 0 1px #6089ff;
}
.media-device-select .activate-mic.primary:hover {
  color: #fff;
  background-color: #89a7ff;
}
.media-device-select .activate-mic.primary:active {
  background-color: #6a90ff;
}
.media-device-select .activate-mic.secondary {
  background-color: #bab0ff;
  border-color: #8d7dff;
  text-shadow: 0 0 1px #8d7dff;
  color: #fff;
}
.media-device-select .activate-mic.secondary .text-box {
  border-color: #8d7dff;
  text-shadow: 0 0 1px #8d7dff;
}
.media-device-select .activate-mic.secondary:hover {
  color: #fff;
  background-color: #c7bfff;
}
.media-device-select .activate-mic.secondary:active {
  background-color: #ada1ff;
}
.media-device-select .activate-mic.green {
  background-color: #48D684;
  border-color: #2bc06a;
  color: #fff;
}
.media-device-select .activate-mic.green .text-box {
  border-color: #2bc06a;
}
.media-device-select .activate-mic.green:hover {
  color: #fff;
  background-color: #3cd37c;
}
.media-device-select .activate-mic.blue {
  background-color: #3498db;
  border-color: #2980b9;
  color: #fff;
}
.media-device-select .activate-mic.blue .text-box {
  border-color: #2980b9;
}
.media-device-select .activate-mic.blue:hover {
  color: #fff;
  background-color: #2791d9;
}
.media-device-select .activate-mic.bright-blue {
  background-color: #bab0ff;
  border-color: #8d7dff;
  color: #fff;
}
.media-device-select .activate-mic.bright-blue .text-box {
  border-color: #8d7dff;
  text-shadow: 0 0 1px #8d7dff;
}
.media-device-select .activate-mic.bright-blue:hover {
  color: #fff;
  background-color: #ada1ff;
}
.media-device-select .activate-mic.bright-blue:hover .text-box {
  border-color: #806eff;
}
.media-device-select .activate-mic.light-blue {
  background: #2fd9e9;
  border-color: #16bfcf;
}
.media-device-select .activate-mic.light-blue .text-box {
  border-color: #16bfcf;
  text-shadow: 0 0 1px #16bfcf;
}
.media-device-select .activate-mic.light-blue:hover {
  background-color: #21d6e8;
}
.media-device-select .activate-mic.light-blue:hover .text-box {
  border-color: #14b2c1;
}
.media-device-select .activate-mic.white {
  background: #fff;
  border-color: #ecf0f1;
  color: #7a9cff;
  font-family: "Helvetica Light", Helvetica, sans-serif;
  font-weight: normal;
}
.media-device-select .activate-mic.white .text-box {
  border-color: #adc2ff;
  text-shadow: 0 0 1px #adc2ff;
}
.media-device-select .activate-mic.white:hover {
  background-color: #ffffff;
  color: #6a90ff;
}
.media-device-select .activate-mic.white:hover .text-box {
  border-color: #e3b90d;
}
.media-device-select .activate-mic.white:hover .icon-box svg use {
  fill: #6a90ff;
}
.media-device-select .activate-mic.white .icon-box svg use {
  fill: #7a9cff;
}
.media-device-select .activate-mic.dark-blue {
  background: #34495e;
  border-color: #2c3e50;
}
.media-device-select .activate-mic.dark-blue .text-box {
  border-color: #2c3e50;
}
.media-device-select .activate-mic.dark-blue:hover {
  background-color: #2f4154;
}
.media-device-select .activate-mic.purple {
  background: #9b59b6;
  border-color: #8e44ad;
}
.media-device-select .activate-mic.purple .text-box {
  border-color: #8e44ad;
}
.media-device-select .activate-mic.purple:hover {
  background-color: #954eb1;
}
.media-device-select .activate-mic.fuchsia {
  background: #CF8FE5;
  border-color: #bd66db;
}
.media-device-select .activate-mic.fuchsia .text-box {
  border-color: #bd66db;
  text-shadow: 0 0 1px #bd66db;
}
.media-device-select .activate-mic.fuchsia:hover {
  background-color: #ca83e2;
}
.media-device-select .activate-mic.fuchsia:hover .text-box {
  border-color: #b859d9;
}
.media-device-select .activate-mic.orange {
  background: #ff7b34;
  border-color: #ff5a01;
}
.media-device-select .activate-mic.orange .text-box {
  border-color: #ff5a01;
}
.media-device-select .activate-mic.orange:hover {
  background-color: #ff7125;
}
.media-device-select .activate-mic.orange:hover .text-box {
  border-color: #f15400;
}
.media-device-select .activate-mic.teal {
  background: #36CA97;
  border-color: #30b688;
  text-shadow: 0 0 1px #30b688;
}
.media-device-select .activate-mic.teal .text-box {
  border-color: #30b688;
  text-shadow: 0 0 1px #30b688;
}
.media-device-select .activate-mic.teal:hover {
  background-color: #42cd9d;
}
.media-device-select .activate-mic.teal:hover .text-box {
  border-color: #52d1a6;
}
.media-device-select .activate-mic.teal:active {
  background-color: #32be8e;
}
.media-device-select .activate-mic.teal:active .text-box {
  border-color: #2eae82;
}
.media-device-select .activate-mic:after {
  clear: both;
}
.media-device-select .activate-mic:after,
.media-device-select .activate-mic:before {
  content: " ";
  display: table;
}
.media-device-select .activate-mic .icon-box {
  position: relative;
  float: left;
  width: 40px;
  height: 100%;
}
.media-device-select .activate-mic .icon-box svg {
  width: 50%;
  height: 25px;
  margin-left: 25%;
  margin-top: 20%;
}
.media-device-select .activate-mic .icon-box svg use {
  fill: #fff;
}
.media-device-select .activate-mic .text-box {
  padding: 0 15px 0 0;
  line-height: 32px;
}
.media-device-select .activate-mic.separated .text-box {
  border-left: 1px solid;
  padding: 0 15px;
}
.media-device-select .activate-mic.large .icon-box {
  width: 64px;
  height: 64px;
}
.media-device-select .activate-mic.large .text-box {
  height: 64px;
  line-height: 64px;
}
.media-device-select .activate-mic .icon-box {
  width: 64px;
  height: 64px;
}
.media-device-select .activate-mic .text-box {
  height: 64px;
  line-height: 64px;
}
.media-device-select .activate-mic .text-box {
  border-color: #8d7dff;
  text-shadow: 0 0 1px #8d7dff;
}
.media-device-select .activate-mic:hover {
  color: #fff;
  background-color: #ada1ff;
}
.media-device-select .activate-mic:hover .text-box {
  border-color: #806eff;
}
.media-device-select .activate-mic .icon-box .icon {
  width: 80%;
  height: 45px;
  margin-left: 12%;
  margin-top: 14%;
}
.media-device-select .activate-mic .text-box {
  width: 233px;
}
.voip-setting {
  flex: 0 0 65px;
  color: #667273;
  padding: 0;
}
.voip-setting select {
  background: url('/media/images/cloud.svg') no-repeat 15px center, url('/media/images/downarrow.png') 95% center no-repeat, linear-gradient(rgba(255, 255, 255, 0), #fcfbff);
  background-size: 35px, 15px, contain;
}
.monitor-setting {
  flex: 0 0 65px;
  color: #667273;
  padding: 0;
}
.monitor-setting select {
  background: url('/media/images/voip-head.svg') no-repeat 15px center, url('/media/images/downarrow.png') 95% center no-repeat, linear-gradient(rgba(255, 255, 255, 0), #fcfbff);
  background-size: 35px, 15px, contain;
}
.echo-cancellation-setting {
  flex: 0 0 65px;
  color: #667273;
  padding: 0;
}
.echo-cancellation-setting select {
  background: url('/media/images/echo.svg') no-repeat 15px center, url('/media/images/downarrow.png') 95% center no-repeat, linear-gradient(rgba(255, 255, 255, 0), #fcfbff);
  background-size: 35px, 15px, contain;
}
.recording {
  padding: 0 30px 0 0;
}
.recording .tracks,
.recording .postproductions,
.recording .footnotes {
  position: relative;
  margin: 30px 0 30px 0px;
  border: 1px solid #ecf0f1;
  padding: 30px 0 0 30px;
  flex: 1 1 auto;
}
.recording .tracks:after,
.recording .postproductions:after,
.recording .footnotes:after {
  clear: both;
}
.recording .tracks:after,
.recording .postproductions:after,
.recording .footnotes:after,
.recording .tracks:before,
.recording .postproductions:before,
.recording .footnotes:before {
  content: " ";
  display: table;
}
.recording .tracks:before,
.recording .postproductions:before,
.recording .footnotes:before {
  position: absolute;
  top: -10px;
  left: 30px;
  background: #fff;
  padding: 0 15px;
  font-size: 20px;
}
.recording .tracks:empty,
.recording .postproductions:empty,
.recording .footnotes:empty {
  display: none;
}
.recording .tracks:before {
  content: 'Solo Tracks';
}
.recording .postproductions:before {
  content: 'Postproductions';
}
.recording .footnotes {
  padding-right: 30px;
}
.recording .footnotes:before {
  content: 'Timeline Footnotes';
}
.postproduction-config {
  width: 675px;
}
.postproduction-config.out-of-time .time-stats .bar {
  background-color: #ff4500;
}
.postproduction-config.out-of-time .out-of-time {
  display: block;
}
.postproduction-config.out-of-time .run-paid-postproduction {
  display: block;
}
.postproduction-config.out-of-time .run-postproduction {
  display: none;
}
.postproduction-config .content h3 {
  border-bottom: none;
  margin-top: 0;
}
.postproduction-config .tracks {
  overflow: hidden;
  margin-bottom: 15px;
}
.postproduction-config .tracks .track-username {
  float: left;
  width: 100%;
  margin-bottom: 5px;
}
.postproduction-config .tracks .track {
  margin: 0 15px 15px 0;
}
.postproduction-config .tracks .track:nth-child(even) {
  margin-right: 0;
}
.postproduction-config .options {
  display: none;
}
.postproduction-config .options:after {
  clear: both;
}
.postproduction-config .options:after,
.postproduction-config .options:before {
  content: " ";
  display: table;
}
.postproduction-config .options .option {
  float: left;
  margin-right: 15px;
}
.postproduction-config .options .option.loudness-target {
  float: none;
  margin-bottom: 15px;
}
.postproduction-config .options .option.loudness-target label {
  display: block;
}
.postproduction-config .advanced-options {
  padding: 15px;
  background: #bab0ff;
  cursor: pointer;
  display: inline-block;
  border: 1px solid #8d7dff;
  letter-spacing: .05em;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.075);
  padding: 5px 15px;
  background-color: #bab0ff;
  border-color: #8d7dff;
  text-shadow: 0 0 1px #8d7dff;
  color: #fff;
}
.postproduction-config .advanced-options:hover {
  color: #fff;
  background-color: #c7bfff;
}
.postproduction-config .advanced-options:active {
  background-color: #ada1ff;
}
.postproduction-config .advanced-options:focus {
  outline: none;
}
.postproduction-config .advanced-options.small {
  padding: 5px 15px;
}
.postproduction-config .advanced-options.primary {
  background-color: #7a9cff;
  border-color: #6089ff;
  text-shadow: 0 0 1px #6089ff;
  color: #fff;
}
.postproduction-config .advanced-options.primary .text-box {
  border-color: #6089ff;
  text-shadow: 0 0 1px #6089ff;
}
.postproduction-config .advanced-options.primary:hover {
  color: #fff;
  background-color: #89a7ff;
}
.postproduction-config .advanced-options.primary:active {
  background-color: #6a90ff;
}
.postproduction-config .advanced-options.secondary {
  background-color: #bab0ff;
  border-color: #8d7dff;
  text-shadow: 0 0 1px #8d7dff;
  color: #fff;
}
.postproduction-config .advanced-options.secondary .text-box {
  border-color: #8d7dff;
  text-shadow: 0 0 1px #8d7dff;
}
.postproduction-config .advanced-options.secondary:hover {
  color: #fff;
  background-color: #c7bfff;
}
.postproduction-config .advanced-options.secondary:active {
  background-color: #ada1ff;
}
.postproduction-config .advanced-options.green {
  background-color: #48D684;
  border-color: #2bc06a;
  color: #fff;
}
.postproduction-config .advanced-options.green .text-box {
  border-color: #2bc06a;
}
.postproduction-config .advanced-options.green:hover {
  color: #fff;
  background-color: #3cd37c;
}
.postproduction-config .advanced-options.blue {
  background-color: #3498db;
  border-color: #2980b9;
  color: #fff;
}
.postproduction-config .advanced-options.blue .text-box {
  border-color: #2980b9;
}
.postproduction-config .advanced-options.blue:hover {
  color: #fff;
  background-color: #2791d9;
}
.postproduction-config .advanced-options.bright-blue {
  background-color: #bab0ff;
  border-color: #8d7dff;
  color: #fff;
}
.postproduction-config .advanced-options.bright-blue .text-box {
  border-color: #8d7dff;
  text-shadow: 0 0 1px #8d7dff;
}
.postproduction-config .advanced-options.bright-blue:hover {
  color: #fff;
  background-color: #ada1ff;
}
.postproduction-config .advanced-options.bright-blue:hover .text-box {
  border-color: #806eff;
}
.postproduction-config .advanced-options.light-blue {
  background: #2fd9e9;
  border-color: #16bfcf;
}
.postproduction-config .advanced-options.light-blue .text-box {
  border-color: #16bfcf;
  text-shadow: 0 0 1px #16bfcf;
}
.postproduction-config .advanced-options.light-blue:hover {
  background-color: #21d6e8;
}
.postproduction-config .advanced-options.light-blue:hover .text-box {
  border-color: #14b2c1;
}
.postproduction-config .advanced-options.white {
  background: #fff;
  border-color: #ecf0f1;
  color: #7a9cff;
  font-family: "Helvetica Light", Helvetica, sans-serif;
  font-weight: normal;
}
.postproduction-config .advanced-options.white .text-box {
  border-color: #adc2ff;
  text-shadow: 0 0 1px #adc2ff;
}
.postproduction-config .advanced-options.white:hover {
  background-color: #ffffff;
  color: #6a90ff;
}
.postproduction-config .advanced-options.white:hover .text-box {
  border-color: #e3b90d;
}
.postproduction-config .advanced-options.white:hover .icon-box svg use {
  fill: #6a90ff;
}
.postproduction-config .advanced-options.white .icon-box svg use {
  fill: #7a9cff;
}
.postproduction-config .advanced-options.dark-blue {
  background: #34495e;
  border-color: #2c3e50;
}
.postproduction-config .advanced-options.dark-blue .text-box {
  border-color: #2c3e50;
}
.postproduction-config .advanced-options.dark-blue:hover {
  background-color: #2f4154;
}
.postproduction-config .advanced-options.purple {
  background: #9b59b6;
  border-color: #8e44ad;
}
.postproduction-config .advanced-options.purple .text-box {
  border-color: #8e44ad;
}
.postproduction-config .advanced-options.purple:hover {
  background-color: #954eb1;
}
.postproduction-config .advanced-options.fuchsia {
  background: #CF8FE5;
  border-color: #bd66db;
}
.postproduction-config .advanced-options.fuchsia .text-box {
  border-color: #bd66db;
  text-shadow: 0 0 1px #bd66db;
}
.postproduction-config .advanced-options.fuchsia:hover {
  background-color: #ca83e2;
}
.postproduction-config .advanced-options.fuchsia:hover .text-box {
  border-color: #b859d9;
}
.postproduction-config .advanced-options.orange {
  background: #ff7b34;
  border-color: #ff5a01;
}
.postproduction-config .advanced-options.orange .text-box {
  border-color: #ff5a01;
}
.postproduction-config .advanced-options.orange:hover {
  background-color: #ff7125;
}
.postproduction-config .advanced-options.orange:hover .text-box {
  border-color: #f15400;
}
.postproduction-config .advanced-options.teal {
  background: #36CA97;
  border-color: #30b688;
  text-shadow: 0 0 1px #30b688;
}
.postproduction-config .advanced-options.teal .text-box {
  border-color: #30b688;
  text-shadow: 0 0 1px #30b688;
}
.postproduction-config .advanced-options.teal:hover {
  background-color: #42cd9d;
}
.postproduction-config .advanced-options.teal:hover .text-box {
  border-color: #52d1a6;
}
.postproduction-config .advanced-options.teal:active {
  background-color: #32be8e;
}
.postproduction-config .advanced-options.teal:active .text-box {
  border-color: #2eae82;
}
.postproduction-config .advanced-options .text-box {
  border-color: #8d7dff;
  text-shadow: 0 0 1px #8d7dff;
}
.postproduction-config .advanced-options:hover {
  color: #fff;
  background-color: #c7bfff;
}
.postproduction-config .advanced-options:active {
  background-color: #ada1ff;
}
.postproduction-config .time-stats {
  font-size: 12px;
  padding: 30px 0 0 0;
}
.postproduction-config .time-stats .out-of-time {
  margin-top: 15px;
  font-size: 14px;
}
.postproduction-config .time-stats .time-stat {
  position: relative;
  padding: 5px 15px;
  border-bottom: 1px solid #fff;
}
.postproduction-config .time-stats .bar {
  box-sizing: border-box;
  padding: 5px 0 5px 15px;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  overflow: hidden;
  white-space: nowrap;
  background: #48D684;
  color: #fff;
}
.postproduction-config .out-of-time {
  display: none;
}
.postproduction-config .run-postproduction,
.postproduction-config .buy-more-time {
  background: #bab0ff;
  cursor: pointer;
  border: 1px solid #8d7dff;
  text-shadow: 0 0 1px #8d7dff;
  letter-spacing: .05em;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.075);
  display: inline-block;
  border: 1px solid;
  border-radius: 0;
  padding: 0;
  background-color: #7a9cff;
  border-color: #6089ff;
  text-shadow: 0 0 1px #6089ff;
  color: #fff;
  display: block;
  padding: 15px;
  margin-top: 30px;
}
.postproduction-config .run-postproduction:hover,
.postproduction-config .buy-more-time:hover {
  color: #fff;
  background-color: #c7bfff;
}
.postproduction-config .run-postproduction:active,
.postproduction-config .buy-more-time:active {
  background-color: #ada1ff;
}
.postproduction-config .run-postproduction:focus,
.postproduction-config .buy-more-time:focus {
  outline: none;
}
.postproduction-config .run-postproduction.small,
.postproduction-config .buy-more-time.small {
  padding: 5px 15px;
}
.postproduction-config .run-postproduction.primary,
.postproduction-config .buy-more-time.primary {
  background-color: #7a9cff;
  border-color: #6089ff;
  text-shadow: 0 0 1px #6089ff;
  color: #fff;
}
.postproduction-config .run-postproduction.primary .text-box,
.postproduction-config .buy-more-time.primary .text-box {
  border-color: #6089ff;
  text-shadow: 0 0 1px #6089ff;
}
.postproduction-config .run-postproduction.primary:hover,
.postproduction-config .buy-more-time.primary:hover {
  color: #fff;
  background-color: #89a7ff;
}
.postproduction-config .run-postproduction.primary:active,
.postproduction-config .buy-more-time.primary:active {
  background-color: #6a90ff;
}
.postproduction-config .run-postproduction.secondary,
.postproduction-config .buy-more-time.secondary {
  background-color: #bab0ff;
  border-color: #8d7dff;
  text-shadow: 0 0 1px #8d7dff;
  color: #fff;
}
.postproduction-config .run-postproduction.secondary .text-box,
.postproduction-config .buy-more-time.secondary .text-box {
  border-color: #8d7dff;
  text-shadow: 0 0 1px #8d7dff;
}
.postproduction-config .run-postproduction.secondary:hover,
.postproduction-config .buy-more-time.secondary:hover {
  color: #fff;
  background-color: #c7bfff;
}
.postproduction-config .run-postproduction.secondary:active,
.postproduction-config .buy-more-time.secondary:active {
  background-color: #ada1ff;
}
.postproduction-config .run-postproduction.green,
.postproduction-config .buy-more-time.green {
  background-color: #48D684;
  border-color: #2bc06a;
  color: #fff;
}
.postproduction-config .run-postproduction.green .text-box,
.postproduction-config .buy-more-time.green .text-box {
  border-color: #2bc06a;
}
.postproduction-config .run-postproduction.green:hover,
.postproduction-config .buy-more-time.green:hover {
  color: #fff;
  background-color: #3cd37c;
}
.postproduction-config .run-postproduction.blue,
.postproduction-config .buy-more-time.blue {
  background-color: #3498db;
  border-color: #2980b9;
  color: #fff;
}
.postproduction-config .run-postproduction.blue .text-box,
.postproduction-config .buy-more-time.blue .text-box {
  border-color: #2980b9;
}
.postproduction-config .run-postproduction.blue:hover,
.postproduction-config .buy-more-time.blue:hover {
  color: #fff;
  background-color: #2791d9;
}
.postproduction-config .run-postproduction.bright-blue,
.postproduction-config .buy-more-time.bright-blue {
  background-color: #bab0ff;
  border-color: #8d7dff;
  color: #fff;
}
.postproduction-config .run-postproduction.bright-blue .text-box,
.postproduction-config .buy-more-time.bright-blue .text-box {
  border-color: #8d7dff;
  text-shadow: 0 0 1px #8d7dff;
}
.postproduction-config .run-postproduction.bright-blue:hover,
.postproduction-config .buy-more-time.bright-blue:hover {
  color: #fff;
  background-color: #ada1ff;
}
.postproduction-config .run-postproduction.bright-blue:hover .text-box,
.postproduction-config .buy-more-time.bright-blue:hover .text-box {
  border-color: #806eff;
}
.postproduction-config .run-postproduction.light-blue,
.postproduction-config .buy-more-time.light-blue {
  background: #2fd9e9;
  border-color: #16bfcf;
}
.postproduction-config .run-postproduction.light-blue .text-box,
.postproduction-config .buy-more-time.light-blue .text-box {
  border-color: #16bfcf;
  text-shadow: 0 0 1px #16bfcf;
}
.postproduction-config .run-postproduction.light-blue:hover,
.postproduction-config .buy-more-time.light-blue:hover {
  background-color: #21d6e8;
}
.postproduction-config .run-postproduction.light-blue:hover .text-box,
.postproduction-config .buy-more-time.light-blue:hover .text-box {
  border-color: #14b2c1;
}
.postproduction-config .run-postproduction.white,
.postproduction-config .buy-more-time.white {
  background: #fff;
  border-color: #ecf0f1;
  color: #7a9cff;
  font-family: "Helvetica Light", Helvetica, sans-serif;
  font-weight: normal;
}
.postproduction-config .run-postproduction.white .text-box,
.postproduction-config .buy-more-time.white .text-box {
  border-color: #adc2ff;
  text-shadow: 0 0 1px #adc2ff;
}
.postproduction-config .run-postproduction.white:hover,
.postproduction-config .buy-more-time.white:hover {
  background-color: #ffffff;
  color: #6a90ff;
}
.postproduction-config .run-postproduction.white:hover .text-box,
.postproduction-config .buy-more-time.white:hover .text-box {
  border-color: #e3b90d;
}
.postproduction-config .run-postproduction.white:hover .icon-box svg use,
.postproduction-config .buy-more-time.white:hover .icon-box svg use {
  fill: #6a90ff;
}
.postproduction-config .run-postproduction.white .icon-box svg use,
.postproduction-config .buy-more-time.white .icon-box svg use {
  fill: #7a9cff;
}
.postproduction-config .run-postproduction.dark-blue,
.postproduction-config .buy-more-time.dark-blue {
  background: #34495e;
  border-color: #2c3e50;
}
.postproduction-config .run-postproduction.dark-blue .text-box,
.postproduction-config .buy-more-time.dark-blue .text-box {
  border-color: #2c3e50;
}
.postproduction-config .run-postproduction.dark-blue:hover,
.postproduction-config .buy-more-time.dark-blue:hover {
  background-color: #2f4154;
}
.postproduction-config .run-postproduction.purple,
.postproduction-config .buy-more-time.purple {
  background: #9b59b6;
  border-color: #8e44ad;
}
.postproduction-config .run-postproduction.purple .text-box,
.postproduction-config .buy-more-time.purple .text-box {
  border-color: #8e44ad;
}
.postproduction-config .run-postproduction.purple:hover,
.postproduction-config .buy-more-time.purple:hover {
  background-color: #954eb1;
}
.postproduction-config .run-postproduction.fuchsia,
.postproduction-config .buy-more-time.fuchsia {
  background: #CF8FE5;
  border-color: #bd66db;
}
.postproduction-config .run-postproduction.fuchsia .text-box,
.postproduction-config .buy-more-time.fuchsia .text-box {
  border-color: #bd66db;
  text-shadow: 0 0 1px #bd66db;
}
.postproduction-config .run-postproduction.fuchsia:hover,
.postproduction-config .buy-more-time.fuchsia:hover {
  background-color: #ca83e2;
}
.postproduction-config .run-postproduction.fuchsia:hover .text-box,
.postproduction-config .buy-more-time.fuchsia:hover .text-box {
  border-color: #b859d9;
}
.postproduction-config .run-postproduction.orange,
.postproduction-config .buy-more-time.orange {
  background: #ff7b34;
  border-color: #ff5a01;
}
.postproduction-config .run-postproduction.orange .text-box,
.postproduction-config .buy-more-time.orange .text-box {
  border-color: #ff5a01;
}
.postproduction-config .run-postproduction.orange:hover,
.postproduction-config .buy-more-time.orange:hover {
  background-color: #ff7125;
}
.postproduction-config .run-postproduction.orange:hover .text-box,
.postproduction-config .buy-more-time.orange:hover .text-box {
  border-color: #f15400;
}
.postproduction-config .run-postproduction.teal,
.postproduction-config .buy-more-time.teal {
  background: #36CA97;
  border-color: #30b688;
  text-shadow: 0 0 1px #30b688;
}
.postproduction-config .run-postproduction.teal .text-box,
.postproduction-config .buy-more-time.teal .text-box {
  border-color: #30b688;
  text-shadow: 0 0 1px #30b688;
}
.postproduction-config .run-postproduction.teal:hover,
.postproduction-config .buy-more-time.teal:hover {
  background-color: #42cd9d;
}
.postproduction-config .run-postproduction.teal:hover .text-box,
.postproduction-config .buy-more-time.teal:hover .text-box {
  border-color: #52d1a6;
}
.postproduction-config .run-postproduction.teal:active,
.postproduction-config .buy-more-time.teal:active {
  background-color: #32be8e;
}
.postproduction-config .run-postproduction.teal:active .text-box,
.postproduction-config .buy-more-time.teal:active .text-box {
  border-color: #2eae82;
}
.postproduction-config .run-postproduction:after,
.postproduction-config .buy-more-time:after {
  clear: both;
}
.postproduction-config .run-postproduction:after,
.postproduction-config .buy-more-time:after,
.postproduction-config .run-postproduction:before,
.postproduction-config .buy-more-time:before {
  content: " ";
  display: table;
}
.postproduction-config .run-postproduction .icon-box,
.postproduction-config .buy-more-time .icon-box {
  position: relative;
  float: left;
  width: 40px;
  height: 100%;
}
.postproduction-config .run-postproduction .icon-box svg,
.postproduction-config .buy-more-time .icon-box svg {
  width: 50%;
  height: 25px;
  margin-left: 25%;
  margin-top: 20%;
}
.postproduction-config .run-postproduction .icon-box svg use,
.postproduction-config .buy-more-time .icon-box svg use {
  fill: #fff;
}
.postproduction-config .run-postproduction .text-box,
.postproduction-config .buy-more-time .text-box {
  padding: 0 15px 0 0;
  line-height: 32px;
}
.postproduction-config .run-postproduction.separated .text-box,
.postproduction-config .buy-more-time.separated .text-box {
  border-left: 1px solid;
  padding: 0 15px;
}
.postproduction-config .run-postproduction.large .icon-box,
.postproduction-config .buy-more-time.large .icon-box {
  width: 64px;
  height: 64px;
}
.postproduction-config .run-postproduction.large .text-box,
.postproduction-config .buy-more-time.large .text-box {
  height: 64px;
  line-height: 64px;
}
.postproduction-config .run-postproduction .icon-box,
.postproduction-config .buy-more-time .icon-box {
  width: 64px;
  height: 64px;
}
.postproduction-config .run-postproduction .text-box,
.postproduction-config .buy-more-time .text-box {
  height: 64px;
  line-height: 64px;
}
.postproduction-config .run-postproduction .text-box,
.postproduction-config .buy-more-time .text-box {
  border-color: #6089ff;
  text-shadow: 0 0 1px #6089ff;
}
.postproduction-config .run-postproduction:hover,
.postproduction-config .buy-more-time:hover {
  color: #fff;
  background-color: #89a7ff;
}
.postproduction-config .run-postproduction:active,
.postproduction-config .buy-more-time:active {
  background-color: #6a90ff;
}
.postproduction-config .run-paid-postproduction {
  display: none;
}
.footnote-form {
  position: relative;
}
.footnote-form:after {
  clear: both;
}
.footnote-form:after,
.footnote-form:before {
  content: " ";
  display: table;
}
.footnote-form .time-block {
  margin-bottom: 3px;
  width: 100px;
}
.footnote-form .time-block .time-icon {
  width: 14px;
  height: 14px;
  float: left;
  margin: -1px 5px 0 0;
}
.footnote-form .time-block .time-icon use {
  fill: #7f8c8d;
}
.footnote-form .time-block .time {
  font-size: 12px;
  color: #bdc3c7;
}
.footnote-form .input-block {
  display: flex;
}
.footnote-form .input-block .footnote-input {
  border: solid 1px #cfd9db;
  border-width: 1px 0 1px 1px;
  padding: 0 30px;
  width: 435px;
  border-radius: 0;
  height: 63px;
}
.footnote-form .input-block .footnote-input:focus {
  outline: none;
}
.footnote-form .footnote-submit {
  padding: 15px;
  background: #bab0ff;
  cursor: pointer;
  border: 1px solid #8d7dff;
  text-shadow: 0 0 1px #8d7dff;
  letter-spacing: .05em;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.075);
  display: inline-block;
  border: 1px solid;
  border-radius: 0;
  padding: 0;
  background-color: #7a9cff;
  border-color: #6089ff;
  text-shadow: 0 0 1px #6089ff;
  color: #fff;
  border-width: 0;
  height: 65px;
  width: 64px;
  float: right;
}
.footnote-form .footnote-submit:hover {
  color: #fff;
  background-color: #c7bfff;
}
.footnote-form .footnote-submit:active {
  background-color: #ada1ff;
}
.footnote-form .footnote-submit:focus {
  outline: none;
}
.footnote-form .footnote-submit.small {
  padding: 5px 15px;
}
.footnote-form .footnote-submit.primary {
  background-color: #7a9cff;
  border-color: #6089ff;
  text-shadow: 0 0 1px #6089ff;
  color: #fff;
}
.footnote-form .footnote-submit.primary .text-box {
  border-color: #6089ff;
  text-shadow: 0 0 1px #6089ff;
}
.footnote-form .footnote-submit.primary:hover {
  color: #fff;
  background-color: #89a7ff;
}
.footnote-form .footnote-submit.primary:active {
  background-color: #6a90ff;
}
.footnote-form .footnote-submit.secondary {
  background-color: #bab0ff;
  border-color: #8d7dff;
  text-shadow: 0 0 1px #8d7dff;
  color: #fff;
}
.footnote-form .footnote-submit.secondary .text-box {
  border-color: #8d7dff;
  text-shadow: 0 0 1px #8d7dff;
}
.footnote-form .footnote-submit.secondary:hover {
  color: #fff;
  background-color: #c7bfff;
}
.footnote-form .footnote-submit.secondary:active {
  background-color: #ada1ff;
}
.footnote-form .footnote-submit.green {
  background-color: #48D684;
  border-color: #2bc06a;
  color: #fff;
}
.footnote-form .footnote-submit.green .text-box {
  border-color: #2bc06a;
}
.footnote-form .footnote-submit.green:hover {
  color: #fff;
  background-color: #3cd37c;
}
.footnote-form .footnote-submit.blue {
  background-color: #3498db;
  border-color: #2980b9;
  color: #fff;
}
.footnote-form .footnote-submit.blue .text-box {
  border-color: #2980b9;
}
.footnote-form .footnote-submit.blue:hover {
  color: #fff;
  background-color: #2791d9;
}
.footnote-form .footnote-submit.bright-blue {
  background-color: #bab0ff;
  border-color: #8d7dff;
  color: #fff;
}
.footnote-form .footnote-submit.bright-blue .text-box {
  border-color: #8d7dff;
  text-shadow: 0 0 1px #8d7dff;
}
.footnote-form .footnote-submit.bright-blue:hover {
  color: #fff;
  background-color: #ada1ff;
}
.footnote-form .footnote-submit.bright-blue:hover .text-box {
  border-color: #806eff;
}
.footnote-form .footnote-submit.light-blue {
  background: #2fd9e9;
  border-color: #16bfcf;
}
.footnote-form .footnote-submit.light-blue .text-box {
  border-color: #16bfcf;
  text-shadow: 0 0 1px #16bfcf;
}
.footnote-form .footnote-submit.light-blue:hover {
  background-color: #21d6e8;
}
.footnote-form .footnote-submit.light-blue:hover .text-box {
  border-color: #14b2c1;
}
.footnote-form .footnote-submit.white {
  background: #fff;
  border-color: #ecf0f1;
  color: #7a9cff;
  font-family: "Helvetica Light", Helvetica, sans-serif;
  font-weight: normal;
}
.footnote-form .footnote-submit.white .text-box {
  border-color: #adc2ff;
  text-shadow: 0 0 1px #adc2ff;
}
.footnote-form .footnote-submit.white:hover {
  background-color: #ffffff;
  color: #6a90ff;
}
.footnote-form .footnote-submit.white:hover .text-box {
  border-color: #e3b90d;
}
.footnote-form .footnote-submit.white:hover .icon-box svg use {
  fill: #6a90ff;
}
.footnote-form .footnote-submit.white .icon-box svg use {
  fill: #7a9cff;
}
.footnote-form .footnote-submit.dark-blue {
  background: #34495e;
  border-color: #2c3e50;
}
.footnote-form .footnote-submit.dark-blue .text-box {
  border-color: #2c3e50;
}
.footnote-form .footnote-submit.dark-blue:hover {
  background-color: #2f4154;
}
.footnote-form .footnote-submit.purple {
  background: #9b59b6;
  border-color: #8e44ad;
}
.footnote-form .footnote-submit.purple .text-box {
  border-color: #8e44ad;
}
.footnote-form .footnote-submit.purple:hover {
  background-color: #954eb1;
}
.footnote-form .footnote-submit.fuchsia {
  background: #CF8FE5;
  border-color: #bd66db;
}
.footnote-form .footnote-submit.fuchsia .text-box {
  border-color: #bd66db;
  text-shadow: 0 0 1px #bd66db;
}
.footnote-form .footnote-submit.fuchsia:hover {
  background-color: #ca83e2;
}
.footnote-form .footnote-submit.fuchsia:hover .text-box {
  border-color: #b859d9;
}
.footnote-form .footnote-submit.orange {
  background: #ff7b34;
  border-color: #ff5a01;
}
.footnote-form .footnote-submit.orange .text-box {
  border-color: #ff5a01;
}
.footnote-form .footnote-submit.orange:hover {
  background-color: #ff7125;
}
.footnote-form .footnote-submit.orange:hover .text-box {
  border-color: #f15400;
}
.footnote-form .footnote-submit.teal {
  background: #36CA97;
  border-color: #30b688;
  text-shadow: 0 0 1px #30b688;
}
.footnote-form .footnote-submit.teal .text-box {
  border-color: #30b688;
  text-shadow: 0 0 1px #30b688;
}
.footnote-form .footnote-submit.teal:hover {
  background-color: #42cd9d;
}
.footnote-form .footnote-submit.teal:hover .text-box {
  border-color: #52d1a6;
}
.footnote-form .footnote-submit.teal:active {
  background-color: #32be8e;
}
.footnote-form .footnote-submit.teal:active .text-box {
  border-color: #2eae82;
}
.footnote-form .footnote-submit:after {
  clear: both;
}
.footnote-form .footnote-submit:after,
.footnote-form .footnote-submit:before {
  content: " ";
  display: table;
}
.footnote-form .footnote-submit .icon-box {
  position: relative;
  float: left;
  width: 40px;
  height: 100%;
}
.footnote-form .footnote-submit .icon-box svg {
  width: 50%;
  height: 25px;
  margin-left: 25%;
  margin-top: 20%;
}
.footnote-form .footnote-submit .icon-box svg use {
  fill: #fff;
}
.footnote-form .footnote-submit .text-box {
  padding: 0 15px 0 0;
  line-height: 32px;
}
.footnote-form .footnote-submit.separated .text-box {
  border-left: 1px solid;
  padding: 0 15px;
}
.footnote-form .footnote-submit.large .icon-box {
  width: 64px;
  height: 64px;
}
.footnote-form .footnote-submit.large .text-box {
  height: 64px;
  line-height: 64px;
}
.footnote-form .footnote-submit .text-box {
  border-color: #6089ff;
  text-shadow: 0 0 1px #6089ff;
}
.footnote-form .footnote-submit:hover {
  color: #fff;
  background-color: #89a7ff;
}
.footnote-form .footnote-submit:active {
  background-color: #6a90ff;
}
.footnote-form .footnote-submit .icon-box .icon {
  width: 104%;
  margin-left: 28%;
  height: 40px;
  margin-top: 12px;
}
.footnote {
  margin-bottom: 15px;
  transition: all 200ms ease-out;
  top: -20px;
  opacity: 0;
  position: relative;
}
.footnote:after {
  clear: both;
}
.footnote:after,
.footnote:before {
  content: " ";
  display: table;
}
.footnote:last-child {
  margin-bottom: 30px;
}
.footnote .time-icon {
  width: 30px;
  height: 31px;
  float: left;
  margin: 1px 8px 0 0;
}
.footnote .time-icon use {
  fill: #6089ff;
}
.footnote .footnote-content {
  overflow: hidden;
}
.footnote .footnote-content .time {
  font-size: 12px;
  line-height: 14px;
  color: #95a5a6;
  margin-right: 15px;
}
.track {
  display: flex;
  flex-direction: row;
  width: 300px;
  height: 64px;
  margin: 0 30px 30px 0;
  font-size: 14px;
  float: left;
  overflow: hidden;
  line-height: 1.5em;
}
.track .icon-box {
  flex: 0 0 64px;
  position: relative;
}
.track .icon-box > div {
  position: relative;
  height: 100%;
}
.track .icon-box .icon {
  height: 64px;
  width: 100%;
  position: relative;
  top: 0;
  transition: top 200ms ease-in-out;
  transition-delay: 100ms;
}
.track .icon-box .icon use {
  fill: #fff;
}
.track .icon-box .label {
  opacity: 0;
  font-size: 10px;
  color: #fff;
  text-align: center;
  width: 100%;
  position: absolute;
  bottom: 2px;
  left: 0;
  transition: opacity 100ms ease-in-out;
  transition-delay: 0ms;
  text-transform: uppercase;
  font-size: 8px;
  letter-spacing: .6px;
  line-height: 1.5em;
  font-weight: bold;
}
.track .icon-box .download {
  display: none;
}
.track .icon-box .uploading {
  display: none;
}
.track .icon-box .has-error {
  display: none;
}
.track .icon-box .processing {
  display: none;
}
.track .icon-box .checkbox {
  display: none;
}
.track .content-box {
  position: relative;
  flex: 0 5 240px;
  padding: 10px 15px;
  border: 1px solid #bdc3c7;
  border-left: none;
  border-right: none;
}
.track .content-box .progress-bar {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 0%;
  opacity: .2;
  transition: width 200ms ease-in-out;
}
.track .content-box .name {
  text-transform: uppercase;
  padding-top: 2px;
  line-height: 1.6em;
}
.track .content-box .duration,
.track .content-box .error-message,
.track .content-box .progress-percent,
.track .content-box .processing-status {
  display: none;
  font-size: 12px;
  line-height: 12px;
}
.track .format-box {
  position: relative;
  background: #bab0ff;
  border: 1px solid #8d7dff;
  width: 20px;
}
.track .format-box .format {
  transform: rotate(90deg);
  color: #fff;
  width: 100%;
  height: 100%;
  font-size: 10px;
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
  line-height: 65px;
  margin-top: -2px;
}
.track.wav.finalized .icon-box:hover {
  background: #6f94ff;
}
.track.wav .icon-box {
  background: #7a9cff;
  border: 1px solid #6089ff;
}
.track.wav .progress-bar {
  background: #7a9cff;
}
.track.wav .format-box {
  background: #7a9cff;
  border-color: #6089ff;
}
.track.mp3.finalized .icon-box:hover {
  background: #ada1ff;
}
.track.mp3 .icon-box {
  background: #bab0ff;
  border: 1px solid #8d7dff;
}
.track.mp3 .progress-bar {
  background: #bab0ff;
}
.track.finalized .icon-box .icon {
  height: 60px;
  top: 2px;
}
.track.finalized .icon-box .download {
  display: block;
}
.track.finalized .icon-box:hover {
  background: #ada1ff;
  cursor: pointer;
}
.track.finalized .icon-box:hover .icon {
  transition-duration: 100ms;
  transition-delay: 0ms;
  top: -5px;
}
.track.finalized .icon-box:hover .label {
  transition-delay: 100ms;
  opacity: 1;
}
.track.finalized .content-box .duration {
  display: block;
}
.track.downloading .icon {
  -webkit-animation: bob 2s ease-in-out infinite;
  -moz-animation: bob 2s ease-in-out infinite;
  animation: bob 2s ease-in-out infinite;
}
.track.downloading .content-box .progress-bar {
  display: block;
}
.track.downloading .content-box .duration {
  display: none;
}
.track.downloading .content-box .progress-percent {
  display: block;
}
.track.uploading .icon-box .uploading {
  display: block;
}
.track.uploading .icon-box .uploading .icon {
  top: -7px;
  -webkit-animation: bob 2s ease-in-out infinite;
  -moz-animation: bob 2s ease-in-out infinite;
  animation: bob 2s ease-in-out infinite;
}
.track.uploading .icon-box .uploading .label {
  opacity: 1;
}
.track.uploading .content-box .progress-bar {
  display: block;
}
.track.uploading .content-box .progress-percent {
  display: block;
}
.track.has-error .icon-box {
  background: #ff4500;
  border: 1px solid #cc3700;
}
.track.has-error .icon-box .has-error {
  display: block;
}
.track.has-error .icon-box .has-error .warning-icon {
  height: 47px;
  top: 7px;
}
.track.has-error .icon-box .has-error .gear-icon {
  display: none;
  height: 37px;
  top: 13px;
}
.track.has-error .icon-box:hover {
  background: #f04100;
  cursor: pointer;
}
.track.has-error .icon-box:hover .warning-icon {
  transition-duration: 100ms;
  transition-delay: 0ms;
  top: 0px;
}
.track.has-error .icon-box:hover .label {
  transition-delay: 100ms;
  opacity: 1;
}
.track.has-error .content-box .error-message {
  display: block;
}
.track.has-error.fixing-error .icon-box {
  pointer-events: none;
}
.track.has-error.fixing-error .icon-box .warning-icon {
  display: none;
}
.track.has-error.fixing-error .icon-box .label {
  display: none;
}
.track.has-error.fixing-error .icon-box .gear-icon {
  display: block;
  -webkit-animation: spin 2s linear infinite;
  -moz-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}
.track.has-error .format-box {
  background: #ff4500;
  border-color: #cc3700;
}
.track.processing .icon-box .processing {
  display: block;
}
.track.processing .icon-box .processing .icon {
  height: 37px;
  top: 13px;
  -webkit-animation: spin 2s linear infinite;
  -moz-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}
.track.processing .content-box .progress-bar {
  display: block;
  background-color: #CF8FE5;
  transition: width 60s ease-in-out;
}
.track.processing .content-box .processing-status {
  display: block;
}
.track.selectable .icon-box .icon {
  height: 40px;
  top: 14px;
  left: 3px;
}
.track.selectable .icon-box .download {
  display: none;
}
.track.selectable .checkbox {
  display: block;
  height: 64px;
}
.track.selectable .checked,
.track.selectable .unchecked {
  display: none;
}
.track.selectable.unselected .icon-box {
  opacity: .6;
}
.track.selectable.unselected .icon-box:hover {
  opacity: 1;
}
.track.selectable.unselected .icon-box:hover .icon {
  transition: none;
  top: 14px;
}
.track.selectable.unselected .format-box {
  opacity: .6;
}
.track.selectable.unselected .unchecked {
  display: block;
}
.track.selectable.selected .icon-box:hover .icon {
  transition: none;
  top: 11px;
}
.track.selectable.selected .checked {
  display: block;
  top: 11px;
  left: 0;
}
.postproduction.track .format-box {
  background: #CF8FE5;
  border: 1px solid #bd66db;
}
.postproduction.track.processing .icon-box {
  background: #CF8FE5;
  border: 1px solid #bd66db;
}
.postproduction.track.finalized .icon-box {
  background: #CF8FE5;
  border: 1px solid #bd66db;
}
.postproduction.track.finalized .icon-box:hover {
  background: #ca83e2;
}
.postproduction.track.finalized .content-box .progress-bar {
  background-color: #CF8FE5;
}
.postproduction.track.has-error .icon-box {
  background: #ff4500;
  border: 1px solid #cc3700;
}
.postproduction.track.has-error .icon-box .has-error {
  display: block;
  pointer-events: none;
}
.postproduction.track.has-error .icon-box .has-error .warning-icon {
  height: 47px;
  top: 7px;
}
.postproduction.track.has-error .icon-box .has-error .gear-icon {
  display: none;
  height: 37px;
  top: 13px;
}
.postproduction.track.has-error .icon-box:hover {
  cursor: default;
}
.postproduction.track.has-error .icon-box:hover .label {
  display: none;
}
.postproduction.track.has-error .format-box {
  background: #ff4500;
  border: 1px solid #cc3700;
}
.context-menu {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  position: absolute;
  background: #fff;
  border-radius: 3px;
  padding: 5px 0;
}
.context-menu .context-menu-option {
  padding: 5px 30px;
  cursor: pointer;
}
.context-menu .context-menu-option:hover {
  background-color: #bab0ff;
  color: #fff;
}
.project-create-form .form-block {
  display: flex;
  margin-bottom: 15px;
}
.project-create-form .project-name-input {
  flex: 1 2 350px;
  margin-right: 5px;
}
.project-create-form .button {
  flex: 1 1;
}
.project-create-form .warning h4 {
  font-weight: normal;
  margin: 15px 0 5px 0;
  color: #cc3700;
}
.feedback {
  min-width: 500px;
  max-width: 800px;
}
.feedback .ok {
  float: left;
  padding-left: 30px;
  padding-right: 30px;
}
.nickname-form {
  color: #667273;
}
.nickname-form .form-block {
  display: flex;
  width: 100%;
}
.nickname-form .nickname {
  flex: 5 0;
}
.nickname-form .submit {
  flex: 1 0;
  margin-left: 5px;
}
.lobby {
  margin: 30px 30px 45px 30px;
}
.lobby:empty {
  display: none;
}
.lobby #local-video {
  height: 300px;
  width: 300px;
}
.lobby #remote-videos {
  height: 300px;
  width: 100%;
}
.lobby .lobby-user {
  position: relative;
  background: #fff;
  border: 1px solid #e6e9ea;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.075);
  margin-bottom: 15px;
}
.lobby .lobby-user .user-main {
  position: relative;
  background-image: linear-gradient(rgba(255, 255, 255, 0), #fcfbff);
  border: solid #e6e9ea;
  border-width: 0 0px 1px 0;
}
.lobby .lobby-user .user-main:after {
  clear: both;
}
.lobby .lobby-user .user-main:after,
.lobby .lobby-user .user-main:before {
  content: " ";
  display: table;
}
.lobby .lobby-user.disconnected {
  opacity: .5;
}
.lobby .lobby-user.armed .actions .mic-status {
  background: #7a9cff;
}
.lobby .lobby-user.armed .audio-viz .frequency-analyser {
  height: 100px;
}
.lobby .lobby-user.muted .actions .mic-status .unmuted {
  display: none;
}
.lobby .lobby-user.muted .actions .mic-status .muted {
  display: block;
}
.lobby .lobby-user.muted .actions .mic-status .indicator use {
  fill: #fff;
  opacity: .5;
}
.lobby .lobby-user.muted .actions .mic-status.disabled use {
  fill: #7a9cff;
}
.lobby .lobby-user.has-video {
  padding-top: 0;
}
.lobby .lobby-user.has-video img {
  display: none;
}
.lobby .lobby-user.has-video .video {
  background: none;
  width: 100%;
  height: auto;
  margin: 0;
  border-radius: 0;
}
.lobby .lobby-user.has-video .video video {
  display: block;
}
.lobby .lobby-user.has-video .user-meta {
  padding: 10px 15px;
}
.lobby .lobby-user.has-video .kick {
  color: #fff;
}
.lobby .lobby-user.is-local .raised-hand {
  pointer-events: all;
}
.lobby .lobby-user.hand-raised .actions .raised-hand {
  pointer-events: all;
}
.lobby .lobby-user.hand-raised .actions .raised-hand use {
  fill: #f1c40f;
}
.lobby .lobby-user.hand-raised .actions .raised-hand:hover use {
  fill: #f1c40f;
}
.lobby .lobby-user.hand-raised .actions .raised-hand .hand-icon {
  display: none;
}
.lobby .lobby-user.hand-raised .actions .raised-hand .hand-fill-icon {
  display: block;
}
.lobby .lobby-user.hand-raised .actions .raised-hand .hand-fill-icon use {
  fill: #f1c40f;
}
.lobby .lobby-user.hand-raised .actions .raised-hand.disabled use {
  fill: #7a9cff;
}
.lobby .lobby-user .volume {
  background: #fbfcfc;
  display: block;
  position: absolute;
  bottom: 0;
  left: 45px;
}
.lobby .lobby-user .user-status {
  font-size: 11px;
  margin: 38px 10px 0 55px;
  position: relative;
  z-index: 5;
}
.lobby .lobby-user .kick {
  position: absolute;
  top: 3px;
  right: 10px;
  color: #95a5a6;
  font-size: 10px;
  cursor: pointer;
  text-transform: uppercase;
  z-index: 150;
}
.lobby .lobby-user .kick:before,
.lobby .lobby-user .kick:after {
  background: #95a5a6;
}
.lobby .lobby-user .actions {
  display: flex;
  flex-direction: column;
  width: 45px;
  height: 100%;
  float: left;
  position: relative;
  z-index: 150;
}
.lobby .lobby-user .actions .action {
  padding: 15px;
  background: #bab0ff;
  display: inline-block;
  border: 1px solid #8d7dff;
  text-shadow: 0 0 1px #8d7dff;
  letter-spacing: .05em;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.075);
  background-color: #7a9cff;
  border-color: #6089ff;
  text-shadow: 0 0 1px #6089ff;
  color: #fff;
  padding: 0;
  width: 45px;
  height: 45px;
  cursor: pointer;
  display: flex;
  align-content: center;
}
.lobby .lobby-user .actions .action:hover {
  color: #fff;
  background-color: #c7bfff;
}
.lobby .lobby-user .actions .action:active {
  background-color: #ada1ff;
}
.lobby .lobby-user .actions .action:focus {
  outline: none;
}
.lobby .lobby-user .actions .action.small {
  padding: 5px 15px;
}
.lobby .lobby-user .actions .action.primary {
  background-color: #7a9cff;
  border-color: #6089ff;
  text-shadow: 0 0 1px #6089ff;
  color: #fff;
}
.lobby .lobby-user .actions .action.primary .text-box {
  border-color: #6089ff;
  text-shadow: 0 0 1px #6089ff;
}
.lobby .lobby-user .actions .action.primary:hover {
  color: #fff;
  background-color: #89a7ff;
}
.lobby .lobby-user .actions .action.primary:active {
  background-color: #6a90ff;
}
.lobby .lobby-user .actions .action.secondary {
  background-color: #bab0ff;
  border-color: #8d7dff;
  text-shadow: 0 0 1px #8d7dff;
  color: #fff;
}
.lobby .lobby-user .actions .action.secondary .text-box {
  border-color: #8d7dff;
  text-shadow: 0 0 1px #8d7dff;
}
.lobby .lobby-user .actions .action.secondary:hover {
  color: #fff;
  background-color: #c7bfff;
}
.lobby .lobby-user .actions .action.secondary:active {
  background-color: #ada1ff;
}
.lobby .lobby-user .actions .action.green {
  background-color: #48D684;
  border-color: #2bc06a;
  color: #fff;
}
.lobby .lobby-user .actions .action.green .text-box {
  border-color: #2bc06a;
}
.lobby .lobby-user .actions .action.green:hover {
  color: #fff;
  background-color: #3cd37c;
}
.lobby .lobby-user .actions .action.blue {
  background-color: #3498db;
  border-color: #2980b9;
  color: #fff;
}
.lobby .lobby-user .actions .action.blue .text-box {
  border-color: #2980b9;
}
.lobby .lobby-user .actions .action.blue:hover {
  color: #fff;
  background-color: #2791d9;
}
.lobby .lobby-user .actions .action.bright-blue {
  background-color: #bab0ff;
  border-color: #8d7dff;
  color: #fff;
}
.lobby .lobby-user .actions .action.bright-blue .text-box {
  border-color: #8d7dff;
  text-shadow: 0 0 1px #8d7dff;
}
.lobby .lobby-user .actions .action.bright-blue:hover {
  color: #fff;
  background-color: #ada1ff;
}
.lobby .lobby-user .actions .action.bright-blue:hover .text-box {
  border-color: #806eff;
}
.lobby .lobby-user .actions .action.light-blue {
  background: #2fd9e9;
  border-color: #16bfcf;
}
.lobby .lobby-user .actions .action.light-blue .text-box {
  border-color: #16bfcf;
  text-shadow: 0 0 1px #16bfcf;
}
.lobby .lobby-user .actions .action.light-blue:hover {
  background-color: #21d6e8;
}
.lobby .lobby-user .actions .action.light-blue:hover .text-box {
  border-color: #14b2c1;
}
.lobby .lobby-user .actions .action.white {
  background: #fff;
  border-color: #ecf0f1;
  color: #7a9cff;
  font-family: "Helvetica Light", Helvetica, sans-serif;
  font-weight: normal;
}
.lobby .lobby-user .actions .action.white .text-box {
  border-color: #adc2ff;
  text-shadow: 0 0 1px #adc2ff;
}
.lobby .lobby-user .actions .action.white:hover {
  background-color: #ffffff;
  color: #6a90ff;
}
.lobby .lobby-user .actions .action.white:hover .text-box {
  border-color: #e3b90d;
}
.lobby .lobby-user .actions .action.white:hover .icon-box svg use {
  fill: #6a90ff;
}
.lobby .lobby-user .actions .action.white .icon-box svg use {
  fill: #7a9cff;
}
.lobby .lobby-user .actions .action.dark-blue {
  background: #34495e;
  border-color: #2c3e50;
}
.lobby .lobby-user .actions .action.dark-blue .text-box {
  border-color: #2c3e50;
}
.lobby .lobby-user .actions .action.dark-blue:hover {
  background-color: #2f4154;
}
.lobby .lobby-user .actions .action.purple {
  background: #9b59b6;
  border-color: #8e44ad;
}
.lobby .lobby-user .actions .action.purple .text-box {
  border-color: #8e44ad;
}
.lobby .lobby-user .actions .action.purple:hover {
  background-color: #954eb1;
}
.lobby .lobby-user .actions .action.fuchsia {
  background: #CF8FE5;
  border-color: #bd66db;
}
.lobby .lobby-user .actions .action.fuchsia .text-box {
  border-color: #bd66db;
  text-shadow: 0 0 1px #bd66db;
}
.lobby .lobby-user .actions .action.fuchsia:hover {
  background-color: #ca83e2;
}
.lobby .lobby-user .actions .action.fuchsia:hover .text-box {
  border-color: #b859d9;
}
.lobby .lobby-user .actions .action.orange {
  background: #ff7b34;
  border-color: #ff5a01;
}
.lobby .lobby-user .actions .action.orange .text-box {
  border-color: #ff5a01;
}
.lobby .lobby-user .actions .action.orange:hover {
  background-color: #ff7125;
}
.lobby .lobby-user .actions .action.orange:hover .text-box {
  border-color: #f15400;
}
.lobby .lobby-user .actions .action.teal {
  background: #36CA97;
  border-color: #30b688;
  text-shadow: 0 0 1px #30b688;
}
.lobby .lobby-user .actions .action.teal .text-box {
  border-color: #30b688;
  text-shadow: 0 0 1px #30b688;
}
.lobby .lobby-user .actions .action.teal:hover {
  background-color: #42cd9d;
}
.lobby .lobby-user .actions .action.teal:hover .text-box {
  border-color: #52d1a6;
}
.lobby .lobby-user .actions .action.teal:active {
  background-color: #32be8e;
}
.lobby .lobby-user .actions .action.teal:active .text-box {
  border-color: #2eae82;
}
.lobby .lobby-user .actions .action .text-box {
  border-color: #6089ff;
  text-shadow: 0 0 1px #6089ff;
}
.lobby .lobby-user .actions .action:hover {
  color: #fff;
  background-color: #89a7ff;
}
.lobby .lobby-user .actions .action:active {
  background-color: #6a90ff;
}
.lobby .lobby-user .actions .action:last-child {
  border-top-color: transparent;
}
.lobby .lobby-user .actions .action.disabled {
  pointer-events: none;
  box-shadow: none;
  background-color: #f8f9fa;
  border-color: transparent;
  border-right-color: #ecf0f1;
}
.lobby .lobby-user .actions .action.disabled use {
  fill: #7a9cff;
}
.lobby .lobby-user .actions .action .icon {
  height: 65%;
  width: 65%;
  margin: auto;
  align-self: center;
}
.lobby .lobby-user .mic-status {
  margin: 0;
}
.lobby .lobby-user .mic-status .muted {
  display: none;
}
.lobby .lobby-user .mic-status .icon use {
  fill: #fff;
}
.lobby .lobby-user .raised-hand {
  pointer-events: none;
}
.lobby .lobby-user .raised-hand .hand-fill-icon {
  display: none;
}
.lobby .lobby-user .raised-hand use {
  fill: #ecf0f1;
}
.lobby .lobby-user .image {
  float: left;
  width: 75px;
  height: 75px;
  margin: 0 15px 0 15px;
  border-radius: 50%;
  overflow: hidden;
  background: #7f8c8d;
}
.lobby .lobby-user .user-meta {
  line-height: 36px;
  margin: 0px 10px 0 50px;
}
.lobby .lobby-user .user-meta .username {
  position: relative;
  font-variant: small-caps;
  font-size: 28px;
  font-weight: lighter;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: -3px 10px 0 5px;
}
.lobby .lobby-user .user-meta .mic-label {
  font-size: 10px;
  color: #727f80;
}
.lobby .lobby-user .user-meta .paused {
  display: none;
}
.lobby .lobby-user .user-meta .paused .indicator {
  top: -1px;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  float: left;
  margin: 2px 5px 0 0;
  position: relative;
}
.lobby .lobby-user .user-meta .paused .indicator:before,
.lobby .lobby-user .user-meta .paused .indicator:after {
  position: absolute;
  top: 0;
  content: '';
  background: #e74c3c;
  border: 1px solid #c0392b;
  width: 27%;
  height: 100%;
}
.lobby .lobby-user .user-meta .paused .indicator:before {
  left: 0;
}
.lobby .lobby-user .user-meta .paused .indicator:after {
  right: 0;
}
.lobby .lobby-user .user-meta .paused .indicator:before,
.lobby .lobby-user .user-meta .paused .indicator:after {
  width: 24%;
}
.lobby .lobby-user .user-meta .uploading {
  display: none;
  opacity: 0;
  transition: opacity 250ms ease-in;
}
.lobby .lobby-user .user-meta .uploading .indicator {
  width: 8px;
  height: 8px;
  border: 1px solid #3498db;
  border-radius: 50%;
  border-width: 2px 2px 0 0;
  -webkit-animation: spin 1s linear infinite;
  -moz-animation: spin 1s linear infinite;
  animation: spin 1s linear infinite;
}
.lobby .lobby-user .user-meta .deferred-uploads {
  font-size: 12px;
  color: #e67e22;
  display: none;
}
.lobby .lobby-user .user-meta .download {
  position: relative;
  left: -2px;
  display: none;
  opacity: 0;
  padding: 5px 15px;
  margin-top: 15px;
  transition: opacity, padding 250ms ease-in;
  font-size: 12px;
}
.lobby .lobby-user .user-meta .download:after {
  content: '';
  position: absolute;
  opacity: 0;
  top: 7px;
  left: 8px;
  width: 10px;
  height: 10px;
  background: #fff;
  transition: opacity 250ms linear;
  -webkit-animation: flipflop 2s linear infinite;
  -moz-animation: flipflop 2s linear infinite;
  animation: flipflop 2s linear infinite;
}
.lobby .lobby-user .user-meta .download.downloading {
  padding-left: 25px;
}
.lobby .lobby-user .user-meta .download.downloading:after {
  opacity: .8;
}
.lobby .lobby-user .local-storage-quota {
  margin-right: 5px;
  margin-left: 15px;
  font-size: 10px;
  background: no-repeat center center;
  background-size: contain;
  height: 17px;
  width: 100%;
  z-index: 100;
  overflow: hidden;
  display: none;
}
.lobby .lobby-user .local-storage-quota.ok {
  display: none;
}
.lobby .lobby-user .local-storage-quota.caution {
  display: block;
}
.lobby .lobby-user .local-storage-quota.warning {
  display: block;
}
.lobby .lobby-user .local-storage-quota .local-storage-icon {
  height: 14px;
  vertical-align: middle;
}
.lobby .lobby-user .local-storage-quota .local-storage-status {
  line-height: 1.5;
  padding-left: 4px;
  position: relative;
  top: 1px;
}
.lobby .lobby-user .audio-viz {
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 48px;
  opacity: 0.75;
}
.lobby .lobby-user .audio-viz .buffer {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
}
.lobby .lobby-user .user-footer {
  box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.075);
}
.lobby .lobby-user .user-footer.hidden .status-items {
  height: 0;
}
.lobby .lobby-user .user-footer .status-items {
  overflow: hidden;
  width: 100%;
  font-size: 11px;
  display: flex;
  flex-direction: row;
  height: 19px;
  transition: height .05s linear;
}
.lobby .lobby-user .user-footer .status-items .status-item {
  border: solid #e6e9ea;
  border-width: 0 1px 0 0;
  display: flex;
  flex-direction: row;
}
.lobby .lobby-user .user-footer .status-items .status-item:last-child {
  border-right: none;
}
.lobby .lobby-user .user-footer .status-items .status-item .item-label {
  padding: 3px 15px 3px 15px;
  font-weight: bold;
  background: #f8f8f8;
  border: solid #e6e9ea;
  border-width: 0 1px 0 0;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.lobby .lobby-user .user-footer .status-items .status-item .item-content {
  padding: 3px 15px 3px 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lobby .lobby-user .user-footer .status-items .health-check-status-item {
  cursor: pointer;
}
.lobby .lobby-user .user-footer .status-items .health-check-status-item.passed .status {
  color: #48D684;
}
.lobby .lobby-user .user-footer .status-items .health-check-status-item.failed .status {
  color: #ff4500;
}
.lobby .lobby-user .user-footer .status-items .health-check-status-item.warning .status {
  color: #f1c40f;
}
.lobby .lobby-user .user-footer .status-items .health-check-status-item.unknown .status {
  color: #f1c40f;
}
.lobby .lobby-user .user-footer .status-items .health-check-status-item.expanded .item-label:after {
  transform: rotate(90deg);
}
.lobby .lobby-user .user-footer .status-items .health-check-status-item.expanded:hover .item-label:after {
  left: 15px;
}
.lobby .lobby-user .user-footer .status-items .health-check-status-item:hover {
  color: #4e5758;
}
.lobby .lobby-user .user-footer .status-items .health-check-status-item:hover .item-label:after {
  left: 16px;
}
.lobby .lobby-user .user-footer .status-items .health-check-status-item .item-label {
  position: relative;
  padding-left: 25px;
}
.lobby .lobby-user .user-footer .status-items .health-check-status-item .item-label:after {
  content: '';
  position: absolute;
  border: solid #667273;
  border-width: 3px 0 3px 4px;
  border-top-color: transparent;
  border-bottom-color: transparent;
  top: 6px;
  left: 15px;
  transition: transform 75ms linear;
}
.lobby .lobby-user .user-footer .status-items .health-check-status-item .status {
  text-transform: uppercase;
}
.lobby .lobby-user .user-footer .status-items .backup-status-item {
  flex-grow: 2;
}
.lobby .lobby-user .user-footer .status-items .backup-status-item .backup-progress {
  flex-grow: 2;
  text-align: center;
  position: relative;
}
.lobby .lobby-user .user-footer .status-items .backup-status-item .backup-progress .progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: #f4f2ff;
  border: 1px solid #d0caff;
  border-right: 1px solid #bab0ff;
  transition: width .25s linear;
  box-sizing: border-box;
  box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.075);
}
.lobby .lobby-user .user-footer .status-items .backup-status-item .backup-progress .progress-text {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 5;
}
.lobby .lobby-user .user-footer .status-items .local-storage.status-item.caution .quota-free {
  color: #f1c40f;
}
.lobby .lobby-user .user-footer .status-items .local-storage.status-item.warning .quota-free {
  color: #f1c40f;
}
.lobby .lobby-user .user-footer .status-items .local-storage.status-item.critical .quota-free {
  color: #ff4500;
}
.lobby .lobby-user .user-footer .health-check-log {
  border: solid #e6e9ea;
  border-width: 1px 0 0 0;
  font-size: 11px;
  padding: 5px 10px 10px 10px;
}
.lobby .lobby-user .user-footer .health-check-log.hidden {
  display: none;
}
.lobby .lobby-user .user-footer .health-check-log .health-check-title {
  margin: 5px 0;
}
.lobby .lobby-user .user-footer .health-check-log .health-check-items .health-check-item {
  display: flex;
  flex-direction: row;
}
.lobby .lobby-user .user-footer .health-check-log .health-check-items .health-check-item .item-status {
  margin-right: 10px;
  text-transform: uppercase;
}
.lobby .lobby-user .user-footer .health-check-log .health-check-items .health-check-item .item-status.passed {
  color: #48D684;
}
.lobby .lobby-user .user-footer .health-check-log .health-check-items .health-check-item .item-status.failed {
  color: #ff4500;
}
.lobby .lobby-user .user-footer .health-check-log .health-check-items .health-check-item .item-status.warning {
  color: #f1c40f;
}
.lobby .lobby-user .user-footer .user-footer-handle {
  position: absolute;
  width: 100%;
  height: 0;
  bottom: 0;
}
.lobby .lobby-user .user-footer .user-footer-handle:hover:after {
  height: 13px;
  bottom: -14px;
}
.lobby .lobby-user .user-footer .user-footer-handle:after {
  content: '';
  background-color: #f1f1f1;
  width: 30px;
  height: 8px;
  position: relative;
  bottom: 0;
  margin: 0 auto;
  border: solid #e6e9ea;
  border-width: 0 1px 1px 1px;
  border-bottom-right-radius: 7px;
  border-bottom-left-radius: 7px;
  position: absolute;
  left: 50%;
  bottom: -9px;
  margin-left: -10px;
  cursor: pointer;
}
.lobby .video video {
  width: 100%;
}
.right-pane {
  margin-left: 360px;
}
.soundboard {
  padding: 15px;
  display: flex;
  flex: 1 1 auto;
  overflow: hidden;
  width: 0;
}
.soundboard .samples {
  display: flex;
  align-content: space-between;
  align-items: center;
  overflow-x: auto;
  flex: 1;
}
.soundboard .samples .sample {
  height: 54px;
  max-width: 150px;
  border: 1px solid #adc2ff;
  border-top-width: 0;
  padding: 0 15px;
  margin: 0 5px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #7a9cff;
  position: relative;
  transition: box-shadow linear;
  flex: 0 0 50px;
}
.soundboard .samples .sample:hover {
  border-color: #7a9cff;
  color: #6089ff;
}
.soundboard .samples .sample:hover .actions .delete {
  display: block;
}
.soundboard .samples .sample:hover .volume {
  border-top-color: #6089ff;
  height: 3px;
}
.soundboard .samples .sample.loading {
  opacity: .5;
  border-top-width: 1px;
}
.soundboard .samples .sample.loading .volume {
  display: none;
}
.soundboard .samples .sample.playing {
  box-shadow: inset 0px 0 65px rgba(241, 196, 15, 0.5);
}
.soundboard .samples .sample.empty {
  border-style: dashed;
  border-color: #adc2ff;
  border-top-width: 1px;
  flex: 0 0 60px;
}
.soundboard .samples .sample.empty:before,
.soundboard .samples .sample.empty:after {
  content: '';
  background-color: #7a9cff;
  position: absolute;
  width: 1%;
  left: 49%;
  height: 20%;
  top: 40%;
}
.soundboard .samples .sample.empty:before {
  transform: rotate(90deg);
}
.soundboard .samples .sample.empty:hover {
  border-color: #7a9cff;
}
.soundboard .samples .sample.empty:hover:before,
.soundboard .samples .sample.empty:hover:after {
  background-color: #6089ff;
}
.soundboard .samples .sample.empty .actions {
  display: none;
}
.soundboard .samples .sample.empty .volume {
  display: none;
}
.soundboard .samples .sample input {
  opacity: 0;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  cursor: pointer;
}
.soundboard .samples .sample .volume {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background-color: #d0caff;
  border-top: 1px solid #adc2ff;
  transition: height .05s linear;
}
.soundboard .samples .sample .volume:hover {
  background-color: #c7bfff;
  height: 6px;
}
.soundboard .samples .sample .volume:hover .meter {
  background: #6089ff;
}
.soundboard .samples .sample .volume .meter {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 50%;
  background: #7a9cff;
}
.soundboard .samples .sample .actions {
  display: flex;
  justify-content: space-between;
  margin-top: -7px;
  margin-bottom: 1px;
}
.soundboard .samples .sample .actions .loop {
  position: relative;
  width: 10px;
  height: 10px;
}
.soundboard .samples .sample .actions .loop:hover .loop-icon use {
  fill: #0039e0;
}
.soundboard .samples .sample .actions .loop.active .loop-icon use {
  fill: #0040f9;
}
.soundboard .samples .sample .actions .loop :active .loop-icon use {
  fill: #002693;
}
.soundboard .samples .sample .actions .loop .loop-icon {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.soundboard .samples .sample .actions .loop .loop-icon use {
  fill: #6089ff;
}
.soundboard .samples .sample .actions .delete {
  position: relative;
  cursor: pointer;
  height: 10px;
  width: 10px;
  display: none;
}
.soundboard .samples .sample .actions .delete:before,
.soundboard .samples .sample .actions .delete:after {
  content: '';
  position: absolute;
  left: 50%;
  width: 20%;
  height: 100%;
  background: #fff;
}
.soundboard .samples .sample .actions .delete:before {
  transform: rotate(-45deg);
}
.soundboard .samples .sample .actions .delete:after {
  transform: rotate(45deg);
}
.soundboard .samples .sample .actions .delete:before,
.soundboard .samples .sample .actions .delete:after {
  background-color: #7a9cff;
  width: 1px;
}
.soundboard .samples .sample .actions .delete:hover:before,
.soundboard .samples .sample .actions .delete:hover:after {
  background-color: #0039e0;
}
.soundboard .samples .sample .name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat {
  box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.075);
  margin: 0px 30px 30px 0;
  position: relative;
  flex: 1 1 auto;
  display: flex;
  min-height: 200px;
  flex-direction: column;
}
.chat .chat-input {
  border: 1px solid #ecf0f1;
  border-radius: 0;
  width: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.chat .typing-display {
  font-size: 11px;
  text-transform: capitalize;
  padding-left: 15px;
  color: #7f8c8d;
  position: absolute;
  bottom: 55px;
  left: 0;
}
.chat .messages {
  padding: 15px 15px 15px 15px;
  display: flex;
  flex-direction: column-reverse;
  flex: 1 1 auto;
  overflow-y: auto;
  border: 1px solid #ecf0f1;
  border-bottom-width: 0;
}
.chat .message {
  margin-bottom: 5px;
  flex-shrink: 0;
}
.chat .message .username {
  text-transform: capitalize;
  font-weight: normal;
  font-size: 14px;
}
.chat .message .text {
  font-size: 14px;
}
.chat .message .text a {
  text-decoration: underline;
}
.unsupported-browser-page .explanation {
  margin-bottom: 100px;
}
.unsupported-browser-page .supported-browsers {
  margin-top: 45px;
  display: flex;
  align-content: space-around;
}
.unsupported-browser-page .supported-browsers:after {
  clear: both;
}
.unsupported-browser-page .supported-browsers:after,
.unsupported-browser-page .supported-browsers:before {
  content: " ";
  display: table;
}
.unsupported-browser-page .supported-browsers .browser {
  text-align: center;
  color: #2c3e50;
  font-size: 19px;
  margin: 0 65px 45px 0;
  flex: 1 1 auto;
}
.unsupported-browser-page .supported-browsers .browser img {
  margin-bottom: 30px;
}
.unsupported-browser-page .supported-browsers .browser .download {
  padding: 15px;
  background: #bab0ff;
  cursor: pointer;
  display: inline-block;
  border: 1px solid #8d7dff;
  text-shadow: 0 0 1px #8d7dff;
  letter-spacing: .05em;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.075);
  background-color: #3498db;
  border-color: #2980b9;
  color: #fff;
  display: block;
}
.unsupported-browser-page .supported-browsers .browser .download:hover {
  color: #fff;
  background-color: #c7bfff;
}
.unsupported-browser-page .supported-browsers .browser .download:active {
  background-color: #ada1ff;
}
.unsupported-browser-page .supported-browsers .browser .download:focus {
  outline: none;
}
.unsupported-browser-page .supported-browsers .browser .download.small {
  padding: 5px 15px;
}
.unsupported-browser-page .supported-browsers .browser .download.primary {
  background-color: #7a9cff;
  border-color: #6089ff;
  text-shadow: 0 0 1px #6089ff;
  color: #fff;
}
.unsupported-browser-page .supported-browsers .browser .download.primary .text-box {
  border-color: #6089ff;
  text-shadow: 0 0 1px #6089ff;
}
.unsupported-browser-page .supported-browsers .browser .download.primary:hover {
  color: #fff;
  background-color: #89a7ff;
}
.unsupported-browser-page .supported-browsers .browser .download.primary:active {
  background-color: #6a90ff;
}
.unsupported-browser-page .supported-browsers .browser .download.secondary {
  background-color: #bab0ff;
  border-color: #8d7dff;
  text-shadow: 0 0 1px #8d7dff;
  color: #fff;
}
.unsupported-browser-page .supported-browsers .browser .download.secondary .text-box {
  border-color: #8d7dff;
  text-shadow: 0 0 1px #8d7dff;
}
.unsupported-browser-page .supported-browsers .browser .download.secondary:hover {
  color: #fff;
  background-color: #c7bfff;
}
.unsupported-browser-page .supported-browsers .browser .download.secondary:active {
  background-color: #ada1ff;
}
.unsupported-browser-page .supported-browsers .browser .download.green {
  background-color: #48D684;
  border-color: #2bc06a;
  color: #fff;
}
.unsupported-browser-page .supported-browsers .browser .download.green .text-box {
  border-color: #2bc06a;
}
.unsupported-browser-page .supported-browsers .browser .download.green:hover {
  color: #fff;
  background-color: #3cd37c;
}
.unsupported-browser-page .supported-browsers .browser .download.blue {
  background-color: #3498db;
  border-color: #2980b9;
  color: #fff;
}
.unsupported-browser-page .supported-browsers .browser .download.blue .text-box {
  border-color: #2980b9;
}
.unsupported-browser-page .supported-browsers .browser .download.blue:hover {
  color: #fff;
  background-color: #2791d9;
}
.unsupported-browser-page .supported-browsers .browser .download.bright-blue {
  background-color: #bab0ff;
  border-color: #8d7dff;
  color: #fff;
}
.unsupported-browser-page .supported-browsers .browser .download.bright-blue .text-box {
  border-color: #8d7dff;
  text-shadow: 0 0 1px #8d7dff;
}
.unsupported-browser-page .supported-browsers .browser .download.bright-blue:hover {
  color: #fff;
  background-color: #ada1ff;
}
.unsupported-browser-page .supported-browsers .browser .download.bright-blue:hover .text-box {
  border-color: #806eff;
}
.unsupported-browser-page .supported-browsers .browser .download.light-blue {
  background: #2fd9e9;
  border-color: #16bfcf;
}
.unsupported-browser-page .supported-browsers .browser .download.light-blue .text-box {
  border-color: #16bfcf;
  text-shadow: 0 0 1px #16bfcf;
}
.unsupported-browser-page .supported-browsers .browser .download.light-blue:hover {
  background-color: #21d6e8;
}
.unsupported-browser-page .supported-browsers .browser .download.light-blue:hover .text-box {
  border-color: #14b2c1;
}
.unsupported-browser-page .supported-browsers .browser .download.white {
  background: #fff;
  border-color: #ecf0f1;
  color: #7a9cff;
  font-family: "Helvetica Light", Helvetica, sans-serif;
  font-weight: normal;
}
.unsupported-browser-page .supported-browsers .browser .download.white .text-box {
  border-color: #adc2ff;
  text-shadow: 0 0 1px #adc2ff;
}
.unsupported-browser-page .supported-browsers .browser .download.white:hover {
  background-color: #ffffff;
  color: #6a90ff;
}
.unsupported-browser-page .supported-browsers .browser .download.white:hover .text-box {
  border-color: #e3b90d;
}
.unsupported-browser-page .supported-browsers .browser .download.white:hover .icon-box svg use {
  fill: #6a90ff;
}
.unsupported-browser-page .supported-browsers .browser .download.white .icon-box svg use {
  fill: #7a9cff;
}
.unsupported-browser-page .supported-browsers .browser .download.dark-blue {
  background: #34495e;
  border-color: #2c3e50;
}
.unsupported-browser-page .supported-browsers .browser .download.dark-blue .text-box {
  border-color: #2c3e50;
}
.unsupported-browser-page .supported-browsers .browser .download.dark-blue:hover {
  background-color: #2f4154;
}
.unsupported-browser-page .supported-browsers .browser .download.purple {
  background: #9b59b6;
  border-color: #8e44ad;
}
.unsupported-browser-page .supported-browsers .browser .download.purple .text-box {
  border-color: #8e44ad;
}
.unsupported-browser-page .supported-browsers .browser .download.purple:hover {
  background-color: #954eb1;
}
.unsupported-browser-page .supported-browsers .browser .download.fuchsia {
  background: #CF8FE5;
  border-color: #bd66db;
}
.unsupported-browser-page .supported-browsers .browser .download.fuchsia .text-box {
  border-color: #bd66db;
  text-shadow: 0 0 1px #bd66db;
}
.unsupported-browser-page .supported-browsers .browser .download.fuchsia:hover {
  background-color: #ca83e2;
}
.unsupported-browser-page .supported-browsers .browser .download.fuchsia:hover .text-box {
  border-color: #b859d9;
}
.unsupported-browser-page .supported-browsers .browser .download.orange {
  background: #ff7b34;
  border-color: #ff5a01;
}
.unsupported-browser-page .supported-browsers .browser .download.orange .text-box {
  border-color: #ff5a01;
}
.unsupported-browser-page .supported-browsers .browser .download.orange:hover {
  background-color: #ff7125;
}
.unsupported-browser-page .supported-browsers .browser .download.orange:hover .text-box {
  border-color: #f15400;
}
.unsupported-browser-page .supported-browsers .browser .download.teal {
  background: #36CA97;
  border-color: #30b688;
  text-shadow: 0 0 1px #30b688;
}
.unsupported-browser-page .supported-browsers .browser .download.teal .text-box {
  border-color: #30b688;
  text-shadow: 0 0 1px #30b688;
}
.unsupported-browser-page .supported-browsers .browser .download.teal:hover {
  background-color: #42cd9d;
}
.unsupported-browser-page .supported-browsers .browser .download.teal:hover .text-box {
  border-color: #52d1a6;
}
.unsupported-browser-page .supported-browsers .browser .download.teal:active {
  background-color: #32be8e;
}
.unsupported-browser-page .supported-browsers .browser .download.teal:active .text-box {
  border-color: #2eae82;
}
.unsupported-browser-page .supported-browsers .browser .download .text-box {
  border-color: #2980b9;
}
.unsupported-browser-page .supported-browsers .browser .download:hover {
  color: #fff;
  background-color: #2791d9;
}
.unsupported-browser-page .supported-browsers .browser .recommended {
  font-size: 14px;
  margin-top: 5px;
  color: #2980b9;
}
.unsupported-browser-page .upgrage-message {
  clear: both;
}
.login-form {
  border: 1px solid #cfd9db;
  background: #fff;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.075);
}
.login-form .not-registered {
  margin-bottom: 10px;
}
.login-form .forgot-password {
  font-size: 12px;
  cursor: pointer;
  color: #7a9cff;
}
.login-form .forgot-password:hover {
  color: #93afff;
}
.login-form .forgot-password.underlined {
  text-decoration: underline;
}
.login-form .forgot-password.blue {
  color: #3498db;
}
.login-form .forgot-password.blue:hover {
  color: #2980b9;
}
.signup-form {
  width: 540px;
  border: 1px solid #cfd9db;
  background: #fff;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.075);
}
.signup-form .already-registered {
  display: inline-block;
  font-size: 12px;
  float: left;
  cursor: pointer;
  color: #7a9cff;
}
.signup-form .already-registered:hover {
  color: #93afff;
}
.signup-form .already-registered.underlined {
  text-decoration: underline;
}
.signup-form .already-registered.blue {
  color: #3498db;
}
.signup-form .already-registered.blue:hover {
  color: #2980b9;
}
.signup-form .submit {
  text-align: center;
}
.signup-form .form-block:after {
  clear: both;
}
.signup-form .form-block:after,
.signup-form .form-block:before {
  content: " ";
  display: table;
}
.signup-form .tos-notification {
  clear: both;
  margin-top: 15px;
  position: relative;
}
.signup-form .tos-notification .star {
  position: relative;
  top: 2px;
  color: #f1c40f;
  font-size: 1.5em;
}
.reset-password-form {
  position: absolute;
  top: 30%;
  left: 50%;
  margin: -100px 0 0 -280px;
  width: 500px;
  padding: 30px;
  border: 1px solid #bdc3c7;
  background: #fff;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.075);
}
.reset-password-form input {
  width: 60%;
}
.email-verify-block {
  width: 500px;
  margin: 60px auto 0 auto;
}
.email-verify-block .description {
  margin-bottom: 30px;
}
.email-verify-block .resend-email {
  padding: 15px;
  background: #bab0ff;
  cursor: pointer;
  display: inline-block;
  border: 1px solid #8d7dff;
  color: #fff;
  text-shadow: 0 0 1px #8d7dff;
  letter-spacing: .05em;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.075);
  margin: 10px 0;
}
.email-verify-block .resend-email:hover {
  color: #fff;
  background-color: #c7bfff;
}
.email-verify-block .resend-email:active {
  background-color: #ada1ff;
}
.email-verify-block .resend-email:focus {
  outline: none;
}
.email-verify-block .resend-email.small {
  padding: 5px 15px;
}
.email-verify-block .resend-email.primary {
  background-color: #7a9cff;
  border-color: #6089ff;
  text-shadow: 0 0 1px #6089ff;
  color: #fff;
}
.email-verify-block .resend-email.primary .text-box {
  border-color: #6089ff;
  text-shadow: 0 0 1px #6089ff;
}
.email-verify-block .resend-email.primary:hover {
  color: #fff;
  background-color: #89a7ff;
}
.email-verify-block .resend-email.primary:active {
  background-color: #6a90ff;
}
.email-verify-block .resend-email.secondary {
  background-color: #bab0ff;
  border-color: #8d7dff;
  text-shadow: 0 0 1px #8d7dff;
  color: #fff;
}
.email-verify-block .resend-email.secondary .text-box {
  border-color: #8d7dff;
  text-shadow: 0 0 1px #8d7dff;
}
.email-verify-block .resend-email.secondary:hover {
  color: #fff;
  background-color: #c7bfff;
}
.email-verify-block .resend-email.secondary:active {
  background-color: #ada1ff;
}
.email-verify-block .resend-email.green {
  background-color: #48D684;
  border-color: #2bc06a;
  color: #fff;
}
.email-verify-block .resend-email.green .text-box {
  border-color: #2bc06a;
}
.email-verify-block .resend-email.green:hover {
  color: #fff;
  background-color: #3cd37c;
}
.email-verify-block .resend-email.blue {
  background-color: #3498db;
  border-color: #2980b9;
  color: #fff;
}
.email-verify-block .resend-email.blue .text-box {
  border-color: #2980b9;
}
.email-verify-block .resend-email.blue:hover {
  color: #fff;
  background-color: #2791d9;
}
.email-verify-block .resend-email.bright-blue {
  background-color: #bab0ff;
  border-color: #8d7dff;
  color: #fff;
}
.email-verify-block .resend-email.bright-blue .text-box {
  border-color: #8d7dff;
  text-shadow: 0 0 1px #8d7dff;
}
.email-verify-block .resend-email.bright-blue:hover {
  color: #fff;
  background-color: #ada1ff;
}
.email-verify-block .resend-email.bright-blue:hover .text-box {
  border-color: #806eff;
}
.email-verify-block .resend-email.light-blue {
  background: #2fd9e9;
  border-color: #16bfcf;
}
.email-verify-block .resend-email.light-blue .text-box {
  border-color: #16bfcf;
  text-shadow: 0 0 1px #16bfcf;
}
.email-verify-block .resend-email.light-blue:hover {
  background-color: #21d6e8;
}
.email-verify-block .resend-email.light-blue:hover .text-box {
  border-color: #14b2c1;
}
.email-verify-block .resend-email.white {
  background: #fff;
  border-color: #ecf0f1;
  color: #7a9cff;
  font-family: "Helvetica Light", Helvetica, sans-serif;
  font-weight: normal;
}
.email-verify-block .resend-email.white .text-box {
  border-color: #adc2ff;
  text-shadow: 0 0 1px #adc2ff;
}
.email-verify-block .resend-email.white:hover {
  background-color: #ffffff;
  color: #6a90ff;
}
.email-verify-block .resend-email.white:hover .text-box {
  border-color: #e3b90d;
}
.email-verify-block .resend-email.white:hover .icon-box svg use {
  fill: #6a90ff;
}
.email-verify-block .resend-email.white .icon-box svg use {
  fill: #7a9cff;
}
.email-verify-block .resend-email.dark-blue {
  background: #34495e;
  border-color: #2c3e50;
}
.email-verify-block .resend-email.dark-blue .text-box {
  border-color: #2c3e50;
}
.email-verify-block .resend-email.dark-blue:hover {
  background-color: #2f4154;
}
.email-verify-block .resend-email.purple {
  background: #9b59b6;
  border-color: #8e44ad;
}
.email-verify-block .resend-email.purple .text-box {
  border-color: #8e44ad;
}
.email-verify-block .resend-email.purple:hover {
  background-color: #954eb1;
}
.email-verify-block .resend-email.fuchsia {
  background: #CF8FE5;
  border-color: #bd66db;
}
.email-verify-block .resend-email.fuchsia .text-box {
  border-color: #bd66db;
  text-shadow: 0 0 1px #bd66db;
}
.email-verify-block .resend-email.fuchsia:hover {
  background-color: #ca83e2;
}
.email-verify-block .resend-email.fuchsia:hover .text-box {
  border-color: #b859d9;
}
.email-verify-block .resend-email.orange {
  background: #ff7b34;
  border-color: #ff5a01;
}
.email-verify-block .resend-email.orange .text-box {
  border-color: #ff5a01;
}
.email-verify-block .resend-email.orange:hover {
  background-color: #ff7125;
}
.email-verify-block .resend-email.orange:hover .text-box {
  border-color: #f15400;
}
.email-verify-block .resend-email.teal {
  background: #36CA97;
  border-color: #30b688;
  text-shadow: 0 0 1px #30b688;
}
.email-verify-block .resend-email.teal .text-box {
  border-color: #30b688;
  text-shadow: 0 0 1px #30b688;
}
.email-verify-block .resend-email.teal:hover {
  background-color: #42cd9d;
}
.email-verify-block .resend-email.teal:hover .text-box {
  border-color: #52d1a6;
}
.email-verify-block .resend-email.teal:active {
  background-color: #32be8e;
}
.email-verify-block .resend-email.teal:active .text-box {
  border-color: #2eae82;
}
/* Icons ======================================= */
.pause-icon {
  position: relative;
}
.pause-icon:before,
.pause-icon:after {
  position: absolute;
  top: 0;
  content: '';
  background: #e74c3c;
  border: 1px solid #c0392b;
  width: 27%;
  height: 100%;
}
.pause-icon:before {
  left: 0;
}
.pause-icon:after {
  right: 0;
}