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

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

body {
    line-height: 1
}

ol, ul {
    list-style: none
}

blockquote, q {
    quotes: none
}

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

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

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

::-webkit-scrollbar-thumb {
    background: #313543;
    border: 0 none #fff;
    border-radius: 50px
}

    ::-webkit-scrollbar-thumb:hover {
        background: #353a49
    }

    ::-webkit-scrollbar-thumb:active {
        background: #313543
    }

::-webkit-scrollbar-track {
    border: 0 none #fff;
    border-radius: 0;
    background: rgba(0,0,0,.1)
}

    ::-webkit-scrollbar-track:active, ::-webkit-scrollbar-track:hover {
        background: #282c37
    }

::-webkit-scrollbar-corner {
    background: transparent
}

body {
    font-family: "mastodon-font-sans-serif",sans-serif;
    background: #282c37;
    background-size: cover;
    background-attachment: fixed;
    font-size: 13px;
    line-height: 18px;
    font-weight: 400;
    color: #fff;
    padding-bottom: 20px;
    text-rendering: optimizelegibility;
    -webkit-font-feature-settings: "kern";
    font-feature-settings: "kern";
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    text-size-adjust: none;
    -webkit-tap-highlight-color: transparent
}

    body.system-font {
        font-family: system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,mastodon-font-sans-serif,sans-serif
    }

    body.app-body {
        position: absolute;
        width: 100%;
        height: 100%;
        padding: 0;
        background: #282c37
    }

    body.about-body, body.tag-body {
        background: #17191f;
        padding-bottom: 0
    }

    body.embed {
        background: transparent;
        margin: 0;
        padding-bottom: 0
    }

        body.embed .container {
            position: absolute;
            width: 100%;
            height: 100%;
            overflow: hidden
        }

    body.admin {
        background: #1f232b;
        position: fixed
    }

    body.admin, body.error {
        width: 100%;
        height: 100%;
        padding: 0
    }

    body.error {
        position: absolute;
        text-align: center;
        color: #9baec8;
        background: #282c37;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }

        body.error .dialog {
            vertical-align: middle;
            margin: 20px
        }
        

            body.error .dialog img {
                display: block;
                max-width: 470px;
                width: 100%;
                height: auto;
                margin-top: -120px
            }

            body.error .dialog h1 {
                font-size: 20px;
                line-height: 28px;
                font-weight: 400
            }

button {
    font-family: inherit;
    cursor: pointer
}

    button:focus {
        outline: none
    }

.app-holder, .app-holder > div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: 100%;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.container {
    width: 700px;
    margin: 0 auto;
    margin-top: 40px
}

@media screen and (max-width:740px) {
    .container {
        width: 100%;
        margin: 0
    }
}

.logo-container {
    margin: 100px auto;
    margin-bottom: 50px
}

@media screen and (max-width:400px) {
    .logo-container {
        margin: 30px auto;
        margin-bottom: 20px
    }
}

.logo-container h1 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

    .logo-container h1 img {
        height: 42px;
        margin-right: 10px
    }

    .logo-container h1 a {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        color: #fff;
        text-decoration: none;
        outline: 0;
        padding: 12px 16px;
        line-height: 32px;
        font-family: mastodon-font-display,sans-serif;
        font-weight: 500;
        font-size: 14px
    }

.compose-standalone .compose-form {
    width: 400px;
    margin: 0 auto;
    padding: 20px 0;
    margin-top: 40px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

@media screen and (max-width:400px) {
    .compose-standalone .compose-form {
        width: 100%;
        margin-top: 0;
        padding: 20px
    }
}

.account-header {
    width: 400px;
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 13px;
    line-height: 18px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 20px 0;
    padding-bottom: 0;
    margin-bottom: -30px;
    margin-top: 40px
}

@media screen and (max-width:440px) {
    .account-header {
        width: 100%;
        margin: 0;
        margin-bottom: 10px;
        padding: 20px;
        padding-bottom: 0
    }
}

.account-header .avatar {
    width: 40px;
    height: 40px;
    margin-right: 8px
}

    .account-header .avatar img {
        width: 100%;
        height: 100%;
        display: block;
        margin: 0;
        border-radius: 4px
    }

.account-header .name {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    color: #d9e1e8;
    width: calc(100% - 88px)
}

    .account-header .name .username {
        display: block;
        font-weight: 500;
        text-overflow: ellipsis;
        overflow: hidden
    }

.account-header .logout-link {
    display: block;
    font-size: 32px;
    line-height: 40px;
    margin-left: 8px
}

.no-list {
    list-style: none
}

    .no-list li {
        display: inline-block;
        margin: 0 5px
    }

.recovery-codes {
    list-style: none;
    margin: 0 auto
}

    .recovery-codes li {
        font-size: 125%;
        line-height: 1.5;
        letter-spacing: 1px
    }

.footer {
    text-align: center;
    margin-top: 30px;
    font-size: 12px;
    color: #8aa2b8
}

    .footer .domain {
        font-weight: 500
    }

        .footer .domain a {
            color: inherit;
            text-decoration: none
        }

    .footer .powered-by, .footer .single-user-login {
        font-weight: 400
    }

        .footer .powered-by a, .footer .single-user-login a {
            color: inherit;
            text-decoration: underline;
            font-weight: 500
        }

            .footer .powered-by a:hover, .footer .single-user-login a:hover {
                text-decoration: none
            }

.compact-header h1 {
    font-size: 24px;
    line-height: 28px;
    color: #9baec8;
    font-weight: 500;
    margin-bottom: 20px;
    padding: 0 10px;
    word-wrap: break-word
}

@media screen and (max-width:740px) {
    .compact-header h1 {
        text-align: center;
        padding: 20px 10px 0
    }
}

.compact-header h1 a {
    color: inherit;
    text-decoration: none
}

.compact-header h1 small {
    font-weight: 400;
    color: #d9e1e8
}

.compact-header h1 img {
    display: inline-block;
    margin-bottom: -5px;
    margin-right: 15px;
    width: 36px;
    height: 36px
}

.landing-strip, .memoriam-strip {
    background: rgba(25,27,34,.8);
    color: #9baec8;
    font-weight: 400;
    padding: 14px;
    border-radius: 4px;
    margin-bottom: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

    .landing-strip a, .landing-strip strong, .memoriam-strip a, .memoriam-strip strong {
        font-weight: 500
    }

        .landing-strip a:lang(ja), .landing-strip a:lang(ko), .landing-strip a:lang(zh-CN), .landing-strip a:lang(zh-HK), .landing-strip a:lang(zh-TW), .landing-strip strong:lang(ja), .landing-strip strong:lang(ko), .landing-strip strong:lang(zh-CN), .landing-strip strong:lang(zh-HK), .landing-strip strong:lang(zh-TW), .memoriam-strip a:lang(ja), .memoriam-strip a:lang(ko), .memoriam-strip a:lang(zh-CN), .memoriam-strip a:lang(zh-HK), .memoriam-strip a:lang(zh-TW), .memoriam-strip strong:lang(ja), .memoriam-strip strong:lang(ko), .memoriam-strip strong:lang(zh-CN), .memoriam-strip strong:lang(zh-HK), .memoriam-strip strong:lang(zh-TW) {
            font-weight: 700
        }

    .landing-strip a, .memoriam-strip a {
        color: inherit;
        text-decoration: underline
    }

    .landing-strip .logo, .memoriam-strip .logo {
        width: 30px;
        height: 30px;
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        margin-right: 15px
    }

@media screen and (max-width:740px) {
    .landing-strip, .memoriam-strip {
        margin-bottom: 0
    }
}

.memoriam-strip {
    background: rgba(0,0,0,.7)
}

.moved-strip {
    padding: 14px;
    border-radius: 4px;
    background: rgba(25,27,34,.8);
    color: #d9e1e8;
    font-weight: 400;
    margin-bottom: 20px
}

    .moved-strip a, .moved-strip strong {
        font-weight: 500
    }

        .moved-strip a:lang(ja), .moved-strip a:lang(ko), .moved-strip a:lang(zh-CN), .moved-strip a:lang(zh-HK), .moved-strip a:lang(zh-TW), .moved-strip strong:lang(ja), .moved-strip strong:lang(ko), .moved-strip strong:lang(zh-CN), .moved-strip strong:lang(zh-HK), .moved-strip strong:lang(zh-TW) {
            font-weight: 700
        }

    .moved-strip a {
        color: inherit;
        text-decoration: underline
    }

        .moved-strip a.mention, .moved-strip a.mention:active, .moved-strip a.mention:focus, .moved-strip a.mention:hover, .moved-strip a.mention span {
            text-decoration: none
        }

            .moved-strip a.mention:active span, .moved-strip a.mention:focus span, .moved-strip a.mention:hover span {
                text-decoration: underline
            }

.moved-strip__message {
    margin-bottom: 15px
}

    .moved-strip__message .fa {
        margin-right: 5px;
        color: #9baec8
    }

.moved-strip__card .detailed-status__display-avatar {
    position: relative;
    cursor: pointer
}

.moved-strip__card .detailed-status__display-name {
    margin-bottom: 0;
    text-decoration: none
}

    .moved-strip__card .detailed-status__display-name span {
        color: #2b90d9;
        font-weight: 400
    }

code {
    font-family: mastodon-font-monospace,monospace;
    font-weight: 400
}

.form-container {
    max-width: 400px;
    padding: 20px;
    margin: 0 auto
}

.simple_form .input {
    margin-bottom: 15px;
    overflow: hidden
}

.simple_form span.hint {
    display: block;
    color: #9baec8;
    font-size: 12px;
    margin-top: 4px
}

.simple_form h4 {
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 500;
    color: #9baec8;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid #393f4f
}

.simple_form p.hint {
    margin-bottom: 15px;
    color: #9baec8
}

    .simple_form p.hint.subtle-hint {
        text-align: center;
        font-size: 12px;
        line-height: 18px;
        margin-top: 15px;
        margin-bottom: 0;
        color: #9baec8
    }

        .simple_form p.hint.subtle-hint a {
            color: #2b90d9
        }

.simple_form .card {
    margin-bottom: 15px
}

.simple_form strong {
    font-weight: 500
}

    .simple_form strong:lang(ja), .simple_form strong:lang(ko), .simple_form strong:lang(zh-CN), .simple_form strong:lang(zh-HK), .simple_form strong:lang(zh-TW) {
        font-weight: 700
    }

.simple_form .label_input {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

    .simple_form .label_input label {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto
    }

    .simple_form .label_input input {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto
    }

.simple_form .input.with_label {
    padding: 15px 0;
    margin-bottom: 0
}

    .simple_form .input.with_label .label_input {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start
    }

    .simple_form .input.with_label.select .label_input {
        -webkit-box-align: initial;
        -ms-flex-align: initial;
        align-items: initial
    }

    .simple_form .input.with_label .label_input > label {
        font-family: inherit;
        font-size: 16px;
        color: #fff;
        display: block;
        padding-top: 5px;
        margin-bottom: 5px;
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        min-width: 150px;
        word-wrap: break-word
    }

        .simple_form .input.with_label .label_input > label.select {
            -webkit-box-flex: 0;
            -ms-flex: 0;
            flex: 0
        }

        .simple_form .input.with_label .label_input > label ~ * {
            margin-left: 10px
        }

    .simple_form .input.with_label ul {
        -webkit-box-flex: 390px;
        -ms-flex: 390px;
        flex: 390px
    }

    .simple_form .input.with_label.boolean {
        padding: initial;
        margin-bottom: 0
    }

        .simple_form .input.with_label.boolean .label_input > label {
            font-family: inherit;
            font-size: 14px;
            color: #fff;
            display: block;
            width: auto
        }

        .simple_form .input.with_label.boolean label.checkbox {
            position: relative;
            padding-left: 25px;
            -webkit-box-flex: 1;
            -ms-flex: 1 1 auto;
            flex: 1 1 auto
        }

.simple_form .input.with_block_label > label {
    font-family: inherit;
    font-size: 16px;
    color: #fff;
    display: block;
    padding-top: 5px
}

.simple_form .input.with_block_label .hint {
    margin-bottom: 15px
}

.simple_form .input.with_block_label li {
    float: left;
    width: 50%
}

.simple_form .fields-group {
    margin-bottom: 25px
}

.simple_form .input.radio_buttons .radio label {
    margin-bottom: 5px;
    font-family: inherit;
    font-size: 14px;
    color: #fff;
    display: block;
    width: auto
}

.simple_form .input.boolean {
    margin-bottom: 5px
}

    .simple_form .input.boolean label {
        font-family: inherit;
        font-size: 14px;
        color: #fff;
        display: block;
        width: auto
    }

        .simple_form .input.boolean label.checkbox {
            position: relative;
            padding-left: 25px;
            -webkit-box-flex: 1;
            -ms-flex: 1 1 auto;
            flex: 1 1 auto
        }

    .simple_form .input.boolean input[type=checkbox] {
        position: absolute;
        left: 0;
        top: 5px;
        margin: 0
    }

    .simple_form .input.boolean .hint {
        padding-left: 25px;
        margin-left: 0
    }

.simple_form .check_boxes .checkbox label {
    font-family: inherit;
    font-size: 14px;
    color: #fff;
    display: block;
    width: auto;
    position: relative;
    padding-top: 5px;
    padding-left: 25px;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto
}

.simple_form .check_boxes .checkbox input[type=checkbox] {
    position: absolute;
    left: 0;
    top: 5px;
    margin: 0
}

.simple_form input[type=email], .simple_form input[type=number], .simple_form input[type=password], .simple_form input[type=text], .simple_form textarea {
    background: transparent;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: 0;
    border-bottom: 2px solid #9baec8;
    border-radius: 2px 2px 0 0;
    padding: 7px 4px;
    font-size: 16px;
    color: #fff;
    display: block;
    width: 100%;
    outline: 0;
    font-family: inherit;
    resize: vertical
}

    .simple_form input[type=email]:invalid, .simple_form input[type=number]:invalid, .simple_form input[type=password]:invalid, .simple_form input[type=text]:invalid, .simple_form textarea:invalid {
        -webkit-box-shadow: none;
        box-shadow: none
    }

    .simple_form input[type=email]:focus:invalid, .simple_form input[type=number]:focus:invalid, .simple_form input[type=password]:focus:invalid, .simple_form input[type=text]:focus:invalid, .simple_form textarea:focus:invalid {
        border-bottom-color: #df405a
    }

    .simple_form input[type=email]:required:valid, .simple_form input[type=number]:required:valid, .simple_form input[type=password]:required:valid, .simple_form input[type=text]:required:valid, .simple_form textarea:required:valid {
        border-bottom-color: #79bd9a
    }

    .simple_form input[type=email]:active, .simple_form input[type=email]:focus, .simple_form input[type=number]:active, .simple_form input[type=number]:focus, .simple_form input[type=password]:active, .simple_form input[type=password]:focus, .simple_form input[type=text]:active, .simple_form input[type=text]:focus, .simple_form textarea:active, .simple_form textarea:focus {
        border-bottom-color: #2b90d9;
        background: rgba(0,0,0,.1)
    }

.simple_form .input.field_with_errors label {
    color: #df405a
}

.simple_form .input.field_with_errors input[type=email], .simple_form .input.field_with_errors input[type=password], .simple_form .input.field_with_errors input[type=text] {
    border-bottom-color: #df405a
}

.simple_form .input.field_with_errors .error {
    display: block;
    font-weight: 500;
    color: #df405a;
    margin-top: 4px
}

.simple_form .actions {
    margin-top: 30px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.simple_form .block-button, .simple_form .button, .simple_form button {
    display: block;
    width: 100%;
    border: 0;
    border-radius: 4px;
    background: #2b90d9;
    color: #fff;
    font-size: 18px;
    line-height: inherit;
    height: auto;
    padding: 10px;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    cursor: pointer;
    font-weight: 500;
    outline: 0;
    margin-bottom: 10px;
    margin-right: 10px
}

    .simple_form .block-button:last-child, .simple_form .button:last-child, .simple_form button:last-child {
        margin-right: 0
    }

    .simple_form .block-button:hover, .simple_form .button:hover, .simple_form button:hover {
        background-color: #419bdd
    }

    .simple_form .block-button:active, .simple_form .block-button:focus, .simple_form .button:active, .simple_form .button:focus, .simple_form button:active, .simple_form button:focus {
        background-color: #2482c7
    }

    .simple_form .block-button.negative, .simple_form .button.negative, .simple_form button.negative {
        background: #df405a
    }

        .simple_form .block-button.negative:hover, .simple_form .button.negative:hover, .simple_form button.negative:hover {
            background-color: #e3566d
        }

        .simple_form .block-button.negative:active, .simple_form .block-button.negative:focus, .simple_form .button.negative:active, .simple_form .button.negative:focus, .simple_form button.negative:active, .simple_form button.negative:focus {
            background-color: #db2a47
        }

.simple_form select {
    font-size: 16px;
    max-height: 29px
}

.simple_form .input-with-append {
    position: relative
}

    .simple_form .input-with-append .input input {
        padding-right: 127px
    }

    .simple_form .input-with-append .append {
        position: absolute;
        right: 0;
        top: 0;
        padding: 7px 4px;
        padding-bottom: 9px;
        font-size: 16px;
        color: #606984;
        font-family: inherit;
        pointer-events: none;
        cursor: default
    }

.flash-message {
    background: #393f4f;
    color: #9baec8;
    border-radius: 4px;
    padding: 15px 10px;
    margin-bottom: 30px;
    -webkit-box-shadow: 0 0 5px rgba(0,0,0,.2);
    box-shadow: 0 0 5px rgba(0,0,0,.2);
    text-align: center
}

    .flash-message p {
        margin-bottom: 15px
    }

    .flash-message .oauth-code {
        color: #d9e1e8;
        outline: 0;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        display: block;
        width: 100%;
        border: none;
        padding: 10px;
        font-family: mastodon-font-monospace,monospace;
        background: #282c37;
        color: #9baec8;
        font-size: 14px;
        margin: 0
    }

        .flash-message .oauth-code::-moz-focus-inner {
            border: 0
        }

        .flash-message .oauth-code::-moz-focus-inner, .flash-message .oauth-code:active, .flash-message .oauth-code:focus {
            outline: 0 !important
        }

        .flash-message .oauth-code:focus {
            background: #313543
        }

    .flash-message strong {
        font-weight: 500
    }

        .flash-message strong:lang(ja), .flash-message strong:lang(ko), .flash-message strong:lang(zh-CN), .flash-message strong:lang(zh-HK), .flash-message strong:lang(zh-TW) {
            font-weight: 700
        }

@media screen and (max-width:740px) and (min-width:441px) {
    .flash-message {
        margin-top: 40px
    }
}

.form-footer {
    margin-top: 30px;
    text-align: center
}

    .form-footer a {
        color: #9baec8;
        text-decoration: none
    }

        .form-footer a:hover {
            text-decoration: underline
        }

.follow-prompt, .oauth-prompt {
    margin-bottom: 30px;
    text-align: center;
    color: #9baec8
}

    .follow-prompt h2, .oauth-prompt h2 {
        font-size: 16px;
        margin-bottom: 30px
    }

    .follow-prompt strong, .oauth-prompt strong {
        color: #d9e1e8;
        font-weight: 500
    }

        .follow-prompt strong:lang(ja), .follow-prompt strong:lang(ko), .follow-prompt strong:lang(zh-CN), .follow-prompt strong:lang(zh-HK), .follow-prompt strong:lang(zh-TW), .oauth-prompt strong:lang(ja), .oauth-prompt strong:lang(ko), .oauth-prompt strong:lang(zh-CN), .oauth-prompt strong:lang(zh-HK), .oauth-prompt strong:lang(zh-TW) {
            font-weight: 700
        }

@media screen and (max-width:740px) and (min-width:441px) {
    .follow-prompt, .oauth-prompt {
        margin-top: 40px
    }
}

.qr-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start
}

.qr-code {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    background: #fff;
    padding: 4px;
    margin: 0 10px 20px 0;
    -webkit-box-shadow: 0 0 15px rgba(0,0,0,.2);
    box-shadow: 0 0 15px rgba(0,0,0,.2);
    display: inline-block
}

    .qr-code svg {
        display: block;
        margin: 0
    }

.qr-alternative {
    margin-bottom: 20px;
    color: #d9e1e8;
    -webkit-box-flex: 150px;
    -ms-flex: 150px;
    flex: 150px
}

    .qr-alternative samp {
        display: block;
        font-size: 14px
    }

.table-form p {
    margin-bottom: 15px
}

    .table-form p strong {
        font-weight: 500
    }

        .table-form p strong:lang(ja), .table-form p strong:lang(ko), .table-form p strong:lang(zh-CN), .table-form p strong:lang(zh-HK), .table-form p strong:lang(zh-TW) {
            font-weight: 700
        }

.simple_form .warning, .table-form .warning {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background: rgba(223,64,90,.5);
    color: #fff;
    text-shadow: 1px 1px 0 rgba(0,0,0,.3);
    -webkit-box-shadow: 0 2px 6px rgba(0,0,0,.4);
    box-shadow: 0 2px 6px rgba(0,0,0,.4);
    border-radius: 4px;
    padding: 10px;
    margin-bottom: 15px
}

    .simple_form .warning a, .table-form .warning a {
        color: #fff;
        text-decoration: underline
    }

        .simple_form .warning a:active, .simple_form .warning a:focus, .simple_form .warning a:hover, .table-form .warning a:active, .table-form .warning a:focus, .table-form .warning a:hover {
            text-decoration: none
        }

    .simple_form .warning strong, .table-form .warning strong {
        font-weight: 600;
        display: block;
        margin-bottom: 5px
    }

        .simple_form .warning strong:lang(ja), .simple_form .warning strong:lang(ko), .simple_form .warning strong:lang(zh-CN), .simple_form .warning strong:lang(zh-HK), .simple_form .warning strong:lang(zh-TW), .table-form .warning strong:lang(ja), .table-form .warning strong:lang(ko), .table-form .warning strong:lang(zh-CN), .table-form .warning strong:lang(zh-HK), .table-form .warning strong:lang(zh-TW) {
            font-weight: 700
        }

        .simple_form .warning strong .fa, .table-form .warning strong .fa {
            font-weight: 400
        }

.action-pagination {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

    .action-pagination .actions, .action-pagination .pagination {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto
    }

    .action-pagination .actions {
        padding: 30px 0;
        padding-right: 20px;
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto
    }

.post-follow-actions {
    text-align: center;
    color: #9baec8
}

    .post-follow-actions div {
        margin-bottom: 4px
    }

.card {
    background-color: #313543;
    background-size: cover;
    background-position: 50%;
    border-radius: 4px 4px 0 0;
    -webkit-box-shadow: 0 0 15px rgba(0,0,0,.2);
    box-shadow: 0 0 15px rgba(0,0,0,.2);
    overflow: hidden;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

    .card:after {
        background: rgba(23,25,31,.5);
        display: block;
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 1
    }

@media screen and (max-width:740px) {
    .card {
        border-radius: 0;
        -webkit-box-shadow: none;
        box-shadow: none
    }
}

.card .card__illustration {
    padding: 60px 0;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.card .card__bio, .card .card__illustration {
    position: relative;
    -webkit-box-flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.card .card__bio {
    max-width: 360px;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    background: rgba(23,25,31,.8);
    z-index: 2
}

.card.compact {
    padding: 30px 0;
    border-radius: 4px
}

    .card.compact .avatar {
        margin-bottom: 0
    }

        .card.compact .avatar img {
            -o-object-fit: cover;
            font-family: object-fit\:cover;
            object-fit: cover
        }

.card .name {
    font-size: 20px;
    line-height: 27px;
    color: #fff;
    padding: 10px 15px;
    padding-bottom: 0;
    font-weight: 500;
    position: relative;
    z-index: 2;
    margin-bottom: 30px
}

    .card .name, .card .name small {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis
    }

        .card .name small {
            font-size: 14px;
            color: #2b90d9;
            font-weight: 400
        }

.card .avatar {
    width: 120px;
    margin: 0 auto;
    position: relative;
    z-index: 2
}

    .card .avatar img {
        width: 120px;
        height: 120px;
        display: block;
        border-radius: 120px;
        -webkit-box-shadow: 0 0 15px rgba(0,0,0,.2);
        box-shadow: 0 0 15px rgba(0,0,0,.2)
    }

.card .controls {
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 2
}

    .card .controls .icon-button {
        color: hsla(0,0%,100%,.8);
        text-decoration: none;
        font-size: 13px;
        line-height: 13px;
        font-weight: 500
    }

        .card .controls .icon-button .fa {
            font-weight: 400;
            margin-right: 5px
        }

        .card .controls .icon-button:active, .card .controls .icon-button:focus, .card .controls .icon-button:hover {
            color: #fff
        }

.card .roles {
    margin-bottom: 30px;
    padding: 0 15px
}

.card .details-counters {
    margin-top: 30px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    width: 100%
}

.card .counter {
    width: 33.3%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    color: #9baec8;
    padding: 5px 10px 0;
    margin-bottom: 10px;
    border-right: 1px solid #313543;
    cursor: default;
    text-align: center;
    position: relative
}

    .card .counter a {
        display: block
    }

    .card .counter:last-child {
        border-right: 0
    }

    .card .counter:after {
        display: block;
        content: "";
        position: absolute;
        bottom: -10px;
        left: 0;
        width: 100%;
        border-bottom: 4px solid #9baec8;
        opacity: .5;
        -webkit-transition: all .4s ease;
        transition: all .4s ease
    }

    .card .counter.active:after {
        border-bottom: 4px solid #2b90d9;
        opacity: 1
    }

    .card .counter:hover:after {
        opacity: 1;
        -webkit-transition-duration: .1s;
        transition-duration: .1s
    }

    .card .counter a {
        text-decoration: none;
        color: inherit
    }

    .card .counter .counter-label {
        font-size: 12px;
        display: block;
        margin-bottom: 5px
    }

    .card .counter .counter-number {
        font-weight: 500;
        font-size: 18px;
        color: #fff;
        font-family: mastodon-font-display,sans-serif
    }

.card .bio {
    font-size: 14px;
    line-height: 18px;
    padding: 0 15px;
    color: #d9e1e8
}

@media screen and (max-width:480px) {
    .card {
        display: block
    }

        .card .card__bio {
            max-width: none
        }

        .card .name, .card .roles {
            text-align: center;
            margin-bottom: 15px
        }

        .card .bio {
            margin-bottom: 15px
        }
}

.pagination {
    padding: 30px 0;
    text-align: center;
    overflow: hidden
}

    .pagination .current, .pagination .gap, .pagination .next, .pagination .page, .pagination .prev, .pagination a {
        font-size: 14px;
        color: #fff;
        font-weight: 500;
        display: inline-block;
        padding: 6px 10px;
        text-decoration: none
    }

    .pagination .current {
        background: #fff;
        border-radius: 100px;
        color: #282c37;
        cursor: default;
        margin: 0 10px
    }

    .pagination .gap {
        cursor: default
    }

    .pagination .next, .pagination .prev {
        text-transform: uppercase;
        color: #d9e1e8
    }

    .pagination .prev {
        float: left;
        padding-left: 0
    }

        .pagination .prev .fa {
            display: inline-block;
            margin-right: 5px
        }

    .pagination .next {
        float: right;
        padding-right: 0
    }

        .pagination .next .fa {
            display: inline-block;
            margin-left: 5px
        }

    .pagination .disabled {
        cursor: default;
        color: #3d4455
    }

@media screen and (max-width:700px) {
    .pagination {
        padding: 30px 20px
    }

        .pagination .page {
            display: none
        }

        .pagination .next, .pagination .prev {
            display: inline-block
        }
}

.accounts-grid {
    -webkit-box-shadow: 0 0 15px rgba(0,0,0,.2);
    box-shadow: 0 0 15px rgba(0,0,0,.2);
    background: #ebebeb;
    border-radius: 0 0 4px 4px;
    padding: 20px 5px;
    padding-bottom: 10px;
    overflow: hidden;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    z-index: 2;
    position: relative
}

@media screen and (max-width:740px) {
    .accounts-grid {
        border-radius: 0;
        -webkit-box-shadow: none;
        box-shadow: none
    }
}

.accounts-grid .account-grid-card {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 335px;
    background: #fff;
    border-radius: 4px;
    color: #282c37;
    margin: 0 5px 10px;
    position: relative
}

@media screen and (max-width:740px) {
    .accounts-grid .account-grid-card {
        width: calc(100% - 10px)
    }
}

.accounts-grid .account-grid-card .account-grid-card__header {
    overflow: hidden;
    height: 100px;
    border-radius: 4px 4px 0 0;
    background-color: #313543;
    background-size: cover;
    background-position: 50%;
    position: relative
}

    .accounts-grid .account-grid-card .account-grid-card__header:after {
        background: rgba(23,25,31,.5);
        display: block;
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 1
    }

.accounts-grid .account-grid-card .account-grid-card__avatar {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 15px;
    position: absolute;
    z-index: 2;
    top: 58px;
    left: -2px
}

.accounts-grid .account-grid-card .avatar {
    width: 80px;
    height: 80px
}

    .accounts-grid .account-grid-card .avatar img {
        display: block;
        width: 80px;
        height: 80px;
        border-radius: 80px;
        border: 2px solid #fff;
        background: #fff
    }

.accounts-grid .account-grid-card .name {
    padding: 15px;
    padding-top: 10px;
    padding-left: 110px
}

    .accounts-grid .account-grid-card .name a {
        display: block;
        color: #282c37;
        text-decoration: none;
        text-overflow: ellipsis;
        overflow: hidden;
        font-weight: 500
    }

        .accounts-grid .account-grid-card .name a:hover .display_name {
            text-decoration: underline
        }

.accounts-grid .account-grid-card .display_name {
    font-size: 16px;
    display: block;
    text-overflow: ellipsis;
    overflow: hidden
}

.accounts-grid .account-grid-card .username {
    color: #737d99;
    font-size: 14px;
    font-weight: 400
}

.accounts-grid .account-grid-card .note {
    padding: 10px 15px;
    padding-top: 15px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #606984;
    word-wrap: break-word;
    min-height: 80px
}

.nothing-here {
    width: 100%;
    display: block;
    color: #9baec8;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    padding: 60px 0;
    padding-top: 55px;
    cursor: default
}

.account-card {
    padding: 14px 10px;
    background: #fff;
    border-radius: 4px;
    text-align: left;
    -webkit-box-shadow: 0 0 15px rgba(0,0,0,.2);
    box-shadow: 0 0 15px rgba(0,0,0,.2)
}

    .account-card .detailed-status__display-name {
        display: block;
        overflow: hidden;
        margin-bottom: 15px
    }

        .account-card .detailed-status__display-name:last-child {
            margin-bottom: 0
        }

        .account-card .detailed-status__display-name > div {
            float: left;
            margin-right: 10px;
            width: 48px;
            height: 48px
        }

        .account-card .detailed-status__display-name .avatar {
            display: block;
            border-radius: 4px
        }

        .account-card .detailed-status__display-name .display-name {
            display: block;
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            cursor: default
        }

            .account-card .detailed-status__display-name .display-name strong {
                font-weight: 500;
                color: #282c37
            }

                .account-card .detailed-status__display-name .display-name strong:lang(ja), .account-card .detailed-status__display-name .display-name strong:lang(ko), .account-card .detailed-status__display-name .display-name strong:lang(zh-CN), .account-card .detailed-status__display-name .display-name strong:lang(zh-HK), .account-card .detailed-status__display-name .display-name strong:lang(zh-TW) {
                    font-weight: 700
                }

            .account-card .detailed-status__display-name .display-name span {
                font-size: 14px;
                color: #9baec8
            }

        .account-card .detailed-status__display-name:hover .display-name strong {
            text-decoration: none
        }

    .account-card .account__header__content {
        font-size: 14px;
        color: #282c37
    }

.activity-stream-tabs {
    background: #fff;
    border-bottom: 1px solid #d9e1e8;
    position: relative;
    z-index: 2
}

    .activity-stream-tabs a {
        display: inline-block;
        padding: 15px;
        text-decoration: none;
        color: #2b90d9;
        text-transform: uppercase;
        font-weight: 500
    }

        .activity-stream-tabs a:active, .activity-stream-tabs a:focus, .activity-stream-tabs a:hover {
            color: #4ea2df
        }

        .activity-stream-tabs a.active {
            color: #282c37;
            cursor: default
        }

.account-role {
    display: inline-block;
    padding: 4px 6px;
    cursor: default;
    border-radius: 3px;
    font-size: 12px;
    line-height: 12px;
    font-weight: 500;
    color: #d9e1e8;
    background-color: rgba(217,225,232,.1);
    border: 1px solid rgba(217,225,232,.5)
}

    .account-role.moderator {
        color: #79bd9a;
        background-color: rgba(121,189,154,.1);
        border-color: rgba(121,189,154,.5)
    }

    .account-role.admin {
        color: #e87487;
        background-color: rgba(232,116,135,.1);
        border-color: rgba(232,116,135,.5)
    }

.activity-stream {
    clear: both;
    -webkit-box-shadow: 0 0 15px rgba(0,0,0,.2);
    box-shadow: 0 0 15px rgba(0,0,0,.2)
}

    .activity-stream .entry {
        background: #fff
    }

        .activity-stream .entry .detailed-status.light, .activity-stream .entry .status.light {
            border-bottom: 1px solid #d9e1e8;
            -webkit-animation: none;
            animation: none
        }

        .activity-stream .entry:last-child, .activity-stream .entry:last-child .detailed-status.light, .activity-stream .entry:last-child .status.light {
            border-bottom: 0;
            border-radius: 0 0 4px 4px
        }

        .activity-stream .entry:first-child, .activity-stream .entry:first-child .detailed-status.light, .activity-stream .entry:first-child .status.light {
            border-radius: 4px 4px 0 0
        }

            .activity-stream .entry:first-child:last-child, .activity-stream .entry:first-child:last-child .detailed-status.light, .activity-stream .entry:first-child:last-child .status.light {
                border-radius: 4px
            }

@media screen and (max-width:740px) {
    .activity-stream .entry, .activity-stream .entry .detailed-status.light, .activity-stream .entry .status.light {
        border-radius: 0 !important
    }
}

.activity-stream.with-header .entry:first-child, .activity-stream.with-header .entry:first-child .detailed-status.light, .activity-stream.with-header .entry:first-child .status.light {
    border-radius: 0
}

    .activity-stream.with-header .entry:first-child:last-child, .activity-stream.with-header .entry:first-child:last-child .detailed-status.light, .activity-stream.with-header .entry:first-child:last-child .status.light {
        border-radius: 0 0 4px 4px
    }

.activity-stream .status.light {
    padding: 14px 14px 14px 76px;
    position: relative;
    min-height: 48px;
    cursor: default
}

    .activity-stream .status.light .status__header {
        font-size: 15px
    }

        .activity-stream .status.light .status__header .status__meta {
            float: right;
            font-size: 14px
        }

            .activity-stream .status.light .status__header .status__meta .status__relative-time {
                color: #9baec8
            }

    .activity-stream .status.light .status__display-name {
        display: block;
        max-width: 100%;
        padding-right: 25px;
        color: #282c37
    }

    .activity-stream .status.light .status__avatar {
        position: absolute;
        left: 14px;
        top: 14px;
        width: 48px;
        height: 48px
    }

        .activity-stream .status.light .status__avatar > div {
            width: 48px;
            height: 48px
        }

        .activity-stream .status.light .status__avatar img {
            display: block;
            border-radius: 4px
        }

    .activity-stream .status.light .display-name {
        display: block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis
    }

        .activity-stream .status.light .display-name strong {
            font-weight: 500;
            color: #282c37
        }

            .activity-stream .status.light .display-name strong:lang(ja), .activity-stream .status.light .display-name strong:lang(ko), .activity-stream .status.light .display-name strong:lang(zh-CN), .activity-stream .status.light .display-name strong:lang(zh-HK), .activity-stream .status.light .display-name strong:lang(zh-TW) {
                font-weight: 700
            }

        .activity-stream .status.light .display-name span {
            font-size: 14px;
            color: #9baec8
        }

    .activity-stream .status.light .status__content {
        color: #282c37
    }

        .activity-stream .status.light .status__content a {
            color: #2b90d9
        }

            .activity-stream .status.light .status__content a.status__content__spoiler-link {
                color: #fff;
                background: #9baec8
            }

                .activity-stream .status.light .status__content a.status__content__spoiler-link:hover {
                    background: #b5c3d6
                }

.activity-stream .detailed-status.light {
    padding: 14px;
    background: #fff;
    cursor: default
}

    .activity-stream .detailed-status.light .detailed-status__display-name {
        display: block;
        overflow: hidden;
        margin-bottom: 15px
    }

        .activity-stream .detailed-status.light .detailed-status__display-name > div {
            float: left;
            margin-right: 10px
        }

        .activity-stream .detailed-status.light .detailed-status__display-name .display-name {
            display: block;
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis
        }

            .activity-stream .detailed-status.light .detailed-status__display-name .display-name strong {
                font-weight: 500;
                color: #282c37
            }

                .activity-stream .detailed-status.light .detailed-status__display-name .display-name strong:lang(ja), .activity-stream .detailed-status.light .detailed-status__display-name .display-name strong:lang(ko), .activity-stream .detailed-status.light .detailed-status__display-name .display-name strong:lang(zh-CN), .activity-stream .detailed-status.light .detailed-status__display-name .display-name strong:lang(zh-HK), .activity-stream .detailed-status.light .detailed-status__display-name .display-name strong:lang(zh-TW) {
                    font-weight: 700
                }

            .activity-stream .detailed-status.light .detailed-status__display-name .display-name span {
                font-size: 14px;
                color: #9baec8
            }

    .activity-stream .detailed-status.light .avatar {
        width: 48px;
        height: 48px
    }

        .activity-stream .detailed-status.light .avatar img {
            display: block;
            border-radius: 4px
        }

    .activity-stream .detailed-status.light .status__content {
        color: #282c37
    }

        .activity-stream .detailed-status.light .status__content a {
            color: #2b90d9
        }

            .activity-stream .detailed-status.light .status__content a.status__content__spoiler-link {
                color: #fff;
                background: #9baec8
            }

                .activity-stream .detailed-status.light .status__content a.status__content__spoiler-link:hover {
                    background: #b5c3d6
                }

    .activity-stream .detailed-status.light .detailed-status__meta {
        margin-top: 15px;
        color: #9baec8;
        font-size: 14px;
        line-height: 18px
    }

        .activity-stream .detailed-status.light .detailed-status__meta a {
            color: inherit
        }

        .activity-stream .detailed-status.light .detailed-status__meta span > span {
            font-weight: 500;
            font-size: 12px;
            margin-left: 6px;
            display: inline-block
        }

    .activity-stream .detailed-status.light .status-card {
        border-color: #e6ebf0;
        color: #8ea3c1
    }

        .activity-stream .detailed-status.light .status-card:hover {
            background: #e6ebf0
        }

    .activity-stream .detailed-status.light .status-card__description, .activity-stream .detailed-status.light .status-card__title {
        color: #282c37
    }

    .activity-stream .detailed-status.light .status-card__image {
        background: #d9e1e8
    }

.activity-stream .media-spoiler {
    background: #9baec8;
    color: #fff;
    -webkit-transition: all .1s linear;
    transition: all .1s linear
}

    .activity-stream .media-spoiler:active, .activity-stream .media-spoiler:focus, .activity-stream .media-spoiler:hover {
        background: #8ba1bf;
        color: unset
    }

.activity-stream .pre-header {
    padding: 14px 0;
    padding-left: 76px;
    padding-bottom: 0;
    margin-bottom: -4px;
    color: #9baec8;
    font-size: 14px;
    position: relative
}

    .activity-stream .pre-header .pre-header__icon {
        position: absolute;
        left: 46px
    }

    .activity-stream .pre-header .status__display-name.muted strong {
        color: #9baec8
    }

.activity-stream .open-in-web-link {
    text-decoration: none
}

    .activity-stream .open-in-web-link:hover {
        text-decoration: underline
    }

.embed .activity-stream {
    -webkit-box-shadow: none;
    box-shadow: none
}

    .embed .activity-stream .entry .detailed-status.light {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start
    }

        .embed .activity-stream .entry .detailed-status.light .detailed-status__display-name {
            -webkit-box-flex: 1;
            -ms-flex: 1;
            flex: 1;
            margin: 0 5px 15px 0
        }

        .embed .activity-stream .entry .detailed-status.light .button.button-secondary.logo-button {
            -webkit-box-flex: 0;
            -ms-flex: 0 auto;
            flex: 0 auto;
            font-size: 14px
        }

            .embed .activity-stream .entry .detailed-status.light .button.button-secondary.logo-button svg {
                width: 20px;
                height: auto;
                vertical-align: middle;
                margin-right: 5px
            }

                .embed .activity-stream .entry .detailed-status.light .button.button-secondary.logo-button svg path:first-child {
                    fill: #9baec8
                }

                .embed .activity-stream .entry .detailed-status.light .button.button-secondary.logo-button svg path:last-child {
                    fill: #fff
                }

            .embed .activity-stream .entry .detailed-status.light .button.button-secondary.logo-button:active svg path:first-child, .embed .activity-stream .entry .detailed-status.light .button.button-secondary.logo-button:focus svg path:first-child, .embed .activity-stream .entry .detailed-status.light .button.button-secondary.logo-button:hover svg path:first-child {
                fill: #a8b9cf
            }

        .embed .activity-stream .entry .detailed-status.light .detailed-status__meta, .embed .activity-stream .entry .detailed-status.light .status__content {
            -webkit-box-flex: 100%;
            -ms-flex: 100%;
            flex: 100%
        }

.app-body {
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar
}

.button {
    background-color: #2588d0;
    border: 10px none;
    border-radius: 4px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    height: 36px;
    letter-spacing: 0;
    line-height: 36px;
    overflow: hidden;
    padding: 0 16px;
    position: relative;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    text-overflow: ellipsis;
    -webkit-transition: all .1s ease-in;
    transition: all .1s ease-in;
    width: auto
}

    .button:active, .button:focus, .button:hover {
        background-color: #49a0de;
        -webkit-transition: all .2s ease-out;
        transition: all .2s ease-out
    }

    .button:disabled {
        background-color: #9baec8;
        cursor: default
    }

    .button.button-alternative {
        font-size: 16px;
        line-height: 36px;
        height: auto;
        color: #282c37;
        background: #9baec8;
        text-transform: none;
        padding: 4px 16px
    }

        .button.button-alternative:active, .button.button-alternative:focus, .button.button-alternative:hover {
            background-color: #a8b9cf
        }

    .button.button-secondary {
        font-size: 16px;
        line-height: 36px;
        height: auto;
        color: #9baec8;
        text-transform: none;
        background: transparent;
        padding: 3px 15px;
        border-radius: 4px;
        border: 1px solid #9baec8
    }

        .button.button-secondary:active, .button.button-secondary:focus, .button.button-secondary:hover {
            border-color: #a8b9cf;
            color: #a8b9cf
        }

    .button.button--block {
        display: block;
        width: 100%
    }

.column__wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    position: relative
}

.column-icon {
    background: #313543;
    color: #9baec8;
    cursor: pointer;
    font-size: 16px;
    padding: 15px;
    position: absolute;
    right: 0;
    top: -48px;
    z-index: 3
}

    .column-icon:hover {
        color: #b2c1d5
    }

.icon-button {
    display: inline-block;
    padding: 0;
    color: #606984;
    border: none;
    background: transparent;
    cursor: pointer;
    -webkit-transition: color .1s ease-in;
    transition: color .1s ease-in
}

    .icon-button:active, .icon-button:focus, .icon-button:hover {
        color: #707b97;
        -webkit-transition: color .2s ease-out;
        transition: color .2s ease-out
    }

    .icon-button.disabled {
        color: #444b5d;
        cursor: default
    }

    .icon-button.active {
        color: #2b90d9
    }

    .icon-button::-moz-focus-inner {
        border: 0
    }

    .icon-button::-moz-focus-inner, .icon-button:active, .icon-button:focus {
        outline: 0 !important
    }

    .icon-button.inverted {
        color: #707b97
    }

        .icon-button.inverted:active, .icon-button.inverted:focus, .icon-button.inverted:hover {
            color: #606984
        }

        .icon-button.inverted.disabled {
            color: #9baec8
        }

        .icon-button.inverted.active {
            color: #2b90d9
        }

            .icon-button.inverted.active.disabled {
                color: #63ade3
            }

    .icon-button.overlayed {
        -webkit-box-sizing: content-box;
        box-sizing: content-box;
        background: rgba(0,0,0,.6);
        color: hsla(0,0%,100%,.7);
        border-radius: 4px;
        padding: 2px
    }

        .icon-button.overlayed:hover {
            background: rgba(0,0,0,.9)
        }

.text-icon-button {
    color: #707b97;
    border: none;
    background: transparent;
    cursor: pointer;
    font-weight: 600;
    font-size: 11px;
    padding: 0 3px;
    line-height: 27px;
    outline: 0;
    -webkit-transition: color .1s ease-in;
    transition: color .1s ease-in
}

    .text-icon-button:active, .text-icon-button:focus, .text-icon-button:hover {
        color: #606984;
        -webkit-transition: color .2s ease-out;
        transition: color .2s ease-out
    }

    .text-icon-button.disabled {
        color: #444b5d;
        cursor: default
    }

    .text-icon-button.active {
        color: #2b90d9
    }

    .text-icon-button::-moz-focus-inner {
        border: 0
    }

    .text-icon-button::-moz-focus-inner, .text-icon-button:active, .text-icon-button:focus {
        outline: 0 !important
    }

.dropdown-menu {
    position: absolute
}

.dropdown--active .icon-button {
    color: #2b90d9
}

@media screen and (min-width:631px) {
    .dropdown--active:after {
        content: "";
        display: block;
        position: absolute;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 4.5px 7.8px;
        border-color: transparent transparent #d9e1e8;
        bottom: 8px;
        right: 104px
    }
}

.invisible {
    font-size: 0;
    line-height: 0;
    display: inline-block;
    width: 0;
    height: 0;
    position: absolute
}

    .invisible img, .invisible svg {
        margin: 0 !important;
        border: 0 !important;
        padding: 0 !important;
        width: 0 !important;
        height: 0 !important
    }

.ellipsis:after {
    content: "\2026"
}

.lightbox .icon-button {
    color: #282c37
}

.compose-form {
    padding: 10px
}

.compose-form__warning {
    color: #2c3c49;
    margin-bottom: 15px;
    background: #9baec8;
    -webkit-box-shadow: 0 2px 6px rgba(0,0,0,.3);
    box-shadow: 0 2px 6px rgba(0,0,0,.3);
    padding: 8px 10px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 400
}

    .compose-form__warning strong {
        color: #2c3c49;
        font-weight: 500
    }

        .compose-form__warning strong:lang(ja), .compose-form__warning strong:lang(ko), .compose-form__warning strong:lang(zh-CN), .compose-form__warning strong:lang(zh-HK), .compose-form__warning strong:lang(zh-TW) {
            font-weight: 700
        }

    .compose-form__warning a {
        color: #425978;
        font-weight: 500;
        text-decoration: underline
    }

        .compose-form__warning a:active, .compose-form__warning a:focus, .compose-form__warning a:hover {
            text-decoration: none
        }

.compose-form__modifiers {
    color: #282c37;
    font-family: inherit;
    font-size: 14px;
    background: #fff;
    border-radius: 0 0 4px
}

.compose-form__buttons-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.compose-form__buttons {
    padding: 10px;
    background: #ebebeb;
    -webkit-box-shadow: inset 0 5px 5px rgba(0,0,0,.05);
    box-shadow: inset 0 5px 5px rgba(0,0,0,.05);
    border-radius: 0 0 4px 4px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

    .compose-form__buttons .icon-button {
        -webkit-box-sizing: content-box;
        box-sizing: content-box;
        padding: 0 3px
    }

.compose-form__upload-button-icon {
    line-height: 27px
}

.compose-form__sensitive-button {
    display: none
}

    .compose-form__sensitive-button.compose-form__sensitive-button--visible {
        display: block
    }

    .compose-form__sensitive-button .compose-form__sensitive-button__icon {
        line-height: 27px
    }

.compose-form__upload-wrapper {
    overflow: hidden
}

.compose-form__uploads-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    padding: 5px;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.compose-form__upload {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 0px;
    flex: 1 1 0;
    min-width: 40%;
    margin: 5px
}

.compose-form__upload-description {
    position: absolute;
    z-index: 2;
    bottom: 0;
    left: 0;
    right: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0,rgba(0,0,0,.8)),color-stop(80%,rgba(0,0,0,.35)),to(transparent));
    background: linear-gradient(0deg,rgba(0,0,0,.8),rgba(0,0,0,.35) 80%,transparent);
    padding: 10px;
    opacity: 0;
    -webkit-transition: opacity .1s ease;
    transition: opacity .1s ease
}

    .compose-form__upload-description input {
        background: transparent;
        color: #d9e1e8;
        border: 0;
        padding: 0;
        margin: 0;
        width: 100%;
        font-family: inherit;
        font-size: 14px;
        font-weight: 500
    }

        .compose-form__upload-description input:focus {
            color: #fff
        }

        .compose-form__upload-description input::-webkit-input-placeholder {
            opacity: .54;
            color: #d9e1e8
        }

        .compose-form__upload-description input:-ms-input-placeholder, .compose-form__upload-description input::-ms-input-placeholder {
            opacity: .54;
            color: #d9e1e8
        }

        .compose-form__upload-description input::placeholder {
            opacity: .54;
            color: #d9e1e8
        }

    .compose-form__upload-description.active {
        opacity: 1
    }

.compose-form__upload .icon-button {
    mix-blend-mode: difference
}

.compose-form__upload-thumbnail {
    border-radius: 4px;
    background-position: 50%;
    background-size: cover;
    background-repeat: no-repeat;
    height: 100px;
    width: 100%
}

.compose-form__label {
    display: block;
    line-height: 24px;
    vertical-align: middle
}

    .compose-form__label.with-border {
        border-top: 1px solid #282c37;
        padding-top: 10px
    }

    .compose-form__label .compose-form__label__text {
        display: inline-block;
        vertical-align: middle;
        margin-bottom: 14px;
        margin-left: 8px;
        color: #9baec8
    }

.compose-form__textarea, .follow-form__input {
    background: #fff
}

    .compose-form__textarea:disabled, .follow-form__input:disabled {
        background: #d9e1e8
    }

.compose-form__autosuggest-wrapper {
    position: relative
}

    .compose-form__autosuggest-wrapper .emoji-picker-dropdown {
        position: absolute;
        right: 5px;
        top: 5px
    }

.compose-form__publish {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    min-width: 0
}

.compose-form__publish-button-wrapper {
    overflow: hidden;
    padding-top: 10px
}

.emojione {
    display: inline-block;
    font-family: object-fit\:contain,inherit;
    vertical-align: middle;
    -o-object-fit: contain;
    object-fit: contain;
    margin: -.2ex .15em .2ex;
    width: 16px;
    height: 16px
}

    .emojione img {
        width: auto
    }

.reply-indicator {
    border-radius: 4px 4px 0 0;
    position: relative;
    bottom: -2px;
    background: #9baec8;
    padding: 10px
}

.reply-indicator__header {
    margin-bottom: 5px;
    overflow: hidden
}

.reply-indicator__cancel {
    float: right;
    line-height: 24px
}

.reply-indicator__display-name {
    color: #282c37;
    display: block;
    max-width: 100%;
    line-height: 24px;
    overflow: hidden;
    padding-right: 25px;
    text-decoration: none
}

.reply-indicator__display-avatar {
    float: left;
    margin-right: 5px
}

.status__content--with-action {
    cursor: pointer
}

.reply-indicator__content, .status__content {
    font-size: 15px;
    line-height: 20px;
    word-wrap: break-word;
    font-weight: 400;
    overflow: hidden
}

    .reply-indicator__content:focus, .status__content:focus {
        outline: 0
    }

    .reply-indicator__content.status__content--with-spoiler, .status__content.status__content--with-spoiler {
        white-space: normal
    }

        .reply-indicator__content.status__content--with-spoiler .status__content__text, .status__content.status__content--with-spoiler .status__content__text {
            white-space: nowrap
        }

    .reply-indicator__content .emojione, .status__content .emojione {
        width: 20px;
        height: 20px;
        margin: -3px 0 0
    }

    .reply-indicator__content p, .status__content p {
        margin-bottom: 20px
    }

        .reply-indicator__content p:last-child, .status__content p:last-child {
            margin-bottom: 0
        }

    .reply-indicator__content a, .status__content a {
        color: #d9e1e8;
        text-decoration: none
    }

        .reply-indicator__content a:hover, .status__content a:hover {
            text-decoration: underline
        }

            .reply-indicator__content a:hover .fa, .status__content a:hover .fa {
                color: #858ea6
            }

        .reply-indicator__content a.mention:hover, .status__content a.mention:hover {
            text-decoration: none
        }

            .reply-indicator__content a.mention:hover span, .status__content a.mention:hover span {
                text-decoration: underline
            }

        .reply-indicator__content a .fa, .status__content a .fa {
            color: #687390
        }

    .reply-indicator__content .status__content__spoiler-link, .status__content .status__content__spoiler-link {
        background: #687390
    }

        .reply-indicator__content .status__content__spoiler-link:hover, .status__content .status__content__spoiler-link:hover {
            background: #707b97;
            text-decoration: none
        }

    .reply-indicator__content .status__content__text, .status__content .status__content__text {
        display: none
    }

        .reply-indicator__content .status__content__text.status__content__text--visible, .status__content .status__content__text.status__content__text--visible {
            display: block
        }

.status__content__spoiler-link {
    display: inline-block;
    border-radius: 2px;
    background: transparent;
    border: 0;
    color: #393f4f;
    font-weight: 500;
    font-size: 11px;
    padding: 0 6px;
    text-transform: uppercase;
    line-height: inherit;
    cursor: pointer
}

.status__prepend-icon-wrapper {
    left: -26px;
    position: absolute
}

.focusable:focus {
    outline: 0;
    background: #313543
}

    .focusable:focus .status.status-direct {
        background: #42485a
    }

    .focusable:focus .detailed-status, .focusable:focus .detailed-status__action-bar {
        background: #393f4f
    }

.status {
    padding: 8px 10px;
    padding-left: 68px;
    position: relative;
    min-height: 48px;
    border-bottom: 1px solid #393f4f;
    cursor: default;
    opacity: 1;
    -webkit-animation: fade .15s linear;
    animation: fade .15s linear
}

@supports (-ms-overflow-style:-ms-autohiding-scrollbar) {
    .status {
        padding-right: 26px
    }
}

@-webkit-keyframes fade {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes fade {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.status .video-player {
    margin-top: 8px
}

.status.status-direct {
    background: #393f4f
}

    .status.status-direct .icon-button.disabled {
        color: #4a5266
    }

.status.light .status__relative-time {
    color: #9baec8
}

.status.light .display-name strong, .status.light .status__display-name {
    color: #282c37
}

.status.light .display-name span {
    color: #9baec8
}

.status.light .status__content {
    color: #282c37
}

    .status.light .status__content a {
        color: #2b90d9
    }

        .status.light .status__content a.status__content__spoiler-link {
            color: #fff;
            background: #9baec8
        }

            .status.light .status__content a.status__content__spoiler-link:hover {
                background: #b5c3d6
            }

.notification-favourite .status.status-direct {
    background: transparent
}

    .notification-favourite .status.status-direct .icon-button.disabled {
        color: #444b5d
    }

.status__relative-time {
    color: #606984;
    float: right;
    font-size: 14px
}

.status__display-name {
    color: #606984
}

.status__info .status__display-name {
    display: block;
    max-width: 100%;
    padding-right: 25px
}

.status__info {
    font-size: 15px
}

.status-check-box {
    border-bottom: 1px solid #d9e1e8;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

    .status-check-box .status__content {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
        padding: 10px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.status-check-box-toggle {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 10px
}

.status__prepend {
    margin-left: 68px;
    color: #606984;
    padding: 8px 0;
    padding-bottom: 2px;
    font-size: 14px;
    position: relative
}

    .status__prepend .status__display-name strong {
        color: #606984
    }

    .status__prepend > span {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis
    }

.status__action-bar {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-top: 10px
}

.status__action-bar-button {
    float: left;
    margin-right: 18px
}

.status__action-bar-dropdown {
    float: left;
    height: 23.15px;
    width: 23.15px
}

.detailed-status__action-bar-dropdown {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: relative
}

.detailed-status {
    background: #313543;
    padding: 14px 10px
}

    .detailed-status .status__content {
        font-size: 19px;
        line-height: 24px
    }

        .detailed-status .status__content .emojione {
            width: 24px;
            height: 24px;
            margin: -3px 0 0
        }

    .detailed-status .video-player {
        margin-top: 8px
    }

.detailed-status__meta {
    margin-top: 15px;
    color: #606984;
    font-size: 14px;
    line-height: 18px
}

.detailed-status__action-bar {
    background: #313543;
    border-top: 1px solid #393f4f;
    border-bottom: 1px solid #393f4f;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    padding: 10px 0
}

.detailed-status__link {
    color: inherit;
    text-decoration: none
}

.detailed-status__favorites, .detailed-status__reblogs {
    display: inline-block;
    font-weight: 500;
    font-size: 12px;
    margin-left: 6px
}

.reply-indicator__content {
    color: #282c37;
    font-size: 14px
}

    .reply-indicator__content a {
        color: #535b72
    }

.account {
    padding: 10px;
    border-bottom: 1px solid #393f4f
}

    .account .account__display-name {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
        display: block;
        color: #9baec8;
        overflow: hidden;
        text-decoration: none;
        font-size: 14px
    }

.account__wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.account__avatar-wrapper {
    float: left;
    margin-left: 12px;
    margin-right: 12px
}

.account__avatar {
    border-radius: 4px;
    background: transparent no-repeat;
    background-position: 50%;
    background-clip: padding-box;
    position: relative;
    cursor: pointer
}

.account__avatar-inline {
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px
}

.account__avatar-overlay {
    width: 48px;
    height: 48px;
    background-size: 48px 48px
}

.account__avatar-overlay-base {
    border-radius: 4px;
    background: transparent no-repeat;
    background-position: 50%;
    background-clip: padding-box;
    width: 36px;
    height: 36px;
    background-size: 36px 36px
}

.account__avatar-overlay-overlay {
    border-radius: 4px;
    background: transparent no-repeat;
    background-position: 50%;
    background-clip: padding-box;
    width: 24px;
    height: 24px;
    background-size: 24px 24px;
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 1
}

.account__relationship {
    height: 18px;
    padding: 10px;
}

.account__header {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    background: #313543;
    text-align: center;
    background-size: cover;
    background-position: 50%;
    position: relative
}

    .account__header.inactive {
        opacity: .5
    }

        .account__header.inactive .account__header__avatar {
            -webkit-filter: grayscale(100%);
            filter: grayscale(100%)
        }

        .account__header.inactive .account__header__username {
            color: #9baec8
        }

    .account__header > div {
        background: rgba(49,53,67,.5);
        padding: 20px 10px
    }

    .account__header .account__header__content {
        color: #d9e1e8
    }

    .account__header .account__header__display-name {
        color: #fff;
        display: inline-block;
        width: 100%;
        font-size: 20px;
        line-height: 27px;
        font-weight: 500;
        overflow: hidden;
        text-overflow: ellipsis
    }

    .account__header .account__header__username {
        color: #2b90d9;
        font-size: 14px;
        font-weight: 400;
        display: block;
        margin-bottom: 10px;
        overflow: hidden;
        text-overflow: ellipsis
    }

.account__disclaimer {
    padding: 10px;
    border-top: 1px solid #393f4f;
    color: #606984
}

    .account__disclaimer strong {
        font-weight: 500
    }

        .account__disclaimer strong:lang(ja), .account__disclaimer strong:lang(ko), .account__disclaimer strong:lang(zh-CN), .account__disclaimer strong:lang(zh-HK), .account__disclaimer strong:lang(zh-TW) {
            font-weight: 700
        }

    .account__disclaimer a {
        font-weight: 500;
        color: inherit;
        text-decoration: underline
    }

        .account__disclaimer a:active, .account__disclaimer a:focus, .account__disclaimer a:hover {
            text-decoration: none
        }

.account__header__content {
    color: #9baec8;
    font-size: 14px;
    font-weight: 400;
    overflow: hidden;
    word-break: normal;
    word-wrap: break-word
}

    .account__header__content p {
        margin-bottom: 20px
    }

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

    .account__header__content a {
        color: inherit;
        text-decoration: underline
    }

        .account__header__content a:hover {
            text-decoration: none
        }

.account__header__display-name .emojione {
    width: 25px;
    height: 25px
}

.account__action-bar {
    border-top: 1px solid #393f4f;
    border-bottom: 1px solid #393f4f;
    line-height: 36px;
    overflow: hidden;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.account__action-bar-dropdown {
    -webkit-box-flex: 0;
    -ms-flex: 0 1 calc(50% - 140px);
    flex: 0 1 calc(50% - 140px);
    padding: 10px
}

    .account__action-bar-dropdown .dropdown--active .dropdown__content.dropdown__right {
        left: 6px;
        right: auto
    }

    .account__action-bar-dropdown .dropdown--active:after {
        bottom: auto;
        margin-left: 11px;
        margin-top: -7px;
        right: auto
    }

.account__action-bar-links {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    line-height: 18px
}

.account__action-bar__tab {
    text-decoration: none;
    overflow: hidden;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 80px;
    flex: 0 1 80px;
    border-left: 1px solid #393f4f;
    padding: 10px 5px
}

    .account__action-bar__tab > span {
        display: block;
        text-transform: uppercase;
        font-size: 11px;
        color: #9baec8
    }

    .account__action-bar__tab strong {
        display: block;
        font-size: 15px;
        font-weight: 500;
        color: #fff
    }

        .account__action-bar__tab strong:lang(ja), .account__action-bar__tab strong:lang(ko), .account__action-bar__tab strong:lang(zh-CN), .account__action-bar__tab strong:lang(zh-HK), .account__action-bar__tab strong:lang(zh-TW) {
            font-weight: 700
        }

    .account__action-bar__tab abbr {
        color: #606984
    }

.account__header__avatar {
    background-size: 90px 90px;
    display: block;
    height: 90px;
    margin: 0 auto 10px;
    overflow: hidden;
    width: 90px
}

.account-authorize {
    padding: 14px 10px
}

    .account-authorize .detailed-status__display-name {
        display: block;
        margin-bottom: 15px;
        overflow: hidden
    }

.account-authorize__avatar {
    float: left;
    margin-right: 10px
}

.account__display-name, .detailed-status__application, .detailed-status__datetime, .detailed-status__display-name, .status__display-name, .status__relative-time {
    text-decoration: none
}

    .account__display-name strong, .status__display-name strong {
        color: #fff
    }

.muted .emojione {
    opacity: .5
}

.account__display-name:hover strong, .detailed-status__display-name:hover strong, .reply-indicator__display-name:hover strong, .status__display-name:hover strong {
    text-decoration: underline
}

.account__display-name strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis
}

.detailed-status__application, .detailed-status__datetime {
    color: inherit
}

.detailed-status__display-name {
    color: #d9e1e8;
    display: block;
    line-height: 24px;
    margin-bottom: 15px;
    overflow: hidden
}

    .detailed-status__display-name span, .detailed-status__display-name strong {
        display: block;
        text-overflow: ellipsis;
        overflow: hidden
    }

    .detailed-status__display-name strong {
        font-size: 16px;
        color: #fff
    }

.detailed-status__display-avatar {
    float: left;
    margin-right: 10px
}

.status__avatar {
    height: 48px;
    left: 10px;
    position: absolute;
    top: 10px;
    width: 48px
}

.muted .status__content a, .muted .status__content p, .muted .status__display-name strong {
    color: #606984
}

.muted .status__avatar {
    opacity: .5
}

.muted a.status__content__spoiler-link {
    background: #606984;
    color: #313543
}

    .muted a.status__content__spoiler-link:hover {
        background: #66718d;
        text-decoration: none
    }

.notification__message {
    margin-left: 68px;
    padding: 8px 0;
    padding-bottom: 0;
    cursor: default;
    color: #9baec8;
    font-size: 15px;
    position: relative
}

    .notification__message .fa {
        color: #2b90d9
    }

    .notification__message > span {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis
    }

.notification__favourite-icon-wrapper {
    left: -26px;
    position: absolute
}

    .notification__favourite-icon-wrapper .star-icon, .star-icon.active {
        color: #ca8f04
    }

.notification__display-name {
    color: inherit;
    font-weight: 500;
    text-decoration: none
}

    .notification__display-name:hover {
        color: #fff;
        text-decoration: underline
    }

.display-name {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.display-name__html {
    font-weight: 500
}

.display-name__account {
    font-size: 14px
}

.detailed-status__datetime:hover, .status__relative-time:hover {
    text-decoration: underline
}

.image-loader {
    position: relative
}

    .image-loader.image-loader--loading .image-loader__preview-canvas {
        -webkit-filter: blur(2px);
        filter: blur(2px)
    }

    .image-loader .image-loader__img {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        max-width: 100%;
        max-height: 100%;
        background-image: none
    }

    .image-loader.image-loader--amorphous {
        position: static
    }

        .image-loader.image-loader--amorphous .image-loader__preview-canvas {
            display: none
        }

        .image-loader.image-loader--amorphous .image-loader__img {
            position: static;
            width: auto;
            height: auto
        }

.navigation-bar {
    padding: 10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    cursor: default;
    color: #9baec8
}

    .navigation-bar strong {
        color: #fff
    }

    .navigation-bar .permalink {
        text-decoration: none
    }

    .navigation-bar .icon-button {
        pointer-events: none;
        opacity: 0
    }

.navigation-bar__profile {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    margin-left: 8px;
    overflow: hidden
}

.navigation-bar__profile-account {
    display: block;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis
}

.navigation-bar__profile-edit {
    color: inherit;
    text-decoration: none
}

.dropdown {
    display: inline-block
}

.dropdown__content {
    display: none;
    position: absolute
}

.dropdown-menu__separator {
    border-bottom: 1px solid #c0cdd9;
    margin: 5px 7px 6px;
    height: 0
}

.dropdown-menu {
    background: #d9e1e8;
    padding: 4px 0;
    border-radius: 4px;
    -webkit-box-shadow: 2px 4px 15px rgba(0,0,0,.4);
    box-shadow: 2px 4px 15px rgba(0,0,0,.4)
}

    .dropdown-menu ul {
        list-style: none
    }

.dropdown-menu__arrow {
    position: absolute;
    width: 0;
    height: 0;
    border: 0 solid transparent
}

    .dropdown-menu__arrow.left {
        right: -5px;
        margin-top: -5px;
        border-width: 5px 0 5px 5px;
        border-left-color: #d9e1e8
    }

    .dropdown-menu__arrow.top {
        bottom: -5px;
        margin-left: -13px;
        border-width: 5px 7px 0;
        border-top-color: #d9e1e8
    }

    .dropdown-menu__arrow.bottom {
        top: -5px;
        margin-left: -13px;
        border-width: 0 7px 5px;
        border-bottom-color: #d9e1e8
    }

    .dropdown-menu__arrow.right {
        left: -5px;
        margin-top: -5px;
        border-width: 5px 5px 5px 0;
        border-right-color: #d9e1e8
    }

.dropdown-menu__item a {
    font-size: 13px;
    line-height: 18px;
    display: block;
    padding: 4px 14px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-decoration: none;
    background: #d9e1e8;
    color: #282c37;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .dropdown-menu__item a:active, .dropdown-menu__item a:focus, .dropdown-menu__item a:hover {
        background: #2b90d9;
        color: #d9e1e8;
        outline: 0
    }

.dropdown--active .dropdown__content {
    display: block;
    line-height: 18px;
    max-width: 311px;
    right: 0;
    text-align: left;
    z-index: 9999
}

    .dropdown--active .dropdown__content > ul {
        list-style: none;
        background: #d9e1e8;
        padding: 4px 0;
        border-radius: 4px;
        -webkit-box-shadow: 0 0 15px rgba(0,0,0,.4);
        box-shadow: 0 0 15px rgba(0,0,0,.4);
        min-width: 140px;
        position: relative
    }

    .dropdown--active .dropdown__content.dropdown__right {
        right: 0
    }

    .dropdown--active .dropdown__content.dropdown__left > ul {
        left: -98px
    }

    .dropdown--active .dropdown__content > ul > li > a {
        font-size: 13px;
        line-height: 18px;
        display: block;
        padding: 4px 14px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        text-decoration: none;
        background: #d9e1e8;
        color: #282c37;
        overflow: hidden;
        text-overflow: ellipsis;
    }

        .dropdown--active .dropdown__content > ul > li > a:focus {
            outline: 0
        }

        .dropdown--active .dropdown__content > ul > li > a:hover {
            background: #2b90d9;
            color: #d9e1e8
        }

.dropdown__icon {
    vertical-align: middle
}

.static-content {
    padding: 10px;
    padding-top: 20px;
    color: #606984
}

    .static-content h1 {
        font-size: 16px;
        font-weight: 500;
        margin-bottom: 40px;
        text-align: center
    }

    .static-content p {
        font-size: 13px;
        margin-bottom: 20px
    }

.columns-area {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    overflow-x: auto;
    position: relative
}

@media screen and (min-width:360px) {
    .columns-area {
        padding: 10px
    }

    .react-swipeable-view-container .columns-area {
        height: calc(100% - 20px) !important
    }
}

.react-swipeable-view-container, .react-swipeable-view-container .column, .react-swipeable-view-container .columns-area, .react-swipeable-view-container .drawer {
    height: 100%
}

    .react-swipeable-view-container > * {
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        height: 100%
    }

    .column, .react-swipeable-view-container > * {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex
    }

.column {
    width: 330px;
    position: relative;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

    .column > .scrollable {
        background: #282c37
    }

.ui {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background: #191b22
}

.drawer, .ui {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column
}

.drawer {
    width: 300px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    flex-direction: column;
    overflow-y: hidden
}

.drawer__tab {
    display: block;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 15px 5px 13px;
    color: #9baec8;
    text-decoration: none;
    text-align: center;
    font-size: 16px;
    border-bottom: 2px solid transparent
}

.column, .drawer {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 100%;
    flex: 1 1 100%;
    overflow: hidden
}

@media screen and (min-width:360px) {
    .tabs-bar {
        margin: 10px;
        margin-bottom: 0
    }

    .search {
        margin-bottom: 10px
    }
}

@media screen and (max-width:630px) {
    .column, .drawer {
        width: 100%;
        padding: 0
    }

    .columns-area {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column
    }

    .autosuggest-textarea__textarea, .search__input {
        font-size: 16px
    }
}

@media screen and (min-width:631px) {
    .columns-area {
        padding: 0
    }

    .column, .drawer {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        padding: 10px;
        padding-left: 5px;
        padding-right: 5px
    }

        .column:first-child, .drawer:first-child {
            padding-left: 10px
        }

        .column:last-child, .drawer:last-child {
            padding-right: 10px
        }

    .columns-area > div .column, .columns-area > div .drawer {
        padding-left: 5px;
        padding-right: 5px
    }
}

.drawer__pager {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    position: relative
}

.drawer__inner, .drawer__pager {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    overflow: hidden;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.drawer__inner {
    position: absolute;
    top: 0;
    left: 0;
    background: #444b5d;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    overflow-y: auto;
    width: 100%;
    height: 100%
}

    .drawer__inner.darker {
        background: #282c37
    }

.pseudo-drawer {
    background: #444b5d;
    font-size: 13px;
    text-align: left
}

.drawer__header {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    font-size: 16px;
    background: #393f4f;
    margin-bottom: 10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row
}

    .drawer__header a {
        -webkit-transition: background .1s ease-in;
        transition: background .1s ease-in
    }

        .drawer__header a:hover {
            background: #2e3340;
            -webkit-transition: background .2s ease-out;
            transition: background .2s ease-out
        }

.tabs-bar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background: #393f4f;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    overflow-y: auto
}

.tabs-bar__link {
    display: block;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 15px 10px;
    color: #fff;
    text-decoration: none;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    border-bottom: 2px solid #393f4f;
    -webkit-transition: all .2s linear;
    transition: all .2s linear
}

    .tabs-bar__link .fa {
        font-weight: 400;
        font-size: 16px
    }

    .tabs-bar__link.active {
        border-bottom: 2px solid #2b90d9;
        color: #2b90d9
    }

@media screen and (min-width:631px) {
    .tabs-bar__link:active, .tabs-bar__link:focus, .tabs-bar__link:hover {
        background: #464d60;
        -webkit-transition: all .1s linear;
        transition: all .1s linear
    }
}

.tabs-bar__link span {
    margin-left: 5px;
    display: none
}

@media screen and (min-width:600px) {
    .tabs-bar__link span {
        display: inline
    }
}

@media screen and (min-width:631px) {
    .tabs-bar {
        display: none
    }
}

.scrollable {
    overflow-y: scroll;
    overflow-x: hidden;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    -webkit-overflow-scrolling: touch;
    will-change: transform
}

    .scrollable.optionally-scrollable {
        overflow-y: auto
    }

@supports (display:grid) {
    .scrollable {
        contain: strict
    }
}

@supports (display:grid) {
    .scrollable.fullscreen {
        contain: none
    }
}

.column-back-button {
    background: #313543;
    color: #2b90d9;
    cursor: pointer;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    font-size: 16px;
    border: 0;
    text-align: unset;
    padding: 15px;
    margin: 0;
    z-index: 3
}

    .column-back-button:hover {
        text-decoration: underline
    }

.column-header__back-button {
    background: #313543;
    border: 0;
    font-family: inherit;
    color: #2b90d9;
    cursor: pointer;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    font-size: 16px;
    padding: 0 5px 0 0;
    z-index: 3
}

    .column-header__back-button:hover {
        text-decoration: underline
    }

    .column-header__back-button:last-child {
        padding: 0 15px 0 0
    }

.column-back-button__icon {
    display: inline-block;
    margin-right: 5px
}

.column-back-button--slim {
    position: relative
}

.column-back-button--slim-button {
    cursor: pointer;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    font-size: 16px;
    padding: 15px;
    position: absolute;
    right: 0;
    top: -48px
}

.react-toggle {
    display: inline-block;
    position: relative;
    cursor: pointer;
    background-color: transparent;
    border: 0;
    padding: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent
}

.react-toggle-screenreader-only {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px
}

.react-toggle--disabled {
    cursor: not-allowed;
    opacity: .5;
    -webkit-transition: opacity .25s;
    transition: opacity .25s
}

.react-toggle-track {
    width: 50px;
    height: 24px;
    padding: 0;
    border-radius: 30px;
    background-color: #282c37;
    -webkit-transition: all .2s ease;
    transition: all .2s ease
}

.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
    background-color: #131419
}

.react-toggle--checked .react-toggle-track {
    background-color: #2b90d9
}

.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track {
    background-color: #56a7e1
}

.react-toggle-track-check {
    position: absolute;
    width: 14px;
    height: 10px;
    top: 0;
    bottom: 0;
    margin-top: auto;
    margin-bottom: auto;
    line-height: 0;
    left: 8px;
    opacity: 0;
    -webkit-transition: opacity .25s ease;
    transition: opacity .25s ease
}

.react-toggle--checked .react-toggle-track-check, .react-toggle-track-x {
    opacity: 1;
    -webkit-transition: opacity .25s ease;
    transition: opacity .25s ease
}

.react-toggle-track-x {
    position: absolute;
    width: 10px;
    height: 10px;
    top: 0;
    bottom: 0;
    margin-top: auto;
    margin-bottom: auto;
    line-height: 0;
    right: 10px
}

.react-toggle--checked .react-toggle-track-x {
    opacity: 0
}

.react-toggle-thumb {
    -webkit-transition: all .5s cubic-bezier(.23,1,.32,1) 0ms;
    transition: all .5s cubic-bezier(.23,1,.32,1) 0ms;
    position: absolute;
    top: 1px;
    left: 1px;
    width: 22px;
    height: 22px;
    border: 1px solid #282c37;
    border-radius: 50%;
    background-color: #fafafa;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all .25s ease;
    transition: all .25s ease
}

.react-toggle--checked .react-toggle-thumb {
    left: 27px;
    border-color: #2b90d9
}

.column-link {
    background: #393f4f;
    color: #fff;
    display: block;
    font-size: 16px;
    padding: 15px;
    text-decoration: none
}

    .column-link:hover {
        background: #404657
    }

.column-link__icon {
    display: inline-block;
    margin-right: 5px
}

.column-subheading {
    background: #282c37;
    color: #606984;
    padding: 8px 20px;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    cursor: default
}

.autosuggest-textarea, .spoiler-input {
    position: relative
}

.autosuggest-textarea__textarea, .spoiler-input__input {
    display: block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    color: #282c37;
    background: #fff;
    padding: 10px;
    font-family: inherit;
    font-size: 14px;
    resize: vertical;
    border: 0;
    outline: 0
}

    .autosuggest-textarea__textarea:focus, .spoiler-input__input:focus {
        outline: 0
    }

@media screen and (max-width:600px) {
    .autosuggest-textarea__textarea, .spoiler-input__input {
        font-size: 16px
    }
}

.spoiler-input__input {
    border-radius: 4px
}

.autosuggest-textarea__textarea {
    min-height: 100px;
    border-radius: 4px 4px 0 0;
    padding-bottom: 0;
    padding-right: 32px;
    resize: none
}

@media screen and (max-width:600px) {
    .autosuggest-textarea__textarea {
        height: 100px !important;
        resize: vertical
    }
}

.autosuggest-textarea__suggestions {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: none;
    position: absolute;
    top: 100%;
    width: 100%;
    z-index: 99;
    -webkit-box-shadow: 4px 4px 6px rgba(0,0,0,.4);
    box-shadow: 4px 4px 6px rgba(0,0,0,.4);
    background: #d9e1e8;
    border-radius: 0 0 4px 4px;
    color: #282c37;
    font-size: 14px;
    padding: 6px
}

    .autosuggest-textarea__suggestions.autosuggest-textarea__suggestions--visible {
        display: block
    }

.autosuggest-textarea__suggestions__item {
    padding: 10px;
    cursor: pointer;
    border-radius: 4px
}

    .autosuggest-textarea__suggestions__item.selected, .autosuggest-textarea__suggestions__item:active, .autosuggest-textarea__suggestions__item:focus, .autosuggest-textarea__suggestions__item:hover {
        background: #b9c8d5
    }

.autosuggest-account, .autosuggest-emoji {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    line-height: 18px;
    font-size: 14px
}

    .autosuggest-account-icon, .autosuggest-emoji img {
        display: block;
        margin-right: 8px;
        width: 16px;
        height: 16px
    }

    .autosuggest-account .display-name__account {
        color: #79839e
    }

.character-counter__wrapper {
    line-height: 36px;
    margin: 0 16px 0 8px;
    padding-top: 10px
}

.character-counter {
    cursor: default;
    font-size: 16px
}

.character-counter--over {
    color: #ff5050
}

.getting-started__wrapper {
    position: relative;
    overflow-y: auto
}

.getting-started__footer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

.getting-started {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-bottom: 235px;
    background: url(/packs/mastodon-getting-started-758db9bb72f30f65b07bb7b64f24ea83.png) no-repeat 0 100%;
    -webkit-box-flex: 1;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto
}

    .getting-started p {
        color: #d9e1e8
    }

    .getting-started a {
        color: #606984
    }

.keyboard-shortcuts {
    padding: 8px 0 0;
    overflow: hidden
}

    .keyboard-shortcuts thead {
        position: absolute;
        left: -9999px
    }

    .keyboard-shortcuts td {
        padding: 0 10px 8px
    }

    .keyboard-shortcuts code {
        display: inline-block;
        padding: 3px 5px;
        background-color: #393f4f;
        border: 1px solid #1f232b
    }

.setting-text {
    color: #9baec8;
    background: transparent;
    border: none;
    border-bottom: 2px solid #9baec8;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    font-family: inherit;
    margin-bottom: 10px;
    padding: 7px 0;
    width: 100%
}

    .setting-text:active, .setting-text:focus {
        color: #fff;
        border-bottom-color: #2b90d9
    }

@media screen and (max-width:600px) {
    .setting-text {
        font-size: 16px
    }
}

.setting-text.light {
    color: #282c37;
    border-bottom: 2px solid #626c87
}

    .setting-text.light:active, .setting-text.light:focus {
        color: #282c37;
        border-bottom-color: #2b90d9
    }

button.icon-button i.fa-retweet {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='209'><path d='M4.97 3.16c-.1.03-.17.1-.22.18L.8 8.24c-.2.3.03.78.4.8H3.6v2.68c0 4.26-.55 3.62 3.66 3.62h7.66l-2.3-2.84c-.03-.02-.03-.04-.05-.06H7.27c-.44 0-.72-.3-.72-.72v-2.7h2.5c.37.03.63-.48.4-.77L5.5 3.35c-.12-.17-.34-.25-.53-.2zm12.16.43c-.55-.02-1.32.02-2.4.02H7.1l2.32 2.85.03.06h5.25c.42 0 .72.28.72.72v2.7h-2.5c-.36.02-.56.54-.3.8l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.26-.28 0-.83-.37-.8H18.4v-2.7c0-3.15.4-3.62-1.25-3.66z' fill='%23606984' stroke-width='0'/><path d='M7.78 19.66c-.24.02-.44.25-.44.5v2.46h-.06c-1.08 0-1.86-.03-2.4-.03-1.64 0-1.25.43-1.25 3.65v4.47c0 4.26-.56 3.62 3.65 3.62H8.5l-1.3-1.06c-.1-.08-.18-.2-.2-.3-.02-.17.06-.35.2-.45l1.33-1.1H7.28c-.44 0-.72-.3-.72-.7v-4.48c0-.44.28-.72.72-.72h.06v2.5c0 .38.54.63.82.38l4.9-3.93c.25-.18.25-.6 0-.78l-4.9-3.92c-.1-.1-.24-.14-.38-.12zm9.34 2.93c-.54-.02-1.3.02-2.4.02h-1.25l1.3 1.07c.1.07.18.2.2.33.02.16-.06.3-.2.4l-1.33 1.1h1.28c.42 0 .72.28.72.72v4.47c0 .42-.3.72-.72.72h-.1v-2.47c0-.3-.3-.53-.6-.47-.07 0-.14.05-.2.1l-4.9 3.93c-.26.18-.26.6 0 .78l4.9 3.92c.27.25.82 0 .8-.38v-2.5h.1c4.27 0 3.65.67 3.65-3.62v-4.47c0-3.15.4-3.62-1.25-3.66zM10.34 38.66c-.24.02-.44.25-.43.5v2.47H7.3c-1.08 0-1.86-.04-2.4-.04-1.64 0-1.25.43-1.25 3.65v4.47c0 3.66-.23 3.7 2.34 3.66l-1.34-1.1c-.1-.08-.18-.2-.2-.3 0-.17.07-.35.2-.45l1.96-1.6c-.03-.06-.04-.13-.04-.2v-4.48c0-.44.28-.72.72-.72H9.9v2.5c0 .36.5.6.8.38l4.93-3.93c.24-.18.24-.6 0-.78l-4.94-3.92c-.1-.08-.23-.13-.36-.12zm5.63 2.93l1.34 1.1c.1.07.18.2.2.33.02.16-.03.3-.16.4l-1.96 1.6c.02.07.06.13.06.22v4.47c0 .42-.3.72-.72.72h-2.66v-2.47c0-.3-.3-.53-.6-.47-.06.02-.12.05-.18.1l-4.94 3.93c-.24.18-.24.6 0 .78l4.94 3.92c.28.22.78-.02.78-.38v-2.5h2.66c4.27 0 3.65.67 3.65-3.62v-4.47c0-3.66.34-3.7-2.4-3.66zM13.06 57.66c-.23.03-.4.26-.4.5v2.47H7.28c-1.08 0-1.86-.04-2.4-.04-1.64 0-1.25.43-1.25 3.65v4.87l2.93-2.37v-2.5c0-.44.28-.72.72-.72h5.38v2.5c0 .36.5.6.78.38l4.94-3.93c.24-.18.24-.6 0-.78l-4.94-3.92c-.1-.1-.24-.14-.38-.12zm5.3 6.15l-2.92 2.4v2.52c0 .42-.3.72-.72.72h-5.4v-2.47c0-.3-.32-.53-.6-.47-.07.02-.13.05-.2.1L3.6 70.52c-.25.18-.25.6 0 .78l4.93 3.92c.28.22.78-.02.78-.38v-2.5h5.42c4.27 0 3.65.67 3.65-3.62v-4.47-.44zM19.25 78.8c-.1.03-.2.1-.28.17l-.9.9c-.44-.3-1.36-.25-3.35-.25H7.28c-1.08 0-1.86-.03-2.4-.03-1.64 0-1.25.43-1.25 3.65v.7l2.93.3v-1c0-.44.28-.72.72-.72h7.44c.2 0 .37.08.5.2l-1.8 1.8c-.25.26-.08.76.27.8l6.27.7c.28.03.56-.25.53-.53l-.7-6.25c0-.27-.3-.48-.55-.44zm-17.2 6.1c-.2.07-.36.3-.33.54l.7 6.25c.02.36.58.55.83.27l.8-.8c.02 0 .04-.02.04 0 .46.24 1.37.17 3.18.17h7.44c4.27 0 3.65.67 3.65-3.62v-.75l-2.93-.3v1.05c0 .42-.3.72-.72.72H7.28c-.15 0-.3-.03-.4-.1L8.8 86.4c.3-.24.1-.8-.27-.84l-6.28-.65h-.2zM4.88 98.6c-1.33 0-1.34.48-1.3 2.3l1.14-1.37c.08-.1.22-.17.34-.2.16 0 .34.08.44.2l1.66 2.03c.04 0 .07-.03.12-.03h7.44c.34 0 .57.2.65.5h-2.43c-.34.05-.53.52-.3.78l3.92 4.95c.18.24.6.24.78 0l3.94-4.94c.22-.27-.02-.76-.37-.77H18.4c.02-3.9.6-3.4-3.66-3.4H7.28c-1.08 0-1.86-.04-2.4-.04zm.15 2.46c-.1.03-.2.1-.28.2l-3.94 4.9c-.2.28.03.77.4.78H3.6c-.02 3.94-.45 3.4 3.66 3.4h7.44c3.65 0 3.74.3 3.7-2.25l-1.1 1.34c-.1.1-.2.17-.32.2-.16 0-.34-.08-.44-.2l-1.65-2.03c-.06.02-.1.04-.18.04H7.28c-.35 0-.57-.2-.66-.5h2.44c.37 0 .63-.5.4-.78l-3.96-4.9c-.1-.15-.3-.23-.47-.2zM4.88 117.6c-1.16 0-1.3.3-1.3 1.56l1.14-1.38c.08-.1.22-.14.34-.16.16 0 .34.04.44.16l2.22 2.75h7c.42 0 .72.28.72.72v.53h-2.6c-.3.1-.43.54-.2.78l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.22-.28-.02-.77-.37-.78H18.4v-.53c0-4.2.72-3.63-3.66-3.63H7.28c-1.08 0-1.86-.03-2.4-.03zm.1 1.74c-.1.03-.17.1-.23.16L.8 124.44c-.2.28.03.77.4.78H3.6v.5c0 4.26-.55 3.62 3.66 3.62h7.44c1.03 0 1.74.02 2.28 0-.16.02-.34-.03-.44-.15l-2.22-2.76H7.28c-.44 0-.72-.3-.72-.72v-.5h2.5c.37.02.63-.5.4-.78L5.5 119.5c-.12-.15-.34-.22-.53-.16zm12.02 10c1.2-.02 1.4-.25 1.4-1.53l-1.1 1.36c-.07.1-.17.17-.3.18zM5.94 136.6l2.37 2.93h6.42c.42 0 .72.28.72.72v1.25h-2.6c-.3.1-.43.54-.2.78l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.22-.28-.02-.77-.37-.78H18.4v-1.25c0-4.2.72-3.63-3.66-3.63H7.28c-.6 0-.92-.02-1.34-.03zm-1.72.06c-.4.08-.54.3-.6.75l.6-.74zm.84.93c-.12 0-.24.08-.3.18l-3.95 4.9c-.24.3 0 .83.4.82H3.6v1.22c0 4.26-.55 3.62 3.66 3.62h7.44c.63 0 .97.02 1.4.03l-2.37-2.93H7.28c-.44 0-.72-.3-.72-.72v-1.22h2.5c.4.04.67-.53.4-.8l-3.96-4.92c-.1-.13-.27-.2-.44-.2zm13.28 10.03l-.56.7c.36-.07.5-.3.56-.7zM17.13 155.6c-.55-.02-1.32.03-2.4.03h-8.2l2.38 2.9h5.82c.42 0 .72.28.72.72v1.97H12.9c-.32.06-.48.52-.28.78l3.94 4.94c.2.23.6.22.78-.03l3.94-4.9c.22-.28-.02-.77-.37-.78H18.4v-1.97c0-3.15.4-3.62-1.25-3.66zm-12.1.28c-.1.02-.2.1-.28.18l-3.94 4.9c-.2.3.03.78.4.8H3.6v1.96c0 4.26-.55 3.62 3.66 3.62h8.24l-2.36-2.9H7.28c-.44 0-.72-.3-.72-.72v-1.97h2.5c.37.02.63-.5.4-.78l-3.96-4.9c-.1-.15-.3-.22-.47-.2zM5.13 174.5c-.15 0-.3.07-.38.2L.8 179.6c-.24.27 0 .82.4.8H3.6v2.32c0 4.26-.55 3.62 3.66 3.62h7.94l-2.35-2.9h-5.6c-.43 0-.7-.3-.7-.72v-2.3h2.5c.38.03.66-.54.4-.83l-3.97-4.9c-.1-.13-.23-.2-.38-.2zm12 .1c-.55-.02-1.32.03-2.4.03H6.83l2.35 2.9h5.52c.42 0 .72.28.72.72v2.34h-2.6c-.3.1-.43.53-.2.78l3.92 4.9c.18.24.6.24.78 0l3.94-4.9c.22-.3-.02-.78-.37-.8H18.4v-2.33c0-3.15.4-3.62-1.25-3.66zM4.97 193.16c-.1.03-.17.1-.22.18l-3.94 4.9c-.2.3.03.78.4.8H3.6v2.68c0 4.26-.55 3.62 3.66 3.62h7.66l-2.3-2.84c-.03-.02-.03-.04-.05-.06H7.27c-.44 0-.72-.3-.72-.72v-2.7h2.5c.37.03.63-.48.4-.77l-3.96-4.9c-.12-.17-.34-.25-.53-.2zm12.16.43c-.55-.02-1.32.03-2.4.03H7.1l2.32 2.84.03.06h5.25c.42 0 .72.28.72.72v2.7h-2.5c-.36.02-.56.54-.3.8l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.26-.28 0-.83-.37-.8H18.4v-2.7c0-3.15.4-3.62-1.25-3.66z' fill='%232B90D9' stroke-width='0'/></svg>")
}

    button.icon-button i.fa-retweet:hover {
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='209'><path d='M4.97 3.16c-.1.03-.17.1-.22.18L.8 8.24c-.2.3.03.78.4.8H3.6v2.68c0 4.26-.55 3.62 3.66 3.62h7.66l-2.3-2.84c-.03-.02-.03-.04-.05-.06H7.27c-.44 0-.72-.3-.72-.72v-2.7h2.5c.37.03.63-.48.4-.77L5.5 3.35c-.12-.17-.34-.25-.53-.2zm12.16.43c-.55-.02-1.32.02-2.4.02H7.1l2.32 2.85.03.06h5.25c.42 0 .72.28.72.72v2.7h-2.5c-.36.02-.56.54-.3.8l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.26-.28 0-.83-.37-.8H18.4v-2.7c0-3.15.4-3.62-1.25-3.66z' fill='%23707B97' stroke-width='0'/><path d='M7.78 19.66c-.24.02-.44.25-.44.5v2.46h-.06c-1.08 0-1.86-.03-2.4-.03-1.64 0-1.25.43-1.25 3.65v4.47c0 4.26-.56 3.62 3.65 3.62H8.5l-1.3-1.06c-.1-.08-.18-.2-.2-.3-.02-.17.06-.35.2-.45l1.33-1.1H7.28c-.44 0-.72-.3-.72-.7v-4.48c0-.44.28-.72.72-.72h.06v2.5c0 .38.54.63.82.38l4.9-3.93c.25-.18.25-.6 0-.78l-4.9-3.92c-.1-.1-.24-.14-.38-.12zm9.34 2.93c-.54-.02-1.3.02-2.4.02h-1.25l1.3 1.07c.1.07.18.2.2.33.02.16-.06.3-.2.4l-1.33 1.1h1.28c.42 0 .72.28.72.72v4.47c0 .42-.3.72-.72.72h-.1v-2.47c0-.3-.3-.53-.6-.47-.07 0-.14.05-.2.1l-4.9 3.93c-.26.18-.26.6 0 .78l4.9 3.92c.27.25.82 0 .8-.38v-2.5h.1c4.27 0 3.65.67 3.65-3.62v-4.47c0-3.15.4-3.62-1.25-3.66zM10.34 38.66c-.24.02-.44.25-.43.5v2.47H7.3c-1.08 0-1.86-.04-2.4-.04-1.64 0-1.25.43-1.25 3.65v4.47c0 3.66-.23 3.7 2.34 3.66l-1.34-1.1c-.1-.08-.18-.2-.2-.3 0-.17.07-.35.2-.45l1.96-1.6c-.03-.06-.04-.13-.04-.2v-4.48c0-.44.28-.72.72-.72H9.9v2.5c0 .36.5.6.8.38l4.93-3.93c.24-.18.24-.6 0-.78l-4.94-3.92c-.1-.08-.23-.13-.36-.12zm5.63 2.93l1.34 1.1c.1.07.18.2.2.33.02.16-.03.3-.16.4l-1.96 1.6c.02.07.06.13.06.22v4.47c0 .42-.3.72-.72.72h-2.66v-2.47c0-.3-.3-.53-.6-.47-.06.02-.12.05-.18.1l-4.94 3.93c-.24.18-.24.6 0 .78l4.94 3.92c.28.22.78-.02.78-.38v-2.5h2.66c4.27 0 3.65.67 3.65-3.62v-4.47c0-3.66.34-3.7-2.4-3.66zM13.06 57.66c-.23.03-.4.26-.4.5v2.47H7.28c-1.08 0-1.86-.04-2.4-.04-1.64 0-1.25.43-1.25 3.65v4.87l2.93-2.37v-2.5c0-.44.28-.72.72-.72h5.38v2.5c0 .36.5.6.78.38l4.94-3.93c.24-.18.24-.6 0-.78l-4.94-3.92c-.1-.1-.24-.14-.38-.12zm5.3 6.15l-2.92 2.4v2.52c0 .42-.3.72-.72.72h-5.4v-2.47c0-.3-.32-.53-.6-.47-.07.02-.13.05-.2.1L3.6 70.52c-.25.18-.25.6 0 .78l4.93 3.92c.28.22.78-.02.78-.38v-2.5h5.42c4.27 0 3.65.67 3.65-3.62v-4.47-.44zM19.25 78.8c-.1.03-.2.1-.28.17l-.9.9c-.44-.3-1.36-.25-3.35-.25H7.28c-1.08 0-1.86-.03-2.4-.03-1.64 0-1.25.43-1.25 3.65v.7l2.93.3v-1c0-.44.28-.72.72-.72h7.44c.2 0 .37.08.5.2l-1.8 1.8c-.25.26-.08.76.27.8l6.27.7c.28.03.56-.25.53-.53l-.7-6.25c0-.27-.3-.48-.55-.44zm-17.2 6.1c-.2.07-.36.3-.33.54l.7 6.25c.02.36.58.55.83.27l.8-.8c.02 0 .04-.02.04 0 .46.24 1.37.17 3.18.17h7.44c4.27 0 3.65.67 3.65-3.62v-.75l-2.93-.3v1.05c0 .42-.3.72-.72.72H7.28c-.15 0-.3-.03-.4-.1L8.8 86.4c.3-.24.1-.8-.27-.84l-6.28-.65h-.2zM4.88 98.6c-1.33 0-1.34.48-1.3 2.3l1.14-1.37c.08-.1.22-.17.34-.2.16 0 .34.08.44.2l1.66 2.03c.04 0 .07-.03.12-.03h7.44c.34 0 .57.2.65.5h-2.43c-.34.05-.53.52-.3.78l3.92 4.95c.18.24.6.24.78 0l3.94-4.94c.22-.27-.02-.76-.37-.77H18.4c.02-3.9.6-3.4-3.66-3.4H7.28c-1.08 0-1.86-.04-2.4-.04zm.15 2.46c-.1.03-.2.1-.28.2l-3.94 4.9c-.2.28.03.77.4.78H3.6c-.02 3.94-.45 3.4 3.66 3.4h7.44c3.65 0 3.74.3 3.7-2.25l-1.1 1.34c-.1.1-.2.17-.32.2-.16 0-.34-.08-.44-.2l-1.65-2.03c-.06.02-.1.04-.18.04H7.28c-.35 0-.57-.2-.66-.5h2.44c.37 0 .63-.5.4-.78l-3.96-4.9c-.1-.15-.3-.23-.47-.2zM4.88 117.6c-1.16 0-1.3.3-1.3 1.56l1.14-1.38c.08-.1.22-.14.34-.16.16 0 .34.04.44.16l2.22 2.75h7c.42 0 .72.28.72.72v.53h-2.6c-.3.1-.43.54-.2.78l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.22-.28-.02-.77-.37-.78H18.4v-.53c0-4.2.72-3.63-3.66-3.63H7.28c-1.08 0-1.86-.03-2.4-.03zm.1 1.74c-.1.03-.17.1-.23.16L.8 124.44c-.2.28.03.77.4.78H3.6v.5c0 4.26-.55 3.62 3.66 3.62h7.44c1.03 0 1.74.02 2.28 0-.16.02-.34-.03-.44-.15l-2.22-2.76H7.28c-.44 0-.72-.3-.72-.72v-.5h2.5c.37.02.63-.5.4-.78L5.5 119.5c-.12-.15-.34-.22-.53-.16zm12.02 10c1.2-.02 1.4-.25 1.4-1.53l-1.1 1.36c-.07.1-.17.17-.3.18zM5.94 136.6l2.37 2.93h6.42c.42 0 .72.28.72.72v1.25h-2.6c-.3.1-.43.54-.2.78l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.22-.28-.02-.77-.37-.78H18.4v-1.25c0-4.2.72-3.63-3.66-3.63H7.28c-.6 0-.92-.02-1.34-.03zm-1.72.06c-.4.08-.54.3-.6.75l.6-.74zm.84.93c-.12 0-.24.08-.3.18l-3.95 4.9c-.24.3 0 .83.4.82H3.6v1.22c0 4.26-.55 3.62 3.66 3.62h7.44c.63 0 .97.02 1.4.03l-2.37-2.93H7.28c-.44 0-.72-.3-.72-.72v-1.22h2.5c.4.04.67-.53.4-.8l-3.96-4.92c-.1-.13-.27-.2-.44-.2zm13.28 10.03l-.56.7c.36-.07.5-.3.56-.7zM17.13 155.6c-.55-.02-1.32.03-2.4.03h-8.2l2.38 2.9h5.82c.42 0 .72.28.72.72v1.97H12.9c-.32.06-.48.52-.28.78l3.94 4.94c.2.23.6.22.78-.03l3.94-4.9c.22-.28-.02-.77-.37-.78H18.4v-1.97c0-3.15.4-3.62-1.25-3.66zm-12.1.28c-.1.02-.2.1-.28.18l-3.94 4.9c-.2.3.03.78.4.8H3.6v1.96c0 4.26-.55 3.62 3.66 3.62h8.24l-2.36-2.9H7.28c-.44 0-.72-.3-.72-.72v-1.97h2.5c.37.02.63-.5.4-.78l-3.96-4.9c-.1-.15-.3-.22-.47-.2zM5.13 174.5c-.15 0-.3.07-.38.2L.8 179.6c-.24.27 0 .82.4.8H3.6v2.32c0 4.26-.55 3.62 3.66 3.62h7.94l-2.35-2.9h-5.6c-.43 0-.7-.3-.7-.72v-2.3h2.5c.38.03.66-.54.4-.83l-3.97-4.9c-.1-.13-.23-.2-.38-.2zm12 .1c-.55-.02-1.32.03-2.4.03H6.83l2.35 2.9h5.52c.42 0 .72.28.72.72v2.34h-2.6c-.3.1-.43.53-.2.78l3.92 4.9c.18.24.6.24.78 0l3.94-4.9c.22-.3-.02-.78-.37-.8H18.4v-2.33c0-3.15.4-3.62-1.25-3.66zM4.97 193.16c-.1.03-.17.1-.22.18l-3.94 4.9c-.2.3.03.78.4.8H3.6v2.68c0 4.26-.55 3.62 3.66 3.62h7.66l-2.3-2.84c-.03-.02-.03-.04-.05-.06H7.27c-.44 0-.72-.3-.72-.72v-2.7h2.5c.37.03.63-.48.4-.77l-3.96-4.9c-.12-.17-.34-.25-.53-.2zm12.16.43c-.55-.02-1.32.03-2.4.03H7.1l2.32 2.84.03.06h5.25c.42 0 .72.28.72.72v2.7h-2.5c-.36.02-.56.54-.3.8l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.26-.28 0-.83-.37-.8H18.4v-2.7c0-3.15.4-3.62-1.25-3.66z' fill='%232B90D9' stroke-width='0'/></svg>")
    }

button.icon-button.disabled i.fa-retweet {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='209'><path d='M4.97 3.16c-.1.03-.17.1-.22.18L.8 8.24c-.2.3.03.78.4.8H3.6v2.68c0 4.26-.55 3.62 3.66 3.62h7.66l-2.3-2.84c-.03-.02-.03-.04-.05-.06H7.27c-.44 0-.72-.3-.72-.72v-2.7h2.5c.37.03.63-.48.4-.77L5.5 3.35c-.12-.17-.34-.25-.53-.2zm12.16.43c-.55-.02-1.32.02-2.4.02H7.1l2.32 2.85.03.06h5.25c.42 0 .72.28.72.72v2.7h-2.5c-.36.02-.56.54-.3.8l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.26-.28 0-.83-.37-.8H18.4v-2.7c0-3.15.4-3.62-1.25-3.66z' fill='%23444B5D' stroke-width='0'/><path d='M7.78 19.66c-.24.02-.44.25-.44.5v2.46h-.06c-1.08 0-1.86-.03-2.4-.03-1.64 0-1.25.43-1.25 3.65v4.47c0 4.26-.56 3.62 3.65 3.62H8.5l-1.3-1.06c-.1-.08-.18-.2-.2-.3-.02-.17.06-.35.2-.45l1.33-1.1H7.28c-.44 0-.72-.3-.72-.7v-4.48c0-.44.28-.72.72-.72h.06v2.5c0 .38.54.63.82.38l4.9-3.93c.25-.18.25-.6 0-.78l-4.9-3.92c-.1-.1-.24-.14-.38-.12zm9.34 2.93c-.54-.02-1.3.02-2.4.02h-1.25l1.3 1.07c.1.07.18.2.2.33.02.16-.06.3-.2.4l-1.33 1.1h1.28c.42 0 .72.28.72.72v4.47c0 .42-.3.72-.72.72h-.1v-2.47c0-.3-.3-.53-.6-.47-.07 0-.14.05-.2.1l-4.9 3.93c-.26.18-.26.6 0 .78l4.9 3.92c.27.25.82 0 .8-.38v-2.5h.1c4.27 0 3.65.67 3.65-3.62v-4.47c0-3.15.4-3.62-1.25-3.66zM10.34 38.66c-.24.02-.44.25-.43.5v2.47H7.3c-1.08 0-1.86-.04-2.4-.04-1.64 0-1.25.43-1.25 3.65v4.47c0 3.66-.23 3.7 2.34 3.66l-1.34-1.1c-.1-.08-.18-.2-.2-.3 0-.17.07-.35.2-.45l1.96-1.6c-.03-.06-.04-.13-.04-.2v-4.48c0-.44.28-.72.72-.72H9.9v2.5c0 .36.5.6.8.38l4.93-3.93c.24-.18.24-.6 0-.78l-4.94-3.92c-.1-.08-.23-.13-.36-.12zm5.63 2.93l1.34 1.1c.1.07.18.2.2.33.02.16-.03.3-.16.4l-1.96 1.6c.02.07.06.13.06.22v4.47c0 .42-.3.72-.72.72h-2.66v-2.47c0-.3-.3-.53-.6-.47-.06.02-.12.05-.18.1l-4.94 3.93c-.24.18-.24.6 0 .78l4.94 3.92c.28.22.78-.02.78-.38v-2.5h2.66c4.27 0 3.65.67 3.65-3.62v-4.47c0-3.66.34-3.7-2.4-3.66zM13.06 57.66c-.23.03-.4.26-.4.5v2.47H7.28c-1.08 0-1.86-.04-2.4-.04-1.64 0-1.25.43-1.25 3.65v4.87l2.93-2.37v-2.5c0-.44.28-.72.72-.72h5.38v2.5c0 .36.5.6.78.38l4.94-3.93c.24-.18.24-.6 0-.78l-4.94-3.92c-.1-.1-.24-.14-.38-.12zm5.3 6.15l-2.92 2.4v2.52c0 .42-.3.72-.72.72h-5.4v-2.47c0-.3-.32-.53-.6-.47-.07.02-.13.05-.2.1L3.6 70.52c-.25.18-.25.6 0 .78l4.93 3.92c.28.22.78-.02.78-.38v-2.5h5.42c4.27 0 3.65.67 3.65-3.62v-4.47-.44zM19.25 78.8c-.1.03-.2.1-.28.17l-.9.9c-.44-.3-1.36-.25-3.35-.25H7.28c-1.08 0-1.86-.03-2.4-.03-1.64 0-1.25.43-1.25 3.65v.7l2.93.3v-1c0-.44.28-.72.72-.72h7.44c.2 0 .37.08.5.2l-1.8 1.8c-.25.26-.08.76.27.8l6.27.7c.28.03.56-.25.53-.53l-.7-6.25c0-.27-.3-.48-.55-.44zm-17.2 6.1c-.2.07-.36.3-.33.54l.7 6.25c.02.36.58.55.83.27l.8-.8c.02 0 .04-.02.04 0 .46.24 1.37.17 3.18.17h7.44c4.27 0 3.65.67 3.65-3.62v-.75l-2.93-.3v1.05c0 .42-.3.72-.72.72H7.28c-.15 0-.3-.03-.4-.1L8.8 86.4c.3-.24.1-.8-.27-.84l-6.28-.65h-.2zM4.88 98.6c-1.33 0-1.34.48-1.3 2.3l1.14-1.37c.08-.1.22-.17.34-.2.16 0 .34.08.44.2l1.66 2.03c.04 0 .07-.03.12-.03h7.44c.34 0 .57.2.65.5h-2.43c-.34.05-.53.52-.3.78l3.92 4.95c.18.24.6.24.78 0l3.94-4.94c.22-.27-.02-.76-.37-.77H18.4c.02-3.9.6-3.4-3.66-3.4H7.28c-1.08 0-1.86-.04-2.4-.04zm.15 2.46c-.1.03-.2.1-.28.2l-3.94 4.9c-.2.28.03.77.4.78H3.6c-.02 3.94-.45 3.4 3.66 3.4h7.44c3.65 0 3.74.3 3.7-2.25l-1.1 1.34c-.1.1-.2.17-.32.2-.16 0-.34-.08-.44-.2l-1.65-2.03c-.06.02-.1.04-.18.04H7.28c-.35 0-.57-.2-.66-.5h2.44c.37 0 .63-.5.4-.78l-3.96-4.9c-.1-.15-.3-.23-.47-.2zM4.88 117.6c-1.16 0-1.3.3-1.3 1.56l1.14-1.38c.08-.1.22-.14.34-.16.16 0 .34.04.44.16l2.22 2.75h7c.42 0 .72.28.72.72v.53h-2.6c-.3.1-.43.54-.2.78l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.22-.28-.02-.77-.37-.78H18.4v-.53c0-4.2.72-3.63-3.66-3.63H7.28c-1.08 0-1.86-.03-2.4-.03zm.1 1.74c-.1.03-.17.1-.23.16L.8 124.44c-.2.28.03.77.4.78H3.6v.5c0 4.26-.55 3.62 3.66 3.62h7.44c1.03 0 1.74.02 2.28 0-.16.02-.34-.03-.44-.15l-2.22-2.76H7.28c-.44 0-.72-.3-.72-.72v-.5h2.5c.37.02.63-.5.4-.78L5.5 119.5c-.12-.15-.34-.22-.53-.16zm12.02 10c1.2-.02 1.4-.25 1.4-1.53l-1.1 1.36c-.07.1-.17.17-.3.18zM5.94 136.6l2.37 2.93h6.42c.42 0 .72.28.72.72v1.25h-2.6c-.3.1-.43.54-.2.78l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.22-.28-.02-.77-.37-.78H18.4v-1.25c0-4.2.72-3.63-3.66-3.63H7.28c-.6 0-.92-.02-1.34-.03zm-1.72.06c-.4.08-.54.3-.6.75l.6-.74zm.84.93c-.12 0-.24.08-.3.18l-3.95 4.9c-.24.3 0 .83.4.82H3.6v1.22c0 4.26-.55 3.62 3.66 3.62h7.44c.63 0 .97.02 1.4.03l-2.37-2.93H7.28c-.44 0-.72-.3-.72-.72v-1.22h2.5c.4.04.67-.53.4-.8l-3.96-4.92c-.1-.13-.27-.2-.44-.2zm13.28 10.03l-.56.7c.36-.07.5-.3.56-.7zM17.13 155.6c-.55-.02-1.32.03-2.4.03h-8.2l2.38 2.9h5.82c.42 0 .72.28.72.72v1.97H12.9c-.32.06-.48.52-.28.78l3.94 4.94c.2.23.6.22.78-.03l3.94-4.9c.22-.28-.02-.77-.37-.78H18.4v-1.97c0-3.15.4-3.62-1.25-3.66zm-12.1.28c-.1.02-.2.1-.28.18l-3.94 4.9c-.2.3.03.78.4.8H3.6v1.96c0 4.26-.55 3.62 3.66 3.62h8.24l-2.36-2.9H7.28c-.44 0-.72-.3-.72-.72v-1.97h2.5c.37.02.63-.5.4-.78l-3.96-4.9c-.1-.15-.3-.22-.47-.2zM5.13 174.5c-.15 0-.3.07-.38.2L.8 179.6c-.24.27 0 .82.4.8H3.6v2.32c0 4.26-.55 3.62 3.66 3.62h7.94l-2.35-2.9h-5.6c-.43 0-.7-.3-.7-.72v-2.3h2.5c.38.03.66-.54.4-.83l-3.97-4.9c-.1-.13-.23-.2-.38-.2zm12 .1c-.55-.02-1.32.03-2.4.03H6.83l2.35 2.9h5.52c.42 0 .72.28.72.72v2.34h-2.6c-.3.1-.43.53-.2.78l3.92 4.9c.18.24.6.24.78 0l3.94-4.9c.22-.3-.02-.78-.37-.8H18.4v-2.33c0-3.15.4-3.62-1.25-3.66zM4.97 193.16c-.1.03-.17.1-.22.18l-3.94 4.9c-.2.3.03.78.4.8H3.6v2.68c0 4.26-.55 3.62 3.66 3.62h7.66l-2.3-2.84c-.03-.02-.03-.04-.05-.06H7.27c-.44 0-.72-.3-.72-.72v-2.7h2.5c.37.03.63-.48.4-.77l-3.96-4.9c-.12-.17-.34-.25-.53-.2zm12.16.43c-.55-.02-1.32.03-2.4.03H7.1l2.32 2.84.03.06h5.25c.42 0 .72.28.72.72v2.7h-2.5c-.36.02-.56.54-.3.8l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.26-.28 0-.83-.37-.8H18.4v-2.7c0-3.15.4-3.62-1.25-3.66z' fill='%232B90D9' stroke-width='0'/></svg>")
}

button.icon-button i.fa-retweet {
    background-position: 0 0;
    height: 19px;
    -webkit-transition: background-position .9s steps(10);
    transition: background-position .9s steps(10);
    -webkit-transition-duration: 0s;
    transition-duration: 0s;
    vertical-align: middle;
    width: 22px
}

    button.icon-button i.fa-retweet:before {
        display: none !important
    }

button.icon-button.active i.fa-retweet {
    -webkit-transition-duration: .9s;
    transition-duration: .9s;
    background-position: 0 100%
}

.status-card {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    cursor: pointer;
    font-size: 14px;
    border: 1px solid #393f4f;
    border-radius: 4px;
    color: #606984;
    margin-top: 14px;
    text-decoration: none;
    overflow: hidden
}

    .status-card:hover {
        background: #393f4f
    }

.status-card-photo, .status-card-rich, .status-card-video {
    margin-top: 14px;
    overflow: hidden
}

    .status-card-photo, .status-card-photo iframe, .status-card-rich iframe, .status-card-video iframe {
        width: 100%;
        height: auto
    }

.status-card-photo {
    cursor: -webkit-zoom-in;
    cursor: zoom-in;
    display: block;
    text-decoration: none;
    margin: 0
}

.status-card-video iframe {
    width: 100%;
    height: 100%
}

.status-card__title {
    display: block;
    font-weight: 500;
    margin-bottom: 5px;
    color: #9baec8;
    overflow: hidden;
    text-overflow: ellipsis;
}

.status-card__content {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    overflow: hidden;
    padding: 14px 14px 14px 8px
}

.status-card__description {
    color: #9baec8
}

.status-card__host {
    display: block;
    margin-top: 5px;
    font-size: 13px
}

.status-card__image {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100px;
    flex: 0 0 100px;
    background: #393f4f
}

.status-card.horizontal {
    display: block
}

    .status-card.horizontal .status-card__image {
        width: 100%
    }

    .status-card.horizontal .status-card__image-image {
        border-radius: 4px 4px 0 0
    }

    .status-card.horizontal .status-card__title {
        white-space: inherit
    }

.status-card__image-image {
    border-radius: 4px 0 0 4px;
    display: block;
    margin: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    font-family: object-fit\:cover;
    object-fit: cover
}

.load-more {
    display: block;
    color: #606984;
    background-color: transparent;
    border: 0;
    font-size: inherit;
    text-align: center;
    line-height: inherit;
    margin: 0;
    padding: 15px;
    width: 100%;
    clear: both
}

    .load-more:hover {
        background: #2c313d
    }

.missing-indicator {
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    color: #4a5266;
    background: #282c37;
    cursor: default;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

    .missing-indicator > div {
        background: url(/packs/mastodon-not-found-afb3fe71154b0c7518f25c70897c03d2.png) no-repeat center -50px;
        padding-top: 210px;
        width: 100%
    }

.column-header__wrapper {
    position: relative;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto
}

    .column-header__wrapper.active:before {
        display: block;
        content: "";
        position: absolute;
        top: 35px;
        left: 0;
        right: 0;
        margin: 0 auto;
        width: 60%;
        pointer-events: none;
        height: 28px;
        z-index: 1;
        background: radial-gradient(ellipse,rgba(43,144,217,.23) 0,rgba(43,144,217,0) 60%)
    }

.column-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 15px;
    font-size: 16px;
    background: #313543;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    cursor: pointer;
    position: relative;
    z-index: 2;
    outline: 0
}

    .column-header.active {
        -webkit-box-shadow: 0 1px 0 rgba(43,144,217,.3);
        box-shadow: 0 1px 0 rgba(43,144,217,.3)
    }

        .column-header.active .column-header__icon {
            color: #2b90d9;
            text-shadow: 0 0 10px rgba(43,144,217,.4)
        }

    .column-header:active, .column-header:focus {
        outline: 0
    }

.column-header__buttons {
    height: 48px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: -15px;
    margin-left: 0
}

.column-header__links .text-btn {
    margin-right: 10px
}

.column-header__button {
    background: #313543;
    border: 0;
    color: #9baec8;
    cursor: pointer;
    font-size: 16px;
    padding: 0 15px
}

    .column-header__button:hover {
        color: #b2c1d5
    }

    .column-header__button.active, .column-header__button.active:hover {
        color: #fff;
        background: #393f4f
    }

.column-header__collapsible {
    max-height: 70vh;
    overflow: hidden;
    overflow-y: auto;
    color: #9baec8;
    -webkit-transition: max-height .15s ease-in-out,opacity .3s linear;
    transition: max-height .15s ease-in-out,opacity .3s linear;
    opacity: 1
}

    .column-header__collapsible.collapsed {
        max-height: 0;
        opacity: .5
    }

    .column-header__collapsible.animating {
        overflow-y: hidden
    }

    .column-header__collapsible hr {
        height: 0;
        background: transparent;
        border: 0;
        border-top: 1px solid #42485a;
        margin: 10px 0
    }

.column-header__collapsible-inner {
    background: #393f4f;
    padding: 15px
}

.column-header__setting-btn:hover {
    color: #a8b9cf;
    text-decoration: underline
}

.column-header__setting-arrows {
    float: right
}

    .column-header__setting-arrows .column-header__setting-btn {
        padding: 0 10px
    }

        .column-header__setting-arrows .column-header__setting-btn:last-child {
            padding-right: 0
        }

.column-header__title {
    display: inline-block;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.text-btn {
    display: inline-block;
    padding: 0;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    border: 0;
    background: transparent;
    cursor: pointer
}

.column-header__icon {
    display: inline-block;
    margin-right: 5px
}

.loading-indicator {
    color: #606984;
    font-size: 12px;
    font-weight: 400;
    text-transform: uppercase;
    overflow: visible;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%)
}

    .loading-indicator span {
        display: block;
        float: left;
        margin-left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        margin: 82px 0 0 50%;
        -webkit-animation: loader-label 1.15s infinite cubic-bezier(.215,.61,.355,1);
        animation: loader-label 1.15s infinite cubic-bezier(.215,.61,.355,1)
    }

.loading-indicator__figure {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    width: 0;
    height: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: 0 solid #606984;
    border-radius: 50%;
    -webkit-animation: loader-figure 1.15s infinite cubic-bezier(.215,.61,.355,1);
    animation: loader-figure 1.15s infinite cubic-bezier(.215,.61,.355,1)
}

@-webkit-keyframes loader-figure {
    0% {
        width: 0;
        height: 0;
        background-color: #606984
    }

    29% {
        background-color: #606984
    }

    30% {
        width: 42px;
        height: 42px;
        background-color: transparent;
        border-width: 21px;
        opacity: 1
    }

    to {
        width: 42px;
        height: 42px;
        border-width: 0;
        opacity: 0;
        background-color: transparent
    }
}

@keyframes loader-figure {
    0% {
        width: 0;
        height: 0;
        background-color: #606984
    }

    29% {
        background-color: #606984
    }

    30% {
        width: 42px;
        height: 42px;
        background-color: transparent;
        border-width: 21px;
        opacity: 1
    }

    to {
        width: 42px;
        height: 42px;
        border-width: 0;
        opacity: 0;
        background-color: transparent
    }
}

@-webkit-keyframes loader-label {
    0% {
        opacity: .25
    }

    30% {
        opacity: 1
    }

    to {
        opacity: .25
    }
}

@keyframes loader-label {
    0% {
        opacity: .25
    }

    30% {
        opacity: 1
    }

    to {
        opacity: .25
    }
}

.video-error-cover {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: #000;
    color: #fff;
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 100%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-top: 8px;
    position: relative;
    text-align: center;
    z-index: 100
}

.media-spoiler {
    background: #000;
    color: #9baec8;
    border: 0;
    width: 100%;
    height: 100%
}

    .media-spoiler:active, .media-spoiler:focus, .media-spoiler:hover {
        color: #b5c3d6
    }

.media-spoiler__warning {
    display: block;
    font-size: 14px
}

.media-spoiler__trigger {
    display: block;
    font-size: 11px;
    font-weight: 500
}

.spoiler-button {
    display: none;
    left: 4px;
    position: absolute;
    text-shadow: 0 1px 1px #000,1px 0 1px #000;
    top: 4px;
    z-index: 100
}

    .spoiler-button.spoiler-button--visible {
        display: block
    }

.modal-container--preloader {
    background: #393f4f
}

.account--panel {
    background: #313543;
    border-top: 1px solid #393f4f;
    border-bottom: 1px solid #393f4f;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    padding: 10px 0
}

.account--panel__button, .detailed-status__button {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    text-align: center
}

.column-settings__outer {
    background: #393f4f;
    padding: 15px
}

.column-settings__section {
    color: #9baec8;
    cursor: default;
    display: block;
    font-weight: 500;
    margin-bottom: 10px
}

.column-settings__row .text-btn {
    margin-bottom: 15px
}

.modal-container__nav {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: rgba(0,0,0,.5);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: 0;
    color: #fff;
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 24px;
    height: 100%;
    padding: 30px 15px;
    position: absolute;
    top: 0
}

.modal-container__nav--left {
    left: -61px
}

.modal-container__nav--right {
    right: -61px
}

.account--follows-info {
    color: #fff;
    position: absolute;
    top: 10px;
    left: 10px;
    opacity: .7;
    display: inline-block;
    vertical-align: top;
    background-color: rgba(0,0,0,.4);
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 500;
    padding: 4px;
    border-radius: 4px
}

.account--action-button {
    position: absolute;
    top: 10px;
    right: 20px
}

.setting-toggle {
    display: block;
    line-height: 24px
}

.setting-meta__label, .setting-toggle__label {
    color: #9baec8;
    display: inline-block;
    margin-bottom: 14px;
    margin-left: 8px;
    vertical-align: middle
}

.setting-meta__label {
    color: #9baec8;
    float: right
}

.empty-column-indicator, .error-column {
    color: #535b72;
    background: #282c37;
    text-align: center;
    padding: 20px;
    font-size: 15px;
    font-weight: 400;
    cursor: default;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

@supports (display:grid) {
    .empty-column-indicator, .error-column {
        contain: strict
    }
}

.empty-column-indicator a, .error-column a {
    color: #2b90d9;
    text-decoration: none
}

    .empty-column-indicator a:hover, .error-column a:hover {
        text-decoration: underline
    }

.error-column {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

@-webkit-keyframes heartbeat {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-transform-origin: center center;
        transform-origin: center center;
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    10% {
        -webkit-transform: scale(.91);
        transform: scale(.91);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    17% {
        -webkit-transform: scale(.98);
        transform: scale(.98);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    33% {
        -webkit-transform: scale(.87);
        transform: scale(.87);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    45% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
}

@keyframes heartbeat {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-transform-origin: center center;
        transform-origin: center center;
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    10% {
        -webkit-transform: scale(.91);
        transform: scale(.91);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    17% {
        -webkit-transform: scale(.98);
        transform: scale(.98);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    33% {
        -webkit-transform: scale(.87);
        transform: scale(.87);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    45% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
}

.pulse-loading {
    -webkit-animation: heartbeat 1.5s ease-in-out infinite both;
    animation: heartbeat 1.5s ease-in-out infinite both
}

.emoji-picker-dropdown__menu {
    background: #fff;
    position: absolute;
    -webkit-box-shadow: 4px 4px 6px rgba(0,0,0,.4);
    box-shadow: 4px 4px 6px rgba(0,0,0,.4);
    border-radius: 4px;
    margin-top: 5px
}

    .emoji-picker-dropdown__menu .emoji-mart-scroll {
        -webkit-transition: opacity .2s ease;
        transition: opacity .2s ease
    }

    .emoji-picker-dropdown__menu.selecting .emoji-mart-scroll {
        opacity: .5
    }

.emoji-picker-dropdown__modifiers {
    position: absolute;
    top: 60px;
    right: 11px;
    cursor: pointer
}

.emoji-picker-dropdown__modifiers__menu {
    position: absolute;
    z-index: 4;
    top: -4px;
    left: -8px;
    background: #fff;
    border-radius: 4px;
    -webkit-box-shadow: 1px 2px 6px rgba(0,0,0,.2);
    box-shadow: 1px 2px 6px rgba(0,0,0,.2);
    overflow: hidden
}

    .emoji-picker-dropdown__modifiers__menu button {
        display: block;
        cursor: pointer;
        border: 0;
        padding: 4px 8px;
        background: transparent
    }

        .emoji-picker-dropdown__modifiers__menu button:active, .emoji-picker-dropdown__modifiers__menu button:focus, .emoji-picker-dropdown__modifiers__menu button:hover {
            background: rgba(217,225,232,.4)
        }

    .emoji-picker-dropdown__modifiers__menu .emoji-mart-emoji {
        height: 22px
    }

.emoji-mart-emoji span {
    background-repeat: no-repeat
}

.upload-area {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: rgba(0,0,0,.8);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    visibility: hidden;
    width: 100%;
    z-index: 2000
}

    .upload-area * {
        pointer-events: none
    }

.upload-area__drop {
    width: 320px;
    height: 160px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    padding: 8px
}

.upload-area__background {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    border-radius: 4px;
    background: #282c37;
    -webkit-box-shadow: 0 0 5px rgba(0,0,0,.2);
    box-shadow: 0 0 5px rgba(0,0,0,.2)
}

.upload-area__content {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: #d9e1e8;
    font-size: 18px;
    font-weight: 500;
    border: 2px dashed #606984;
    border-radius: 4px
}

.upload-area__content, .upload-progress {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.upload-progress {
    padding: 10px;
    color: #606984;
    overflow: hidden
}

    .upload-progress .fa {
        font-size: 34px;
        margin-right: 10px
    }

    .upload-progress span {
        font-size: 12px;
        text-transform: uppercase;
        font-weight: 500;
        display: block
    }

.upload-progess__message {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto
}

.upload-progress__backdrop {
    width: 100%;
    height: 6px;
    border-radius: 6px;
    background: #606984;
    position: relative;
    margin-top: 5px
}

.upload-progress__tracker {
    position: absolute;
    left: 0;
    top: 0;
    height: 6px;
    background: #2b90d9;
    border-radius: 6px
}

.emoji-button {
    display: block;
    font-size: 24px;
    line-height: 24px;
    margin-left: 2px;
    width: 24px;
    outline: 0;
    cursor: pointer
}

    .emoji-button:active, .emoji-button:focus {
        outline: 0 !important
    }

    .emoji-button img {
        -webkit-filter: grayscale(100%);
        filter: grayscale(100%);
        opacity: .8;
        display: block;
        margin: 0;
        width: 22px;
        height: 22px;
        margin-top: 2px
    }

    .dropdown--active .emoji-button img, .emoji-button:active img, .emoji-button:focus img, .emoji-button:hover img {
        opacity: 1;
        -webkit-filter: none;
        filter: none
    }

.privacy-dropdown__dropdown {
    position: absolute;
    background: #fff;
    -webkit-box-shadow: 2px 4px 15px rgba(0,0,0,.4);
    box-shadow: 2px 4px 15px rgba(0,0,0,.4);
    border-radius: 4px;
    margin-left: 40px;
    overflow: hidden
}

.privacy-dropdown__option {
    color: #282c37;
    padding: 10px;
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

    .privacy-dropdown__option.active, .privacy-dropdown__option:hover {
        background: #2b90d9;
        color: #fff
    }

        .privacy-dropdown__option.active .privacy-dropdown__option__content, .privacy-dropdown__option.active .privacy-dropdown__option__content strong, .privacy-dropdown__option:hover .privacy-dropdown__option__content, .privacy-dropdown__option:hover .privacy-dropdown__option__content strong {
            color: #fff
        }

        .privacy-dropdown__option.active:hover {
            background: #3c99dc
        }

.privacy-dropdown__option__icon {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-right: 10px
}

.privacy-dropdown__option__content {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    color: #536f96
}

    .privacy-dropdown__option__content strong {
        font-weight: 500;
        display: block;
        color: #282c37
    }

        .privacy-dropdown__option__content strong:lang(ja), .privacy-dropdown__option__content strong:lang(ko), .privacy-dropdown__option__content strong:lang(zh-CN), .privacy-dropdown__option__content strong:lang(zh-HK), .privacy-dropdown__option__content strong:lang(zh-TW) {
            font-weight: 700
        }

.privacy-dropdown.active .privacy-dropdown__value {
    background: #fff;
    border-radius: 4px 4px 0 0;
    -webkit-box-shadow: 0 -4px 4px rgba(0,0,0,.1);
    box-shadow: 0 -4px 4px rgba(0,0,0,.1)
}

    .privacy-dropdown.active .privacy-dropdown__value .icon-button {
        -webkit-transition: none;
        transition: none
    }

    .privacy-dropdown.active .privacy-dropdown__value.active {
        background: #2b90d9
    }

        .privacy-dropdown.active .privacy-dropdown__value.active .icon-button {
            color: #fff
        }

.privacy-dropdown.active .privacy-dropdown__dropdown {
    display: block;
    -webkit-box-shadow: 2px 4px 6px rgba(0,0,0,.1);
    box-shadow: 2px 4px 6px rgba(0,0,0,.1)
}

.search {
    position: relative
}

.search__input {
    outline: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    width: 100%;
    border: none;
    padding: 10px;
    padding-right: 30px;
    font-family: inherit;
    background: #282c37;
    color: #9baec8;
    font-size: 14px;
    margin: 0
}

    .search__input::-moz-focus-inner {
        border: 0
    }

    .search__input::-moz-focus-inner, .search__input:active, .search__input:focus {
        outline: 0 !important
    }

    .search__input:focus {
        background: #313543
    }

@media screen and (max-width:600px) {
    .search__input {
        font-size: 16px
    }
}

.search__icon .fa {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    display: inline-block;
    opacity: 0;
    -webkit-transition: all .1s linear;
    transition: all .1s linear;
    font-size: 18px;
    width: 18px;
    height: 18px;
    color: #d9e1e8;
    cursor: default;
    pointer-events: none
}

    .search__icon .fa.active {
        pointer-events: auto;
        opacity: .3
    }

.search__icon .fa-search {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg)
}

    .search__icon .fa-search.active {
        pointer-events: none;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

.search__icon .fa-times-circle {
    top: 11px;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    cursor: pointer
}

    .search__icon .fa-times-circle.active {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg)
    }

    .search__icon .fa-times-circle:hover {
        color: #fff
    }

.search-results__header {
    color: #606984;
    background: #2c313d;
    border-bottom: 1px solid #1f232b;
    padding: 15px 10px;
    font-size: 14px;
    font-weight: 500
}

.search-results__hashtag {
    display: block;
    padding: 10px;
    color: #d9e1e8;
    text-decoration: none
}

    .search-results__hashtag:active, .search-results__hashtag:focus, .search-results__hashtag:hover {
        color: #e6ebf0;
        text-decoration: underline
    }

.modal-root {
    -webkit-transition: opacity .3s linear;
    transition: opacity .3s linear;
    will-change: opacity;
    z-index: 9999
}

.modal-root__overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,.7)
}

.modal-root__container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-line-pack: distribute;
    align-content: space-around;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.modal-root__container, .modal-root__modal {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    z-index: 9999
}

.modal-root__modal {
    pointer-events: auto
}

.media-modal {
    max-width: 80vw;
    max-height: 80vh;
    position: relative
}

    .media-modal .extended-video-player, .media-modal canvas, .media-modal img, .media-modal video {
        max-width: 80vw;
        max-height: 80vh;
        width: auto;
        height: auto;
        margin: auto
    }

    .media-modal .extended-video-player, .media-modal video {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        width: 80vw;
        height: 80vh
    }

    .media-modal canvas, .media-modal img {
        display: block;
        background: url(/packs/void-65dfe5bd31335a5b308d36964d320574.png) repeat;
        -o-object-fit: contain;
        font-family: object-fit\:contain;
        object-fit: contain
    }

    .media-modal .react-swipeable-view-container {
        max-width: 80vw
    }

.media-modal__content {
    background: #000
}

.media-modal__pagination {
    width: 100%;
    text-align: center;
    position: absolute;
    left: 0;
    bottom: -40px
}

.media-modal__page-dot {
    display: inline-block
}

.media-modal__button {
    background-color: #fff;
    height: 12px;
    width: 12px;
    border-radius: 6px;
    margin: 10px;
    padding: 0;
    border: 0;
    font-size: 0
}

.media-modal__button--active {
    background-color: #2b90d9
}

.media-modal__close {
    position: absolute;
    right: 4px;
    top: 4px;
    z-index: 100
}

.embed-modal, .error-modal, .onboarding-modal {
    background: #d9e1e8;
    color: #282c37;
    border-radius: 8px;
    overflow: hidden;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

.onboarding-modal__pager {
    height: 80vh;
    width: 80vw;
    max-width: 520px;
    max-height: 420px
}

    .onboarding-modal__pager .react-swipeable-view-container > div {
        width: 100%;
        height: 100%;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding: 25px;
        display: none;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-user-select: text;
        -moz-user-select: text;
        -ms-user-select: text;
        user-select: text
    }

.error-modal__body {
    height: 80vh;
    width: 80vw;
    max-width: 520px;
    max-height: 420px;
    position: relative
}

    .error-modal__body > div {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding: 25px;
        display: none;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        opacity: 0;
        -webkit-user-select: text;
        -moz-user-select: text;
        -ms-user-select: text;
        user-select: text
    }

    .error-modal__body, .error-modal__body > div {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center
    }

.error-modal__body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    text-align: center
}

@media screen and (max-width:550px) {
    .onboarding-modal {
        width: 100%;
        height: 100%;
        border-radius: 0
    }

    .onboarding-modal__pager {
        width: 100%;
        height: auto;
        max-width: none;
        max-height: none;
        -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto
    }
}

.error-modal__footer, .onboarding-modal__paginator {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    background: #c0cdd9;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 25px
}

    .error-modal__footer > div, .onboarding-modal__paginator > div {
        min-width: 33px
    }

    .error-modal__footer .error-modal__nav, .error-modal__footer .onboarding-modal__nav, .onboarding-modal__paginator .error-modal__nav, .onboarding-modal__paginator .onboarding-modal__nav {
        color: #6d8ca7;
        background-color: transparent;
        border: 0;
        font-size: 14px;
        font-weight: 500;
        padding: 0;
        line-height: inherit;
        height: auto
    }

        .error-modal__footer .error-modal__nav:active, .error-modal__footer .error-modal__nav:focus, .error-modal__footer .error-modal__nav:hover, .error-modal__footer .onboarding-modal__nav:active, .error-modal__footer .onboarding-modal__nav:focus, .error-modal__footer .onboarding-modal__nav:hover, .onboarding-modal__paginator .error-modal__nav:active, .onboarding-modal__paginator .error-modal__nav:focus, .onboarding-modal__paginator .error-modal__nav:hover, .onboarding-modal__paginator .onboarding-modal__nav:active, .onboarding-modal__paginator .onboarding-modal__nav:focus, .onboarding-modal__paginator .onboarding-modal__nav:hover {
            color: #60829f
        }

        .error-modal__footer .error-modal__nav.onboarding-modal__done, .error-modal__footer .error-modal__nav.onboarding-modal__next, .error-modal__footer .onboarding-modal__nav.onboarding-modal__done, .error-modal__footer .onboarding-modal__nav.onboarding-modal__next, .onboarding-modal__paginator .error-modal__nav.onboarding-modal__done, .onboarding-modal__paginator .error-modal__nav.onboarding-modal__next, .onboarding-modal__paginator .onboarding-modal__nav.onboarding-modal__done, .onboarding-modal__paginator .onboarding-modal__nav.onboarding-modal__next {
            color: #2b90d9
        }

.error-modal__footer {
    -ms-flex-pack: center
}

.error-modal__footer, .onboarding-modal__dots {
    -webkit-box-pack: center;
    justify-content: center
}

.onboarding-modal__dots {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center
}

.onboarding-modal__dot {
    width: 14px;
    height: 14px;
    border-radius: 14px;
    background: #a6b9c9;
    margin: 0 3px;
    cursor: pointer
}

    .onboarding-modal__dot:hover {
        background: #a0b4c5
    }

    .onboarding-modal__dot.active {
        cursor: default;
        background: #8da5ba
    }

.onboarding-modal__page__wrapper {
    pointer-events: none
}

    .onboarding-modal__page__wrapper.onboarding-modal__page__wrapper--active {
        pointer-events: auto
    }

.onboarding-modal__page {
    cursor: default;
    line-height: 21px
}

    .onboarding-modal__page h1 {
        font-size: 18px;
        font-weight: 500;
        color: #282c37;
        margin-bottom: 20px
    }

    .onboarding-modal__page a {
        color: #2b90d9
    }

        .onboarding-modal__page a:active, .onboarding-modal__page a:focus, .onboarding-modal__page a:hover {
            color: #3c99dc
        }

    .onboarding-modal__page p {
        font-size: 16px;
        color: #393f4f;
        margin-top: 10px;
        margin-bottom: 10px
    }

        .onboarding-modal__page p:last-child {
            margin-bottom: 0
        }

        .onboarding-modal__page p strong {
            font-weight: 500;
            background: #282c37;
            color: #d9e1e8;
            border-radius: 4px;
            font-size: 14px;
            padding: 3px 6px
        }

            .onboarding-modal__page p strong:lang(ja), .onboarding-modal__page p strong:lang(ko), .onboarding-modal__page p strong:lang(zh-CN), .onboarding-modal__page p strong:lang(zh-HK), .onboarding-modal__page p strong:lang(zh-TW) {
                font-weight: 700
            }

.onboarding-modal__page-one {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.onboarding-modal__page-one__elephant-friend {
    background: url(/packs/elephant-friend-1-18bbe5bf56bcd2f550f26ae91be00dfb.png) no-repeat 50%/contain;
    width: 155px;
    height: 193px;
    margin-right: 15px
}

@media screen and (max-width:400px) {
    .onboarding-modal__page-one {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: normal;
        -ms-flex-align: normal;
        align-items: normal
    }

    .onboarding-modal__page-one__elephant-friend {
        width: 100%;
        height: 30vh;
        max-height: 160px;
        margin-bottom: 5vh
    }
}

.onboarding-modal__page-five p, .onboarding-modal__page-four p, .onboarding-modal__page-three p, .onboarding-modal__page-two p {
    text-align: left
}

.onboarding-modal__page-five .figure, .onboarding-modal__page-four .figure, .onboarding-modal__page-three .figure, .onboarding-modal__page-two .figure {
    background: #17191f;
    color: #d9e1e8;
    margin-bottom: 20px;
    border-radius: 4px;
    padding: 10px;
    text-align: center;
    font-size: 14px;
    -webkit-box-shadow: 1px 2px 6px rgba(0,0,0,.3);
    box-shadow: 1px 2px 6px rgba(0,0,0,.3)
}

    .onboarding-modal__page-five .figure .onboarding-modal__image, .onboarding-modal__page-four .figure .onboarding-modal__image, .onboarding-modal__page-three .figure .onboarding-modal__image, .onboarding-modal__page-two .figure .onboarding-modal__image {
        border-radius: 4px;
        margin-bottom: 10px
    }

    .onboarding-modal__page-five .figure.non-interactive, .onboarding-modal__page-four .figure.non-interactive, .onboarding-modal__page-three .figure.non-interactive, .onboarding-modal__page-two .figure.non-interactive {
        pointer-events: none;
        text-align: left
    }

.onboarding-modal__page-four__columns .row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 20px
}

    .onboarding-modal__page-four__columns .row > div {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 0px;
        flex: 1 1 0;
        margin: 0 10px
    }

        .onboarding-modal__page-four__columns .row > div:first-child {
            margin-left: 0
        }

        .onboarding-modal__page-four__columns .row > div:last-child {
            margin-right: 0
        }

        .onboarding-modal__page-four__columns .row > div p {
            text-align: center
        }

    .onboarding-modal__page-four__columns .row:last-child {
        margin-bottom: 0
    }

.onboarding-modal__page-four__columns .column-header {
    color: #fff
}

@media screen and (max-width:320px) and (max-height:600px) {
    .onboarding-modal__page p {
        font-size: 14px;
        line-height: 20px
    }

    .onboarding-modal__page-five .figure, .onboarding-modal__page-four .figure, .onboarding-modal__page-three .figure, .onboarding-modal__page-two .figure {
        font-size: 12px;
        margin-bottom: 10px
    }

    .onboarding-modal__page-four__columns .row {
        margin-bottom: 10px
    }

    .onboarding-modal__page-four__columns .column-header {
        padding: 5px;
        font-size: 12px
    }
}

.onboarding-modal__image {
    border-radius: 8px;
    width: 70vw;
    max-width: 450px;
    max-height: auto;
    display: block;
    margin: auto;
    margin-bottom: 20px
}

.onboard-sliders {
    display: inline-block;
    max-width: 30px;
    max-height: auto;
    margin-left: 10px
}

.actions-modal, .boost-modal, .confirmation-modal, .mute-modal, .report-modal {
    background: #f2f5f7;
    color: #282c37;
    border-radius: 8px;
    overflow: hidden;
    max-width: 90vw;
    width: 480px;
    position: relative;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

    .actions-modal .status__display-name, .boost-modal .status__display-name, .confirmation-modal .status__display-name, .mute-modal .status__display-name, .report-modal .status__display-name {
        display: block;
        max-width: 100%;
        padding-right: 25px
    }

    .actions-modal .status__avatar, .boost-modal .status__avatar, .confirmation-modal .status__avatar, .mute-modal .status__avatar, .report-modal .status__avatar {
        height: 28px;
        left: 10px;
        position: absolute;
        top: 10px;
        width: 48px
    }

    .actions-modal .status {
        background: #fff;
        padding-top: 10px;
        padding-bottom: 10px
    }

    .actions-modal .dropdown-menu__separator, .actions-modal .status {
        border-bottom-color: #d9e1e8
    }

.boost-modal__container {
    overflow-x: scroll;
    padding: 10px
}

    .boost-modal__container .status {
        -webkit-user-select: text;
        -moz-user-select: text;
        -ms-user-select: text;
        user-select: text;
        border-bottom: 0
    }

.boost-modal__action-bar, .confirmation-modal__action-bar, .mute-modal__action-bar, .report-modal__action-bar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    background: #d9e1e8;
    padding: 10px;
    line-height: 36px
}

    .boost-modal__action-bar > div, .confirmation-modal__action-bar > div, .mute-modal__action-bar > div, .report-modal__action-bar > div {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
        text-align: right;
        color: #707b97;
        padding-right: 10px
    }

    .boost-modal__action-bar .button, .confirmation-modal__action-bar .button, .mute-modal__action-bar .button, .report-modal__action-bar .button {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto
    }

.boost-modal__status-header {
    font-size: 15px
}

.boost-modal__status-time {
    float: right;
    font-size: 14px
}

.confirmation-modal {
    max-width: 85vw
}

@media screen and (min-width:480px) {
    .confirmation-modal {
        max-width: 380px
    }
}

.mute-modal {
    line-height: 24px
}

    .mute-modal .react-toggle {
        vertical-align: middle
    }

.report-modal__comment, .report-modal__statuses {
    padding: 10px
}

.report-modal__statuses {
    min-height: 20vh;
    max-height: 40vh;
    overflow-y: auto;
    overflow-x: hidden
}

.report-modal__comment .setting-text {
    margin-top: 10px
}

.actions-modal {
    max-height: 80vh;
    max-width: 80vw
}

    .actions-modal .status {
        overflow-y: auto;
        max-height: 300px
    }

    .actions-modal .actions-modal__item-label {
        font-weight: 500
    }

    .actions-modal ul {
        overflow-y: auto;
        -ms-flex-negative: 0;
        flex-shrink: 0
    }

        .actions-modal ul li:empty {
            margin: 0
        }

        .actions-modal ul li:not(:empty) a {
            color: #282c37;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            padding: 12px 16px;
            font-size: 15px;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            text-decoration: none
        }

            .actions-modal ul li:not(:empty) a, .actions-modal ul li:not(:empty) a button {
                -webkit-transition: none;
                transition: none
            }

                .actions-modal ul li:not(:empty) a.active, .actions-modal ul li:not(:empty) a.active button, .actions-modal ul li:not(:empty) a:active, .actions-modal ul li:not(:empty) a:active button, .actions-modal ul li:not(:empty) a:focus, .actions-modal ul li:not(:empty) a:focus button, .actions-modal ul li:not(:empty) a:hover, .actions-modal ul li:not(:empty) a:hover button {
                    background: #2b90d9;
                    color: #fff
                }

                .actions-modal ul li:not(:empty) a button:first-child {
                    margin-right: 10px
                }

.confirmation-modal__action-bar .confirmation-modal__cancel-button, .confirmation-modal__action-bar .mute-modal__cancel-button, .mute-modal__action-bar .confirmation-modal__cancel-button, .mute-modal__action-bar .mute-modal__cancel-button {
    background-color: transparent;
    color: #6d8ca7;
    font-size: 14px;
    font-weight: 500
}

    .confirmation-modal__action-bar .confirmation-modal__cancel-button:active, .confirmation-modal__action-bar .confirmation-modal__cancel-button:focus, .confirmation-modal__action-bar .confirmation-modal__cancel-button:hover, .confirmation-modal__action-bar .mute-modal__cancel-button:active, .confirmation-modal__action-bar .mute-modal__cancel-button:focus, .confirmation-modal__action-bar .mute-modal__cancel-button:hover, .mute-modal__action-bar .confirmation-modal__cancel-button:active, .mute-modal__action-bar .confirmation-modal__cancel-button:focus, .mute-modal__action-bar .confirmation-modal__cancel-button:hover, .mute-modal__action-bar .mute-modal__cancel-button:active, .mute-modal__action-bar .mute-modal__cancel-button:focus, .mute-modal__action-bar .mute-modal__cancel-button:hover {
        color: #60829f
    }

.confirmation-modal__container, .mute-modal__container, .report-modal__target {
    padding: 30px;
    font-size: 16px;
    text-align: center
}

    .confirmation-modal__container strong, .mute-modal__container strong, .report-modal__target strong {
        font-weight: 500
    }

        .confirmation-modal__container strong:lang(ja), .confirmation-modal__container strong:lang(ko), .confirmation-modal__container strong:lang(zh-CN), .confirmation-modal__container strong:lang(zh-HK), .confirmation-modal__container strong:lang(zh-TW), .mute-modal__container strong:lang(ja), .mute-modal__container strong:lang(ko), .mute-modal__container strong:lang(zh-CN), .mute-modal__container strong:lang(zh-HK), .mute-modal__container strong:lang(zh-TW), .report-modal__target strong:lang(ja), .report-modal__target strong:lang(ko), .report-modal__target strong:lang(zh-CN), .report-modal__target strong:lang(zh-HK), .report-modal__target strong:lang(zh-TW) {
            font-weight: 700
        }

.loading-bar {
    background-color: #2b90d9;
    height: 3px;
    position: absolute;
    top: 0;
    left: 0
}

.media-gallery__gifv__label {
    display: block;
    position: absolute;
    color: #fff;
    background: rgba(0,0,0,.5);
    bottom: 6px;
    left: 6px;
    padding: 2px 6px;
    border-radius: 2px;
    font-size: 11px;
    font-weight: 600;
    z-index: 1;
    pointer-events: none;
    opacity: .9;
    -webkit-transition: opacity .1s ease;
    transition: opacity .1s ease
}

.media-gallery__gifv.autoplay .media-gallery__gifv__label {
    display: none
}

.media-gallery__gifv:hover .media-gallery__gifv__label {
    opacity: 1
}

.attachment-list {
    font-size: 14px;
    border: 1px solid #393f4f;
    border-radius: 4px;
    margin-top: 14px;
    overflow: hidden
}

.attachment-list, .attachment-list__icon {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.attachment-list__icon {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    color: #606984;
    padding: 8px 18px;
    cursor: default;
    border-right: 1px solid #393f4f;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-size: 26px
}

    .attachment-list__icon .fa {
        display: block
    }

.attachment-list__list {
    list-style: none;
    padding: 4px 0;
    padding-left: 8px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

    .attachment-list__list li {
        display: block;
        padding: 4px 0
    }

    .attachment-list__list a {
        text-decoration: none;
        color: #606984;
        font-weight: 500
    }

        .attachment-list__list a:hover {
            text-decoration: underline
        }

.media-gallery {
    margin-top: 8px;
    overflow: hidden;
    width: 100%
}

.media-gallery, .media-gallery__item {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: relative
}

.media-gallery__item {
    border: none;
    display: block;
    float: left
}

    .media-gallery__item.standalone .media-gallery__item-gifv-thumbnail {
        -webkit-transform: none;
        transform: none
    }

.media-gallery__item-thumbnail {
    cursor: -webkit-zoom-in;
    cursor: zoom-in;
    display: block;
    text-decoration: none;
    height: 100%;
    line-height: 0
}

    .media-gallery__item-thumbnail, .media-gallery__item-thumbnail img {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
        font-family: "object-fit:cover;object-position:50% 20%";
        object-fit: cover;
        -o-object-position: 50% 20%;
        object-position: 50% 20%
    }

.media-gallery__gifv {
    height: 100%;
    overflow: hidden;
    position: relative;
    width: 100%
}

.media-gallery__item-gifv-thumbnail {
    cursor: -webkit-zoom-in;
    cursor: zoom-in;
    height: 100%;
    -o-object-fit: cover;
    font-family: object-fit\:cover;
    object-fit: cover;
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 100%;
    z-index: 1
}

.media-gallery__item-thumbnail-label {
    clip: rect(1px 1px 1px 1px);
    clip: rect(1px,1px,1px,1px);
    overflow: hidden;
    position: absolute
}

.status__video-player {
    background: #000;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    cursor: default;
    margin-top: 8px;
    overflow: hidden;
    position: relative
}

.status__video-player-video {
    height: 100%;
    -o-object-fit: cover;
    font-family: object-fit\:cover;
    object-fit: cover;
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 100%;
    z-index: 1
}

.status__video-player-expand, .status__video-player-mute {
    color: #fff;
    opacity: .8;
    position: absolute;
    right: 4px;
    text-shadow: 0 1px 1px #000,1px 0 1px #000
}

.status__video-player-spoiler {
    display: none;
    color: #fff;
    left: 4px;
    position: absolute;
    text-shadow: 0 1px 1px #000,1px 0 1px #000;
    top: 4px;
    z-index: 100
}

    .status__video-player-spoiler.status__video-player-spoiler--visible {
        display: block
    }

.status__video-player-expand {
    bottom: 4px;
    z-index: 100
}

.status__video-player-mute {
    top: 4px;
    z-index: 5
}

.video-player {
    overflow: hidden;
    position: relative;
    background: #000;
    max-width: 100%;
    border-radius: 4px
}

    .video-player video {
        height: 100%;
        width: 100%;
        z-index: 1
    }

    .video-player.fullscreen {
        width: 100% !important;
        height: 100% !important;
        margin: 0
    }

        .video-player.fullscreen video {
            max-width: 100% !important;
            max-height: 100% !important
        }

    .video-player.inline video {
        -o-object-fit: cover;
        font-family: object-fit\:cover;
        object-fit: cover;
        position: relative;
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%)
    }

.video-player__controls {
    position: absolute;
    z-index: 2;
    bottom: 0;
    left: 0;
    right: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0,rgba(0,0,0,.85)),color-stop(60%,rgba(0,0,0,.45)),to(transparent));
    background: linear-gradient(0deg,rgba(0,0,0,.85),rgba(0,0,0,.45) 60%,transparent);
    padding: 0 15px;
    opacity: 0;
    -webkit-transition: opacity .1s ease;
    transition: opacity .1s ease
}

    .video-player__controls.active {
        opacity: 1
    }

.video-player.inactive .video-player__controls, .video-player.inactive video {
    visibility: hidden
}

.video-player__spoiler {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 4;
    border: 0;
    background: #000;
    color: #9baec8;
    -webkit-transition: none;
    transition: none;
    pointer-events: none
}

    .video-player__spoiler.active {
        display: block;
        pointer-events: auto
    }

        .video-player__spoiler.active:active, .video-player__spoiler.active:focus, .video-player__spoiler.active:hover {
            color: #b5c3d6
        }

.video-player__spoiler__title {
    display: block;
    font-size: 14px
}

.video-player__spoiler__subtitle {
    display: block;
    font-size: 11px;
    font-weight: 500
}

.video-player__buttons-bar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding-bottom: 10px
}

.video-player__buttons {
    font-size: 16px;
    overflow: hidden;
    text-overflow: ellipsis
}

    .video-player__buttons.left button {
        padding-left: 0
    }

    .video-player__buttons.right button {
        padding-right: 0
    }

    .video-player__buttons button {
        background: transparent;
        padding: 2px 10px;
        font-size: 16px;
        border: 0;
        color: hsla(0,0%,100%,.75)
    }

        .video-player__buttons button:active, .video-player__buttons button:focus, .video-player__buttons button:hover {
            color: #fff
        }

.video-player__time-current, .video-player__time-sep, .video-player__time-total {
    font-size: 14px;
    font-weight: 500
}

.video-player__time-current {
    color: #fff;
    margin-left: 10px
}

.video-player__time-sep {
    display: inline-block;
    margin: 0 6px
}

.video-player__time-sep, .video-player__time-total {
    color: #fff
}

.video-player__seek {
    cursor: pointer;
    height: 24px;
    position: relative
}

    .video-player__seek:before {
        content: "";
        width: 100%;
        background: hsla(0,0%,100%,.35);
        border-radius: 4px;
        display: block;
        position: absolute;
        height: 4px;
        top: 10px
    }

.video-player__seek__buffer, .video-player__seek__progress {
    display: block;
    position: absolute;
    height: 4px;
    border-radius: 4px;
    top: 10px;
    background: #4ea2df
}

.video-player__seek__buffer {
    background: hsla(0,0%,100%,.2)
}

.video-player__seek__handle {
    position: absolute;
    z-index: 3;
    opacity: 0;
    border-radius: 50%;
    width: 12px;
    height: 12px;
    top: 6px;
    margin-left: -6px;
    -webkit-transition: opacity .1s ease;
    transition: opacity .1s ease;
    background: #4ea2df;
    -webkit-box-shadow: 1px 2px 6px rgba(0,0,0,.2);
    box-shadow: 1px 2px 6px rgba(0,0,0,.2);
    pointer-events: none
}

    .video-player__seek:hover .video-player__seek__handle, .video-player__seek__handle.active {
        opacity: 1
    }

.video-player.detailed .video-player__buttons button, .video-player.fullscreen .video-player__buttons button {
    padding-top: 10px;
    padding-bottom: 10px
}

.media-spoiler-video {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50%;
    cursor: pointer;
    margin-top: 8px;
    position: relative;
    border: 0;
    display: block
}

.media-spoiler-video-play-icon {
    border-radius: 100px;
    color: hsla(0,0%,100%,.8);
    font-size: 36px;
    left: 50%;
    padding: 5px;
    position: absolute;
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%)
}

.account-gallery__container {
    margin: -2px;
    padding: 4px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.account-gallery__item {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    width: calc(100% / 3 - 4px);
    height: 95px;
    margin: 2px
}

    .account-gallery__item a {
        display: block;
        width: 100%;
        height: 100%;
        background-color: #000;
        background-size: cover;
        background-position: 50%;
        position: relative;
        color: inherit;
        text-decoration: none
    }

        .account-gallery__item a:active, .account-gallery__item a:focus, .account-gallery__item a:hover {
            outline: 0
        }

.account-section-headline {
    color: #606984;
    background: #2c313d;
    border-bottom: 1px solid #313543;
    padding: 15px 10px;
    font-size: 14px;
    font-weight: 500;
    position: relative;
    cursor: default
}

    .account-section-headline:after, .account-section-headline:before {
        display: block;
        content: "";
        position: absolute;
        bottom: 0;
        left: 18px;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 10px 10px;
        border-color: transparent transparent #313543
    }

    .account-section-headline:after {
        bottom: -1px;
        border-color: transparent transparent #282c37
    }

::-webkit-scrollbar-thumb {
    border-radius: 0
}

.search-popout {
    background: #fff;
    border-radius: 4px;
    padding: 10px 14px;
    padding-bottom: 14px;
    margin-top: 10px;
    color: #9baec8;
    -webkit-box-shadow: 2px 4px 15px rgba(0,0,0,.4);
    box-shadow: 2px 4px 15px rgba(0,0,0,.4)
}

    .search-popout h4 {
        text-transform: uppercase;
        color: #9baec8;
        font-size: 13px;
        font-weight: 500;
        margin-bottom: 10px
    }

    .search-popout li {
        padding: 4px 0
    }

    .search-popout ul {
        margin-bottom: 10px
    }

    .search-popout em {
        font-weight: 500;
        color: #282c37
    }

noscript {
    text-align: center
}

    noscript img {
        width: 200px;
        opacity: .5;
        -webkit-animation: flicker 4s infinite;
        animation: flicker 4s infinite
    }

    noscript div {
        font-size: 14px;
        margin: 30px auto;
        color: #d9e1e8;
        max-width: 400px
    }

        noscript div a {
            color: #2b90d9;
            text-decoration: underline
        }

            noscript div a:hover {
                text-decoration: none
            }

@-webkit-keyframes flicker {
    0% {
        opacity: 1
    }

    30% {
        opacity: .75
    }

    to {
        opacity: 1
    }
}

@keyframes flicker {
    0% {
        opacity: 1
    }

    30% {
        opacity: .75
    }

    to {
        opacity: 1
    }
}

@media screen and (max-width:630px) and (max-height:400px) {
    .search, .tabs-bar {
        will-change: margin-top;
        -webkit-transition: margin-top .4s .1s;
        transition: margin-top .4s .1s
    }

    .navigation-bar {
        will-change: padding-bottom;
        -webkit-transition: padding-bottom .4s .1s;
        transition: padding-bottom .4s .1s
    }

        .navigation-bar > a:first-child {
            will-change: margin-top,margin-left,width;
            -webkit-transition: margin-top .4s .1s,margin-left .4s .5s;
            transition: margin-top .4s .1s,margin-left .4s .5s
        }

        .navigation-bar > .navigation-bar__profile-edit {
            will-change: margin-top;
            -webkit-transition: margin-top .4s .1s;
            transition: margin-top .4s .1s
        }

        .navigation-bar > .icon-button {
            will-change: opacity;
            -webkit-transition: opacity .4s .1s;
            transition: opacity .4s .1s
        }

    .is-composing .search, .is-composing .tabs-bar {
        margin-top: -50px
    }

    .is-composing .navigation-bar {
        padding-bottom: 0
    }

        .is-composing .navigation-bar > a:first-child {
            margin-top: -50px;
            margin-left: -40px
        }

        .is-composing .navigation-bar .navigation-bar__profile {
            padding-top: 2px
        }

        .is-composing .navigation-bar .navigation-bar__profile-edit {
            position: absolute;
            margin-top: -50px
        }

        .is-composing .navigation-bar .icon-button {
            pointer-events: auto;
            opacity: 1
        }
}

.embed-modal {
    max-width: 80vw;
    max-height: 80vh
}

    .embed-modal h4 {
        padding: 30px;
        font-weight: 500;
        font-size: 16px;
        text-align: center
    }

    .embed-modal .embed-modal__container {
        padding: 10px
    }

        .embed-modal .embed-modal__container .hint {
            margin-bottom: 15px
        }

        .embed-modal .embed-modal__container .embed-modal__html {
            color: #d9e1e8;
            outline: 0;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            display: block;
            width: 100%;
            border: none;
            padding: 10px;
            font-family: mastodon-font-monospace,monospace;
            background: #282c37;
            color: #9baec8;
            font-size: 14px;
            margin: 0;
            margin-bottom: 15px
        }

            .embed-modal .embed-modal__container .embed-modal__html::-moz-focus-inner {
                border: 0
            }

            .embed-modal .embed-modal__container .embed-modal__html::-moz-focus-inner, .embed-modal .embed-modal__container .embed-modal__html:active, .embed-modal .embed-modal__container .embed-modal__html:focus {
                outline: 0 !important
            }

            .embed-modal .embed-modal__container .embed-modal__html:focus {
                background: #313543
            }

@media screen and (max-width:600px) {
    .embed-modal .embed-modal__container .embed-modal__html {
        font-size: 16px
    }
}

.embed-modal .embed-modal__container .embed-modal__iframe {
    width: 400px;
    max-width: 100%;
    overflow: hidden;
    border: 0
}

.account__moved-note {
    padding: 14px 10px;
    padding-bottom: 16px;
    background: #313543;
    border-top: 1px solid #393f4f;
    border-bottom: 1px solid #393f4f
}

.account__moved-note__message {
    position: relative;
    margin-left: 58px;
    color: #606984;
    padding: 8px 0;
    padding-top: 0;
    padding-bottom: 4px;
    font-size: 14px
}

    .account__moved-note__message > span {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis
    }

.account__moved-note__icon-wrapper {
    left: -26px;
    position: absolute
}

.account__moved-note .detailed-status__display-avatar {
    position: relative
}

.account__moved-note .detailed-status__display-name {
    margin-bottom: 0
}

.column-inline-form {
    padding: 7px 15px;
    padding-right: 5px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: #313543
}

    .column-inline-form label {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto
    }

        .column-inline-form label input {
            width: 100%;
            margin-bottom: 6px
        }

            .column-inline-form label input:focus {
                outline: 0
            }

    .column-inline-form .icon-button {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        margin-left: 5px
    }

.drawer__backdrop {
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.5)
}

.list-editor {
    background: #282c37;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    border-radius: 8px;
    -webkit-box-shadow: 2px 4px 15px rgba(0,0,0,.4);
    box-shadow: 2px 4px 15px rgba(0,0,0,.4);
    width: 380px;
    overflow: hidden
}

@media screen and (max-width:420px) {
    .list-editor {
        width: 90%
    }
}

.list-editor h4 {
    padding: 15px 0;
    background: #444b5d;
    font-weight: 500;
    font-size: 16px;
    text-align: center;
    border-radius: 8px 8px 0 0
}

.list-editor .drawer__pager {
    height: 50vh
}

.list-editor .drawer__inner {
    border-radius: 0 0 8px 8px
}

    .list-editor .drawer__inner.backdrop {
        width: calc(100% - 60px);
        -webkit-box-shadow: 2px 4px 15px rgba(0,0,0,.4);
        box-shadow: 2px 4px 15px rgba(0,0,0,.4);
        border-radius: 0 0 0 8px
    }

.list-editor__accounts {
    overflow-y: auto
}

.list-editor .account__display-name:hover strong {
    text-decoration: none
}

.list-editor .account__avatar {
    cursor: default
}

.list-editor .search {
    margin-bottom: 0
}

.emoji-mart {
    font-size: 13px;
    display: inline-block;
    color: #282c37
}

    .emoji-mart, .emoji-mart * {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        line-height: 1.15
    }

        .emoji-mart .emoji-mart-emoji {
            padding: 6px
        }

.emoji-mart-bar {
    border: 0 solid #c0cdd9
}

    .emoji-mart-bar:first-child {
        border-bottom-width: 1px;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        background: #d9e1e8
    }

    .emoji-mart-bar:last-child {
        border-top-width: 1px;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
        display: none
    }

.emoji-mart-anchors {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 0 6px;
    color: #9baec8;
    line-height: 0
}

.emoji-mart-anchor {
    position: relative;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    text-align: center;
    padding: 12px 4px;
    overflow: hidden;
    -webkit-transition: color .1s ease-out;
    transition: color .1s ease-out;
    cursor: pointer
}

    .emoji-mart-anchor:hover {
        color: #8ea3c1
    }

.emoji-mart-anchor-selected, .emoji-mart-anchor-selected:hover {
    color: #2588d0
}

    .emoji-mart-anchor-selected .emoji-mart-anchor-bar {
        bottom: 0
    }

.emoji-mart-anchor-bar {
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #2588d0
}

.emoji-mart-anchors i {
    display: inline-block;
    width: 100%;
    max-width: 22px
}

.emoji-mart-anchors svg {
    fill: currentColor;
    max-height: 18px
}

.emoji-mart-scroll {
    overflow-y: scroll;
    height: 270px;
    max-height: 35vh;
    padding: 0 6px 6px;
    background: #fff;
    will-change: transform
}

    .emoji-mart-scroll::-webkit-scrollbar-track:active, .emoji-mart-scroll::-webkit-scrollbar-track:hover {
        background-color: rgba(0,0,0,.3)
    }

.emoji-mart-search {
    padding: 10px;
    padding-right: 45px;
    background: #fff
}

    .emoji-mart-search input {
        font-size: 14px;
        font-weight: 400;
        padding: 7px 9px;
        font-family: inherit;
        display: block;
        width: 100%;
        background: rgba(217,225,232,.3);
        color: #9baec8;
        border: 1px solid #d9e1e8;
        border-radius: 4px
    }

        .emoji-mart-search input::-moz-focus-inner {
            border: 0
        }

        .emoji-mart-search input::-moz-focus-inner, .emoji-mart-search input:active, .emoji-mart-search input:focus {
            outline: 0 !important
        }

.emoji-mart-category .emoji-mart-emoji {
    cursor: pointer
}

    .emoji-mart-category .emoji-mart-emoji span {
        z-index: 1;
        position: relative;
        text-align: center
    }

    .emoji-mart-category .emoji-mart-emoji:hover:before {
        z-index: 0;
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(217,225,232,.7);
        border-radius: 100%
    }

.emoji-mart-category-label {
    z-index: 2;
    position: relative;
    position: -webkit-sticky;
    position: sticky;
    top: 0
}

    .emoji-mart-category-label span {
        display: block;
        width: 100%;
        font-weight: 500;
        padding: 5px 6px;
        background: #fff
    }

.emoji-mart-emoji {
    position: relative;
    display: inline-block;
    font-size: 0
}

    .emoji-mart-emoji span {
        width: 22px;
        height: 22px
    }

.emoji-mart-no-results {
    font-size: 14px;
    text-align: center;
    padding-top: 70px;
    color: #9baec8
}

    .emoji-mart-no-results .emoji-mart-category-label {
        display: none
    }

    .emoji-mart-no-results .emoji-mart-no-results-label {
        margin-top: .2em
    }

    .emoji-mart-no-results .emoji-mart-emoji:hover:before {
        content: none
    }

.emoji-mart-preview {
    display: none
}

.landing-page li, .landing-page p {
    font-family: "mastodon-font-sans-serif",sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 30px;
    margin-bottom: 12px;
    color: #9baec8
}

    .landing-page li a, .landing-page p a {
        color: #2b90d9;
        text-decoration: underline
    }

.landing-page em {
    display: inline;
    margin: 0;
    padding: 0;
    font-weight: 700;
    background: transparent;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: #bcc9da
}

.landing-page h1 {
    font-family: mastodon-font-display,sans-serif;
    font-size: 26px;
    line-height: 30px;
    font-weight: 500;
    margin-bottom: 20px;
    color: #d9e1e8
}

    .landing-page h1 small {
        font-family: "mastodon-font-sans-serif",sans-serif;
        display: block;
        font-size: 18px;
        font-weight: 400;
        color: #606984
    }

.landing-page h2 {
    font-family: mastodon-font-display,sans-serif;
    font-size: 22px;
    line-height: 26px;
    font-weight: 500;
    margin-bottom: 20px;
    color: #d9e1e8
}

.landing-page h3 {
    font-size: 18px
}

.landing-page h3, .landing-page h4 {
    font-family: mastodon-font-display,sans-serif;
    line-height: 24px;
    font-weight: 500;
    margin-bottom: 20px;
    color: #d9e1e8
}

.landing-page h4 {
    font-size: 16px
}

.landing-page h5 {
    font-size: 14px
}

.landing-page h5, .landing-page h6 {
    font-family: mastodon-font-display,sans-serif;
    line-height: 24px;
    font-weight: 500;
    margin-bottom: 20px;
    color: #d9e1e8
}

.landing-page h6 {
    font-size: 12px
}

.landing-page ol, .landing-page ul {
    margin-left: 20px
}

    .landing-page ol[type=a], .landing-page ul[type=a] {
        list-style-type: lower-alpha
    }

    .landing-page ol[type=i], .landing-page ul[type=i] {
        list-style-type: lower-roman
    }

.landing-page ul {
    list-style: disc
}

.landing-page ol {
    list-style: decimal
}

.landing-page li > ol, .landing-page li > ul {
    margin-top: 6px
}

.landing-page hr {
    border-color: rgba(96,105,132,.6)
}

.landing-page .container {
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    max-width: 800px;
    margin: 0 auto;
    word-wrap: break-word
}

.landing-page .header-wrapper {
    padding-top: 15px;
    background: #282c37;
    background: linear-gradient(150deg,#393f4f,#282c37);
    position: relative
}

    .landing-page .header-wrapper.compact {
        background: #282c37;
        padding-bottom: 15px
    }

        .landing-page .header-wrapper.compact .hero .heading {
            padding-bottom: 20px;
            font-family: "mastodon-font-sans-serif",sans-serif;
            font-weight: 400;
            font-size: 16px;
            line-height: 30px;
            color: #9baec8
        }

            .landing-page .header-wrapper.compact .hero .heading a {
                color: #2b90d9;
                text-decoration: underline
            }

    .landing-page .header-wrapper .mascot-container {
        max-width: 800px;
        margin: 0 auto;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 100%
    }

    .landing-page .header-wrapper .mascot {
        position: absolute;
        bottom: -14px;
        width: auto;
        height: auto;
        left: 60px;
        z-index: 3
    }

.landing-page .header {
    line-height: 30px;
    overflow: hidden
}

    .landing-page .header .container {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between
    }

    .landing-page .header .links {
        position: relative;
        z-index: 4
    }

        .landing-page .header .links a {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            color: #9baec8;
            text-decoration: none;
            padding: 12px 16px;
            line-height: 32px;
            font-family: mastodon-font-display,sans-serif;
            font-weight: 500;
            font-size: 14px
        }

            .landing-page .header .links a:hover {
                color: #d9e1e8
            }

        .landing-page .header .links .brand a {
            padding-left: 0;
            padding-right: 0;
            color: #fff
        }

        .landing-page .header .links .brand img {
            height: 32px;
            position: relative;
            top: 4px;
            left: -10px
        }

        .landing-page .header .links ul {
            list-style: none;
            margin: 0
        }

            .landing-page .header .links ul li {
                display: inline-block;
                vertical-align: bottom;
                margin: 0
            }

                .landing-page .header .links ul li:first-child a {
                    padding-left: 0
                }

                .landing-page .header .links ul li:last-child a {
                    padding-right: 0
                }

    .landing-page .header .hero {
        margin-top: 50px;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        position: relative
    }

        .landing-page .header .hero .floats {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0
        }

            .landing-page .header .hero .floats div {
                position: absolute;
                -webkit-transition: all .1s linear;
                transition: all .1s linear;
                -webkit-animation-name: floating;
                animation-name: floating;
                -webkit-animation-iteration-count: infinite;
                animation-iteration-count: infinite;
                -webkit-animation-direction: alternate;
                animation-direction: alternate;
                -webkit-animation-timing-function: ease-in-out;
                animation-timing-function: ease-in-out;
                z-index: 2
            }

            .landing-page .header .hero .floats .float-1 {
                width: 324px;
                height: 170px;
                right: -120px;
                bottom: 0;
                -webkit-animation-duration: 3s;
                animation-duration: 3s;
                background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447.1875 234.375" height="170" width="324"><path fill="%23606984" d="M21.69 233.366c-6.45-1.268-13.347-5.63-16.704-10.564-10.705-15.734-1.513-37.724 18.632-44.57l4.8-1.632.173-17.753c.146-14.77.515-19.063 2.2-25.55 6.736-25.944 24.46-46.032 47.766-54.137 11.913-4.143 19.558-5.366 34.178-5.47l13.828-.096V71.12c0-4.755 2.853-17.457 5.238-23.327 8.588-21.137 26.735-35.957 52.153-42.593 23.248-6.07 50.153-6.415 71.863-.923 11.14 2.82 25.686 9.957 33.857 16.615 19.335 15.756 31.82 41.05 35.183 71.275.59 5.305.672 5.435 3.11 4.926 11.833-2.474 30.4-3.132 40.065-1.42 24.388 4.32 40.568 19.076 47.214 43.058 2.16 7.8 3.953 23.894 3.59 32.237l-.24 5.498 5.156 1.317c6.392 1.633 14.55 7.098 18.003 12.062 1.435 2.062 3.305 6.597 4.156 10.078 1.428 5.84 1.43 6.8.04 12.44-1.807 7.318-5.672 13.252-10.872 16.694-8.508 5.63 3.756 5.33-211.916 5.216-108.56-.056-199.22-.464-201.47-.906z"/></svg>')
            }

            .landing-page .header .hero .floats .float-2 {
                width: 241px;
                height: 100px;
                right: 210px;
                bottom: 0;
                -webkit-animation-duration: 3.5s;
                animation-duration: 3.5s;
                -webkit-animation-delay: .2s;
                animation-delay: .2s;
                background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 536.25 222.1875" height="100" width="241"><path fill="%23606984" d="M42.626 221.23c-14.104-1.174-26.442-5.133-32.825-10.534-4.194-3.548-7.684-10.66-8.868-18.075-1.934-12.102.633-22.265 7.528-29.81 7.61-8.328 19.998-12.76 39.855-14.257l8.47-.638-2.08-6.223c-4.826-14.422-6.357-24.813-6.37-43.255-.012-14.923.28-18.513 2.1-25.724 2.283-9.048 8.483-23.034 13.345-30.1 14.76-21.45 43.505-38.425 70.535-41.65 30.628-3.655 64.47 12.073 89.668 41.673l5.955 6.995 2.765-4.174c1.52-2.296 5.74-6.93 9.376-10.295 18.382-17.02 43.436-20.676 73.352-10.705 12.158 4.052 21.315 9.53 29.64 17.733 12.752 12.562 18.16 25.718 18.19 44.26l.02 10.98 2.312-3.01c15.64-20.365 42.29-20.485 62.438-.28 3.644 3.653 7.558 8.593 8.697 10.976 4.895 10.24 5.932 25.688 2.486 37.046-.76 2.507-1.388 4.816-1.393 5.13-.006.316 6.845.87 15.224 1.234 53.06 2.297 76.356 12.98 81.817 37.526 3.554 15.973-3.71 28.604-19.566 34.02-4.554 1.555-17.922 1.655-234.517 1.757-126.327.06-233.497-.21-238.154-.597z"/></svg>')
            }

            .landing-page .header .hero .floats .float-3 {
                width: 267px;
                height: 140px;
                right: 110px;
                top: -30px;
                -webkit-animation-duration: 4s;
                animation-duration: 4s;
                -webkit-animation-delay: .5s;
                animation-delay: .5s;
                background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 388.125 202.5" height="140" width="267"><path fill="%23606984" d="M181.37 201.458c-17.184-1.81-36.762-8.944-49.523-18.05l-5.774-4.12-8.074 2.63c-11.468 3.738-21.382 4.962-35.815 4.422-14.79-.554-24.577-2.845-36.716-8.594-15.483-7.332-28.498-19.98-35.985-34.968C2.44 128.675-.94 108.435.9 91.356c3.362-31.234 18.197-53.698 43.63-66.074 12.803-6.23 22.384-8.55 37.655-9.122 14.433-.54 24.347.684 35.814 4.42l8.073 2.633 5.635-4.01c24.81-17.656 60.007-23.332 92.914-14.985 10.11 2.565 25.498 9.62 33.102 15.178l5.068 3.704 7.632-2.564c10.89-3.66 21.086-4.916 35.516-4.376 45.816 1.716 76.422 30.03 81.285 75.196 1.84 17.08-1.54 37.32-8.585 51.422-7.487 14.99-20.502 27.636-35.984 34.968-12.14 5.75-21.926 8.04-36.716 8.593-14.43.54-24.626-.716-35.516-4.376l-7.632-2.564-5.068 3.704c-12.844 9.387-32.714 16.488-51.545 18.42-10.607 1.09-13.916 1.08-24.81-.066z"/></svg>')
            }

        .landing-page .header .hero .heading {
            position: relative;
            z-index: 4;
            padding-bottom: 150px
        }

        .landing-page .header .hero .closed-registrations-message, .landing-page .header .hero .simple_form {
            background: #1f232b;
            width: 280px;
            padding: 15px 20px;
            border-radius: 4px 4px 0 0;
            line-height: normal;
            position: relative;
            z-index: 4
        }

            .landing-page .header .hero .closed-registrations-message .actions, .landing-page .header .hero .closed-registrations-message .actions .block-button, .landing-page .header .hero .closed-registrations-message .actions .button, .landing-page .header .hero .closed-registrations-message .actions button, .landing-page .header .hero .simple_form .actions, .landing-page .header .hero .simple_form .actions .block-button, .landing-page .header .hero .simple_form .actions .button, .landing-page .header .hero .simple_form .actions button {
                margin-bottom: 0
            }

        .landing-page .header .hero .closed-registrations-message {
            min-height: 330px;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column;
            -webkit-box-pack: justify;
            -ms-flex-pack: justify;
            justify-content: space-between
        }

.landing-page .about-short {
    background: #1f232b;
    padding: 50px 0 30px;
    font-family: "mastodon-font-sans-serif",sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 30px;
    color: #9baec8
}

    .landing-page .about-short a {
        color: #2b90d9;
        text-decoration: underline
    }

.landing-page .information-board {
    background: #1f232b;
    padding: 20px 0
}

    .landing-page .information-board .container {
        position: relative;
        padding-right: 295px
    }

    .landing-page .information-board .information-board-sections {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap
    }

    .landing-page .information-board .section {
        -webkit-box-flex: 1;
        -ms-flex: 1 0 0px;
        flex: 1 0 0;
        font-family: "mastodon-font-sans-serif",sans-serif;
        font-size: 16px;
        line-height: 28px;
        color: #fff;
        text-align: right;
        padding: 10px 15px
    }

        .landing-page .information-board .section span, .landing-page .information-board .section strong {
            display: block
        }

            .landing-page .information-board .section span:last-child {
                color: #d9e1e8
            }

        .landing-page .information-board .section strong {
            font-weight: 500;
            font-size: 32px;
            line-height: 48px
        }

    .landing-page .information-board .panel {
        position: absolute;
        width: 280px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        background: #17191f;
        padding: 20px;
        padding-top: 10px;
        border-radius: 4px 4px 0 0;
        right: 0;
        bottom: -40px
    }

        .landing-page .information-board .panel .panel-header {
            font-family: mastodon-font-display,sans-serif;
            font-size: 14px;
            line-height: 24px;
            font-weight: 500;
            color: #9baec8;
            padding-bottom: 5px;
            margin-bottom: 15px;
            border-bottom: 1px solid #313543;
            text-overflow: ellipsis;
            overflow: hidden
        }

            .landing-page .information-board .panel .panel-header a, .landing-page .information-board .panel .panel-header span {
                font-weight: 400;
                color: #7a93b6
            }

            .landing-page .information-board .panel .panel-header a {
                text-decoration: none
            }

    .landing-page .information-board .owner {
        text-align: center
    }

        .landing-page .information-board .owner .avatar {
            width: 80px;
            height: 80px;
            margin: 0 auto;
            margin-bottom: 15px
        }

            .landing-page .information-board .owner .avatar img {
                display: block;
                width: 80px;
                height: 80px;
                border-radius: 48px
            }

        .landing-page .information-board .owner .name {
            font-size: 14px
        }

            .landing-page .information-board .owner .name a {
                display: block;
                color: #fff;
                text-decoration: none
            }

                .landing-page .information-board .owner .name a:hover .display_name {
                    text-decoration: underline
                }

            .landing-page .information-board .owner .name .username {
                display: block;
                color: #9baec8
            }

.landing-page .features {
    padding: 50px 0
}

    .landing-page .features #mastodon-timeline, .landing-page .features .container {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex
    }

    .landing-page .features #mastodon-timeline {
        -webkit-overflow-scrolling: touch;
        -ms-overflow-style: -ms-autohiding-scrollbar;
        font-family: "mastodon-font-sans-serif",sans-serif;
        font-size: 13px;
        line-height: 18px;
        font-weight: 400;
        color: #fff;
        width: 330px;
        margin-right: 30px;
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        background: #282c37;
        overflow: hidden;
        border-radius: 4px;
        -webkit-box-shadow: 0 0 6px rgba(0,0,0,.1);
        box-shadow: 0 0 6px rgba(0,0,0,.1)
    }

        .landing-page .features #mastodon-timeline .column-header {
            color: inherit;
            font-family: inherit;
            font-size: 16px;
            line-height: inherit;
            font-weight: inherit;
            margin: 0;
            padding: 15px
        }

        .landing-page .features #mastodon-timeline .column {
            padding: 0;
            border-radius: 4px;
            overflow: hidden
        }

        .landing-page .features #mastodon-timeline .scrollable {
            height: 400px
        }

        .landing-page .features #mastodon-timeline p {
            font-size: inherit;
            line-height: inherit;
            font-weight: inherit;
            color: #fff;
            margin-bottom: 20px
        }

            .landing-page .features #mastodon-timeline p:last-child {
                margin-bottom: 0
            }

            .landing-page .features #mastodon-timeline p a {
                color: #d9e1e8;
                text-decoration: none
            }

    .landing-page .features .about-mastodon {
        max-width: 675px
    }

        .landing-page .features .about-mastodon p {
            margin-bottom: 20px
        }

        .landing-page .features .about-mastodon .features-list {
            margin-top: 20px
        }

            .landing-page .features .about-mastodon .features-list .features-list__row {
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                padding: 10px 0;
                -webkit-box-pack: justify;
                -ms-flex-pack: justify;
                justify-content: space-between
            }

                .landing-page .features .about-mastodon .features-list .features-list__row:first-child {
                    padding-top: 0
                }

                .landing-page .features .about-mastodon .features-list .features-list__row .visual {
                    -webkit-box-flex: 0;
                    -ms-flex: 0 0 auto;
                    flex: 0 0 auto;
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: flex;
                    -webkit-box-align: center;
                    -ms-flex-align: center;
                    align-items: center;
                    margin-left: 15px
                }

                    .landing-page .features .about-mastodon .features-list .features-list__row .visual .fa {
                        display: block;
                        color: #9baec8;
                        font-size: 48px
                    }

                .landing-page .features .about-mastodon .features-list .features-list__row .text {
                    font-size: 16px;
                    line-height: 30px;
                    color: #9baec8
                }

                    .landing-page .features .about-mastodon .features-list .features-list__row .text h6 {
                        font-size: inherit;
                        line-height: inherit;
                        margin-bottom: 0
                    }

.landing-page .extended-description {
    padding: 50px 0;
    font-family: "mastodon-font-sans-serif",sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 30px;
    color: #9baec8
}

    .landing-page .extended-description a {
        color: #2b90d9;
        text-decoration: underline
    }

.landing-page .footer-links {
    padding-bottom: 50px;
    text-align: right;
    color: #606984
}

    .landing-page .footer-links p {
        font-size: 14px
    }

    .landing-page .footer-links a {
        color: inherit;
        text-decoration: underline
    }

@media screen and (max-width:840px) {
    .landing-page .container {
        padding: 0 20px
    }

    .landing-page .information-board .container {
        padding-right: 20px
    }

    .landing-page .information-board .section {
        text-align: center
    }

    .landing-page .information-board .panel {
        position: static;
        margin-top: 20px;
        width: 100%;
        border-radius: 4px
    }

        .landing-page .information-board .panel .panel-header {
            text-align: center
        }

    .landing-page .header-wrapper .mascot {
        left: 20px
    }
}

@media screen and (max-width:689px) {
    .landing-page .header-wrapper .mascot {
        display: none
    }
}

@media screen and (max-width:675px) {
    .landing-page .header-wrapper {
        padding-top: 0
    }

        .landing-page .header-wrapper.compact {
            padding-bottom: 0
        }

            .landing-page .header-wrapper.compact .hero .heading {
                text-align: initial
            }

    .landing-page .features .container, .landing-page .header .container {
        display: block
    }

    .landing-page .header .links {
        padding-top: 15px;
        background: #1f232b
    }

        .landing-page .header .links a {
            padding: 12px 8px
        }

        .landing-page .header .links .nav {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: horizontal;
            -webkit-box-direction: normal;
            -ms-flex-flow: row wrap;
            flex-flow: row wrap;
            -ms-flex-pack: distribute;
            justify-content: space-around
        }

        .landing-page .header .links .brand img {
            left: 0;
            top: 0
        }

    .landing-page .header .hero {
        margin-top: 30px;
        padding: 0
    }

        .landing-page .header .hero .floats {
            display: none
        }

        .landing-page .header .hero .heading {
            padding: 30px 20px;
            text-align: center
        }

        .landing-page .header .hero .closed-registrations-message, .landing-page .header .hero .simple_form {
            background: #17191f;
            width: 100%;
            border-radius: 0;
            -webkit-box-sizing: border-box;
            box-sizing: border-box
        }

    .landing-page .features #mastodon-timeline {
        height: 70vh;
        width: 100%;
        margin-bottom: 50px
    }

        .landing-page .features #mastodon-timeline .column {
            width: 100%
        }
}

.landing-page .cta {
    margin: 20px
}

.landing-page.tag-page .features {
    padding: 30px 0
}

    .landing-page.tag-page .features .container {
        max-width: 820px
    }

        .landing-page.tag-page .features .container #mastodon-timeline {
            margin-right: 0;
            border-top-right-radius: 0
        }

        .landing-page.tag-page .features .container .about-mastodon .about-hashtag {
            background: #1f232b;
            padding: 0 20px 20px 30px;
            border-radius: 0 5px 5px 0
        }

            .landing-page.tag-page .features .container .about-mastodon .about-hashtag .brand {
                padding-top: 20px;
                margin-bottom: 20px
            }

                .landing-page.tag-page .features .container .about-mastodon .about-hashtag .brand img {
                    height: 48px;
                    width: auto
                }

            .landing-page.tag-page .features .container .about-mastodon .about-hashtag p strong {
                color: #d9e1e8;
                font-weight: 700
            }

            .landing-page.tag-page .features .container .about-mastodon .about-hashtag .cta {
                margin: 0
            }

                .landing-page.tag-page .features .container .about-mastodon .about-hashtag .cta .button {
                    margin-right: 4px
                }

        .landing-page.tag-page .features .container .about-mastodon .features-list {
            margin-left: 30px;
            margin-right: 10px
        }

@media screen and (max-width:675px) {
    .landing-page.tag-page .features {
        padding: 10px 0
    }

        .landing-page.tag-page .features .container {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column
        }

            .landing-page.tag-page .features .container #mastodon-timeline {
                -webkit-box-ordinal-group: 3;
                -ms-flex-order: 2;
                order: 2;
                -webkit-box-flex: 0;
                -ms-flex: 0 0 auto;
                flex: 0 0 auto;
                height: 60vh;
                margin-bottom: 20px;
                border-top-right-radius: 4px
            }

            .landing-page.tag-page .features .container .about-mastodon {
                -webkit-box-ordinal-group: 2;
                -ms-flex-order: 1;
                order: 1;
                -webkit-box-flex: 0;
                -ms-flex: 0 0 auto;
                flex: 0 0 auto;
                max-width: 100%
            }

                .landing-page.tag-page .features .container .about-mastodon .about-hashtag {
                    background: unset;
                    padding: 0;
                    border-radius: 0
                }

                    .landing-page.tag-page .features .container .about-mastodon .about-hashtag .cta {
                        margin: 20px 0
                    }

                .landing-page.tag-page .features .container .about-mastodon .features-list {
                    display: none
                }
}

@-webkit-keyframes floating {
    0% {
        -webkit-transform: translate(0);
        transform: translate(0)
    }

    65% {
        -webkit-transform: translateY(4px);
        transform: translateY(4px)
    }

    to {
        -webkit-transform: translate(0);
        transform: translate(0)
    }
}

@keyframes floating {
    0% {
        -webkit-transform: translate(0);
        transform: translate(0)
    }

    65% {
        -webkit-transform: translateY(4px);
        transform: translateY(4px)
    }

    to {
        -webkit-transform: translate(0);
        transform: translate(0)
    }
}

.table {
    width: 100%;
    max-width: 100%;
    border-spacing: 0;
    border-collapse: collapse
}

    .table td, .table th {
        padding: 8px;
        line-height: 18px;
        vertical-align: top;
        border-top: 1px solid #282c37;
        text-align: left
    }

    .table > thead > tr > th {
        vertical-align: bottom;
        border-bottom: 2px solid #282c37;
        border-top: 0;
        font-weight: 500
    }

    .table > tbody > tr > th {
        font-weight: 500
    }

    .table > tbody > tr:nth-child(odd) > td, .table > tbody > tr:nth-child(odd) > th {
        background: #282c37
    }

    .table a {
        color: #2b90d9;
        text-decoration: underline
    }

        .table a:hover {
            text-decoration: none
        }

    .table strong {
        font-weight: 500
    }

        .table strong:lang(ja), .table strong:lang(ko), .table strong:lang(zh-CN), .table strong:lang(zh-HK), .table strong:lang(zh-TW) {
            font-weight: 700
        }

    .table.inline-table > tbody > tr:nth-child(odd) > td, .table.inline-table > tbody > tr:nth-child(odd) > th {
        background: transparent
    }

.table-wrapper {
    overflow: auto;
    margin-bottom: 20px
}

samp {
    font-family: mastodon-font-monospace,monospace
}

a.table-action-link {
    text-decoration: none;
    display: inline-block;
    margin-right: 5px;
    padding: 0 10px;
    color: hsla(0,0%,100%,.7);
    font-weight: 500
}

    a.table-action-link:hover {
        color: #fff
    }

    a.table-action-link i.fa {
        font-weight: 400;
        margin-right: 5px
    }

.admin-wrapper {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

    .admin-wrapper, .admin-wrapper .sidebar-wrapper {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        height: 100%
    }

        .admin-wrapper .sidebar-wrapper {
            -webkit-box-flex: 1;
            -ms-flex: 1;
            flex: 1;
            background: #282c37;
            -webkit-box-pack: end;
            -ms-flex-pack: end;
            justify-content: flex-end
        }

        .admin-wrapper .sidebar {
            width: 240px;
            height: 100%;
            padding: 0;
            overflow-y: auto
        }

            .admin-wrapper .sidebar .logo {
                display: block;
                margin: 40px auto;
                width: 100px;
                height: 100px
            }

            .admin-wrapper .sidebar ul {
                list-style: none;
                border-radius: 4px 0 0 4px;
                overflow: hidden;
                margin-bottom: 20px
            }

                .admin-wrapper .sidebar ul a {
                    display: block;
                    padding: 15px;
                    color: hsla(0,0%,100%,.7);
                    text-decoration: none;
                    -webkit-transition: all .2s linear;
                    transition: all .2s linear;
                    border-radius: 4px 0 0 4px
                }

                    .admin-wrapper .sidebar ul a i.fa {
                        margin-right: 5px
                    }

                    .admin-wrapper .sidebar ul a:hover {
                        color: #fff;
                        background-color: #1d2028;
                        -webkit-transition: all .1s linear;
                        transition: all .1s linear
                    }

                    .admin-wrapper .sidebar ul a.selected {
                        background: #242731;
                        border-radius: 4px 0 0
                    }

                .admin-wrapper .sidebar ul ul {
                    background: #1f232b;
                    border-radius: 0 0 0 4px;
                    margin: 0
                }

                    .admin-wrapper .sidebar ul ul a {
                        border: 0;
                        padding: 15px 35px
                    }

                        .admin-wrapper .sidebar ul ul a.selected {
                            color: #fff;
                            background-color: #2b90d9;
                            border-bottom: 0;
                            border-radius: 0
                        }

                            .admin-wrapper .sidebar ul ul a.selected:hover {
                                background-color: #419bdd
                            }

        .admin-wrapper .content-wrapper {
            -webkit-box-flex: 2;
            -ms-flex: 2;
            flex: 2;
            overflow: auto
        }

        .admin-wrapper .content {
            max-width: 700px;
            padding: 20px 15px;
            padding-top: 60px;
            padding-left: 25px
        }

            .admin-wrapper .content h2 {
                color: #d9e1e8;
                font-size: 24px;
                line-height: 28px;
                font-weight: 400;
                margin-bottom: 40px
            }

            .admin-wrapper .content h3 {
                color: #d9e1e8;
                font-size: 20px;
                line-height: 28px;
                font-weight: 400;
                margin-bottom: 30px
            }

            .admin-wrapper .content h6 {
                font-size: 16px;
                color: #d9e1e8;
                line-height: 28px;
                font-weight: 400
            }

            .admin-wrapper .content > p {
                font-size: 14px;
                line-height: 18px;
                color: #d9e1e8;
                margin-bottom: 20px
            }

                .admin-wrapper .content > p strong {
                    color: #fff;
                    font-weight: 500
                }

                    .admin-wrapper .content > p strong:lang(ja), .admin-wrapper .content > p strong:lang(ko), .admin-wrapper .content > p strong:lang(zh-CN), .admin-wrapper .content > p strong:lang(zh-HK), .admin-wrapper .content > p strong:lang(zh-TW) {
                        font-weight: 700
                    }

            .admin-wrapper .content hr {
                margin: 20px 0;
                border: 0;
                background: transparent;
                border-bottom: 1px solid #282c37
            }

            .admin-wrapper .content .muted-hint {
                color: #9baec8
            }

                .admin-wrapper .content .muted-hint a {
                    color: #2b90d9
                }

            .admin-wrapper .content .positive-hint {
                color: #79bd9a;
                font-weight: 500
            }

        .admin-wrapper .simple_form {
            max-width: 400px
        }

            .admin-wrapper .simple_form.edit_domain_block, .admin-wrapper .simple_form.edit_user, .admin-wrapper .simple_form.new_domain_block, .admin-wrapper .simple_form.new_form_admin_settings, .admin-wrapper .simple_form.new_form_delete_confirmation, .admin-wrapper .simple_form.new_form_two_factor_confirmation, .admin-wrapper .simple_form.new_import {
                max-width: none
            }

            .admin-wrapper .simple_form .actions, .admin-wrapper .simple_form .form_delete_confirmation_password, .admin-wrapper .simple_form .form_two_factor_confirmation_code {
                max-width: 400px
            }

@media screen and (max-width:600px) {
    .admin-wrapper {
        display: block;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch
    }

        .admin-wrapper .content-wrapper, .admin-wrapper .sidebar-wrapper {
            -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
            flex: 0 0 auto;
            height: auto;
            overflow: initial
        }

        .admin-wrapper .sidebar {
            width: 100%;
            padding: 10px 0;
            height: auto
        }

            .admin-wrapper .sidebar .logo {
                margin: 20px auto
            }

        .admin-wrapper .content {
            padding-top: 20px
        }
}

.filters {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

    .filters .filter-subset {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        margin: 0 40px 10px 0
    }

        .filters .filter-subset:last-child {
            margin-bottom: 20px
        }

        .filters .filter-subset ul {
            margin-top: 5px;
            list-style: none
        }

            .filters .filter-subset ul li {
                display: inline-block;
                margin-right: 5px
            }

        .filters .filter-subset strong {
            font-weight: 500;
            text-transform: uppercase;
            font-size: 12px
        }

            .filters .filter-subset strong:lang(ja), .filters .filter-subset strong:lang(ko), .filters .filter-subset strong:lang(zh-CN), .filters .filter-subset strong:lang(zh-HK), .filters .filter-subset strong:lang(zh-TW) {
                font-weight: 700
            }

        .filters .filter-subset a {
            display: inline-block;
            color: hsla(0,0%,100%,.7);
            text-decoration: none;
            text-transform: uppercase;
            font-size: 12px;
            font-weight: 500;
            border-bottom: 2px solid #282c37
        }

            .filters .filter-subset a:hover {
                color: #fff;
                border-bottom: 2px solid #333846
            }

            .filters .filter-subset a.selected {
                color: #2b90d9;
                border-bottom: 2px solid #2b90d9
            }

.report-accounts {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-bottom: 20px
}

.report-accounts, .report-accounts__item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.report-accounts__item {
    -webkit-box-flex: 250px;
    -ms-flex: 250px;
    flex: 250px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    margin: 0 5px
}

    .report-accounts__item > strong {
        display: block;
        margin: 0 0 10px -5px;
        font-weight: 500;
        font-size: 14px;
        line-height: 18px;
        color: #d9e1e8
    }

        .report-accounts__item > strong:lang(ja), .report-accounts__item > strong:lang(ko), .report-accounts__item > strong:lang(zh-CN), .report-accounts__item > strong:lang(zh-HK), .report-accounts__item > strong:lang(zh-TW) {
            font-weight: 700
        }

    .report-accounts__item .account-card {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto
    }

.account-status, .report-status {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 10px
}

    .account-status .activity-stream, .report-status .activity-stream {
        -webkit-box-flex: 2;
        -ms-flex: 2 0 0px;
        flex: 2 0 0;
        margin-right: 20px;
        max-width: calc(100% - 60px)
    }

        .account-status .activity-stream .entry, .report-status .activity-stream .entry {
            border-radius: 4px
        }

.account-status__actions, .report-status__actions {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

    .account-status__actions .icon-button, .report-status__actions .icon-button {
        font-size: 24px;
        width: 24px;
        text-align: center;
        margin-bottom: 10px
    }

.batch-form-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-bottom: 5px
}

    .batch-form-box #form_status_batch_action {
        margin: 0 5px 5px 0;
        font-size: 14px
    }

    .batch-form-box input.button {
        margin: 0 5px 5px 0
    }

    .batch-form-box .media-spoiler-toggle-buttons {
        margin-left: auto
    }

        .batch-form-box .media-spoiler-toggle-buttons .button {
            overflow: visible;
            margin: 0 0 5px 5px;
            float: right
        }

.batch-checkbox, .batch-checkbox-all {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-right: 5px
}

.back-link {
    margin-bottom: 10px;
    font-size: 14px
}

    .back-link a {
        color: #2b90d9;
        text-decoration: none
    }

        .back-link a:hover {
            text-decoration: underline
        }

.spacer {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto
}

.log-entry {
    margin-bottom: 8px;
    line-height: 20px
}

.log-entry__header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 10px;
    background: #282c37;
    color: #9baec8;
    border-radius: 4px 4px 0 0;
    font-size: 14px;
    position: relative
}

.log-entry__avatar {
    margin-right: 10px
}

    .log-entry__avatar .avatar {
        display: block;
        margin: 0;
        border-radius: 50%;
        width: 40px;
        height: 40px
    }

.log-entry__title {
    overflow: hidden;
    text-overflow: ellipsis;
}

.log-entry__timestamp {
    color: #737d99
}

.log-entry__extras {
    background: #353a49;
    border-radius: 0 0 4px 4px;
    padding: 10px;
    color: #9baec8;
    font-family: mastodon-font-monospace,monospace;
    font-size: 12px;
    min-height: 20px
}

.log-entry__icon {
    font-size: 28px;
    margin-right: 10px;
    color: #737d99
}

.log-entry__icon__overlay {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 10px;
    height: 10px;
    border-radius: 50%
}

    .log-entry__icon__overlay.positive {
        background: #79bd9a
    }

    .log-entry__icon__overlay.negative {
        background: #df405a
    }

    .log-entry__icon__overlay.neutral {
        background: #2b90d9
    }

.log-entry .target, .log-entry .username, .log-entry a {
    color: #d9e1e8;
    text-decoration: none;
    font-weight: 500
}

.log-entry .diff-old {
    color: #df405a
}

.log-entry .diff-neutral {
    color: #d9e1e8
}

.log-entry .diff-new {
    color: #79bd9a
}

.name-tag {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

    .name-tag .avatar {
        display: block;
        margin: 0;
        margin-right: 5px;
        border-radius: 50%
    }

    .name-tag .username {
        font-weight: 500
    }

body.rtl {
    direction: rtl
}

    body.rtl .column-header__icon, body.rtl .column-link__icon {
        margin-right: 0;
        margin-left: 5px
    }

    body.rtl .character-counter__wrapper {
        margin-right: 8px;
        margin-left: 16px
    }

    body.rtl .navigation-bar__profile {
        margin-left: 0;
        margin-right: 8px
    }

    body.rtl .search__input {
        padding-right: 10px;
        padding-left: 30px
    }

    body.rtl .search__icon .fa {
        right: auto;
        left: 10px
    }

    body.rtl .column-header__buttons {
        left: 0;
        right: auto
    }

    body.rtl .column-header__back-button {
        padding-left: 5px;
        padding-right: 0
    }

    body.rtl .column-header__setting-arrows {
        float: left
    }

    body.rtl .compose-form__modifiers {
        border-radius: 0 0 0 4px
    }

    body.rtl .setting-toggle {
        margin-left: 0;
        margin-right: 8px
    }

    body.rtl .setting-meta__label {
        float: left
    }

    body.rtl .status__avatar {
        left: auto;
        right: 10px
    }

    body.rtl .activity-stream .status.light, body.rtl .status {
        padding-left: 10px;
        padding-right: 68px
    }

        body.rtl .activity-stream .status.light .status__display-name, body.rtl .status__info .status__display-name {
            padding-left: 25px;
            padding-right: 0
        }

    body.rtl .activity-stream .pre-header {
        padding-right: 68px;
        padding-left: 0
    }

    body.rtl .status__prepend {
        margin-left: 0;
        margin-right: 68px
    }

    body.rtl .status__prepend-icon-wrapper {
        left: auto;
        right: -26px
    }

    body.rtl .activity-stream .pre-header .pre-header__icon {
        left: auto;
        right: 42px
    }

    body.rtl .account__avatar-overlay-overlay, body.rtl .column-back-button--slim-button {
        right: auto;
        left: 0
    }

    body.rtl .activity-stream .status.light .status__header .status__meta, body.rtl .status__relative-time {
        float: left
    }

    body.rtl .activity-stream .detailed-status.light .detailed-status__display-name > div {
        float: right;
        margin-right: 0;
        margin-left: 10px
    }

    body.rtl .activity-stream .detailed-status.light .detailed-status__meta span > span {
        margin-left: 0;
        margin-right: 6px
    }

    body.rtl .status__action-bar-button {
        float: right;
        margin-right: 0;
        margin-left: 18px
    }

    body.rtl .status__action-bar-dropdown {
        float: right
    }

    body.rtl .privacy-dropdown__dropdown {
        margin-left: 0;
        margin-right: 40px
    }

    body.rtl .privacy-dropdown__option__icon {
        margin-left: 10px;
        margin-right: 0
    }

    body.rtl .detailed-status__display-avatar {
        margin-right: 0;
        margin-left: 10px;
        float: right
    }

    body.rtl .detailed-status__favorites, body.rtl .detailed-status__reblogs {
        margin-left: 0;
        margin-right: 6px
    }

    body.rtl .fa-ul {
        margin-left: 0;
        margin-left: 2.14285714em
    }

    body.rtl .fa-li {
        left: auto;
        right: -2.14285714em
    }

    body.rtl .admin-wrapper .sidebar ul a i.fa, body.rtl a.table-action-link i.fa {
        margin-right: 0;
        margin-left: 5px
    }

    body.rtl .simple_form .check_boxes .checkbox label, body.rtl .simple_form .input.with_label.boolean label.checkbox {
        padding-left: 0;
        padding-right: 25px
    }

    body.rtl .simple_form .check_boxes .checkbox input[type=checkbox], body.rtl .simple_form .input.boolean input[type=checkbox] {
        left: auto;
        right: 0
    }

    body.rtl .simple_form .input-with-append .input input {
        padding-left: 127px;
        padding-right: 0
    }

    body.rtl .simple_form .input-with-append .append {
        right: auto;
        left: 0
    }

    body.rtl .table td, body.rtl .table th {
        text-align: right
    }

    body.rtl .filters .filter-subset {
        margin-right: 0;
        margin-left: 45px
    }

    body.rtl .landing-page .header-wrapper .mascot {
        right: 60px;
        left: auto
    }

    body.rtl .landing-page .header .hero .floats .float-1 {
        left: -120px;
        right: auto
    }

    body.rtl .landing-page .header .hero .floats .float-2 {
        left: 210px;
        right: auto
    }

    body.rtl .landing-page .header .hero .floats .float-3 {
        left: 110px;
        right: auto
    }

    body.rtl .landing-page .header .links .brand img {
        left: 0
    }

    body.rtl .landing-page .fa-external-link {
        padding-right: 5px;
        padding-left: 0 !important
    }

    body.rtl .landing-page .features #mastodon-timeline {
        margin-right: 0;
        margin-left: 30px
    }

@media screen and (min-width:631px) {
    body.rtl .column, body.rtl .drawer {
        padding-left: 5px;
        padding-right: 5px
    }

        body.rtl .column:first-child, body.rtl .drawer:first-child {
            padding-left: 5px;
            padding-right: 10px
        }

    body.rtl .columns-area > div .column, body.rtl .columns-area > div .drawer {
        padding-left: 5px;
        padding-right: 5px
    }
}