.content:before {
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: -1;
    display: block;
    background-color: #ffffff;
    /*background-image: url("../images/bg_login.jpg");*/
    width: 100%;
    height: 100%;
    /*background-size: cover;*/
    /*-webkit-filter: blur(2px);*/
    /*-moz-filter: blur(2px);*/
    /*-o-filter: blur(2px);*/
    /*-ms-filter: blur(2px);*/
    /*filter: blur(2px);*/
}

.content {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #ffffff;
    margin: auto auto;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -moz-box-shadow: 0 0 10px black;
    -webkit-box-shadow: 0 0 10px black;
    box-shadow: 0 0 10px black;
}

#nprogress {
    pointer-events: none
}

#nprogress .bar {
    background: #8e4294;
    position: fixed;
    z-index: 1031;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px
}

#nprogress .peg {
    display: block;
    position: absolute;
    right: 0px;
    width: 100px;
    height: 100%;
    box-shadow: 0 0 10px #0fae10, 0 0 5px #8e4294;
    opacity: 1.0;
    -webkit-transform: rotate(3deg) translate(0px, -4px);
    transform: rotate(3deg) translate(0px, -4px)
}

#nprogress .spinner {
    display: block;
    position: fixed;
    z-index: 1031;
    top: 15px;
    right: 15px
}

#nprogress .spinner-icon {
    width: 18px;
    height: 18px;
    box-sizing: border-box;
    border: solid 2px transparent;
    border-top-color: #8e4294;
    border-left-color: #8e4294;
    border-radius: 50%;
    -webkit-animation: nprogress-spinner 400ms linear infinite;
    animation: nprogress-spinner 400ms linear infinite
}

.nprogress-custom-parent {
    overflow: hidden;
    position: relative
}

.nprogress-custom-parent #nprogress .spinner, .nprogress-custom-parent #nprogress .bar {
    position: absolute
}

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

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

html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

* {
    box-sizing: border-box
}

body {
    margin: 0;
    background: #ffffff;
}

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

audio, canvas, progress, video {
    display: inline-block;
    vertical-align: baseline;
}

audio:not([controls]) {
    display: none;
    height: 0
}

[hidden], template {
    display: none
}

a {
    background: transparent
}

a:active, a:hover {
    outline: 0
}

abbr[title] {
    border-bottom: 1px dotted
}

b, strong {
    font-weight: bold
}

dfn {
    font-style: italic
}

h1 {
    font-size: 2em;
    margin: 0.67em 0
}

mark {
    background: #ff0;
    color: #000
}

small {
    font-size: 80%
}

sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sup {
    top: -0.5em
}

sub {
    bottom: -0.25em
}

img {
    border: 0
}

svg:not(:root) {
    overflow: hidden
}

figure {
    margin: 1em 40px
}

hr {
    box-sizing: content-box;
    height: 0
}

pre {
    overflow: auto
}

code, kbd, pre, samp {
    font-family: monospace, monospace;
    font-size: 1em
}

button, input, optgroup, select, textarea {
    color: inherit;
    font: inherit;
    margin: 0;
}

button {
    overflow: visible
}

button, select {
    text-transform: none
}

button, html input[type="button"], input[type="reset"], input[type="submit"] {
    -webkit-appearance: button;
    cursor: pointer;
}

button[disabled], html input[disabled] {
    cursor: default
}

button::-moz-focus-inner, input::-moz-focus-inner {
    border: 0;
    padding: 0
}

input {
    line-height: normal
}

input[type="checkbox"], input[type="radio"] {
    box-sizing: border-box;
    padding: 0;
}

input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {
    height: auto
}

input[type="search"] {
    -webkit-appearance: textfield;
    box-sizing: content-box
}

input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none
}

fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em
}

legend {
    border: 0;
    padding: 0;
}

textarea {
    overflow: auto
}

optgroup {
    font-weight: bold
}

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

td, th {
    padding: 0
}

@-webkit-keyframes heart-pulsate {
    0% {
        color: #C0392B;
        opacity: .8
    }
    50% {
        color: #e14c3d;
        opacity: 1
    }
    100% {
        color: #C0392B;
        opacity: .8
    }
}

@keyframes heart-pulsate {
    0% {
        color: #C0392B;
        opacity: .8
    }
    50% {
        color: #8e4294;
        opacity: 1
    }
    100% {
        color: #8e4294;
        opacity: .8
    }
}

::-moz-selection {
    background-color: #8e4294;
    color: #fff
}

::selection {
    background-color: #8e4294;
    color: #fff
}

html {
    background: #fff;
    color: #8e4294;
    font: normal 15px/1.618 Lato, "Helvetica Neue", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

body {
    min-height: 100vh;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column
}

body.has-banner {
    position: relative;
    top: 40px
}

[role="main"] {
    -webkit-flex: 1 0 auto;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto
}

[role="main"].push-down {
    margin-top: 102px
}

@media only screen and (max-width: 790px) {
    [role="main"] {
        padding-top: 46px
    }

    .main--full-height {
        padding-top: 0
    }
}

a {
    color: #8e4294;
    text-decoration: none
}

a:hover {
    text-decoration: underline;
    color: #8e4294
}

p, ul, ol, blockquote, table, pre {
    margin: 0 0 1.618rem
}

nav ul {
    list-style: none;
    padding: 0;
    margin: 0
}

figure {
    margin: 0
}

mark {
    text-decoration: none;
    background-repeat: repeat-x;
    background-position: 0 1em;
    background-size: 0.18667rem 0.18667rem;
    background-image: linear-gradient(to bottom, rgba(32, 78, 87, 0) 50%, rgba(32, 78, 87, 0.3) 50%);
    padding-bottom: 0.18667rem;
    text-shadow: -0.03333em -0.03333em 0 #fff, 0.03333em -0.03333em 0 #fff, 0.03333em 0.03333em 0 #fff, -0.03333em 0.03333em 0 #fff, 0.06667em 0 0 #fff, -0.06667em 0 0 #fff;
    color: #000
}

mark:hover {
    text-decoration: none
}

img, object {
    max-width: 100%;
    height: auto
}

abbr[title], abbr[data-tooltip] {
    cursor: help;
    border-bottom: 1px solid rgba(195, 195, 195, 0.7)
}

th {
    font-weight: bold;
    text-align: left;
    padding-right: 1.5em
}

blockquote {
    border-left: 2px solid #8e4294;
    padding-left: 1rem
}

dt {
    font-weight: 600;
    margin-bottom: 0.809rem
}

dd {
    margin: 0 0 1.618rem
}

code, pre, tt {
    font-family: Menlo, Consolas, "Liberation Mono", Courier, monospace
}

code {
    font-size: 0.8em;
    background-color: #f8f8fe;
    padding: 0.2em 0.4em;
    border-radius: 3px;
    color: #8e4294
}

kbd {
    padding: 0.2em 0.4em;
    border-radius: 3px;
    border: 1px solid #B3B3B3;
    font-family: Menlo, Consolas, "Liberation Mono", Courier, monospace;
    margin: 0 2px;
    font-size: 0.73333em;
    background-color: #FDFDFD;
    box-shadow: rgba(0, 0, 0, 0.1) 0 1px 0;
    position: relative;
    top: -0.1em
}

pre {
    background-color: #f6f6f6;
    border-radius: 4px;
    padding: 1.618rem;
    font-size: .8rem
}

pre code {
    font-size: inherit;
    padding: 0;
    background: none;
    border: 0;
    color: inherit
}

@media only screen and (max-width: 481px) {
    pre {
        font-size: .9rem;
        padding: 0.809rem
    }
}

h1, h2, h3, h4, h5, h6 {
    font-family: Lato, "Helvetica Neue", sans-serif;
    margin: 0 0 1.618rem;
    font-weight: normal;
    color: #8e4294
}

h1 .highlight, h2 .highlight, h3 .highlight, h4 .highlight, h5 .highlight, h6 .highlight {
    background-size: 0.4rem 0.4rem;
    background-position: 0 1.26em
}

h1.heading--strong, h1 strong, h2.heading--strong, h2 strong, h3.heading--strong, h3 strong, h4.heading--strong, h4 strong, h5.heading--strong, h5 strong, h6.heading--strong, h6 strong {
    font-weight: bold
}

h1.heading--thin, h2.heading--thin, h3.heading--thin, h4.heading--thin, h5.heading--thin, h6.heading--thin {
    font-weight: 300
}

.huge {
    line-height: 1.2;
    font-weight: bold
}

.huge .highlight {
    background-size: 0.46667rem 0.46667rem
}

h1 {
    font-size: 2.8rem;
    font-weight: bold
}

h1.huge {
    font-size: 4rem
}

h2 {
    font-size: 1.86667rem
}

h2.huge {
    font-size: 3.02033rem
}

h3 {
    font-size: 1.46667rem
}

h3.huge {
    font-size: 2.37312rem
}

h4, h5, h6 {
    font-family: Lato, "Helvetica Neue", sans-serif;
    font-weight: bold
}

h4 {
    font-size: 1.2rem
}

h4.huge {
    font-size: 1.94164rem
}

h5 {
    font-size: 1.06667rem
}

h5.huge {
    font-size: 1.7259rem
}

h6 {
    font-size: 1rem
}

h6.huge {
    font-size: 1.61803rem
}

@media only screen and (max-width: 481px) {
    h1 {
        font-size: 2.13333rem
    }

    h1.huge {
        font-size: 2.76144rem
    }

    h2 {
        font-size: 1.46667rem
    }

    h2.huge {
        font-size: 1.89849rem
    }

    h3 {
        font-size: 1.6rem
    }

    h3.huge {
        font-size: 2.07108rem
    }

    h4 {
        font-size: 1.33333rem
    }

    h4.huge {
        font-size: 1.7259rem
    }

    h5 {
        font-size: 1.2rem
    }

    h5.huge {
        font-size: 1.55331rem
    }

    h6 {
        font-size: 1rem
    }

    h6.huge {
        font-size: 1.61803rem
    }
}

select {
    padding: .2em .6em;
    font-size: 1.1em;
    border: 1px solid #b1c9d8;
    color: #8e4294;
    border-radius: 4px;
    box-shadow: rgba(143, 177, 199, 0.3) 0 1px 1px;
    transition: box-shadow .2s ease;
    background-color: #fff;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

select:hover {
    border-color: #a0bdd0
}

select:focus {
    outline: 0
}

select.style--bare {
    border: 0;
    padding: 0;
    -webkit-appearance: none;
    outline: none;
    box-shadow: none
}

select.size--mini {
    padding: .1em .5em;
    font-size: .9rem
}

label.select {
    position: relative;
    font-weight: normal;
    display: inline-block
}

label.select select {
    padding-right: 2em
}

label.select::after {
    content: '';
    display: inline-block;
    pointer-events: none;
    position: absolute;
    right: 10px;
    top: calc(50% - 2px);
    width: 0;
    height: 0;
    border: solid transparent;
    border-width: 4px 4px 0 4px;
    border-top-color: #8FB1C7;
    border-top-width: 6.928px;
    transition: border-top-color .3s ease
}

label.select:hover::after {
    border-top-color: #6d99b6
}

input[type="text"].style--read-only, input[type="url"].style--read-only, input[type="email"].style--read-only, input[type="password"].style--read-only, input[type="search"].style--read-only, input[type="number"].style--read-only, textarea.style--read-only, .text-field.style--read-only, input[type="text"].style--flat--read-only, input[type="url"].style--flat--read-only, input[type="email"].style--flat--read-only, input[type="password"].style--flat--read-only, input[type="search"].style--flat--read-only, input[type="number"].style--flat--read-only, textarea.style--flat--read-only, .text-field.style--flat--read-only {
    font-family: Menlo, Consolas, "Liberation Mono", Courier, monospace;
    font-size: 0.93333em
}

input[type="text"], input[type="url"], input[type="email"], input[type="password"], input[type="search"], input[type="number"], textarea, .text-field {
    box-sizing: border-box;
    -webkit-appearance: none;
    height: auto;
    margin: 5px 0;
    display: inline-block;
    border: 1px solid #b4e1f3;
    border-radius: 4px;
    padding: .5em .6em;
    background-color: #fefefe;
    box-shadow: inset rgba(0, 0, 0, 0.05) 0 1px 2px;
    transition: color .15s ease-out, opacity .15s ease-out;
}

input[type="text"]:focus, input[type="url"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="number"]:focus, textarea:focus, .text-field:focus {
    outline: 0;
    color: #8e4294;
    border-color: #6fb5d1;
    background-color: #fff;
    box-shadow: none
}

input[type="text"]::-webkit-input-placeholder, input[type="url"]::-webkit-input-placeholder, input[type="email"]::-webkit-input-placeholder, input[type="password"]::-webkit-input-placeholder, input[type="search"]::-webkit-input-placeholder, input[type="number"]::-webkit-input-placeholder, textarea::-webkit-input-placeholder, .text-field::-webkit-input-placeholder {
    color: rgba(143, 177, 199, 0.8);
    font-style: italic;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

input[type="text"]::-moz-placeholder, input[type="url"]::-moz-placeholder, input[type="email"]::-moz-placeholder, input[type="password"]::-moz-placeholder, input[type="search"]::-moz-placeholder, input[type="number"]::-moz-placeholder, textarea::-moz-placeholder, .text-field::-moz-placeholder {
    color: rgba(143, 177, 199, 0.8);
    font-style: italic;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

input[type="text"]:-ms-input-placeholder, input[type="url"]:-ms-input-placeholder, input[type="email"]:-ms-input-placeholder, input[type="password"]:-ms-input-placeholder, input[type="search"]:-ms-input-placeholder, input[type="number"]:-ms-input-placeholder, textarea:-ms-input-placeholder, .text-field:-ms-input-placeholder {
    color: rgba(143, 177, 199, 0.8);
    font-style: italic;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

input[type="text"][disabled], input[type="url"][disabled], input[type="email"][disabled], input[type="password"][disabled], input[type="search"][disabled], input[type="number"][disabled], textarea[disabled], .text-field[disabled] {
    color: #999;
    cursor: not-allowed;
    box-shadow: rgba(0, 0, 0, 0.05) 0 0 2px;
    border-color: #c1dbe5;
    background-color: #f9f9f9
}

input[type="text"].size--mini, input[type="url"].size--mini, input[type="email"].size--mini, input[type="password"].size--mini, input[type="search"].size--mini, input[type="number"].size--mini, textarea.size--mini, .text-field.size--mini {
    font-size: .8rem;
    padding: 6px
}

input[type="text"].size--large, input[type="url"].size--large, input[type="email"].size--large, input[type="password"].size--large, input[type="search"].size--large, input[type="number"].size--large, textarea.size--large, .text-field.size--large {
    font-size: 1.1rem;
    width: 30rem
}

input[type="text"].mode--negative, input[type="url"].mode--negative, input[type="email"].mode--negative, input[type="password"].mode--negative, input[type="search"].mode--negative, input[type="number"].mode--negative, textarea.mode--negative, .text-field.mode--negative {
    color: #FF6E70;
    box-shadow: inset #FF6E70 0 -2px 0
}

input[type="text"].mode--positive, input[type="url"].mode--positive, input[type="email"].mode--positive, input[type="password"].mode--positive, input[type="search"].mode--positive, input[type="number"].mode--positive, textarea.mode--positive, .text-field.mode--positive {
    color: #3BD788;
    box-shadow: inset #3BD788 0 -2px 0 0
}

input[type="text"].style--code, input[type="url"].style--code, input[type="email"].style--code, input[type="password"].style--code, input[type="search"].style--code, input[type="number"].style--code, textarea.style--code, .text-field.style--code {
    font-family: Menlo, Consolas, "Liberation Mono", Courier, monospace;
    font-size: 0.8em;
    color: #666
}

input[type="text"].style--bare, input[type="text"].style--editing, input[type="url"].style--bare, input[type="url"].style--editing, input[type="email"].style--bare, input[type="email"].style--editing, input[type="password"].style--bare, input[type="password"].style--editing, input[type="search"].style--bare, input[type="search"].style--editing, input[type="number"].style--bare, input[type="number"].style--editing, textarea.style--bare, textarea.style--editing, .text-field.style--bare, .text-field.style--editing {
    background-color: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    border-radius: 0
}

input[type="text"].style--editing, input[type="url"].style--editing, input[type="email"].style--editing, input[type="password"].style--editing, input[type="search"].style--editing, input[type="number"].style--editing, textarea.style--editing, .text-field.style--editing {
    padding: .3em .1em;
    border-bottom: 1px dashed rgba(102, 142, 167, 0.5);
    color: #668ea7
}

input[type="text"].style--editing:focus, input[type="url"].style--editing:focus, input[type="email"].style--editing:focus, input[type="password"].style--editing:focus, input[type="search"].style--editing:focus, input[type="number"].style--editing:focus, textarea.style--editing:focus, .text-field.style--editing:focus {
    color: inherit;
    border-bottom-color: rgba(102, 142, 167, 0.9)
}

input[type="text"].style--flat, input[type="url"].style--flat, input[type="email"].style--flat, input[type="password"].style--flat, input[type="search"].style--flat, input[type="number"].style--flat, textarea.style--flat, .text-field.style--flat {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: inset #E4EAEB 0 -1px 0;
    padding: 5px 0;
    max-width: 100%;
    color: rgba(32, 78, 87, 0.8);
    transition: color .2s ease-out, box-shadow .1s ease-out
}

input[type="text"].style--flat::-webkit-input-placeholder, input[type="url"].style--flat::-webkit-input-placeholder, input[type="email"].style--flat::-webkit-input-placeholder, input[type="password"].style--flat::-webkit-input-placeholder, input[type="search"].style--flat::-webkit-input-placeholder, input[type="number"].style--flat::-webkit-input-placeholder, textarea.style--flat::-webkit-input-placeholder, .text-field.style--flat::-webkit-input-placeholder {
    color: rgba(143, 177, 199, 0.8)
}

input[type="text"].style--flat::-moz-placeholder, input[type="url"].style--flat::-moz-placeholder, input[type="email"].style--flat::-moz-placeholder, input[type="password"].style--flat::-moz-placeholder, input[type="search"].style--flat::-moz-placeholder, input[type="number"].style--flat::-moz-placeholder, textarea.style--flat::-moz-placeholder, .text-field.style--flat::-moz-placeholder {
    color: rgba(143, 177, 199, 0.8)
}

input[type="text"].style--flat:-ms-input-placeholder, input[type="url"].style--flat:-ms-input-placeholder, input[type="email"].style--flat:-ms-input-placeholder, input[type="password"].style--flat:-ms-input-placeholder, input[type="search"].style--flat:-ms-input-placeholder, input[type="number"].style--flat:-ms-input-placeholder, textarea.style--flat:-ms-input-placeholder, .text-field.style--flat:-ms-input-placeholder {
    color: rgba(143, 177, 199, 0.8)
}

input[type="text"].style--flat:focus, input[type="url"].style--flat:focus, input[type="email"].style--flat:focus, input[type="password"].style--flat:focus, input[type="search"].style--flat:focus, input[type="number"].style--flat:focus, textarea.style--flat:focus, .text-field.style--flat:focus {
    background: transparent;
    box-shadow: inset #3BD788 0 -2px 0
}

input[type="text"].style--flat.mode--negative, input[type="url"].style--flat.mode--negative, input[type="email"].style--flat.mode--negative, input[type="password"].style--flat.mode--negative, input[type="search"].style--flat.mode--negative, input[type="number"].style--flat.mode--negative, textarea.style--flat.mode--negative, .text-field.style--flat.mode--negative {
    box-shadow: inset #FF6E70 0 -2px 0
}

input[type="text"].style--flat.size--large, input[type="url"].style--flat.size--large, input[type="email"].style--flat.size--large, input[type="password"].style--flat.size--large, input[type="search"].style--flat.size--large, input[type="number"].style--flat.size--large, textarea.style--flat.size--large, .text-field.style--flat.size--large {
    padding: 5px 0 .8rem .5rem;
    font-size: 1.6rem
}

input[type="text"].style--flat--read-only, input[type="url"].style--flat--read-only, input[type="email"].style--flat--read-only, input[type="password"].style--flat--read-only, input[type="search"].style--flat--read-only, input[type="number"].style--flat--read-only, textarea.style--flat--read-only, .text-field.style--flat--read-only {
    border-width: 0 0 1px;
    box-shadow: none;
    padding: 0;
    border-radius: 0;
    font-size: 0.66667rem
}

input[type="text"].mode--selectable, input[type="url"].mode--selectable, input[type="email"].mode--selectable, input[type="password"].mode--selectable, input[type="search"].mode--selectable, input[type="number"].mode--selectable, textarea.mode--selectable, .text-field.mode--selectable {
    cursor: pointer;
    -webkit-user-select: text;
    -webkit-tap-highlight-color: transparent
}

input[type="text"].style--pill, input[type="url"].style--pill, input[type="email"].style--pill, input[type="password"].style--pill, input[type="search"].style--pill, input[type="number"].style--pill, textarea.style--pill, .text-field.style--pill {
    background-color: #fff;
    color: #1DABF2;
    border: 1px solid rgba(112, 182, 236, 0.3);
    box-shadow: none;
    border-radius: 3em;
    font-weight: bold;
    text-align: center;
    padding: 0.4em 1em
}

input[type="text"].style--pill:focus, input[type="url"].style--pill:focus, input[type="email"].style--pill:focus, input[type="password"].style--pill:focus, input[type="search"].style--pill:focus, input[type="number"].style--pill:focus, textarea.style--pill:focus, .text-field.style--pill:focus {
    background-color: rgba(255, 255, 255, 0.9)
}

input[type="text"].style--pill.mode--primary, input[type="url"].style--pill.mode--primary, input[type="email"].style--pill.mode--primary, input[type="password"].style--pill.mode--primary, input[type="search"].style--pill.mode--primary, input[type="number"].style--pill.mode--primary, textarea.style--pill.mode--primary, .text-field.style--pill.mode--primary {
    color: #3BD788
}

input[type="text"].style--pill.mode--attention, input[type="url"].style--pill.mode--attention, input[type="email"].style--pill.mode--attention, input[type="password"].style--pill.mode--attention, input[type="search"].style--pill.mode--attention, input[type="number"].style--pill.mode--attention, textarea.style--pill.mode--attention, .text-field.style--pill.mode--attention {
    color: #F3B109
}

input[type="text"].style--pill.size--large, input[type="url"].style--pill.size--large, input[type="email"].style--pill.size--large, input[type="password"].style--pill.size--large, input[type="search"].style--pill.size--large, input[type="number"].style--pill.size--large, textarea.style--pill.size--large, .text-field.style--pill.size--large {
    font-size: 1.1em;
    padding: 0.6em 2em
}

input[type="date"], input[type="number"] {
    padding: 0.6em
}

input[type="search"] {
    border-radius: 3em;
    padding: .5em;
    padding-left: 2.3em;
    background-image: url("/images/search.svg");
    background-repeat: no-repeat;
    background-position: 9px center;
    background-size: 1em 1em
}

input[type="search"].size--mini {
    padding-left: 2em;
    background-size: 12px 12px;
    background-position: 7px center
}

input[type="number"] {
    width: 5em
}

textarea {
    display: block;
    resize: vertical
}

textarea.size--short {
    height: 4.854rem;
    min-height: 4.854rem
}

textarea.style--flat {
    padding-left: .5rem;
    padding-right: .5rem
}

label {
    font-weight: bold;
    display: block;
    font-size: .9rem
}

label input[type="checkbox"], label input[type="radio"] {
    margin-right: 5px;
    position: relative;
    top: -1px
}

label.inline {
    display: inline-block
}

label.inline + input {
    margin-left: 5px;
    margin-right: 15px
}

label[for] {
    cursor: pointer
}

.full-form {
    width: 100%
}

.short-form {
    max-width: 40rem
}

.input-row {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

.input-row label.input-row__label {
    margin-right: 2rem;
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    align-self: center
}

.input-row.input-row--centered {
    -webkit-align-items: center;
    -ms-flex-align: center;
    -ms-grid-row-align: center;
    align-items: center
}

.input-row.input-row--top {
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    -ms-grid-row-align: flex-start;
    align-items: flex-start
}

.input-row .input-row__item {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    margin: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: 0
}

.input-row input[type="submit"], .input-row .btn {
    border-radius: 0 4px 4px 0
}

.form-label {
    font-family: Lato, "Helvetica Neue", sans-serif;
    display: block;
    color: gray;
    font-size: 0.8rem;
    font-weight: normal;
    line-height: 1.2;
    margin-bottom: 5px
}

.form-label__description {
    color: #aaaaaa;
    margin-left: 3px
}

.inline-label {
    display: inline-block;
    font-weight: 300;
    font-size: 1.46667em
}

@media only screen and (max-width: 481px) {
    .inline-label {
        font-size: 1.2em
    }
}

.form-list {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-top: 5px
}

.form-list li:not(:last-child) {
    margin-bottom: 5px
}

.form-list--horizontal li {
    display: inline-block;
    margin-right: 2rem
}

.form-list--horizontal li:not(:last-child) {
    margin-bottom: 0
}

input[type="range"] {
    -webkit-appearance: none;
    width: 100%
}

input[type="range"]:focus {
    outline: 0
}

input[type="range"]:focus::-webkit-slider-thumb {
    background-color: #fff
}

input[type="range"]:focus::-moz-range-thumb {
    background-color: #fff
}

input[type="range"]:focus::-ms-thumb {
    background-color: #fff
}

input[type="range"]::-ms-track {
    width: 100%;
    cursor: pointer;
    background: transparent;
    border-color: transparent;
    color: transparent
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    background-color: #fafafa;
    cursor: pointer;
    box-shadow: rgba(0, 0, 0, 0.2) 0 1px 1px, rgba(0, 0, 0, 0.3) 0 0 1px, rgba(0, 0, 0, 0.2) 0 1px 5px;
    border-radius: 100%;
    width: 17px;
    height: 17px;
    position: relative;
    top: -4.5px;
    transition: background-color .2s ease-out
}

input[type="range"]::-webkit-slider-thumb:hover {
    background-color: #fff
}

input[type="range"]::-moz-range-thumb {
    -webkit-appearance: none;
    background-color: #fafafa;
    cursor: pointer;
    box-shadow: rgba(0, 0, 0, 0.2) 0 1px 1px, rgba(0, 0, 0, 0.3) 0 0 1px, rgba(0, 0, 0, 0.2) 0 1px 5px;
    border-radius: 100%;
    width: 17px;
    height: 17px;
    position: relative;
    top: -4.5px;
    transition: background-color .2s ease-out
}

input[type="range"]::-moz-range-thumb:hover {
    background-color: #fff
}

input[type="range"]::-ms-thumb {
    -webkit-appearance: none;
    background-color: #fafafa;
    cursor: pointer;
    box-shadow: rgba(0, 0, 0, 0.2) 0 1px 1px, rgba(0, 0, 0, 0.3) 0 0 1px, rgba(0, 0, 0, 0.2) 0 1px 5px;
    border-radius: 100%;
    width: 17px;
    height: 17px;
    position: relative;
    top: -4.5px;
    transition: background-color .2s ease-out
}

input[type="range"]::-ms-thumb:hover {
    background-color: #fff
}

input[type="range"]::-webkit-slider-runnable-track {
    background-color: #3BD788;
    border-radius: 2em;
    height: 8px;
    cursor: pointer
}

input[type="range"]::-moz-range-track {
    background-color: #3BD788;
    border-radius: 2em;
    height: 8px;
    cursor: pointer
}

input[type="range"]::-ms-track {
    background-color: #3BD788;
    border-radius: 2em;
    height: 8px;
    cursor: pointer
}

.range-steps {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    position: relative;
    text-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.range-steps .range__step--mark {
    height: 5px;
    width: 1px;
    background-color: #ccc
}

.form__flow-switcher {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
    margin: 0;
    padding: 0;
    list-style: none
}

.form__flow-switcher a {
    display: inline-block;
    padding: .4em 1rem;
    font-size: 1.2em;
    font-weight: 300;
    color: #6d99b6;
    transition: color .2s, box-shadow .2s
}

.form__flow-switcher a:hover {
    text-decoration: none;
    color: #204e57
}

.form__flow-switcher a.link-current {
    position: relative;
    padding: 0.4em 1rem;
    color: #1DABF2
}

.form__flow-switcher a.link-current::before, .form__flow-switcher a.link-current::after {
    content: '';
    display: inline-block;
    position: absolute;
    border-style: solid;
    border-color: transparent
}

.form__flow-switcher a.link-current::before {
    border-width: 11px;
    border-bottom-color: #ececec;
    bottom: -17px;
    left: calc(50% - 11px)
}

.form__flow-switcher a.link-current::after {
    border-width: 11px;
    border-bottom-color: #fff;
    bottom: -18px;
    left: calc(50% - 11px)
}

.get-started-section {
    text-align: center;
    padding: 4.854rem 10%
}

.get-started-section h1 {
    margin-bottom: 0
}

.get-started-section h1 + p {
    margin: 0.53933rem 0 3.236rem;
    font-size: 1.1em
}

@media only screen and (max-width: 600px) {
    .get-started-section h1 {
        font-size: 6vw
    }
}

.download-section {
    text-align: center;
    margin: 3.236rem auto;
    width: 90%;
    max-width: 58rem;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center
}

.download-section .sdk-token {
    margin-top: 3.236rem;
    font-size: 1.1em;
    color: gray
}

.download-section .sdk-token p {
    margin-bottom: 1rem
}

.download-section .sdk-token :last-child {
    margin-bottom: 0
}

.download-section .sdk-token label {
    display: block;
    font-size: 1em;
    color: inherit;
    font-weight: 300;
    margin-bottom: .5rem
}

.download-section .sdk-token small {
    font-size: .9em
}

.download-section .sdk-token .sdk-token__field {
    font-weight: 300;
    color: #555;
    font-size: 1.8em;
    text-align: center
}

.download-section .sdk-token .sdk-token__field:focus {
    background-color: transparent;
    border: 0;
    box-shadow: none
}

.download-section .coming-soon h2, .download-section .coming-soon p {
    opacity: .7
}

.download-section .coming-soon a {
    cursor: default;
    pointer-events: none;
    position: relative
}

.download-section .coming-soon a::after {
    content: 'Coming soon';
    display: block;
    position: absolute;
    top: 35%;
    left: calc(50% - 63px);
    color: #fff;
    background-color: rgba(0, 0, 0, 0.77);
    border-radius: 3em;
    padding: 0 0.8em;
    font-size: 1.3em;
    font-weight: 300
}

.download-section .coming-soon img {
    -webkit-filter: grayscale(100%) brightness(140%);
    opacity: 0.3
}

.download-section .blank__flows {
    list-style: none;
    padding: 0;
    margin: 0;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center
}

.download-section .blank__flows--sdk figure img {
    position: relative;
    left: 8px;
    top: -10px
}

.download-section .blank__flows h2 {
    margin-bottom: 0;
    font-size: 1.33333rem;
    color: #204e57
}

.download-section .blank__flows a {
    display: block;
    padding: 2rem 1rem;
    color: #999
}

.download-section .blank__flows a > :last-child {
    margin-bottom: 0
}

.download-section .blank__flows a:hover {
    text-decoration: none;
    color: gray
}

.download-section .blank__flows a:hover .logo--invision {
    fill: #323A45
}

.download-section .blank__flows a:hover .logo--marvel {
    fill: #2493e8
}

.download-section .blank__flows a:hover .logo--osx {
    fill: #222
}

.download-section .blank__flows a:hover .logo--ios, .download-section .blank__flows a:hover .logo--appletv {
    fill: #555
}

.download-section .blank__flows a:hover .logo--android {
    fill: #A4C639
}

.download-section .blank__flows li {
    border-radius: 4px;
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid #eee;
    transition: background-color .15s ease
}

.download-section .blank__flows li:hover {
    background-color: #fff
}

.download-section .blank__flows figure {
    height: 9rem;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.download-section .blank__flows figure img {
    height: 100%
}

.download-section .blank__flows figure .sep {
    font-size: 3em;
    font-weight: 300;
    color: #d8d8d8;
    -webkit-transform: rotate(-10deg) scaleY(1.2);
    transform: rotate(-10deg) scaleY(1.2);
    display: inline-block;
    margin: 0 -15px
}

.download-section .blank__flows .flow__logo {
    max-width: 100%;
    max-height: 45px;
    fill: #999;
    transition: fill .15s ease-out;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.download-section .blank__flows .flow__logo.logo--osx, .download-section .blank__flows .flow__logo.logo--ios, .download-section .blank__flows .flow__logo.logo--appletv {
    max-height: 35px
}

.download-section .blank__flows p {
    margin: 0
}

.download-section footer {
    margin-top: 3.236rem;
    font-size: 1.1em;
    font-weight: 300
}

.download-section footer a {
    color: #204e57;
    text-decoration: none;
    background-repeat: repeat-x;
    background-position: 0 1.1em;
    background-size: 0.18667rem 0.18667rem;
    background-image: linear-gradient(to bottom, rgba(32, 78, 87, 0) 50%, #204e57 50%);
    padding-bottom: 0.19333rem;
    text-shadow: -0.03333em -0.03333em 0 #F6FBFD, 0.03333em -0.03333em 0 #F6FBFD, 0.03333em 0.03333em 0 #F6FBFD, -0.03333em 0.03333em 0 #F6FBFD, 0.06667em 0 0 #F6FBFD, -0.06667em 0 0 #F6FBFD
}

.download-section footer a:hover {
    text-decoration: none
}

@media only screen and (max-width: 481px) {
    .download-section h1 {
        font-size: 7vw
    }
}

@media only screen and (min-width: 870px) {
    .download-section .blank__flows li {
        -webkit-flex-basis: 17rem;
        -ms-flex-preferred-size: 17rem;
        flex-basis: 17rem
    }
}

@media only screen and (max-width: 870px) {
    .download-section h1 {
        margin-bottom: 2rem
    }

    .download-section .blank__flows {
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-align-items: center;
        -ms-flex-align: center;
        -ms-grid-row-align: center;
        align-items: center
    }

    .download-section .blank__flows li {
        max-width: 17rem;
        width: 95%;
        margin-bottom: 1.618rem;
        -webkit-flex: 1 0 auto;
        -ms-flex: 1 0 auto;
        flex: 1 0 auto
    }
}

.nav-overlay {
    position: fixed;
    z-index: 1002;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
    padding: 4.854rem 2% 1.618rem;
    -webkit-overflow-scrolling: touch;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    background-color: #204e57;
    color: #1b2c32;
    text-align: center;
    font-size: 1.4rem
}

.nav-overlay .nav--current a {
    color: #62a5b2
}

.nav-overlay .nav-overlay__close {
    position: absolute;
    display: inline-block;
    right: 1.5rem;
    height: 2.5rem;
    top: 1.5rem;
    width: 2.5rem
}

.nav-overlay .nav-overlay__close::before, .nav-overlay .nav-overlay__close::after {
    content: '';
    height: 2px;
    display: inline-block;
    background-color: #fff;
    width: 2rem;
    position: absolute;
    left: 4px;
    top: 17px
}

.nav-overlay .nav-overlay__close::before {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg)
}

.nav-overlay .nav-overlay__close::after {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg)
}

.nav-overlay .nav-overlay__close.tap::before, .nav-overlay .nav-overlay__close.tap::after {
    background-color: #fff
}

.nav-overlay .navigation__home .icon-text {
    display: inline
}

.nav-overlay .navigation__home .icon {
    display: none
}

.nav-overlay h2 {
    margin: 1.618rem 0 0.809rem;
    text-transform: capitalize;
    color: #fff;
    font-weight: bold
}

.nav-overlay ul {
    margin-bottom: 3.236rem;
    line-height: 2
}

.nav-overlay a {
    color: rgba(255, 255, 255, 0.8);
    display: inline-block;
    transition: color .15s ease-out, -webkit-transform .1s ease-out;
    transition: transform .1s ease-out, color .15s ease-out;
    transition: transform .1s ease-out, color .15s ease-out, -webkit-transform .1s ease-out;
    -webkit-tap-highlight-color: transparent
}

.nav-overlay a:hover {
    text-decoration: none
}

.nav-overlay a.tap {
    color: #fff
}

.modal-markdown {
    font-size: 1.2em
}

.modal-markdown .modal__inner {
    max-width: 44em;
    padding: 0 2em
}

.modal-markdown pre {
    box-shadow: rgba(114, 182, 234, 0.2) 0 2px 20px;
    border-radius: 6px;
    background-color: #fff;
    text-align: left;
    padding-left: 10%;
    padding-right: 10%
}

@-webkit-keyframes slideMenuDown {
    0% {
        opacity: 0;
        -webkit-transform: translate(0, -50%);
        transform: translate(0, -50%)
    }
    100% {
        opacity: 1;
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0)
    }
}

@keyframes slideMenuDown {
    0% {
        opacity: 0;
        -webkit-transform: translate(0, -50%);
        transform: translate(0, -50%)
    }
    100% {
        opacity: 1;
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0)
    }
}

[role="banner"] {
    padding: 0 2%;
    position: relative;
    z-index: 100;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    transition: background-color .55s ease-out
}

[role="banner"].background--solid {
    box-shadow: rgba(0, 0, 0, 0.1) 0 1px 1px;
    background-color: #fff
}

@media only screen and (max-width: 790px) {
    @supports ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))) {
        [role="banner"].background--solid {
            -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
            background-color: rgba(255, 255, 255, 0.85)
        }
    }
}

[role="banner"].header--fixed {
    top: 0;
    left: 0;
    right: 0;
    z-index: 1002;
    position: fixed
}

[role="banner"].header--floating {
    top: 0;
    left: 0;
    right: 0;
    z-index: 1002;
    position: absolute
}

[role="banner"].has-background {
    box-shadow: rgba(0, 0, 0, 0.1) 0 1px 3px
}

@media only screen and (max-width: 790px) {
    [role="banner"] {
        top: 0;
        left: 0;
        right: 0;
        z-index: 1002;
        position: fixed;
        padding: 0 3%
    }
}

[role="banner"].fixed-header {
    top: 0;
    left: 0;
    right: 0;
    z-index: 1002;
    position: fixed;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0)
}

[role="banner"].fixed-header.is-transitioning {
    transition: -webkit-transform .3s ease;
    transition: transform .3s ease;
    transition: transform .3s ease, -webkit-transform .3s ease
}

[role="banner"].fixed-header.is-minimized {
    visibility: hidden
}

[role="banner"].fixed-header.is-maximized {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

.footer-main {
    background-color: #22606C;
    box-shadow: inset #eee 0 1px 0;
    padding: 2.427rem 10% 1.618rem 5%;
    color: #6e6c6d
}

.footer-main .footer__inner {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.footer-main .footer__bottom {
    margin-top: 3.236rem;
    text-align: right
}

.footer-main.footer--dark {
    box-shadow: none;
    background-color: #1d2328;
    color: #3e4a54
}

.footer-main.footer--dark h2 {
    color: #fff
}

.footer-main.footer--dark a {
    color: #8e9fac
}

.footer-main.footer--dark a:hover {
    color: rgba(255, 255, 255, 0.9)
}

.footer-main.footer--dark .footer__bottom a {
    color: #3e4a54
}

.footer-main.footer--dark .footer__bottom a:hover {
    text-decoration: underline;
    color: #5a6c7a
}

.footer-main.footer--dark .logo__swirl, .footer-main.footer--dark .logo__text {
    fill: #8e9fac
}

.footer-main.footer--dark .lookback-logo:hover .logo__swirl, .footer-main.footer--dark .lookback-logo:hover .logo__text {
    fill: #fff
}

.footer-main.footer--dark .nav--current a {
    color: #fff
}

.footer-main h2 {
    font-weight: bold;
    font-family: Lato, "Helvetica Neue", sans-serif;
    font-size: 1.1em;
    margin-bottom: 10px
}

.footer-main .footer-nav {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    max-width: 800px
}

@media only screen and (min-width: 769px) {
    .footer-main .footer-nav {
        -webkit-flex-basis: 75%;
        -ms-flex-preferred-size: 75%;
        flex-basis: 75%
    }
}

@media only screen and (min-width: 481px) {
    .footer-main .footer-nav .footer-nav__group:not(:last-child) {
        margin-right: 1rem;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1
    }
}

.footer-main .footer-nav ul {
    line-height: 1.8
}

.footer-main a {
    color: #7d7b7c
}

.footer-main a:hover {
    color: #204e57;
    text-decoration: none
}

.footer-main .nav--current a {
    color: #204e57
}

.footer-main .lookback-logo {
    width: 15em;
    height: 3em
}

.footer-main .logo__swirl, .footer-main .logo__text {
    fill: #7d7b7c;
    transition: fill .5s
}

.footer-main .lookback-logo:hover .logo__swirl, .footer-main .lookback-logo:hover .logo__text {
    fill: #646263
}

.footer-main .footer__logo {
    margin: 0;
    padding: 0;
    font-size: .7em
}

@media only screen and (max-width: 1010px) {
    .footer-main .footer__inner {
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column
    }

    .footer-main .footer-nav {
        margin-top: 1.618rem
    }
}

@media only screen and (max-width: 481px) {
    .footer-main {
        font-size: 1rem
    }

    .footer-main a {
        padding: .2em .4em;
        font-size: 1.1em;
        display: inline-block
    }

    .footer-main .lookback-logo {
        width: 10em;
        height: 2em
    }

    .footer-main .footer__inner {
        -webkit-align-items: center;
        -ms-flex-align: center;
        -ms-grid-row-align: center;
        align-items: center
    }

    .footer-main .footer-nav {
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-align-items: center;
        -ms-flex-align: center;
        -ms-grid-row-align: center;
        align-items: center;
        text-align: center
    }

    .footer-main .footer-nav__group {
        margin-bottom: 1.618rem
    }

    .footer-main .footer__bottom {
        text-align: center;
        margin-top: 1.618rem
    }
}

.footer-minimal {
    text-align: center;
    margin-bottom: 1.618rem;
    padding: 0.809rem 0
}

.footer-minimal .lookback-logo {
    font-size: 1rem
}

.footer-minimal .lookback-logo .logo__text {
    fill: rgba(32, 78, 87, 0.7)
}

.footer-minimal .lookback-logo .logo__swirl {
    transition: fill .2s ease;
    fill: rgba(32, 78, 87, 0.4)
}

.footer-minimal ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.footer-minimal li {
    min-width: 7rem
}

.footer-minimal a {
    color: rgba(32, 78, 87, 0.7)
}

.footer-minimal a:hover {
    color: rgba(32, 78, 87, 0.9)
}

.footer-minimal__logo {
    padding: 0 2em
}

.footer-minimal__logo--mobile {
    display: none
}

.footer-minimal__logo a {
    position: relative;
    top: 3px
}

@media only screen and (max-width: 700px) {
    .footer-minimal {
        font-size: 1em
    }

    .footer-minimal ul {
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column
    }

    .footer-minimal li {
        min-width: 0;
        padding: .5em 0
    }

    .footer-minimal .footer-minimal__logo {
        display: none
    }

    .footer-minimal .footer-minimal__logo--mobile {
        display: block;
        margin-bottom: 1.618rem
    }
}

.footer-onboarding {
    background-color: #fff;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 1.5em 2em
}

@media only screen and (max-width: 481px) {
    .footer-onboarding {
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-align-items: flex-start;
        -ms-flex-align: start;
        -ms-grid-row-align: flex-start;
        align-items: flex-start
    }

    .footer-onboarding nav {
        margin-top: 1.618rem
    }

    .footer-onboarding nav li:first-child {
        padding-left: 0
    }
}

.footer-onboarding .logo-link {
    display: inherit
}

.footer-onboarding nav li {
    display: inline-block;
    padding: 0 1em
}

.footer-onboarding nav a {
    color: #204e57;
    font-weight: bold
}

.dropdown-container {
    position: relative
}

.dropdown {
    border-radius: 4px;
    white-space: normal;
    background-color: #fff;
    position: absolute;
    padding: 1rem;
    z-index: 1001;
    border: 1px solid rgba(89, 171, 234, 0.3);
    -webkit-transform-origin: center top;
    transform-origin: center top;
    max-width: 460px;
    text-align: left;
    box-shadow: rgba(114, 182, 234, 0.1) 0 1px 4px, rgba(0, 0, 0, 0.1) 0 2px 10px;
    top: 120%
}

.dropdown.dropdown--tight {
    padding: 0;
    border: 0
}

.dropdown[data-dropdown-align="center"] > .dropdown__arrow--left, .dropdown[data-dropdown-align="center"] > .dropdown__arrow--right {
    top: calc(50% - 8px)
}

.dropdown[data-dropdown-align="center"] > .dropdown__arrow--left::before, .dropdown[data-dropdown-align="center"] > .dropdown__arrow--right::before {
    top: calc(50% - 9px)
}

.dropdown[data-dropdown-align="center"] > .dropdown__arrow--up, .dropdown[data-dropdown-align="center"] > .dropdown__arrow--down {
    left: calc(50% - 8px)
}

.dropdown[data-dropdown-align="center"] > .dropdown__arrow--up::before, .dropdown[data-dropdown-align="center"] > .dropdown__arrow--down::before {
    left: calc(50% - 9px)
}

.dropdown[data-dropdown-align="right"] {
    text-align: right;
    -webkit-transform-origin: right top;
    transform-origin: right top
}

.dropdown[data-dropdown-align="right"] > .dropdown__arrow {
    right: 1rem;
    left: auto
}

.dropdown[data-dropdown-align="right"] > .dropdown__arrow::before {
    right: -9px
}

.dropdown[data-dropdown-align="left"] {
    text-align: left;
    -webkit-transform-origin: left top;
    transform-origin: left top
}

.dropdown[data-dropdown-align="left"] > .dropdown__arrow {
    left: 1rem
}

.dropdown[data-dropdown-align="left"] > .dropdown__arrow::before {
    left: -9px
}

.dropdown[data-dropdown-direction="n"] {
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom
}

.dropdown[data-dropdown-direction="e"] {
    -webkit-transform-origin: left center;
    transform-origin: left center
}

.dropdown[data-dropdown-direction="w"] {
    -webkit-transform-origin: right center;
    transform-origin: right center
}

.dropdown .dropdown__inset {
    padding: 0 5px
}

.dropdown .dropdown__separator {
    border-top: 1px solid rgba(89, 171, 234, 0.3)
}

.dropdown p {
    margin-bottom: 0.809rem
}

.dropdown p:last-child {
    margin-bottom: 0
}

.dropdown .dropdown__scroller {
    overflow-y: scroll;
    max-height: 71vh
}

.dropdown .dropdown__bubble {
    display: inline-block;
    background-color: #d1d1d1;
    color: #fff;
    border-radius: 4em;
    padding: 0 0.6em;
    font-size: .9em;
    line-height: 18px
}

.dropdown.dropdown--menu {
    padding: 3px 0;
    min-width: 0;
    font-size: .9rem
}

.dropdown.dropdown--submenu {
    display: none;
    top: 50%;
    left: 99%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.dropdown.dropdown--submenu .dropdown__menu {
    position: relative;
    z-index: 10
}

.dropdown.dropdown--submenu--left {
    left: auto;
    right: 99%
}

.dropdown .dropdown__heading {
    cursor: default;
    white-space: nowrap;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-family: Lato, "Helvetica Neue", sans-serif;
    margin: .2rem 0 0;
    padding: 0.3rem 1rem 0.2rem;
    text-align: left;
    color: rgba(32, 78, 87, 0.9);
    font-size: 0.73333rem;
    text-transform: uppercase;
    font-weight: bold
}

.dropdown .dropdown__heading.dropdown__separator {
    padding-top: .5rem
}

.dropdown .dropdown__heading .dropdown__heading__detail {
    display: block;
    text-transform: none;
    margin-bottom: 2px;
    font-style: italic;
    color: rgba(32, 78, 87, 0.6);
    font-weight: normal
}

.dropdown .no-content {
    font-size: 0.9em;
    color: #6d99b6;
    text-align: center;
    padding: .5rem 1rem
}

.dropdown.dropdown--menu--tight {
    padding-bottom: 0
}

.dropdown .dropdown__footer {
    padding-top: .5rem
}

.dropdown .dropdown__footer .btn {
    width: 100%;
    border-radius: 0 0 4px 4px
}

.dropdown .dropdown__footer .btn[disabled] {
    box-shadow: inset rgba(51, 51, 51, 0.1) 0 1px 0
}

.dropdown input[type="search"].dropdown__filter {
    width: 100%;
    margin: 0;
    border: 0;
    box-shadow: none;
    padding-left: 1.8rem;
    padding-top: 0;
    border-bottom: 1px solid #e9e9e9;
    border-radius: 0;
    font-weight: normal
}

.dropdown input[type="search"].dropdown__filter ~ .icon-magnifying-glass {
    position: absolute;
    left: 0.5rem;
    top: 0.6rem;
    font-size: 0.9rem;
    color: #888;
    transition: color .2s ease-out
}

.dropdown input[type="search"].dropdown__filter:focus ~ .icon-magnifying-glass {
    color: #666
}

.dropdown .dropdown__arrow {
    position: absolute;
    z-index: 10
}

.dropdown .dropdown__arrow::before {
    content: '';
    position: absolute;
    top: 1px;
    z-index: 9
}

.dropdown .dropdown__arrow.dropdown__arrow--up {
    width: 0;
    height: 0;
    border: solid transparent;
    border-width: 0 8px 8px 8px;
    border-bottom-color: rgba(89, 171, 234, 0.3);
    top: -8px
}

.dropdown .dropdown__arrow.dropdown__arrow--up::before {
    width: 0;
    height: 0;
    border: solid transparent;
    border-width: 0 9px 9px 9px;
    border-bottom-color: #fff
}

.dropdown .dropdown__arrow.dropdown__arrow--down {
    width: 0;
    height: 0;
    border: solid transparent;
    border-width: 8px 8px 0 8px;
    border-top-color: rgba(89, 171, 234, 0.3);
    bottom: -8px
}

.dropdown .dropdown__arrow.dropdown__arrow--down::before {
    top: -10px
}

.dropdown .dropdown__arrow.dropdown__arrow--down::before {
    width: 0;
    height: 0;
    border: solid transparent;
    border-width: 9px 9px 0 9px;
    border-top-color: #fff
}

.dropdown .dropdown__arrow.dropdown__arrow--left {
    width: 0;
    height: 0;
    border: solid transparent;
    border-width: 8px 8px 8px 0;
    border-right-color: rgba(89, 171, 234, 0.3);
    left: -8px
}

.dropdown .dropdown__arrow.dropdown__arrow--left::before {
    left: 1px
}

.dropdown .dropdown__arrow.dropdown__arrow--left::before {
    width: 0;
    height: 0;
    border: solid transparent;
    border-width: 9px 9px 9px 0;
    border-right-color: #fff
}

.dropdown .dropdown__arrow.dropdown__arrow--right {
    width: 0;
    height: 0;
    border: solid transparent;
    border-width: 8px 0 8px 8px;
    border-left-color: rgba(89, 171, 234, 0.3);
    right: -8px
}

.dropdown .dropdown__arrow.dropdown__arrow--right::before {
    right: 1px
}

.dropdown .dropdown__arrow.dropdown__arrow--right::before {
    width: 0;
    height: 0;
    border: solid transparent;
    border-width: 9px 0 9px 9px;
    border-left-color: #fff
}

.dropdown--callout {
    padding: 1rem;
    background-color: #1DABF2;
    color: #fff;
    width: 17rem;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

.dropdown--callout__icon-container {
    margin-right: 0.8rem;
    margin-top: 0.2rem;
    height: 1.86667rem;
    background-color: #4dbdf5;
    border-radius: 50%
}

.dropdown--callout__icon {
    font-size: 1.73333rem;
    position: relative;
    top: -5px;
    left: -1px
}

.dropdown--callout h4 {
    margin-bottom: 0.2rem;
    color: #fff
}

.dropdown--callout p, .dropdown--callout a {
    font-size: 0.93333rem
}

.dropdown--callout a {
    color: #fff;
    font-weight: bold
}

.dropdown--callout .dropdown__arrow.dropdown__arrow--up::before {
    border-bottom-color: #1DABF2
}

.dropdown__menu {
    list-style: none;
    padding: 0;
    margin: 0
}

.dropdown__menu [role="menuitem"] {
    width: 100%
}

.dropdown__menu [role="menuitem"].dropdown__separator {
    padding-top: 5px;
    margin-top: 5px
}

.dropdown__menu [role="menuitem"].nav--current a, .dropdown__menu [role="menuitem"].nav--current a:hover, .dropdown__menu [role="menuitem"].nav--current a:active, .dropdown__menu [role="menuitem"].nav--current a:focus, .dropdown__menu [role="menuitem"].disabled a, .dropdown__menu [role="menuitem"].disabled a:hover, .dropdown__menu [role="menuitem"].disabled a:active, .dropdown__menu [role="menuitem"].disabled a:focus {
    color: #8FB1C7;
    cursor: default;
    background: none
}

.dropdown__menu [role="menuitem"].nav--current > a .icon-check {
    margin-right: -.3rem;
    margin-left: .5rem;
    top: 1px
}

.dropdown__menu [role="menuitem"].dropdown__menu__sub [class*='chevron'] {
    position: relative;
    font-size: 1.3rem;
    width: 1em;
    margin: 0;
    top: 0;
    margin-right: -5px
}

.dropdown__menu [role="menuitem"].dropdown__menu__expanded > a {
    display: block;
    white-space: normal;
    width: 20rem;
    color: #6d99b6;
    padding-top: .5rem;
    padding-bottom: .7rem
}

.dropdown__menu [role="menuitem"].dropdown__menu__expanded > a header {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

.dropdown__menu [role="menuitem"].dropdown__menu__expanded > a .dropdown__tail-icon {
    -webkit-flex-basis: 2rem;
    -ms-flex-preferred-size: 2rem;
    flex-basis: 2rem;
    font-size: 1rem
}

.dropdown__menu [role="menuitem"].dropdown__menu__expanded > a h4, .dropdown__menu [role="menuitem"].dropdown__menu__expanded > a h5 {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    font-size: 1.1rem;
    color: rgba(32, 78, 87, 0.8);
    margin-bottom: 0
}

.dropdown__menu [role="menuitem"].dropdown__menu__expanded > a h5 {
    font-size: 1rem;
    color: #8ca0b4
}

.dropdown__menu [role="menuitem"].dropdown__menu__expanded > a h5.warning {
    color: #b94848;
    font-weight: normal
}

.dropdown__menu [role="menuitem"].dropdown__menu__expanded > a.selected h4, .dropdown__menu [role="menuitem"].dropdown__menu__expanded > a.selected .icon {
    color: #3BD788
}

.dropdown__menu [role="menuitem"].dropdown__menu__expanded > a p {
    font-size: .9em;
    margin-bottom: 0.53933rem
}

.dropdown__menu [role="menuitem"].dropdown__menu__expanded > a p:last-child {
    margin-bottom: 0
}

.dropdown__menu [role="menuitem"].dropdown__menu__expanded > a:hover {
    color: #5081a0
}

.dropdown__menu [role="menuitem"].dropdown__menu__expanded > a:hover h4 {
    color: #204e57
}

.dropdown__menu [role="menuitem"].dropdown__menu__expanded > a:hover h5.warning {
    color: #e02412
}

.dropdown__menu [role="menuitem"].dropdown__menu__expanded > a:hover.selected h4, .dropdown__menu [role="menuitem"].dropdown__menu__expanded > a:hover.selected .icon {
    color: #26b96f
}

.dropdown__menu [role="menuitem"] > a {
    display: inline-block;
    max-width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    position: relative;
    padding: 0.3rem 1rem;
    font-weight: normal;
    color: rgba(32, 78, 87, 0.75)
}

.dropdown__menu [role="menuitem"] > a:hover, .dropdown__menu [role="menuitem"] > a:focus {
    text-decoration: none;
    color: #204e57;
    outline: 0;
    background-color: rgba(143, 177, 199, 0.12)
}

.dropdown__menu [role="menuitem"] > a:hover .dropdown__bubble, .dropdown__menu [role="menuitem"] > a:focus .dropdown__bubble {
    background-color: #fff;
    color: rgba(126, 165, 191, 0.12)
}

.dropdown__menu [role="menuitem"] > a:active {
    background-color: rgba(109, 153, 182, 0.12)
}

.dropdown__menu [role="menuitem"] > a:active .dropdown__bubble {
    color: rgba(92, 141, 174, 0.12)
}

.dropdown__menu [role="menuitem"] > a.warning {
    color: #1DABF2
}

.dropdown__menu [role="menuitem"] > a .icon {
    width: .8rem;
    margin-right: .5rem;
    margin-left: -.2rem;
    top: -.2ex;
    position: relative
}

.dropdown__menu [role="menuitem"] > a .dropdown__tail {
    font-size: .9em;
    margin-right: -5px
}

.dropdown__menu [role="menuitem"] > a .dropdown__tail-icon .icon {
    width: 1em;
    margin: 0;
    margin-right: -10px
}

.dropdown__menu [role="menuitem"] > a.dropdown__show-more {
    color: #999;
    font-size: 0.8rem
}

.dropdown__menu [role="menuitem"] > a.dropdown__show-more:hover {
    color: #666666;
    background-color: #f5f5f5
}

.dropdown__menu [role="menuitem"] > a.dropdown__show-more:hover .icon {
    color: #fff;
    -webkit-transform: scale(1.2);
    transform: scale(1.2)
}

.dropdown__menu [role="menuitem"] > a.dropdown__show-more:active {
    color: #4d4d4d;
    background-color: #ededed
}

.dropdown__menu [role="menuitem"] > a.dropdown__show-more .icon {
    color: #999;
    transition: -webkit-transform .2s ease-out;
    transition: transform .2s ease-out;
    transition: transform .2s ease-out, -webkit-transform .2s ease-out;
    top: 0
}

.dropdown__menu__sub {
    position: relative
}

.dropdown__menu__sub:hover .dropdown--submenu, .dropdown__menu__sub:focus .dropdown--submenu {
    display: block
}

.dropdown__trigger:hover {
    text-decoration: none
}

.dropdown__trigger [class*="icon-chevron"] {
    display: inline-block;
    transition: color .2s ease-out, -webkit-transform .3s ease-out;
    transition: transform .3s ease-out, color .2s ease-out;
    transition: transform .3s ease-out, color .2s ease-out, -webkit-transform .3s ease-out
}

.dropdown__trigger.dropdown--open [class*="icon-chevron"] {
    -webkit-transform: rotateX(180deg);
    transform: rotateX(180deg);
    color: #10afff
}

.dropdown__menu [role="menuitem"] .list-feature {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    padding: .6rem 0;
    color: #666666;
    text-align: left;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    width: 18rem;
    border-bottom: 1px solid #eee
}

.dropdown__menu [role="menuitem"] .list-feature:hover .list-feature__categ {
    color: #204e57
}

.dropdown__menu [role="menuitem"]:last-child .list-feature {
    border-bottom: none
}

.list-feature__logo {
    width: 5rem;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.list-feature__logo svg {
    height: 25px;
    width: 34px;
    fill: currentColor
}

.list-feature__title {
    font-size: 1.2rem;
    line-height: 1.5
}

.list-feature__categ {
    line-height: 1;
    color: #999
}

.export-comments-dropdown.dropdown--menu {
    min-width: 180px
}

.export-comments-dropdown__result {
    margin: .3rem 1rem 0
}

.export-comments-dropdown__result .btn {
    width: 100%
}

.export-comments-dropdown__result .btn.mode--link {
    color: #8FB1C7;
    padding: .3rem 0
}

.exports-menu {
}

.exports-menu.dropdown--menu {
    min-width: 180px
}

.exports-menu .dropdown__menu [role="menuitem"] > a .icon {
    top: -1px;
    margin: 0;
    margin-left: .5em;
    width: 1em;
    color: rgba(102, 142, 167, 0.6);
    font-size: 1.2em
}

.exports-menu .dropdown__menu [role="menuitem"] > a:hover .icon {
    color: #668ea7
}

.exports-menu .loading-dots {
    margin-right: 10px
}

.exports-menu .dropdown__menu [role="menuitem"] > a .icon-key {
    margin-right: 0.2rem;
    top: 0
}

.account-dropdown.dropdown--menu {
    min-width: 200px
}

.comments-sort-dropdown {
    min-width: 150px;
    text-align: left
}

.comments-sort-dropdown [role="menuitem"] a {
    padding-left: 1.5rem
}

.comments-sort-dropdown [role="menuitem"] a .icon.icon-check {
    margin-left: -1.1rem;
    margin-right: 2px;
    font-size: .9em;
    top: -.4ex
}

.recording-share-dropdown {
    padding: .5rem;
    min-width: 250px
}

.btn {
    -webkit-appearance: none;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    display: inline-block;
    position: relative;
    text-decoration: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    font: bold 1em/1.4 Lato, "Helvetica Neue", sans-serif;
    text-align: center;
    padding: .6em 1.2em;
    border: 0;
    border-radius: 3em;
    color: #fff;
    background-color: #1DABF2;
    transition: background-color .2s ease-out, color .2s ease-out, box-shadow .2s ease;
}

.btn:focus, .btn.focus {
    outline: 0;
    box-shadow: #fff 0 0 0 2px, rgba(29, 171, 242, 0.3) 0 0 0 4px
}

.btn:hover, .btn:focus {
    text-decoration: none;
    color: #fff;
    background-color: #18b0fc
}

.btn:active {
    transition: none;
    background-color: #0c8fd0;
    box-shadow: none;
    color: rgba(255, 255, 255, 0.75)
}

.btn[disabled], .btn.disabled {
    cursor: not-allowed;
    box-shadow: none;
    pointer-events: none;
    -webkit-filter: grayscale(0.6);
    filter: grayscale(0.6);
    background-color: #E4EAEB;
    color: #668ea7
}

.btn[disabled]:hover, .btn[disabled]:active, .btn.disabled:hover, .btn.disabled:active {
    background-color: #1DABF2
}

.btn .spinner-circular {
    vertical-align: middle;
    position: relative;
    top: -.2em;
    margin-right: .25em;
    font-size: .5em
}

.btn.mode--primary {
    background-color: #8e4294;
    font-weight: bold
}

.btn.mode--primary:focus, .btn.mode--primary.focus {
    box-shadow: #fff 0 0 0 2px, rgba(20, 189, 15, 0.3) 0 0 0 4px
}

.btn.mode--primary:hover, .btn.mode--primary:focus {
    background-color: #8e4294
}

.btn.mode--primary:active {
    background-color: #8e4294;
    box-shadow: none
}

.btn.mode--primary[disabled] {
    color: rgba(255, 255, 255, 0.8)
}

.btn.mode--attention {
    font-weight: bold;
    background-color: #F3B109
}

.btn.mode--attention:focus, .btn.mode--attention.focus {
    box-shadow: #fff 0 0 0 2px, rgba(243, 177, 9, 0.3) 0 0 0 4px
}

.btn.mode--attention:hover, .btn.mode--attention:focus {
    background-color: #fcb500
}

.btn.mode--attention:active {
    background-color: #cc9408;
    box-shadow: none
}

.btn.mode--attention[disabled] {
    color: rgba(255, 255, 255, 0.8)
}

.btn.mode--complementary {
    background-color: #8289ef
}

.btn.mode--complementary:focus, .btn.mode--complementary.focus {
    box-shadow: #fff 0 0 0 2px, rgba(130, 137, 239, 0.3) 0 0 0 4px
}

.btn.mode--complementary:hover, .btn.mode--complementary:focus {
    background-color: #8b91f6
}

.btn.mode--complementary:active {
    background-color: #555ee9
}

.btn.mode--complementary[disabled] {
    color: rgba(255, 255, 255, 0.8)
}

.btn.mode--danger {
    font-weight: bold;
    background-color: #FF6E70
}

.btn.mode--danger:focus, .btn.mode--danger.focus {
    box-shadow: #fff 0 0 0 2px, rgba(255, 110, 112, 0.3) 0 0 0 4px
}

.btn.mode--danger:hover, .btn.mode--danger:focus {
    background-color: #ff787a
}

.btn.mode--danger:active {
    background-color: #ff4f52;
    box-shadow: none
}

.btn.mode--danger[disabled] {
    color: rgba(255, 255, 255, 0.8)
}

.btn.mode--tint {
    background-color: #d7e2e8;
    color: #50748a;
    box-shadow: none;
    transition: none
}

.btn.mode--tint:focus, .btn.mode--tint.focus {
    box-shadow: #fff 0 0 0 2px, rgba(134, 166, 186, 0.3) 0 0 0 4px
}

.btn.mode--tint:hover {
    background-color: #cad8e1
}

.btn.mode--tint:active, .btn.mode--tint:focus {
    background-color: #b7cad6;
    color: #3d596a
}

.btn.mode--tint[disabled] {
    background-color: #e8eef1;
    color: #668ea7
}

.btn.mode--tint-dark {
    background-color: #196281;
    color: #9dddea;
    box-shadow: none
}

.btn.mode--tint-dark:focus, .btn.mode--tint-dark.focus, .btn.mode--tint-dark:hover {
    color: #b9edf7;
    background-color: #1c6f92
}

.btn.mode--tint-dark:active {
    background-color: #0d3141;
    color: rgba(157, 221, 234, 0.8)
}

.btn.mode--tint-dark[disabled] {
    background-color: #1f4658;
    color: rgba(157, 221, 234, 0.7)
}

.btn.mode--dark {
    background-color: #000;
    box-shadow: none
}

.btn.mode--dark:hover, .btn.mode--dark:focus {
    background-color: rgba(0, 0, 0, 0.7)
}

.btn.mode--dark:active {
    color: rgba(255, 255, 255, 0.8);
    background-color: rgba(0, 0, 0, 0.9)
}

.btn.mode--dark[disabled] {
    color: rgba(255, 255, 255, 0.7)
}

.btn.mode--light {
    background-color: #fff;
    color: #1DABF2;
    box-shadow: none
}

.btn.mode--light:hover, .btn.mode--light:focus {
    color: #1DABF2;
    background-color: #fff
}

.btn.mode--light:active {
    color: #0c8fd0;
    background-color: #fcfcfc
}

.btn.mode--light[disabled] {
    background-color: #e6e6e6;
    color: #8FB1C7
}

.btn.mode--light--bordered {
    border: 1px solid #1DABF2
}

.btn.mode--light--bordered:active {
    border-color: #0c8fd0
}

.btn.mode--light--bordered[disabled] {
    border-color: #8FB1C7
}

.btn.mode--transparent {
    background: transparent;
    color: #204e57;
    transition: color .2s ease-out;
    box-shadow: none
}

.btn.mode--transparent:active, .btn.mode--transparent:focus, .btn.mode--transparent[disabled] {
    background-color: transparent;
    color: inherit;
    box-shadow: none
}

.btn.mode--transparent:hover {
    background-color: transparent;
    color: #35808f
}

.btn.mode--flat {
    background-color: #F6FBFD;
    color: #22606C;
    box-shadow: inset #cce8f4 0 0 0 1px
}

.btn.mode--flat:hover {
    box-shadow: inset #aed1df 0 0 0 1px
}

.btn.mode--flat:active {
    box-shadow: inset #9cc7d8 0 0 0 1px;
    background-color: #e9f5fa
}

.btn.mode--link {
    color: #8e4294;
    background: transparent;
    padding: 0;
    vertical-align: inherit;
    box-shadow: none;
    transition: -webkit-transform 200ms cubic-bezier(0.12, 0.8, 0.32, 1);
    transition: transform 200ms cubic-bezier(0.12, 0.8, 0.32, 1);
    transition: transform 200ms cubic-bezier(0.12, 0.8, 0.32, 1), -webkit-transform 200ms cubic-bezier(0.12, 0.8, 0.32, 1)
}

.btn.mode--link.style--thin {
    font-weight: normal
}

.btn.mode--link .custom-icon--arrow-right {
    margin-left: .5rem
}

.btn.mode--link [class*="chevron"] {
    color: rgba(102, 142, 167, 0.7);
    transition: color .2s ease
}

.btn.mode--link:active, .btn.mode--link:focus {
    background-color: transparent;
    color: #0b88c6;
    box-shadow: none
}

.btn.mode--link:active {
    -webkit-transform: perspective(1px) translateZ(-0.04px);
    transform: perspective(1px) translateZ(-0.04px)
}

.btn.mode--link:focus, .btn.mode--link:hover {
    text-decoration: underline
}

.btn.mode--link:focus [class*="chevron"], .btn.mode--link:hover [class*="chevron"] {
    color: #1DABF2
}

.btn.mode--link:hover {
    background-color: transparent;
    color: #000;
    text-decoration: none;
}

.btn.mode--link[disabled] {
    background-color: transparent;
    color: #8FB1C7;
    box-shadow: none
}

.btn.mode--link[disabled]:hover {
    color: #8FB1C7;
    text-decoration: none
}

.btn.mode--link.faded:hover {
    color: rgba(32, 78, 87, 0.8)
}

.btn.mode--link.size--large {
    font-weight: bold;
    font-size: 1.2em
}

.btn.mode--link--faded {
    color: rgba(102, 142, 167, 0.8)
}

.btn.mode--link--faded:hover, .btn.mode--link--faded:focus {
    color: #50748a
}

.btn.mode--link--faded:active {
    color: #3d596a
}

.btn.mode--link--dark {
    font-weight: bold;
    color: #22606C
}

.btn.mode--link--primary {
    color: #3BD788
}

.btn.mode--link--primary:hover, .btn.mode--link--primary:active, .btn.mode--link--primary:focus {
    color: #19b767
}

.btn.mode--link--attention {
    color: #F3B109
}

.btn.mode--link--attention:hover, .btn.mode--link--attention:active, .btn.mode--link--attention:focus {
    color: #d39800
}

.btn.mode--link--danger {
    color: #FF6E70
}

.btn.mode--link--danger:hover, .btn.mode--link--danger:active, .btn.mode--link--danger:focus {
    color: #ff3b3e
}

.btn.mode--gray {
    background-color: #999;
    box-shadow: none
}

.btn.mode--gray:hover, .btn.mode--gray:focus {
    background-color: #a6a6a6
}

.btn.mode--gray:active {
    background-color: #919191
}

.btn.mode--gray[disabled] {
    color: rgba(255, 255, 255, 0.7);
    background-color: #b3b3b3
}

.btn.mode--subtle {
    border: 1px solid #d5ecf6;
    background-color: #fff;
    color: #006E8E;
    transition: border-color .3s ease
}

.btn.mode--subtle:hover {
    background-color: #fff;
    border-color: #b8dbea
}

.btn.mode--subtle:active, .btn.mode--subtle:focus {
    box-shadow: none;
    color: #005a75;
    background-color: #f6fbfd;
    border-color: #9cc7d8
}

.btn.mode--subtle[disabled] {
    box-shadow: none;
    background-color: rgba(228, 234, 235, 0.6);
    color: rgba(0, 110, 142, 0.7)
}

.btn.mode--subtle--primary:hover, .btn.mode--subtle--danger:hover {
    color: #fff;
    box-shadow: none
}

.btn.mode--subtle--primary {
    transition: none
}

.btn.mode--subtle--primary:hover {
    background-color: #3BD788;
    border-color: #3BD788
}

.btn.mode--subtle--primary:active {
    background-color: #26b96f;
    border-color: #26b96f
}

.btn.mode--subtle--danger {
    transition: none
}

.btn.mode--subtle--danger:hover {
    background-color: #FF6E70;
    border-color: #FF6E70
}

.btn.mode--subtle--danger:active {
    background-color: #ff3b3e;
    border-color: #ff3b3e
}

.btn.mode--loader .spinner-circular {
    margin-right: 1em
}

.btn.style--cotton {
    color: #204e57;
    border-radius: 4px;
    background-color: #fdfdfd;
    box-shadow: rgba(0, 0, 0, 0.15) 0 2px 10px;
    transition: box-shadow .3s ease, background-color .3s ease, color .3s ease, -webkit-transform .2s ease;
    transition: box-shadow .3s ease, background-color .3s ease, transform .2s ease, color .3s ease;
    transition: box-shadow .3s ease, background-color .3s ease, transform .2s ease, color .3s ease, -webkit-transform .2s ease
}

.btn.style--cotton:hover, .btn.style--cotton:focus {
    background-color: #fff;
    box-shadow: rgba(0, 0, 0, 0.15) 0 2px 15px
}

.btn.style--cotton:active {
    box-shadow: rgba(0, 0, 0, 0.15) 0 0 5px;
    -webkit-transform: scale(0.99);
    transform: scale(0.99)
}

.btn.style--cotton.mode--attention {
    color: #F3B109
}

.btn.style--cotton.mode--attention:hover {
    color: #e8a600
}

.btn.style--cotton.mode--primary {
    color: #3BD788
}

.btn.style--cotton.mode--primary:hover {
    color: #04d66c
}

.btn.style--cotton.mode--danger {
    color: #f9494c
}

.btn.style--cotton.mode--danger:hover {
    color: #ff393c
}

.btn.style--square {
    border-radius: 3px
}

.btn.style--square.size--large {
    border-radius: 6px
}

.btn.style--circle {
    border-radius: 50%;
    width: 36px;
    height: 36px;
    padding: 7px 8px 9px;
    text-align: center;
    font-size: 2.13333rem
}

.btn.style--ghost {
    background: transparent;
    box-shadow: inset 0 0 0 2px currentColor;
    color: #1DABF2;
    transition: none;
    font-weight: bold;
    transition: box-shadow .2s ease
}

.btn.style--ghost:hover, .btn.style--ghost:focus {
    background-color: transparent;
    color: #0c8fd0
}

.btn.style--ghost:active {
    color: #096ea0
}

.btn.style--ghost[disabled] {
    background: transparent;
    color: #35a3da;
    box-shadow: inset 0 0 0 2px
}

.btn.style--ghost[disabled]:hover, .btn.style--ghost[disabled]:focus, .btn.style--ghost[disabled]:active {
    background-color: transparent
}

.btn.style--ghost.mode--primary {
    color: #2ace7b
}

.btn.style--ghost.mode--primary:hover, .btn.style--ghost.mode--primary:focus {
    background-color: transparent;
    color: #26b96f;
    box-shadow: inset 0 0 0 2px currentColor
}

.btn.style--ghost.mode--primary:active {
    color: #1d8f55
}

.btn.style--ghost.mode--dark {
    color: #191E22;
    transition: box-shadow .2s ease-out, color .2s ease-out
}

.btn.style--ghost.mode--dark:hover, .btn.style--ghost.mode--dark:focus {
    background-color: transparent;
    box-shadow: inset currentColor 0 0 0 1px;
    color: rgba(25, 30, 34, 0.6)
}

.btn.style--ghost.mode--steel {
    color: #6d99b6;
    transition: none;
    box-shadow: inset 0 0 0 2px #a0bdd0
}

.btn.style--ghost.mode--steel:hover, .btn.style--ghost.mode--steel:focus {
    background-color: transparent;
    box-shadow: inset 0 0 0 2px #6d99b6;
    color: #5081a0
}

.btn.style--ghost.mode--steel:active {
    color: #5081a0
}

.btn.style--ghost.mode--attention {
    color: #F3B109;
    transition: none
}

.btn.style--ghost.mode--attention:hover, .btn.style--ghost.mode--attention:focus {
    background-color: transparent;
    box-shadow: inset 0 0 0 2px currentColor;
    color: #da9f08
}

.btn.style--ghost.mode--attention:active {
    color: #c28d07
}

.btn.style--ghost.mode--gray {
    color: #888;
    box-shadow: inset 0 0 0 2px #bbb
}

.btn.style--ghost.mode--gray:hover, .btn.style--ghost.mode--gray:focus {
    background-color: transparent;
    color: #6A6A6A;
    box-shadow: inset 0 0 0 2px #9A9A9A
}

.btn.style--ghost.mode--gray:active {
    box-shadow: inset 0 0 0 2px #8a8a8a
}

.btn.style--ghost.mode--danger {
    color: #FF6E70;
    transition: none
}

.btn.style--ghost.mode--danger:hover, .btn.style--ghost.mode--danger:focus {
    background-color: #ff3b3e;
    color: #fff;
    box-shadow: none
}

.btn.style--ghost.mode--danger:active {
    background-color: #ff080b
}

.btn.style--ghost.mode--light {
    color: #fff
}

.btn.style--ghost.mode--light:hover, .btn.style--ghost.mode--light:focus {
    background-color: transparent;
    color: #fff
}

.btn.style--ghost.mode--light:active {
    color: rgba(255, 255, 255, 0.8)
}

.btn.style--ghost.mode--light[disabled] {
    opacity: .7
}

.btn.style--left {
    margin-left: 1em
}

.btn.btn--round {
    border-radius: 100%;
    padding: 0;
    width: 1em;
    height: 1em
}

.btn.rounded--left {
    border-radius: 2em 0 0 2em;
    margin-right: -0.1em;
    padding-left: 1.5em;
    padding-right: 1em
}

.btn.rounded--right {
    border-radius: 0 2em 2em 0;
    margin-left: -0.1em;
    padding-right: 1.5em;
    padding-left: 1em
}

.btn.size--mini {
    padding: .3em .7em;
    font-size: .8rem;
    border-radius: 3px
}

.btn.size--large {
    font-size: 1.1rem;
    padding: .8em 1.3em
}

.btn.size--larger {
    font-size: 1.3rem;
    padding: .7em 2em
}

@media only screen and (max-width: 481px) {
    .btn.size--larger {
        font-size: 1rem
    }
}

.btn.style--wide {
    padding-left: 2.8em;
    padding-right: 2.8em
}

.btn.style--full {
    width: 100%
}

.btn .icon {
    position: relative;
    top: -.3ex
}

.btn .icon:first-child {
    margin-left: 0;
    margin-right: .35em
}

.btn .icon:last-child {
    margin-right: 0;
    margin-left: .35em
}

.btn .btn__icon {
    font-size: 1.3em
}

.button-bar {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

.button-bar .btn {
    border-radius: 0;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    margin-right: 1px
}

.button-bar .btn.style--ghost {
    margin-right: -1px
}

.button-bar .btn.style--ghost.mode--gray {
    margin-right: -2px
}

.button-bar :first-child {
    border-top-left-radius: 2em;
    border-bottom-left-radius: 2em;
    padding-left: .5em;
    padding-right: 0
}

.button-bar :first-child.size--mini {
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px
}

.button-bar :last-child {
    border-top-right-radius: 2em;
    border-bottom-right-radius: 2em;
    margin-right: 0;
    padding-right: .5em;
    padding-left: 0
}

.button-bar :last-child.size--mini {
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px
}

.btn-icon {
    display: inline-block
}

.btn-icon .icon {
    font-size: 1.33333rem
}

.alerts {
    position: fixed;
    pointer-events: none;
    z-index: 2000;
    top: 0;
    left: 0;
    right: 0;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column
}

.alert {
    pointer-events: all;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 1rem;
    border-radius: 5px;
    text-align: center;
    position: relative;
    box-shadow: rgba(0, 0, 0, 0.2) 0 0 5px;
    width: 90%;
    max-width: 45rem;
    margin: 0 auto 0.809rem;
    color: #fff;
    background-color: rgba(103, 147, 169, 0.98);
    display: -webkit-flex !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    transition: background-color .3s ease-out
}

.alert:first-child {
    border-radius: 0 0 5px 5px
}

.alert:hover {
    background-color: #6793a9
}

.alert:active {
    background-color: #5d8ca3
}

.alert > .icon {
    fill: #fff;
    font-size: 1.6rem;
    position: relative;
    top: 3px
}

.alert .alert__container {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding: 0 2%
}

.alert .alert__container :last-child {
    margin-bottom: 0
}

.alert .alert__container a {
    color: #006394;
    font-weight: bold
}

.alert .alert__message {
    margin-top: 0;
    margin-bottom: .5rem
}

.alert .alert__field {
    resize: none;
    width: 90%;
    padding: 0.2em .5em;
    color: #28495A;
    text-align: center;
    border: 0;
    background-color: rgba(255, 255, 255, 0.9);
    font-size: 0.9em;
    font-family: Menlo, Consolas, "Liberation Mono", Courier, monospace;
    font-weight: bold;
    box-shadow: none;
    margin: 0 auto;
    transition: background-color .2s, color .2s
}

.alert .alert__field:hover {
    background-color: #fff;
    color: #203b48
}

.alert.alert--success {
    background-color: rgba(59, 215, 136, 0.98)
}

.alert.alert--success:hover {
    background-color: #8e4294
}

.alert.alert--success:active {
    background-color: #2bd37e
}

.alert.alert--error {
    background-color: rgba(255, 110, 112, 0.98);
    cursor: initial
}

.alert.alert--error:hover {
    background-color: #FF6E70
}

.alert.alert--error:active {
    background-color: #ff5f61
}

.alert .alert__close {
    cursor: pointer;
    font-size: 1rem;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    top: 2px
}

.alert .alert__close .icon {
    height: 1.6rem
}

.alert-overlay {
    position: fixed;
    top: calc(50% - (7em / 2));
    left: calc(50% - (7em / 2));
    padding: 1em;
    border-radius: 10px;
    z-index: 3000;
    pointer-events: none;
    font-size: 1.8em;
    min-width: 7em;
    min-height: 7em;
    background-color: rgba(0, 0, 0, 0.8);
    -webkit-backdrop-filter: blur(13px);
    color: #fff;
    text-align: center;
    font-weight: bold;
    transition: opacity .1s ease, -webkit-transform .15s ease-out;
    transition: opacity .1s ease, transform .15s ease-out;
    transition: opacity .1s ease, transform .15s ease-out, -webkit-transform .15s ease-out
}

.alert-overlay .icon {
    font-size: 3em;
    margin-bottom: 0.53933rem
}

.alert-overlay__msg {
    margin: 0
}

.alert-overlay.in {
    transition-duration: .1s, .15s;
    opacity: 1;
    -webkit-transform: none;
    transform: none
}

.alert-overlay.out, .alert-overlay.off-screen {
    transition-duration: .2s, .25s;
    -webkit-transform: perspective(1000px) translateZ(300px);
    transform: perspective(1000px) translateZ(300px);
    opacity: 0
}

.tooltip {
    position: absolute;
    z-index: 1004;
    opacity: 0;
    max-width: 250px;
    text-align: center;
    line-height: 1.5;
    font-size: 0.86667rem;
    font-weight: bold;
    transition: opacity .1s ease-out
}

.tooltip .inner {
    background-color: rgba(32, 78, 87, 0.9);
    -webkit-backdrop-filter: blur(2px);
    border-radius: 6px;
    padding: 5px 9px;
    box-shadow: rgba(32, 78, 87, 0.2) 0 1px 1px;
    color: #fff
}

.tooltip .inner ul {
    list-style: none
}

.tooltip .inner ul, .tooltip .inner ol {
    margin: 0;
    padding: 0;
    text-align: left
}

.tooltip .inner .tooltip__list--detail-last li:last-child {
    font-size: .9em
}

.tooltip.hide {
    opacity: 0
}

.tooltip.show {
    opacity: 1
}

.tooltip .inner::after {
    content: "";
    display: block;
    bottom: -14px;
    left: calc(50% - 7px);
    width: 0;
    height: 0;
    border: 7px solid;
    border-color: rgba(32, 78, 87, 0.9) transparent transparent;
    position: absolute
}

.tooltip.tooltip--left .inner {
    box-shadow: rgba(0, 0, 0, 0.1) -1px 1px 1px
}

.tooltip.tooltip--left .inner::after {
    right: -14px;
    left: auto;
    bottom: calc(50% - 7px);
    border-color: transparent transparent transparent rgba(32, 78, 87, 0.9)
}

.tooltip.tooltip--right .inner {
    box-shadow: rgba(0, 0, 0, 0.1) 1px 1px 1px
}

.tooltip.tooltip--right .inner::after {
    left: -14px;
    bottom: calc(50% - 7px);
    border-color: transparent rgba(32, 78, 87, 0.9) transparent transparent
}

.tooltip.tooltip--bottom .inner::after {
    top: -14px;
    bottom: auto;
    border-color: transparent transparent rgba(32, 78, 87, 0.9) transparent
}

.tooltip.tooltip--notice {
    font-weight: normal;
    font-size: 0.93333rem
}

.tooltip.tooltip--notice a {
    color: #fff;
    font-weight: bold;
    text-decoration: underline
}

.tooltip.tooltip--notice .inner {
    background-color: #1DABF2;
    padding: 15px 18px
}

.tooltip.tooltip--notice .inner::after {
    border-color: #1DABF2 transparent transparent
}

.tooltip.tooltip--notice.tooltip--left .inner::after {
    border-color: transparent transparent transparent #1DABF2
}

.tooltip.tooltip--notice.tooltip--right .inner::after {
    border-color: transparent #1DABF2 transparent transparent
}

.tooltip.tooltip--notice.tooltip--bottom .inner::after {
    border-color: transparent transparent #1DABF2 transparent
}

.lookback-logo {
    width: 7.8em;
    height: 1.25em
}

.lookback-logo .logo__swirl {
    fill: #ED213E;
    transition: fill .5s
}

.lookback-logo:hover .logo__swirl {
    fill: rgba(237, 33, 62, 0.6)
}

.lookback-logo .logo__text {
    fill: #204e57
}

.lookback-mark {
    fill: #ED213E;
    width: 7em;
    height: 3.2em;
    transition: fill .5s
}

.company-logo {
    fill: #AFAFAF
}

.navigation {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    font-size: 0.93333rem
}

.navigation .lookback-logo {
    vertical-align: text-bottom;
    width: 8.3em;
    height: 1.3em
}

.navigation .nav__signup {
    font-weight: bold
}

.navigation .nav-item {
    display: inline-block;
    padding: 1.1em 0;
    color: #1E4E58;
    transition: color .5s ease, -webkit-transform .2s ease;
    transition: color .5s ease, transform .2s ease;
    transition: color .5s ease, transform .2s ease, -webkit-transform .2s ease
}

.navigation .nav-item:hover {
    color: rgba(30, 78, 88, 0.5);
    text-decoration: none;
    -webkit-transform: translate(0, -1px);
    transform: translate(0, -1px)
}

.navigation .nav-item:hover .icon {
    color: #576066
}

.navigation .nav-item:hover .icon-chevron-down {
    color: #10afff
}

.navigation .nav-item .icon {
    color: #8FB1C7;
    transition: color .5s ease
}

.navigation .nav-item .navigation-action-icon {
    font-size: 1.2rem
}

.navigation .nav-item .icon-chevron-down {
    color: #1DABF2;
    transition: color .2s ease-out, -webkit-transform .3s ease-out;
    transition: transform .3s ease-out, color .2s ease-out;
    transition: transform .3s ease-out, color .2s ease-out, -webkit-transform .3s ease-out
}

.navigation .nav-item--callout {
    color: #1DABF2
}

.navigation .nav-item--callout:hover {
    color: #0c8fd0
}

.navigation .dropdown--open .icon {
    color: #576066
}

.navigation .dropdown--open .icon-chevron-down {
    color: #096ea0
}

.navigation .nav--current .nav-item {
    font-weight: bold;
    color: #204e57;
    box-shadow: inset #1DABF2 0 -3px 0
}

.navigation > ul {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row
}

.navigation .navigation__main {
    -webkit-flex: 4;
    -ms-flex: 4;
    flex: 4;
    min-width: 395px
}

.navigation .navigation__main > li {
    padding-right: 1.8rem;
    white-space: nowrap
}

.navigation .navigation__main > li:last-child {
    padding-right: 0
}

.navigation .navigation__main .navigation-breadcrumb {
    position: relative;
    margin-left: -1.5em
}

.navigation .navigation__main .navigation-breadcrumb .nav-item:last-child {
    font-weight: bold
}

.navigation .navigation__main .navigation-breadcrumb .icon {
    font-size: .9em;
    color: #8FB1C7;
    position: relative;
    top: -.2ex;
    margin: 0 .25em
}

.navigation .navigation__main .icon.custom-icon--circle-dots {
    width: 20px;
    height: 20px;
    color: rgba(30, 78, 88, 0.8)
}

.navigation .navigation__main .logo {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.navigation .navigation__webapp-logo {
    text-align: center;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    transition: opacity .2s ease-out
}

.navigation .navigation__webapp-logo svg {
    height: 1.2rem;
    width: 2.7rem;
    margin-bottom: -4px
}

.navigation .navigation__webapp-logo:hover {
    opacity: .8
}

.navigation .navigation__secondary {
    -webkit-flex: 4;
    -ms-flex: 4;
    flex: 4;
    -webkit-align-items: center;
    -ms-flex-align: center;
    -ms-grid-row-align: center;
    align-items: center;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end
}

.navigation .navigation__secondary > li {
    padding-left: .7rem
}

.navigation .navigation__user {
    padding-left: 1.5rem;
    position: relative
}

.navigation .navigation__user .nav-item {
    padding: 10px 5px;
    -webkit-tap-highlight-color: transparent
}

.navigation .navigation__user__details {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: left;
    line-height: 1.2
}

.navigation .navigation__user__details .avatar {
    margin-right: 1em
}

.navigation .navigation__user__details .user__name, .navigation .navigation__user__details .team__name {
    display: block;
    max-width: 160px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap
}

.navigation .navigation__user__details .user__name {
    font-weight: bold
}

.navigation .navigation__user__details .team__name {
    font-style: italic;
    color: rgba(32, 78, 87, 0.7);
    font-size: 0.86667rem;
    font-weight: normal
}

.navigation .navigation__user__details .icon-chevron-down {
    margin-left: 1em
}

.navigation .navigation__notifications .notification-trigger {
    padding: .7em 1em;
    display: inline-block
}

.navigation .navigation__changelog--unread {
    position: relative
}

.navigation .navigation__changelog--unread .icon-megaphone {
    color: #0c8fd0
}

.navigation .navigation__changelog--unread::after {
    content: '';
    display: block;
    border-radius: 100%;
    background-color: #1DABF2;
    position: absolute;
    width: 6px;
    height: 6px;
    left: 27px;
    top: 16px
}

.navigation .navigation__changelog .icon-megaphone {
    font-size: 1.1em
}

.navigation .navigation__misc .dropdown {
    text-align: center;
    min-width: 8rem
}

.navigation .navigation__mobile {
    display: none;
    width: 100%
}

.navigation .navigation__mobile-group {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

.navigation .navigation__mobile .logo {
    height: 20px
}

.navigation .navigation__mobile .lookback-mark {
    width: 40px;
    height: 20px
}

.navigation .navigation__mobile .navigation__notifications .notification-trigger {
    padding: 10px;
    padding-right: 20px;
    top: auto;
    display: block
}

.navigation .navigation__mobile .navigation__notifications .notification-trigger .notifications__unread-count {
    right: 15px
}

.navigation .navigation__mobile .nav-symbol {
    position: relative;
    top: -3px;
    margin-left: .5rem
}

.navigation .navigation__mobile .nav-symbol, .navigation .navigation__mobile .nav-symbol::before, .navigation .navigation__mobile .nav-symbol::after {
    border-radius: 3px;
    display: inline-block;
    height: 2px;
    background-color: #1E4E58;
    width: 1.5rem
}

.navigation .navigation__mobile .nav-symbol::before, .navigation .navigation__mobile .nav-symbol::after {
    content: '';
    position: absolute;
    left: 0
}

.navigation .navigation__mobile .nav-symbol::before {
    top: -6px
}

.navigation .navigation__mobile .nav-symbol::after {
    top: 6px
}

.navigation .navigation__mobile__trigger {
    padding: 1em 0;
    font-weight: normal;
    margin-left: .5rem;
    color: #1E4E58
}

@media only screen and (max-width: 790px) {
    .navigation .navigation__main, .navigation .navigation__secondary, .navigation .navigation__webapp-logo {
        display: none
    }

    .navigation .navigation__mobile {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center
    }
}

@media only screen and (max-width: 481px) {
    .navigation {
        padding: 0
    }

    .navigation .lookback-logo {
        font-size: .8rem
    }
}

.navigation--centered {
    padding: 1.5rem 1rem;
    font-size: 1em
}

.navigation--centered .lookback-logo {
    vertical-align: middle
}

.navigation--centered .lookback-logo .logo__text {
    fill: #204e57
}

.navigation--centered .nav-item {
    font-weight: bold
}

.navigation--centered .nav--current .nav-item {
    box-shadow: none
}

.navigation--centered .navigation__user::before {
    background-color: rgba(20, 86, 99, 0.2)
}

.navigation--centered .navigation__download {
    margin-right: 1rem
}

.navigation--centered .navigation__main > li:not(:last-child) {
    padding-right: 3rem
}

.navigation--centered .navigation__main > li .more-icon {
    top: 18px
}

.navigation--centered .navigation__main > li .more-icon .icon {
    position: relative;
    top: -1px;
    left: -1px;
    font-size: .9em
}

.navigation--centered .lookback-logo {
    font-size: 1.2em;
    vertical-align: middle
}

@media only screen and (max-width: 1000px) {
    .navigation--centered .lookback-logo {
        font-size: 1em
    }

    .navigation--centered .navigation__main {
        min-width: 0
    }
}

@media only screen and (max-width: 950px) {
    .navigation--centered {
        padding: .5rem 1rem
    }

    .navigation--centered .navigation__main > li:not(:last-child) {
        padding-right: 2rem
    }

    .navigation--centered .logo:not(.touch) {
        display: none
    }
}

.navigation--home .lookback-logo {
    vertical-align: middle
}

.nav__signin.active {
    color: #096ea0
}

.navigation.mode--light .nav-item, .navigation.mode--light .nav-item .icon, .navigation.mode--light .dropdown__trigger, .navigation.mode--light .btn.mode--light {
    color: rgba(255, 255, 255, 0.8)
}

.navigation.mode--light .nav-item:hover, .navigation.mode--light .nav-item .icon:hover, .navigation.mode--light .dropdown__trigger:hover, .navigation.mode--light .btn.mode--light:hover {
    color: #fff
}

.navigation.mode--light .btn.mode--light {
    background-color: transparent
}

.navigation.mode--light .dropdown__trigger:hover [class*="icon-chevron"], .navigation.mode--light .dropdown__trigger.dropdown--open [class*="icon-chevron"] {
    color: #fff
}

.navigation.mode--light .dropdown {
    border-width: 0
}

.navigation.mode--light .navigation__main > li > a.more-icon:hover, .navigation.mode--light .navigation__main > li > a.more-icon.dropdown--open {
    box-shadow: inset currentColor 0 0 0 1px
}

.navigation.mode--light .lookback-logo .logo__text, .navigation.mode--light .lookback-logo .logo__swirl {
    fill: #fff
}

.navigation.mode--light .lookback-logo:hover .logo__swirl, .navigation.mode--light .lookback-logo:hover .logo__text {
    fill: rgba(255, 255, 255, 0.9)
}

.navigation.mode--light .navigation__mobile__trigger {
    color: rgba(255, 255, 255, 0.85)
}

.navigation.mode--light .navigation__mobile__trigger:hover {
    color: #fff
}

.navigation.mode--light .navigation__misc .dropdown__trigger.dropdown--open, .navigation.mode--light .navigation__user .dropdown__trigger.dropdown--open {
    color: #fff
}

.navigation.mode--light .navigation__user::before {
    background-color: rgba(255, 255, 255, 0.3)
}

.navigation.mode--light .navigation__user .avatar--initials::after {
    color: rgba(255, 255, 255, 0.8);
    border-color: rgba(255, 255, 255, 0.4);
    transition: color .3s ease, border-color .3s ease
}

.navigation.mode--light .navigation__user .nav-item:hover .avatar--initials::after {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.6)
}

.navigation.mode--light .navigation__user .team__name {
    color: rgba(255, 255, 255, 0.8)
}

.navigation.mode--light .nav--current .nav-item {
    color: #fff
}

.navigation.mode--light .nav--current .nav-item, .navigation.mode--light .nav--current .nav-item:hover, .navigation.mode--light .nav-item:hover {
    box-shadow: none
}

.navigation.mode--light .navigation__mobile .nav-symbol, .navigation.mode--light .navigation__mobile .nav-symbol::before, .navigation.mode--light .navigation__mobile .nav-symbol::after {
    background-color: #fff
}

.navigation.mode--light .navigation__mobile .lookback-mark {
    fill: #fff
}

.teams-dropdown .dropdown--submenu [role="menuitem"] > a {
    min-height: 30px
}

.teams-dropdown .dropdown--submenu .dropdown__menu {
    max-height: 294px;
    overflow-y: scroll
}

.teams-dropdown .dropdown-team {
    margin: 0;
    display: inline-block;
    max-width: 182px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    display: block;
    text-align: left;
    line-height: 1.2
}

.teams-dropdown .dropdown-team:hover .dropdown-team__slug {
    color: rgba(32, 78, 87, 0.6)
}

.teams-dropdown .dropdown-team__name {
    display: block
}

.teams-dropdown .dropdown-team__slug {
    color: #999
}

label.switch {
    position: relative;
    display: inline-block;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    vertical-align: middle
}

label.switch.switch--wide {
    font-size: 1rem
}

label.switch.switch--wide .switch__knob {
    transition-timing-function: ease
}

label.switch.switch--wide .switch__track {
    transition-property: background-color, opacity
}

label.switch.switch--wide input[type="checkbox"]:checked + .switch__track .switch__knob {
    -webkit-transform: translate3d(4.35em, 0, 0);
    transform: translate3d(4.35em, 0, 0)
}

label.switch.switch--toggle .switch__track {
    background-color: #1DABF2;
    box-shadow: none
}

label.switch.switch--toggle .switch__label {
    color: #fff
}

label.switch input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    left: -999em
}

label.switch input[type="checkbox"]:checked + .switch__track {
    box-shadow: inset #3BD788 0 0 0 15px;
    opacity: 1
}

label.switch input[type="checkbox"]:checked + .switch__track .switch__knob {
    -webkit-transform: translate3d(1.45em, 0, 0);
    transform: translate3d(1.45em, 0, 0);
    box-shadow: rgba(0, 0, 0, 0.4) 0 1px 4px
}

label.switch input[type="checkbox"]:checked + .switch__track .switch__label--on {
    opacity: 1
}

label.switch input[type="checkbox"]:checked + .switch__track .switch__label--off {
    opacity: 0;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0)
}

label.switch input[type="checkbox"]:checked:focus + .switch__track {
    box-shadow: inset #3BD788 0 0 0 15px, #7be4af 0 0 5px
}

label.switch input[type="checkbox"]:checked:focus + .switch__track .switch__knob, label.switch input[type="checkbox"]:checked:hover + .switch__track .switch__knob {
    box-shadow: rgba(0, 0, 0, 0.45) 0 1px 5px
}

label.switch input[type="checkbox"]:focus + .switch__track {
    box-shadow: inset #dcdcdc 0 0 0 1px, rgba(157, 157, 157, 0.3) 0 0 5px
}

label.switch input[type="checkbox"]:focus + .switch__track, label.switch input[type="checkbox"]:hover + .switch__track {
    opacity: 1
}

label.switch input[type="checkbox"]:focus + .switch__track .switch__knob, label.switch input[type="checkbox"]:hover + .switch__track .switch__knob {
    background-color: #fff;
    box-shadow: rgba(0, 0, 0, 0.35) 0 1px 5px
}

label.switch input[type="checkbox"][disabled] + .switch__track {
    opacity: .8;
    cursor: default;
    background-color: #dbe3e4;
    box-shadow: inset #dbe3e4 0 0 0 0
}

label.switch input[type="checkbox"][disabled] + .switch__track .switch__knob {
    box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px
}

label.switch .switch__track {
    opacity: .9;
    cursor: pointer;
    display: block;
    vertical-align: middle;
    width: 2.9em;
    height: 1.45em;
    border-radius: 999px;
    background-color: #f3f3f3;
    transition-duration: 0.35s;
    transition-property: background-color, box-shadow, opacity;
    box-shadow: inset #dcdcdc 0 0 0 1px
}

label.switch--wide .switch__track {
    width: 5.8em
}

label.switch .switch__knob {
    float: left;
    width: calc(1.45em - 2px);
    height: calc(1.45em - 2px);
    border-radius: inherit;
    background: #fdfdfd;
    transition-timing-function: cubic-bezier(0.54, 1.85, 0.5, 1);
    transition-duration: 0.35s;
    transition-property: background-color, box-shadow, -webkit-transform;
    transition-property: transform, background-color, box-shadow;
    transition-property: transform, background-color, box-shadow, -webkit-transform;
    pointer-events: none;
    margin-top: 1px;
    margin-left: 1px;
    box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px, rgba(0, 0, 0, 0.08) 0 0 10px
}

label.switch .switch__label {
    position: absolute;
    font-size: .85em;
    width: calc(100% - (1.45em / 2) - 0.3em);
    text-align: center;
    color: #848484;
    transition: opacity .1s ease;
    line-height: 1.8;
    bottom: 0;
    top: 0
}

label.switch .switch__label--on {
    opacity: 0;
    color: #fff
}

label.switch .switch__label--off {
    -webkit-transform: translate(1.15em, 0);
    transform: translate(1.15em, 0);
    transition: opacity .1s ease, -webkit-transform .1s ease;
    transition: opacity .1s ease, transform .1s ease;
    transition: opacity .1s ease, transform .1s ease, -webkit-transform .1s ease
}

.fancy-radio {
    display: inline-block;
    position: relative;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.fancy-radio input[type="radio"] {
    position: absolute;
    opacity: 0;
    left: -999px
}

.fancy-radio input[type="radio"]:active + span {
    background-color: #eee
}

.fancy-radio input[type="radio"]:checked + span {
    background-color: #3BD788;
    box-shadow: none
}

.fancy-radio input[type="radio"]:checked + span::after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1)
}

.fancy-radio input[type="radio"]:checked:active + span {
    background-color: #26b96f
}

.fancy-radio input[type="radio"]:checked:active + span::after {
    background-color: #eee
}

.fancy-radio input[type="radio"]:focus + span {
    box-shadow: inset #3BD788 0 0 0 1px, inset rgba(0, 0, 0, 0.1) 0 1px 2px
}

.fancy-radio input[type="radio"][disabled] + span {
    opacity: .6
}

.fancy-radio input[type="radio"][disabled]:checked + span {
    background-color: #f5f5f5;
    box-shadow: inset rgba(0, 0, 0, 0.25) 0 0 0 1px, rgba(0, 0, 0, 0.1) 0 0 2px
}

.fancy-radio input[type="radio"][disabled]:checked + span::after {
    background-color: #6F6F6F;
    box-shadow: none
}

.fancy-radio span {
    border-radius: 100%;
    display: inline-block;
    box-shadow: inset rgba(0, 0, 0, 0.15) 0 0px 0px 1px, inset rgba(0, 0, 0, 0.1) 0 1px 2px;
    width: 13px;
    height: 13px;
    position: relative;
    margin-right: 5px;
    top: 2px;
    transition: box-shadow .15s ease-out
}

.fancy-radio span::after {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
    transition: -webkit-transform .15s ease-out;
    transition: transform .15s ease-out;
    transition: transform .15s ease-out, -webkit-transform .15s ease-out;
    pointer-events: none;
    content: '';
    border-radius: 100%;
    position: absolute;
    top: calc(50% - 2.5px);
    left: calc(50% - 2.5px);
    display: inline-block;
    width: 5px;
    height: 5px;
    background-color: #fff
}

.radio-button {
    transition: color .2s ease, opacity .2s ease;
    color: rgba(102, 142, 167, 0.6);
    display: inline-block
}

.radio-button input[type="radio"] {
    position: absolute;
    left: -999em;
    top: auto
}

.radio-button__icon {
    font-size: 1.4rem
}

.radio-button__icon__circle {
    transition: opacity 0.15s ease, -webkit-transform 0.15s cubic-bezier(0.17, 0.595, 0.34, 1.385);
    transition: opacity 0.15s ease, transform 0.15s cubic-bezier(0.17, 0.595, 0.34, 1.385);
    transition: opacity 0.15s ease, transform 0.15s cubic-bezier(0.17, 0.595, 0.34, 1.385), -webkit-transform 0.15s cubic-bezier(0.17, 0.595, 0.34, 1.385);
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-transform-origin: center center;
    transform-origin: center center
}

.radio-button__icon--checked {
    color: #3BD788
}

.radio-button__icon--checked .radio-button__icon__circle {
    opacity: 1;
    -webkit-transform: none;
    transform: none
}

.breadcrumb {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-bottom: 1.618rem
}

.breadcrumb li {
    display: inline
}

.breadcrumb li:not(:last-child)::after {
    content: '›';
    color: #999;
    padding: 0 3px 0 6px
}

.backdrop-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1003;
    transition: opacity .1s ease;
    overflow-y: auto;
    text-align: center
}

.backdrop-modal--activated {
    -webkit-backdrop-filter: blur(10px);
    background-color: rgba(32, 78, 87, 0.5)
}

.backdrop-modal--centered {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    text-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center
}

.backdrop-modal--centered .modal.modal--frame {
    margin: 0
}

.backdrop-modal--centered .modal.modal--flat {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    text-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center
}

.backdrop-modal.in {
    opacity: 1
}

.backdrop-modal.in .modal {
    opacity: 1;
    -webkit-transform: none;
    transform: none
}

.backdrop-modal.off-screen, .backdrop-modal.out {
    opacity: 0
}

.backdrop-modal.off-screen .modal, .backdrop-modal.out .modal {
    opacity: 0;
    -webkit-transform: scale(0.97);
    transform: scale(0.97)
}

.modal {
    color: #204e57;
    transition: opacity .15s ease, -webkit-transform .2s ease;
    transition: opacity .15s ease, transform .2s ease;
    transition: opacity .15s ease, transform .2s ease, -webkit-transform .2s ease
}

.modal.modal--fixed {
    position: fixed
}

.modal.modal--flat {
    background-color: rgba(246, 251, 253, 0.95);
    -webkit-backdrop-filter: blur(3px);
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    overflow-y: scroll
}

.modal.modal--frame {
    position: relative;
    margin: 3.236rem auto;
    padding: 1.618rem 6.472rem;
    background: #fff;
    border-radius: 8px;
    box-shadow: rgba(62, 94, 101, 0.25) 0 5px 40px, rgba(78, 125, 136, 0.14) 0 3px 10px
}

.modal.modal--muted {
    color: #22606C;
    background-color: #F6FBFD
}

.modal__inner {
    overflow-y: auto;
    width: 100%
}

.modal .modal-header {
    margin-bottom: 2.427rem;
    padding: 0 3rem
}

.modal .modal-header h1, .modal .modal-header h2, .modal .modal-header h3 {
    font-weight: 300
}

.modal .modal-header h1 {
    margin-bottom: 0
}

.modal .modal-header--horz {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.modal .modal-header__center {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.modal .modal-header img {
    margin-bottom: 1.618rem
}

.modal .modal-footer {
    margin-top: 3.236rem
}

.modal .modal-back {
    color: #8FB1C7
}

.modal .modal-back:hover {
    color: #6d99b6
}

.modal .modal-text {
    color: #668ea7;
    font-size: 0.93333rem;
    line-height: 1.4
}

.modal .modal-description {
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    color: #668ea7;
    font-size: 1.1em
}

.modal .checkmark-list {
    text-align: left
}

.modal .modal-nav {
    margin-bottom: 1.618rem;
    border-bottom: 1px solid rgba(112, 182, 236, 0.3)
}

.modal .modal-nav ul {
    position: relative;
    top: 2px
}

.modal .modal-setting {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 1rem 0;
    border-bottom: 1px solid rgba(112, 182, 236, 0.3)
}

.modal .modal-setting .help-link {
    position: relative;
    top: -.3ex;
    margin-left: 5px
}

.modal .modal-setting__group > * {
    vertical-align: middle
}

.modal .modal-setting__label {
    color: #3f657e
}

@media only screen and (max-width: 700px) {
    .modal .modal-setting {
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-align-items: flex-start;
        -ms-flex-align: start;
        -ms-grid-row-align: flex-start;
        align-items: flex-start;
        text-align: left
    }

    .modal .modal-setting .modal-setting__group {
        width: 100%;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
        justify-content: space-between
    }
}

.modal .modal__close {
    position: absolute;
    right: 16px;
    top: 16px
}

.modal h1, .modal h3 {
    color: #204e57;
    margin-bottom: 1.618rem
}

.modal h1 {
    font-size: 1.46667rem;
    margin-bottom: 3.236rem
}

.modal h1 .badge {
    margin: 0 .5em
}

.modal h1.modal-heading--title {
    margin-bottom: 0
}

.modal h1.modal-heading--title .modal-heading-icon {
    margin-right: .1em;
    position: relative;
    top: -.1ex
}

.modal h1.modal-heading--huge {
    font-size: 2.4rem
}

.modal h3 {
    font-size: 1rem
}

.modal .modal-heading-icon {
    color: rgba(102, 142, 167, 0.58);
    font-size: 2rem;
    margin: 0 .3em
}

.modal .modal-main-action {
    text-align: center;
    margin: 3.236rem auto
}

.modal .modal-main-action > p:first-child {
    margin-bottom: 0.809rem
}

.modal .modal-main-action__notice {
    color: #8FB1C7;
    font-style: italic;
    font-size: .9em
}

.modal__footer {
    margin-top: 3.236rem
}

.modal__footer > :last-child {
    margin-bottom: 0
}

.modal__actions {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin: 0 -1.618rem -3.236rem;
    border-top: 1px solid #dedede
}

.modal__actions .btn {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    color: #1DABF2;
    padding-top: .8em;
    padding-bottom: .8em;
    background-color: #f8f8f8
}

.modal__actions .btn:active {
    background-color: #ededed;
    color: #0c8fd0;
    box-shadow: inset rgba(0, 0, 0, 0.1) 0 1px 1px
}

.modal__actions .btn:hover, .modal__actions .btn:focus {
    background-color: #f0f0f0
}

.modal__actions .btn.modal-btn--primary {
    font-weight: 500
}

.modal__actions .btn:first-child {
    border-radius: 0;
    border-bottom-left-radius: 6px;
    border-right: 1px solid #dedede
}

.modal__actions .btn:last-child {
    border-radius: 0;
    border-bottom-right-radius: 6px
}

.modal .form-label {
    text-align: initial
}

.modal__users {
    list-style: none;
    padding: 0;
    margin: 0
}

.modal__users__name, .modal__users__detail {
    display: inline-block;
    max-width: 200px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    vertical-align: middle
}

.modal__users__name {
    width: 200px;
    color: #666;
    transition: color .15s ease;
    font-weight: normal;
    margin-right: 10px
}

.modal__users__detail {
    font-size: .9em;
    color: #888
}

.modal__users .avatar {
    vertical-align: middle;
    opacity: .9;
    cursor: pointer;
    text-align: center
}

.modal__users .avatar.avatar--initials::after {
    transition: box-shadow .2s ease, color .2s ease, border-color .2s ease;
    background-color: #fff
}

.modal__users .modal__users__selected .avatar {
    opacity: 1;
    overflow: visible
}

.modal__users .modal__users__selected .avatar.avatar--initials::after {
    color: #fff;
    background-color: #3BD788;
    border-color: #3BD788;
    box-shadow: #fff 0 0 0 2px, #3BD788 0 0 0 4px
}

.modal__users .modal__users__selected .modal__users__name {
    color: #204e57
}

.modal__users .modal__users__selected .modal__users__detail {
    color: #2e6f7c
}

.modal__users li {
    margin: 0 0 1rem;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    text-align: left;
    cursor: pointer;
    font-size: .95em
}

.modal__users li.modal__users__blank {
    color: #999;
    text-align: center;
    -webkit-flex-basis: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%
}

.modal__users li .modal__users__details {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    margin-left: 1rem
}

.modal__users li:hover:not(.modal__users__selected) .modal__users__name {
    color: #204e57
}

.modal__users li:hover:not(.modal__users__selected) .avatar {
    opacity: 1
}

.modal__users li:hover:not(.modal__users__selected) .avatar.avatar--initials::after {
    border-color: #aaa;
    color: #999
}

@-webkit-keyframes dots {
    0%, 20% {
        color: transparent;
        text-shadow: 0.25em 0 0 transparent, 0.5em 0 0 transparent
    }
    40% {
        color: currentColor;
        text-shadow: 0.25em 0 0 transparent, 0.5em 0 0 transparent
    }
    60% {
        text-shadow: 0.25em 0 0 currentColor, 0.5em 0 0 transparent
    }
    80%, 100% {
        text-shadow: .25em 0 0 currentColor, .5em 0 0 currentColor
    }
}

@keyframes dots {
    0%, 20% {
        color: transparent;
        text-shadow: 0.25em 0 0 transparent, 0.5em 0 0 transparent
    }
    40% {
        color: currentColor;
        text-shadow: 0.25em 0 0 transparent, 0.5em 0 0 transparent
    }
    60% {
        text-shadow: 0.25em 0 0 currentColor, 0.5em 0 0 transparent
    }
    80%, 100% {
        text-shadow: .25em 0 0 currentColor, .5em 0 0 currentColor
    }
}

@-webkit-keyframes dots-bright {
    0%, 20% {
        color: transparent;
        text-shadow: 0.25em 0 0 transparent, 0.5em 0 0 transparent
    }
    40% {
        color: #fff;
        text-shadow: 0.25em 0 0 transparent, 0.5em 0 0 transparent
    }
    60% {
        text-shadow: 0.25em 0 0 #fff, 0.5em 0 0 transparent
    }
    80%, 100% {
        text-shadow: .25em 0 0 #fff, .5em 0 0 #fff
    }
}

@keyframes dots-bright {
    0%, 20% {
        color: transparent;
        text-shadow: 0.25em 0 0 transparent, 0.5em 0 0 transparent
    }
    40% {
        color: #fff;
        text-shadow: 0.25em 0 0 transparent, 0.5em 0 0 transparent
    }
    60% {
        text-shadow: 0.25em 0 0 #fff, 0.5em 0 0 transparent
    }
    80%, 100% {
        text-shadow: .25em 0 0 #fff, .5em 0 0 #fff
    }
}

@-webkit-keyframes tumbling {
    0% {
        -webkit-transform: rotateX(0deg);
        transform: rotateX(0deg)
    }
    100% {
        -webkit-transform: rotateX(180deg);
        transform: rotateX(180deg)
    }
}

@keyframes tumbling {
    0% {
        -webkit-transform: rotateX(0deg);
        transform: rotateX(0deg)
    }
    100% {
        -webkit-transform: rotateX(180deg);
        transform: rotateX(180deg)
    }
}

@-webkit-keyframes uneven-rotate {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
    30% {
        -webkit-transform: rotate(170deg);
        transform: rotate(170deg)
    }
    70% {
        -webkit-transform: rotate(190deg);
        transform: rotate(190deg)
    }
    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg)
    }
}

@keyframes uneven-rotate {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
    30% {
        -webkit-transform: rotate(170deg);
        transform: rotate(170deg)
    }
    70% {
        -webkit-transform: rotate(190deg);
        transform: rotate(190deg)
    }
    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg)
    }
}

.loading-container {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    text-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    height: 80vh
}

.loading-container.size--small {
    height: auto;
    margin-bottom: 1.618rem
}

.lookback-mark.mode--loading {
    -webkit-animation: tumbling .5s infinite ease-in-out alternate;
    animation: tumbling .5s infinite ease-in-out alternate
}

.lookback-mark.mode--loading.inline {
    height: 1em;
    width: auto;
    margin-left: 0.5rem
}

.loading-dots::after {
    content: '.';
    -webkit-animation: dots 1.5s steps(5, end) infinite;
    animation: dots 1.5s steps(5, end) infinite
}

.loading-dots.loading-dots--bright::after {
    -webkit-animation: dots-bright 1.5s steps(5, end) infinite;
    animation: dots-bright 1.5s steps(5, end) infinite
}

.circle-spinner {
    -webkit-transform: translate3d(0, 0, 0) rotate(45deg);
    transform: translate3d(0, 0, 0) rotate(45deg);
    display: inline-block;
    width: 64px;
    height: 64px;
    position: relative;
    color: #999
}

.circle-spinner .ring {
    -webkit-animation: uneven-rotate 1s infinite ease-in;
    animation: uneven-rotate 1s infinite ease-in;
    display: inline-block;
    border-radius: 50%;
    border: 5px solid;
    border-color: transparent currentColor currentColor transparent;
    position: absolute
}

.circle-spinner .ring:nth-child(1) {
    -webkit-animation-delay: 300ms;
    animation-delay: 300ms;
    width: 24px;
    height: 24px;
    top: 20px;
    left: 20px;
    opacity: .2
}

.circle-spinner .ring:nth-child(2) {
    -webkit-animation-delay: 150ms;
    animation-delay: 150ms;
    width: 44px;
    height: 44px;
    top: 10px;
    left: 10px;
    opacity: .5
}

.circle-spinner .ring:nth-child(3) {
    width: 64px;
    height: 64px;
    top: 0;
    left: 0
}

.sk-moving-cubes {
    margin: 3.236rem auto;
    width: 3em;
    height: 3em;
    position: relative;
    color: #333
}

.sk-moving-cubes .cube1, .sk-moving-cubes .cube2 {
    background-color: currentColor;
    width: 15px;
    height: 15px;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-animation: sk-cubemove 1.8s infinite ease-in-out;
    animation: sk-cubemove 1.8s infinite ease-in-out
}

.sk-moving-cubes .cube2 {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s
}

@-webkit-keyframes sk-cuberotate {
    25% {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg)
    }
    30% {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg)
    }
    50% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg)
    }
    75% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg)
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@keyframes sk-cuberotate {
    25% {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg)
    }
    30% {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg)
    }
    50% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg)
    }
    75% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg)
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@-webkit-keyframes sk-cubemove {
    25% {
        -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
        transform: translateX(42px) rotate(-90deg) scale(0.5);
        opacity: .5
    }
    50% {
        -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);
        transform: translateX(42px) translateY(42px) rotate(-179deg);
        opacity: 1
    }
    50.1% {
        -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
        transform: translateX(42px) translateY(42px) rotate(-180deg)
    }
    75% {
        -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
        transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
        opacity: .5
    }
    100% {
        -webkit-transform: rotate(-360deg);
        transform: rotate(-360deg);
        opacity: 1
    }
}

@keyframes sk-cubemove {
    25% {
        -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
        transform: translateX(42px) rotate(-90deg) scale(0.5);
        opacity: .5
    }
    50% {
        -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);
        transform: translateX(42px) translateY(42px) rotate(-179deg);
        opacity: 1
    }
    50.1% {
        -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
        transform: translateX(42px) translateY(42px) rotate(-180deg)
    }
    75% {
        -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
        transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
        opacity: .5
    }
    100% {
        -webkit-transform: rotate(-360deg);
        transform: rotate(-360deg);
        opacity: 1
    }
}

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

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

.spinner-circular {
    display: inline-block;
    font-size: 15px;
    position: relative;
    text-indent: -9999em;
    overflow: hidden;
    border: 2px solid;
    border-color: rgba(255, 255, 255, 0.2) rgba(255, 255, 255, 0.2) rgba(255, 255, 255, 0.2) #fff;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: circular-spinner .8s infinite linear;
    animation: circular-spinner .8s infinite linear
}

.spinner-circular--gray {
    border-color: rgba(32, 78, 87, 0.2) rgba(32, 78, 87, 0.2) rgba(32, 78, 87, 0.2) rgba(32, 78, 87, 0.6)
}

.spinner-circular--bright {
    border-color: rgba(157, 221, 234, 0.2) rgba(157, 221, 234, 0.2) rgba(157, 221, 234, 0.2) rgba(157, 221, 234, 0.6)
}

.spinner-circular--small {
    font-size: 10px;
    -webkit-animation-duration: .6s;
    animation-duration: .6s
}

.spinner-circular--tiny {
    font-size: 7px;
    -webkit-animation-duration: .6s;
    animation-duration: .6s
}

.spinner-circular--large {
    font-size: 25px
}

.spinner-circular--huge {
    font-size: 35px
}

.spinner-circular, .spinner-circular::after {
    border-radius: 50%;
    width: 2em;
    height: 2em
}

@-webkit-keyframes loadingPlaceholder {
    from {
        opacity: .75;
        -webkit-transform: scaleX(0.6);
        transform: scaleX(0.6)
    }
    to {
        opacity: 1;
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }
}

@keyframes loadingPlaceholder {
    from {
        opacity: .75;
        -webkit-transform: scaleX(0.6);
        transform: scaleX(0.6)
    }
    to {
        opacity: 1;
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }
}

.loading-placeholder div {
    border-radius: 10px;
    background-color: rgba(102, 142, 167, 0.08);
    margin-bottom: 0.809rem;
    -webkit-transform-origin: left;
    transform-origin: left;
    -webkit-animation: loadingPlaceholder .5s infinite alternate ease;
    animation: loadingPlaceholder .5s infinite alternate ease
}

.loading-placeholder div:nth-child(1) {
    width: 30rem;
    height: 2rem
}

.loading-placeholder div:nth-child(2) {
    width: 15rem;
    height: 1.5rem;
    -webkit-animation-delay: .2s;
    animation-delay: .2s
}

.loading-placeholder div:nth-child(3) {
    width: 2rem;
    height: 1rem;
    -webkit-animation-delay: .4s;
    animation-delay: .4s
}

.close-cross {
    display: inline-block;
    position: relative;
    font-size: 1em;
    color: rgba(32, 78, 87, 0.56);
    border-radius: 100%;
    width: 2.2em;
    height: 2.2em;
    line-height: 1.9;
    transition: background-color .15s ease;
    text-align: center
}

.close-cross:hover {
    color: rgba(32, 78, 87, 0.6);
    background-color: rgba(102, 142, 167, 0.1)
}

.close-cross:hover .close-cross__desc {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0)
}

.close-cross:active {
    color: #204e57;
    background-color: rgba(102, 142, 167, 0.18)
}

.close-cross__desc {
    position: absolute;
    transition: opacity .15s ease, -webkit-transform .2s ease;
    transition: opacity .15s ease, transform .2s ease;
    transition: opacity .15s ease, transform .2s ease, -webkit-transform .2s ease;
    -webkit-transform: translate(10px, 0);
    transform: translate(10px, 0);
    right: 100%;
    text-align: right;
    font-size: 0.8em;
    white-space: nowrap;
    padding-right: 5px;
    top: 0.4em;
    opacity: 0;
    font-style: italic
}

.autocomplete-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    position: absolute;
    background-color: #fff;
    top: 100%;
    left: 0;
    padding: 0;
    border: 1px solid rgba(89, 171, 234, 0.3);
    border-radius: 3px;
    box-shadow: rgba(114, 182, 234, 0.1) 0 1px 4px, rgba(0, 0, 0, 0.1) 0 2px 10px;
    min-width: 160px;
    margin-top: 3px;
    max-height: 156px;
    overflow: hidden;
    overflow-y: scroll
}

.autocomplete-menu > li {
    border-top: 1px solid rgba(134, 194, 239, 0.3)
}

.autocomplete-menu > li:first-child {
    border-top: 0
}

.autocomplete-menu > li:first-child a {
    border-radius: 1px 1px 0 0
}

.autocomplete-menu > li:last-child a {
    border-radius: 0 1px 1px 0
}

.autocomplete-menu > li:hover {
    background: none
}

.autocomplete-menu > li.active > a, .autocomplete-menu > li > a:hover, .autocomplete-menu > li > a:focus {
    background-color: rgba(143, 177, 199, 0.12);
    text-decoration: none;
    outline: 0;
    color: #204e57
}

.autocomplete-menu > li.active > a .avatar, .autocomplete-menu > li > a:hover .avatar, .autocomplete-menu > li > a:focus .avatar {
    opacity: 1
}

.autocomplete-menu > li > a {
    cursor: pointer;
    color: rgba(32, 78, 87, 0.9);
    text-decoration: none;
    padding: .35em .5em;
    font-size: 0.86667rem;
    white-space: nowrap;
    display: block
}

.autocomplete-menu .textcomplete-footer {
    text-align: center;
    padding: .35em .5em;
    color: #999
}

.autocomplete-menu img {
    display: inline-block;
    height: 2.3ex;
    width: auto;
    margin: 0;
    margin-right: .3em;
    line-height: normal;
    vertical-align: middle
}

.autocomplete-menu .avatar {
    border-radius: 100%;
    height: 3.2ex;
    position: relative;
    top: -1px;
    opacity: .9
}

.autocomplete-menu .item-label {
    font-weight: bold
}

.autocomplete-menu .emoji {
    position: relative;
    top: .3ex;
    margin-right: .4em
}

.autocomplete-menu .item-description {
    font-weight: normal;
    color: #666;
    margin-left: .1em;
    font-size: .9em
}

.autocomplete-menu-wide {
    top: calc(100% - 3px) !important;
    width: 100%;
    box-shadow: rgba(0, 0, 0, 0.2) 0 6px 10px;
    border-radius: 0 0 4px 4px;
    border-width: 1px 0 1px;
    max-height: none;
    border-bottom-color: #bbb
}

.autocomplete-menu-wide > li.active > a, .autocomplete-menu-wide > li > a:hover, .autocomplete-menu-wide > li > a:focus {
    background-color: #1DABF2;
    color: #fff
}

.autocomplete-menu-wide > li.active > a .item-description, .autocomplete-menu-wide > li > a:hover .item-description, .autocomplete-menu-wide > li > a:focus .item-description {
    color: #fff
}

.autocomplete-menu-wide > li > a {
    padding: 0.7em 1em;
    font-weight: normal;
    font-size: 1.06667rem;
    color: #555
}

.autocomplete-menu-wide img {
    height: 4ex;
    margin-right: .4em
}

.autocomplete-menu-wide .textcomplete-footer {
    padding: .7em 1em
}

.horizontal-ghost-nav, .horizontal-pill-nav, .horizontal-pill-nav--rounded {
    margin: 0 0 3.236rem
}

.horizontal-ghost-nav ul, .horizontal-pill-nav ul, .horizontal-pill-nav--rounded ul {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center
}

.horizontal-ghost-nav a, .horizontal-pill-nav a, .horizontal-pill-nav--rounded a {
    display: inline-block;
    padding: .5em 3em
}

.horizontal-ghost-nav a:hover, .horizontal-pill-nav a:hover, .horizontal-pill-nav--rounded a:hover {
    text-decoration: none
}

.horizontal-ghost-nav .nav--current a, .horizontal-pill-nav .nav--current a, .horizontal-pill-nav--rounded .nav--current a {
    position: relative;
    cursor: default
}

.horizontal-ghost-nav li:first-child a, .horizontal-pill-nav li:first-child a, .horizontal-pill-nav--rounded li:first-child a {
    border-radius: 3px 0 0 3px
}

.horizontal-ghost-nav li:last-child a, .horizontal-pill-nav li:last-child a, .horizontal-pill-nav--rounded li:last-child a {
    border-radius: 0 3px 3px 0
}

@media only screen and (max-width: 481px) {
    .horizontal-ghost-nav, .horizontal-pill-nav, .horizontal-pill-nav--rounded {
        text-align: center
    }

    .horizontal-ghost-nav ul, .horizontal-pill-nav ul, .horizontal-pill-nav--rounded ul {
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column
    }

    .horizontal-ghost-nav li a, .horizontal-pill-nav li a, .horizontal-pill-nav--rounded li a {
        width: 100%;
        display: block
    }

    .horizontal-ghost-nav li:first-child a, .horizontal-pill-nav li:first-child a, .horizontal-pill-nav--rounded li:first-child a {
        border-radius: 3px 3px 0 0
    }

    .horizontal-ghost-nav li:last-child a, .horizontal-pill-nav li:last-child a, .horizontal-pill-nav--rounded li:last-child a {
        border-radius: 0 0 3px 3px
    }
}

.nav__bubble {
    background-color: rgba(102, 142, 167, 0.15);
    font-weight: bold;
    padding: 1px 9px 1px 8px;
    display: inline-block;
    line-height: 1.2;
    border-radius: 12px;
    font-size: .7em;
    color: #204e57;
    margin-left: 2px;
    font-weight: normal
}

.horizontal-ghost-nav {
    color: #1DABF2
}

.horizontal-ghost-nav a {
    color: currentColor;
    border: 1px solid currentColor;
    border-right-width: 0
}

.horizontal-ghost-nav .nav--current a {
    background-color: #1DABF2;
    color: #fff;
    box-shadow: none
}

.horizontal-ghost-nav li:last-child a {
    border-right-width: 1px
}

.horizontal-ghost-nav.mode--light {
    color: #fff
}

.horizontal-ghost-nav.mode--light a {
    background-color: rgba(0, 0, 0, 0.6);
    -webkit-backdrop-filter: blur(3px)
}

.horizontal-ghost-nav.mode--light .nav--current a {
    background-color: #fff;
    color: #204e57;
    border-color: #fff
}

.horizontal-ghost-nav.mode--light li:not(.nav--current) a:hover {
    background-color: rgba(255, 255, 255, 0.35);
    -webkit-backdrop-filter: blur(5px)
}

@media only screen and (max-width: 481px) {
    .horizontal-ghost-nav li:first-child a {
        border-top-width: 1px
    }

    .horizontal-ghost-nav a {
        border-width: 0 1px 1px
    }
}

.horizontal-pill-nav li:not(.nav--current):not(:first-child) {
    box-shadow: #c3c3c3 -1px 0 0
}

.horizontal-pill-nav .nav--current a {
    background-color: #1DABF2;
    color: #fff;
    position: relative
}

.horizontal-pill-nav .nav--current a:hover {
    background-color: #1DABF2
}

@media only screen and (min-width: 481px) {
    .horizontal-pill-nav .nav--current a::after {
        width: 0;
        height: 0;
        border: solid transparent;
        border-width: 8px 11px 0 11px;
        border-top-color: #1DABF2;
        display: block;
        content: '';
        position: absolute;
        bottom: -8px;
        left: calc(50% - 8px)
    }
}

.horizontal-pill-nav a {
    color: rgba(32, 78, 87, 0.8);
    background-color: #eee;
    transition: background-color .1s ease-out, color .1s ease-out
}

.horizontal-pill-nav a:hover {
    background-color: #e1e1e1
}

.horizontal-pill-nav a:active {
    background-color: #dadada
}

@media only screen and (max-width: 481px) {
    .horizontal-pill-nav li:not(.nav--current):not(:first-child) {
        box-shadow: #c3c3c3 0 -1px 0
    }
}

.horizontal-pill-nav.horizontal-pill-nav--light li:not(.nav--current) a {
    background-color: #fff
}

.horizontal-pill-nav.horizontal-pill-nav--light li:not(.nav--current) a:hover {
    color: #2e6f7c;
    background-color: rgba(255, 255, 255, 0.6)
}

.horizontal-pill-nav.horizontal-pill-nav--light li:not(.nav--current) a:active {
    background-color: #eee
}

.horizontal-pill-nav--rounded a {
    color: rgba(32, 78, 87, 0.8);
    border: 1px solid rgba(103, 178, 235, 0.3);
    background-color: #fff
}

.horizontal-pill-nav--rounded a:hover {
    color: #204e57;
    background-color: rgba(246, 251, 253, 0.8)
}

.horizontal-pill-nav--rounded a:active {
    color: #204e57;
    background-color: #eef7fb
}

.horizontal-pill-nav--rounded li:not(:last-child) a {
    border-right: 0
}

.horizontal-pill-nav--rounded li:first-child a {
    border-radius: 3em 0 0 3em
}

.horizontal-pill-nav--rounded li:last-child a {
    border-radius: 0 3em 3em 0
}

.horizontal-pill-nav--rounded .nav--current a {
    background-color: #1DABF2;
    color: #fff;
    border-color: #1DABF2
}

.horizontal-pill-nav--rounded .nav--current + li a {
    border-left-color: #1DABF2
}

.horizontal-nav {
    font-size: 1.33333em
}

.horizontal-nav--full li {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.horizontal-nav--bordered {
    box-shadow: inset rgba(112, 182, 236, 0.23) 0 -2px 0
}

.horizontal-nav--centered {
    text-align: center
}

.horizontal-nav--centered ul {
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center
}

.horizontal-nav ul {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

.horizontal-nav li {
    margin: 0 10px
}

.horizontal-nav a, .horizontal-nav button {
    display: inline-block;
    color: rgba(32, 78, 87, 0.5);
    transition: color .3s, box-shadow .3s;
    padding: .5em .3em
}

.horizontal-nav a:hover, .horizontal-nav button:hover {
    text-decoration: none;
    color: rgba(32, 78, 87, 0.75)
}

.horizontal-nav a .help-link, .horizontal-nav button .help-link {
    margin-left: .3em;
    margin-right: .3em;
    font-size: .9em
}

.horizontal-nav a .icon, .horizontal-nav button .icon {
    margin-right: .3em;
    position: relative;
    top: -.2ex
}

.horizontal-nav .nav--current a {
    color: #204e57;
    box-shadow: inset #10afff 0 -3px 0;
    cursor: default
}

.horizontal-nav--uppercase {
    text-transform: uppercase;
    font-weight: bold;
    font-size: 0.86667rem;
    letter-spacing: 1px
}

.horizontal-nav--uppercase a {
    color: rgba(102, 142, 167, 0.8);
    padding-left: .1em;
    padding-right: .1em
}

.horizontal-nav--uppercase li {
    margin-left: 1.5em;
    margin-right: 1.5em
}

@media only screen and (max-width: 481px) {
    .horizontal-nav {
        text-align: center;
        font-size: 1.2em
    }

    .horizontal-nav ul {
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center
    }
}

.simple-nav--with-separator li:not(:last-child)::after {
    content: '|';
    display: inline-block;
    padding: 0 2px
}

.simple-nav--centered ul {
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center
}

.simple-nav ul {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

.simple-nav li.nav--current a {
    color: rgba(32, 78, 87, 0.5);
    cursor: default
}

.simple-nav li.nav--current a:hover {
    text-decoration: none
}

.simple-nav a {
    display: inline-block;
    padding: 0 4px
}

.simple-nav a:active {
    color: #0a78ae
}

.simple-nav.style--filled a {
    border-radius: 4px;
    color: rgba(32, 78, 87, 0.7);
    padding: 0 .6em;
    transition: background-color .2s ease
}

.simple-nav.style--filled a:hover {
    text-decoration: none;
    color: rgba(32, 78, 87, 0.9);
    background-color: rgba(102, 142, 167, 0.1)
}

.simple-nav.style--filled a:active {
    background-color: rgba(80, 116, 138, 0.12)
}

.simple-nav.style--filled li:not(:last-child) {
    margin-right: 3px
}

.simple-nav.style--filled li.nav--current a {
    color: #204e57;
    background-color: rgba(90, 145, 179, 0.2)
}

.layout-hero {
    padding: 11.326rem 2%;
    text-align: center
}

.layout-hero h1 {
    font-size: 3.2rem;
    margin-bottom: 0
}

.layout-hero h2 {
    font-size: 1.6rem
}

.layout-hero__actions {
    margin: 0;
    font-size: 1.1em
}

.layout-hero__actions__detail {
    font-size: .9rem
}

@media only screen and (max-width: 481px) {
    .layout-hero {
        padding: 3.236rem 5%
    }

    .layout-hero h1, .layout-hero h2 {
        padding: 0 5%
    }

    .layout-hero h1 {
        font-size: 10vw;
        line-height: 1.4;
        margin-bottom: 0.809rem
    }

    .layout-hero h2 {
        font-size: 6vw;
        line-height: 1.4
    }
}

.layout-feature {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.layout-feature h1 {
    line-height: 1.4
}

.layout-feature--vertical {
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    text-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    -ms-grid-row-align: center;
    align-items: center
}

.layout-feature--vertical .layout-feature__text, .layout-feature--vertical .layout-feature__figure {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding: 0
}

.layout-feature--vertical .layout-feature__text__content {
    margin: 0 auto
}

.layout-feature--reverse {
    -webkit-flex-direction: row-reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse
}

.layout-feature--reverse .layout-feature__figure {
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start
}

.layout-feature--reverse .layout-feature__text {
    padding-left: 2vw;
    padding-right: 6vw
}

.layout-feature__text {
    -webkit-flex: 5;
    -ms-flex: 5;
    flex: 5;
    padding-left: 6vw;
    padding-right: 2vw
}

.layout-feature__text__content {
    max-width: 33.33333rem
}

.layout-feature__figure {
    -webkit-flex: 7;
    -ms-flex: 7;
    flex: 7;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end
}

.layout-feature__note {
    color: #7ea5bf
}

.layout-feature__list {
    list-style: none;
    padding: 0;
    margin: 0;
    color: #204e57;
    font-weight: bold
}

.layout-feature__list--right {
    text-align: right
}

.layout-feature__list--right .icon {
    margin-left: 1.5rem
}

.layout-feature__list li {
    margin-bottom: 0.809rem
}

.layout-feature__list .icon {
    margin-right: 1.5rem;
    font-size: 1.2em;
    position: relative;
    top: -1px
}

@media only screen and (max-width: 481px) {
    .layout-feature__list .icon {
        display: none
    }
}

@media only screen and (max-width: 481px) {
    .layout-feature {
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column
    }

    .layout-feature--reverse, .layout-feature--vertical {
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column
    }

    .layout-feature--reverse .layout-feature__text, .layout-feature--vertical .layout-feature__text {
        padding: 1.618rem 8%
    }

    .layout-feature__text, .layout-feature__figure {
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1
    }

    .layout-feature__text {
        padding: 1.618rem 8%
    }
}

.layout-overview {
    list-style: none;
    padding: 0;
    margin: 0;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

.layout-overview li {
    -webkit-flex: 0 1 50%;
    -ms-flex: 0 1 50%;
    flex: 0 1 50%;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

.layout-overview figure {
    color: #555
}

.layout-overview--grid {
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.layout-overview--grid li {
    margin-bottom: 1.618rem;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    -ms-grid-row-align: flex-end;
    align-items: flex-end
}

.layout-overview--grid figure {
    font-size: 2.3em;
    margin-right: 8%
}

.layout-overview--grid .layout-overview__module {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    margin-bottom: 0
}

.layout-overview--row {
    text-align: center;
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    -ms-grid-row-align: flex-end;
    align-items: flex-end
}

.layout-overview--row li {
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: center;
    -ms-flex-align: center;
    -ms-grid-row-align: center;
    align-items: center
}

.layout-outro {
    padding: 4.854rem 5%;
    text-align: center
}

.layout-outro h1 {
    font-size: 2.4rem;
    margin-bottom: .5rem
}

@media only screen and (max-width: 481px) {
    .layout-outro h1 {
        font-size: 1.6rem
    }
}

.component-quote {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

.component-quote blockquote {
    border: 0;
    padding: 0;
    margin: 0
}

.component-quote cite {
    font-style: normal
}

.component-quote__avatar {
    margin-right: 1.5rem;
    max-width: 65px
}

.component-quote__avatar img {
    border-radius: 100%
}

.component-quote__body {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    font-size: .85rem;
    max-width: 35em
}

.component-quote__body__text {
    margin-bottom: 0.809rem
}

.component-quote__body__text p {
    margin-bottom: 0.53933rem
}

.component-quote__body__footer {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 1em
}

.component-quote__source {
    opacity: .6
}

.component-quote__source::before {
    content: "— "
}

.component-quote__logo {
    max-width: 6em;
    margin-right: 5px;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
}

@media only screen and (max-width: 481px) {
    .component-quote {
        text-align: center
    }

    .component-quote .component-quote__avatar {
        display: none
    }

    .component-quote .component-quote__body__footer {
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center
    }
}

.progress-bar {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    height: 9px
}

.progress-bar__item {
    background-color: #e9e9e9;
    margin-right: 2px;
    text-indent: -999em;
    white-space: nowrap;
    width: 100%
}

.progress-bar__item:first-child {
    border-radius: 2em 0 0 2em
}

.progress-bar__item:last-child {
    margin-right: 0;
    border-radius: 0 2em 2em 0
}

.progress-bar__item--filled {
    background-color: #3BD788
}

.avatar {
    overflow: hidden;
    text-align: center;
    display: inline-block;
    vertical-align: middle;
    font-weight: normal;
    border-radius: 100%
}

.avatar.style--square {
    border-radius: 4px
}

.avatar img {
    border-radius: 100%
}

.avatar img.style--square {
    border-radius: 4px
}

.avatar--xsmall {
    width: 16px;
    height: 16px
}

.avatar--small {
    width: 24px;
    height: 24px;
    font-size: 11px;
    line-height: 20px;
    font-weight: bold
}

.avatar--medium {
    width: 32px;
    height: 32px;
    font-size: 14px;
    line-height: 28px;
    font-weight: bold
}

.avatar--large {
    width: 48px;
    height: 48px;
    font-size: 22px;
    line-height: 44px
}

.avatar--xlarge {
    width: 64px;
    height: 64px;
    font-size: 29px;
    line-height: 60px
}

.avatar--initials {
    position: relative
}

.avatar--initials img {
    position: relative;
    z-index: 2
}

.avatar--initials::after {
    pointer-events: none;
    content: attr(data-initials);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 100%;
    color: #a0bdd0;
    border: 2px solid #d3e0e9
}

.avatar--initials.avatar--small::after {
    font-weight: bold
}

.avatar--initials.avatar--xsmall::after {
    content: ''
}

.dropdown.popup-guide {
    max-width: 320px;
    color: #555;
    z-index: 1004;
    text-align: center;
    box-shadow: rgba(0, 0, 0, 0.1) 0 1px 4px, rgba(0, 0, 0, 0.05) 0 7px 15px
}

.dropdown.popup-guide--with-backdrop {
    border: 0;
    box-shadow: rgba(0, 0, 0, 0.2) 0 2px 4px, rgba(0, 0, 0, 0.08) 0 7px 20px
}

.dropdown.popup-guide .popup-guide__author {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    margin: -40px auto calc(0.53933rem - 5px);
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.dropdown.popup-guide .popup-guide__author .avatar {
    box-shadow: rgba(0, 0, 0, 0.15) 0 -1px 2px;
    background-color: #f6f6f6
}

.dropdown.popup-guide .popup-guide__author__name {
    color: #999;
    font-size: .9em;
    margin-top: 5px
}

.dropdown.popup-guide .popup-guide__close {
    top: 10px;
    right: 10px;
    font-size: .6em
}

.dropdown.popup-guide .popup-guide__actions {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin: 0 -1rem -1rem;
    border-radius: 0 0 4px 4px;
    overflow: hidden
}

.dropdown.popup-guide .popup-guide__action {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: block;
    padding: .5em;
    padding-bottom: calc(.5em + 1px);
    text-align: center;
    color: #1DABF2;
    background-color: #f8f8f8;
    border-top: 1px solid #ddd;
    box-shadow: inset #ddd -1px 0 0;
    transition: background-color .15s ease
}

.dropdown.popup-guide .popup-guide__action--primary {
    font-weight: bold
}

.dropdown.popup-guide .popup-guide__action:hover {
    text-decoration: none;
    background-color: #f0f0f0;
    color: #0c8fd0
}

.dropdown.popup-guide .popup-guide__action:active {
    background-color: #e8e8e8
}

.dropdown.popup-guide .popup-guide__action:last-child {
    box-shadow: none
}

.backdrop {
    content: '';
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    opacity: 0;
    pointer-events: none;
    z-index: 1001;
    transition: opacity .4s ease
}

.backdrop.backdrop--light {
    background-color: #E9F5F7;
    -webkit-backdrop-filter: blur(10px)
}

.backdrop.backdrop--normal {
    background-color: #204e57;
    -webkit-backdrop-filter: blur(10px)
}

.backdrop.backdrop--dark {
    background-color: #191E22;
    -webkit-backdrop-filter: blur(10px)
}

.backdrop--visible {
    pointer-events: all
}

.backdrop--visible.backdrop--normal {
    opacity: .5
}

.backdrop--visible.backdrop--light {
    opacity: .3
}

.backdrop--visible.backdrop--dark {
    opacity: .9
}

.dropdown-changelog {
    min-width: 400px;
    padding: 0.25rem 1rem 0.75rem
}

.dropdown-changelog .dropdown__heading {
    margin: 0;
    position: relative
}

.dropdown-changelog .spinner-circular {
    margin-left: 5px;
    position: relative;
    top: -2px
}

.dropdown-changelog__list {
    margin-bottom: 1em
}

.dropdown-changelog__list a {
    position: relative;
    max-width: 398px
}

.dropdown-changelog__list a .badge {
    margin-right: .5rem;
    text-transform: none;
    border-color: #ccc;
    color: #aaa
}

.dropdown-changelog__list [role="menuitem"] > a {
    display: block
}

.dropdown-changelog__list [role="menuitem"].dropdown-changelog__list--is-new a {
    color: #204e57;
    font-weight: bold
}

.dropdown-changelog__list [role="menuitem"].dropdown-changelog__list--is-new a::before {
    content: '';
    display: inline-block;
    border-radius: 100%;
    background-color: #1DABF2;
    margin: 0 5px 0 3px;
    vertical-align: middle;
    width: 6px;
    height: 6px
}

.dropdown-changelog__links {
    padding: .5rem 1rem
}

.dropdown-changelog__links a {
    margin-right: 5px
}

.dropdown-changelog[data-dropdown-align="right"] {
    text-align: left
}

.signup-email-form {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    max-width: 36rem;
    width: 90%;
    margin: 3.236rem auto 0;
    font-size: 1.2em;
    font-weight: 300;
    box-shadow: rgba(114, 182, 234, 0.2) 0 2px 30px;
    will-change: box-shadow, transform;
    transition: box-shadow .6s ease, -webkit-transform .8s ease-out;
    transition: box-shadow .6s ease, transform .8s ease-out;
    transition: box-shadow .6s ease, transform .8s ease-out, -webkit-transform .8s ease-out;
    border-radius: 2em;
    -webkit-transform: translate3d(0, -2px, 0);
    transform: translate3d(0, -2px, 0)
}

.signup-email-form--focused {
    box-shadow: none;
    -webkit-transform: none;
    transform: none
}

.signup-email-form__text {
    position: relative;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.signup-email-form input[type="email"] {
    border-radius: 2em 0 0 2em;
    border: 1px solid rgba(32, 135, 214, 0.3);
    border-right-width: 0;
    padding: .9em;
    padding-left: 1.5em;
    box-shadow: none;
    width: 100%;
    margin: 0;
    color: #204e57;
    font-family: "Playfair Display", serif;
    -webkit-backdrop-filter: blur(4px);
    transition: background-color .3s ease, border-color .3s ease
}

.signup-email-form input[type="email"]:focus {
    border-color: rgba(12, 143, 208, 0.8);
    box-shadow: rgba(29, 171, 242, 0.2) 0 2px 20px
}

.signup-email-form .icon {
    left: 1em;
    top: 17px;
    color: #999;
    font-size: 1.1em;
    position: absolute;
    transition: color .15s ease
}

.signup-email-form .btn {
    border-radius: 0 2em 2em 0
}

@media only screen and (max-width: 800px) {
    .signup-email-form {
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column
    }

    .signup-email-form input[type="email"] {
        border-radius: 6px 6px 0 0;
        border-width: 1px 1px 0
    }

    .signup-email-form input[type="email"]:focus {
        border-width: 1px 1px 0
    }

    .signup-email-form .btn {
        border-radius: 0 0 6px 6px;
        font-size: .9em;
        padding-top: .8em;
        padding-bottom: .8em
    }
}

@media only screen and (max-width: 481px) {
    .signup-email-form input[type='email'] {
        font-size: 16px
    }

    .signup-email-form .icon {
        left: 0.6em;
        top: 13px
    }
}

.dialog-confirm {
    position: fixed;
    z-index: 1004;
    width: 32rem;
    top: 30%;
    left: calc(50% - 16rem);
    border-radius: 6px;
    padding: 0.809rem 1.618rem;
    box-shadow: rgba(0, 0, 0, 0.4) 0 10px 40px;
    background-color: rgba(255, 255, 255, 0.95);
    outline: none;
    transition: opacity 0.1s ease, -webkit-transform 0.15s cubic-bezier(0.22, 1.29, 0.7, 1.17);
    transition: opacity 0.1s ease, transform 0.15s cubic-bezier(0.22, 1.29, 0.7, 1.17);
    transition: opacity 0.1s ease, transform 0.15s cubic-bezier(0.22, 1.29, 0.7, 1.17), -webkit-transform 0.15s cubic-bezier(0.22, 1.29, 0.7, 1.17)
}

.dialog-confirm.in {
    opacity: 1;
    -webkit-transform: none;
    transform: none
}

.dialog-confirm.off-screen, .dialog-confirm.out {
    opacity: 0;
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
    pointer-events: none
}

@supports ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))) {
    .dialog-confirm {
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        background-color: rgba(255, 255, 255, 0.9)
    }
}

.dialog-confirm__title {
    text-align: center;
    font-size: 1.06667em;
    margin: 0.4045rem 0 1.2135rem;
    font-family: Lato, "Helvetica Neue", sans-serif;
    color: #204e57
}

.dialog-confirm__description {
    text-align: center;
    color: gray;
    font-size: .9em;
    margin-top: -0.4045rem
}

.dialog-confirm__actions {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin: 0 -1.618rem -1.618rem
}

.dialog-confirm__actions .btn {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding-top: .8em;
    padding-bottom: .8em
}

.dialog-confirm__actions .btn:first-child {
    border-radius: 0;
    border-bottom-left-radius: 6px
}

.dialog-confirm__actions .btn:last-child {
    border-radius: 0;
    border-bottom-right-radius: 6px
}

.dialog-confirm__btn-cancel {
    color: #1DABF2;
    background-color: #f8f8f8
}

.dialog-confirm__btn-cancel:active {
    background-color: #f0f0f0;
    color: #0c8fd0
}

.dialog-confirm__btn-cancel:hover, .dialog-confirm__btn-cancel:focus {
    background-color: #e8e8e8;
    color: #1DABF2
}

.dialog-confirm__btn-confirm {
    font-weight: bold;
    transition: box-shadow .2s ease
}

.dialog-confirm__btn-confirm:focus {
    box-shadow: rgba(29, 171, 242, 0.5) 0 0 10px 1px
}

.multi-select {
    list-style: none;
    padding: 0;
    margin: 0;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    line-height: 1.2
}

.multi-select__item {
    white-space: normal;
    overflow: hidden;
    margin-right: 5px;
    border-radius: 3px;
    background-color: #F6FBFD;
    border: 1px solid #1DABF2;
    font-size: 0.8rem;
    padding: 3px 4px;
    cursor: default
}

.multi-select__item__data {
    display: inline-block;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.multi-select__item__remove {
    margin-left: 1px;
    padding: 0 1px;
    font-weight: bold;
    font-size: 1.1em;
    cursor: pointer
}

.multi-select__item__remove:hover {
    text-decoration: none
}

.user-selection-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.user-selection-list__user {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    margin: 0 5px 5px 0;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    background-color: #f8f8f8;
    padding: 3px 6px;
    cursor: pointer
}

.user-selection-list__user--active {
    background-color: #1DABF2;
    color: #fff
}

.user-selection-list__user .avatar {
    margin-right: 4px
}

.user-selection-list__user__name {
    font-size: 0.86667rem
}

.url-box {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

.url-box .url-box__field {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    margin: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: 0;
    cursor: pointer
}

.url-box .url-box__btn {
    padding: .2em .5em;
    border-radius: 0 4px 4px 0
}

.url-box .url-box__btn .icon {
    margin: 0
}

#nprogress .bar {
    background: #204e57;
    height: 3px
}

#nprogress .bar .peg {
    box-shadow: none
}

.notice-banner {
    font-size: 0.9em;
    display: -webkit-flex !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    background-color: #20B8D1;
    text-align: center;
    color: rgba(255, 255, 255, 0.9);
    padding: .4rem 1rem;
    height: 40px;
    transition: box-shadow .2s ease-out
}

.notice-banner.scrolling {
    box-shadow: rgba(0, 0, 0, 0.1) 0 2px 0 1px
}

.notice-banner--warning {
    background-color: #F3B109
}

.notice-banner p {
    margin: 0
}

.notice-banner .trial__days-left {
    font-size: 1.1em;
    color: #fff
}

.notice-banner .trial__upgrade-btn {
    margin-left: 1em
}

.notice-banner .trial__upgrade-btn.size--mini {
    border-radius: 3em;
    padding: .4em 1.1em
}

.notice-banner .trial__upgrade-btn.mode--light {
    opacity: .9;
    transition: opacity .2s ease
}

.notice-banner .trial__upgrade-btn.mode--light:hover {
    opacity: 1
}

.sticker {
    background-color: #1DABF2;
    border-radius: 4px;
    color: #fff;
    padding: 3px 6px;
    font-weight: bold
}

.notice-strip {
    box-shadow: inset #caeaf6 0 0 0 1px;
    border-radius: 3em;
    color: #204e57;
    background-color: #fff;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    padding: 0.3em 1em;
    padding-left: 0.5em;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    transition: background-color .2s ease
}

.notice-strip:hover {
    text-decoration: none;
    background-color: rgba(255, 255, 255, 0.45);
    box-shadow: inset #a7dbf0 0 0 0 1px
}

.notice-strip:hover .notice-strip__badge {
    background-color: #2ace7b
}

.notice-strip:active {
    box-shadow: inset #95d4ee 0 0 0 1px
}

.notice-strip__badge {
    color: #fff;
    background-color: #3BD788;
    display: inline-block;
    margin-right: .5em;
    border-radius: 3em;
    padding: 0em 0.6em;
    font-size: .8em;
    font-weight: bold;
    height: 1.6em
}

.notice-strip__content {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    margin: 0
}

.fancy-checkbox {
    display: inline-block;
    position: relative;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-size: 1rem
}

.fancy-checkbox input[type="checkbox"] {
    position: absolute;
    left: -999em;
    opacity: 0
}

.fancy-checkbox input[type="checkbox"]:focus + .fancy-checkbox__box {
    box-shadow: inset #3BD788 0 0 0 1px, inset rgba(0, 0, 0, 0.1) 0 1px 2px
}

.fancy-checkbox input[type="checkbox"]:active + .fancy-checkbox__box {
    background-color: #eee
}

.fancy-checkbox input[type="checkbox"]:checked:active + .fancy-checkbox__box {
    background-color: #26b96f
}

.fancy-checkbox input[type="checkbox"]:checked + .fancy-checkbox__box {
    background-color: #3BD788;
    box-shadow: none
}

.fancy-checkbox input[type="checkbox"]:checked + .fancy-checkbox__box .fancy-checkbox__check {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0)
}

.fancy-checkbox input[type="checkbox"][disabled] + .fancy-checkbox__box {
    opacity: .6
}

.fancy-checkbox input[type="checkbox"][disabled]:checked + .fancy-checkbox__box {
    background-color: #f5f5f5;
    box-shadow: inset rgba(0, 0, 0, 0.25) 0 0 0 1px, rgba(0, 0, 0, 0.1) 0 0 2px
}

.fancy-checkbox input[type="checkbox"][disabled]:checked + .fancy-checkbox__box .fancy-checkbox__check {
    color: #6F6F6F
}

.fancy-checkbox .fancy-checkbox__box {
    display: inline-block;
    position: relative;
    border-radius: 3px;
    width: 14px;
    height: 14px;
    box-shadow: inset rgba(0, 0, 0, 0.15) 0 0 0 1px, inset rgba(0, 0, 0, 0.1) 0 1px 2px;
    background-color: #fff;
    margin-right: 5px;
    top: 2px;
    transition: background-color .15s ease
}

.fancy-checkbox .icon.fancy-checkbox__check {
    position: absolute;
    color: #fff;
    opacity: 0;
    pointer-events: none;
    transition: -webkit-transform .15s ease;
    transition: transform .15s ease;
    transition: transform .15s ease, -webkit-transform .15s ease;
    -webkit-transform: translate(0, -2px);
    transform: translate(0, -2px);
    font-size: .7em;
    top: .5ex;
    left: .3ex
}

.user-selector {
    position: relative;
    min-width: 500px
}

.user-selector input[type="search"], .user-selector .text-field {
    border-radius: 4px
}

.user-selector input[type="search"] {
    background-image: none;
    margin: 0;
    padding: .8em;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.user-selector .autocomplete__selected-item {
    cursor: default;
    position: relative;
    margin-right: .8em
}

.user-selector .autocomplete__selected-item::after {
    content: '';
    position: absolute;
    display: block;
    right: -.8em;
    width: 1px;
    background-color: #dedede;
    top: 0;
    bottom: 0
}

.user-selector__user {
    display: inline-block;
    margin: .5em 0;
    margin-right: 4px;
    background-color: #e4ecf2;
    border-radius: 3px;
    color: #2e4a5c;
    font-weight: bold;
    padding: .2em .6em .1em;
    cursor: pointer;
    font-size: .9em;
    white-space: nowrap;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.user-selector__user:hover {
    background-color: #dde7ee
}

.user-selector__user:hover .icon-cross {
    color: #2e4a5c
}

.user-selector__user:active {
    background-color: #d3e0e9
}

.user-selector__user:active .icon-cross {
    color: rgba(46, 74, 92, 0.8)
}

.user-selector__user .icon-cross {
    pointer-events: none;
    margin-left: 2px;
    position: relative;
    top: -1px;
    color: rgba(46, 74, 92, 0.6)
}

.user-selector__search-field {
    width: 100%;
    background-image: url("/images/search.svg");
    background-repeat: no-repeat;
    background-position: 12px 14px;
    background-size: 15px 15px;
    padding: 0 0 0 2.5em;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.user-selector__search-field:hover {
    cursor: text
}

.user-selector__search-field--focused {
    color: #204e57;
    border-color: #3BD788;
    background-color: #fff;
    box-shadow: none
}

.user-selector__search-field--focused .autocomplete__selected-item {
    color: #999
}

.user-selector__search-field--focused .autocomplete__selected-item::after {
    background-color: #eee
}

.user-selector--top .user-selector__list {
    top: auto;
    bottom: 105%
}

.user-selector__list {
    list-style: none;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 105%;
    left: 0;
    background-color: #fff;
    border-radius: 4px;
    border: 1px solid #b4e1f3;
    box-shadow: rgba(114, 182, 234, 0.2) 0 5px 20px;
    z-index: 10;
    padding: 3px;
    width: 100%;
    max-height: 225px;
    overflow-y: auto;
    color: #5c7e94
}

.user-selector__list .avatar, .user-selector__list .avatar img {
    border-radius: 3px
}

.user-selector__list .avatar {
    margin-right: 12px
}

.user-selector__list--hidden {
    opacity: 0;
    pointer-events: none
}

.user-selector__list__no-content {
    padding: 2px 6px;
    color: #999;
    font-size: .9em;
    font-style: italic
}

.user-selector__list__item {
    cursor: pointer;
    border-radius: 2px;
    padding: 3px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.user-selector__list__item .user-selector__loader {
    margin: 0 6px
}

.user-selector__list__item--loading {
    font-style: italic
}

.user-selector__list__item__detail {
    font-style: italic;
    color: #999;
    font-size: .9em;
    font-weight: normal
}

.user-selector__list__item__selected-icon {
    font-size: .6em;
    margin-right: 5px
}

.user-selector__list__item--highlighted {
    background-color: rgba(228, 234, 235, 0.4);
    color: #3f657e
}

.user-selector__list__item--selected, .user-selector__list__item--selected:hover {
    color: #3f657e;
    font-weight: bold
}

.user-selector__list__item--selected .user-selector__list__item__detail, .user-selector__list__item--selected:hover .user-selector__list__item__detail {
    color: #3f657e
}

.user-selector.autocomplete-apps .user-selector__list__item {
    padding-left: 6px;
    padding-right: 6px
}

.user-selector.autocomplete-apps .user-selector__list__item__selected-icon {
    position: relative;
    top: 1px
}

.user-selector .user-selector__list__item.autocomplete__list__add-new {
    padding: 0;
    font-size: 1em
}

.user-selector .user-selector__list__item.autocomplete__list__add-new a {
    display: block;
    width: 100%;
    text-align: left;
    font-size: 0.9em;
    padding: 6px;
    border-radius: 2px;
    cursor: pointer;
    color: #5c7e94
}

.user-selector .user-selector__list__item.autocomplete__list__add-new a .icon {
    color: #3BD788;
    position: relative;
    top: -2px;
    margin-right: 3px
}

.user-selector .user-selector__list__item.autocomplete__list__add-new a.disabled {
    cursor: default;
    color: #819eb1
}

.user-selector .user-selector__list__item.autocomplete__list__add-new a.disabled:hover {
    color: #819eb1;
    background-color: transparent
}

.user-selector .user-selector__list__item.autocomplete__list__add-new a:hover {
    text-decoration: none;
    background-color: #e4faef;
    color: #1d8f55
}

.user-selector .user-selector__list__item.autocomplete__list__add-new a:hover .icon {
    color: #21a462
}

.horizontal-user-list {
    list-style: none;
    padding: 0;
    margin: 0
}

.horizontal-user-list li {
    display: inline-block
}

.horizontal-user-list li:not(:last-child) {
    margin-right: -15px;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0)
}

.horizontal-user-list li.horizontal-user-list__no-inset {
    margin-left: 15px
}

.horizontal-user-list .avatar {
    box-shadow: #fff 0 0 0 2px;
    background-color: #fff
}

.sharing-pane .btn {
    display: block;
    width: 100%;
    max-width: 280px;
    padding-top: .75em;
    padding-bottom: .75em;
    font-size: 1.1em
}

.sharing-pane .btn:not(:last-child) {
    margin-bottom: 10px
}

.sharing-pane .btn.mode--light {
    box-shadow: #d1eef9 0 3px 16px
}

.sharing-pane .btn.mode--light:hover, .sharing-pane .btn.mode--light:focus {
    box-shadow: #afe3f8 0 3px 20px
}

.sharing-pane .btn.mode--light.active {
    color: #33d583;
    box-shadow: inset rgba(59, 215, 136, 0.9) 0 0 0 1px, #d1eef9 0 3px 16px
}

.invite-form-container .toggle-domain-signup {
    margin: 0.809rem auto
}

.invite-form-container .invite-form {
    margin-bottom: 0.809rem
}

.invite-form-container .dropdown {
    text-align: left
}

.invite-form-container .settings-form__field .settings-form__field__submit {
    margin: 0
}

@media only screen and (min-width: 481px) {
    .invite-form-container .settings-form__field .settings-form__field__submit {
        margin-left: .75rem
    }
}

.invite-form-container input[type="email"] {
    font-size: 1.2rem
}

.invite-form-container a.dropdown__trigger {
    color: #204e57;
    transition: color .2s ease
}

.invite-form-container a.dropdown__trigger:hover, .invite-form-container a.dropdown__trigger.dropdown--open {
    color: #1DABF2
}

.invite-form-container .role-label {
    color: #95abb0;
    margin-right: 0.5rem
}

.modal-invite-team .modal__inner {
    padding: 1rem 2vw 3rem
}

.modal-invite-team .modal-text {
    font-size: 1em
}

.modal-invite-team.modal--frame {
    background-color: #fff
}

.modal-invite-team h1 {
    margin-bottom: 0;
    font-size: 2.13333rem;
    font-weight: 300
}

.modal-invite-team .invite-form-container .team-settings__invite-form {
    min-width: 750px;
    margin: 1.618rem auto;
    font-size: .9em
}

.modal-invite-team .invite-form-container .settings-form__text--detail {
    max-width: 630px;
    margin: 1.618rem auto 0;
    font-size: 1em
}

.domain-signup-teams {
    max-width: 26.66667rem;
    width: 90%;
    margin: 0 auto
}

.domain-signup-teams__list {
    font-size: 1.5em;
    text-align: left;
    border: 0;
    margin: 0 0 0.809rem;
    padding: 0;
    transition: opacity .4s ease
}

.domain-signup-teams__list--loading {
    opacity: .5;
    pointer-events: none
}

.domain-signup-teams__list label {
    font-size: inherit;
    font-weight: normal;
    color: #204e57;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    cursor: pointer;
    padding: 1em;
    border-radius: 6px;
    border: 1px solid rgba(112, 182, 236, 0.3);
    transition: color .2s ease, box-shadow .2s ease, border-color .2s ease;
    overflow: hidden;
    box-shadow: rgba(228, 234, 235, 0.5) 0 1px 2px
}

.domain-signup-teams__list label:not(:last-child) {
    margin-bottom: 0.809rem
}

.domain-signup-teams__list label .team-name {
    display: inline-block;
    max-width: 290px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.domain-signup-teams__list label .selected-icon {
    font-size: 11px;
    transition: -webkit-transform .2s ease;
    transition: transform .2s ease;
    transition: transform .2s ease, -webkit-transform .2s ease;
    -webkit-transform: translate(100px, 0);
    transform: translate(100px, 0)
}

.domain-signup-teams__list label:hover {
    color: rgba(32, 78, 87, 0.8);
    text-decoration: none;
    border-color: #3BD788
}

.domain-signup-teams__list label.selected {
    border-color: #3BD788;
    color: #33d583;
    box-shadow: none
}

.domain-signup-teams__list label.selected .selected-icon {
    -webkit-transform: none;
    transform: none
}

.domain-signup-teams__list input {
    display: none
}

.toggle-domain-signup {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    color: #668ea7;
    font-size: 1rem;
    transition: color .2s ease
}

.toggle-domain-signup__activated {
    color: #50748a
}

.toggle-domain-signup p {
    margin-bottom: 0
}

.toggle-domain-signup .btn {
    vertical-align: inherit
}

.toggle-domain-signup .switch {
    margin-right: 1em
}

.toggle-domain-signup .domain {
    color: #26b96f
}

.toggle-domain-signup__label-text {
    font-weight: normal;
    display: inline;
    font-size: inherit
}

.modal-domain-signup {
    min-width: 680px;
    color: #668ea7
}

.modal-domain-signup .settings-form__field {
    margin-bottom: 1.618rem
}

.modal-domain-signup h1 {
    margin-bottom: 0
}

.setting-group {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.setting-group .help-link {
    position: relative;
    top: -.3ex;
    margin-left: 5px
}

.setting-group__part > * {
    vertical-align: middle
}

.setting-group__part--main {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.setting-group__part--measure {
    max-width: 30rem
}

.setting-group__part input[type="text"], .setting-group__part input[type="url"] {
    text-align: right;
    padding-right: 1em;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap
}

.setting-group__label {
    color: #3f657e
}

.setting-group__label label {
    display: inherit
}

@media only screen and (max-width: 700px) {
    .setting-group {
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-align-items: flex-start;
        -ms-flex-align: start;
        -ms-grid-row-align: flex-start;
        align-items: flex-start;
        text-align: left
    }

    .setting-group .setting-group__part {
        width: 100%;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
        justify-content: space-between
    }
}

.help-link .icon {
    color: #8FB1C7;
    pointer-events: all
}

.help-link .custom-icon--help-circle {
    font-size: 1.2em
}

.help-link--to-right {
    margin-left: .5em
}

.help-link--to-left {
    margin-right: .5em
}

.help-link:hover {
    text-decoration: none
}

.help-link:hover .icon {
    color: #6d99b6
}

h1 .help-link .custom-icon--help-circle, h2 .help-link .custom-icon--help-circle {
    font-size: 1.2rem
}

.checkmark {
    transition: color .2s ease, opacity .2s ease;
    color: #668ea7;
    display: inline-block
}

.checkmark input[type="checkbox"] {
    position: absolute;
    left: -999em;
    top: auto
}

.checkmark .checkmark-icon {
    font-size: 1.4rem
}

.checkmark .checkmark-icon__filled {
    fill: #3BD788
}

.checkmark .checkmark-icon__check {
    transition: opacity 0.2s ease, -webkit-transform 0.2s cubic-bezier(0.17, 0.595, 0.34, 1.385);
    transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.17, 0.595, 0.34, 1.385);
    transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.17, 0.595, 0.34, 1.385), -webkit-transform 0.2s cubic-bezier(0.17, 0.595, 0.34, 1.385);
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-transform-origin: center center;
    transform-origin: center center
}

.checkmark .checkmark-icon--checked {
    color: #3BD788
}

.checkmark .checkmark-icon--checked .checkmark-icon__check {
    opacity: 1;
    -webkit-transform: none;
    transform: none
}

.dashboard-notifications {
    position: fixed;
    right: 1em;
    top: 1em;
    width: 340px;
    z-index: 1003
}

.dashboard-notifications__list {
    list-style: none;
    padding: 0;
    margin: 0
}

.dashboard-notifications__notification {
    border-radius: 7px;
    background-color: #fff;
    padding: 1.5em;
    color: rgba(32, 78, 87, 0.6);
    box-shadow: rgba(70, 159, 227, 0.25) 0 2px 22px;
    line-height: 1.5;
    margin-bottom: 1em;
    transition: box-shadow .4s ease;
    position: relative;
    display: -webkit-flex !important;
    display: -ms-flexbox !important;
    display: flex !important
}

.dashboard-notifications__notification:hover {
    box-shadow: rgba(70, 159, 227, 0.3) 0 1px 25px;
    cursor: pointer
}

.dashboard-notifications__notification:hover .close-cross {
    color: rgba(32, 78, 87, 0.6);
    background-color: rgba(102, 142, 167, 0.07)
}

.dashboard-notifications__notification:hover .close-cross:hover {
    background-color: rgba(102, 142, 167, 0.1)
}

.dashboard-notifications__notification:hover .close-cross:active {
    background-color: rgba(102, 142, 167, 0.15)
}

.dashboard-notifications__notification__close {
    position: absolute;
    top: 4px;
    right: 2px;
    -webkit-transform: scale(0.7);
    transform: scale(0.7)
}

.dashboard-notifications__notification__close .icon {
    font-size: .9em
}

.dashboard-notifications__notification__title {
    font-weight: bold;
    color: #204e57
}

.dashboard-notifications__notification__body {
    font-size: 1.1em;
    margin: 0;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    overflow-wrap: break-word;
    word-break: break-word
}

.dashboard-notifications__notification__body a {
    font-weight: bold;
    color: #019dea;
    white-space: nowrap
}

.dashboard-notifications__notification__icon {
    display: block;
    fill: #3BD788;
    margin-right: 1.5em
}

.dashboard-notifications__notification__icon circle {
    opacity: .1
}

.dashboard-notifications__notification.dashboard-notifications__notification--warning .dashboard-notifications__notification__icon {
    fill: #F3B109
}

.dashboard-notifications__notification.dashboard-notifications__notification--negative .dashboard-notifications__notification__icon {
    fill: #FF6E70
}

.filter-list--dropdown {
    min-width: 300px
}

.filter-list--dropdown[data-dropdown-align="right"] {
    text-align: left
}

.filter-list__input {
    width: 100%
}

.filter-list__result-list {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-top: 0.53933rem
}

.incrementor {
    font-size: 1.8em;
    font-weight: bold
}

.incrementor__number {
    padding: 0.2em 0.8em
}

.incrementor .btn {
    line-height: 1.1rem;
    vertical-align: baseline
}

.modal-player-troubleshoot .modal__inner {
    max-width: 800px;
    font-size: 0.86667rem
}

.modal-player-troubleshoot .modal__inner h1 {
    font-size: 1.6em;
    margin-bottom: 2.427rem
}

.modal-player-troubleshoot .modal__inner a {
    margin-bottom: 1.618rem
}

.modal-player-troubleshoot .modal__inner p, .modal-player-troubleshoot .modal__inner ol {
    text-align: left
}

.modal-player-troubleshoot .modal__inner p {
    margin-bottom: 0.809rem
}

.player__recording-progress {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    text-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    min-height: 100%;
    color: #fff
}

.player__recording-progress .btn.mode--link {
    color: #fff
}

.progress-steps {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    text-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-size: 1.1rem
}

.progress-steps h1, .progress-steps p {
    margin-bottom: 0.2em
}

.progress-steps section {
    margin-bottom: 1.8em
}

.progress-steps__title {
    color: #fff
}

.progress-steps__step {
    display: inline-block;
    padding-left: 1.6em;
    padding-right: 1.6em;
    padding-bottom: 0.2em;
    font-weight: bold;
    font-size: 1rem;
    border-radius: 2em;
    border: 2px solid #0b7eb8;
    color: #0b7eb8;
    margin-right: 2em;
    min-width: 11em
}

.progress-steps__step:last-child {
    margin-right: 0
}

@media only screen and (max-width: 768px) {
    .progress-steps__step {
        display: block;
        margin-right: 0;
        margin-bottom: 0.5em
    }
}

.progress-steps__step span {
    vertical-align: middle
}

.progress-steps__step .spinner-circular {
    vertical-align: middle;
    margin-right: 0.4em
}

.progress-steps__step--in-progress {
    color: #fff;
    background-color: #1DABF2;
    border-color: #1DABF2
}

.progress-steps__step--completed {
    color: #fff;
    background-color: #3BD788;
    border-color: #3BD788
}

.progress-steps__step--error {
    color: #fff;
    background-color: #FF6E70;
    border-color: #FF6E70
}

.progress-steps__info {
    padding-top: 1rem
}

.plan-change-confirmation dl {
    text-align: left;
    margin-top: 0;
    margin-bottom: 1.618rem
}

.plan-change-confirmation dl:before, .plan-change-confirmation dl:after {
    content: " ";
    display: table
}

.plan-change-confirmation dl:after {
    clear: both
}

.plan-change-confirmation dl dt, .plan-change-confirmation dl dd {
    float: left;
    margin-bottom: 0.809rem
}

.plan-change-confirmation dl dt {
    font-weight: normal;
    clear: both;
    min-width: 9rem
}

.plan-change-confirmation dl dd {
    font-weight: bold
}

.plan-change-confirmation dl dd .subtle {
    font-weight: normal
}

.plan-change-confirmation__summary {
    margin-bottom: 4.045rem
}

.plan-change-confirmation .credit-card {
    margin: 0 auto
}

.credit-card {
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-align-items: center;
    -ms-flex-align: center;
    -ms-grid-row-align: center;
    align-items: center;
    color: #8FB1C7
}

.credit-card__number {
    font-size: 1.06667rem;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1
}

.credit-card__expiry {
    font-size: 1.06667rem;
    -webkit-flex-grow: 4;
    -ms-flex-positive: 4;
    flex-grow: 4
}

.credit-card__type {
    margin-right: 1rem
}

.license-settings .settings-form__field__value {
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1
}

.license-settings .btn.mode--primary {
    margin-left: 2rem
}

.confirm-new-licenses .credit-card {
    margin: 3.236rem auto 1.618rem;
    max-width: 95%
}

.confirm-new-licenses .credit-card .label {
    font-size: 1.1rem
}

.remove-licenses .settings-form__container p {
    text-align: left
}

.remove-licenses .settings-form__container {
    padding: 1.618rem 2rem 0.809rem
}

.confirm-paid-plan header {
    border-bottom: 1px solid #caeaf6;
    padding-top: 0;
    margin-bottom: 1.618rem
}

.confirm-paid-plan header h3 {
    font-weight: bold;
    font-size: 1.6rem;
    margin-bottom: 0;
    color: #204e57
}

.confirm-paid-plan .btn.style--circle {
    width: 21px;
    height: 21px;
    padding: 0;
    vertical-align: baseline;
    font-size: 1rem;
    font-weight: 800
}

.confirm-paid-plan .btn.style--circle.mode--primary {
    margin-left: 1rem
}

.confirm-paid-plan .btn.style--circle.disabled {
    cursor: default;
    pointer-events: auto
}

.confirm-paid-plan .settings-form__summary-list {
    margin-bottom: 3.236rem;
    padding: 0 8%
}

.confirm-paid-plan .settings-form__summary-list dt {
    min-width: 120px
}

.confirm-paid-plan__price {
    font-size: 2.4rem;
    line-height: 1.86667rem
}

.confirm-paid-plan__price .dollar-sign {
    font-size: 1.46667rem
}

.confirm-paid-plan__detail {
    color: #668ea7
}

.confirm-paid-plan__terms {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center
}

.confirm-paid-plan__terms label:not(.switch) {
    margin-left: 1rem;
    font-weight: normal;
    color: rgba(32, 78, 87, 0.7)
}

.desc-block {
    color: #fff;
    background-color: #C0392B
}

.desc-block__banner {
    padding: 4rem 5%;
    text-align: center
}

.desc-block__banner .desc-block__heading {
    font-size: 2.13333rem;
    color: rgba(255, 255, 255, 0.8);
    margin: 0 auto;
    max-width: 20em
}

@media only screen and (max-width: 481px) {
    .desc-block__banner .desc-block__heading {
        font-size: 1.6rem
    }
}

.desc-block__children {
    list-style: none;
    padding: 0;
    margin: 0;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row
}

.desc-block__children h2 {
    margin-bottom: 0.809rem
}

@media only screen and (max-width: 481px) {
    .desc-block__children h2 {
        font-size: 1.46667rem
    }
}

.desc-block__children p {
    color: rgba(255, 255, 255, 0.7);
    font-size: .9rem;
    width: 100%
}

.desc-block__children p:last-child {
    margin-bottom: 0
}

.desc-block__children figure {
    width: 30%;
    margin-bottom: 1.618rem
}

.desc-block__children figure svg {
    max-height: 8rem
}

.desc-block__children figure .icon {
    font-size: 4rem
}

.desc-block__children .btn {
    font-size: 1.1rem;
    padding-left: 1.5em;
    padding-right: 1.5em
}

.desc-block__children > * {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    text-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding: 4.854rem 5%
}

.desc-block__children > *:nth-child(1) {
    background-color: #ab3326
}

.desc-block__children > *:nth-child(2) {
    background-color: #a22d21
}

.desc-block__children > *:nth-child(3) {
    background-color: #9b291d
}

@media only screen and (max-width: 768px) {
    .desc-block__children {
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column
    }

    .desc-block__children figure {
        width: 10%
    }

    .desc-block__children p {
        max-width: 20rem
    }

    .desc-block__children > * {
        padding: 3.236rem 10%
    }
}

@media only screen and (max-width: 481px) {
    .desc-block__children figure {
        display: none
    }
}

.form-highlight .form__highlight {
    transition: border-color .1s ease-out;
    border-top: 1px solid #caeaf6
}

.form-highlight .form__highlight.form__highlight--last {
    border-bottom: 1px solid #caeaf6
}

.form-highlight .form__highlight:not(.form__highlight--hover) input.style--flat {
    box-shadow: none
}

.form-highlight .form__highlight--hover {
    border-top-color: #3BD788;
    background-color: #fcfefe
}

.form-highlight .form__highlight--hover.form__highlight--last {
    border-bottom-color: #3BD788
}

.form-highlight .form__highlight--hover + .form__highlight {
    border-top-color: #3BD788
}

.form-highlight .form__highlight--error input.style--flat {
    color: #FF6E70
}

.team-selector-container {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    margin-bottom: 0.53933rem
}

.dropdown.team-selector {
    width: 270px;
    text-align: left;
    font-size: 1rem
}

.dropdown.team-selector .app__icon {
    margin-right: .5rem;
    vertical-align: text-top;
    opacity: .8;
    transition: opacity .2s ease-out;
    box-shadow: rgba(0, 0, 0, 0.3) 0 1px 1px
}

.dropdown.team-selector.dropdown--menu p {
    padding: 0 .5rem
}

.dropdown.team-selector.dropdown--menu .no-content-total {
    font-size: 1rem;
    color: #aaaaaa;
    text-align: center
}

.dropdown.team-selector [role="menuitem"] a:hover .app__icon {
    opacity: 1
}

.team-selector-trigger {
    font-size: 0.8rem;
    font-weight: bold;
    color: #35808f;
    border-radius: 3px;
    padding: 0.1rem 0.3rem .1rem .5rem
}

.team-selector-trigger .app__icon {
    margin-left: .2rem;
    vertical-align: text-bottom;
    transition: opacity .2s;
    opacity: .9;
    box-shadow: rgba(0, 0, 0, 0.3) 0 1px 1px
}

.team-selector-trigger:hover {
    text-decoration: none;
    color: #204e57;
    background-color: #f6f6f6
}

.team-selector-trigger:hover .app__icon {
    opacity: 1
}

.team-selector-trigger:hover:not(.active) .icon {
    color: #C0392B
}

.team-selector-trigger .icon {
    transition: -webkit-transform .2s ease-out;
    transition: transform .2s ease-out;
    transition: transform .2s ease-out, -webkit-transform .2s ease-out
}

.team-selector-trigger:active {
    background-color: #eaeaea
}

.team-selector-trigger.active {
    background-color: #1DABF2;
    color: #fff
}

.team-selector-trigger.active .icon {
    fill: #fff;
    -webkit-transform: rotateX(180deg);
    transform: rotateX(180deg)
}

.footer-block {
    border-top: 1px solid #caeaf6;
    text-align: center;
    font-size: 1.1em;
    padding: 4.854rem 5%;
    color: #668ea7
}

.footer-block p {
    margin: 0 auto;
    max-width: 40rem
}

.settings-form {
    margin-bottom: 3.236rem
}

.settings-form h1 {
    font-weight: bold;
    font-size: 1.6rem;
    margin-bottom: 1rem
}

@media only screen and (max-width: 481px) {
    .settings-form h1 {
        text-align: center
    }
}

.settings-form .setting-inactive {
    transition: opacity .3s ease;
    opacity: .3
}

.settings-form .input-row .input-row__item {
    margin-right: 2rem
}

.settings-form input[type="text"].settings-form__input--long, .settings-form input[type="password"].settings-form__input--long, .settings-form input[type="email"].settings-form__input--long, .settings-form input[type="url"].settings-form__input--long, .settings-form textarea.settings-form__input--long {
    font-size: 1.53333em
}

.settings-form input[type="checkbox"] {
    vertical-align: text-top;
    margin-right: .5em
}

.settings-form__status-text {
    color: #3BD788;
    margin-left: .8em
}

.settings-form__status-text::before {
    display: inline-block;
    content: '';
    width: 5px;
    height: 5px;
    background-color: #3BD788;
    box-shadow: #3BD788 0 0 4px;
    margin-right: .4em;
    border-radius: 100%;
    position: relative;
    top: -1px
}

.settings-form__status-text.mode--negative {
    color: #FF6E70
}

.settings-form__status-text.mode--negative::before {
    background-color: #FF6E70;
    box-shadow: #FF6E70 0 0 4px
}

.settings-form .settings-form__label .settings-form__status-text {
    font-size: .8em;
    text-transform: uppercase
}

.settings-form__help-trigger {
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    line-height: 1em;
    text-align: center;
    color: #204e57;
    opacity: .6;
    transition: opacity .15s ease;
    font-size: 1.1em;
    margin-left: 2px
}

.settings-form__help-trigger .icon {
    position: relative;
    top: -1px
}

.settings-form__help-trigger:hover {
    opacity: 1
}

.settings-form__header {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 6px
}

.settings-form__checkmark {
    font-size: 1em;
    cursor: pointer;
    font-weight: bold;
    color: #22606C;
    margin: 1em
}

.settings-form__checkmark .checkmark {
    display: inline-block;
    margin-right: 1em
}

.settings-form__label {
    color: #275f6a;
    font-size: 1.1em;
    font-weight: bold;
    margin-bottom: 5px;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.settings-form__label--aside {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    font-size: .85rem;
    color: #8FB1C7;
    text-align: right
}

.settings-form__label--large {
    font-size: 1.5rem
}

.settings-form .status-icon {
    position: absolute;
    right: 1rem;
    top: calc(50% - 15px);
    font-size: 1.2rem
}

.settings-form .status-icon--positive {
    color: #3BD788
}

.settings-form .status-icon--negative {
    color: #FF6E70
}

.settings-form__feedback {
    text-align: center;
    margin: 0.53933rem 0;
    font-weight: bold;
    padding: 0 .5em
}

.settings-form__feedback.settings-form__feedback--positive {
    color: #3BD788
}

.settings-form__feedback.settings-form__feedback--negative {
    color: #FF6E70
}

.settings-form__controls {
    margin: 0.809rem 0
}

.settings-form__controls--right {
    text-align: right
}

.settings-form__controls--apart {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.settings-form__field {
    margin-top: 20px;
    position: relative;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    border: 1px solid #8e4294;
    padding: 5px;
    border-radius: 7px
}

.settings-form__field + .settings-form__field {
    margin-top: 2.427rem
}

.settings-form__field--noborder {
    border: none
}

.settings-form__field--no-input {
    padding: 0.809rem 1rem;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.settings-form__field--no-input .btn {
    font-size: 0.93333rem;
    padding: 0.5rem 1rem
}

.settings-form__field--no-input .spinner-circular {
    margin: 0.3rem
}

.settings-form__field--warning {
    border-color: red
}

.settings-form__field.settings-form__field--focused {
    border-color: #6fb5d1
}

.settings-form__field.settings-form__field--focused .settings-form__field__label {
    color: #275f6a
}

.settings-form__field.settings-form__field--focused + .settings-form__text {
    color: #457695
}

.settings-form__field--has-indicator {
    padding-right: 2em;
    position: relative
}

.settings-form__field--attention {
    border-color: #F3B109
}

.settings-form__field--secondary.settings-form__field--focused {
    border-color: #1DABF2
}

.settings-form__field--inset {
    padding: 0.75rem
}

.settings-form__field .settings-form__field__indicator {
    position: absolute;
    right: .75rem;
    top: 1.8em
}

.settings-form__field .settings-form__field__indicator.icon {
    font-size: 11px
}

.settings-form__field .settings-form__field__indicator.spinner-circular {
    font-size: 9px
}

.settings-form__field .settings-form__field__indicator--positive {
    color: #3BD788
}

.settings-form__field .settings-form__field__indicator--negative {
    color: #FF6E70
}

.settings-form__field .settings-form__field__label {
    color:#8e4294;
    position: absolute;
    top: -.9em;
    left: calc(0.75rem - 2px);
    background-color: #fff;
    padding: 0 8px;
    font-size: 1rem
}

.settings-form__field .settings-form__field__value {
    font-size: 1.35rem;
    font-weight: 300
}

.settings-form__field .settings-form__field__text {
    margin: 0;
    font-size: 1rem;
    color: #8e4294;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding: 0.75rem
}

.settings-form__field .settings-form__field__input {
    font-size: 1rem;
    padding: .75rem;
    padding-right: 5px;
    border: 0;
    color: #8e4294;
    box-shadow: none;
    background-color: #fff;
    margin: 0;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    border-radius: 7px
}

.settings-form__field .settings-form__field__input--thin {
    -webkit-flex: 0.5;
    -ms-flex: 0.5;
    flex: 0.5
}

.settings-form__field .settings-form__field__input--small {
    padding: .3em
}

.settings-form__field .settings-form__field__input--disabled, .settings-form__field .settings-form__field__input[disabled] {
    color: rgba(32, 78, 87, 0.6)
}

.settings-form__field .settings-form__field__input[readonly] {
    background-color: rgba(228, 234, 235, 0.4)
}

.settings-form__field .settings-form__field__component {
    -webkit-flex: none;
    -ms-flex: none;
    flex: none
}

.settings-form__field .settings-form__field__submit {
    font-size: 1.1em;
    box-shadow: none
}

.settings-form__field .settings-form__field__submit--wide {
    width: 100%
}

@media only screen and (max-width: 481px) {
    .settings-form__field .settings-form__field__input {
        padding: 1rem .5rem
    }

    .settings-form__field .settings-form__field__submit {
        font-size: 1em;
        padding: .8em
    }
}

.settings-form__section {
    border-bottom: 1px solid #caeaf6;
    position: relative;
    margin-bottom: 1.618rem;
    padding-bottom: 1.618rem
}

.settings-form__section__subsection {
    margin: 1.618rem 0
}

.settings-form__section--centered {
    text-align: center
}

.settings-form__section--no-border {
    border-bottom: 0
}

.settings-form__section--inset {
    padding-left: 1rem;
    padding-right: 1rem
}

.settings-form__section--last {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 0
}

.settings-form__section--slim {
    position: relative;
    padding-bottom: 0.809rem;
    margin-bottom: 0.809rem
}

.settings-form__container {
    background-color: #fff;
    border-radius: 6px;
    border: 1px solid #caeaf6;
    padding: 2.8rem 1.5rem 2rem;
    margin-bottom: 1.618rem
}

@media only screen and (max-width: 481px) {
    .settings-form__container {
        padding: 1.5rem 0.75rem
    }
}

.settings-form__container--compact {
    max-width: 40rem;
    width: 90%;
    margin: 0 auto;
    box-shadow: 0 2px 30px 0 rgba(114, 182, 234, 0.2)
}

.settings-form__container > .settings-form__section:last-child {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 0
}

.settings-form .input-row__item p {
    margin: 0
}

.settings-form__list {
    list-style: none
}

.settings-form__list li::before {
    content: '—';
    color: #668ea7;
    margin-right: .5em;
    display: inline
}

.settings-form__list a {
    font-weight: bold
}

.settings-form__summary-list {
    color: #204e57;
    font-size: 1.1em;
    text-align: left
}

.settings-form__summary-list:before, .settings-form__summary-list:after {
    content: " ";
    display: table
}

.settings-form__summary-list:after {
    clear: both
}

.settings-form__summary-list dt, .settings-form__summary-list dd {
    float: left;
    margin: 0
}

.settings-form__summary-list dd .subtle {
    font-style: italic
}

.settings-form__summary-list dt {
    clear: both;
    min-width: 160px;
    margin-right: 1rem
}

.settings-form__text {
    margin-bottom: 0;
    font-size: 1rem;
    color: #668ea7
}

.settings-form__text a {
    color: #1DABF2;
    font-weight: bold
}

.settings-form__text--inset {
    margin: .5rem 1.2rem 0
}

.settings-form__text--spaced {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.settings-form__text--detail {
    font-weight: normal;
    font-size: .9em
}

.settings-form__submit {
    margin: 1.618rem -0.75rem -0.75rem
}

.settings-form__submit .btn {
    border-radius: 4px;
    width: 100%;
    font-size: 1.4em;
    padding: 1em 5%
}

.settings-form__button-row {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.settings-form__button-row--right {
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end
}

.settings-form__button-row .settings-form__button-row__text {
    color: #668ea7;
    font-weight: normal;
    margin-bottom: 0
}

.settings-form__button-row :not(:first-child) {
    margin-left: .5em
}

.settings-form__listing {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 1rem;
    color: #204e57;
    text-align: left
}

.settings-form__listing:not(:last-child) {
    margin-bottom: 1.618rem
}

.settings-form__listing .dropdown__trigger {
    color: rgba(32, 78, 87, 0.6);
    transition: color .2s ease
}

.settings-form__listing .dropdown__trigger:hover {
    color: #0d99df
}

.settings-form__listing .dropdown__trigger.dropdown--open {
    color: #0d99df
}

.settings-form__listing > li {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0.4em 1.5rem
}

.settings-form__listing > li:hover {
    background-color: rgba(143, 177, 199, 0.08)
}

.settings-form__listing > li:hover .dropdown__trigger {
    color: #204e57
}

.settings-form__listing > li:hover .dropdown__trigger:hover {
    color: #0d99df
}

.settings-form__listing .avatar {
    width: 32px;
    vertical-align: middle
}

.settings-form__listing .list__avatar {
    margin-right: 1rem
}

.settings-form__listing .list__name, .settings-form__listing .list__email {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.settings-form__listing .list__username {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    color: rgba(32, 78, 87, 0.7);
    font-style: italic
}

.settings-form__listing .list__email {
    color: rgba(32, 78, 87, 0.7)
}

.settings-form__listing .list__actions {
    padding-left: 1em
}

.settings-form__listing .list__actions .dropdown__trigger, .settings-form__listing .list__role .dropdown__trigger {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    text-align: right;
    font-size: .9em
}

.settings-form__listing .list__actions a {
    color: #0c8fd0
}

.settings-form__listing .list__actions .list__actions__negative {
    color: #668ea7
}

.settings-form__listing .list__actions .list__actions__negative:hover {
    color: #FF6E70
}

.settings-form__listing .list__actions .custom-icon--cross {
    font-size: .6rem
}

.settings-form__listing .list__role {
    -webkit-flex-basis: 100px;
    -ms-flex-preferred-size: 100px;
    flex-basis: 100px
}

@media only screen and (max-width: 481px) {
    .settings-form__listing {
        font-size: 0.93333rem
    }

    .settings-form__listing .list__name, .settings-form__listing .list__email {
        display: inline-block;
        max-width: 100px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap
    }

    .settings-form__listing .list__actions {
        visibility: visible
    }

    .settings-form__listing .avatar {
        width: 26px
    }

    .settings-form__listing li {
        padding-top: .6em;
        padding-bottom: .6em
    }

    .settings-form__listing li:not(.is-owner) .list__actions {
        visibility: visible
    }

    .settings-form__listing li:not(.is-owner):hover {
        background-color: transparent
    }
}

.team-list {
    list-style: none;
    padding: 0;
    margin: 0
}

.team-list li {
    display: inline-block;
    margin-right: 1px;
    margin-bottom: 4px;
    vertical-align: top;
    position: relative;
    height: 32px;
    width: 32px;
    background-color: #e8e8e8;
    border-radius: 100%;
    overflow: hidden
}

.team-list a:hover {
    text-decoration: none
}

.team-list .avatar {
    width: 32px;
    position: relative;
    z-index: 10;
    font-weight: 500;
    line-height: 32px;
    border: 0
}

.team-list .avatar img {
    border-radius: 0
}

.team-list .avatar::after {
    border: 0;
    color: #999
}

.team-list .initials, .team-list li a {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;
    height: 100%;
    line-height: 32px;
    font-weight: 500;
    color: #777;
    border-radius: 3px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.team-list__additional a:hover {
    color: #444;
    background-color: #d0d0d0
}

.team-list__action a:hover {
    color: #fff;
    background-color: #1DABF2
}

.team-list__action a:active {
    background-color: #0c8fd0;
    color: rgba(255, 255, 255, 0.9)
}

.team-list__invited {
    opacity: .6
}

.team-list__invited .icon {
    position: absolute;
    top: calc(50% - 1em / 2);
    left: calc(50% - 1em / 2);
    color: #555
}

.cc-logo {
    background: url("/images/credit-card-logos.svg") no-repeat 0 0;
    display: inline-block;
    vertical-align: middle
}

.cc-logo--visa {
    background-position: -103px -72px;
    width: 35px;
    height: 23px
}

.cc-logo--mastercard {
    background-position: -207px -72px;
    width: 34px;
    height: 23px
}

.cc-logo--american-express {
    background-position: -207px 0;
    width: 34px;
    height: 23px
}

.cc-logo--discover {
    background-position: -51px -72px;
    width: 35px;
    height: 23px
}

.customers-preview {
    position: relative
}

.customers-preview__cta {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s, opacity 0.2s linear;
    position: absolute;
    top: 30%;
    left: 50%
}

.customers-preview__cta .btn {
    position: relative;
    top: -50%;
    left: -50%;
    color: #8289ef
}

.customers-preview:hover .customers-logo-grid {
    -webkit-filter: blur(5px);
    filter: blur(5px)
}

.customers-preview:hover .customers-preview__cta {
    visibility: visible;
    opacity: 1
}

.customers-logo-grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    text-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    opacity: .7;
    pointer-events: none;
    max-width: 1040px;
    margin-left: auto;
    margin-right: auto;
    transition: 0.2s ease-out
}

.customers-logo-grid .company-logo {
    max-height: 2.66667em;
    max-width: 8em;
    fill: rgba(102, 142, 167, 0.7)
}

.customers-logo-grid li {
    padding: 0 1em;
    margin: 1.618rem 0
}

@media only screen and (max-width: 790px) {
    .customers-logo-grid li {
        -webkit-flex: 0;
        -ms-flex: 0;
        flex: 0;
        -webkit-flex-basis: 50%;
        -ms-flex-preferred-size: 50%;
        flex-basis: 50%;
        margin-bottom: 3.236rem
    }
}

.box {
    background-color: #ffffff;
    box-shadow: #8e4294 1px 0 30px;
    border-radius: 8px;
    padding: 2em 1.5em
}

.box > :last-child {
    margin-bottom: 0
}

.view {
    max-width: 30rem;
    margin: 0 auto;
    width: 90%;
    color: #8e4294;
    font-size: 1.1em
}

.view h1 {
    margin: 0;
    font-size: 2.13333rem;
    line-height: 1.1;
    margin-bottom: .3em
}

.view h2 {
    font-size: 1.06667rem;
    color: #668ea7
}

.view__button-list {
    list-style: none;
    padding: 0;
    margin: 0
}

.view__button-list li .btn {
    width: 100%
}

.view__button-list li:not(:last-child) {
    margin-bottom: 0.809rem
}

.view .view__figure {
    margin-bottom: .5em
}

@media only screen and (max-width: 481px) {
    .view .view__figure {
        display: none
    }
}

.participant-message-preview {
    background-color: #f6fafc;
    text-align: left
}

.participant-message-preview .subtitle, .participant-message-preview .section-heading {
    margin-bottom: 0.809rem
}

.participant-message-preview .subtitle::after, .participant-message-preview .section-heading::after {
    content: '';
    width: 3em;
    height: 1px;
    background-color: #D4E8F5;
    display: block;
    margin: 2em 0
}

.participant-message-preview__empty {
    text-align: center;
    color: #668ea7;
    padding: 1em;
    margin-bottom: 0
}

.participant-message-preview__content {
    padding: 1.618rem 0
}

.participant-message-preview__content:not(:last-child) {
    border-bottom: 1px dashed rgba(112, 182, 236, 0.3);
    padding-bottom: 1.618rem
}

.participant-message-preview__content__inner {
    box-shadow: 0 2px 30px 0 rgba(114, 182, 234, 0.2);
    border-radius: 8px;
    padding: 1.5em;
    max-width: 465px;
    margin: 0 auto;
    color: #204e57;
    background-color: #fff;
    font-size: 1.13333em
}

.participant-message-preview__content__inner p, .participant-message-preview__content__inner ul, .participant-message-preview__content__inner ol, .participant-message-preview__content__inner blockquote {
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 1em
}

.participant-message-preview__content__inner h1, .participant-message-preview__content__inner h2, .participant-message-preview__content__inner h3, .participant-message-preview__content__inner h4, .participant-message-preview__content__inner h5, .participant-message-preview__content__inner h6 {
    margin-bottom: .5em;
    padding: 0
}

.participant-message-preview__content__inner h1 {
    font-size: 1.5em
}

.participant-message-preview__content__inner h2 {
    font-size: 1.3em
}

.participant-message-preview__content__inner h3 {
    font-size: 1.2em
}

.participant-message-preview__content__inner ul, .participant-message-preview__content__inner ol {
    margin-left: 1.5em
}

.box-selector {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center
}

.box-selector--wrap {
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 1.618rem auto;
    max-width: calc(((0.5rem * 2) + 220px) * 4)
}

.box-selector--wrap--cap-width {
    max-width: calc(((0.5rem * 2) + 220px) * 3)
}

.box-selector--wrap .box-selector__item {
    margin-bottom: 1.618rem
}

.box-selector__item {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 0.92);
    box-shadow: rgba(114, 182, 234, 0.2) 1px 0 30px;
    width: 250px;
    min-height: 170px;
    text-align: center;
    font-weight: normal;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    margin: 0 1rem;
    position: relative;
    color: #668ea7;
    padding: 1.618rem 0;
    transition: box-shadow .4s ease, background-color .4s ease
}

.box-selector__item:not(.box-selector__item--selected):not(.box-selector__item--template):hover {
    box-shadow: rgba(114, 182, 234, 0.4) 1px 0 50px;
    background-color: #fff
}

.box-selector__item:not(.box-selector__item--selected):not(.box-selector__item--template):hover .box-selector__label {
    color: #50748a
}

.box-selector__item:not(.box-selector__item--selected):not(.box-selector__item--template):hover .box-selector__icon {
    color: #668ea7
}

.box-selector__item:active .box-selector__icon {
    color: #50748a
}

.box-selector__item--template {
    background-color: transparent;
    box-shadow: none;
    border: 2px dashed rgba(102, 142, 167, 0.6)
}

.box-selector__item--template .box-selector__title {
    color: rgba(32, 78, 87, 0.8)
}

.box-selector__item--template .custom-icon--plus-circle {
    transition: -webkit-transform 0.3s cubic-bezier(0.17, 0.595, 0.34, 1.385);
    transition: transform 0.3s cubic-bezier(0.17, 0.595, 0.34, 1.385);
    transition: transform 0.3s cubic-bezier(0.17, 0.595, 0.34, 1.385), -webkit-transform 0.3s cubic-bezier(0.17, 0.595, 0.34, 1.385)
}

.box-selector__item--template:hover {
    background-color: #eef7fb;
    border-color: rgba(102, 142, 167, 0.8);
    box-shadow: none
}

.box-selector__item--template:hover .box-selector__title {
    color: #204e57
}

.box-selector__item--template:hover .box-selector__label {
    color: #50748a
}

.box-selector__item--template:hover .custom-icon--plus-circle {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    color: #668ea7
}

.box-selector__item--template:active {
    background-color: #eef7fb
}

.box-selector__item--selected {
    background-color: #fff;
    color: #46667a;
    box-shadow: inset #3BD788 0 0 0 2px, rgba(114, 182, 234, 0.2) 0 1px 15px
}

.box-selector__item--selected .box-selector__icon, .box-selector__item--selected .box-selector__label {
    color: #50748a
}

.box-selector__item--selected .checkmark, .box-selector__item--selected .custom-icon--checkmark-circle {
    opacity: 1
}

.box-selector__item--selected .custom-icon--checkmark-circle {
    -webkit-transform: none;
    transform: none
}

.box-selector__item .custom-icon--checkmark {
    color: #3BD788;
    margin-right: .5em;
    font-size: .9em;
    position: relative;
    top: -.1ex
}

.box-selector__item__badge {
    position: absolute;
    right: -.8em;
    top: -.8em;
    display: inline-block;
    color: #fff;
    background-color: #20B8D1;
    border-radius: 100%;
    height: 36px;
    width: 36px;
    line-height: 32px;
    -webkit-transform: translateZ(0) scale(0.85);
    transform: translateZ(0) scale(0.85);
    box-shadow: 0 1px 7px 0 rgba(40, 144, 169, 0.35);
    box-shadow: -2px 2px 15px 0 rgba(40, 144, 169, 0.3);
    transition: box-shadow .2s ease, -webkit-transform .15s ease;
    transition: box-shadow .2s ease, transform .15s ease;
    transition: box-shadow .2s ease, transform .15s ease, -webkit-transform .15s ease
}

.box-selector__item__badge:active {
    background-color: #1da5bb;
    color: rgba(255, 255, 255, 0.9)
}

.box-selector__item__badge:hover {
    text-decoration: none;
    box-shadow: -2px 2px 15px 0 rgba(40, 144, 169, 0.3);
    -webkit-transform: scale(1);
    transform: scale(1);
    color: #fff
}

.box-selector__item__badge .icon {
    font-size: 1.3em
}

.box-selector__icon, .box-selector__label, .box-selector__title {
    transition: color .3s ease
}

.box-selector__title {
    font-size: 1.6rem;
    margin-bottom: 0;
    color: #006E8E
}

.box-selector__title .icon {
    color: #1DABF2;
    font-size: .9em;
    margin-right: .25em;
    margin-left: -1em;
    position: relative;
    top: -.2ex
}

.box-selector__label {
    color: rgba(102, 142, 167, 0.7);
    text-transform: uppercase;
    font-size: 0.86667rem;
    font-weight: bold;
    margin-bottom: 0.809rem
}

.box-selector a {
    font-weight: bold
}

.box-selector ul, .box-selector ol {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-bottom: 1.618rem
}

.box-selector__content {
    margin-bottom: 1.618rem;
    padding: 0 8%
}

.box-selector input[type="radio"], .box-selector input[type="checkbox"] {
    position: absolute;
    left: -999em
}

.box-selector__icon {
    color: rgba(102, 142, 167, 0.8);
    font-size: 5rem;
    margin-bottom: .5rem
}

.box-selector__icon.custom-icon--plus-circle {
    font-size: 3rem;
    height: 73px
}

.highlight {
    text-decoration: none;
    background-repeat: repeat-x;
    background-position: 0 1em;
    background-size: 0.18667rem 0.18667rem;
    background-image: linear-gradient(to bottom, rgba(32, 78, 87, 0) 50%, rgba(32, 78, 87, 0.3) 50%);
    padding-bottom: 0.18667rem;
    text-shadow: -0.03333em -0.03333em 0 #fff, 0.03333em -0.03333em 0 #fff, 0.03333em 0.03333em 0 #fff, -0.03333em 0.03333em 0 #fff, 0.06667em 0 0 #fff, -0.06667em 0 0 #fff;
    color: #000
}

.highlight:hover {
    text-decoration: none
}

.text-color {
    color: #204e57
}

.wrapper {
    max-width: 45rem;
    width: 90%;
    margin: 0 auto;
    margin-bottom: 1.618rem
}

.group:before, .group:after {
    content: " ";
    display: table
}

.group:after {
    clear: both
}

.flex {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

.flex--vertical {
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column
}

.flex--apart {
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.flex--middle {
    -webkit-align-items: center;
    -ms-flex-align: center;
    -ms-grid-row-align: center;
    align-items: center
}

.flex--baseline {
    -webkit-align-items: baseline;
    -ms-flex-align: baseline;
    -ms-grid-row-align: baseline;
    align-items: baseline
}

.flex-fill {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.mr0 {
    margin-right: 0
}

.mr1 {
    margin-right: 1rem
}

.comp-b-f {
    color: #668ea7
}

.anchor-link {
    font-weight: normal;
    display: inline-block;
    margin: 0 5px;
    font-family: Lato, "Helvetica Neue", sans-serif;
    font-size: 1.33333rem;
    vertical-align: middle;
    line-height: 1;
    padding: 2px 3px;
    border-radius: 2px;
    opacity: 0;
    transition: opacity .1s ease-out, -webkit-transform .15s ease-out;
    transition: opacity .1s ease-out, transform .15s ease-out;
    transition: opacity .1s ease-out, transform .15s ease-out, -webkit-transform .15s ease-out;
    -webkit-transform: scale(0.8);
    transform: scale(0.8)
}

.anchor-link:hover {
    text-decoration: none;
    color: #fff;
    background-color: #C0392B
}

.success-mark {
    font-size: 6rem;
    color: #3BD788;
    margin-bottom: 1.618rem
}

.subtitle, .section-heading {
    font-weight: 900;
    color: #8FB1C7;
    font-size: 0.8rem;
    letter-spacing: 1px;
    text-transform: uppercase
}

.subhead {
    font-size: 1.33333rem;
    font-weight: 300;
    max-width: 55rem;
    margin-left: auto;
    margin-right: auto
}

.section-heading {
    letter-spacing: 2px;
    font-size: 0.8rem
}

.section-heading::before {
    content: '';
    display: block;
    border-bottom: 1px solid rgba(143, 177, 199, 0.3);
    max-width: 100px;
    width: 80%;
    margin: 1.618rem 0;
    margin-left: auto;
    margin-right: auto
}

@media only screen and (max-width: 481px) {
    .section-heading::before {
        max-width: 5rem;
        margin: 1.618rem auto
    }
}

a.help-link:active .icon-help-with-circle {
    color: #7c7c7c
}

.badge {
    border-radius: 3em;
    text-align: center;
    padding: .5em 1.3em;
    text-transform: uppercase;
    font-size: 0.73333rem;
    font-family: Lato, "Helvetica Neue", sans-serif;
    color: #1DABF2;
    border: 1px solid;
    font-weight: bold;
    cursor: default;
    white-space: nowrap;
    vertical-align: middle
}

.badge--right {
    margin-left: .5em
}

.badge--left {
    margin-right: .5em
}

.badge.mode--gray {
    color: #6d99b6;
    border-color: #a0bdd0
}

.badge.mode--warning {
    color: #F3B109
}

.badge.mode--primary {
    color: #2ace7b
}

.badge.size--mini {
    border-radius: 2px;
    padding: 2px 4px
}

.badge.style--filled {
    border: 0;
    background-color: #1DABF2;
    color: #fff
}

.badge.style--filled.mode--primary {
    background-color: #3BD788
}

.badge.style--filled.mode--gray {
    background-color: gray
}

.checkmark-list {
    list-style: none;
    padding: 0;
    margin: 0
}

.checkmark-list label {
    display: inline;
    font-size: 1em;
    clear: both
}

.checkmark-list--clickable label {
    cursor: pointer
}

.checkmark-list--capped {
    max-width: 32em
}

.checkmark-list--centered {
    margin-left: auto;
    margin-right: auto
}

.checkmark-list .checkmark {
    margin-right: 1em;
    float: left;
    position: relative
}

.checkmark-list li {
    margin-bottom: 0.809rem
}

.team__token {
    font-weight: bold;
    border-bottom: 1px dotted #888
}

.touch {
    -webkit-tap-highlight-color: transparent;
    transition: -webkit-transform .1s ease-out;
    transition: transform .1s ease-out;
    transition: transform .1s ease-out, -webkit-transform .1s ease-out;
    display: inline-block
}

.tap {
    -webkit-transform: scale(0.9);
    transform: scale(0.9)
}

.upper-roman {
    list-style-type: upper-roman
}

.list, .horizontal-list {
    list-style: none;
    padding: 0;
    margin: 0
}

.horizontal-list > li {
    display: inline
}

.bar {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row
}

.bar.bar--right {
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end
}

.bar.bar--middle {
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center
}

.bar.bar--edge-to-edge {
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.bar.bar--distribute {
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around
}

ul.bar, ol.bar {
    list-style: none;
    padding: 0;
    margin: 0
}

.round {
    border-radius: 100%
}

.faded {
    color: rgba(32, 78, 87, 0.5)
}

.faded--blue {
    color: rgba(102, 142, 167, 0.7)
}

.subtle {
    color: #668ea7
}

.thin {
    font-weight: 300
}

.mode--negative {
    color: #FF6E70
}

.mode--info {
    color: #1DABF2
}

.mode--positive {
    color: #3BD788
}

.notice-panel {
    border-radius: 8px;
    padding: 1em 1.5em;
    margin: .5rem 0;
    font-size: 1.1em
}

.notice-panel .checkmark-list {
    margin: 1.618rem 0;
    font-weight: bold
}

.notice-panel p {
    margin-bottom: 0.809rem
}

.notice-panel--center {
    text-align: center
}

.notice-panel > :last-child {
    margin-bottom: 0
}

.notice-panel.notice-panel--style--ghost {
    border: 1px solid
}

.notice-panel.notice-panel--negative {
    color: #FF6E70
}

.notice-panel.notice-panel--warning {
    background-color: #fdf6e1;
    color: rgba(104, 81, 7, 0.9)
}

.notice-panel.notice-panel--warning.notice-panel--style--ghost {
    border-color: rgba(223, 173, 15, 0.7);
    background-color: transparent;
    color: inherit
}

.notice-panel.notice-panel--warning.notice-panel--warning--filled {
    color: #dfad0f
}

.notice-panel.notice-panel--warning.notice-panel--warning--filled a {
    color: #7f6309;
    text-decoration: underline
}

.app__icon {
    width: 1.2em;
    height: 1.2em;
    border-radius: 3px
}

.arrow-up {
    width: 0;
    height: 0;
    border: solid transparent;
    border-width: 0 20px 20px 20px;
    border-bottom-color: #191E22;
    border-bottom-width: 34.64px
}

.arrow-down {
    width: 0;
    height: 0;
    border: solid transparent;
    border-width: 20px 20px 0 20px;
    border-top-color: #191E22;
    border-top-width: 34.64px
}

.arrow-right {
    width: 0;
    height: 0;
    border: solid transparent;
    border-width: 20px 0 20px 20px;
    border-left-color: #191E22;
    border-left-width: 34.64px
}

.arrow-left {
    width: 0;
    height: 0;
    border: solid transparent;
    border-width: 20px 20px 20px 0;
    border-right-color: #191E22;
    border-right-width: 34.64px
}

.visually-hidden {
    position: absolute;
    left: -999em
}

.icon {
    fill: currentColor;
    width: 1em;
    height: 1em;
    vertical-align: middle
}

a .icon {
    cursor: pointer
}

.timestamp-link {
    color: #0c8fd0;
    font-weight: bold
}

.link-branded {
    color: #C0392B
}

.timestamp-link-current {
    font-weight: bold;
    color: #fff;
    background-color: #1DABF2;
    border-radius: 3px;
    padding: 0 3px
}

.timestamp-link-current:hover {
    text-decoration: none
}

@media only screen and (max-width: 481px) {
    .hide--handheld {
        display: none
    }
}

@media only screen and (min-width: 481px) {
    .show--handheld {
        display: none
    }
}

.text-block {
    max-width: 40rem;
    width: 90%;
    margin: 0 auto;
    line-height: 1.7;
    font-size: 1.06667em;
}

.text-block li ul {
    margin-left: 2em;
    margin-top: 1.618rem
}

.text-block pre {
    margin: 1.618rem -3rem;
    padding-left: 2rem;
    padding-right: 2rem
}

@media only screen and (max-width: 481px) {
    .text-block pre {
        margin-left: 0;
        margin-right: 0;
        padding-left: 0.809rem;
        padding-right: 0.809rem
    }
}

.text-block .team-selector-container + pre {
    margin-top: 0
}

.text-block figure.image--full {
    margin-left: -14vw;
    margin-right: -14vw
}

.text-block figure.image--full img {
    display: block;
    margin: 0 auto
}

@media only screen and (max-width: 960px) {
    .text-block figure.image--full {
        margin-left: -9%;
        width: 114.6%;
        margin-right: 0
    }
}

@media only screen and (max-width: 481px) {
    .text-block figure.image--full {
        margin-top: 1.618rem;
        margin-bottom: 1.618rem;
        width: 117.9%
    }
}

.text-block figure.image--shadow img {
    box-shadow: rgba(0, 0, 0, 0.1) 0 1px 10px, rgba(0, 0, 0, 0.15) 0 1px 2px
}

.text-block figcaption {
    text-align: center;
    font-size: 1.2em;
    margin-top: 2rem;
    color: #999
}

.text-block table {
    margin: 3.236rem auto
}

.text-block table tr:nth-child(even) {
    background-color: rgba(238, 238, 238, 0.6)
}

.text-block table tr:last-child td {
    border-bottom: 1px solid #eee
}

.text-block th, .text-block td {
    padding: .4em 1em;
    border: 0
}

.text-block th {
    border-bottom: 1px solid #eee
}

.text-block dl {
    margin-top: 3.236rem;
    margin-bottom: 3.236rem
}

.text-block figure {
    margin-top: 4.854rem;
    margin-bottom: 4.854rem
}

.text-block pre + pre {
    margin-top: -3.236rem
}

.text-block hr {
    border: 0;
    height: 1px;
    display: block;
    margin: 4.854rem auto;
    width: 50%;
    max-width: 15rem;
    background-color: #204e57
}

.text-block .paragraph--intro {
    font-size: 1.2em;
    line-height: 1.8;
    font-family: "Playfair Display", serif;
    text-align: center;
    -webkit-font-smoothing: subpixel-antialiased;
    -moz-osx-font-smoothing: auto;
    margin: 0 -2rem 3.236rem
}

@media only screen and (max-width: 45rem) {
    .text-block .paragraph--intro {
        font-size: 1.1em;
        text-align: left;
        margin: 0 0 1.618rem
    }
}

.text-block .fancy-quote {
    border: 0;
    padding: 0;
    margin: 4.854rem -8vw;
    font-family: "Playfair Display", serif;
    font-style: italic;
    font-size: 1.6em;
    text-align: center;
    color: #5d5d5d;
    line-height: 1.9
}

@media only screen and (max-width: 960px) {
    .text-block .fancy-quote {
        margin-left: 0;
        margin-right: 0;
        font-size: 1.2em;
        color: #444
    }
}

.text-block .vertical-margin {
    margin-top: 4.854rem;
    margin-bottom: 4.854rem
}

.text-block .vertical-margin-mini {
    margin-top: 3.236rem;
    margin-bottom: 3.236rem
}

.text-block .list--fancy-numbered {
    list-style: none;
    padding: 0;
    counter-reset: li
}

.text-block .list--fancy-numbered li {
    padding-left: 3em;
    position: relative;
    margin-bottom: 0.809rem
}

.text-block .list--fancy-numbered li::before {
    font-family: "Playfair Display", serif;
    font-weight: bold;
    counter-increment: li;
    content: counter(li);
    font-size: 1.8em;
    position: absolute;
    left: 0;
    top: -0.2em;
    line-height: 1;
    text-align: center;
    width: 1em
}

.centered {
    text-align: center;
    margin-left: auto;
    margin-right: auto
}

.markdown-link {
    color: rgba(32, 78, 87, 0.8);
    font-size: 1.5em
}

.markdown-link:hover {
    color: #204e57
}

.markdown-link--right {
    margin-right: .25em
}

.markdown-link--left {
    margin-left: .25em
}

.mention {
    font-weight: bold
}

.mention--you {
    display: inline-block;
    background-color: #c1e8fb;
    border-radius: 3px;
    padding: 0 4px;
    box-shadow: #96cae4 0 1px 0
}

img.emoji {
    font-size: inherit;
    height: 2.7ex;
    min-width: 15px;
    min-height: 15px;
    display: inline-block;
    margin: -0.4ex .15em 0;
    line-height: normal;
    vertical-align: middle
}

h1 img.emoji, h2 img.emoji, h3 img.emoji, h4 img.emoji, h5 img.emoji {
    font-size: .8em;
    margin-left: -.1em;
    margin-right: -.1em
}

h1 span.emoji, h2 span.emoji, h3 span.emoji, h4 span.emoji, h5 span.emoji {
    position: relative;
    top: .2ex
}

.webapplayout {
    background-color: #F6FBFD
}

.webapplayout [role="main"] {
    font-size: 0.86667rem
}

.webapplayout hr {
    border: 0;
    height: 1px;
    background-color: rgba(112, 182, 236, 0.3);
    margin: 2.427rem auto;
    max-width: 25%
}

.accountslayout {
    background-color: #F6FBFD
}

.accountslayout [role="banner"] {
    padding: 3.236rem 5% 3.236rem;
    box-shadow: none;
    text-align: center;
    position: static;
    height: auto
}

.accountslayout [role="banner"] .lookback-logo {
    font-size: 1.2rem
}

@media only screen and (max-width: 481px) {
    .accountslayout [role="banner"] {
        padding: 1.618rem 5% 3.236rem
    }
}

.accountslayout [role="main"] {
    text-align: center
}

@media only screen and (max-width: 481px) {
    .accountslayout [role="main"] {
        padding-top: 0.809rem
    }
}

@media only screen and (min-width: 481px) {
    .accountslayout [role="main"] {
        margin-top: 3.236rem;
        margin-bottom: 2.1034rem
    }
}

.accountslayout [role="main"] h1 {
    margin-bottom: 0
}

@media only screen and (max-width: 481px) {
    .accountslayout [role="main"] h1 {
        font-size: 1.86667rem
    }
}

.accountslayout [role="main"] h2 {
    color: #668ea7;
    font-size: 1.2em
}

.accountslayout [role="main"] .heading-group {
    margin-bottom: 0
}

.accountslayout [role="main"] .heading-group + h2 {
    font-size: 1.06667rem;
    margin-bottom: 4.854rem
}

@media only screen and (max-width: 481px) {
    .accountslayout [role="main"] .heading-group + h2 {
        font-size: 1rem
    }
}

.fullpagelayout {
    background-color: #F6FBFD
}

.fullpagelayout [role="main"] {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    text-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center
}

.account-form {
    font-size: 1.1rem
}

.account-form .btn {
    width: 100%;
    margin-top: 0.809rem
}

.account-form__text {
    margin: 0.809rem auto;
    color: #668ea7
}

.account-form__text--small {
    font-size: 1rem
}

.account-form__separator {
    display: block;
    margin-top: 0.809rem;
    color: #668ea7;
    position: relative;
    font-style: italic;
    font-size: .9em
}

.account-form__separator--bordered::before {
    display: block;
    content: '';
    height: 1px;
    background-color: rgba(228, 234, 235, 0.7);
    position: absolute;
    left: 0;
    right: 0;
    top: 50%
}

.account-form__separator__text {
    background-color: #fff;
    padding: 0 .4em;
    position: relative;
    z-index: 2
}

.account-form p:last-child {
    margin-bottom: 0
}

.account-form-container {
    max-width: 26.66667rem;
    width: 90%;
    margin: 0 auto
}

.account-form-container .account-form-container__footer {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 1.618rem 1.5em;
    color: #86a6ba
}

.account-form-container .account-form-container__footer p {
    margin: 0
}

.account-form-container .account-form-container__footer > :first-child:nth-last-child(1) {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    width: 100%;
    margin: 0
}

.account-form-container .account-form-container__footer a {
    color: #668ea7
}

.account-form-container .account-form-container__footer a.btn {
    vertical-align: inherit
}

.signin-dropdown {
    width: 280px;
    box-shadow: rgba(114, 182, 234, 0.3) 0 4px 7px, rgba(114, 182, 234, 0.15) 0 14px 30px
}

.signin-dropdown .settings-form__field {
    margin: 1.1em .8em
}

.signin-dropdown .btn[type="submit"] {
    border-radius: 0 0 4px 4px
}

.press [role="contentinfo"] {
    background-color: #6a1f18;
    color: #d3746b;
    box-shadow: none
}

.press [role="contentinfo"] a {
    color: #d3746b !important
}

.press [role="contentinfo"] a:hover {
    color: #e6b0aa !important
}

.press [role="contentinfo"] .faded {
    color: rgba(211, 116, 107, 0.8)
}

.press [role="contentinfo"] .logo__swirl, .press [role="contentinfo"] .logo__text {
    fill: rgba(211, 116, 107, 0.8)
}

.press [role="contentinfo"] .lookback-logo:hover .logo__swirl, .press [role="contentinfo"] .lookback-logo:hover .logo__text {
    fill: #fff
}

.press [role="contentinfo"] .nav--current a {
    color: #f2d7d5
}

.press-header {
    text-align: center
}

.press-header h1 {
    margin: 1.618rem 0 0.809rem
}

.press-header p {
    color: #999
}

.press-logos .desc-block__children figure {
    display: block;
    width: 60%
}

.press-logos .desc-block__children p {
    font-size: 1rem;
    margin-bottom: 0.809rem
}

.press-logos .btn {
    font-weight: 400
}

.press-logos img {
    height: 28px
}

.press-logos.light {
    background-color: #f5f5f5
}

.press-logos.light .desc-block__children li:nth-child(1) {
    background-color: #f5f5f5
}

.press-logos.light .desc-block__children li:nth-child(1) p {
    color: #999
}

.press-logos.light .desc-block__children li:nth-child(2) {
    background-color: #f0f0f0
}

.press-logos.light .desc-block__children li:nth-child(2) p {
    color: #949494
}

.press-logos.light .desc-block__children li:nth-child(3) {
    background-color: #ebebeb
}

.press-logos.light .desc-block__children li:nth-child(3) p {
    color: #8f8f8f
}

.press-logos.dark {
    background-color: #191E22
}

.press-logos.dark p {
    color: #c3c3c3
}

.press-logos.dark .desc-block__children li:nth-child(1) {
    background-color: #22282e
}

.press-logos.dark .desc-block__children li:nth-child(2) {
    background-color: #1d2328
}

.press-logos.dark .desc-block__children li:nth-child(3) {
    background-color: #191E22
}

.press-media-kit {
    text-align: center;
    padding: 3.236rem 0;
    color: #c3c3c3
}

.press-media-kit p {
    margin-bottom: 0
}

.press-media-kit .btn {
    font-size: 1.1rem;
    font-weight: 400;
    margin-bottom: 0.809rem
}

.press-articles {
    width: 90%;
    max-width: 50rem;
    margin: 0 auto;
    padding: 3.236rem 0
}

.press-articles h1 {
    font-size: 2.13333rem;
    text-align: center;
    margin: 3.236rem auto
}

.press-articles h1::after {
    content: '';
    display: block;
    border-bottom: 1px solid #204e57;
    max-width: 10rem;
    width: 80%;
    margin: 1.618rem 0;
    margin-left: auto;
    margin-right: auto
}

@media only screen and (max-width: 481px) {
    .press-articles h1::after {
        max-width: 5rem;
        margin: 1.618rem auto
    }
}

.press-articles ul {
    margin-bottom: 6.472rem;
    list-style-type: circle
}

.blog [role="article"] {
}

.blog [role="article"]:not(:first-child) {
    padding-top: 4.045rem;
    margin-top: 4.045rem;
    border-top: 1px solid #eee
}

.blog [role="article"] header h1 a {
    color: #fff
}

.blog [role="article"] header h1 a:hover {
    text-decoration: none;
    border-bottom: 1px solid #fff
}

.blog [role="article"] header:not(.has-banner) h1 a {
    color: #204e57
}

.blog [role="article"] header:not(.has-banner) h1 a:hover {
    color: #0d99df;
    text-decoration: none;
    background-repeat: repeat-x;
    background-position: 0 1.2em;
    background-size: 0.18667rem 0.18667rem;
    background-image: linear-gradient(to bottom, rgba(228, 234, 235, 0) 50%, #E4EAEB 50%);
    padding-bottom: 0.2rem;
    text-shadow: -0.03333em -0.03333em 0 #fff, 0.03333em -0.03333em 0 #fff, 0.03333em 0.03333em 0 #fff, -0.03333em 0.03333em 0 #fff, 0.06667em 0 0 #fff, -0.06667em 0 0 #fff
}

.blog [role="article"] header:not(.has-banner) h1 a:hover:hover {
    text-decoration: none
}

.blogpost [role="banner"].background--solid {
    box-shadow: none
}

.blogpost [role="article"] header {
    padding-top: 3.236rem
}

.blogpost .blog__latest-posts {
    margin-top: 6.472rem
}

.blogpost .blog__latest-posts h1 {
    font-size: 1.86667rem;
    margin: 0
}

.blogpost .blog__latest-posts h2 {
    font-size: 1.6rem
}

.blogpost .blog__latest-posts .post__meta {
    font-family: "Playfair Display", serif;
    display: inline-block;
    position: relative;
    font-size: 1.1rem;
    width: auto
}

@media only screen and (min-width: 481px) {
    .blogpost .blog__latest-posts .post__meta::after, .blogpost .blog__latest-posts .post__meta::before {
        display: block;
        position: absolute;
        border-top: 1px solid rgba(102, 142, 167, 0.4);
        content: '';
        top: 1rem;
        width: 2rem
    }

    .blogpost .blog__latest-posts .post__meta::before {
        left: -3rem
    }

    .blogpost .blog__latest-posts .post__meta::after {
        right: -3rem
    }
}

.blogpost .blog__latest-posts .avatar {
    width: 40px
}

.blogpost .desc-block {
    color: #204e57;
    background-color: #f7f7f7;
    border-bottom: 1px solid #dadada
}

.blogpost .desc-block a {
    color: #204e57
}

.blogpost .desc-block .desc-block__banner {
    border-top: 1px solid #e4e4e4;
    border-bottom: 1px solid #dadada
}

.blogpost .desc-block .desc-block__banner a:hover {
    text-decoration: none;
    background-repeat: repeat-x;
    background-position: 0 1.2em;
    background-size: 0.18667rem 0.18667rem;
    background-image: linear-gradient(to bottom, rgba(32, 78, 87, 0) 50%, #204e57 50%);
    padding-bottom: 0.2rem;
    text-shadow: -0.03333em -0.03333em 0 #f7f7f7, 0.03333em -0.03333em 0 #f7f7f7, 0.03333em 0.03333em 0 #f7f7f7, -0.03333em 0.03333em 0 #f7f7f7, 0.06667em 0 0 #f7f7f7, -0.06667em 0 0 #f7f7f7
}

.blogpost .desc-block .desc-block__banner a:hover:hover {
    text-decoration: none
}

.blogpost .desc-block .desc-block__children > a {
    padding: 1.618rem 2%;
    transition: background-color .3s ease-out
}

.blogpost .desc-block .desc-block__children > a:hover {
    text-decoration: none
}

.blogpost .desc-block .desc-block__children > a:nth-child(1) {
    background-color: #efefef
}

.blogpost .desc-block .desc-block__children > a:nth-child(1):hover {
    background-color: rgba(83, 55, 55, 0.1)
}

.blogpost .desc-block .desc-block__children > a:nth-child(2) {
    background-color: #eaeaea
}

.blogpost .desc-block .desc-block__children > a:nth-child(2):hover {
    background-color: rgba(52, 35, 35, 0.1)
}

.blogpost .desc-block .desc-block__children > a:nth-child(3) {
    background-color: #e5e5e5
}

.blogpost .desc-block .desc-block__children > a:nth-child(3):hover {
    background-color: rgba(37, 24, 24, 0.1)
}

.blogpost .desc-block .desc-block__children p {
    color: #204e57
}

[role="article"] {
}

[role="article"] header {
    text-align: center;
    padding-top: 4.854rem;
    padding-bottom: 1.618rem
}

[role="article"] header.has-banner {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding-top: 11.326rem;
    padding-bottom: 14.562rem;
    margin-bottom: 3.236rem;
    color: #fff
}

[role="article"] header.has-banner h1 {
    font-size: 4em;
    line-height: 1.3;
    color: #fff
}

[role="article"] header.has-banner .post__meta::before, [role="article"] header.has-banner .post__meta::after {
    border-color: #fff
}

[role="article"] header.has-banner .post__meta .post__permalink, [role="article"] header.has-banner .post__meta .post__permalink:hover, [role="article"] header.has-banner .post__meta .post__by, [role="article"] header.has-banner .post__meta .post__by:hover, [role="article"] header.has-banner .post__meta .post__author, [role="article"] header.has-banner .post__meta .post__author:hover {
    color: #fff
}

@media only screen and (max-width: 481px) {
    [role="article"] header.has-banner {
        padding-top: 3.236rem;
        padding-bottom: 4.854rem
    }

    [role="article"] header.has-banner h1 {
        font-size: 10vw
    }
}

[role="article"] header h1 {
    max-width: 60rem;
    margin: 0 auto 0.809rem;
    color: #204e57;
    font-weight: bold
}

[role="article"] header p {
    margin: 0 auto 1.618rem
}

[role="article"] header .avatar {
    width: 48px
}

[role="article"] header .post__meta {
    font-size: 1.1rem;
    position: relative;
    display: inline-block;
    color: #668ea7
}

@media only screen and (min-width: 481px) {
    [role="article"] header .post__meta::after, [role="article"] header .post__meta::before {
        display: block;
        position: absolute;
        border-top: 1px solid rgba(102, 142, 167, 0.4);
        content: '';
        top: 1rem;
        width: 2rem
    }

    [role="article"] header .post__meta::before {
        left: -3rem
    }

    [role="article"] header .post__meta::after {
        right: -3rem
    }
}

[role="article"] header .post__meta .post__permalink {
    color: #204e57;
    text-decoration: none
}

[role="article"] header .post__meta .post__permalink:hover {
    color: #0d99df
}

[role="article"] header .post__edit-link {
    margin: 0 5px
}

[role="article"] header .post__by {
    font-style: italic;
    color: rgba(102, 142, 167, 0.7);
    font-size: .9em;
    margin-right: .3em
}

@media only screen and (max-width: 481px) {
    [role="article"] header {
        padding: 0 5%
    }

    [role="article"] header h1 {
        font-size: 8vw
    }
}

[role="article"] .post__content h2 {
    margin-top: 4.854rem;
    margin-bottom: 3.236rem;
    font-weight: bold;
    text-align: center
}

[role="article"] .post__content h3 {
    font-weight: bold;
    margin-top: 3.236rem
}

[role="article"] .post__content h4, [role="article"] .post__content h5, [role="article"] .post__content h6 {
    margin-bottom: 0.809rem
}

@media only screen and (max-width: 481px) {
    [role="article"] .post__content {
        font-size: 0.93333em;
        line-height: 1.6;
        width: 85%
    }
}

@media only screen and (min-width: 1282px) {
    [role="article"] .post__content {
        font-size: 1.2rem;
        line-height: 1.9;
        max-width: 39em
    }
}

@media only screen and (max-width: 670px) and (orientation: landscape) {
    [role="article"] .post__content {
        max-width: 33rem
    }
}

.blog__not-found {
    text-align: center;
    max-width: 40rem;
    margin: 4.854rem auto 0;
    width: 90%
}

.blog__not-found h1 {
    font-weight: bold
}

.blog__not-found p {
    color: #777
}

.blog__load-more, .blog__rss {
    text-align: center;
    padding: 4.854rem 5%
}

.blog__load-more p, .blog__load-more h2, .blog__rss p, .blog__rss h2 {
    margin: 0
}

.blog__rss a:hover {
    text-decoration: none;
    background-repeat: repeat-x;
    background-position: 0 1.2em;
    background-size: 0.18667rem 0.18667rem;
    background-image: linear-gradient(to bottom, rgba(192, 57, 43, 0) 50%, #C0392B 50%);
    padding-bottom: 0.2rem;
    text-shadow: -0.03333em -0.03333em 0 #fff, 0.03333em -0.03333em 0 #fff, 0.03333em 0.03333em 0 #fff, -0.03333em 0.03333em 0 #fff, 0.06667em 0 0 #fff, -0.06667em 0 0 #fff
}

.blog__rss a:hover:hover {
    text-decoration: none
}

.blog__load-more {
    background: transparent url("/images/phoenix/typewriter.jpg") no-repeat center;
    background-size: cover;
    margin-top: 4.854rem
}

.changelog {
    background-color: #F6FBFD
}

.changelog .changelog__header {
    padding-top: 8.09rem;
    margin-bottom: 3.236rem;
    position: relative;
    text-align: center
}

@media only screen and (max-width: 481px) {
    .changelog .changelog__header {
        padding: 0;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        text-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        height: 30vh
    }
}

.changelog .changelog__header h1 {
    margin-bottom: 1.618rem;
    font-weight: bold;
    letter-spacing: -1px
}

.changelog [role="main"] {
    color: #204e57
}

.changelog [role="main"] .loading-container {
    height: 20rem
}

.changelog [role="main"] h1, .changelog [role="main"] h2, .changelog [role="main"] h3, .changelog [role="main"] h4, .changelog [role="main"] h5, .changelog [role="main"] h6 {
    font-family: Lato, "Helvetica Neue", sans-serif
}

.changelog [role="main"] .changelog__description {
    text-align: center
}

.changelog [role="main"] h1 {
    font-size: 2.4rem
}

.changelog [role="main"] h2 {
    font-size: 1.86667rem;
    font-style: italic;
    margin-bottom: 0;
    text-align: center
}

.changelog [role="main"] h3 {
    font-size: 1.46667rem;
    margin-top: 3.236rem
}

.changelog [role="main"] h4 {
    margin-bottom: 0.809rem;
    font-family: "Playfair Display", serif
}

.changelog .changelog__nav {
    margin-bottom: 1.618rem
}

.changelog .changelog__nav a {
    padding-left: 1em;
    padding-right: 1em
}

.changelog .changelog__sub-nav {
    font-size: 1.1em
}

.changelog .changelog__sub-nav li:not(:last-child)::after {
    color: #8FB1C7
}

.changelog .changelog__wrapper {
    max-width: 40rem;
    width: 90%;
    margin: 0 auto
}

@media only screen and (max-width: 600px) {
    .changelog .changelog__wrapper p code, .changelog .changelog__wrapper a code, .changelog .changelog__wrapper li > code {
        display: inline-block;
        max-width: 100%;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        padding: 0 5px
    }
}

.changelog .changelog__wrapper ul {
    padding: 0
}

@media only screen and (max-width: 481px) {
    .changelog .changelog__wrapper ul {
        padding-left: 1rem
    }
}

.changelog .changelog__wrapper li {
    margin-bottom: 0.809rem
}

.changelog .changelog__wrapper .changelog__description {
    font-size: .9rem;
    color: #8FB1C7
}

.changelog-entry .current {
    text-decoration: underline
}

.pricing {
    background-color: #F6FBFD
}

.pricing h1, .pricing h2, .pricing h3 {
    font-family: Lato, "Helvetica Neue", sans-serif
}

.pricing__header {
    text-align: center;
    padding: 8.09rem 2% 0
}

.pricing__header__background {
    position: absolute;
    top: -100px;
    left: 0%;
    max-width: none;
    width: 100%;
    height: 875px;
    z-index: -1
}

.pricing__header h1 {
    color: #fff;
    margin-bottom: 0.809rem;
    font-weight: bold;
    font-size: 3.46667rem
}

@media only screen and (max-width: 481px) {
    .pricing__header h1 {
        padding: 0 2vw;
        font-size: 7vw;
        line-height: 1.4
    }
}

.pricing__header h2 {
    color: #fff;
    font-size: 1.46667rem
}

@media only screen and (max-width: 481px) {
    .pricing__header h2 {
        padding: 0 2vw;
        font-size: 5vw;
        line-height: 1.4
    }
}

@media only screen and (min-width: 768px) {
    .pricing__header__first-line {
        display: block;
        max-width: 40rem;
        margin: 0 auto
    }
}

@media only screen and (min-width: 768px) {
    .pricing__header__second-line {
        display: block;
        max-width: 46rem;
        margin: 0 auto
    }
}

.pricing__faq {
    color: #204e57;
    background-color: #fff;
    padding: 3.236rem 5%;
    margin: 4.854rem 0 3.236rem
}

.pricing__faq h2 {
    font-weight: bold;
    text-align: center;
    margin-bottom: 3.236rem
}

.pricing__faq dl {
    text-align: left;
    font-size: 1em;
    max-width: 1040px;
    width: 90%;
    margin: 0 auto
}

@media only screen and (min-width: 790px) {
    .pricing__faq dl {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
        -webkit-column-gap: 5em;
        -moz-column-gap: 5em;
        column-gap: 5em
    }
}

.pricing__faq dd {
    max-width: 40rem;
    color: rgba(32, 78, 87, 0.8)
}

.pricing__faq dd p, .pricing__faq dd ul, .pricing__faq dd ol, .pricing__faq dd blockquote {
    margin-bottom: 0.809rem
}

.pricing__help {
    color: #668ea7;
    max-width: 590px;
    margin: 1.618rem auto 3.236rem;
    line-height: 1.8
}

.choose-plan .pricing__header {
    padding-top: 3.236rem
}

h3.pricing__customers__heading {
    text-align: center;
    text-transform: uppercase;
    font-size: 1.26667rem;
    font-weight: bold;
    letter-spacing: 1.5px;
    color: rgba(102, 142, 167, 0.7);
    margin-bottom: 2.427rem
}

.pricing__plans {
    max-width: 1100px;
    min-height: 751px;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: #204e57;
    margin: 0 auto 6.472rem
}

.pricing__plans .loading-container {
    height: 400px
}

.pricing__plans__interval-picker {
    text-align: center;
    margin-bottom: 3.236rem
}

.pricing__plans__interval-picker .btn {
    color: #fff
}

.pricing__plans__interval-picker .btn.mode--transparent:hover {
    color: #fff;
    background-color: rgba(27, 108, 151, 0.15)
}

.pricing__plans__interval-picker .btn:disabled {
    background-color: rgba(27, 108, 151, 0.34);
    -webkit-filter: none;
    filter: none
}

.pricing__plans__container {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 2.427rem;
    overflow-x: auto
}

@media only screen and (max-width: 852px) {
    .pricing__plans__container {
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column
    }
}

.pricing__plans__column {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-top: 1.618rem
}

.pricing__plans__column__container {
    border-radius: 10px;
    background-color: #fff;
    margin: 1.618rem 1rem;
    padding: 1.618rem 2rem 2.427rem;
    box-shadow: rgba(114, 182, 234, 0.2) 0 0 20px 5px
}

.pricing__plans__column__header h1 {
    font-size: 2.53333rem;
    color: #2f383f;
    margin-bottom: 0
}

.pricing__plans__column__header h2 {
    color: rgba(102, 142, 167, 0.7);
    height: 1.618rem;
    font-size: 1.06667rem;
    margin-bottom: 0.2rem
}

.pricing__plans__column__features {
    line-height: 2;
    font-size: 1rem;
    margin-bottom: 4.854rem
}

.pricing__plans__column__features h4 {
    font-size: inherit;
    height: 2.1034rem;
    margin-bottom: 0
}

.pricing__plans__column__features ul {
    list-style: none;
    padding: 0;
    margin: 0
}

.pricing__plans__column__features__icon {
    color: #3BD788;
    margin-right: 0.5rem
}

.pricing__plans__column__recommendation {
    text-transform: uppercase;
    color: #8289ef;
    font-size: 1rem
}

.pricing__plans__column__footer {
    text-align: center
}

.pricing__plans__column__cta .btn {
    width: 100%;
    font-size: 1.2em
}

.pricing__plans__appendix {
    text-align: center;
    font-size: 1.06667rem;
    color: rgba(102, 142, 167, 0.7);
    padding: 0 5%;
    max-width: 53rem;
    margin: 1.618rem auto
}

.pricing__plans .pricing__plans__column--recommended {
    margin-top: 0
}

.pricing__plans .pricing__plans__column--recommended .pricing__plans__column__container {
    box-shadow: rgba(114, 182, 234, 0.2) 0 0 20px 10px
}

.pricing__plans .pricing__plans__column--recommended .pricing__plans__column__features {
    padding-top: 1.618rem
}

.pricing__plans .pricing__plans__column--recommended .pricing__plans__column__cta .btn {
    background-color: #8289ef;
    font-size: 1.4em;
    padding-bottom: 0.7em
}

.pricing__plans .pricing__plans__column--recommended .pricing__plans__column__cta .btn[disabled] {
    color: #ddd
}

@media only screen and (max-width: 852px) {
    .pricing__plans .pricing__plans__pricing-info {
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column
    }

    .pricing__plans .pricing__plans {
        border-radius: 0
    }
}

.download {
    background-color: #F6FBFD
}

.download .section-heading {
    text-align: center;
    margin: 3.236rem auto 1.618rem
}

.download h1, .download h2, .download h3 {
    font-family: Lato, "Helvetica Neue", sans-serif
}

.download h1 {
    font-weight: 300
}

@media only screen and (max-width: 600px) {
    .download h1 {
        font-size: 1.73333rem
    }
}

.download .get-started-section {
    padding-top: 0
}

.page-download-container {
    color: #204e57;
    max-width: 730px;
    width: 90%;
    margin: 3.236rem auto 4.854rem
}

@media only screen and (max-width: 600px) {
    .page-download-container {
        margin-top: 6.472rem
    }
}

.page-download-container .loading-container {
    margin: 6.472rem auto
}

.page-download-container h2 {
    font-weight: bold;
    font-size: 1.6rem;
    margin-bottom: 1.618rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid rgba(32, 78, 87, 0.1)
}

.page-download-container h2 small {
    color: rgba(32, 78, 87, 0.4);
    margin-left: .5rem;
    font-weight: normal;
    font-size: .6em
}

@media only screen and (max-width: 500px) {
    .page-download-container h2 small {
        display: block;
        margin-left: 0
    }
}

.page-download-container > section {
    margin-bottom: 4.854rem
}

.download__outro {
    color: #4fb1d8
}

.download__outro h1 {
    font-family: Lato, "Helvetica Neue", sans-serif;
    font-weight: 300;
    color: #204e57
}

.download__group {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 -1rem
}

@media only screen and (max-width: 500px) {
    .download__group {
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center
    }
}

.download__card {
    position: relative;
    text-align: center;
    margin: 0 1rem 2rem;
    width: 223px;
    transition: -webkit-transform .5s ease;
    transition: transform .5s ease;
    transition: transform .5s ease, -webkit-transform .5s ease;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d
}

.download__card--flipped {
    z-index: 1002;
    -webkit-transform: perspective(1000px) rotateY(180deg);
    transform: perspective(1000px) rotateY(180deg)
}

.download__card--downloaded .download__card__back .download__card__heading {
    display: block
}

.download__card__toggle {
    position: absolute;
    top: 0;
    right: 7px;
    opacity: .3;
    transition: opacity .15s ease;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.download__card__toggle:hover {
    opacity: .9
}

.download__card__heading {
    display: none;
    font-weight: normal;
    margin-bottom: .5rem;
    font-size: 1.2rem
}

.download__card__front, .download__card__back {
    border-radius: 8px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.download__card__back {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    box-shadow: rgba(114, 182, 234, 0.2) 0 2px 50px;
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    background-color: #fff;
    border: 1px solid #D4E8F5;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    text-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center
}

.download__card__back .btn {
    padding-left: 2em;
    padding-right: 2em
}

.download__card__close {
    font-size: .9em;
    margin-top: 0.809rem
}

.download__release {
    display: block;
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 8px;
    padding: 1.618rem 0 0.809rem;
    box-shadow: inset transparent 0 0 0, rgba(114, 182, 234, 0.2) 0 2px 20px;
    transition: box-shadow .2s ease, background-color .2s ease
}

.download__release .download__participate-icon {
    background-color: #fff;
    box-shadow: 0 2px 15px 0 rgba(40, 144, 169, 0.25);
    border-radius: 100%;
    position: absolute;
    top: 30px;
    right: 62px;
    z-index: 20;
    font-size: 1.2em;
    width: 30px;
    height: 30px;
    line-height: 28px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    transition: box-shadow .3s ease, -webkit-transform .3s ease;
    transition: box-shadow .3s ease, transform .3s ease;
    transition: box-shadow .3s ease, transform .3s ease, -webkit-transform .3s ease
}

.download__release .download__participate-icon .icon {
    color: #F3B109
}

.download__release:hover {
    text-decoration: none;
    background-color: #fff;
    box-shadow: inset #3BD788 0 0 0 2px, rgba(114, 182, 234, 0.2) 0 1px 15px
}

.download__release:hover .download__release__note {
    color: rgba(18, 45, 50, 0.6)
}

.download__release:hover .download__participate-icon {
    box-shadow: 0 1px 7px 0 rgba(40, 144, 169, 0.3);
    -webkit-transform: scale(0.9);
    transform: scale(0.9)
}

.download__release:hover .download__release__link {
    visibility: visible
}

.download__release:hover .download__release__logo {
    opacity: 1;
    fill: #5081a0
}

.download__release:hover h3 {
    color: #122d32
}

.download__release h3 {
    font-size: 1.2rem;
    margin-bottom: 0;
    color: #193d44
}

.download__release .download__release__logo {
    fill: #8FB1C7;
    max-width: 40%;
    max-height: 55px;
    margin: 1.5rem auto;
    opacity: .9;
    transition: opacity .2s ease;
    width: auto;
    height: auto;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.download__release .custom-icon--laptop-with-device {
    max-height: 74px;
    max-width: 51%;
    margin-bottom: 3px
}

.download__release .custom-icon--android-sdk, .download__release .custom-icon--ios-sdk {
    position: relative;
    right: -6px
}

.download__release .custom-icon--android-sdk {
    max-width: 60%
}

.download__release__note {
    color: rgba(32, 78, 87, 0.4);
    font-size: 0.8rem;
    margin: 0;
    padding: 0 2rem;
    line-height: 1.3;
    margin-top: 5px
}

.download__release__description {
    margin-bottom: 1.618rem;
    color: rgba(32, 78, 87, 0.8);
    padding: 0 10%;
    font-size: .85em
}

.download__release__link {
    color: #2ace7b;
    text-shadow: rgba(59, 215, 136, 0.15) 0 1px 4px;
    font-weight: bold;
    font-size: 0.8rem;
    margin: 0;
    margin-top: 0.809rem;
    visibility: hidden
}

.download__changelog {
    margin-top: 3.236rem;
    text-align: center;
    color: #4fb1d8
}

.modal-download-chrome {
    color: rgba(32, 78, 87, 0.6);
    padding: 3rem 6rem
}

.modal-download-chrome .modal__inner {
    max-width: 400px;
    margin: 0 auto
}

.modal-download-chrome .download-modal__explanation {
    line-height: 1.8
}

.modal-download-chrome h1 {
    font-size: 1.86667rem;
    margin-bottom: 0.809rem
}

.modal-download-chrome h1 .icon {
    margin-right: 1rem;
    position: relative;
    top: -2px;
    color: rgba(32, 78, 87, 0.75)
}

.download__suggested {
    text-align: center;
    margin-bottom: 3.236rem
}

.download__suggested h1 {
    margin-bottom: 0
}

.download__suggested__subtitle {
    margin-top: 0;
    margin-bottom: 1.618rem;
    font-size: 0.86667rem
}

.download__suggested__pitch {
    font-size: 1.13333rem;
    font-weight: 300;
    color: rgba(32, 78, 87, 0.8)
}

.download__suggested .btn .icon {
    font-size: 1.2em;
    top: -.3ex;
    height: 21px
}

@-webkit-keyframes live-logo-grow {
    50% {
        box-shadow: inset #3BD788 0 0 0 1px
    }
    100% {
        -webkit-transform: scale(2.5);
        transform: scale(2.5);
        opacity: 0;
        box-shadow: inset #3BD788 0 0 0 1px
    }
}

@keyframes live-logo-grow {
    50% {
        box-shadow: inset #3BD788 0 0 0 1px
    }
    100% {
        -webkit-transform: scale(2.5);
        transform: scale(2.5);
        opacity: 0;
        box-shadow: inset #3BD788 0 0 0 1px
    }
}

@-webkit-keyframes hero-fade {
    100% {
        opacity: 1
    }
}

@keyframes hero-fade {
    100% {
        opacity: 1
    }
}

.livelanding [role="banner"] {
    top: 0;
    left: 0;
    right: 0;
    z-index: 1002;
    position: absolute
}

.live-landing {
    color: #628ca7;
    font-size: 1.1em;
    overflow: hidden
}

.live-landing h1, .live-landing h2 {
    font-family: Lato, "Helvetica Neue", sans-serif;
    font-weight: 300;
    color: #23616d
}

.live-landing .has-separator::before {
    content: '';
    display: block;
    border-bottom: 1px solid #caeaf6;
    max-width: 400px;
    width: 80%;
    margin: 4.854rem 0;
    margin-left: auto;
    margin-right: auto
}

@media only screen and (max-width: 481px) {
    .live-landing .has-separator::before {
        max-width: 5rem;
        margin: 1.618rem auto
    }
}

.live-landing .layout-hero {
    background-color: #113f50;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 660px;
    position: relative
}

@media only screen and (min-width: 481px) {
    .live-landing .layout-hero {
        margin-bottom: 18rem
    }
}

@media only screen and (max-width: 481px) {
    .live-landing .layout-hero {
        height: 100vh;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center
    }
}

.live-landing .layout-hero .top {
    z-index: 10;
    position: relative
}

.live-landing .layout-hero h1 {
    color: #fff
}

.live-landing .layout-hero__text {
    margin-top: 1.618rem;
    font-size: 1.1em;
    max-width: 610px;
    margin: 0 auto;
    color: rgba(206, 242, 255, 0.58)
}

.live-landing .live-logo {
    color: #3BD788;
    width: 2em;
    height: 2em;
    margin: 0 auto 1.618rem;
    font-size: 2.6em;
    position: relative
}

.live-landing .live-logo .live-logo__shield {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    height: 100%;
    background-color: #fff;
    border-radius: 100%;
    box-shadow: rgba(123, 255, 187, 0.15) 0 0 50px 15px, rgba(159, 255, 206, 0.1) 0 0 10px 5px
}

.live-landing .live-logo .live-logo__circle {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 100%;
    box-shadow: inset #3BD788 0 0 0 3px;
    -webkit-animation: live-logo-grow 4s 2.5s infinite ease-out;
    animation: live-logo-grow 4s 2.5s infinite ease-out
}

.live-landing .live-logo .live-logo__circle2 {
    -webkit-animation-delay: 3s;
    animation-delay: 3s
}

.live-landing .live-logo .live-logo__circle3 {
    -webkit-animation-delay: 3.5s;
    animation-delay: 3.5s
}

.live-landing__video {
    max-width: 640px;
    position: relative;
    margin: 4.854rem auto 0;
    background-color: #3BD788;
    border-radius: 6px
}

@media only screen and (max-width: 481px) {
    .live-landing__video {
        margin-top: 0
    }
}

.live-landing__video__container {
    position: relative;
    transition: -webkit-transform .2s ease;
    transition: transform .2s ease;
    transition: transform .2s ease, -webkit-transform .2s ease
}

.live-landing__video__overlay {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    text-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    transition: background-color .2s ease;
    color: #fff;
    font-weight: bold;
    border-radius: 6px;
    overflow: hidden;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background-color: rgba(59, 215, 136, 0.9);
    z-index: 20
}

.live-landing__video__overlay .icon {
    font-size: 3rem
}

.live-landing__video__overlay:hover {
    text-decoration: none;
    background-color: #3BD788
}

.live-landing__video video {
    width: 100%;
    border-radius: 6px;
    display: block;
    position: relative;
    z-index: 10;
    box-shadow: rgba(0, 0, 0, 0.1) 0 5px 10px, rgba(0, 0, 0, 0.2) 0 10px 30px
}

.live-landing__video--playing .live-landing__video__overlay {
    pointer-events: none;
    opacity: 0
}

@media only screen and (min-width: 880px) {
    .live-landing__video--playing .live-landing__video__container {
        -webkit-transform: scale(1.5);
        transform: scale(1.5)
    }

    .live-landing__video--playing video {
        box-shadow: rgba(0, 0, 0, 0.2) 0 5px 30px
    }
}

.live-landing .layout-feature h1 {
    font-size: 2.4rem;
    margin-bottom: .5rem
}

.live-landing .layout-feature small {
    font-size: 0.73333em
}

.live-landing .layout-feature .btn.mode--link {
    padding-left: 0
}

.live-landing .layout-feature__list {
    margin-bottom: 3.236rem;
    color: rgba(32, 78, 87, 0.9)
}

.live-landing .layout-feature__figure {
    display: block
}

.live-landing .layout-feature__figure img {
    display: block
}

.live-landing .layout-feature__figure--wide img {
    margin-right: -200px;
    max-width: calc(100% + 200px)
}

.live-landing .layout-feature--reverse .layout-feature__figure--wide img {
    margin-left: -200px
}

@media only screen and (max-width: 1024px) {
    .live-landing .layout-feature h1 {
        font-size: 1.86667rem
    }
}

@media only screen and (max-width: 768px) {
    .live-landing .layout-feature .layout-feature__figure {
        -webkit-flex: 3;
        -ms-flex: 3;
        flex: 3
    }
}

@media only screen and (max-width: 481px) {
    .live-landing .layout-feature .layout-feature__figure, .live-landing .layout-feature .layout-feature__figure.layout-feature__figure--reverse {
        margin: 0 auto
    }

    .live-landing .layout-feature .layout-feature__figure img, .live-landing .layout-feature .layout-feature__figure.layout-feature__figure--reverse img {
        margin: 0 auto;
        max-width: 100%
    }

    .live-landing .layout-feature .layout-feature__list {
        font-size: .9em
    }
}

.live-landing .layout-outro .live-logo {
    font-size: 2em;
    margin-bottom: 1.618rem
}

.live-landing .layout-outro .live-logo__shield {
    border: 2px solid #3BD788
}

.live-landing__legal {
    font-size: .8em;
    color: #668ea7
}

@media only screen and (min-width: 481px) {
    .live-landing__call-moderator {
        margin-bottom: 11.326rem
    }
}

.live-landing__call-moderator .layout-feature__text__content {
    max-width: 400px
}

.live-landing__call-moderator .layout-feature__figure img {
    max-height: 642px
}

@media only screen and (max-width: 481px) {
    .live-landing__call-moderator {
        text-align: left
    }
}

.live-landing__participate {
    background-color: rgba(0, 170, 245, 0.05);
    margin: 4.854rem 0 8.09rem
}

.live-landing__participate .layout-feature__figure img {
    margin-top: -100px
}

@media only screen and (min-width: 768px) {
    .live-landing__participate .layout-feature__figure {
        -webkit-flex: 7;
        -ms-flex: 7;
        flex: 7
    }
}

.live-landing__participate .layout-feature__list .icon {
    color: #F3B109
}

@media only screen and (max-width: 768px) {
    .live-landing__participate {
        margin-bottom: 8.09rem
    }
}

@media only screen and (max-width: 481px) {
    .live-landing__participate {
        margin: 1.618rem 0
    }
}

.live-landing__invite-team .layout-feature__list .icon {
    color: #3BD788
}

.live-landing__dashboard {
    margin-bottom: 11.326rem
}

.live-landing__dashboard .layout-feature__list .icon {
    color: #1DABF2
}

.live-landing__dashboard .layout-feature__figure img {
    margin-top: -46px
}

@media only screen and (max-width: 481px) {
    .live-landing__dashboard {
        margin-bottom: 1.618rem
    }
}

@media only screen and (min-width: 481px) {
    .live-landing__devices.layout-feature--reverse .layout-feature__figure--wide img {
        margin-left: -250px
    }
}

.live-landing__comparison-table {
    width: 100%;
    font-size: .9em;
    color: #204e57;
    margin-bottom: 4.854rem;
    table-layout: fixed
}

.live-landing__comparison-table th, .live-landing__comparison-table td {
    padding: 1em;
    font-weight: normal
}

.live-landing__comparison-table sup {
    color: #2ace7b;
    margin-left: 2px
}

.live-landing__comparison-table th {
    font-size: .9em;
    padding: .7em 1em
}

.live-landing__comparison-table th .icon {
    font-size: 2em;
    margin-right: .3em;
    opacity: .5;
    position: relative;
    top: -2px
}

.live-landing__comparison-table td {
    border-top: 1px solid #caeaf6;
    font-size: .8em
}

.live-landing__comparison-table tr:last-child td {
    border-bottom: 1px solid #caeaf6
}

.live-landing__comparison-table tr td:last-child {
    font-style: italic;
    padding-left: 2em;
    border-top: 0;
    border-bottom: 0;
    font-size: 1em
}

.live-landing__comparison-table .custom-icon--checkmark-circle {
    color: #3BD788;
    font-size: 1.5em;
    position: relative;
    top: -1px
}

.live-landing__comparison-table .limited {
    color: #8FB1C7
}

.live-landing__comparison-table .limited .custom-icon--checkmark-circle {
    color: #F3B109;
    margin-right: 3px
}

@media only screen and (max-width: 481px) {
    .live-landing__comparison-table {
        margin-left: -1rem;
        width: calc(100% + 1rem)
    }
}

.verify-email-container {
    color: #668ea7
}

.verify-email-container.verify-email-container--verified h1 {
    margin-bottom: 1.618rem;
    font-size: 2.8rem
}

.verify-email-container.verify-email-container--verified .box {
    max-width: 26.66667rem;
    width: 90%;
    margin: 0 auto
}

.verify-email-container .box {
    color: rgba(102, 142, 167, 0.9);
    font-size: 1.2em
}

.verify-email-container .box.show-orgs {
    padding-top: 6.472rem;
    background-image: url("/images/orgs-list-faded.svg");
    background-repeat: no-repeat;
    background-size: 97%;
    background-position: 0.5em 1.4em
}

.verify-email-container .box strong {
    color: rgba(32, 78, 87, 0.9);
    font-size: 1.1em
}

.acceptnewterms [role="main"] header {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    text-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    height: 9.708rem
}

.acceptnewterms [role="main"] h1 {
    text-align: center;
    margin-bottom: 0
}

.acceptnewterms .text-block {
    font-size: 1.06667rem;
    margin-bottom: 3.236rem
}

.acceptnewterms .accept-terms-controls {
    margin-bottom: 2em;
    text-align: center
}

@media only screen and (max-width: 319px) {
    .acceptnewterms [role="main"] h1 {
        font-size: 1.6em;
        margin-bottom: .5rem
    }
}

.webapplayout [role="banner"] {
    padding: 0 0.8rem 0 calc(1rem + 2px);
    background-color: #fff;
    box-shadow: inset rgba(112, 182, 236, 0.3) 0 -1px 0
}

.webapplayout .navigation .navigation__main .logo {
    padding-right: 1rem
}

.webapplayout .navigation .navigation__misc .dropdown {
    min-width: 10rem;
    text-align: left
}

.webapplayout .navigation .navigation__teams .dropdown__trigger {
    font-weight: normal;
    font-size: .9rem
}

.webapplayout .navigation .navigation__teams .dropdown__trigger.dropdown--open {
    color: #204e57
}

@media only screen and (max-width: 481px) {
    .webapplayout .navigation .navigation__teams .dropdown__trigger .icon {
        position: relative;
        top: -2px
    }
}

.webapplayout .navigation .navigation__teams .team__name {
    display: inline-block;
    max-width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    vertical-align: bottom
}

@media only screen and (max-width: 950px) {
    .webapplayout .navigation .navigation__teams .team__name {
        max-width: 100px
    }
}

@media only screen and (max-width: 481px) {
    .webapplayout .navigation .navigation__teams .team__name {
        display: none
    }
}

.webapplayout .navigation .navigation__teams .team__role__preposition {
    color: #8FB1C7
}

.webapplayout .navigation .navigation__teams .teams__add-new .btn {
    width: 100%;
    padding: .4em
}

.webapplayout .navigation .navigation__mobile .navigation__teams {
    padding-top: 0;
    padding-bottom: 0;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.webapplayout .navigation .navigation__mobile .dropdown__trigger {
    padding: 1em .5em
}

.webapplayout .navigation .navigation__mobile .add-member-trigger {
    margin: 0
}

.webapplayout .navigation__settings {
    padding: 15px 10px
}

.add-new-user-dropdown {
    padding: 10px 0;
    max-width: 350px
}

.add-new-user-dropdown form {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

.add-new-user-dropdown input[type="submit"] {
    min-width: 122px;
    text-align: right
}

.add-new-user-dropdown input[type="email"] {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding-left: 10px;
    margin: 0;
    font-size: 0.93333rem
}

.add-new-user-dropdown__explanation {
    color: #999;
    font-size: 0.86667em;
    padding: 5px 10px 0;
    margin: 10px 0 0;
    border-top: 1px solid #eee
}

.webapp-auth {
    text-align: center;
    padding-top: 5.236rem;
    width: 100%
}

.webapp-auth h1 {
    margin: 0;
    font-size: 2.13333rem;
    line-height: 1.1;
    margin-bottom: .3em
}

.webapp-auth h2 {
    font-size: 1.06667rem;
    color: #668ea7
}

.webapp-auth__titling {
    font-size: 1.2em;
    color: #668ea7;
    max-width: 34.66667rem;
    margin-right: auto;
    margin-left: auto
}

.webapp-auth__container {
    max-width: 20rem;
    margin: 0 auto;
    width: 90%
}

.webapp-auth__nav {
    font-size: 1.1rem;
    margin: 1.618rem auto
}

.webapp-auth__button-list {
    list-style: none;
    padding: 0;
    margin: 0
}

.webapp-auth__button-list__loading-item {
    min-height: 50px;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center
}

.webapp-auth__button-list li .btn {
    width: 100%
}

.webapp-auth__button-list li:not(:last-child) {
    margin-bottom: 0.809rem
}

.webapp-auth__figure {
    margin-top: -50px;
    margin-bottom: 0.5em;
}

@media only screen and (max-width: 481px) {
    .webapp-auth__figure {
        /*display: none*/
    }
}

.request-access-container .custom-icon--checkmark-large {
    font-size: 6rem;
    color: #3BD788;
    margin-bottom: 2rem
}

.request-access-container .settings-form__feedback {
    margin: 0;
    padding: 0;
    font-size: 1.1em
}

.notification-trigger {
    transition: color .2s ease;
    position: relative
}

.notification-trigger:hover {
    text-decoration: none
}

.notification-trigger.notification-trigger--active .icon {
    color: #576066
}

.notification-trigger .icon {
    -webkit-transform-origin: center top;
    transform-origin: center top
}

.notification-trigger.notification-trigger--unread .icon {
    color: #0c8fd0
}

.notification-trigger.notification-trigger--unread:hover .icon {
    color: #096ea0
}

.notification-trigger .notifications__unread-count {
    text-indent: -999em;
    width: 6px;
    height: 6px;
    position: absolute;
    right: 10px;
    top: 10px;
    border-radius: 100%
}

.notifications-dropdown {
    padding: 0;
    width: 400px;
    height: 80vh
}

@media only screen and (max-width: 410px) {
    .notifications-dropdown {
        width: 100% !important;
        left: 0 !important
    }
}

.notifications {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    background-color: #fff;
    height: 100%;
    text-align: left;
    overflow: hidden;
    border-radius: 4px
}

@media only screen and (max-width: 481px) {
    .notifications {
        max-width: 95%
    }
}

.notifications--show {
    -webkit-transform: none;
    transform: none;
    box-shadow: rgba(0, 0, 0, 0.1) -1px 0 7px
}

.notifications__blank {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    text-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 5%;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    color: #204e57
}

.notifications__blank h2 {
    font-family: Lato, "Helvetica Neue", sans-serif;
    font-weight: 300;
    margin-bottom: 0
}

.notifications__blank p {
    color: #888;
    font-size: 1.1em
}

.notifications__header {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    height: 46px;
    padding: 0 1rem;
    line-height: 1.4;
    border-bottom: 1px solid #eee;
    color: #204e57
}

.notifications__header h2 {
    font-family: Lato, "Helvetica Neue", sans-serif;
    font-size: 1.1rem;
    margin: 0;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.notifications__header .notifications__unread-count {
    margin-right: .5rem
}

.notifications__header .notifications__clear {
    color: #8FB1C7;
    font-weight: normal;
    font-size: .9em
}

.notifications__load-more {
    display: block;
    padding: 1em .5em;
    text-align: center;
    color: #999
}

.notifications__load-more:hover {
    color: #737373;
    background-color: #fafafa
}

.notifications__unread-count {
    cursor: default;
    background-color: #1DABF2;
    background-image: linear-gradient(#35b4f3, #11affe);
    display: inline-block;
    color: #fff;
    border-radius: 3px;
    font-weight: bold;
    line-height: 1.6em;
    width: 1.5em;
    text-align: center;
    font-size: .9em;
    position: relative;
    top: -1px
}

.notifications__close {
    color: rgba(32, 78, 87, 0.6);
    transition: color .2s ease;
    cursor: pointer
}

.notifications__close:hover {
    color: #204e57
}

@media only screen and (max-width: 481px) {
    .notifications__close {
        font-size: .9rem
    }
}

.notifications__list {
    list-style: none;
    padding: 0;
    margin: 0;
    overflow-y: scroll;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-overflow-scrolling: touch
}

.notification {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 10px 1rem;
    font-size: .9em;
    border-bottom: 1px solid #eee;
    position: relative
}

.notification--linked {
    cursor: pointer
}

.notification--linked:hover {
    background-color: rgba(143, 177, 199, 0.08)
}

.notification--linked:hover .notification__actions, .notification--linked:hover .notification__meta {
    color: rgba(32, 78, 87, 0.7)
}

@media only screen and (max-width: 481px) {
    .notification {
        padding: 15px 1rem
    }
}

.notification--new::after {
    position: absolute;
    display: block;
    top: 7px;
    left: 7px;
    content: '';
    width: 6px;
    height: 6px;
    background-color: #1DABF2;
    border-radius: 100%
}

.notification--unvisited {
    background-color: #f9f9f9
}

.notification .notification__explanation {
    margin: .5rem 0 1rem;
    font-size: .9em;
    color: #555;
    padding-right: 1rem
}

.notification .notification__tools {
    margin: .5rem 0;
    font-size: .9em;
    color: #8FB1C7
}

.notification .notification__tools .btn {
    font-size: 1.1em;
    padding: .4em 1em;
    max-width: 90%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.notification .notification__tools .btn .icon {
    margin-right: 0;
    font-size: .8em;
    margin-left: 4px
}

.notification ul.notification__tools {
    list-style: none;
    padding: 0
}

.notification ul.notification__tools li:not(:last-child) {
    margin-bottom: 5px
}

.notification ul.notification__tools .dropdown__trigger.btn {
    color: rgba(32, 78, 87, 0.8);
    padding-left: .5em;
    padding-right: .5em
}

.notification ul.notification__tools .dropdown__trigger.btn .icon {
    margin: 0;
    font-size: 1em
}

.notification .notification__object {
    font-style: italic
}

.notification .notification__content {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    margin-left: 1rem
}

.notification .notification__meta {
    color: #8FB1C7;
    font-size: .9em
}

@media only screen and (max-width: 481px) {
    .notification .notification__avatar .avatar {
        width: 32px;
        height: 32px
    }
}

.notification .notification__actions {
    color: #5081a0
}

.notification .notification__actions strong, .notification .notification__actions a {
    color: #204e57
}

.notification .notification__actions a {
    font-weight: bold
}

.notification .notification__text h1, .notification .notification__text h2, .notification .notification__text h3, .notification .notification__text h4, .notification .notification__text h5, .notification .notification__text h6 {
    font-family: Lato, "Helvetica Neue", sans-serif;
    font-weight: bold;
    font-size: 1em;
    margin-bottom: 0;
    margin-top: .5em
}

.notification .notification__text p, .notification .notification__text ul, .notification .notification__text ol, .notification .notification__text blockquote {
    margin-bottom: 5px
}

.notification .notification__text .mention--you {
    display: inline;
    background: transparent;
    box-shadow: none;
    padding: 0
}

.notification .notification__text a {
    display: inline-block;
    max-width: 65%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    line-height: .9
}

.notification .notification__text > :last-child {
    margin-bottom: 0
}

.notification .notification-request-access-tools button {
    min-width: 150px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0
}

.notification .notification-request-access-tools button + .btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    margin-left: -3px
}

.changenotificationsettings body {
    height: 60vh;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    text-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-size: 1.2em
}

.changenotificationsettings .change-notifications-settings-container {
    padding: 2em 4em;
    color: #668ea7
}

.changenotificationsettings h1 {
    font-size: 2.13333rem;
    margin-bottom: 0
}

.changenotificationsettings .btn {
    min-width: 270px
}

.changenotificationsettings .icon {
    position: relative;
    top: -.1em;
    margin-right: .1em
}

.changenotificationsettings .icon-check {
    color: #3BD788
}

.changenotificationsettings .icon-cross {
    color: #FF6E70
}

.changenotificationsettings .logo-container {
    margin-top: 3.236rem
}

.changenotificationsettings .logo-container .lookback-logo .logo__swirl, .changenotificationsettings .logo-container .lookback-logo .logo__text {
    fill: #8FB1C7
}

.changenotificationsettings .logo-container .lookback-logo:hover .logo__swirl, .changenotificationsettings .logo-container .lookback-logo:hover .logo__text {
    fill: #6d99b6
}

.changenotificationsettings .logo-container .lookback-mark {
    width: 4em;
    height: 2em;
    fill: #999
}

.changenotificationsettings .logo-container .lookback-mark:hover {
    fill: #C0392B
}

.recordings-blank-slate h1 {
    font-size: 2.4em;
    font-weight: normal;
    font-style: italic;
    margin-bottom: 3.236rem;
    margin-top: 3.236rem;
    text-align: center
}

.dashboard-controls {
    display: -webkit-flex !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    position: absolute;
    top: 58px;
    right: 0;
    left: 0;
    padding: 10px 20px 0 15px;
    transition: opacity .2s, -webkit-transform .25s ease-out;
    transition: transform .25s ease-out, opacity .2s;
    transition: transform .25s ease-out, opacity .2s, -webkit-transform .25s ease-out
}

.dashboard-controls.off-screen {
    -webkit-transform: translate(0, -25%);
    transform: translate(0, -25%);
    opacity: 0
}

.dashboard-controls.controls--sidebar {
    left: 240px
}

.dashboard-controls.controls--list-view {
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.dashboard-controls.controls--grid-view {
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end
}

@media only screen and (max-width: 481px) {
    .dashboard-controls {
        position: static;
        padding: 10px 3%;
        height: auto
    }
}

.dashboard-controls__actions {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    transition: all .1s ease-out;
    color: #999
}

@media only screen and (max-width: 481px) {
    .dashboard-controls__actions {
        display: none
    }
}

.dashboard-controls__actions #remove-multiple .icon-cross {
    position: absolute;
    color: #fff;
    top: 14px;
    font-size: 0.7rem;
    left: 23px;
    z-index: 2
}

.dashboard-controls__actions.dashboard-controls__actions--dimmed {
    opacity: .5;
    pointer-events: none;
    -webkit-transform: translate(0, 1px);
    transform: translate(0, 1px)
}

.dashboard-controls__actions .dashboard__confirmation .btn {
    margin-left: .5rem
}

.dashboard-controls__actions .action-group {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin-right: 1.5rem
}

.dashboard-controls__actions .action-group > .action__button:first-child {
    border-radius: 3px 0 0 3px
}

.dashboard-controls__actions .action-group > .action__button.last {
    border-radius: 0 3px 3px 0;
    border-right-width: 1px
}

.dashboard-controls__actions .action-group .action__button {
    border-color: #d7d7d7;
    box-shadow: rgba(0, 0, 0, 0.05) 0 1px 2px;
    padding: .4em 1em;
    font-size: 1.1em;
    border-right-width: 0;
    border-radius: 0;
    color: #7d7d7d
}

.dashboard-controls__actions .action-group .action__button[disabled] {
    opacity: .7;
    color: rgba(153, 153, 153, 0.6)
}

.dashboard-controls__actions .action-group .action__button:not([disabled]):hover, .dashboard-controls__actions .action-group .action__button.active {
    color: #666666
}

.dashboard-controls__actions .action-group .action__button:active, .dashboard-controls__actions .action-group .action__button.active {
    background-color: #f7f7f7;
    color: #666666
}

.dashboard-controls__actions .action-group .action__button .icon {
    pointer-events: none
}

.dashboard-controls__actions .action__link {
    color: #737373;
    transition: color .15s ease-out;
    padding: 0 .5rem;
    font-weight: bold
}

.dashboard-controls__actions .action__link:hover {
    color: #595959
}

.dashboard-controls__actions .action__link:hover .icon {
    opacity: 1
}

.dashboard-controls__actions .action__link .icon {
    font-size: 1.2rem;
    opacity: .8;
    position: relative;
    top: -1px
}

.dashboard-controls__views {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-align-items: baseline;
    -ms-flex-align: baseline;
    align-items: baseline
}

.dashboard-controls__views a {
    font-weight: bold
}

@media only screen and (max-width: 481px) {
    .dashboard-controls__views {
        width: 100%
    }
}

.dashboard-controls__views .inbox .entypo {
    font-size: 18px
}

.dashboard-controls__views .dashboard-controls__view-modes {
    margin-left: .5rem
}

@media only screen and (max-width: 481px) {
    .dashboard-controls__views .dashboard-controls__view-modes {
        display: none
    }
}

.dashboard-controls__views .dashboard-controls__view-modes a {
    color: #8FB1C7;
    display: inline-block;
    padding: 6px .6em;
    border-radius: 3px
}

.dashboard-controls__views .dashboard-controls__view-modes a:hover {
    color: #5c8dae
}

.dashboard-controls__views .dashboard-controls__view-modes a.nav--current {
    color: rgba(143, 177, 199, 0.8);
    background-color: #fff;
    box-shadow: inset rgba(153, 153, 153, 0.8) 0 1px 2px
}

.dashboard-controls__views .dashboard-controls__view-modes a .icon {
    font-size: 1.3em;
    position: relative;
    top: -1px
}

.dashboard-controls__views .list-display-label {
    color: #999
}

@media only screen and (min-width: 481px) {
    .dashboard-controls__views .list-display-label {
        display: none
    }
}

.recordings-list-dashboard {
    padding: 0 0 20px 0
}

.recordings-list-dashboard .mention--you {
    background-color: transparent;
    box-shadow: none;
    display: inline;
    padding: 0;
    color: #4299d2
}

.recordings-list-dashboard table {
    width: 100%
}

.recordings-list-dashboard table th {
    color: gray;
    font-weight: 500;
    -webkit-font-smoothing: antialiased;
    font-size: 12px;
    white-space: nowrap;
    cursor: default;
    padding: 0;
    padding-bottom: 12px;
    border-bottom: 0;
    transition: color 100ms linear;
    font-weight: 500
}

.recordings-list-dashboard table th .icon {
    font-size: 1.1rem
}

.recordings-list-dashboard table th:first-child {
    padding-left: 15px
}

.recordings-list-dashboard table th.sortable {
    cursor: pointer;
}

.recordings-list-dashboard table th.sortable .title {
    font-size: 17px;
    color: gray;
    font-weight: normal
}

.recordings-list-dashboard table th.sortable .title:hover {
    color: #C0392B
}

.recordings-list-dashboard table th.sortable .title:active {
    color: #81261d
}

.recordings-list-dashboard table th.sortable .title + .sort-arrow {
    margin-left: 0;
    top: 10px;
    left: -2px
}

.recordings-list-dashboard table th.sortable .sort-arrow {
    line-height: 14px;
    top: 0;
    color: #8f9589;
    margin-left: 2px
}

.recordings-list-dashboard table th.sortable .sort-arrow svg {
    font-size: 11px
}

.recordings-list-dashboard table th.sortable:hover {
    color: #666666
}

.recordings-list-dashboard table th.sortable:active {
    color: #4d4d4d
}

.recordings-list-dashboard table td {
    background-color: #fff;
    padding: 7px 4px;
    border-bottom: 1px solid #f1f3f1;
    color: gray;
    white-space: nowrap;
    vertical-align: middle
}

.recordings-list-dashboard table td:first-child {
    border-top-left-radius: 4px;
    padding: 7px 0;
    padding-left: 15px
}

.recordings-list-dashboard table tr.rec-row {
    border-left: 3px solid transparent;
    background-color: #fff
}

.recordings-list-dashboard table tr.rec-row.streaming.selected {
    border-left-color: #26b96f
}

.recordings-list-dashboard table tr.rec-row.streaming.selected td {
    background-color: #e1f9ed;
    color: #21a462
}

.recordings-list-dashboard table tr.rec-row.streaming td {
    color: #26b96f
}

.recordings-list-dashboard table tr.rec-row:hover:not(.selected) {
    background-color: #fbfbfb
}

.recordings-list-dashboard table tr.rec-row:hover:not(.selected) .rec-row__thumbs {
    opacity: 1
}

.recordings-list-dashboard table tr.rec-row:hover:not(.selected) td {
    background-color: #fbfbfb
}

.recordings-list-dashboard table tr.rec-row:hover:not(.selected) .rec-row__user {
    opacity: 1
}

.recordings-list-dashboard table tr.selected {
    border-left-color: #1DABF2
}

.recordings-list-dashboard table tr.selected .rec-row__name a {
    color: currentColor
}

.recordings-list-dashboard table tr.selected td {
    color: #4C6C82;
    background: #F0F9FF;
    border-bottom-color: #DFECF5
}

.recordings-list-dashboard table tr.selected td.info-text .relative {
    padding-left: 6px
}

.rec-row input[type="text"] {
    margin: 0;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    border: 0;
    background-color: transparent;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding-right: 25%
}

.rec-row .comments-bubble {
    font-weight: 500;
    background-color: #e9e9e9;
    color: #666;
    display: inline-block;
    border-radius: 4em;
    padding: 0 0.5em;
    font-size: .9em;
    line-height: 19px
}

.rec-row .rec-row__user {
    opacity: .8
}

.rec-row .unknown-user {
    display: inline-block;
    max-width: 100px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    vertical-align: middle
}

.rec-row.streaming .rec-row__name .rec-row__link {
    font-weight: bold;
    color: #26b96f
}

.rec-row__name {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    padding-right: 2px
}

.rec-row__name a {
    color: #666666
}

.rec-row__name.new .rec-row__link {
    color: #404040;
    font-weight: bold
}

.rec-row__link:hover {
    text-decoration: underline
}

.rec-row__thumbs {
    width: 42px;
    height: 27px;
    box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
    overflow: hidden;
    border-radius: 2px;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    opacity: .9
}

.rec-row__thumbs img {
    vertical-align: top
}

.rec-row__actions {
    position: absolute;
    right: 5px;
    top: 1px
}

.rec-row__actions .component-subscription {
    position: relative;
    z-index: 20
}

.rec-row__actions .rec-row__action {
    cursor: pointer;
    transition: color 150ms ease-out;
    color: gray
}

.rec-row__actions .rec-row__action:hover {
    color: #666666
}

.rec-row__actions .rec-row__action:last-child {
    margin-right: 0
}

.rec-row__actions--tools {
    font-size: 15px
}

.rec-row__actions--tools .rec-row__action {
    display: none;
    margin-right: 5px
}

.rec-row__actions--tools .rec-row__action.favorite.active {
    color: #F1C330;
    display: inline-block
}

tr.selected .rec-row__thumbs, tr.selected:hover .rec-row__thumbs {
    opacity: 1
}

tr:hover .rec-row__actions--tools .rec-row__action {
    display: inline-block
}

.rec-row__app {
    width: 34px;
    height: 42px
}

.rec-row__app img {
    vertical-align: middle;
    margin-right: 8px;
    height: 27px;
    width: 27px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    min-width: 27px
}

.rec-row__app img.unrendered {
    border-radius: 6px
}

.rec-row__device .icon {
    font-size: 1.1rem;
    margin-right: 4px;
    vertical-align: sub
}

.rec-row__device__type {
    display: none
}

@media only screen and (max-width: 1281px) {
    .rec-row__device__type {
        display: inline
    }

    .rec-row__device__name {
        display: none
    }
}

@media only screen and (max-width: 1200px) {
    .rec-row__device__type, .rec-row__device__name {
        display: none
    }

    .rec-row__device {
        text-align: center
    }

    .rec-row__device .icon {
        margin-right: 0
    }
}

.rec-row__tags__item {
    color: #fff;
    background-image: linear-gradient(#D1DDAF, #C5D390);
    box-shadow: inset 0 -1px 0px #b8c976, 0 1px 1px rgba(0, 0, 0, 0.1);
    display: inline-block;
    margin: 1px 5px 0 0;
    padding: 1px 6px 2px;
    border-radius: 4px
}

.rec-row__tags__item:nth-child(n+4) {
    display: none
}

.rec-row__tags__more {
    display: none
}

.rec-row__tags__more:nth-child(n+5) {
    display: inline-block
}

@-webkit-keyframes play-pulsate {
    from {
        opacity: .5;
        -webkit-transform: scale(0.8);
        transform: scale(0.8)
    }
    to {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes play-pulsate {
    from {
        opacity: .5;
        -webkit-transform: scale(0.8);
        transform: scale(0.8)
    }
    to {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

.recordings-list {
    width: 100%;
    margin: 0;
    color: #6d99b6;
    font-size: 0.93333rem
}

.recordings-list__table {
    display: table;
    width: 100%
}

.recordings-list__list {
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: #fff;
    overflow: hidden;
    display: table-row-group;
    box-shadow: rgba(114, 182, 234, 0.2) 0 2px 30px
}

.recordings-list__sort {
    cursor: pointer;
    transition: color .2s ease;
    display: inline-block
}

.recordings-list__sort .recordings-sort-arrow {
    font-size: .8em
}

.recordings-list__sort:hover {
    color: #5081a0
}

.recordings-list__row {
    display: table-row
}

.recordings-list__row:hover {
    background-color: #FBFBFB;
    color: #204e57
}

.recordings-list__row:hover .avatar {
    opacity: 1
}

.recordings-list__row:hover .recordings-list__copy-url a {
    opacity: 1
}

.recordings-list__row:hover .recordings-list__recording-type {
    color: #204e57
}

.recordings-list__row:hover .avatar--initials::after {
    color: rgba(32, 78, 87, 0.9);
    border-color: rgba(32, 78, 87, 0.7)
}

.recordings-list__row:hover .recordings-list__link {
    color: #204e57
}

.recordings-list__row:hover .recordings-list__thumbs {
    opacity: 1
}

.recordings-list__row:first-child .recordings-list__cell__group::before {
    display: none
}

.recordings-list__row .recordings-list__cell:first-child {
    position: relative
}

.recordings-list__row .recordings-list__cell:first-child::before {
    content: '';
    display: block;
    position: absolute;
    left: -1px;
    top: 0;
    bottom: 0;
    width: 3px;
    background-color: #3BD788;
    pointer-events: none;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    transition: -webkit-transform .15s ease;
    transition: transform .15s ease;
    transition: transform .15s ease, -webkit-transform .15s ease
}

.recordings-list__row--selected .recordings-list__cell:first-child::before {
    -webkit-transform: none;
    transform: none
}

.recordings-list__row--selected, .recordings-list__row--selected:hover {
    background-color: rgba(59, 215, 136, 0.1);
    color: #15643c
}

.recordings-list__row--selected .recordings-list__link, .recordings-list__row--selected .recordings-list__recording-type, .recordings-list__row--selected:hover .recordings-list__link, .recordings-list__row--selected:hover .recordings-list__recording-type {
    color: #15643c
}

.recordings-list__row .recordings-list__device .icon {
    font-size: 1.3em;
    position: relative;
    top: -.2ex;
    margin-right: 3px
}

@media only screen and (max-width: 1055px) {
    .recordings-list__row .recordings-list__device .recordings-list__device__name {
        display: none
    }
}

.recordings-list .recordings-list__cell {
    display: table-cell;
    vertical-align: middle
}

.recordings-list .recordings-list__cell__group {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    padding: 0 0.75rem;
    height: 45px
}

.recordings-list .recordings-list__cell__group::before {
    display: block;
    content: '';
    height: 1px;
    background-color: rgba(179, 217, 245, 0.3);
    position: absolute;
    left: 0;
    right: 0;
    top: 0
}

.recordings-list .recordings-list__cell:first-child .recordings-list__cell__group::before {
    left: 0.75rem
}

.recordings-list .recordings-list__cell:last-child .recordings-list__cell__group {
    padding-right: 1.5rem
}

.recordings-list .recordings-list__cell:last-child .recordings-list__cell__group::before {
    right: 0.75rem
}

@media only screen and (max-width: 1281px) {
    .recordings-list .recordings-list__user {
        display: none
    }
}

.recordings-list .recordings-list__live-state {
    width: 250px
}

.recordings-list .recordings-list__live-state .icon {
    position: relative;
    top: -1px
}

.recordings-list .recordings-list__live-state.participant-waiting .recordings-list__label {
    color: #204e57
}

.recordings-list .recordings-list__live-state.no-participant .icon, .recordings-list .recordings-list__live-state.participant-missing .icon {
    color: #F1C330
}

.recordings-list .recordings-list__live-state.recording .recordings-list__label {
    color: #204e57
}

.recordings-list .recordings-list__live-state.recording .icon {
    color: #204e57;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-animation: play-pulsate .7s infinite alternate ease-out;
    animation: play-pulsate .7s infinite alternate ease-out
}

.recordings-list .recordings-list__live-state.call-failed .icon {
    color: #FF6E70
}

.recordings-list .recordings-list__label {
    font-style: italic
}

.recordings-list__header {
    display: table-row;
    color: #204e57;
    transition: color .15s ease-out;
    font-weight: bold
}

.recordings-list__header .recordings-list__cell {
    padding-left: 0.75rem;
    padding-bottom: 0.375rem
}

.recordings-list__header .icon {
    font-size: 1rem;
    position: relative;
    margin-right: 5px;
    top: -1px
}

.recordings-list__header .recordings-list__checkbox label {
    padding-bottom: 0;
    padding-top: 0
}

.recordings-list .recordings-list__list .recordings-list__row:first-child .recordings-list__cell:first-child {
    border-top-left-radius: 8px
}

.recordings-list .recordings-list__list .recordings-list__row:first-child .recordings-list__cell:last-child {
    border-top-right-radius: 8px
}

.recordings-list .recordings-list__list .recordings-list__row:last-child .recordings-list__cell:first-child {
    border-bottom-left-radius: 8px
}

.recordings-list .recordings-list__list .recordings-list__row:last-child .recordings-list__cell:last-child {
    border-bottom-right-radius: 8px
}

.recordings-list .recordings-list__checkbox {
    text-align: center;
    padding-left: 0;
    width: 40px
}

.recordings-list .recordings-list__checkbox > label {
    padding: 7px;
    cursor: pointer
}

.recordings-list .recordings-list__checkbox input[type="checkbox"], .recordings-list .recordings-list__checkbox .fancy-checkbox .fancy-checkbox__box {
    margin: 0;
    top: auto;
    cursor: pointer
}

.recordings-list__recording-type {
    margin-right: 0.375rem;
    font-size: .85em;
    color: rgba(153, 153, 153, 0.8)
}

.recordings-list__recording-type .icon {
    position: relative;
    top: -.3ex
}

.recordings-list__thumbs {
    display: inline-block;
    overflow: hidden;
    border-radius: 3px;
    height: 32px;
    width: 52px;
    opacity: .9;
    white-space: nowrap
}

.recordings-list__thumbs img {
    vertical-align: top;
    width: 25px
}

.recordings-list__load-more__indicator {
    font-weight: normal;
    font-style: italic
}

.recordings-list__field {
    display: inline-block;
    max-width: 280px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap
}

.recordings-list__link {
    color: #5081a0
}

.recordings-list__link:hover {
    color: #3f657e
}

.recordings-list__copy-url--link {
    text-align: center;
    width: 1.5em
}

.recordings-list__copy-url--link a {
    color: #6d99b6;
    position: relative;
    top: -1px;
    opacity: .4
}

.recordings-list__copy-url--link a:hover {
    color: rgba(32, 78, 87, 0.8)
}

.recordings-list__copy-url--button .recordings-list__cell__group {
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end
}

.recordings-list__copy-url--button a {
    opacity: .6
}

.recordings-list .avatar {
    opacity: .8;
    position: relative;
    left: -4px
}

.recordings-list .avatar--initials::after {
    color: rgba(32, 78, 87, 0.6);
    border-color: rgba(32, 78, 87, 0.5)
}

.recordings-list .recording--new .recordings-list__name .recordings-list__link {
    font-weight: bold;
    color: #204e57
}

.recordings-list .recording--streaming .recordings-list__name .recordings-list__link {
    color: #29ca79
}

.recordings-list .recording--streaming .recordings-list__name .recordings-list__link:hover {
    color: #25b56c
}

.recordings-list .recording--processing {
    color: #a0bdd0
}

.recordings-list .recording--uploading {
    color: #a0bdd0
}

.recordings-list .mention--you {
    background-color: transparent;
    box-shadow: none;
    display: inline;
    padding: 0;
    color: #4299d2
}

.recordings-list__footer {
    text-align: center;
    color: #668ea7;
    margin-top: 1.618rem;
    font-weight: bold
}

@-webkit-keyframes processing {
    100% {
        -webkit-transform: rotate(-1turn);
        transform: rotate(-1turn)
    }
}

@keyframes processing {
    100% {
        -webkit-transform: rotate(-1turn);
        transform: rotate(-1turn)
    }
}

@-webkit-keyframes uploading {
    0% {
        -webkit-transform: translateY(100%);
        transform: translateY(100%)
    }
    90%, 100% {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%)
    }
}

@keyframes uploading {
    0% {
        -webkit-transform: translateY(100%);
        transform: translateY(100%)
    }
    90%, 100% {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%)
    }
}

@-webkit-keyframes streaming {
    0% {
        opacity: 1
    }
    50% {
        opacity: .5
    }
    100% {
        opacity: 1
    }
}

@keyframes streaming {
    0% {
        opacity: 1
    }
    50% {
        opacity: .5
    }
    100% {
        opacity: 1
    }
}

.recording__status {
    font-size: 12px;
    position: relative;
    top: -2px;
    margin: 0 8px;
    width: 15px;
    text-align: center
}

.recording__status .spinner-circular {
    vertical-align: middle
}

.recording__status.broken {
    cursor: pointer;
    color: #da7485
}

.recording__status.broken:hover {
    color: #d46074
}

.recording__status.new {
    color: #1DABF2;
    font-size: 11px;
    margin-top: 1px
}

.recording__status.streaming {
    color: #3BD788;
    font-size: 15px
}

.recording__status.processing .spinner-circular, .recording__status.uploading .spinner-circular {
    font-size: 8px;
    border-color: rgba(33, 164, 98, 0.3) rgba(33, 164, 98, 0.3) rgba(33, 164, 98, 0.3) rgba(33, 164, 98, 0.9)
}

.recording__status.processing .icon, .recording__status.uploading .icon {
    position: absolute;
    top: 6px;
    font-size: 10px;
    left: 3px;
    color: #197a49
}

.recording__status.processing .icon {
    -webkit-animation: processing .8s infinite linear;
    animation: processing .8s infinite linear
}

.dashboard {
    background-color: #F6FBFD
}

.dashboard [role="main"] {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center
}

.dashboard-root {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100%
}

.dashboard-back {
    color: #8FB1C7;
    font-weight: bold;
    font-size: 0.8rem;
    letter-spacing: 1px;
    text-transform: uppercase
}

.dashboard-back .icon {
    position: relative;
    top: -2px;
    margin-right: 4px
}

.dashboard-back:hover {
    color: #5081a0;
    text-decoration: none
}

.dashboard-block-item {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 6px;
    margin-bottom: 1.618rem;
    border: 1px solid rgba(112, 182, 236, 0.3);
    box-shadow: rgba(114, 182, 234, 0.1) 0 1px 10px;
    transition: box-shadow .2s ease, background-color .2s ease
}

.dashboard-block-item:hover {
    background-color: #fff;
    box-shadow: rgba(114, 182, 234, 0.2) 0 1px 20px
}

.dashboard-block-item:hover .dashboard-block-item__meta {
    color: #8FB1C7
}

.dashboard-block-item__extra-info {
    padding-right: 1.618rem;
    -webkit-flex: 1 0 auto;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
    text-align: right;
    font-size: 1.1em
}

.dashboard-block-item__extra-info__item:not(:first-child) {
    margin-left: 1rem
}

.dashboard-block-item__meta {
    color: rgba(143, 177, 199, 0.8);
    transition: color .2s ease;
    font-size: 0.8rem
}

.dashboard-block-item__link {
    padding: 1.318rem 1.618rem;
    padding-right: 0;
    -webkit-flex: 3;
    -ms-flex: 3;
    flex: 3;
    display: block
}

.dashboard-block-item__link:hover {
    text-decoration: none
}

.dashboard-block-item__link:hover h2 {
    color: #22606C
}

.dashboard-block-item h2 {
    font-size: 1.6rem;
    color: rgba(34, 96, 108, 0.8);
    margin: 0;
    transition: color .2s ease;
    line-height: 1.2;
    overflow: hidden;
    max-width: 90%;
    text-overflow: ellipsis;
    white-space: nowrap
}

.dashboard-block-item h2 .icon {
    margin-right: .2em;
    font-size: 1em;
    position: relative;
    top: -2px
}

.dashboard__main {
    padding: 2.118rem 2rem 3.236rem 2rem;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1
}

@media only screen and (max-width: 910px) {
    .dashboard__main {
        padding: 1.618rem 1rem
    }
}

.dashboard__main .project-type-btn .icon {
    top: -.1ex;
    font-size: 1.7em;
    margin: 0 2px
}

.dashboard__main .btn-icon {
    color: #8FB1C7;
    padding: 0 .5em
}

.dashboard__main .btn-icon:hover {
    color: #6d99b6
}

.dashboard__main .btn-icon:active {
    color: #5081a0
}

.dashboard__main .btn-icon .icon {
    position: relative;
    top: -1px
}

.dashboard__main .dashboard-new-project-btn {
    color: #6d99b6;
    margin-left: .5rem;
    position: relative;
    top: 4px
}

.dashboard__main .dashboard-new-project-btn:hover {
    color: #3f657e
}

.dashboard__main .dashboard-new-project-btn .icon {
    font-size: 1.53333rem
}

.dashboard__main .project__name {
    display: inline-block;
    max-width: 95%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap
}

.dashboard__main .project__name--can-edit {
    transition: box-shadow .3s ease;
    cursor: text
}

.dashboard__main .project__name--can-edit:hover {
    box-shadow: inset rgba(66, 159, 231, 0.3) 0 -2px 0
}

.dashboard__main .project__name--can-edit .icon-pencil {
    font-size: .8em;
    margin-left: .25em;
    color: #8FB1C7;
    opacity: .4;
    transition: opacity .3s ease;
    position: relative;
    top: -.2ex;
    cursor: pointer
}

.dashboard__main .project__name--can-edit .icon-pencil:hover {
    color: #6d99b6
}

.dashboard__main .project__name--can-edit:hover .icon {
    opacity: 1
}

.dashboard__main .project-rename-form {
    position: relative
}

.dashboard__main .project-rename-form__name {
    line-height: 34px;
    font-size: 1.4rem;
    margin: 0;
    font-weight: bold;
    width: 100%;
    padding: 0 !important;
    padding-right: 4em !important
}

.dashboard__main .project-rename-form__actions {
    position: absolute;
    top: 5px;
    right: 1ex
}

.dashboard__main .project-rename-form__cancel {
    width: 2em;
    display: inline-block;
    text-align: center;
    font-size: .8em;
    opacity: .8;
    transition: opacity .2s ease;
    color: #668ea7;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

.dashboard__main .project-rename-form__cancel:hover {
    opacity: 1
}

.dashboard__main .dashboard__load-more {
    text-align: center
}

.dashboard__main .dashboard__no-content {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    text-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-top: 3.236rem;
    color: #668ea7;
    font-size: 1.3em
}

.dashboard__main .dashboard__no-content__inner {
    max-width: 36.66667rem;
    margin: 0 auto
}

.dashboard__main .dashboard__no-content__figure {
    margin-bottom: 1.618rem
}

.dashboard__main .dashboard__no-content__figure .icon {
    font-size: 7rem
}

.dashboard__main .dashboard__no-content h1 {
    margin-bottom: .5rem;
    font-weight: normal;
    font-size: 1.73333rem
}

.dashboard__main .dashboard__wall-of-text {
    max-width: 40rem
}

.dashboard__main .dashboard__wall-of-text h1 {
    margin-bottom: 1rem;
    font-weight: 400
}

.dashboard__main .dashboard__wall-of-text p {
    color: #76969e;
    font-size: 1.33333rem
}

.dashboard__main .dashboard__wall-of-text p.subtext {
    margin-bottom: 0.8rem;
    font-size: 0.93333rem
}

.dashboard-project-dropdown .dropdown__trigger {
    padding: 0 7px;
    display: inline-block;
    font-size: 1.2em;
    position: relative;
    top: 6px
}

@media only screen and (min-width: 910px) {
    .dashboard-project-dropdown {
        display: none
    }
}

.dropdown.participate-link-dropdown {
    padding: 6px 11px;
    min-width: 240px
}

.dropdown.participate-link-dropdown input {
    margin: 0;
    width: 100%;
    color: #204e57;
    border-radius: 0
}

.dashboard-switch {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: .9em
}

.dashboard-switch .switch {
    margin: 0 .5rem
}

.dashboard-switch__option {
    font-size: 1em;
    transition: opacity .2s ease;
    opacity: .8
}

.dashboard-switch__option--active {
    opacity: 1
}

.dashboard__header {
    margin-bottom: 1.618rem;
    padding-bottom: calc(0.809rem - 1px);
    border-bottom: 1px solid rgba(112, 182, 236, 0.3);
    color: #668ea7
}

.dashboard__header p {
    font-size: 1.06667em;
    margin-bottom: 0
}

.dashboard__header input[type="search"] {
    margin-top: 0;
    margin-bottom: 0
}

.dashboard__header .dashboard-participant-btn {
    padding: .6em 1.1em
}

.dashboard__header .dashboard-participant-btn .icon {
    font-size: 1.3em
}

.dashboard__header__list {
    list-style: none;
    padding: 0;
    margin: 0
}

.dashboard__header__list li {
    display: inline-block;
    position: relative
}

.dashboard__header__list li:not(:last-child)::after {
    display: block;
    width: 1px;
    background-color: rgba(112, 182, 236, 0.3);
    right: 0;
    top: 2px;
    bottom: 2px;
    content: '';
    position: absolute
}

.dashboard__header .dashboard-title-group {
    width: 100%;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-top: -20px
}

@media only screen and (min-width: 1015px) {
    .dashboard__header .dashboard__header__title {
        width: 40%
    }
}

.dashboard__header__created-by {
    color: #8FB1C7;
    margin-right: .5rem
}

.dashboard__header__created-by .icon, .dashboard__header__created-by .avatar {
    margin: 0 5px;
    position: relative;
    top: -2px
}

.dashboard__header__created-by a {
    color: #8FB1C7
}

.dashboard__header__created-by a:hover {
    color: #4483ac
}

.dashboard__header__created-by .username {
    color: #5c7e94;
    font-weight: bold
}

.dashboard__header__action:not(:first-child) {
    margin-left: .75rem
}

.dashboard__header__action--double:not(:first-child) {
    margin-left: 1rem;
    margin-right: .5rem
}

.dashboard__header__row {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.dashboard__header__row:not(:first-child) {
    margin-top: 0.809rem
}

.dashboard__header__nav {
    margin-top: 0.809rem;
    margin-bottom: -1px
}

.dashboard__header__nav li:first-child {
    margin-left: 0
}

.dashboard__header__group {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.dashboard__header__icon {
    margin: 0 .2em;
    color: #668ea7;
    opacity: .7
}

.dashboard__header__icon .icon {
    font-size: .6em;
    vertical-align: baseline
}

.dashboard__header__icon:hover {
    opacity: 1
}

.dashboard__header h1 {
    margin: 0;
    font-size: 1.4rem;
    font-weight: bold;
    line-height: 34px
}

@media only screen and (max-width: 910px) {
    .dashboard__header h1 {
        font-size: 1.1rem
    }
}

.dashboard__header__pretitle {
    margin-bottom: 0
}

.dashboard__header--project {
    padding-bottom: calc(0.53933rem - 1px)
}

.dashboard__header--has-nav {
    padding-bottom: 0
}

.dashboard__btn {
    color: #5081a0;
    font-weight: bold;
    padding: 6px .6rem;
    transition: opacity .2s ease, background-color .15s ease;
    opacity: .9;
    -webkit-appearance: none;
    border: 0;
    background-color: transparent;
    border-radius: 4px
}

.dashboard__btn:active, .dashboard__btn:focus {
    outline: 0
}

.dashboard__btn:hover, .dashboard__btn.active {
    opacity: 1;
    text-decoration: none;
    color: #3f657e;
    background-color: rgba(143, 177, 199, 0.12)
}

.dashboard__btn:hover .icon, .dashboard__btn.active .icon {
    color: #5c8dae
}

.dashboard__btn:active, .dashboard__btn.active {
    background-color: rgba(143, 177, 199, 0.2)
}

.dashboard__btn[disabled], .dashboard__btn[disabled]:hover {
    opacity: .5;
    cursor: default;
    color: #5081a0
}

.dashboard__btn[disabled] .icon, .dashboard__btn[disabled]:hover .icon {
    pointer-events: none
}

.dashboard__btn--outline {
    border: 1px solid rgba(143, 177, 199, 0.9);
    transition: none
}

.dashboard__btn--outline.active {
    background-color: transparent;
    border-color: #5c8dae;
    color: #3f657e
}

.dashboard__btn--outline.active .icon {
    color: #5081a0
}

.dashboard__btn--outline:hover {
    border-color: #11affe;
    background-color: #11affe;
    box-shadow: rgba(17, 175, 254, 0.4) 0 3px 20px;
    color: #fff
}

.dashboard__btn--outline:hover:active {
    background-color: #0d95da;
    border-color: #0d95da;
    box-shadow: none
}

.dashboard__btn--outline:hover .icon {
    color: #fff
}

.dashboard__btn--outline[disabled]:hover {
    border: 1px solid rgba(143, 177, 199, 0.9);
    background-color: transparent;
    box-shadow: none
}

.dashboard__btn--outline[disabled]:hover, .dashboard__btn--outline[disabled]:hover .icon {
    color: #5081a0
}

.dashboard__btn--primary:hover {
    border-color: #2fe388;
    background-color: #2fe388;
    box-shadow: rgba(47, 227, 136, 0.4) 0 3px 20px;
    color: #fff
}

.dashboard__btn--primary:hover:active {
    background-color: #28c274;
    border-color: #28c274;
    box-shadow: none
}

.dashboard__btn--primary:hover .icon {
    color: #fff
}

.dashboard__btn--attention:hover {
    border-color: #fcb500;
    background-color: #fcb500;
    box-shadow: rgba(252, 181, 0, 0.4) 0 3px 20px;
    color: #fff
}

.dashboard__btn--attention:hover:active {
    background-color: #cc9408;
    border-color: #cc9408;
    box-shadow: none
}

.dashboard__btn--attention:hover .icon {
    color: #fff
}

.dashboard__btn--danger:hover {
    border-color: #ff6e70;
    background-color: #ff6e70;
    box-shadow: rgba(255, 110, 112, 0.4) 0 3px 20px;
    color: #fff
}

.dashboard__btn--danger:hover:active {
    background-color: #ff4548;
    border-color: #ff4548;
    box-shadow: none
}

.dashboard__btn--danger:hover .icon {
    color: #fff
}

.dashboard__btn .icon {
    color: #7ea5bf;
    font-size: 1.4em;
    position: relative;
    top: -0.2ex;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
}

.dashboard__btn > .icon:first-child {
    margin-right: 5px
}

.dashboard__btn > .icon:last-child {
    margin-left: 5px;
    margin-right: 0
}

.dashboard__btn .icon-chevron-down {
    top: -.1ex;
    font-size: 1.2em
}

.dashboard-highlight__toggle label {
    color: rgba(32, 78, 87, 0.7);
    margin-right: 1rem;
    transition: color .2s ease
}

.dashboard-highlight__toggle label:hover {
    color: rgba(32, 78, 87, 0.9)
}

.dashboard-settings {
    font-size: 1rem;
    width: 90%;
    margin: 1.618rem auto 4.854rem;
    max-width: 55em
}

.dashboard-settings:first-child {
    margin-top: 0
}

.dashboard-settings .project-settings__grouping {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: rgba(114, 182, 234, 0.2) 1px 0 30px;
    padding: 2rem 3rem
}

.dashboard-settings h2 {
    font-size: 1.4rem;
    margin-bottom: .5em;
    font-weight: bold
}

@-webkit-keyframes sidebar-pulse {
    100% {
        opacity: .8
    }
}

@keyframes sidebar-pulse {
    100% {
        opacity: .8
    }
}

.dashboard-sidebar {
    background-color: #124C63;
    color: #fff;
    padding: 1rem;
    min-width: 200px;
    font-size: 1.2em;
    overflow-y: scroll;
    transition: opacity .2s ease, -webkit-transform .3s ease-out;
    transition: opacity .2s ease, transform .3s ease-out;
    transition: opacity .2s ease, transform .3s ease-out, -webkit-transform .3s ease-out
}

@media only screen and (max-width: 910px) {
    .dashboard-sidebar {
        display: none
    }
}

.dashboard-sidebar.off-screen {
    opacity: 0;
    -webkit-transform: translate3d(-20px, 0, 0);
    transform: translate3d(-20px, 0, 0)
}

.dashboard-sidebar.loading {
    -webkit-animation: sidebar-pulse .5s infinite alternate linear;
    animation: sidebar-pulse .5s infinite alternate linear
}

.dashboard-sidebar .sidebar-affix.affix {
    position: fixed;
    top: 11px;
    width: calc(200px - 2rem)
}

.dashboard-sidebar .projects__list {
    list-style: none;
    padding: 0;
    margin: 0;
    margin: 0 -1rem 1.618rem
}

.dashboard-sidebar .projects__list.projects__user {
    margin-bottom: 0
}

.dashboard-sidebar .projects__list.projects__user .project-item:hover .project__unseen, .dashboard-sidebar .projects__list.projects__user .project-item.dropdown--open .project__unseen {
    display: none
}

.dashboard-sidebar .projects__list .project-item {
    position: relative;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    color: #b8c9d0;
    transition: color .2s ease;
    border-radius: 0 4px 4px 0;
    margin-right: 8px
}

.dashboard-sidebar .projects__list .project-item--highlighted {
    color: #fff;
    font-weight: bold
}

.dashboard-sidebar .projects__list .project-item .badge {
    color: #124C63
}

.dashboard-sidebar .projects__list .project-item:hover, .dashboard-sidebar .projects__list .project-item.dropdown--open {
    color: #fff
}

.dashboard-sidebar .projects__list .project-item:hover .project__icon, .dashboard-sidebar .projects__list .project-item.dropdown--open .project__icon {
    color: #7dcff8
}

.dashboard-sidebar .projects__list .project-item:hover .dropdown__trigger, .dashboard-sidebar .projects__list .project-item.dropdown--open .dropdown__trigger {
    display: inherit
}

.dashboard-sidebar .projects__list .project-item.is-dragging .project__icon .icon {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    color: #204e57
}

.dashboard-sidebar .projects__list .project-item.is-dragging .project__icon::after {
    -webkit-transform: none;
    transform: none;
    opacity: 1
}

.dashboard-sidebar .projects__list .project-item.is-dragging > * {
    pointer-events: none
}

.dashboard-sidebar .projects__list .project-item.nav--current, .dashboard-sidebar .projects__list .project-item.nav--current:hover {
    background-color: #58B2F1;
    font-weight: bold;
    box-shadow: inset #1491e9 0 -2px 0;
    color: #fff
}

.dashboard-sidebar .projects__list .project-item.nav--current .project__icon, .dashboard-sidebar .projects__list .project-item.nav--current .project-item__project, .dashboard-sidebar .projects__list .project-item.nav--current .project__unseen, .dashboard-sidebar .projects__list .project-item.nav--current .project__live-count, .dashboard-sidebar .projects__list .project-item.nav--current:hover .project__icon, .dashboard-sidebar .projects__list .project-item.nav--current:hover .project-item__project, .dashboard-sidebar .projects__list .project-item.nav--current:hover .project__unseen, .dashboard-sidebar .projects__list .project-item.nav--current:hover .project__live-count {
    color: currentColor
}

.dashboard-sidebar .projects__list .project-item.nav--current .project__live-count, .dashboard-sidebar .projects__list .project-item.nav--current:hover .project__live-count {
    background-color: #1491e9
}

.dashboard-sidebar .projects__list .project-item.nav--current .nav__bubble, .dashboard-sidebar .projects__list .project-item.nav--current:hover .nav__bubble {
    background-color: #fff;
    color: #58B2F1
}

.dashboard-sidebar .projects__list .project-item.nav--current .badge, .dashboard-sidebar .projects__list .project-item.nav--current:hover .badge {
    background-color: #1491e9;
    color: #fff
}

.dashboard-sidebar .projects__list .project-item.nav--current .dropdown__trigger {
    color: rgba(255, 255, 255, 0.8)
}

.dashboard-sidebar .projects__list .project-item.nav--current .dropdown__trigger:hover {
    background-color: #0d9ce3;
    color: #fff;
    box-shadow: inset #0b88c6 0 -1px 2px
}

.dashboard-sidebar .projects__list .project-item.nav--current .dropdown__trigger.dropdown__trigger--open {
    background-color: #0b88c6;
    color: #fff
}

.dashboard-sidebar .projects__list .project-item .project-item__project {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 6px 1rem;
    padding-right: .7rem;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    color: currentColor
}

.dashboard-sidebar .projects__list .project-item .project-item__project:hover {
    text-decoration: none
}

.dashboard-sidebar .projects__list .project__live-count {
    color: #124C63;
    background-color: #3BD788;
    display: inline-block !important;
    text-align: center;
    border-radius: 2em;
    font-size: 0.8rem;
    font-weight: bold;
    padding: 0 .5em
}

.dashboard-sidebar .projects__list .project__live-count .icon {
    margin-right: -2px;
    position: relative;
    top: -.2ex
}

.dashboard-sidebar .projects__list .project__icon {
    font-size: 1.1em;
    margin-right: 10px;
    color: #668ea7;
    position: relative;
    transition: color .3s ease
}

.dashboard-sidebar .projects__list .project__icon--live-count {
    color: #3BD788
}

.dashboard-sidebar .projects__list .project__icon .icon {
    transition: -webkit-transform 0.2s cubic-bezier(0.29, 1.26, 0.28, 1.41);
    transition: transform 0.2s cubic-bezier(0.29, 1.26, 0.28, 1.41);
    transition: transform 0.2s cubic-bezier(0.29, 1.26, 0.28, 1.41), -webkit-transform 0.2s cubic-bezier(0.29, 1.26, 0.28, 1.41);
    position: relative;
    top: -3px;
    z-index: 2
}

.dashboard-sidebar .projects__list .project__count {
    font-size: 0.86667rem;
    vertical-align: text-top;
    width: 16px;
    text-align: center;
    display: inline-block;
    font-weight: bold
}

.dashboard-sidebar .projects__list .project__count.nav__bubble {
    width: auto;
    background-color: #306884;
    color: #87c8e8
}

.dashboard-sidebar .projects__list .project__unseen {
    color: rgba(32, 78, 87, 0.4);
    transition: color .15s ease-out
}

.dashboard-sidebar .projects__list .project__name {
    display: inline-block;
    max-width: 140px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    top: -3px;
    vertical-align: middle
}

.dashboard-sidebar .projects__list .dropdown__trigger {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-size: 1.3em;
    padding: 0 10px;
    cursor: pointer;
    display: none;
    border-radius: 0 4px 4px 0
}

.dashboard-sidebar .projects__list .dropdown__trigger:hover, .dashboard-sidebar .projects__list .dropdown__trigger.dropdown__trigger--open {
    color: #204e57;
    background-color: #fff
}

.dashboard-sidebar .projects__list .dropdown {
    text-align: left;
    border-width: 0
}

.dashboard-sidebar .projects__list .dropdown [role="menuitem"] > a {
    padding-left: .7rem
}

.dashboard-sidebar .projects__list .dropdown [role="menuitem"] > a .icon {
    top: -2px;
    margin-right: .3rem
}

.dashboard-sidebar .projects__list .project-item--deleting .btn {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    width: 50%;
    border-radius: 0;
    padding: 10px
}

.dashboard-sidebar .project-form {
    width: 100%
}

.dashboard-sidebar .project-form input[type="text"] {
    margin: 0;
    border: 0;
    width: 100%;
    border-radius: 0;
    padding: 11px 1rem 12px
}

.dashboard-sidebar .project-form input[type="text"]:focus {
    box-shadow: none
}

.dashboard-sidebar .edit-project-dropdown .dropdown__arrow.dropdown__arrow--right {
    right: -10px
}

.dashboard-sidebar .new-project-help-bubble {
    color: #aaa;
    margin-left: 4px
}

.dashboard-sidebar .new-project-help-bubble:hover {
    color: #666
}

.projects-list__load-more {
    text-align: center
}

.projects-list__load-more__indicator {
    color: #668ea7;
    font-style: italic
}

.dashboard-project {
    height: 90px
}

.dashboard-project:hover .dashboard-project__users {
    opacity: 1
}

.dashboard-project:hover .dashboard-project__extra-info .avatar {
    opacity: 1
}

.dashboard-project__extra-info .avatar {
    opacity: .8;
    transition: opacity .2s ease
}

.dashboard-project__extra-info__metadata {
    color: #8FB1C7;
    text-align: right;
    font-size: 0.8rem
}

.dashboard-project__extra-info__metadata .avatar {
    float: right;
    margin-left: 1rem
}

.dashboard-project__extra-info__metadata .dashboard-project__created-by {
    line-height: 1.3;
    font-size: 1.1em
}

.dashboard-project__link:hover .dashboard-project__label, .dashboard-project__link:hover .dashboard-project__private-icon {
    opacity: 1
}

.dashboard-project__private-icon {
    color: #668ea7;
    opacity: .7;
    transition: opacity .3s ease
}

.dashboard-project__label {
    font-weight: bold;
    transition: opacity .3s ease
}

.dashboard-project__label:not(:first-child) {
    margin-left: 5px
}

.dashboard-project__label--date {
    font-weight: normal;
    color: #668ea7
}

.dashboard-project__label--date time {
    font-weight: bold
}

.dashboard-project__label--live-count {
    color: #3BD788
}

.dashboard-project__label--live-count .icon {
    position: relative;
    top: -.2ex
}

.dashboard-project__label--platform {
    text-transform: uppercase;
    font-size: .8em;
    opacity: .7
}

.dashboard-project__created-by__user {
    font-weight: bold;
    color: #5c7e94
}

.dashboard-project__user-count {
    border-left: 1px solid rgba(112, 182, 236, 0.3);
    margin-left: 1rem;
    padding-left: calc(1rem - 1px);
    color: #8FB1C7;
    font-weight: bold;
    cursor: default
}

.dashboard-project__users {
    list-style: none;
    padding: 0;
    margin: 0;
    opacity: .9;
    transition: opacity .2s ease;
    border-left: 1px solid rgba(112, 182, 236, 0.3);
    margin-left: 1rem;
    padding-left: calc(1rem - 1px)
}

.dashboard-project__users li {
    display: inline-block
}

.dashboard-project__users li:not(:last-child) {
    margin-right: -15px;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0)
}

.dashboard-project__users .avatar {
    box-shadow: #fff 0 0 0 2px;
    background-color: #fff
}

.dashboard-study {
    border: 0;
    box-shadow: rgba(114, 182, 234, 0.2) 1px 0 30px;
    border-radius: 4px;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    position: relative;
    margin-bottom: 3.236rem
}

.dashboard-study .dashboard-block-item__link {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    padding-right: 1.618rem
}

.dashboard-study__status-indicator {
    color: #8FB1C7
}

.dashboard-study__status-indicator:not(:last-child) {
    margin-right: 1em
}

.dashboard-study__status-indicator--primary {
    font-weight: bold;
    color: #3BD788
}

.dashboard-study__status-indicator strong {
    color: #6d99b6
}

.dashboard-study__description {
    color: #668ea7;
    font-size: 1rem;
    margin-bottom: 0;
    margin-top: .25em;
    line-height: 1.4
}

.dashboard-study__row {
    width: 100%;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    border-bottom: 1px solid rgba(112, 182, 236, 0.3)
}

.dashboard-study__visit-btn {
    position: absolute;
    text-transform: uppercase;
    letter-spacing: 1px;
    left: 1.618rem;
    bottom: 0;
    -webkit-transform: translate(0, 50%);
    transform: translate(0, 50%);
    z-index: 10
}

.dashboard-study__data-points {
    list-style: none;
    padding: 0;
    margin: 0;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100%
}

.dashboard-study__data-points__panel {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    text-align: center;
    color: rgba(102, 142, 167, 0.8);
    padding: 2rem 1rem 3rem;
    cursor: default;
    font-size: 0.8rem;
    position: relative
}

.dashboard-study__data-points__panel:not(:last-child)::after {
    content: '';
    display: block;
    width: 1px;
    background-color: rgba(112, 182, 236, 0.3);
    position: absolute;
    right: 0;
    top: 3rem;
    height: 3rem
}

.dashboard-study__data-points__panel--primary, .dashboard-study__data-points__panel--primary .dashboard-study__data-points__point {
    color: #3BD788
}

.dashboard-study__data-points__panel--inactive .dashboard-study__data-points__point {
    color: rgba(102, 142, 167, 0.8)
}

.dashboard-study__data-points__point {
    font-weight: bold;
    color: #22606C;
    display: block;
    font-size: 5em;
    line-height: 1;
    margin-bottom: .25em;
    transition: color .4s ease;
    letter-spacing: -2px
}

.dashboard-study__data-points small {
    font-size: 1.33333rem;
    letter-spacing: 0
}

.dashboard-study__data-points__label {
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 1px;
    white-space: nowrap
}

.dashboard-study__data-points__label .icon {
    position: relative;
    top: -.2ex
}

.dashboard-study:hover {
    box-shadow: rgba(114, 182, 234, 0.3) 1px 0 40px
}

.dashboard-study:hover h2 .icon {
    color: #1DABF2
}

.dashboard-study h2 {
    font-weight: normal;
    font-size: 1.33333rem
}

.dashboard-study h2 a {
    color: currentColor
}

.dashboard-study h2 .icon {
    color: rgba(143, 177, 199, 0.8);
    transition: color .3s ease
}

.dashboard-study h2 .custom-icon--tasks {
    font-size: 1.3em
}

.dashboard__new-study {
    text-align: center;
    color: #668ea7;
    font-size: 1.3em
}

.dashboard__new-study h1 {
    margin-bottom: 0;
    font-size: 2.13333rem
}

.dashboard__new-study .box-selector {
    margin: 4.854rem auto
}

.dashboard__new-study .box-selector__title .custom-icon--participate {
    color: #F3B109
}

.dashboard-study__share-link input[type="url"] {
    text-align: right;
    margin: 0;
    min-width: 290px
}

.studysettings [role="main"] {
    background-color: #fff
}

.projectsettings [role="main"] {
    background-color: #fff
}

.settings-modal {
    width: 90%;
    margin: 1.618rem auto 4.854rem;
    max-width: 43em;
    font-size: 1rem
}

.settings-modal h1 {
    font-size: 2.13333rem;
    margin-bottom: 1.618rem
}

.settings-modal h2 {
    font-size: 1.33333rem;
    font-weight: bold;
    margin-bottom: 0.809rem
}

.settings-modal__header {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.settings-modal__header h1 {
    margin-bottom: 0
}

.settings-modal .settings-modal-messages {
    margin-top: 3.236rem
}

.settings-modal__no-content {
    text-align: center;
    color: #668ea7;
    font-size: 1.2rem
}

.settings-modal__nav {
    font-size: 1.1em;
    margin: 1.618rem 0 0
}

.settings-modal .settings-modal__save-name {
    text-align: left;
    position: relative
}

.settings-modal .settings-modal__save-name input[type="text"] {
    width: 100%;
    margin-top: 0;
    padding-right: 4rem;
    padding-left: 0
}

.settings-modal .settings-modal__save-name__submit {
    position: absolute;
    right: 0;
    text-align: right;
    top: calc(35px - 1em);
    padding: 1em .5rem
}

.settings-modal .modal-nav {
    font-size: 1.1rem
}

@media only screen and (max-width: 700px) {
    .settings-modal .settings-modal__url {
        text-align: left
    }
}

.modal.modal-new-project {
    padding: 1.618rem 0
}

@media only screen and (max-width: 796px) {
    .modal.modal-new-project .modal__inner {
        width: 90%
    }
}

.modal.modal-new-project .horizontal-nav {
    margin-bottom: 1.618rem;
    font-size: 1.2em
}

.modal.modal-new-project h1 .icon {
    position: relative;
    top: -0.2ex;
    margin: 0 .2em;
    font-size: 1.3em
}

.modal.modal-new-project .btn.mode--link .icon {
    margin: 0 3px;
    font-size: .8em;
    position: relative;
    top: -1px
}

.modal.modal-new-project .modal-new-project__instructions {
    height: 4.854rem;
    margin: 1.618rem auto 0
}

.modal.modal-new-project .modal-new-project__instructions em {
    font-weight: bold;
    color: #204e57
}

.modal.modal-new-project .project-modal-submit {
    margin-top: 3.236rem
}

.modal.modal-new-project .project-modal-submit .btn {
    min-width: 160px
}

.modal.modal-new-project .project-modal-back .btn.mode--link {
    color: #8FB1C7
}

.modal.modal-new-project .project-modal-notice {
    text-align: center;
    color: #668ea7;
    font-size: .9em;
    padding: 0 2rem
}

.modal.modal-new-project .project-modal-notice--split {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.modal.modal-new-project .project-modal-notice--split > :first-child {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    margin: 0;
    text-align: left
}

.modal.modal-new-project .new-project-form__types h1 {
    margin-bottom: 0;
    font-size: 2.13333rem
}

.modal.modal-new-project .new-project-section {
    width: 500px;
    margin: 10vh auto 0
}

.modal.modal-new-project .new-project-section textarea {
    width: 100%
}

.modal.modal-new-project .new-project-section label, .modal.modal-new-project .new-project-section .new-project-name__text-input {
    text-align: left
}

.modal.modal-new-project .new-project-section .subtitle, .modal.modal-new-project .new-project-section .section-heading {
    margin-left: .5rem
}

.modal.modal-new-project .new-project-section .new-project-name__text-input.style--flat {
    margin-top: 0
}

.modal.modal-new-project .new-project-section .new-project-name__text-input.size--large {
    width: 100%
}

.project-types {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-bottom: 3.236rem
}

.project-types--apps {
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 1.618rem auto;
    max-width: calc(((0.5rem * 2) + 220px) * 4)
}

.project-types--apps--cap-width {
    max-width: calc(((0.5rem * 2) + 220px) * 3)
}

.project-types--apps .project-types__card {
    margin-bottom: 1rem
}

@media only screen and (max-width: 796px) {
    .project-types {
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column
    }
}

.project-types input[type="radio"], .project-types input[type="checkbox"] {
    position: absolute;
    left: -999em
}

.project-types h2 {
    font-size: 1.2rem;
    font-weight: normal;
    margin-bottom: 0;
    color: rgba(32, 78, 87, 0.9)
}

.project-types__card {
    width: 220px;
    font-weight: normal;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    margin: 0 .5rem;
    position: relative;
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 8px;
    padding: 1.618rem 0 0.809rem;
    box-shadow: inset rgba(112, 182, 236, 0.3) 0 0 0 1px, rgba(114, 182, 234, 0.2) 0 2px 20px;
    transition: box-shadow .2s ease, background-color .2s ease
}

.project-types__card:hover {
    background-color: #fff
}

.project-types__card:hover h2 {
    color: #204e57
}

.project-types__card:hover .project-types__card__icon {
    color: #668ea7
}

.project-types__card:active .project-types__card__icon {
    color: #50748a
}

.project-types__card__badge {
    position: absolute;
    right: -.8em;
    top: -.8em;
    display: inline-block;
    color: #fff;
    background-color: #20B8D1;
    border-radius: 100%;
    height: 36px;
    width: 36px;
    line-height: 32px;
    -webkit-transform: translateZ(0) scale(0.85);
    transform: translateZ(0) scale(0.85);
    box-shadow: 0 1px 7px 0 rgba(40, 144, 169, 0.35);
    box-shadow: -2px 2px 15px 0 rgba(40, 144, 169, 0.3);
    transition: box-shadow .2s ease, -webkit-transform .15s ease;
    transition: box-shadow .2s ease, transform .15s ease;
    transition: box-shadow .2s ease, transform .15s ease, -webkit-transform .15s ease
}

.project-types__card__badge:active {
    background-color: #1da5bb;
    color: rgba(255, 255, 255, 0.9)
}

.project-types__card__badge:hover {
    text-decoration: none;
    box-shadow: -2px 2px 15px 0 rgba(40, 144, 169, 0.3);
    -webkit-transform: scale(1);
    transform: scale(1);
    color: #fff
}

.project-types__card__badge .icon {
    font-size: 1.3em
}

.project-types__card__icon {
    color: rgba(102, 142, 167, 0.8);
    font-size: 5rem;
    margin-bottom: .5rem
}

.project-types__card__icon.custom-icon--plus-circle {
    font-size: 3rem;
    height: 73px
}

.project-types__card .custom-icon--checkmark-circle, .project-types__card .checkmark, .project-types__card .radio-button {
    font-size: 1.5rem;
    margin-top: .5rem;
    margin-bottom: 0
}

.project-types__card .custom-icon--checkmark-circle {
    color: #3BD788;
    opacity: 0;
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
    transition: opacity .15s ease, -webkit-transform .2s ease;
    transition: opacity .15s ease, transform .2s ease;
    transition: opacity .15s ease, transform .2s ease, -webkit-transform .2s ease
}

.project-types__card__info {
    font-size: 0.86667rem;
    color: #8FB1C7;
    margin: 0
}

.project-types__card--selected {
    background-color: #fff;
    box-shadow: inset #3BD788 0 0 0 2px, rgba(114, 182, 234, 0.2) 0 1px 15px
}

.project-types__card--selected .project-types__card__icon {
    color: #50748a
}

.project-types__card--selected .custom-icon--checkmark-circle {
    -webkit-transform: none;
    transform: none
}

.project-types__card--selected h2 {
    color: #204e57
}

.project-types__card--template {
    background-color: transparent;
    box-shadow: none;
    border: 2px dashed rgba(102, 142, 167, 0.6)
}

.project-types__card--template h2 {
    color: rgba(32, 78, 87, 0.8)
}

.project-types__card--template .custom-icon--checkmark-circle {
    display: none
}

.project-types__card--template .custom-icon--plus-circle {
    transition: -webkit-transform 0.3s cubic-bezier(0.17, 0.595, 0.34, 1.385);
    transition: transform 0.3s cubic-bezier(0.17, 0.595, 0.34, 1.385);
    transition: transform 0.3s cubic-bezier(0.17, 0.595, 0.34, 1.385), -webkit-transform 0.3s cubic-bezier(0.17, 0.595, 0.34, 1.385)
}

.project-types__card--template h3 {
    font-size: .9rem;
    color: rgba(102, 142, 167, 0.8);
    margin-bottom: 0
}

.project-types__card--template:hover {
    background-color: #f2f9fc;
    border-color: rgba(102, 142, 167, 0.8)
}

.project-types__card--template:hover h2 {
    color: #204e57
}

.project-types__card--template:hover .custom-icon--plus-circle {
    -webkit-transform: scale(1.2);
    transform: scale(1.2)
}

.project-types__card--template:active {
    background-color: #eef7fb
}

@media only screen and (max-width: 796px) {
    .project-types__card {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        padding: 1rem 1.618rem;
        margin: 0 0 .5rem;
        width: 100%
    }

    .project-types__card .project-types__card__info {
        display: none
    }

    .project-types__card .icon {
        margin-bottom: 0
    }

    .project-types__card .icon:first-child {
        margin-right: 1.5rem;
        font-size: 3rem
    }

    .project-types__card .custom-icon--checkmark-circle {
        margin-left: .5rem;
        margin-top: 0
    }
}

.dashboard-rec-ctrl {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: .95em;
    transition: opacity .2s ease
}

.dashboard-rec-ctrl--inactive {
    pointer-events: none;
    opacity: .5
}

.dashboard-rec-ctrl__action:not(:first-child) {
    margin-left: 5px
}

.dashboard-rec-ctrl__action .icon {
    font-size: 1.2em
}

.recordings-sort-btn .icon {
    margin-right: 0
}

.recordings-sort-arrow {
    transition: -webkit-transform 0.3s cubic-bezier(0.25, 0.1, 0.13, 1.4);
    transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.13, 1.4);
    transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.13, 1.4), -webkit-transform 0.3s cubic-bezier(0.25, 0.1, 0.13, 1.4);
    display: inline-block;
    width: 1em
}

.recordings-sort-arrow .icon {
    font-size: 1em
}

.recordings-sort-arrow--up {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

.sorting-dropdown.dropdown--menu {
    min-width: 130px
}

.sorting-dropdown.dropdown--menu [role="menuitem"] a {
    padding-left: 1.5rem
}

.sorting-dropdown.dropdown--menu [role="menuitem"] a .icon.icon-check {
    margin-left: -1.1rem;
    margin-right: 0;
    font-size: .9em;
    top: -.4ex
}

.sorting-dropdown.dropdown--menu [role="menuitem"] a [class*="icon-arrow"] {
    font-size: .7em
}

.blank-slate__instructions {
    max-width: 550px
}

.blank-slate--vertical .blank-slate__row {
    margin: 1.618rem auto;
    max-width: 34em
}

.blank-slate--vertical .blank-slate__item {
    border: solid rgba(143, 177, 199, 0.3);
    border-width: 0 0 1px
}

.blank-slate--vertical .blank-slate__item:first-child {
    border-width: 1px 0
}

.blank-slate--vertical .blank-slate__item__link {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 1em 2em;
    padding-left: 3em;
    opacity: .8;
    color: #6d99b6;
    text-align: left
}

.blank-slate--vertical .blank-slate__item__link p {
    margin: 0;
    line-height: 1.3
}

.blank-slate--vertical .blank-slate__item__link h2 {
    font-size: 1.2em
}

.blank-slate--vertical .blank-slate__item__link:hover {
    opacity: 1;
    text-decoration: none
}

.blank-slate--vertical .blank-slate__item__link:hover .icon {
    -webkit-transform: scale(1.2);
    transform: scale(1.2)
}

.blank-slate--vertical .blank-slate__item .icon {
    font-size: 1.6em;
    margin-right: 1.5rem;
    color: #8FB1C7;
    margin-bottom: 0;
    transition: -webkit-transform 0.2s cubic-bezier(0.36, 0.655, 0.745, 1.575);
    transition: transform 0.2s cubic-bezier(0.36, 0.655, 0.745, 1.575);
    transition: transform 0.2s cubic-bezier(0.36, 0.655, 0.745, 1.575), -webkit-transform 0.2s cubic-bezier(0.36, 0.655, 0.745, 1.575)
}

.blank-slate--vertical .blank-slate__item .icon.icon-live {
    color: #3BD788
}

.blank-slate--vertical .blank-slate__item .icon.icon-participate {
    color: #F3B109
}

.blank-slate--vertical .blank-slate__item .icon.icon-lookback {
    color: #ED213E
}

.blank-slate .url-box {
    max-width: 240px;
    margin: 0 auto
}

.blank-slate .dashboard__no-content__figure {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    background: transparent url("/images/study-blank-slate.svg") no-repeat center;
    background-size: 100% 100%;
    width: 720px;
    height: 335px
}

.blank-slate .blank-slate__fake-btn {
    border-radius: 6px;
    border: 2px solid rgba(144, 176, 196, 0.5);
    color: #779EB7;
    display: inline-block;
    font-weight: bold;
    font-size: 1.46667rem;
    padding: .5em .9em;
    width: 250px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    opacity: .9
}

.blank-slate .blank-slate__fake-btn:not(:last-child) {
    margin-bottom: 1em
}

.blank-slate .blank-slate__fake-btn .icon {
    font-size: 1.1em;
    margin-right: .5em;
    position: relative;
    top: -.2ex;
    color: rgba(144, 176, 196, 0.6)
}

.blank-slate.get-started-slate .btn {
    font-size: .9em
}

.blank-slate h2 {
    font-weight: normal;
    font-size: 1.2rem;
    margin-bottom: 0
}

.blank-slate__info {
    color: #6d99b6;
    font-size: 1.1em
}

.modal.modal-start-session {
    color: #668ea7;
    font-size: 1.1em
}

.modal.modal-start-session.modal--frame {
    padding: 3.236rem 6.472rem
}

.modal.modal-start-session .modal__inner {
    overflow: inherit
}

.modal.modal-start-session .loading-container {
    height: 50vh
}

.modal.modal-start-session h1 {
    font-size: 1.73333rem;
    line-height: 1.4;
    margin-bottom: 1em
}

.modal.modal-start-session p:last-child {
    margin-bottom: 0
}

.modal.modal-start-session .modal-start-session__url-area {
    margin-left: -2rem;
    margin-right: -2rem
}

.modal-start-session__inner {
    width: 470px;
    margin: 0 auto
}

.modal-start-session .notice-panel {
    margin-left: -2rem;
    margin-right: -2rem
}

.modal-start-session .notice-panel .icon {
    position: relative;
    top: -.1ex;
    margin-right: .5em
}

.modal-start-session .subtitle .custom-icon--help-circle, .modal-start-session .section-heading .custom-icon--help-circle {
    font-size: 1.4em;
    position: relative;
    top: -2px;
    margin: 0 3px
}

.modal-start-session input[type="url"] {
    text-align: center;
    width: 100%
}

.modal-start-session__more-info {
    margin: 1.618rem auto;
    color: rgba(11, 126, 184, 0.7)
}

.modal-start-session__more-info a {
    font-weight: bold;
    color: #1DABF2
}

.modal-start-session__figure .icon {
    font-size: 13.33333rem
}

.modal-start-session__url-area input[type="url"] {
    margin: 0;
    width: 100%
}

.modal-start-session__url-area .subtitle, .modal-start-session__url-area .section-heading {
    margin-bottom: .8em;
    margin-left: -1em
}

.modal-start-session__url-area .subtitle .custom-icon, .modal-start-session__url-area .section-heading .custom-icon, .modal-start-session__url-area .subtitle .icon, .modal-start-session__url-area .section-heading .icon {
    top: -0.3ex;
    position: relative;
    margin-right: .3em;
    font-size: 1.4em
}

.modal-start-session__url-area .subtitle .custom-icon--tasks, .modal-start-session__url-area .section-heading .custom-icon--tasks {
    top: -.1ex
}

.modal-start-session__url-area .subtitle .custom-icon--flash, .modal-start-session__url-area .section-heading .custom-icon--flash {
    color: #3BD788
}

.modal-start-session__url-area .subtitle .custom-icon--participate, .modal-start-session__url-area .section-heading .custom-icon--participate {
    color: #F3B109
}

.modal-start-session__submit {
    margin-top: 3.236rem
}

.modal-start-session__nav {
    margin: 1.618rem auto 1em;
    width: 100%
}

.modal-start-session__nav li {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.modal-start-session__nav li a {
    width: 100%
}

.modal-start-session__panes {
    margin: 1.618rem 0
}

.modal-start-session__panes input[type="text"] {
    margin-top: 0
}

.modal-start-session__panes .subtitle, .modal-start-session__panes .section-heading {
    font-size: 0.73333rem
}

.modal-start-session__panes .subtitle, .modal-start-session__panes .section-heading {
    margin-left: 1.2rem
}

.modal-start-session .project-observer-url {
    text-align: center;
    font-weight: bold;
    color: #1DABF2
}

.modal-new-app.modal--frame {
    padding-left: 8.09rem;
    padding-right: 8.09rem;
    background-color: #fff
}

.modal-new-app__submit {
    margin-top: 3.236rem
}

.modal-new-app dl {
    margin: 0
}

.modal-new-app dl:before, .modal-new-app dl:after {
    content: " ";
    display: table
}

.modal-new-app dl:after {
    clear: both
}

.modal-new-app dl p {
    text-align: left;
    line-height: 1.3;
    margin-bottom: 0.809rem
}

.modal-new-app dl input[type="text"]:focus + .modal-text, .modal-new-app dl input[type="url"]:focus + .modal-text {
    color: #3d596a
}

.modal-new-app dl input[type="text"] {
    display: block;
    margin-top: 0;
    width: 100%
}

.modal-new-app dl .project-modal-apps__url-prefix {
    font-family: Menlo, Consolas, "Liberation Mono", Courier, monospace;
    font-size: 0.93333rem;
    margin-top: 0;
    color: #395a6e
}

.modal-new-app dl .url-box {
    margin-bottom: 0.53933rem;
    margin-top: 6px
}

.modal-new-app dl .url-box__btn {
    border-radius: 4px;
    font-size: .9em
}

.modal-new-app dl dd, .modal-new-app dl dt {
    float: left
}

.modal-new-app dl dd {
    max-width: 330px;
    margin-bottom: 0.809rem
}

.modal-new-app dl dd:last-child {
    margin-bottom: 0
}

.modal-new-app dl dt {
    clear: left;
    text-align: right;
    min-width: 150px;
    margin: 8px 2rem 0 0
}

.modal-inperson .modal__inner {
    max-width: 63rem
}

.modal-inperson__list {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
    max-width: 80%;
    margin: 0 auto
}

.modal-inperson__list .custom-icon--checkmark {
    color: #3BD788;
    font-size: .8em;
    margin-right: .5em;
    position: relative;
    top: -1px
}

.modal-inperson__list a {
    color: #1DABF2;
    font-weight: bold
}

.modal-inperson__list .custom-icon--arrow-right {
    margin-left: .3em;
    font-size: .9em
}

.modal-inperson__row {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 3.236rem
}

.modal-inperson__card {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    height: 350px;
    max-width: 350px;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    font-weight: normal;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    color: #668ea7;
    margin: 0 .5rem;
    position: relative;
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 8px;
    padding: 1.618rem 2em;
    box-shadow: inset rgba(112, 182, 236, 0.3) 0 0 0 1px, rgba(114, 182, 234, 0.2) 0 2px 20px;
    transition: box-shadow .2s ease, background-color .2s ease
}

.modal-inperson__card h2 {
    margin-bottom: 1rem
}

.modal-inperson__card h3 {
    margin-bottom: .5rem;
    font-weight: bold
}

.modal-inperson__card:hover {
    background-color: #fff
}

.modal-inperson__card:hover h2 {
    color: #204e57
}

.modal-inperson__card:hover .project-types__card__icon {
    color: #668ea7
}

.modal-inperson__card__icon {
    color: rgba(102, 142, 167, 0.8);
    font-size: 5rem;
    margin-bottom: 1rem;
    height: 75px
}

.modal-inperson__card .custom-icon--laptop-with-device {
    font-size: 8rem
}

.modal-project-users.modal--frame {
    background-color: #fff
}

.modal-project-users.modal--frame .permission-toggle {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-size: 1em;
    font-weight: normal;
    color: #204e57
}

.modal-project-users.modal--frame .switch {
    margin-right: 1rem
}

.modal-project-users.modal--frame .user-selector-container {
    margin: 3.236rem 0 1.618rem;
    transition: opacity .2s ease;
    text-align: left
}

.modal-project-users.modal--frame .user-selector-container--disabled {
    pointer-events: none;
    opacity: .4
}

.modal-project-users.modal--frame .user-selector-container label .icon {
    margin-left: 3px;
    font-size: 1.2em;
    position: relative;
    top: -1px;
    color: #8FB1C7
}

.modal-project-users.modal--frame .user-selector {
    width: 100%
}

.project-settings .btn-icon {
    color: rgba(143, 177, 199, 0.8);
    -webkit-transform-origin: 50% 55%;
    transform-origin: 50% 55%;
    transition: color .2s ease, -webkit-transform .8s ease;
    transition: color .2s ease, transform .8s ease;
    transition: color .2s ease, transform .8s ease, -webkit-transform .8s ease
}

.project-settings .btn-icon:hover {
    color: #6d99b6;
    -webkit-transform: rotate(-1turn);
    transform: rotate(-1turn)
}

.project-settings .setting-group > form {
    width: 100%;
    margin-bottom: 1.618rem
}

.project-settings .setting-group:last-child {
    border-bottom: 0;
    margin-bottom: 0
}

.project-settings .project-settings__url {
    vertical-align: initial;
    min-width: 330px;
    text-align: right;
    margin: 0;
    position: relative;
    top: 2px
}

.project-settings .project-settings__detail {
    color: #5c8dae;
    margin-right: .5rem
}

.project-settings .project-settings__detail .icon {
    position: relative;
    top: -3px
}

.project-settings .project-settings__detail--missing {
    font-style: italic
}

.project-settings .project-settings__creator {
    margin: 0.809rem 0;
    color: #7ea5bf
}

.project-settings .project-settings__creator strong {
    color: #204e57;
    font-weight: normal
}

.project-settings .project-settings__creator .avatar {
    margin-right: .5rem
}

.project-settings .project-settings__users {
    text-align: left;
    margin-top: 1.618rem;
    position: relative
}

.project-settings .project-settings__users__overlay {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 3.236rem 0;
    position: absolute;
    z-index: 30;
    background-color: rgba(255, 255, 255, 0.8);
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    color: #48738f;
    font-style: italic;
    box-shadow: inset rgba(255, 255, 255, 0.9) 0 0 40px 20px;
    border-radius: 8px
}

.project-settings .project-settings__users__actions {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

.project-settings .project-settings__users__actions .btn {
    color: #8FB1C7
}

.project-settings .project-settings__users li:hover .project-settings__users__actions .btn {
    color: #FF6E70
}

.project-settings .project-settings__users .project-settings__users-list li {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    margin-left: -0.5rem;
    margin-right: -0.5rem;
    border-radius: 6px
}

.project-settings .project-settings__users .user-selector-container {
    position: relative
}

.project-settings .project-settings__users .user-selector-container__controls {
    position: absolute;
    z-index: 20;
    right: 1rem
}

.project-settings .project-settings__users .user-selector-container__controls .btn {
    padding: .8em;
    padding-right: 0
}

.project-settings .project-settings__users .user-selector-container__controls .added {
    position: relative;
    top: .8em;
    font-size: .9em;
    font-weight: bold;
    color: rgba(32, 78, 87, 0.7)
}

.project-settings .project-settings__users .user-selector {
    margin-bottom: 1.618rem
}

.project-settings .project-settings__users .no-content {
    text-align: center;
    color: #8FB1C7;
    max-width: 400px;
    margin: 0 auto
}

.project-settings .project-settings__users .list__role {
    color: rgba(32, 78, 87, 0.7);
    text-align: left;
    font-size: 1em
}

.project-settings .project-settings__users .team-member--self .list__role {
    font-style: italic
}

.project-settings__footer {
    text-align: center;
    margin-top: 3.236rem;
    color: #6d99b6;
    font-style: italic
}

.project-settings__footer :last-child {
    margin-bottom: 0
}

.project-settings__grouping {
    margin: 3.236rem auto
}

.project-settings__grouping h2 .help-link {
    font-size: 0.8em;
    position: relative;
    top: -.2ex
}

.project-settings__grouping h2 + .settings-form__field {
    margin-top: 3.236rem
}

.project-settings__grouping .settings-form__field {
    margin-top: 1.618rem
}

.project-settings__grouping .help-link {
    margin-left: .3em
}

.project-settings__grouping .custom-icon--flash, .project-settings__grouping .custom-icon--participate {
    position: relative;
    top: -.3ex;
    margin-right: 2px
}

.project-settings__grouping .custom-icon--flash {
    color: #3BD788
}

.project-settings__grouping .custom-icon--participate {
    color: #F3B109
}

.project-settings__platforms-list {
    list-style: none;
    padding: 0;
    margin: 0;
    color: #668ea7
}

.project-settings__platforms-list__icon {
    margin: 0 1em;
    font-size: 1.8em;
    vertical-align: bottom
}

.project-settings__platforms-list__extra {
    transition: opacity .3s ease;
    opacity: .5;
    pointer-events: none
}

.project-settings__platforms-list li.selected .project-settings__platforms-list__extra {
    opacity: 1;
    pointer-events: all
}

.project-settings__platforms-list .platform-name {
    font-weight: normal;
    margin-right: .5em;
    font-size: 1.2em
}

.project-settings__platforms-list .platform-detail {
    font-style: italic
}

.project-settings__platforms-list label {
    cursor: pointer;
    font-weight: normal;
    font-size: inherit;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 10px 0
}

.project-settings__platforms-list li {
    transition: color .2s ease
}

.project-settings__platforms-list li:hover:not(.selected) {
    color: #22606C
}

.project-settings__platforms-list li.selected {
    color: #22606C
}

.project-settings__permission .setting-group__part {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.project-settings__permission .switch {
    margin-right: 1rem
}

.project-settings__permission .setting-group__label label {
    font-weight: normal;
    font-size: 1.1em
}

.project-settings .badge {
    position: relative;
    top: -2px
}

.project-settings .badge:first-child {
    margin-right: 5px
}

.project-settings .badge:last-child {
    margin-left: 5px
}

.project-settings .project-type-btn .icon {
    top: -0.3ex;
    font-size: 1.2em;
    margin-left: -0.2em
}

.project-settings .project-settings__renew {
    padding: 3.236rem 0 0
}

.project-settings .project-settings__renew h1 {
    margin-bottom: 0
}

.project-settings .project-settings__renew__text {
    color: #8FB1C7
}

.project-settings .project-settings__renew figure {
    margin: 3.236rem auto
}

.participant-listing {
    display: table;
    width: 100%
}

.participant-listing__header {
    display: table-row;
    font-weight: bold
}

.participant-listing__header__cell {
    color: #204e57;
    display: table-cell;
    vertical-align: middle;
    padding: .5em 1rem
}

.participant-listing__footer {
    text-align: center;
    color: #668ea7;
    margin-top: 1.618rem;
    font-weight: bold
}

.participant-listing__list {
    list-style: none;
    padding: 0;
    margin: 0;
    overflow: hidden;
    display: table-row-group;
    background-color: #fff;
    font-size: 1.1em;
    box-shadow: rgba(114, 182, 234, 0.2) 0 2px 30px
}

.participant-row {
    display: table-row
}

.participant-row:first-child .participant-row__cell:first-child {
    border-top-left-radius: 8px
}

.participant-row:first-child .participant-row__cell:last-child {
    border-top-right-radius: 8px
}

.participant-row:last-child .participant-row__cell:first-child {
    border-bottom-left-radius: 8px
}

.participant-row:last-child .participant-row__cell:last-child {
    border-bottom-right-radius: 8px
}

.participant-row:hover {
    background-color: #fbfbfb
}

.participant-row:hover, .participant-row:hover .participant-row__cell--secondary {
    color: #204e57
}

.participant-row:hover .participant-row__arrow {
    opacity: 1
}

.participant-row:hover .participant-row__hidden-action {
    visibility: visible;
    pointer-events: all
}

.participant-row .email-field {
    margin-top: 0;
    margin-bottom: 0
}

.participant-row .copy-btn {
    vertical-align: initial
}

.participant-row--link {
    cursor: pointer
}

.participant-row__hidden-action {
    visibility: hidden;
    pointer-events: none
}

.participant-row__link {
    color: #204e57
}

.participant-row__link:hover {
    color: #204e57
}

.participant-row__unseen {
    font-weight: bold
}

.participant-row__highlight {
    font-weight: bold;
    color: #3BD788;
    margin-left: 2px;
    font-size: .9em
}

.participant-row__arrow {
    margin-left: 5px;
    font-size: .8em;
    color: #668ea7;
    opacity: .7;
    position: relative;
    top: -1px
}

.participant-row__cell {
    display: table-cell;
    vertical-align: middle;
    padding: .8em 1rem;
    position: relative;
    color: #22606C
}

.participant-row__cell--long {
    min-width: 200px
}

.participant-row__cell--secondary {
    color: #668ea7
}

.participant-row__cell::before {
    display: block;
    content: '';
    height: 1px;
    background-color: rgba(179, 217, 245, 0.3);
    position: absolute;
    left: 0;
    right: 0;
    top: 0
}

.participant-row .device-icon {
    font-size: 1.2em;
    margin-right: 5px;
    position: relative;
    top: -2px
}

.dashboard-participant__data-point {
    color: #668ea7;
    font-style: italic;
    opacity: .8
}

.dashboard-participant__data-point strong {
    font-style: normal;
    color: #50748a
}

.participant-info {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.participant-info input[type="text"] {
    margin: 0;
    margin-left: 5px
}

.participant-info .close-cross {
    font-size: .6em;
    margin-right: 5px;
    margin-left: 5px;
    top: -2px
}

.participant-info .avatar {
    margin-right: 5px
}

.participant-info .participant-info__separator::after {
    font-weight: normal;
    display: inline;
    content: "·";
    margin: 0 4px;
    color: rgba(102, 142, 167, 0.7)
}

.participant-info__name {
    font-weight: bold;
    color: #204e57
}

.participant-info__email {
    color: #668ea7;
    font-style: italic
}

.publichighlight {
    background-color: #F6FBFD
}

.public-reel {
    margin: 0 auto;
    max-width: 960px;
    width: 90%
}

.public-reel header {
    margin: 1.618rem 0 3.236rem
}

.public-reel header h1 {
    font-family: Lato, "Helvetica Neue", sans-serif;
    color: #204e57;
    text-align: center;
    font-size: 2.26667rem;
    font-weight: 300;
    margin-left: -34px
}

.public-reel header h1 .icon {
    position: relative;
    top: -.1ex;
    margin-right: .1em
}

.new-team-container {
    max-width: 600px;
    width: 90%;
    margin: 0 auto;
    margin-top: 3.236rem;
    text-align: center;
    color: #8FB1C7;
    font-size: 1.2em
}

.new-team-container h1 {
    margin-bottom: 0
}

.new-team-container h2 {
    max-width: 30em;
    margin: 0 auto 1.618rem;
    color: #668ea7;
    font-size: 1.06667rem
}

.new-team-container .toggle-domain-signup {
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 1.618rem auto;
    border-radius: 8px;
    padding: 1rem;
    background-color: rgba(78, 148, 191, 0.06)
}

.new-team-form__team-size {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-top: 1.618rem
}

.introductioninvite .new-team-container {
    max-width: 810px;
    margin-bottom: 8.09rem;
    position: relative
}

.introductioninvite .new-team-container .invite-form {
    margin-bottom: 0
}

.introductioninvite .new-team-container .intro-invite__figure {
    font-size: 6rem;
    color: #3BD788;
    margin-bottom: 2rem
}

.introductioninvite .new-team-container .settings-form__listing {
    margin: 1.618rem -1.5rem 0
}

.introductioninvite .new-team-container .settings-form__listing .custom-icon--checkmark {
    color: #3BD788;
    margin-right: 0.9em;
    font-size: .8em;
    position: relative;
    top: 1px
}

.introductioninvite .new-team-container .settings-form__listing > li {
    padding: 0.6em calc(1.5rem + 1rem)
}

.introductioninvite .new-team-container .settings-form__listing li.settings-form__listing__invited:hover {
    background-color: transparent
}

.introductioninvite .new-team-container .settings-form__listing li.settings-form__listing__invited .list__email {
    color: rgba(102, 142, 167, 0.9);
    opacity: .7
}

.introductioninvite .new-team-container .settings-form__listing li.settings-form__listing__invited .member__email {
    color: #3d596a
}

.introductioninvite .new-team-container .settings-form__listing .disabled {
    pointer-events: none;
    opacity: .4;
    -webkit-filter: saturate(0%);
    filter: saturate(0%)
}

.introductioninvite .new-team-container .settings-form__listing .list__email {
    color: #204e57
}

.introductioninvite .new-team-container .intro-invite__submit {
    margin: 2rem 0 -3.5rem
}

.introductioninvite .new-team-container .intro-invite__submit--floating {
    position: -webkit-sticky;
    position: sticky;
    bottom: 1.618rem
}

.introductioninvite .new-team-container .intro-invite__submit--offset {
    -webkit-transform: translate(0, 32px);
    transform: translate(0, 32px);
    bottom: 3rem
}

.introductioninvite .new-team-container .intro-invite__submit p {
    margin: .5em auto 0
}

.introductioninvite .new-team-container .intro-invite__footer {
    margin-top: 6.472rem;
    font-size: .9em
}

.intro-get-started {
    position: relative
}

.intro-get-started .pointing-arrow {
    position: absolute;
    left: 175px;
    top: -50px;
    opacity: .4
}

@media only screen and (max-width: 1230px) {
    .intro-get-started .pointing-arrow {
        display: none
    }
}

.intro-get-started p {
    font-size: 1rem;
    max-width: 450px;
    margin-left: auto;
    margin-right: auto;
    color: #999
}

.intro-get-started figure {
    margin: 3.236rem auto 1.618rem;
    max-width: 357px
}

.intro-get-started figure img {
    border-radius: 3px;
    box-shadow: rgba(0, 0, 0, 0.06) 0 5px 15px
}

.teamsettings [role="main"] {
    margin-top: 1.618rem
}

.team-settings {
    max-width: 53.33333rem;
    width: 90%;
    margin: 0 auto
}

@media only screen and (max-width: 481px) {
    .team-settings {
        width: 95%
    }
}

.team-settings h1 {
    margin-left: 2rem
}

.team-settings .settings-section {
    margin-bottom: 3.236rem
}

.team-settings__plan-name {
    font-size: .7em;
    font-weight: normal;
    color: #668ea7;
    margin-left: .2em
}

.team-settings__nav {
    margin-bottom: -1px;
    margin-left: 1rem
}

.team-settings__nav .nav__bubble {
    background-color: rgba(255, 255, 255, 0.8);
    color: #777;
    transition: background-color .15s ease, color .15s ease
}

.team-settings__nav li:not(.nav--current) a:hover .nav__bubble {
    background-color: #fff;
    color: #333
}

.team-settings__nav .nav--current .nav__bubble {
    transition: none;
    background-color: #577daa;
    color: #fff
}

.team-settings__token input[type="text"] {
    color: #999
}

.team-settings__token input[type="text"]:focus {
    color: #204e57
}

.team-settings__manage {
    color: #0c8fd0
}

.team-settings .refresh-token__actions {
    padding: .4rem .5rem;
    width: 100%
}

.team-settings .refresh-token__actions .btn:last-child {
    margin-left: .5rem
}

.team-settings-overview {
    font-size: 1.1em
}

.team-settings-overview .team-list {
    max-width: 80%
}

.team-settings-members {
    margin-bottom: 3.236rem
}

.team-settings-members .team-member--self {
    font-weight: bold
}

.team-settings-members__list {
    margin-right: -1.5rem;
    margin-left: -1.5rem
}

.team-settings-members__list .member__invited {
    color: #8FB1C7
}

.settings-integrations .settings-integrations__list {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-bottom: 1.618rem;
    color: #5c8dae
}

.settings-integrations .settings-integrations__list strong {
    color: #204e57;
    font-style: italic
}

.settings-integrations .settings-integrations__list li {
    margin-bottom: 1rem;
    position: relative;
    padding-left: 30px
}

.settings-integrations .settings-integrations__list li:hover .integration__remove {
    opacity: 1
}

.settings-integrations .settings-integrations__list li:hover .custom-icon--checkmark {
    color: #63cda5
}

.settings-integrations .custom-icon--checkmark {
    transition: color .2s ease;
    color: #82c5ba;
    position: absolute;
    left: 0;
    top: 5px;
    font-size: 1rem
}

.settings-integrations .integration__name {
    font-family: Lato, "Helvetica Neue", sans-serif;
    font-size: 1.4em;
    font-weight: normal;
    color: #444;
    margin: 10px 0
}

.settings-integrations .integration__icon {
    font-size: 1em;
    color: rgba(143, 177, 199, 0.7);
    margin-right: 10px;
    position: relative;
    top: -2px
}

.settings-integrations .integration__add-new .form-label {
    color: #666666
}

.settings-integrations .integration__desc {
    font-size: 1.2em;
    margin: 0
}

.settings-integrations .integration__remove {
    position: absolute;
    top: 0;
    right: 0;
    opacity: .3;
    color: #8FB1C7;
    font-size: 1.1rem;
    transition: opacity .2s ease
}

.settings-integrations .integration__remove:hover {
    color: #FF6E70
}

.settings-integrations .integration__error {
    margin-bottom: .8rem;
    border-left: 2px solid #FF6E70;
    padding-left: 1rem;
    color: #666;
    font-style: italic
}

.settings-integrations .integration__setting {
    margin-left: .5rem
}

.settings-integrations .integration__setting input[type="checkbox"] {
    vertical-align: middle
}

.settings-integrations label.integration__setting {
    font-weight: normal;
    display: inline-block;
    font-size: 1em
}

.settings-integrations .integration__meta {
    font-size: .9em;
    color: #777;
    margin: 0;
    transition: opacity .2s ease
}

.settings-integrations .integration__meta .integration__added-by {
    font-weight: bold;
    color: #333;
    font-size: 1.1em
}

.settings-integrations .integration__meta time {
    color: #555
}

.settings-integrations .integration__meta .avatar {
    width: 16px;
    margin-left: 2px;
    vertical-align: middle;
    position: relative;
    top: -1px
}

.modal-transfer-ownership {
    font-size: 1rem
}

.modal-transfer-ownership__desc {
    color: #999;
    margin: 0 auto;
    max-width: 26.66667rem
}

.modal-transfer-ownership .modal__inner {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    max-width: none
}

.modal-transfer-ownership h2 {
    color: #76bfcd;
    margin-bottom: .5rem;
    font-size: 1.06667rem
}

.modal-transfer-ownership h3 {
    font-size: 1.2rem
}

.modal-transfer-ownership .btn {
    min-width: 250px
}

.modal-transfer-ownership .modal__search {
    margin-bottom: 1.618rem
}

.modal-transfer-ownership .modal__users {
    min-height: 71px;
    height: 200px;
    padding: 5px;
    margin: 1.618rem auto 3.236rem;
    overflow-y: scroll;
    width: 33.33333rem
}

.modal-transfer-ownership .modal__users li {
    margin-left: 3rem
}

.settings__table td, .settings__table th {
    padding: 0.5rem;
    border: 1px solid #666
}

.user-settings__header {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: baseline;
    -ms-flex-align: baseline;
    align-items: baseline;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-bottom: 0.809rem
}

.user-settings__header h1, .user-settings__header h2 {
    margin-bottom: 0
}

.user-settings__header .subtitle .icon, .user-settings__header .section-heading .icon {
    font-size: 1.4em;
    position: relative;
    top: -1px;
    margin-right: .3em
}

.user-settings .settings-form__section {
    position: relative
}

.user-settings__form {
    max-width: 46.66667rem;
    width: 90%;
    margin: 0 auto;
    margin-top: 1.618rem
}

@media only screen and (max-width: 481px) {
    .user-settings__form {
        width: 95%
    }
}

.user-settings__change-password {
    margin-bottom: 1.618rem
}

.user-settings__split {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 1.618rem
}

.user-settings__split .settings-form__section:last-child {
    border-bottom: 0
}

.user-settings__split__1 {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.user-settings__split__2 {
    -webkit-flex: 2;
    -ms-flex: 2;
    flex: 2
}

.user-settings__avatar {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column
}

.user-settings__avatar .avatar {
    width: 96px;
    margin-bottom: 7px;
    border-radius: 100%
}

.user-settings__avatar p {
    margin-bottom: 0;
    font-size: 1em;
    font-weight: normal
}

@media only screen and (max-width: 481px) {
    .user-settings__avatar .avatar {
        width: 72px
    }
}

.user-settings__notifications-steps {
    list-style: none;
    padding: 0;
    margin: 0
}

.user-settings__notifications .icon-check {
    position: relative;
    top: -2px;
    margin-right: 4px;
    font-size: 0.9em
}

.user-settings__notifications .settings-form__text .icon-check {
    color: #26b96f;
    margin-right: .5rem
}

.settings-billing__upgrade-notice {
    max-width: 600px;
    margin: 0 auto;
    padding: 1.618rem 0;
    font-weight: 300;
    color: #204e57;
    font-size: 1.33333em;
    text-align: center
}

.settings-billing__upgrade-notice h1 {
    font-weight: 300;
    font-size: 2.66667rem
}

.settings-billing__upgrade-notice .btn.mode--primary {
    min-width: 150px;
    margin-top: 2.427rem;
    margin-bottom: 3.236rem
}

.settings-billing__upgrade-notice p {
    margin-bottom: 0.809rem
}

.settings-billing__upgrade-notice a {
    margin-bottom: 1.618rem
}

.settings-billing__upgrade-notice .small-print {
    font-size: 0.93333rem
}

.settings-billing .settings-form__summary-list {
    margin-bottom: 1.618rem
}

.settings-billing__actions a {
    margin-right: 1rem
}

.settings-billing__actions a .icon {
    font-size: 1.4em;
    margin: 0 !important
}

.billing-flow {
    font-size: 1rem;
    padding-top: 3.236rem
}

.billing-flow__header {
    margin: 0 3rem 2.427rem;
    font-weight: 300;
    text-align: center
}

.billing-flow__header h1, .billing-flow__header h2, .billing-flow__header h3 {
    font-weight: 300
}

.billing-flow__header h1 {
    margin-bottom: 0
}

.billing-flow__header h2 {
    font-size: 1.2rem
}

.billing-flow .modal__inner {
    margin-top: 3.236rem
}

.billing-flow .lookback-mark {
    width: 5em
}

.billing-flow h1 {
    font-size: 2.4rem;
    margin-bottom: 0
}

.billing-flow h2 {
    margin-bottom: 0.5rem
}

.billing-flow .billing-flow__container {
    border-radius: 10px;
    box-shadow: rgba(114, 182, 234, 0.2) 0 5px 30px;
    overflow: hidden;
    background-color: #fff;
    max-width: 45rem;
    padding: 3.236rem 5%;
    margin: 0 auto 3.236rem;
    color: #204e57
}

.billing-flow .billing-flow__container--narrow {
    padding-left: 11rem;
    padding-right: 11rem
}

@media only screen and (max-width: 700px) {
    .billing-flow .billing-flow__container--narrow {
        padding-left: 12%;
        padding-right: 12%
    }
}

.billing-flow .billing-flow__container > :last-child {
    margin-bottom: 0
}

.billing-flow__footer {
    text-align: center
}

.billing-flow__footer > :last-child {
    margin-bottom: 0
}

.churn-survey {
    max-width: 42rem;
    margin: 4.854rem auto 4.854rem
}

.player {
    background-color: #F6FBFD
}

.player body {
    padding-top: 53px
}

.player .preloaded-avatars {
    position: absolute;
    top: -9999em
}

.player #intercom-launcher {
    display: none !important
}

.player [role="banner"] {
    top: 0;
    left: 0;
    right: 0;
    z-index: 1002;
    position: fixed
}

@supports ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))) {
    .player [role="banner"] {
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        background-color: rgba(255, 255, 255, 0.9)
    }
}

.player [role="main"] {
    position: relative
}

.player .player-overview {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    padding: 1.618rem 4%;
    max-width: 80rem;
    margin: 0 auto
}

@media only screen and (max-width: 1010px) {
    .player .player-overview {
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column
    }
}

@media only screen and (max-width: 481px) {
    .player .player-overview {
        padding-left: 0;
        padding-right: 0
    }
}

.player .player-main {
    -webkit-flex: 2;
    -ms-flex: 2;
    flex: 2
}

.player .player-meta {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    margin-left: 4%
}

@media only screen and (max-width: 1010px) {
    .player .player-meta {
        margin-left: 0
    }
}

@media (min-width: 720px) and (max-width: 1010px) {
    .player .player-meta {
        margin-top: 3.236rem;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
        justify-content: space-between
    }

    .player .player-meta > section {
        -webkit-flex-basis: 30%;
        -ms-flex-preferred-size: 30%;
        flex-basis: 30%;
        -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
        justify-content: space-between;
        margin-bottom: 0
    }
}

@media only screen and (max-width: 720px) {
    .player .player-meta {
        margin-top: 3.236rem
    }
}

@media only screen and (max-width: 481px) {
    .player .player-meta {
        padding-left: 4%;
        padding-right: 4%
    }
}

.player-action-btn {
    color: rgba(32, 78, 87, 0.8);
    font-weight: bold;
    display: inline-block;
    padding: .3em .5em;
    border-radius: 4px;
    transition: background-color .15s ease-out
}

.player-action-btn:hover {
    text-decoration: none
}

.player-action-btn[disabled] {
    cursor: default;
    color: rgba(32, 78, 87, 0.6);
    font-weight: normal
}

.player-action-btn:hover:not([disabled]), .player-action-btn.dropdown--open {
    color: #204e57;
    background-color: rgba(160, 189, 208, 0.12)
}

.player-action-btn:hover:not([disabled]) .icon-chevron-down, .player-action-btn.dropdown--open .icon-chevron-down {
    color: #5081a0
}

.player-action-btn:active:not([disabled]) {
    background-color: rgba(143, 177, 199, 0.3)
}

.player-action-btn .icon-chevron-down {
    font-size: 1em;
    color: #8FB1C7
}

.player-action-btn .icon {
    margin-right: 5px;
    position: relative;
    top: -1px;
    color: #8FB1C7
}

.player-action-btn .action__icon {
    position: relative
}

.player-action-btn .action__icon .icon {
    margin-right: 3px;
    font-size: 1.1rem;
    color: rgba(32, 78, 87, 0.7);
    position: relative;
    top: -1px;
    transition: color .2s ease-out
}

.player-action-btn .action__icon__annotation {
    position: absolute;
    font-size: 0.6rem
}

.player-debug-modal {
    max-width: 1024px;
    width: 95%;
    text-align: left
}

.player__controls {
    margin-top: 20px;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    transition: -webkit-transform .15s .5s ease;
    transition: transform .15s .5s ease;
    transition: transform .15s .5s ease, -webkit-transform .15s .5s ease
}

.player__controls--inactive:not(:hover) {
    -webkit-transform: translate3d(0, 70px, 0);
    transform: translate3d(0, 70px, 0)
}

.player__controls .player__play-pause {
    margin-left: 0
}

.player__controls .player__play-pause span {
    opacity: .8;
    transition: opacity .2s ease-out
}

.player__controls .player__play-pause span:hover {
    opacity: 1
}

.player__controls .player__play-pause span:active {
    -webkit-transform: scale(0.97);
    transform: scale(0.97)
}

.player__controls .player__play-pause .icon {
    font-size: 38px
}

@media only screen and (max-width: 481px) {
    .player__controls {
        display: none
    }
}

.player__current-time, .player__duration {
    color: rgba(228, 234, 235, 0.6)
}

.player__current-time {
    margin-right: 1rem
}

.player__current-time .dropdown__trigger {
    cursor: pointer;
    transition: color .15s ease-out;
    min-width: 51px;
    display: inline-block;
    text-align: right
}

.player__current-time .dropdown__trigger:hover {
    color: rgba(228, 234, 235, 0.9)
}

.player__duration {
    cursor: pointer;
    margin-left: 1rem
}

.player__duration time {
    display: inline-block;
    min-width: 51px
}

.player__control {
    margin-left: 10px;
    position: relative;
    z-index: 201
}

.player__control > span {
    display: inline-block;
    opacity: .8;
    color: #fff;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    cursor: pointer;
    border-radius: 5px;
    padding: 4px
}

.player__control:hover > span, .player__control.dropdown--open > span {
    opacity: 1
}

.player__control:active > span {
    opacity: .6
}

.player__control .icon {
    transition: -webkit-transform .15s ease;
    transition: transform .15s ease;
    transition: transform .15s ease, -webkit-transform .15s ease;
    vertical-align: top;
    font-size: 1.4rem;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
}

.player__control--active > span {
    opacity: 1;
    color: #1DABF2;
    background-color: #fff
}

.player__timeline + .player__control {
    margin-left: 0
}

.player__control--fullscreen .icon {
    font-size: 1.5rem
}

.player__control--volume .soundwave {
    transition: opacity .1s ease-out
}

.player__control--volume.muted .soundwave {
    opacity: .2
}

@-webkit-keyframes progress-loading {
    0% {
        background-position: 0 0
    }
    100% {
        background-position: 10px 10px
    }
}

@keyframes progress-loading {
    0% {
        background-position: 0 0
    }
    100% {
        background-position: 10px 10px
    }
}

.player__timeline {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position: relative;
    z-index: 202
}

.player__timeline__wrapper {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    position: relative
}

.player__timeline__wrapper:hover .player__timeline__event--interactable .event__symbol {
    color: #7c7c7c
}

.player__timeline__wrapper:hover .player__timeline__event--view {
    color: #7c7c7c;
    background-image: linear-gradient(rgba(153, 153, 153, 0.9), rgba(153, 153, 153, 0.6))
}

.player__progress {
    position: relative;
    height: 35px;
    border-radius: 2px;
    background-color: #5D6062;
    transition: -webkit-transform .3s ease-out;
    transition: transform .3s ease-out;
    transition: transform .3s ease-out, -webkit-transform .3s ease-out
}

.player__progress.no-views {
    background-color: #2fcc72
}

.player__progress.loading {
    -webkit-transform: scaleY(0.1);
    transform: scaleY(0.1)
}

.player__progress.loading .player__marker {
    opacity: 0
}

.player__progress::after {
    content: '';
    display: block;
    position: absolute;
    pointer-events: none;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 1;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.2))
}

.player__buffer {
    pointer-events: none;
    background-color: #25a35b;
    position: absolute;
    left: 0;
    text-indent: -999em;
    border-radius: 10px;
    z-index: 2;
    bottom: -4px;
    height: 2px;
    opacity: .8
}

.player__marker {
    transition: opacity .5s ease-out;
    position: absolute;
    left: -5px;
    top: 0;
    bottom: 0;
    width: 10px;
    height: 35px;
    padding: 0;
    border: none;
    background: none;
    cursor: ew-resize;
    pointer-events: all;
    outline: 0;
    z-index: 20
}

.player__marker::after {
    content: '';
    display: block;
    width: 7px;
    height: 7px;
    position: absolute;
    top: -4px;
    left: 1px;
    border-radius: 100%;
    background-color: #fff;
    box-shadow: rgba(0, 0, 0, 0.4) 0 0px 2px
}

.player__progress__unplayed {
    position: absolute;
    pointer-events: none;
    z-index: 11;
    right: 0;
    top: 0;
    width: 100%;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.3);
    border-left: 1px solid #fff;
    transition: background-color .2s ease-out
}

.player__progress__unplayed.player__progress__unplayed--buffering {
    background-size: 10px 10px;
    background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.1) 75%, transparent 75%, transparent);
    -webkit-animation: progress-loading 1s linear infinite;
    animation: progress-loading 1s linear infinite
}

.player__timeline__current-timestamp {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 10px;
    z-index: 10;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
}

.player__timeline__current-timestamp::after {
    display: block;
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    left: 50%;
    background-color: rgba(255, 255, 255, 0.3);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0 1px
}

.timeline-comment-dropdown {
    padding: .5rem .7rem .5rem .7rem;
    border: 0;
    min-width: 300px;
    max-width: 400px;
    box-shadow: rgba(0, 0, 0, 0.15) 0 -5px 20px, rgba(0, 0, 0, 0.2) 0 2px 3px
}

.timeline-comment-dropdown .comment-replies__more {
    text-align: right;
    font-size: .9em;
    color: #999
}

.timeline-comment-dropdown .player-comment__permalink {
    margin: 0;
    width: 205px
}

.timeline-comment-dropdown .player-comment__permalink-close {
    display: inline-block;
    padding: 0 3px;
    font-size: 12px
}

.timeline-comment-dropdown .comment-base__footer {
    text-align: right;
    margin-top: -.5rem
}

.comment-replies-list {
    list-style: none;
    padding: 0;
    margin: 0
}

.comment-replies-list li:not(:last-child) {
    margin-bottom: 5px;
    border-bottom: 1px solid #EEE;
    padding-bottom: 5px
}

.comment-replies-list .comment-base__meta {
    margin-bottom: -3px
}

.comment-replies-list .comment-base__avatar .avatar {
    width: 32px;
    height: 32px;
    position: relative;
    top: 5px
}

.player__timeline__events {
    height: 20px;
    margin-top: -25px;
    margin-bottom: 5px;
    position: relative;
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    transition: opacity .4s ease-out, -webkit-transform .4s ease-out;
    transition: opacity .4s ease-out, transform .4s ease-out;
    transition: opacity .4s ease-out, transform .4s ease-out, -webkit-transform .4s ease-out
}

.player__timeline__events.loading {
    opacity: 0;
    -webkit-transform: translateY(5px);
    transform: translateY(5px)
}

.player__timeline__events .player__timeline__event--view:hover {
    background-image: linear-gradient(rgba(255, 255, 255, 0.6), rgba(153, 153, 153, 0.7))
}

.player__timeline__events:hover .player__timeline__event--view {
    -webkit-transform: translateX(-50%) scale(1.5);
    transform: translateX(-50%) scale(1.5)
}

.event__annotation {
    font-size: 0.73333em;
    color: #898989;
    transition: color .2s ease-out
}

.player__timeline__event {
    position: absolute;
    bottom: 0;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
}

.player__timeline__event .event__symbol {
    color: #565656;
    font-size: 1rem;
    display: inline-block;
    transition: color .2s ease-out
}

.player__timeline__event .event__symbol .icon {
    vertical-align: initial
}

.player__timeline__event .event__symbol--active {
    color: #fff
}

.player__timeline__event.current .event__symbol {
    color: rgba(255, 255, 255, 0.8)
}

.player__timeline__event:hover .player__timeline__event--interactable .event__symbol, .player__timeline__event:hover .event__annotation {
    color: #afafaf
}

.player__timeline__event .event__annotation {
    position: absolute;
    right: -45%;
    top: 2px;
    cursor: default;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.player__timeline__event--view {
    bottom: 5px;
    border-radius: 100%;
    width: 8px;
    height: 8px;
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    background-image: linear-gradient(rgba(153, 153, 153, 0.7), rgba(153, 153, 153, 0.5));
    transition: background-image 0.2s ease-out, -webkit-transform 0.3s cubic-bezier(0.38, 1.07, 0.57, 1.43);
    transition: background-image 0.2s ease-out, transform 0.3s cubic-bezier(0.38, 1.07, 0.57, 1.43);
    transition: background-image 0.2s ease-out, transform 0.3s cubic-bezier(0.38, 1.07, 0.57, 1.43), -webkit-transform 0.3s cubic-bezier(0.38, 1.07, 0.57, 1.43)
}

.player__timeline__event--comment {
    height: 20px;
    width: 20px
}

.player__timeline__event--comment .dropdown__trigger {
    cursor: pointer
}

.player__timeline__event--pin {
    width: 20px;
    height: 20px;
    text-align: center
}

.player__timeline__event--pin .event__symbol {
    color: #fff;
    font-size: 1.2rem
}

.player-segment {
    position: absolute;
    z-index: 31;
    height: 35px
}

.player-segment--hidden {
    pointer-events: none
}

.player-segment__track {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    position: absolute;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100%;
    left: 0;
    right: 0;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    transition: box-shadow .2s ease, opacity .15s ease, -webkit-transform .2s ease;
    transition: box-shadow .2s ease, opacity .15s ease, transform .2s ease;
    transition: box-shadow .2s ease, opacity .15s ease, transform .2s ease, -webkit-transform .2s ease;
    box-shadow: inset #eaeaea 0 0 0 1px, rgba(0, 0, 0, 0.15) 9px 0 5px, rgba(0, 0, 0, 0.15) -9px 0 5px
}

.player-segment__track--hidden {
    opacity: 0;
    -webkit-transform: perspective(1000px) translateZ(-30px);
    transform: perspective(1000px) translateZ(-30px);
    pointer-events: none
}

.player-segment__track--editable {
    cursor: -webkit-grab;
    cursor: -moz-grab;
    background: linear-gradient(rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.4));
    -webkit-backdrop-filter: blur(3px)
}

.player-segment__track--editable:active {
    cursor: -webkit-grabbing;
    cursor: -moz-grabbing
}

.player-segment__track--editable:hover {
    box-shadow: inset #f5f5f5 0 0 0 1px, rgba(0, 0, 0, 0.3) 6px 0 3px, rgba(0, 0, 0, 0.3) -6px 0 3px
}

.player-segment__track--editable .player-segment__handle {
    width: 11px;
    cursor: ew-resize
}

.player-segment__track--editable .player-segment__handle .icon-menu {
    display: inline-block
}

.player-segment__track--editable .player-segment__handle:hover {
    background-color: #f5f5f5
}

.player-segment__track--editable .player-segment__handle:first-child {
    left: -10px
}

.player-segment__track--editable .player-segment__handle:last-child {
    right: -10px
}

.player-segment__label {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    color: #fff;
    padding: 1px 8px;
    border-radius: 2em;
    background-color: rgba(32, 78, 87, 0.35);
    font-size: 0.8rem
}

.player-segment__close {
    display: inline-block;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.9);
    margin-left: 1px;
    position: relative;
    top: -1px
}

.player-segment__close:hover {
    color: #fff
}

.player-segment__handle {
    width: 4px;
    background-color: #eaeaea;
    transition: background-color .2s ease, box-shadow .2s ease;
    height: 100%;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    position: absolute
}

.player-segment__handle:first-child {
    border-radius: 5px 0 0 5px;
    left: -4px
}

.player-segment__handle:last-child {
    border-radius: 0 5px 5px 0;
    right: -4px
}

.player-segment__handle .icon {
    font-size: .75em;
    -webkit-transform: rotate(90deg) translateZ(0);
    transform: rotate(90deg) translateZ(0);
    color: rgba(0, 0, 0, 0.6)
}

.player-segment__handle .icon-menu {
    display: none
}

.player-segment__handle--close {
    width: auto;
    cursor: pointer
}

.player-segment__handle--close:last-child {
    left: 12px
}

.player-segment__handle--close:hover .icon {
    color: #666
}

.player-segment__handle--close .icon {
    font-size: 1em;
    color: #888;
    transition: color .15s ease-out
}

.segment-dropdown {
    padding: 0;
    box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 4px, rgba(0, 0, 0, 0.1) 0 5px 10px;
    width: 250px;
    border: 0;
    color: gray;
    left: calc(50% - 125px) !important;
    bottom: 44px !important;
    top: auto !important
}

.segment-dropdown .settings-form__section--slim {
    margin-bottom: 0.5rem;
    margin-right: 0.8rem
}

.segment-dropdown__btn {
    width: 100%;
    padding-bottom: .5em;
    padding-top: .5em;
    font-size: 1.1em
}

.segment-dropdown__btn.mode--link {
    padding: .5em;
    padding-top: calc(.5em + 4px)
}

.segment-dropdown label {
    font-weight: normal;
    font-size: 1em;
    cursor: default
}

.segment-dropdown label .help-link {
    position: relative;
    top: -1px
}

.segment-dropdown label.select {
    margin: 5px 0;
    width: 100%
}

.segment-dropdown__inner {
    padding: 4px
}

.segment-dropdown__nav {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    margin: 4px 0;
    padding: 0 4px
}

.segment-dropdown__nav .segment-dropdown__nav__control {
    display: block;
    color: #888;
    width: 1.5em;
    transition: color .1s ease-out
}

.segment-dropdown__nav .segment-dropdown__nav__control:last-child {
    text-align: inherit
}

.segment-dropdown__nav .segment-dropdown__nav__control .icon {
    position: relative;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    top: -1px;
    font-size: 1.1em
}

.segment-dropdown__nav .segment-dropdown__nav__control:hover {
    text-decoration: none;
    color: #444
}

.segment-dropdown__nav__title {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    font-size: 1.1em;
    text-align: center;
    color: #3b91a2
}

.segment-dropdown__nav label.segment-dropdown__nav__title {
    font-size: 1em;
    color: inherit
}

.segment-dropdown__help {
    padding: 5px 8px;
    font-size: .9em;
    line-height: 1.4
}

.segment-dropdown__help .icon {
    vertical-align: baseline;
    color: #afafaf;
    position: relative;
    top: 1px;
    margin-right: 2px
}

.segment-dropdown__help .help-link {
    margin: 0 2px;
    position: relative;
    top: -1px;
    font-size: 1.1em
}

.segment-dropdown__success-pane p {
    margin-bottom: 4px
}

.segment-dropdown__success-pane__msg {
    padding: .75em;
    font-size: 1.1em;
    text-align: center;
    color: #204e57
}

.segment-dropdown__success-pane .emoji {
    position: relative;
    top: 1px;
    font-size: 1.2em;
    display: inline-block;
    -webkit-transform: scale(0);
    transform: scale(0)
}

.segment-dropdown__actions {
    list-style: none;
    padding: 0;
    margin: 0;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    text-align: center;
    font-size: 1.1em;
    border-radius: 4px;
    overflow: hidden
}

.segment-dropdown__actions li {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.segment-dropdown__actions li:not(:last-child) {
    border-right: 1px solid #e1e1e1
}

.segment-dropdown__actions .segment-dropdown__actions__close {
    -webkit-flex: 0 0 15%;
    -ms-flex: 0 0 15%;
    flex: 0 0 15%;
    position: relative
}

.segment-dropdown__actions .segment-dropdown__actions__close a {
    font-size: .8rem;
    padding: 0;
    width: 100%;
    height: 34px;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.segment-dropdown__actions a {
    display: block;
    padding: .4rem;
    color: #2e6f7c;
    background-color: #f9f9f9;
    transition: color .1s ease, background-color .2s ease
}

.segment-dropdown__actions a:hover {
    color: #1DABF2;
    text-decoration: none;
    background-color: #fff
}

.segment-dropdown__actions a:active {
    background-color: #f3f3f3;
    color: #0c8fd0
}

.segment-dropdown__actions a[disabled] {
    opacity: .4;
    background-color: #e0e0e0;
    pointer-events: none
}

.segment-dropdown__share {
    padding: 4px
}

.segment-dropdown__share input[type="text"] {
    font-size: 0.66667rem;
    width: 100%;
    margin: 0;
    border-color: #cdcdcd
}

.segment-dropdown__share .btn {
    font-size: 1em;
    padding: 0.3em 0;
    width: 26px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0
}

.segment-dropdown__form .form-label {
    margin-bottom: 0;
    color: #999;
    font-size: 0.8rem
}

.segment-dropdown__form input[type="text"], .segment-dropdown__form select {
    font-size: 1.1em;
    width: 100%;
    color: #204e57
}

.segment-dropdown__form select {
    cursor: pointer
}

.segment-dropdown__form__section {
    padding: 4px 8px;
    margin-bottom: 4px
}

.segment-dropdown__form__section--border {
    border-bottom: 1px solid #ececec
}

.segment-dropdown__form__submit {
    padding: 4px
}

.segment-dropdown__add-form {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin: 5px 0
}

.segment-dropdown__add-form input[type="text"] {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.segment-dropdown__add-form .new-project__cancel-btn {
    color: #ccc;
    position: relative;
    top: 2px;
    transition: color .15s ease
}

.segment-dropdown__add-form .new-project__cancel-btn:hover {
    color: #999999
}

.segment-dropdown__add-form .new-project__cancel-btn .icon {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg)
}

.player__timeline__tools {
    height: 25px;
    position: absolute;
    bottom: -25px;
    left: 0;
    right: 0
}

.player__timeline__tips {
    position: absolute;
    pointer-events: none;
    left: 0;
    top: 4px;
    z-index: 999;
    font-size: .9em;
    transition: color .2s ease, -webkit-transform .2s ease;
    transition: color .2s ease, transform .2s ease;
    transition: color .2s ease, transform .2s ease, -webkit-transform .2s ease;
    color: rgba(228, 234, 235, 0.6);
    opacity: .7
}

.player__timeline__tips kbd {
    background-color: transparent;
    border: 0;
    color: #fff;
    display: inline;
    box-shadow: none;
    font-size: 1em;
    padding: 0;
    top: auto
}

.player__timeline__tips__moved-away {
    -webkit-transform: translate3d(0, 30px, 0);
    transform: translate3d(0, 30px, 0);
    color: #204e57
}

.player__timeline__tips__moved-away kbd {
    color: #204e57
}

.player__timeline__timestamp {
    position: absolute;
    height: 100%;
    z-index: 12;
    top: 4px;
    width: 60px;
    -webkit-transform: translateX(calc(-27%));
    transform: translateX(calc(-27%))
}

.player__timeline__timestamp--shifted {
    -webkit-transform: translateX(calc(-85%));
    transform: translateX(calc(-85%))
}

.timeline__timestamp__trigger {
    display: block;
    width: 100%;
    text-align: right;
    -webkit-transform-origin: 85% center;
    transform-origin: 85% center;
    transition: opacity .2s .1s ease-out, -webkit-transform .2s .1s ease;
    transition: opacity .2s .1s ease-out, transform .2s .1s ease;
    transition: opacity .2s .1s ease-out, transform .2s .1s ease, -webkit-transform .2s .1s ease
}

.timeline__timestamp__trigger--hide {
    opacity: 0;
    -webkit-transform: perspective(1000px) translateZ(-400px);
    transform: perspective(1000px) translateZ(-400px)
}

.timeline__timestamp__trigger--show {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    transition: opacity .2s .1s linear, -webkit-transform .3s .1s ease;
    transition: opacity .2s .1s linear, transform .3s .1s ease;
    transition: opacity .2s .1s linear, transform .3s .1s ease, -webkit-transform .3s .1s ease
}

.timeline__timestamp__trigger:hover {
    text-decoration: none
}

.timeline__timestamp__trigger:hover .icon {
    color: #eee
}

.timeline__timestamp__trigger.locked .timeline__timestamp__time, .timeline__timestamp__trigger.locked .icon {
    color: #eee
}

.timeline__timestamp__trigger .icon, .timeline__timestamp__trigger .timeline__timestamp__time {
    transition: color .2s
}

.timeline__timestamp__trigger .icon-chevron-small-up {
    position: absolute;
    top: -4px;
    color: #777;
    right: 0;
    font-size: 11px
}

.timeline__timestamp__trigger .icon-scissors {
    color: rgba(228, 234, 235, 0.6);
    position: relative
}

.timeline__timestamp__time {
    color: rgba(228, 234, 235, 0.6);
    font-size: 0.8rem
}

.player__views {
    position: relative;
    height: 100%;
    overflow: hidden;
    border-radius: 2px
}

.player__view {
    position: absolute;
    display: block;
    height: 100%;
    overflow: hidden;
    transition: box-shadow .8s ease-out
}

.player__view:first-child {
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px
}

.player__view:first-child.last {
    border-radius: 2px
}

.player__view.last {
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px
}

.player__view__name {
    cursor: default;
    display: inline-block;
    pointer-events: none;
    top: 6px;
    padding: 0 8px;
    font-size: .9em;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border-radius: 2em;
    color: #fff;
    white-space: nowrap;
    transition: opacity .3s ease
}

.player__view--color-0 {
    background-color: #21AE5D;
    box-shadow: rgba(13, 67, 36, 0.3) 0 0 2px
}

.player__view--color-0.player__view--current {
    box-shadow: rgba(33, 174, 93, 0.4) 0 -1px 20px
}

.player__view--color-0 .player__view__name {
    background-color: #21AE5D
}

.player__view--color-1 {
    background-color: #1abc9c;
    box-shadow: rgba(11, 76, 63, 0.3) 0 0 2px
}

.player__view--color-1.player__view--current {
    box-shadow: rgba(26, 188, 156, 0.4) 0 -1px 20px
}

.player__view--color-1 .player__view__name {
    background-color: #1abc9c
}

.player__view--color-2 {
    background-color: #F5891F;
    box-shadow: rgba(142, 74, 6, 0.3) 0 0 2px
}

.player__view--color-2.player__view--current {
    box-shadow: rgba(245, 137, 31, 0.4) 0 -1px 20px
}

.player__view--color-2 .player__view__name {
    background-color: #F5891F
}

.player__view--color-3 {
    background-color: #e74d3d;
    box-shadow: rgba(146, 30, 18, 0.3) 0 0 2px
}

.player__view--color-3.player__view--current {
    box-shadow: rgba(231, 77, 61, 0.4) 0 -1px 20px
}

.player__view--color-3 .player__view__name {
    background-color: #e74d3d
}

.player__view--color-4 {
    background-color: #8f45ae;
    box-shadow: rgba(68, 33, 83, 0.3) 0 0 2px
}

.player__view--color-4.player__view--current {
    box-shadow: rgba(143, 69, 174, 0.4) 0 -1px 20px
}

.player__view--color-4 .player__view__name {
    background-color: #8f45ae
}

.player__view--color-5 {
    background-color: #3DAEE7;
    box-shadow: rgba(18, 103, 146, 0.3) 0 0 2px
}

.player__view--color-5.player__view--current {
    box-shadow: rgba(61, 174, 231, 0.4) 0 -1px 20px
}

.player__view--color-5 .player__view__name {
    background-color: #3DAEE7
}

.player__view--color-6 {
    background-color: #4551AE;
    box-shadow: rgba(33, 39, 83, 0.3) 0 0 2px
}

.player__view--color-6.player__view--current {
    box-shadow: rgba(69, 81, 174, 0.4) 0 -1px 20px
}

.player__view--color-6 .player__view__name {
    background-color: #4551AE
}

.player__view--color-7 {
    background-color: #C9388B;
    box-shadow: rgba(102, 28, 70, 0.3) 0 0 2px
}

.player__view--color-7.player__view--current {
    box-shadow: rgba(201, 56, 139, 0.4) 0 -1px 20px
}

.player__view--color-7 .player__view__name {
    background-color: #C9388B
}

.player__view--color-8 {
    background-color: #C9B900;
    box-shadow: rgba(74, 68, 0, 0.3) 0 0 2px
}

.player__view--color-8.player__view--current {
    box-shadow: rgba(201, 185, 0, 0.4) 0 -1px 20px
}

.player__view--color-8 .player__view__name {
    background-color: #C9B900
}

.player__view--current.player__view--capped, .player__view--capped:hover {
    overflow: visible
}

.player__view--current.player__view--capped .player__view__name, .player__view--capped:hover .player__view__name {
    opacity: 1;
    z-index: 30;
    transition-delay: 0s;
    box-shadow: rgba(0, 0, 0, 0.4) 0 1px 1px, rgba(0, 0, 0, 0.2) 0 1px 6px
}

.player__timeline.snippet-active .player__view__name {
    opacity: .6
}

.player__stage {
    position: relative;
    background-color: #081f2a;
    padding: 2vmin 1.5rem 2vmin 1rem;
    height: calc(85vh - 53px);
    min-height: 500px;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding-bottom: 25px
}

.player__stage:-webkit-full-screen {
    height: 100vh;
    width: 100%;
    overflow: hidden
}

.player__stage:-webkit-full-screen .player__videos {
    height: 80vh
}

.player__stage:-webkit-full-screen .player__videos__wrapper {
    width: 100%
}

.player__stage:-webkit-full-screen .player__camera {
    width: 20%
}

.player__stage:-webkit-full-screen .player__touches svg {
    max-width: none !important;
    max-height: none !important
}

.player__stage:-webkit-full-screen .player__touches circle {
    r: 15px;
    stroke: #666;
    stroke-width: 3px
}

.player__stage:-moz-full-screen {
    height: 100vh;
    width: 100%;
    overflow: hidden
}

.player__stage:-moz-full-screen .player__videos {
    height: 80vh
}

.player__stage:-moz-full-screen .player__videos__wrapper {
    width: 100%
}

.player__stage:-moz-full-screen .player__camera {
    width: 20%
}

.player__stage:-moz-full-screen .player__touches svg {
    max-width: none !important;
    max-height: none !important
}

.player__stage:-moz-full-screen .player__touches circle {
    r: 15px;
    stroke: #666;
    stroke-width: 3px
}

.player__stage:full-screen {
    height: 100vh;
    width: 100%;
    overflow: hidden
}

.player__stage:full-screen .player__videos {
    height: 80vh
}

.player__stage:full-screen .player__videos__wrapper {
    width: 100%
}

.player__stage:full-screen .player__camera {
    width: 20%
}

.player__stage:full-screen .player__touches svg {
    max-width: none !important;
    max-height: none !important
}

.player__stage:full-screen .player__touches circle {
    r: 15px;
    stroke: #666;
    stroke-width: 3px
}

.player__stage:-webkit-full-screen {
    height: 100vh;
    width: 100%;
    overflow: hidden
}

.player__stage:-moz-full-screen {
    height: 100vh;
    width: 100%;
    overflow: hidden
}

.player__stage:-ms-fullscreen {
    height: 100vh;
    width: 100%;
    overflow: hidden
}

.player__stage:fullscreen {
    height: 100vh;
    width: 100%;
    overflow: hidden
}

.player__stage:-webkit-full-screen .player__videos {
    height: 80vh
}

.player__stage:-moz-full-screen .player__videos {
    height: 80vh
}

.player__stage:-ms-fullscreen .player__videos {
    height: 80vh
}

.player__stage:fullscreen .player__videos {
    height: 80vh
}

.player__stage:-webkit-full-screen .player__videos__wrapper {
    width: 100%
}

.player__stage:-moz-full-screen .player__videos__wrapper {
    width: 100%
}

.player__stage:-ms-fullscreen .player__videos__wrapper {
    width: 100%
}

.player__stage:fullscreen .player__videos__wrapper {
    width: 100%
}

.player__stage:-webkit-full-screen .player__camera {
    width: 20%
}

.player__stage:-moz-full-screen .player__camera {
    width: 20%
}

.player__stage:-ms-fullscreen .player__camera {
    width: 20%
}

.player__stage:fullscreen .player__camera {
    width: 20%
}

.player__stage:-webkit-full-screen .player__touches svg {
    max-width: none !important;
    max-height: none !important
}

.player__stage:-moz-full-screen .player__touches svg {
    max-width: none !important;
    max-height: none !important
}

.player__stage:-ms-fullscreen .player__touches svg {
    max-width: none !important;
    max-height: none !important
}

.player__stage:fullscreen .player__touches svg {
    max-width: none !important;
    max-height: none !important
}

.player__stage:-webkit-full-screen .player__touches circle {
    r: 15px;
    stroke: #666;
    stroke-width: 3px
}

.player__stage:-moz-full-screen .player__touches circle {
    r: 15px;
    stroke: #666;
    stroke-width: 3px
}

.player__stage:-ms-fullscreen .player__touches circle {
    r: 15px;
    stroke: #666;
    stroke-width: 3px
}

.player__stage:fullscreen .player__touches circle {
    r: 15px;
    stroke: #666;
    stroke-width: 3px
}

.player__stage .circle-spinner {
    color: #F1C330
}

.player__edit-banner {
    position: fixed;
    top: -7px;
    z-index: 1001;
    background: #54a8f3;
    background-image: linear-gradient(#54a8f3, #48a9ff);
    color: rgba(255, 255, 255, 0.9);
    right: 0;
    left: 0;
    height: 60px;
    display: -webkit-flex !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 7px 1rem 0;
    box-shadow: rgba(0, 0, 0, 0.2) 0 1px 3px, rgba(255, 255, 255, 0.2) 0 -1px 0
}

.player__edit-banner .btn {
    line-height: 1.8;
    color: #2490f0;
    box-shadow: rgba(0, 0, 0, 0.1) 0 1px 1px
}

.player__edit-banner div {
    margin: 0 1rem
}

.player__edit-banner kbd {
    border: 0;
    background-color: rgba(255, 255, 255, 0.8);
    color: #0f76d2
}

.player__edit-banner s {
    opacity: .6
}

.player__breadcrumb {
    list-style: none;
    padding: 0;
    margin: 0;
    position: absolute;
    z-index: 10;
    color: rgba(228, 234, 235, 0.6);
    font-size: 1.1em;
    transition: opacity .5s ease;
    cursor: default;
    padding-right: 3em;
    padding-bottom: 2em;
    line-height: 1.25;
    opacity: .8
}

@media only screen and (max-width: 1545px) {
    .player__breadcrumb--obscured {
        opacity: 0;
        pointer-events: none
    }
}

@media only screen and (max-width: 1220px) {
    .player__breadcrumb {
        opacity: 0;
        pointer-events: none
    }
}

@media only screen and (max-width: 481px) {
    .player__breadcrumb {
        display: none
    }
}

.player__breadcrumb:hover {
    opacity: 1
}

.player__breadcrumb:hover .icon {
    opacity: 1
}

.player__breadcrumb .icon {
    transition: opacity .3s ease;
    font-size: .7em;
    position: relative;
    top: 5px;
    vertical-align: top;
    margin-left: 2px;
    opacity: .5
}

.player__breadcrumb a {
    color: currentColor
}

.player__breadcrumb a:hover {
    color: #E4EAEB
}

.player__breadcrumb .nav--current {
    color: rgba(255, 255, 255, 0.9);
    font-weight: bold;
    font-size: 1.1em
}

.player__breadcrumb li:first-child a, .player__breadcrumb li:last-child {
    display: inline-block;
    max-width: 250px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap
}

.player-badge {
    padding: 3px 1.5em 4px;
    border-radius: 4px;
    line-height: 1.5;
    color: gray;
    border-color: #666666;
    transition: opacity .5s ease
}

@media only screen and (max-width: 1200px) {
    .player-badge {
        opacity: 0
    }
}

@media only screen and (max-width: 481px) {
    .player-badge {
        display: none
    }
}

.player-archive-badge {
    position: absolute;
    z-index: 11;
    top: 50px
}

.player__floating-controls {
    position: absolute;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    z-index: 201
}

@media only screen and (max-width: 768px) {
    .player__floating-controls {
        display: none
    }
}

.player__floating-controls--top-right {
    top: 1vmin;
    right: 2vmin
}

.player__floating-controls a.player__control {
    font-weight: bold
}

.player__ended h1, .player__ended h2, .player__ended h3 {
    color: rgba(228, 234, 235, 0.9)
}

.player__ended.off-screen .player__ended__replay .icon {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0
}

.player__ended .player__ended__container {
    margin-top: -4rem;
    transition: opacity 1s ease, -webkit-transform .8s ease;
    transition: transform .8s ease, opacity 1s ease;
    transition: transform .8s ease, opacity 1s ease, -webkit-transform .8s ease
}

.player__ended.off-screen .player__ended__container {
    -webkit-transform: translateZ(-100px);
    transform: translateZ(-100px);
    opacity: 0
}

.player__ended__feedback {
    list-style: none;
    padding: 0;
    margin: 0
}

.player__ended__feedback:hover a {
    opacity: .7
}

.player__ended__feedback li {
    display: inline-block;
    margin: 0 1em
}

.player__ended__feedback .icon {
    font-size: 3em
}

.player__ended__feedback a {
    color: #fff;
    display: inline-block;
    font-size: 1.4em;
    padding: 0 1em;
    transition: opacity .5s ease, -webkit-transform .35s ease;
    transition: transform .35s ease, opacity .5s ease;
    transition: transform .35s ease, opacity .5s ease, -webkit-transform .35s ease
}

.player__ended__feedback a span {
    display: block;
    margin-top: .5em
}

.player__ended__feedback a:hover {
    opacity: 1;
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
    text-decoration: none
}

.player__ended__replay {
    color: rgba(255, 255, 255, 0.8);
    display: block;
    font-size: 1.5rem;
    margin-bottom: 1rem;
    transition: color .4s ease-out, opacity .2s, -webkit-transform .3s ease-out;
    transition: color .4s ease-out, transform .3s ease-out, opacity .2s;
    transition: color .4s ease-out, transform .3s ease-out, opacity .2s, -webkit-transform .3s ease-out
}

.player__ended__replay:hover {
    text-decoration: none;
    color: #fff
}

.player__ended__replay:hover .icon {
    transition-delay: 0s;
    transition-duration: .3s;
    -webkit-transform: rotate(-30deg);
    transform: rotate(-30deg);
    background-color: rgba(0, 0, 0, 0.6);
    box-shadow: rgba(0, 0, 0, 0.1) 0 1px 20px
}

.player__ended__replay:hover kbd {
    opacity: 1
}

.player__ended__replay .icon {
    transition: background-color .4s ease-out, box-shadow .3s ease-out, -webkit-transform .6s ease;
    transition: background-color .4s ease-out, transform .6s ease, box-shadow .3s ease-out;
    transition: background-color .4s ease-out, transform .6s ease, box-shadow .3s ease-out, -webkit-transform .6s ease;
    font-size: 4.66667rem;
    margin-bottom: .5rem;
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 100%;
    -webkit-backdrop-filter: blur(3px)
}

.player__ended__replay .btn-text {
    display: block
}

.player__ended__replay kbd {
    background-color: rgba(0, 0, 0, 0.2);
    background-image: none;
    border: 0;
    font-size: 0.86667rem;
    text-transform: uppercase;
    -webkit-transform: scaleY(0.9);
    transform: scaleY(0.9);
    display: inline-block;
    opacity: .8;
    transition: opacity .4 ease-out;
    color: rgba(255, 255, 255, 0.8);
    text-shadow: none
}

.player__videos {
    position: relative;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    text-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    transition: opacity 0.4s cubic-bezier(0.29, 0.67, 0.32, 0.94), -webkit-transform 0.5s cubic-bezier(0.29, 0.67, 0.32, 0.94);
    transition: transform 0.5s cubic-bezier(0.29, 0.67, 0.32, 0.94), opacity 0.4s cubic-bezier(0.29, 0.67, 0.32, 0.94);
    transition: transform 0.5s cubic-bezier(0.29, 0.67, 0.32, 0.94), opacity 0.4s cubic-bezier(0.29, 0.67, 0.32, 0.94), -webkit-transform 0.5s cubic-bezier(0.29, 0.67, 0.32, 0.94)
}

.player__videos.loading .player__screen video, .player__videos.loading .player__camera video {
    opacity: .3;
    box-shadow: none
}

.player__videos.hidden {
    opacity: 0;
    display: none;
    -webkit-transform: perspective(100px) translateZ(-10px);
    transform: perspective(100px) translateZ(-10px)
}

.player__videos__wrapper {
    position: relative;
    width: 90%;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center
}

.play-pause-click-area {
    cursor: pointer
}

.player__screen .player__screen__spinner {
    position: absolute;
    top: calc(50% - 20px);
    left: calc(50% - 20px);
    font-size: 20px
}

.player__screen.rotate--short {
    transition: -webkit-transform 300ms;
    transition: transform 300ms;
    transition: transform 300ms, -webkit-transform 300ms
}

.player__screen.rotate--long {
    transition: -webkit-transform 600ms;
    transition: transform 600ms;
    transition: transform 600ms, -webkit-transform 600ms
}

.player__screen[data-degrees="90"] {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg)
}

.player__screen[data-degrees="-90"] {
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg)
}

.player__screen[data-degrees="180"] {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

.player__screen[data-degrees="-180"] {
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg)
}

.player__screen video, .player__camera video {
    transition: opacity .2s ease-out;
    box-shadow: rgba(0, 0, 0, 0.6) 0 -1px 6px
}

.player__screen[data-degrees="90"] video, .player__camera[data-degrees="90"] video {
    box-shadow: rgba(0, 0, 0, 0.6) -1px 0 6px
}

.player__screen[data-degrees="-90"] video, .player__camera[data-degrees="-90"] video {
    box-shadow: rgba(0, 0, 0, 0.6) 1px 0 6px
}

.player__screen[data-degrees="180"] video, .player__camera[data-degrees="180"] video {
    box-shadow: rgba(0, 0, 0, 0.6) 0 1px 6px
}

.player__screen[data-degrees="-180"] video, .player__camera[data-degrees="-180"] video {
    box-shadow: rgba(0, 0, 0, 0.6) 0 1px 6px
}

.player__screen-surface {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0
}

.player__screen-surface--hidden {
    display: none
}

.player__screen {
    position: relative;
    height: 100%;
    transition: opacity 0.2s cubic-bezier(0.16, 0.975, 0.28, 1.005), -webkit-transform 0.2s cubic-bezier(0.16, 0.975, 0.28, 1.005);
    transition: transform 0.2s cubic-bezier(0.16, 0.975, 0.28, 1.005), opacity 0.2s cubic-bezier(0.16, 0.975, 0.28, 1.005);
    transition: transform 0.2s cubic-bezier(0.16, 0.975, 0.28, 1.005), opacity 0.2s cubic-bezier(0.16, 0.975, 0.28, 1.005), -webkit-transform 0.2s cubic-bezier(0.16, 0.975, 0.28, 1.005)
}

.player__screen:hover .player__play-overlay__btn {
    background: rgba(0, 0, 0, 0.8)
}

.player__screen:hover .player__play-overlay__icon {
    -webkit-transform: scale(0.9);
    transform: scale(0.9)
}

.player__screen video {
    border-radius: 2px;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    -webkit-tap-highlight-color: transparent
}

.player__screen video::-webkit-media-controls {
    display: none !important
}

@media only screen and (max-width: 481px) {
    .player__screen video {
        width: 58vw
    }
}

@media only screen and (max-width: 481px) {
    .player__screen.loading {
        opacity: 0;
        -webkit-transform: perspective(100px) translateZ(-10px);
        transform: perspective(100px) translateZ(-10px)
    }
}

.player__play-overlay {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    -webkit-tap-highlight-color: transparent;
    display: -webkit-flex !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.player__play-overlay__btn {
    width: 6rem;
    height: 6rem;
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 100%;
    padding: 1.7em;
    transition: background .4s ease-out
}

.player__play-overlay__btn .player__play-overlay__icon {
    width: 100%;
    height: 100%;
    position: relative;
    left: 10%;
    transition: -webkit-transform .2s ease-out;
    transition: transform .2s ease-out;
    transition: transform .2s ease-out, -webkit-transform .2s ease-out
}

@media only screen and (min-width: 481px) {
    .player__play-overlay {
        display: none !important
    }
}

.player__touches {
    z-index: 10;
    pointer-events: none
}

.player__touches svg {
    width: 100%;
    height: 100%
}

.player__touches circle {
    fill: rgba(255, 255, 255, 0.9);
    stroke: rgba(0, 0, 0, 0.2);
    stroke-width: 1px;
    r: 20px
}

.player__camera {
    width: 210px;
    margin-left: 20px
}

.player__camera--disabled {
    display: none
}

.player__camera.loading video {
    opacity: 0
}

.player__camera .player__camera__spinner {
    position: absolute;
    top: calc(50% - 15px);
    left: calc(50% - 15px)
}

.player__camera video {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 4px
}

.player__camera[data-degrees="90"], .player__camera[data-degrees="-90"] {
    margin-left: 0
}

.player__camera.flipped, .player__camera.flipped-reverse {
    margin-left: 0
}

.player__camera.flipped-reverse video {
    -webkit-transform: scale(1.3) rotate(-90deg);
    transform: scale(1.3) rotate(-90deg);
    -webkit-transform-origin: 67% 58%;
    transform-origin: 67% 58%
}

.player__camera.flipped video {
    -webkit-transform: scale(1.3) rotate(90deg);
    transform: scale(1.3) rotate(90deg);
    -webkit-transform-origin: 40% 70%;
    transform-origin: 40% 70%
}

.player-volume-dropdown {
    width: 150px
}

.player-playback-speed-dropdown {
    min-width: 200px
}

.player-playback-speed-dropdown label {
    text-align: center;
    font-weight: normal;
    font-size: .9rem;
    position: relative;
    top: -5px;
    cursor: pointer
}

.player-playback-speed-dropdown .range__step {
    cursor: pointer
}

.player-playback-speed-dropdown .range-steps {
    color: #777;
    font-size: 0.8em;
    padding-right: 6px
}

.player-playback-speed-dropdown .range__step--full:first-child {
    text-align: left;
    position: relative;
    left: -4px
}

.player-playback-speed-dropdown .range__step--full:last-child {
    text-align: right
}

.player--desktop .player__camera {
    max-width: 280px;
    width: 60%
}

.player--desktop:-webkit-full-screen .player__camera {
    max-width: none
}

.player--desktop:-moz-full-screen .player__camera {
    max-width: none
}

.player--desktop:full-screen .player__camera {
    max-width: none
}

.player--desktop:-webkit-full-screen .player__camera {
    max-width: none
}

.player--desktop:-moz-full-screen .player__camera {
    max-width: none
}

.player--desktop:-ms-fullscreen .player__camera {
    max-width: none
}

.player--desktop:fullscreen .player__camera {
    max-width: none
}

@media only screen and (max-width: 481px) {
    .player__stage {
        height: auto;
        min-height: 0
    }

    .player__camera, .player__touches {
        display: none
    }
}

.player--live #intercom-container .intercom-launcher-frame, .player--live #intercom-container .intercom-launcher-discovery-frame, .player--live #intercom-container .intercom-app-launcher-enabled .intercom-messenger-frame {
    left: 20px;
    right: auto
}

.player--live [role="main"] {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

.player--live video {
    max-width: 100%;
    transition: opacity .2s ease, -webkit-transform .3s ease-out;
    transition: opacity .2s ease, transform .3s ease-out;
    transition: opacity .2s ease, transform .3s ease-out, -webkit-transform .3s ease-out
}

.player--live video.stream--loading {
    opacity: 0
}

.player--live video.stream--paused {
    opacity: 0;
    -webkit-transform: perspective(1000px) translateZ(-10px) scale(0.9);
    transform: perspective(1000px) translateZ(-10px) scale(0.9)
}

.player--live video.stream--offline {
    opacity: .3
}

.live-player-container {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    position: relative;
    width: 100%;
    background-color: #062939;
    color: rgba(157, 221, 234, 0.7);
    font-size: .9rem
}

.live-player-container h1, .live-player-container h2, .live-player-container h3, .live-player-container h4, .live-player-container h5, .live-player-container h6 {
    font-weight: 300;
    color: #9dddea
}

.live-player-container h3 {
    font-weight: bold;
    color: #fff;
    margin-bottom: 0.809rem
}

.live-player-container .dashboard-notifications {
    position: absolute
}

.player-live-dropdown {
    width: 280px;
    border-radius: 7px;
    background-color: #F6FBFD;
    border: 0;
    font-size: .9em;
    box-shadow: rgba(0, 0, 0, 0.2) 0 10px 30px;
    padding: .7rem
}

.player-live-dropdown .btn.size--large {
    border-radius: 7px;
    width: 100%
}

.player-live-dropdown .live-player__users h2 {
    margin-left: 0
}

.player-live-dropdown[data-dropdown-align="right"] {
    text-align: left
}

.live-player__top {
    height: 50px;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    color: #fff;
    padding: 0.809rem 1rem;
    cursor: default;
    -webkit-align-items: baseline;
    -ms-flex-align: baseline;
    align-items: baseline;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.live-player__top .live-logo {
    color: #3BD788;
    transition: opacity .3s ease, -webkit-filter .3s ease;
    transition: opacity .3s ease, filter .3s ease;
    transition: opacity .3s ease, filter .3s ease, -webkit-filter .3s ease
}

.live-player__top .live-logo--disconnected, .live-player__top .live-logo--offline {
    -webkit-filter: saturate(0%);
    filter: saturate(0%);
    opacity: .3
}

.live-player__top .live-logo .icon {
    font-size: 1.3rem;
    position: relative;
    top: -2px;
    margin-right: 0.5rem
}

.live-player__top strong {
    font-size: 1.1em;
    margin-right: 1rem
}

.live-player__top .live-player__duration {
    display: inline-block;
    margin-right: 1rem;
    font-weight: bold;
    font-size: .9em;
    color: #3BD788
}

.live-player__stage {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.live-player__stage--mobile video {
    width: auto;
    max-height: 82vh
}

.live-player__stage--mobile .live-player__stage__streams, .live-player__stage--mobile .live-player__stage__sidebar {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.live-player__stage--mobile.live-player__stage--no-camera .live-player__stage__sidebar {
    -webkit-flex: 2;
    -ms-flex: 2;
    flex: 2
}

.live-player__stage--desktop .live-player__stage__streams {
    -webkit-flex: 3;
    -ms-flex: 3;
    flex: 3;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    -ms-grid-row-align: flex-end;
    align-items: flex-end;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column
}

.live-player__stage--desktop .live-player__stage__streams .live-player-screen {
    -webkit-flex: 0;
    -ms-flex: 0;
    flex: 0;
    padding-right: 0
}

.live-player__stage--desktop .live-player__stage__sidebar {
    -webkit-flex: 2;
    -ms-flex: 2;
    flex: 2
}

.live-player__stage__sidebar, .live-player__stage__streams {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

.live-player__stage__streams {
    position: relative;
    margin-right: 1rem
}

.live-player__stage__sidebar {
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    max-width: 50%
}

.live-player-controls {
    text-align: right;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.live-player-controls .avatar {
    margin-right: 8px
}

.live-player-controls .user-dropdown-trigger {
    color: rgba(255, 255, 255, 0.8);
    font-style: italic;
    transition: color .2s ease
}

.live-player-controls .user-dropdown-trigger:hover {
    color: #fff
}

.live-player-controls .user-dropdown-trigger:hover [class*="icon-chevron"] {
    color: #fff
}

.live-player-controls .moderator-toggle-track {
    cursor: pointer
}

.live-player-controls .moderator-toggle-track .icon {
    font-size: 1.5rem
}

.live-player-screen {
    position: relative;
    padding: 0 1rem;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.live-player-screen video {
    position: relative;
    box-shadow: rgba(0, 0, 0, 0.3) 0 3px 20px 5px;
    border-radius: 3px;
    transition: box-shadow .2s .3s ease, opacity .3s ease
}

.live-player-screen video.stream--loading {
    box-shadow: none
}

.live-player-screen video:hover {
    z-index: 21
}

.live-player-camera video {
    box-shadow: rgba(0, 0, 0, 0.3) 0 3px 10px;
    width: 19vw;
    max-width: none;
    border-radius: 7px
}

@media only screen and (max-height: 800px) {
    .live-player-camera--desktop {
        position: absolute;
        bottom: .5rem;
        right: .5rem;
        z-index: 20
    }

    .live-player-camera--desktop video {
        max-width: 200px
    }
}

.live-player-camera--not-supported {
    box-shadow: rgba(0, 0, 0, 0.3) 0 3px 10px;
    max-width: 19vw;
    max-height: 30vh;
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 0.05);
    color: rgba(157, 221, 234, 0.9);
    padding: 1em;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    text-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center
}

.live-player-camera--not-supported a {
    color: #43c0ff;
    font-weight: bold
}

.live-player-camera--not-supported .icon {
    font-size: 3em;
    margin-bottom: .3em;
    opacity: .3
}

.live-player-camera--not-supported p {
    margin-bottom: .5em
}

.live-player-camera--not-supported p:last-child {
    margin-bottom: 0
}

.live-player-moderator-instructions {
    max-width: 35em;
    text-align: center;
    font-size: 1.2em
}

.live-player-moderator-instructions h2 {
    font-size: 2.4em;
    margin-bottom: 1em
}

.live-player-moderator-instructions p {
    margin-bottom: 1.618rem
}

.live-player-loading {
    text-align: center
}

.live-player-loading__text {
    font-style: italic;
    font-size: 1.3em;
    margin: 0
}

.live-player-loading__text .live-player-loading__spinner {
    margin-right: 1em;
    opacity: .4;
    vertical-align: text-bottom
}

.live-player-stage__status-view {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    align-self: center
}

.live-player-stage__status-view--waiting {
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: center;
    -ms-flex-align: center;
    -ms-grid-row-align: center;
    align-items: center
}

.live-player-stage__status-view h2 {
    margin-bottom: 0
}

.live-player-stage__status-view .btn-watch .icon {
    top: -.1ex;
    margin-right: 0;
    font-size: 1.3em
}

.live-player-stage__status-view .player-live__processing-msg {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 1.2em;
    font-style: italic
}

.live-player-stage__status-view .player-live__processing-msg .spinner-circular {
    margin-right: 1em;
    font-size: 8px;
    opacity: .4
}

.live-player-stage__status-view .player-live__processing-msg--warning {
    color: #F3B109;
    font-weight: bold;
    font-style: normal
}

.live-player-breadcrumb {
    font-weight: 300;
    font-size: 1.1em;
    margin-right: 1rem
}

.live-player-breadcrumb a {
    color: #fff
}

.live-player-breadcrumb .icon {
    color: #1DABF2;
    position: relative;
    top: -1px
}

.moderator-control {
    color: #3BD788;
    transition: color .2s ease;
    margin-right: .6rem
}

.moderator-control:hover {
    color: #4afba1
}

.moderator-control:hover.moderator-badge--outline {
    background-color: #3BD788;
    border-color: #3BD788;
    color: #082b38
}

.moderator-control:active.moderator-badge--outline {
    background-color: #2ace7b;
    border-color: #2ace7b
}

.moderator-control--secondary {
    color: #1DABF2
}

.moderator-control--secondary:hover {
    color: #43c0ff
}

.moderator-control--danger {
    color: #8e4294;
}

.moderator-control--danger:hover {
    color: #8e4294;
}

.moderator-control--danger:hover.moderator-badge--outline {
    background-color: #8e4294;
    border-color: #8e4294;
    color: #8e4294;
}

.moderator-control--danger:active.moderator-badge--outline {
    background-color: #8e4294;
    border-color: #8e4294;
}

.moderator-control--disabled {
    color: #248295
}

.moderator-control--disabled:hover {
    color: #2ea6be
}

.moderator-badge {
    font-weight: bold;
    cursor: default;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.moderator-badge .icon {
    font-size: .8rem;
    margin-right: .5em
}

.moderator-badge .avatar::after {
    border-color: currentColor;
    color: currentColor
}

.moderator-badge--trigger {
    cursor: pointer
}

.moderator-badge--outline {
    text-transform: uppercase;
    border: 1px solid;
    border-radius: 3em;
    font-size: .8em;
    padding: .1em .8em .2em;
    transition: none
}

.live-player__error {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    text-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
    background-color: #F6FBFD;
    font-size: 1.2em
}

.live-player__error h2 {
    color: #204e57
}

.live-player__error p {
    max-width: 470px;
    margin: 0 auto 1.618rem;
    color: rgba(32, 78, 87, 0.6)
}

.live-player__error .custom-icon--browser-window {
    font-size: 9rem;
    margin-bottom: 1.618rem;
    -webkit-animation: live-error-animation 3s 1s linear both;
    animation: live-error-animation 3s 1s linear both
}

.live-player__error .icon-help-with-circle {
    color: rgba(32, 78, 87, 0.4);
    position: relative;
    top: -1px;
    margin-right: 3px
}

.live-player__error__explanation {
    font-size: .9em
}

.live-player__error .custom-icon--live-logo {
    font-size: 3rem;
    margin-bottom: 0.809rem
}

.live-comments-autocomplete {
    bottom: 44px !important;
    top: auto !important;
    border-radius: 4px 4px 2px 2px;
    border: 0
}

.live-comments-autocomplete .emoji {
    font-size: 1.2em
}

@-webkit-keyframes live-error-animation {
    0% {
        opacity: 0;
        -webkit-transform: matrix3d(1.5, 0.546, 0, 0, 0, 1.5, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(1.5, 0.546, 0, 0, 0, 1.5, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    }
    1.43% {
        -webkit-transform: matrix3d(1.318, 0.408, 0, 0, 0, 1.318, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(1.318, 0.408, 0, 0, 0, 1.318, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    }
    2.85% {
        -webkit-transform: matrix3d(1.029, 0.246, 0, 0, 0, 1.029, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(1.029, 0.246, 0, 0, 0, 1.029, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    }
    3.4% {
        -webkit-transform: matrix3d(0.926, 0.194, 0, 0, 0, 0.926, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(0.926, 0.194, 0, 0, 0, 0.926, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    }
    4.28% {
        -webkit-transform: matrix3d(0.799, 0.13, 0, 0, 0, 0.799, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(0.799, 0.13, 0, 0, 0, 0.799, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    }
    5.63% {
        -webkit-transform: matrix3d(0.723, 0.067, 0, 0, 0, 0.723, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(0.723, 0.067, 0, 0, 0, 0.723, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    }
    6.81% {
        -webkit-transform: matrix3d(0.771, 0.029, 0, 0, 0, 0.771, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(0.771, 0.029, 0, 0, 0, 0.771, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    }
    7.13% {
        -webkit-transform: matrix3d(0.799, 0.019, 0, 0, 0, 0.799, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(0.799, 0.019, 0, 0, 0, 0.799, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    }
    8.63% {
        -webkit-transform: matrix3d(0.96, -0.033, 0, 0, 0, 0.96, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(0.96, -0.033, 0, 0, 0, 0.96, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    }
    10.14% {
        opacity: 1;
        -webkit-transform: matrix3d(1.1, -0.085, 0, 0, 0, 1.1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(1.1, -0.085, 0, 0, 0, 1.1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    }
    10.21% {
        -webkit-transform: matrix3d(1.105, -0.088, 0, 0, 0, 1.105, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(1.105, -0.088, 0, 0, 0, 1.105, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    }
    11.64% {
        -webkit-transform: matrix3d(1.151, -0.12, 0, 0, 0, 1.151, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(1.151, -0.12, 0, 0, 0, 1.151, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    }
    13.14% {
        -webkit-transform: matrix3d(1.109, -0.128, 0, 0, 0, 1.109, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(1.109, -0.128, 0, 0, 0, 1.109, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    }
    13.61% {
        -webkit-transform: matrix3d(1.084, -0.126, 0, 0, 0, 1.084, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(1.084, -0.126, 0, 0, 0, 1.084, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    }
    14.64% {
        -webkit-transform: matrix3d(1.021, -0.116, 0, 0, 0, 1.021, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(1.021, -0.116, 0, 0, 0, 1.021, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    }
    16.14% {
        -webkit-transform: matrix3d(0.945, -0.096, 0, 0, 0, 0.945, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(0.945, -0.096, 0, 0, 0, 0.945, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    }
    17.52% {
        -webkit-transform: matrix3d(0.918, -0.077, 0, 0, 0, 0.918, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(0.918, -0.077, 0, 0, 0, 0.918, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    }
    17.64% {
        -webkit-transform: matrix3d(0.918, -0.075, 0, 0, 0, 0.918, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(0.918, -0.075, 0, 0, 0, 0.918, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    }
    20.65% {
        -webkit-transform: matrix3d(0.989, -0.034, 0, 0, 0, 0.989, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(0.989, -0.034, 0, 0, 0, 0.989, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    }
    21.32% {
        -webkit-transform: matrix3d(1.01, -0.024, 0, 0, 0, 1.01, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(1.01, -0.024, 0, 0, 0, 1.01, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    }
    23.65% {
        -webkit-transform: matrix3d(1.045, 0.007, 0, 0, 0, 1.045, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(1.045, 0.007, 0, 0, 0, 1.045, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    }
    25.23% {
        -webkit-transform: matrix3d(1.031, 0.022, 0, 0, 0, 1.031, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(1.031, 0.022, 0, 0, 0, 1.031, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    }
    29.03% {
        -webkit-transform: matrix3d(0.977, 0.035, 0, 0, 0, 0.977, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(0.977, 0.035, 0, 0, 0, 0.977, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    }
    29.65% {
        -webkit-transform: matrix3d(0.976, 0.035, 0, 0, 0, 0.976, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(0.976, 0.035, 0, 0, 0, 0.976, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    }
    35.66% {
        -webkit-transform: matrix3d(1.013, 0.013, 0, 0, 0, 1.013, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(1.013, 0.013, 0, 0, 0, 1.013, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    }
    36.74% {
        -webkit-transform: matrix3d(1.011, 0.007, 0, 0, 0, 1.011, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(1.011, 0.007, 0, 0, 0, 1.011, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    }
    41.67% {
        -webkit-transform: matrix3d(0.993, -0.009, 0, 0, 0, 0.993, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(0.993, -0.009, 0, 0, 0, 0.993, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    }
    44.44% {
        -webkit-transform: matrix3d(0.998, -0.011, 0, 0, 0, 0.998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(0.998, -0.011, 0, 0, 0, 0.998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    }
    47.67% {
        -webkit-transform: matrix3d(1.004, -0.009, 0, 0, 0, 1.004, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(1.004, -0.009, 0, 0, 0, 1.004, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    }
    53.68% {
        -webkit-transform: matrix3d(0.998, 0, 0, 0, 0, 0.998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(0.998, 0, 0, 0, 0, 0.998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    }
    59.68% {
        -webkit-transform: matrix3d(1.001, 0.003, 0, 0, 0, 1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(1.001, 0.003, 0, 0, 0, 1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    }
    59.86% {
        -webkit-transform: matrix3d(1.001, 0.003, 0, 0, 0, 1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(1.001, 0.003, 0, 0, 0, 1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    }
    65.69% {
        -webkit-transform: matrix3d(0.999, 0.002, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(0.999, 0.002, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    }
    71.7% {
        -webkit-transform: matrix3d(1, -0.001, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(1, -0.001, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    }
    75% {
        -webkit-transform: matrix3d(1, -0.001, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(1, -0.001, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    }
    75.28% {
        -webkit-transform: matrix3d(1, -0.001, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(1, -0.001, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    }
    90.69% {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    }
    100% {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    }
}

@keyframes live-error-animation {
    0% {
        opacity: 0;
        -webkit-transform: matrix3d(1.5, 0.546, 0, 0, 0, 1.5, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(1.5, 0.546, 0, 0, 0, 1.5, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    }
    1.43% {
        -webkit-transform: matrix3d(1.318, 0.408, 0, 0, 0, 1.318, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(1.318, 0.408, 0, 0, 0, 1.318, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    }
    2.85% {
        -webkit-transform: matrix3d(1.029, 0.246, 0, 0, 0, 1.029, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(1.029, 0.246, 0, 0, 0, 1.029, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    }
    3.4% {
        -webkit-transform: matrix3d(0.926, 0.194, 0, 0, 0, 0.926, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(0.926, 0.194, 0, 0, 0, 0.926, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    }
    4.28% {
        -webkit-transform: matrix3d(0.799, 0.13, 0, 0, 0, 0.799, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(0.799, 0.13, 0, 0, 0, 0.799, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    }
    5.63% {
        -webkit-transform: matrix3d(0.723, 0.067, 0, 0, 0, 0.723, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(0.723, 0.067, 0, 0, 0, 0.723, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    }
    6.81% {
        -webkit-transform: matrix3d(0.771, 0.029, 0, 0, 0, 0.771, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(0.771, 0.029, 0, 0, 0, 0.771, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    }
    7.13% {
        -webkit-transform: matrix3d(0.799, 0.019, 0, 0, 0, 0.799, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(0.799, 0.019, 0, 0, 0, 0.799, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    }
    8.63% {
        -webkit-transform: matrix3d(0.96, -0.033, 0, 0, 0, 0.96, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(0.96, -0.033, 0, 0, 0, 0.96, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    }
    10.14% {
        opacity: 1;
        -webkit-transform: matrix3d(1.1, -0.085, 0, 0, 0, 1.1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(1.1, -0.085, 0, 0, 0, 1.1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    }
    10.21% {
        -webkit-transform: matrix3d(1.105, -0.088, 0, 0, 0, 1.105, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(1.105, -0.088, 0, 0, 0, 1.105, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    }
    11.64% {
        -webkit-transform: matrix3d(1.151, -0.12, 0, 0, 0, 1.151, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(1.151, -0.12, 0, 0, 0, 1.151, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    }
    13.14% {
        -webkit-transform: matrix3d(1.109, -0.128, 0, 0, 0, 1.109, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(1.109, -0.128, 0, 0, 0, 1.109, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    }
    13.61% {
        -webkit-transform: matrix3d(1.084, -0.126, 0, 0, 0, 1.084, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(1.084, -0.126, 0, 0, 0, 1.084, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    }
    14.64% {
        -webkit-transform: matrix3d(1.021, -0.116, 0, 0, 0, 1.021, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(1.021, -0.116, 0, 0, 0, 1.021, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    }
    16.14% {
        -webkit-transform: matrix3d(0.945, -0.096, 0, 0, 0, 0.945, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(0.945, -0.096, 0, 0, 0, 0.945, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    }
    17.52% {
        -webkit-transform: matrix3d(0.918, -0.077, 0, 0, 0, 0.918, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(0.918, -0.077, 0, 0, 0, 0.918, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    }
    17.64% {
        -webkit-transform: matrix3d(0.918, -0.075, 0, 0, 0, 0.918, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(0.918, -0.075, 0, 0, 0, 0.918, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    }
    20.65% {
        -webkit-transform: matrix3d(0.989, -0.034, 0, 0, 0, 0.989, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(0.989, -0.034, 0, 0, 0, 0.989, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    }
    21.32% {
        -webkit-transform: matrix3d(1.01, -0.024, 0, 0, 0, 1.01, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(1.01, -0.024, 0, 0, 0, 1.01, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    }
    23.65% {
        -webkit-transform: matrix3d(1.045, 0.007, 0, 0, 0, 1.045, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(1.045, 0.007, 0, 0, 0, 1.045, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    }
    25.23% {
        -webkit-transform: matrix3d(1.031, 0.022, 0, 0, 0, 1.031, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(1.031, 0.022, 0, 0, 0, 1.031, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    }
    29.03% {
        -webkit-transform: matrix3d(0.977, 0.035, 0, 0, 0, 0.977, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(0.977, 0.035, 0, 0, 0, 0.977, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    }
    29.65% {
        -webkit-transform: matrix3d(0.976, 0.035, 0, 0, 0, 0.976, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(0.976, 0.035, 0, 0, 0, 0.976, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    }
    35.66% {
        -webkit-transform: matrix3d(1.013, 0.013, 0, 0, 0, 1.013, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(1.013, 0.013, 0, 0, 0, 1.013, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    }
    36.74% {
        -webkit-transform: matrix3d(1.011, 0.007, 0, 0, 0, 1.011, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(1.011, 0.007, 0, 0, 0, 1.011, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    }
    41.67% {
        -webkit-transform: matrix3d(0.993, -0.009, 0, 0, 0, 0.993, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(0.993, -0.009, 0, 0, 0, 0.993, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    }
    44.44% {
        -webkit-transform: matrix3d(0.998, -0.011, 0, 0, 0, 0.998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(0.998, -0.011, 0, 0, 0, 0.998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    }
    47.67% {
        -webkit-transform: matrix3d(1.004, -0.009, 0, 0, 0, 1.004, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(1.004, -0.009, 0, 0, 0, 1.004, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    }
    53.68% {
        -webkit-transform: matrix3d(0.998, 0, 0, 0, 0, 0.998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(0.998, 0, 0, 0, 0, 0.998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    }
    59.68% {
        -webkit-transform: matrix3d(1.001, 0.003, 0, 0, 0, 1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(1.001, 0.003, 0, 0, 0, 1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    }
    59.86% {
        -webkit-transform: matrix3d(1.001, 0.003, 0, 0, 0, 1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(1.001, 0.003, 0, 0, 0, 1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    }
    65.69% {
        -webkit-transform: matrix3d(0.999, 0.002, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(0.999, 0.002, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    }
    71.7% {
        -webkit-transform: matrix3d(1, -0.001, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(1, -0.001, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    }
    75% {
        -webkit-transform: matrix3d(1, -0.001, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(1, -0.001, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    }
    75.28% {
        -webkit-transform: matrix3d(1, -0.001, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(1, -0.001, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    }
    90.69% {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    }
    100% {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    }
}

.player-chat {
    -webkit-flex: 2;
    -ms-flex: 2;
    flex: 2;
    position: relative;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column
}

.player-chat__nav {
    font-size: 1.1em
}

.player-chat__nav ul {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.player-chat__nav ul li {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.player-chat__nav ul li.nav--current a {
    background-color: #0F3B4E;
    border-radius: 5px 5px 0 0;
    cursor: default
}

.player-chat__nav ul li.nav--current a, .player-chat__nav ul li.nav--current a:hover {
    color: rgba(29, 171, 242, 0.85);
    border-bottom-color: rgba(29, 171, 242, 0.3)
}

.player-chat__nav .icon {
    margin-right: .2em;
    font-size: 1.1em;
    position: relative;
    top: -.1em
}

.player-chat__nav__unread {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 100%;
    background-color: #1DABF2;
    text-indent: -999em;
    position: relative;
    top: 4px;
    transition: opacity 0.3s ease, -webkit-transform 0.3s cubic-bezier(0.17, 0.595, 0.34, 1.385);
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.17, 0.595, 0.34, 1.385);
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.17, 0.595, 0.34, 1.385), -webkit-transform 0.3s cubic-bezier(0.17, 0.595, 0.34, 1.385);
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0)
}

.player-chat__nav__unread--visible {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1)
}

.player-chat__nav a {
    display: block;
    position: relative;
    font-weight: bold;
    text-align: center;
    padding: .5em;
    background-color: #062939;
    color: rgba(29, 171, 242, 0.6);
    border-bottom: 2px solid rgba(29, 171, 242, 0.25);
    transition: color .3s ease, border-bottom-color .3s ease
}

.player-chat__nav a:hover {
    text-decoration: none;
    color: rgba(29, 171, 242, 0.8);
    border-bottom-color: rgba(29, 171, 242, 0.8)
}

.player-chat__pane {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    height: 1px;
    position: relative;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    background-color: #0F3B4E
}

.player-chat__pane--capped::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: block;
    background-image: linear-gradient(#082b38, rgba(8, 43, 56, 0));
    height: 50px;
    pointer-events: none;
    z-index: 10
}

.live-player-comments .loading-container {
    height: auto;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.live-player-comments__blank-slate {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    text-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding: 2em;
    line-height: 1.5;
    font-size: 1.2em;
    max-width: 28em;
    margin: 0 auto
}

.live-player-comments__blank-slate .blank-slate-icon {
    margin-bottom: 1.618rem;
    width: 156px
}

.live-player-comments__blank-slate p {
    margin-bottom: 0.53933rem
}

.live-player-comments__list {
    list-style: none;
    padding: 0;
    margin: 0;
    overflow-y: scroll;
    margin: 0 .5rem 0 1rem;
    padding-top: 1rem;
    padding-right: .5rem;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    height: 1px
}

.live-player-comments__list::-webkit-scrollbar {
    width: 7px
}

.live-player-comments__list::-webkit-scrollbar-thumb {
    background-color: rgba(18, 76, 99, 0.9);
    border-radius: 2em
}

.live-player-comments__list::-webkit-scrollbar-thumb:hover {
    background-color: #165d79
}

.live-player-comments__list::-webkit-scrollbar-thumb:window-inactive {
    background-color: rgba(18, 76, 99, 0.5)
}

.live-player-comment {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.85);
    overflow-wrap: break-word;
    word-break: break-word
}

.live-player-comment:not(:first-child):not(.live-player-comment--thread) {
    margin-top: 1rem
}

.live-player-comment:hover .live-player-comment__author {
    color: #fff
}

.live-player-comment .live-player-comment__avatar {
    width: 24px
}

.live-player-comment .live-player-comment__body {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    margin-left: .5rem;
    position: relative
}

.live-player-comment--thread .live-player-comment__body {
    margin-left: calc(24px + .5rem)
}

.live-player-comment--thread .live-player-comment__author {
    display: none
}

.live-player-comment__meta {
    line-height: 1;
    font-size: .9em;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.live-player-comment__meta .live-player-comment__time {
    margin-right: 5px
}

.live-player-comment__author {
    font-weight: bold;
    margin-right: 3px;
    transition: color .2s ease;
    color: #89a6b1
}

select {
    margin-bottom: 1em;
    /* padding: .25em; */
    border: 0;
    border-bottom: 2px solid currentcolor;
    font-weight: bold;
    letter-spacing: .1em;
    border-radius: 0;
    padding: .1em .5em;
    font-size: 14px;
    /*border: 1px solid #b1c9d8;*/
    color: #8e4294;
    border-radius: 4px;
    box-shadow: rgba(143, 177, 199, 0.3) 0 1px 1px;
    transition: box-shadow .2s ease;
    background-color: #fff;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

select:focus, select:active {
    outline: 0;
    border-bottom-color: #8e4294;
}

select::after {
    background: url("data:image/svg+xml;utf8,<svg fill='#666' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'> <path d='M7.41 7.84L12 12.42l4.59-4.58L18 9.25l-6 6-6-6z'/> <path d='M0-.75h24v24H0z' fill='none'/> </svg>"), no-repeat;
    content: "";
    height: 24px;
    width: 24px;
    position: absolute;
    top: 0;
    right: 0;
    transition-property: background;
}
.error{
    margin-bottom: 15px;
    background: #8e4294;
    color: #fff;
    font-size: 14px;
    border-radius: 5px;
}