CSS2.css

@charset "UTF-8";
@font-face {
    font-family: "mastodon-font-sans-serif";
    src: local("Roboto Italic"), url(/packs/media/fonts/roboto/roboto-italic-webfont-50efdad8c62f5f279e3f4f1f63a4f9bc.woff2) format("woff2"), url(/packs/media/fonts/roboto/roboto-italic-webfont-927fdbf83b347742d39f0b00f3cfa99a.woff) format("woff"), url(/packs/media/fonts/roboto/roboto-italic-webfont-4c71bd4a88468ea62f92e55cb4e33aef.ttf) format("truetype"), url(/packs/media/fonts/roboto/roboto-italic-webfont-d88a9e8476fabedea3b87fd0ba2df3b3.svg#roboto-italic-webfont) format("svg");
    font-weight: 400;
    font-style: italic
}

@font-face {
    font-family: "mastodon-font-sans-serif";
    src: local("Roboto Bold"), url(/packs/media/fonts/roboto/roboto-bold-webfont-f633cb5c651ba4d50791e1adf55d3c18.woff2) format("woff2"), url(/packs/media/fonts/roboto/roboto-bold-webfont-df0f5fd966b99c0f503ae50c064fbba8.woff) format("woff"), url(/packs/media/fonts/roboto/roboto-bold-webfont-5bacc29257521cc73732f2597cc19c4b.ttf) format("truetype"), url(/packs/media/fonts/roboto/roboto-bold-webfont-4cbd1966fc397282fa35d69070782b80.svg#roboto-bold-webfont) format("svg");
    font-weight: 700;
    font-style: normal
}

@font-face {
    font-family: "mastodon-font-sans-serif";
    src: local("Roboto Medium"), url(/packs/media/fonts/roboto/roboto-medium-webfont-69c55fc2fe77d38934ea98dc31642ce6.woff2) format("woff2"), url(/packs/media/fonts/roboto/roboto-medium-webfont-6484794cd05bbf97f3f0c730cec21665.woff) format("woff"), url(/packs/media/fonts/roboto/roboto-medium-webfont-7f0e4c7727a4bc5f37d95d804c6e0348.ttf) format("truetype"), url(/packs/media/fonts/roboto/roboto-medium-webfont-f407ec033f15172c3c4acf75608dd11d.svg#roboto-medium-webfont) format("svg");
    font-weight: 500;
    font-style: normal
}

@font-face {
    font-family: "mastodon-font-sans-serif";
    src: local("Roboto"), url(/packs/media/fonts/roboto/roboto-regular-webfont-3ec24f953ed5e859a6402cb3c030ea8b.woff2) format("woff2"), url(/packs/media/fonts/roboto/roboto-regular-webfont-b06ad091cf548c38401f3e5883cb36a2.woff) format("woff"), url(/packs/media/fonts/roboto/roboto-regular-webfont-42a434b9f3c8c7a57b83488483b2d08e.ttf) format("truetype"), url(/packs/media/fonts/roboto/roboto-regular-webfont-77dc6a0145954a963b95d30773543105.svg#roboto-regular-webfont) format("svg");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: "mastodon-font-monospace";
    src: local("Roboto Mono"), url(/packs/media/fonts/roboto-mono/robotomono-regular-webfont-6c1ce30b90ee993b22618ec489585594.woff2) format("woff2"), url(/packs/media/fonts/roboto-mono/robotomono-regular-webfont-09e0ef66c9dee2fa2689f6e5f2437670.woff) format("woff"), url(/packs/media/fonts/roboto-mono/robotomono-regular-webfont-0ba95b3b2370e6bf1dcdb20aa3a54ff2.ttf) format("truetype"), url(/packs/media/fonts/roboto-mono/robotomono-regular-webfont-51e9ccf8c829f4894a7e5a0883e864fc.svg#roboto_monoregular) format("svg");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: mastodon-font-display;
    src: local("Montserrat"), url(/packs/media/fonts/montserrat/Montserrat-Regular-080422d4c1328f3407818d25c86cce51.woff2) format("woff2"), url(/packs/media/fonts/montserrat/Montserrat-Regular-b0322f2faed575161a052b5af953251a.woff) format("woff"), url(/packs/media/fonts/montserrat/Montserrat-Regular-6a18f75e59e23e7f23b8a4ef70d748cd.ttf) format("truetype");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: mastodon-font-display;
    src: local("Montserrat Medium"), url(/packs/media/fonts/montserrat/Montserrat-Medium-5f797490f806b3b229299f0a66de89c9.ttf) format("truetype");
    font-weight: 500;
    font-style: normal
}

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
}

html {
    scrollbar-color: #313543 rgba(0, 0, 0, .1)
}

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

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

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

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

::-webkit-scrollbar-track {
    border: 0 #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: #191b22;
    font-size: 13px;
    line-height: 18px;
    font-weight: 400;
    color: #fff;
    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: rgba(0, 0, 0, 0);
    -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 {
    padding: 0
}

body.app-body.layout-single-column {
    height: auto;
    min-height: 100vh;
    overflow-y: scroll
}

body.app-body.layout-multiple-columns {
    position: absolute;
    width: 100%;
    height: 100%
}

body.app-body.with-modals--active {
    overflow-y: hidden
}

body.lighter {
    background: #282c37
}

body.with-modals {
    overflow-x: hidden;
    overflow-y: scroll
}

body.with-modals--active {
    overflow-y: hidden
}

body.player {
    text-align: center
}

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

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

body.admin {
    background: #1f232b;
    padding: 0
}

body.error {
    position: absolute;
    text-align: center;
    color: #9baec8;
    background: #282c37;
    width: 100%;
    height: 100%;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center
}

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

body.error .dialog__illustration 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, .app-holder>noscript {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    outline: 0!important
}

.app-holder>noscript {
    height: 100vh
}

.layout-single-column .app-holder, .layout-single-column .app-holder>div {
    min-height: 100vh
}

.layout-multiple-columns .app-holder, .layout-multiple-columns .app-holder>div {
    height: 100%
}

.app-holder noscript, .error-boundary {
    flex-direction: column;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.7;
    color: #e25169;
    text-align: center
}

.app-holder noscript>div, .error-boundary>div {
    max-width: 500px
}

.app-holder noscript p, .error-boundary p {
    margin-bottom: .85em
}

.app-holder noscript p:last-child, .error-boundary p:last-child {
    margin-bottom: 0
}

.app-holder noscript a, .error-boundary a {
    color: #2b90d9
}

.app-holder noscript a:active, .app-holder noscript a:focus, .app-holder noscript a:hover, .error-boundary a:active, .error-boundary a:focus, .error-boundary a:hover {
    text-decoration: none
}

.app-holder noscript__footer, .error-boundary__footer {
    color: #606984;
    font-size: 13px
}

.app-holder noscript__footer a, .error-boundary__footer a {
    color: #606984
}

.app-holder noscript button, .error-boundary button {
    display: inline;
    border: 0;
    background: transparent;
    color: #606984;
    font: inherit;
    padding: 0;
    margin: 0;
    line-height: inherit;
    cursor: pointer;
    outline: 0;
    transition: color .3s linear;
    text-decoration: underline
}

.app-holder noscript button:active, .app-holder noscript button:focus, .app-holder noscript button:hover, .error-boundary button:active, .error-boundary button:focus, .error-boundary button:hover {
    text-decoration: none
}

.app-holder noscript button.copied, .error-boundary button.copied {
    color: #79bd9a;
    transition: none
}

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

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

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

@media screen and (max-width:500px) {
    .logo-container {
        margin: 40px auto 0
    }
}

.logo-container h1 {
    display: flex;
    justify-content: center;
    align-items: center
}

.logo-container h1 svg {
    fill: #fff;
    height: 42px;
    margin-right: 10px
}

.logo-container h1 a {
    display: flex;
    justify-content: 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;
    padding: 20px 0;
    margin: 40px auto 0;
    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;
    display: flex;
    font-size: 13px;
    line-height: 18px;
    box-sizing: border-box;
    padding: 20px 0 0;
    margin: 40px auto -30px
}

@media screen and (max-width:440px) {
    .account-header {
        width: 100%;
        margin: 0 0 10px;
        padding: 20px 20px 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 {
    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
}

.grid-3 {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 3fr 1fr;
    grid-auto-columns: 25%;
    grid-auto-rows: -webkit-max-content;
    grid-auto-rows: max-content
}

.grid-3 .column-0 {
    grid-column: 1/3;
    grid-row: 1
}

.grid-3 .column-1 {
    grid-column: 1;
    grid-row: 2
}

.grid-3 .column-2 {
    grid-column: 2;
    grid-row: 2
}

.grid-3 .column-3 {
    grid-column: 1/3;
    grid-row: 3
}

@media screen and (max-width:415px) {
    .grid-3 {
        grid-gap: 0;
        grid-template-columns: minmax(0, 100%)
    }
    .grid-3 .column-0 {
        grid-column: 1
    }
    .grid-3 .column-1 {
        grid-column: 1;
        grid-row: 3
    }
    .grid-3 .column-2 {
        grid-column: 1;
        grid-row: 2
    }
    .grid-3 .column-3 {
        grid-column: 1;
        grid-row: 4
    }
}

.grid-4 {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-columns: 25%;
    grid-auto-rows: -webkit-max-content;
    grid-auto-rows: max-content
}

.grid-4 .column-0 {
    grid-column: 1/5;
    grid-row: 1
}

.grid-4 .column-1 {
    grid-column: 1/4;
    grid-row: 2
}

.grid-4 .column-2 {
    grid-column: 4;
    grid-row: 2
}

.grid-4 .column-3 {
    grid-column: 2/5;
    grid-row: 3
}

.grid-4 .column-4 {
    grid-column: 1;
    grid-row: 3
}

.grid-4 .landing-page__call-to-action {
    min-height: 100%
}

.grid-4 .flash-message {
    margin-bottom: 10px
}

@media screen and (max-width:738px) {
    .grid-4 {
        grid-template-columns: minmax(0, 50%) minmax(0, 50%)
    }
    .grid-4 .landing-page__call-to-action {
        padding: 20px;
        display: flex;
        align-items: center;
        justify-content: center
    }
    .grid-4 .row__information-board {
        width: 100%;
        justify-content: center;
        align-items: center
    }
    .grid-4 .row__mascot {
        display: none
    }
}

@media screen and (max-width:415px) {
    .grid-4 {
        grid-gap: 0;
        grid-template-columns: minmax(0, 100%)
    }
    .grid-4 .column-0 {
        grid-column: 1
    }
    .grid-4 .column-1 {
        grid-column: 1;
        grid-row: 3
    }
    .grid-4 .column-2 {
        grid-column: 1;
        grid-row: 2
    }
    .grid-4 .column-3 {
        grid-column: 1;
        grid-row: 5
    }
    .grid-4 .column-4 {
        grid-column: 1;
        grid-row: 4
    }
}

@media screen and (max-width:415px) {
    .public-layout {
        padding-top: 48px
    }
}

.public-layout .container {
    max-width: 960px
}

@media screen and (max-width:415px) {
    .public-layout .container {
        padding: 0
    }
}

.public-layout .header {
    background: #393f4f;
    box-shadow: 0 0 15px rgba(0, 0, 0, .2);
    border-radius: 4px;
    height: 48px;
    margin: 10px 0;
    display: flex;
    align-items: stretch;
    justify-content: center;
    flex-wrap: nowrap;
    overflow: hidden
}

@media screen and (max-width:415px) {
    .public-layout .header {
        position: fixed;
        width: 100%;
        top: 0;
        left: 0;
        margin: 0;
        border-radius: 0;
        box-shadow: none;
        z-index: 110
    }
}

.public-layout .header>div {
    flex: 1 1 33.3%;
    min-height: 1px
}

.public-layout .header .nav-left {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    flex-wrap: nowrap
}

.public-layout .header .nav-center {
    display: flex;
    align-items: stretch;
    justify-content: center;
    flex-wrap: nowrap
}

.public-layout .header .nav-right {
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    flex-wrap: nowrap
}

.public-layout .header .brand {
    display: block;
    padding: 15px
}

.public-layout .header .brand svg {
    display: block;
    height: 18px;
    width: auto;
    position: relative;
    bottom: -2px;
    fill: #fff
}

@media screen and (max-width:415px) {
    .public-layout .header .brand svg {
        height: 20px
    }
}

.public-layout .header .brand:active, .public-layout .header .brand:focus, .public-layout .header .brand:hover {
    background: #42485a
}

.public-layout .header .nav-link {
    display: flex;
    align-items: center;
    padding: 0 1rem;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    color: #9baec8;
    white-space: nowrap;
    text-align: center
}

.public-layout .header .nav-link:active, .public-layout .header .nav-link:focus, .public-layout .header .nav-link:hover {
    text-decoration: underline;
    color: #fff
}

@media screen and (max-width:550px) {
    .public-layout .header .nav-link.optional {
        display: none
    }
}

.public-layout .header .nav-button {
    background: #4a5266;
    margin: 8px 8px 8px 0;
    border-radius: 4px
}

.public-layout .header .nav-button:active, .public-layout .header .nav-button:focus, .public-layout .header .nav-button:hover {
    text-decoration: none;
    background: #535b72
}

.public-layout .grid {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: minmax(300px, 3fr) minmax(298px, 1fr);
    grid-auto-columns: 25%;
    grid-auto-rows: -webkit-max-content;
    grid-auto-rows: max-content
}

.public-layout .grid .column-0 {
    grid-row: 1;
    grid-column: 1
}

.public-layout .grid .column-1 {
    grid-row: 1;
    grid-column: 2
}

@media screen and (max-width:600px) {
    .public-layout .grid {
        grid-template-columns: 100%;
        grid-gap: 0
    }
    .public-layout .grid .column-1 {
        display: none
    }
}

.public-layout .directory__card {
    border-radius: 4px
}

@media screen and (max-width:415px) {
    .public-layout .directory__card {
        border-radius: 0
    }
}

@media screen and (max-width:415px) {
    .public-layout .page-header {
        border-bottom: 0
    }
}

.public-layout .public-account-header {
    overflow: hidden;
    margin-bottom: 10px;
    box-shadow: 0 0 15px rgba(0, 0, 0, .2)
}

.public-layout .public-account-header.inactive {
    opacity: .5
}

.public-layout .public-account-header.inactive .avatar, .public-layout .public-account-header.inactive .public-account-header__image {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%)
}

.public-layout .public-account-header.inactive .logo-button {
    background-color: #d9e1e8
}

.public-layout .public-account-header__image {
    border-radius: 4px 4px 0 0;
    overflow: hidden;
    height: 300px;
    position: relative;
    background: #0e1014
}

.public-layout .public-account-header__image:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    box-shadow: inset 0 -1px 1px 1px rgba(0, 0, 0, .15);
    top: 0;
    left: 0
}

.public-layout .public-account-header__image img {
    -o-object-fit: cover;
    font-family: "object-fit:cover";
    object-fit: cover;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: 4px 4px 0 0
}

@media screen and (max-width:600px) {
    .public-layout .public-account-header__image {
        height: 200px
    }
}

.public-layout .public-account-header--no-bar {
    margin-bottom: 0
}

.public-layout .public-account-header--no-bar .public-account-header__image, .public-layout .public-account-header--no-bar .public-account-header__image img {
    border-radius: 4px
}

@media screen and (max-width:415px) {
    .public-layout .public-account-header--no-bar .public-account-header__image, .public-layout .public-account-header--no-bar .public-account-header__image img {
        border-radius: 0
    }
}

@media screen and (max-width:415px) {
    .public-layout .public-account-header {
        margin-bottom: 0;
        box-shadow: none
    }
    .public-layout .public-account-header__image:after {
        display: none
    }
    .public-layout .public-account-header__image, .public-layout .public-account-header__image img {
        border-radius: 0
    }
}

.public-layout .public-account-header__bar {
    position: relative;
    margin-top: -80px;
    display: flex;
    justify-content: flex-start
}

.public-layout .public-account-header__bar:before {
    content: "";
    display: block;
    background: #313543;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    border-radius: 0 0 4px 4px;
    z-index: -1
}

.public-layout .public-account-header__bar .avatar {
    display: block;
    width: 120px;
    height: 120px;
    padding-left: 16px;
    flex: 0 0 auto
}

.public-layout .public-account-header__bar .avatar img {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: 50%;
    border: 4px solid #313543;
    background: #17191f
}

@media screen and (max-width:600px) {
    .public-layout .public-account-header__bar {
        margin-top: 0;
        background: #313543;
        border-radius: 0 0 4px 4px;
        padding: 5px
    }
    .public-layout .public-account-header__bar:before {
        display: none
    }
    .public-layout .public-account-header__bar .avatar {
        width: 48px;
        height: 48px;
        padding: 7px 0 7px 10px
    }
    .public-layout .public-account-header__bar .avatar img {
        border: 0;
        border-radius: 4px
    }
}

@media screen and (max-width:600px) and (max-width:360px) {
    .public-layout .public-account-header__bar .avatar {
        display: none
    }
}

@media screen and (max-width:415px) {
    .public-layout .public-account-header__bar {
        border-radius: 0
    }
}

@media screen and (max-width:600px) {
    .public-layout .public-account-header__bar {
        flex-wrap: wrap
    }
}

.public-layout .public-account-header__tabs {
    flex: 1 1 auto;
    margin-left: 20px
}

.public-layout .public-account-header__tabs__name {
    padding-top: 20px;
    padding-bottom: 8px
}

.public-layout .public-account-header__tabs__name h1 {
    font-size: 20px;
    line-height: 27px;
    color: #fff;
    font-weight: 500;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-shadow: 1px 1px 1px #000
}

.public-layout .public-account-header__tabs__name h1 small {
    display: block;
    font-size: 14px;
    color: #fff;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis
}

@media screen and (max-width:600px) {
    .public-layout .public-account-header__tabs {
        margin-left: 15px;
        display: flex;
        justify-content: space-between;
        align-items: center
    }
    .public-layout .public-account-header__tabs__name {
        padding-top: 0;
        padding-bottom: 0
    }
    .public-layout .public-account-header__tabs__name h1 {
        font-size: 16px;
        line-height: 24px;
        text-shadow: none
    }
    .public-layout .public-account-header__tabs__name h1 small {
        color: #9baec8
    }
}

.public-layout .public-account-header__tabs__tabs {
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    height: 58px
}

.public-layout .public-account-header__tabs__tabs .details-counters {
    display: flex;
    flex-direction: row;
    min-width: 300px
}

@media screen and (max-width:600px) {
    .public-layout .public-account-header__tabs__tabs .details-counters {
        display: none
    }
}

.public-layout .public-account-header__tabs__tabs .counter {
    width: 33.3%;
    box-sizing: border-box;
    flex: 0 0 auto;
    color: #9baec8;
    padding: 10px;
    border-right: 1px solid #313543;
    cursor: default;
    text-align: center;
    position: relative
}

.public-layout .public-account-header__tabs__tabs .counter a {
    display: block
}

.public-layout .public-account-header__tabs__tabs .counter:last-child {
    border-right: 0
}

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

.public-layout .public-account-header__tabs__tabs .counter.active:after {
    border-bottom: 4px solid #2b90d9;
    opacity: 1
}

.public-layout .public-account-header__tabs__tabs .counter.active.inactive:after {
    border-bottom-color: #d9e1e8
}

.public-layout .public-account-header__tabs__tabs .counter:hover:after {
    opacity: 1;
    transition-duration: .1s
}

.public-layout .public-account-header__tabs__tabs .counter a {
    text-decoration: none;
    color: inherit
}

.public-layout .public-account-header__tabs__tabs .counter .counter-label {
    font-size: 12px;
    display: block
}

.public-layout .public-account-header__tabs__tabs .counter .counter-number {
    font-weight: 500;
    font-size: 18px;
    margin-bottom: 5px;
    color: #fff;
    font-family: mastodon-font-display, sans-serif
}

.public-layout .public-account-header__tabs__tabs .spacer {
    flex: 1 1 auto;
    height: 1px
}

.public-layout .public-account-header__tabs__tabs__buttons {
    padding: 7px 8px
}

.public-layout .public-account-header__extra {
    display: none;
    margin-top: 4px
}

.public-layout .public-account-header__extra .public-account-bio {
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    margin: 0 -5px
}

.public-layout .public-account-header__extra .public-account-bio .account__header__fields {
    border-top: 1px solid #42485a
}

.public-layout .public-account-header__extra .public-account-bio .roles {
    display: none
}

.public-layout .public-account-header__extra__links {
    margin-top: -15px;
    font-size: 14px;
    color: #9baec8
}

.public-layout .public-account-header__extra__links a {
    display: inline-block;
    color: #9baec8;
    text-decoration: none;
    padding: 15px;
    font-weight: 500
}

.public-layout .public-account-header__extra__links a strong {
    font-weight: 700;
    color: #fff
}

@media screen and (max-width:600px) {
    .public-layout .public-account-header__extra {
        display: block;
        flex: 100%
    }
}

.public-layout .account__section-headline {
    border-radius: 4px 4px 0 0
}

@media screen and (max-width:415px) {
    .public-layout .account__section-headline {
        border-radius: 0
    }
}

.public-layout .detailed-status__meta {
    margin-top: 25px
}

.public-layout .public-account-bio {
    background: #393f4f;
    box-shadow: 0 0 15px rgba(0, 0, 0, .2);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 10px
}

@media screen and (max-width:415px) {
    .public-layout .public-account-bio {
        box-shadow: none;
        margin-bottom: 0;
        border-radius: 0
    }
}

.public-layout .public-account-bio .account__header__fields {
    margin: 0;
    border-top: 0
}

.public-layout .public-account-bio .account__header__fields a {
    color: #4ea2df
}

.public-layout .public-account-bio .account__header__fields dl:first-child .verified {
    border-radius: 0 4px 0 0
}

.public-layout .public-account-bio .account__header__fields .verified a {
    color: #79bd9a
}

.public-layout .public-account-bio .account__header__content {
    padding: 20px 20px 0;
    color: #fff
}

.public-layout .public-account-bio .roles, .public-layout .public-account-bio__extra {
    padding: 20px;
    font-size: 14px;
    color: #9baec8
}

.public-layout .public-account-bio .roles {
    padding-bottom: 0
}

.public-layout .directory__list {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: minmax(0, 50%) minmax(0, 50%)
}

@media screen and (max-width:415px) {
    .public-layout .directory__list {
        display: block
    }
}

.public-layout .directory__list .icon-button {
    font-size: 18px
}

.public-layout .directory__card {
    margin-bottom: 0
}

.public-layout .card-grid {
    display: flex;
    flex-wrap: wrap;
    min-width: 100%;
    margin: 0 -5px
}

.public-layout .card-grid>div {
    box-sizing: border-box;
    flex: 1 0 auto;
    width: 300px;
    padding: 0 5px;
    margin-bottom: 10px;
    max-width: 33.333%
}

@media screen and (max-width:900px) {
    .public-layout .card-grid>div {
        max-width: 50%
    }
}

@media screen and (max-width:600px) {
    .public-layout .card-grid>div {
        max-width: 100%
    }
}

@media screen and (max-width:415px) {
    .public-layout .card-grid {
        margin: 0;
        border-top: 1px solid #393f4f
    }
    .public-layout .card-grid>div {
        width: 100%;
        padding: 0;
        margin-bottom: 0;
        border-bottom: 1px solid #393f4f
    }
    .public-layout .card-grid>div:last-child {
        border-bottom: 0
    }
    .public-layout .card-grid>div .card__bar {
        background: #282c37
    }
    .public-layout .card-grid>div .card__bar:active, .public-layout .card-grid>div .card__bar:focus, .public-layout .card-grid>div .card__bar:hover {
        background: #313543
    }
}

.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
}

.public-layout .footer {
    text-align: left;
    padding-top: 20px;
    padding-bottom: 60px;
    font-size: 12px;
    color: #737d99
}

@media screen and (max-width:415px) {
    .public-layout .footer {
        padding-left: 20px;
        padding-right: 20px
    }
}

.public-layout .footer .grid {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 1fr 1fr 2fr 1fr 1fr
}

.public-layout .footer .grid .column-0 {
    grid-column: 1;
    grid-row: 1;
    min-width: 0
}

.public-layout .footer .grid .column-1 {
    grid-column: 2;
    grid-row: 1;
    min-width: 0
}

.public-layout .footer .grid .column-2 {
    grid-column: 3;
    grid-row: 1;
    min-width: 0;
    text-align: center
}

.public-layout .footer .grid .column-2 h4 a {
    color: #737d99
}

.public-layout .footer .grid .column-3 {
    grid-column: 4;
    grid-row: 1;
    min-width: 0
}

.public-layout .footer .grid .column-4 {
    grid-column: 5;
    grid-row: 1;
    min-width: 0
}

@media screen and (max-width:690px) {
    .public-layout .footer .grid {
        grid-template-columns: 1fr 2fr 1fr
    }
    .public-layout .footer .grid .column-0, .public-layout .footer .grid .column-1 {
        grid-column: 1
    }
    .public-layout .footer .grid .column-1 {
        grid-row: 2
    }
    .public-layout .footer .grid .column-2 {
        grid-column: 2
    }
    .public-layout .footer .grid .column-3, .public-layout .footer .grid .column-4 {
        grid-column: 3
    }
    .public-layout .footer .grid .column-4 {
        grid-row: 2
    }
}

@media screen and (max-width:600px) {
    .public-layout .footer .grid .column-1 {
        display: block
    }
}

@media screen and (max-width:415px) {
    .public-layout .footer .grid .column-0, .public-layout .footer .grid .column-1, .public-layout .footer .grid .column-3, .public-layout .footer .grid .column-4 {
        display: none
    }
}

.public-layout .footer h4 {
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 8px;
    color: #9baec8
}

.public-layout .footer h4 a {
    color: inherit;
    text-decoration: none
}

.public-layout .footer ul a {
    text-decoration: none;
    color: #737d99
}

.public-layout .footer ul a:active, .public-layout .footer ul a:focus, .public-layout .footer ul a:hover {
    text-decoration: underline
}

.public-layout .footer .brand svg {
    display: block;
    height: 36px;
    width: auto;
    margin: 0 auto;
    fill: #737d99
}

.public-layout .footer .brand:active svg, .public-layout .footer .brand:focus svg, .public-layout .footer .brand:hover svg {
    fill: #7f88a2
}

.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
}

.hero-widget {
    margin-bottom: 10px;
    box-shadow: 0 0 15px rgba(0, 0, 0, .2)
}

.hero-widget__img {
    width: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 4px 4px 0 0;
    background: #000
}

.hero-widget__img img {
    -o-object-fit: cover;
    font-family: "object-fit:cover";
    object-fit: cover;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: 4px 4px 0 0
}

.hero-widget__text {
    background: #282c37;
    padding: 20px;
    border-radius: 0 0 4px 4px;
    font-size: 15px;
    color: #9baec8;
    line-height: 20px;
    word-wrap: break-word;
    font-weight: 400
}

.hero-widget__text .emojione {
    width: 20px;
    height: 20px;
    margin: -3px 0 0
}

.hero-widget__text p {
    margin-bottom: 20px
}

.hero-widget__text p:last-child {
    margin-bottom: 0
}

.hero-widget__text em {
    display: inline;
    margin: 0;
    padding: 0;
    font-weight: 700;
    background: transparent;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: #bcc9da
}

.hero-widget__text a {
    color: #d9e1e8;
    text-decoration: none
}

.hero-widget__text a:hover {
    text-decoration: underline
}

@media screen and (max-width:415px) {
    .hero-widget {
        display: none
    }
}

.endorsements-widget {
    margin-bottom: 10px;
    padding-bottom: 10px
}

.endorsements-widget h4 {
    padding: 10px;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 13px;
    color: #9baec8
}

.endorsements-widget .account {
    padding: 10px 0
}

.endorsements-widget .account:last-child {
    border-bottom: 0
}

.endorsements-widget .account .account__display-name {
    display: flex;
    align-items: center
}

.endorsements-widget .account .account__avatar {
    width: 44px;
    height: 44px;
    background-size: 44px 44px
}

.endorsements-widget .trends__item {
    padding: 10px
}

.trends-widget h4 {
    color: #9baec8
}

.box-widget {
    padding: 20px;
    border-radius: 4px;
    background: #282c37;
    box-shadow: 0 0 15px rgba(0, 0, 0, .2)
}

.placeholder-widget {
    padding: 16px;
    border-radius: 4px;
    border: 2px dashed #606984;
    text-align: center;
    color: #9baec8;
    margin-bottom: 10px
}

.contact-widget {
    min-height: 100%;
    font-size: 15px;
    color: #9baec8;
    line-height: 20px;
    word-wrap: break-word;
    font-weight: 400;
    padding: 0
}

.contact-widget h4 {
    padding: 10px;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 13px;
    color: #9baec8
}

.contact-widget .account {
    border-bottom: 0;
    padding: 5px 0 10px
}

.contact-widget>a {
    display: inline-block;
    padding: 0 10px 10px;
    color: #9baec8;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.contact-widget>a:active, .contact-widget>a:focus, .contact-widget>a:hover {
    text-decoration: underline
}

.moved-account-widget {
    padding: 15px 15px 20px;
    border-radius: 4px;
    background: #282c37;
    box-shadow: 0 0 15px rgba(0, 0, 0, .2);
    color: #d9e1e8;
    font-weight: 400;
    margin-bottom: 10px
}

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

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

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

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

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

.moved-account-widget__message {
    margin-bottom: 15px
}

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

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

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

.moved-account-widget__card .detailed-status__display-name span {
    font-weight: 400
}

.memoriam-widget {
    padding: 20px;
    background: #000;
    font-size: 14px;
    color: #9baec8;
    margin-bottom: 10px
}

.memoriam-widget, .page-header {
    border-radius: 4px;
    box-shadow: 0 0 15px rgba(0, 0, 0, .2)
}

.page-header {
    background: #393f4f;
    padding: 60px 15px;
    text-align: center;
    margin: 10px 0
}

.page-header h1 {
    color: #fff;
    font-size: 36px;
    line-height: 1.1;
    font-weight: 700;
    margin-bottom: 10px
}

.page-header p {
    font-size: 15px;
    color: #9baec8
}

@media screen and (max-width:415px) {
    .page-header {
        margin-top: 0;
        background: #313543
    }
    .page-header h1 {
        font-size: 24px
    }
}

.directory {
    background: #282c37;
    border-radius: 4px;
    box-shadow: 0 0 15px rgba(0, 0, 0, .2)
}

.directory__tag {
    box-sizing: border-box;
    margin-bottom: 10px
}

.directory__tag>a, .directory__tag>div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #282c37;
    border-radius: 4px;
    padding: 15px;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 0 15px rgba(0, 0, 0, .2)
}

.directory__tag>a:active, .directory__tag>a:focus, .directory__tag>a:hover {
    background: #393f4f
}

.directory__tag.active>a {
    background: #2b90d9;
    cursor: default
}

.directory__tag.disabled>div {
    opacity: .5;
    cursor: default
}

.directory__tag h4 {
    flex: 1 1 auto;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.directory__tag h4 .fa {
    color: #9baec8
}

.directory__tag h4 small {
    display: block;
    font-weight: 400;
    font-size: 15px;
    margin-top: 8px;
    color: #9baec8
}

.directory__tag.active h4, .directory__tag.active h4 .fa, .directory__tag.active h4 .trends__item__current, .directory__tag.active h4 small {
    color: #fff
}

.directory__tag .avatar-stack {
    flex: 0 0 auto;
    width: 120px
}

.directory__tag.active .avatar-stack .account__avatar {
    border-color: #2b90d9
}

.directory__tag .trends__item__current {
    padding-right: 0
}

.avatar-stack {
    display: flex;
    justify-content: flex-end
}

.avatar-stack .account__avatar {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    position: relative;
    margin-left: -10px;
    background: #17191f;
    border: 2px solid #282c37
}

.avatar-stack .account__avatar:first-child {
    z-index: 1
}

.avatar-stack .account__avatar:nth-child(2) {
    z-index: 2
}

.avatar-stack .account__avatar:nth-child(3) {
    z-index: 3
}

.accounts-table {
    width: 100%
}

.accounts-table .account {
    padding: 0;
    border: 0
}

.accounts-table strong {
    font-weight: 700
}

.accounts-table thead th {
    text-align: center;
    text-transform: uppercase;
    color: #9baec8;
    font-weight: 700;
    padding: 10px
}

.accounts-table thead th:first-child {
    text-align: left
}

.accounts-table tbody td {
    padding: 15px 0;
    vertical-align: middle;
    border-bottom: 1px solid #393f4f
}

.accounts-table tbody tr:last-child td {
    border-bottom: 0
}

.accounts-table__count {
    width: 120px;
    text-align: center;
    font-size: 15px;
    font-weight: 500;
    color: #fff
}

.accounts-table__count small {
    display: block;
    color: #9baec8;
    font-weight: 400;
    font-size: 14px
}

.accounts-table__comment {
    width: 50%;
    vertical-align: initial!important
}

@media screen and (max-width:415px) {
    .accounts-table tbody td.optional {
        display: none
    }
}

@media screen and (max-width:415px) {
    .box-widget, .contact-widget, .directory, .landing-page__information.contact-widget, .memoriam-widget, .moved-account-widget, .page-header {
        margin-bottom: 0;
        box-shadow: none;
        border-radius: 0
    }
}

.statuses-grid {
    min-height: 600px
}

@media screen and (max-width:640px) {
    .statuses-grid {
        width: 100%!important
    }
}

.statuses-grid__item {
    width: 313.3333333333px
}

@media screen and (max-width:1255px) {
    .statuses-grid__item {
        width: 306.6666666667px
    }
}

@media screen and (max-width:640px) {
    .statuses-grid__item {
        width: 100%
    }
}

@media screen and (max-width:415px) {
    .statuses-grid__item {
        width: 100vw
    }
}

.statuses-grid .detailed-status {
    border-radius: 4px
}

@media screen and (max-width:415px) {
    .statuses-grid .detailed-status {
        border-top: 1px solid #4a5266
    }
}

.statuses-grid .detailed-status.compact .detailed-status__meta {
    margin-top: 15px
}

.statuses-grid .detailed-status.compact .status__content {
    font-size: 15px;
    line-height: 20px
}

.statuses-grid .detailed-status.compact .status__content .emojione {
    width: 20px;
    height: 20px;
    margin: -3px 0 0
}

.statuses-grid .detailed-status.compact .status__content .status__content__spoiler-link {
    line-height: 20px;
    margin: 0
}

.statuses-grid .detailed-status.compact .media-gallery, .statuses-grid .detailed-status.compact .status-card, .statuses-grid .detailed-status.compact .video-player {
    margin-top: 15px
}

.notice-widget {
    color: #9baec8
}

.notice-widget, .notice-widget p {
    margin-bottom: 10px
}

.notice-widget p:last-child {
    margin-bottom: 0
}

.notice-widget a {
    font-size: 14px;
    line-height: 20px
}

.notice-widget a, .placeholder-widget a {
    text-decoration: none;
    font-weight: 500;
    color: #2b90d9
}

.notice-widget a:active, .notice-widget a:focus, .notice-widget a:hover, .placeholder-widget a:active, .placeholder-widget a:focus, .placeholder-widget a:hover {
    text-decoration: underline
}

.table-of-contents {
    background: #1f232b;
    min-height: 100%;
    font-size: 14px;
    border-radius: 4px
}

.table-of-contents li a {
    display: block;
    font-weight: 500;
    padding: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
    color: #fff;
    border-bottom: 1px solid #313543
}

.table-of-contents li a:active, .table-of-contents li a:focus, .table-of-contents li a:hover {
    text-decoration: underline
}

.table-of-contents li:last-child a {
    border-bottom: 0
}

.table-of-contents li ul {
    padding-left: 20px;
    border-bottom: 1px solid #313543
}

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 .input.hidden {
    margin: 0
}

.simple_form .input.radio_buttons .radio {
    margin-bottom: 15px
}

.simple_form .input.radio_buttons .radio:last-child {
    margin-bottom: 0
}

.simple_form .input.radio_buttons .radio>label {
    position: relative;
    padding-left: 28px
}

.simple_form .input.radio_buttons .radio>label input {
    position: absolute;
    top: -2px;
    left: 0
}

.simple_form .input.boolean {
    position: relative;
    margin-bottom: 0
}

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

.simple_form .input.boolean .hint, .simple_form .input.boolean .label_input {
    padding-left: 28px
}

.simple_form .input.boolean .label_input__wrapper {
    position: static
}

.simple_form .input.boolean label.checkbox {
    position: absolute;
    top: 2px;
    left: 0
}

.simple_form .input.boolean label a {
    color: #2b90d9;
    text-decoration: underline
}

.simple_form .input.boolean label a:active, .simple_form .input.boolean label a:focus, .simple_form .input.boolean label a:hover {
    text-decoration: none
}

.simple_form .input.boolean .recommended {
    position: absolute;
    margin: -2px 4px 0
}

.simple_form .row {
    display: flex;
    margin: 0 -5px
}

.simple_form .row .input {
    box-sizing: border-box;
    flex: 1 1 auto;
    width: 50%;
    padding: 0 5px
}

.simple_form .hint {
    color: #9baec8
}

.simple_form .hint a {
    color: #2b90d9
}

.simple_form .hint code {
    border-radius: 3px;
    padding: .2em .4em;
    background: #0e1014
}

.simple_form .hint li {
    list-style: disc;
    margin-left: 18px
}

.simple_form ul.hint {
    margin-bottom: 15px
}

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

.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
}

.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 .input.with_floating_label .label_input {
    display: flex
}

.simple_form .input.with_floating_label .label_input>label {
    font-family: inherit;
    font-size: 14px;
    color: #fff;
    font-weight: 500;
    min-width: 150px;
    flex: 0 0 auto
}

.simple_form .input.with_floating_label .label_input input, .simple_form .input.with_floating_label .label_input select {
    flex: 1 1 auto
}

.simple_form .input.with_floating_label.select .hint {
    margin-top: 6px;
    margin-left: 150px
}

.simple_form .input.with_label .label_input>label {
    font-family: inherit;
    font-size: 14px;
    color: #fff;
    display: block;
    margin-bottom: 8px;
    word-wrap: break-word;
    font-weight: 500
}

.simple_form .input.with_label .hint {
    margin-top: 6px
}

.simple_form .input.with_label ul {
    flex: 390px
}

.simple_form .input.with_block_label {
    max-width: none
}

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

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

.simple_form .input.with_block_label ul {
    -moz-columns: 2;
    column-count: 2
}

.simple_form .required abbr {
    text-decoration: none;
    color: #e87487
}

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

.simple_form .fields-group .input:last-child {
    margin-bottom: 0
}

.simple_form .fields-row {
    display: flex;
    padding-top: 5px;
    margin: 0 -10px 25px
}

.simple_form .fields-row .input {
    max-width: none
}

.simple_form .fields-row__column {
    box-sizing: border-box;
    padding: 0 10px;
    flex: 1 1 auto;
    min-height: 1px
}

.simple_form .fields-row__column-6 {
    max-width: 50%
}

.simple_form .fields-row__column .actions {
    margin-top: 27px
}

.simple_form .fields-row .fields-group:last-child, .simple_form .fields-row .fields-row__column.fields-group {
    margin-bottom: 0
}

@media screen and (max-width:600px) {
    .simple_form .fields-row {
        display: block;
        margin-bottom: 0
    }
    .simple_form .fields-row__column {
        max-width: none
    }
    .simple_form .fields-row .fields-group:last-child, .simple_form .fields-row .fields-row__column, .simple_form .fields-row .fields-row__column.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 .check_boxes .checkbox label {
    font-family: inherit;
    font-size: 14px;
    color: #fff;
    display: inline-block;
    width: auto;
    position: relative;
    padding-top: 5px;
    padding-left: 25px;
    flex: 1 1 auto
}

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

.simple_form .input.static .label_input__wrapper {
    font-size: 16px;
    padding: 10px;
    border: 1px solid #606984;
    border-radius: 4px
}

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

.simple_form input[type=email]::-webkit-input-placeholder, .simple_form input[type=number]::-webkit-input-placeholder, .simple_form input[type=password]::-webkit-input-placeholder, .simple_form input[type=text]::-webkit-input-placeholder, .simple_form textarea::-webkit-input-placeholder {
    color: #a8b9cf
}

.simple_form input[type=email]::-moz-placeholder, .simple_form input[type=number]::-moz-placeholder, .simple_form input[type=password]::-moz-placeholder, .simple_form input[type=text]::-moz-placeholder, .simple_form textarea::-moz-placeholder {
    color: #a8b9cf
}

.simple_form input[type=email]:-ms-input-placeholder, .simple_form input[type=number]:-ms-input-placeholder, .simple_form input[type=password]:-ms-input-placeholder, .simple_form input[type=text]:-ms-input-placeholder, .simple_form textarea:-ms-input-placeholder {
    color: #a8b9cf
}

.simple_form input[type=email]::-ms-input-placeholder, .simple_form input[type=number]::-ms-input-placeholder, .simple_form input[type=password]::-ms-input-placeholder, .simple_form input[type=text]::-ms-input-placeholder, .simple_form textarea::-ms-input-placeholder {
    color: #a8b9cf
}

.simple_form input[type=email]::placeholder, .simple_form input[type=number]::placeholder, .simple_form input[type=password]::placeholder, .simple_form input[type=text]::placeholder, .simple_form textarea::placeholder {
    color: #a8b9cf
}

.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 {
    box-shadow: none
}

.simple_form input[type=email]:focus:invalid:not(:placeholder-shown), .simple_form input[type=number]:focus:invalid:not(:placeholder-shown), .simple_form input[type=password]:focus:invalid:not(:placeholder-shown), .simple_form input[type=text]:focus:invalid:not(:placeholder-shown), .simple_form textarea:focus:invalid:not(:placeholder-shown) {
    border-color: #e87487
}

.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-color: #79bd9a
}

.simple_form input[type=email]:hover, .simple_form input[type=number]:hover, .simple_form input[type=password]:hover, .simple_form input[type=text]:hover, .simple_form textarea:hover {
    border-color: #000
}

.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-color: #2b90d9;
    background: #17191f
}

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

.simple_form .input.field_with_errors input[type=email], .simple_form .input.field_with_errors input[type=number], .simple_form .input.field_with_errors input[type=password], .simple_form .input.field_with_errors input[type=text], .simple_form .input.field_with_errors select, .simple_form .input.field_with_errors textarea {
    border-color: #e87487
}

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

.simple_form .input.disabled {
    opacity: .5
}

.simple_form .actions {
    margin-top: 30px;
    display: flex
}

.simple_form .actions.actions--top {
    margin-top: 0;
    margin-bottom: 30px
}

.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;
    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:disabled:hover, .simple_form .button:disabled:hover, .simple_form button:disabled:hover {
    background-color: #9baec8
}

.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 {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-sizing: border-box;
    font-size: 16px;
    color: #fff;
    display: block;
    width: 100%;
    outline: 0;
    font-family: inherit;
    resize: vertical;
    background: #131419 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='%2342485A'/></svg>") no-repeat right 8px center/auto 16px;
    border: 1px solid #0a0b0e;
    border-radius: 4px;
    padding-left: 10px;
    padding-right: 30px;
    height: 41px
}

.simple_form h4 {
    margin-bottom: 15px!important
}

.simple_form .label_input__wrapper {
    position: relative
}

.simple_form .label_input__append {
    position: absolute;
    right: 3px;
    top: 1px;
    padding: 10px 10px 9px;
    font-size: 16px;
    color: #606984;
    font-family: inherit;
    pointer-events: none;
    cursor: default;
    max-width: 140px;
    white-space: nowrap;
    overflow: hidden
}

.simple_form .label_input__append:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 1px;
    width: 5px;
    background-image: linear-gradient(90deg, rgba(19, 20, 25, 0), #131419)
}

.simple_form__overlay-area {
    position: relative
}

.simple_form__overlay-area__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(40, 44, 55, .65);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    border-radius: 4px
}

.simple_form__overlay-area__overlay__content {
    text-align: center
}

.simple_form__overlay-area__overlay__content.rich-formatting, .simple_form__overlay-area__overlay__content.rich-formatting p {
    color: #fff
}

.block-icon {
    display: block;
    margin: 0 auto 10px;
    font-size: 24px
}

.flash-message {
    background: #393f4f;
    color: #9baec8;
    border-radius: 4px;
    padding: 15px 10px;
    margin-bottom: 30px;
    text-align: center
}

.flash-message.notice {
    border: 1px solid rgba(121, 189, 154, .5);
    background: rgba(121, 189, 154, .25);
    color: #79bd9a
}

.flash-message.alert {
    border: 1px solid rgba(223, 64, 90, .5);
    background: rgba(223, 64, 90, .25);
    color: #df405a
}

.flash-message a {
    display: inline-block;
    color: #9baec8;
    text-decoration: none
}

.flash-message a:hover {
    color: #fff;
    text-decoration: underline
}

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

.flash-message .oauth-code {
    outline: 0;
    box-sizing: border-box;
    display: block;
    width: 100%;
    border: 0;
    padding: 10px;
    font-family: "mastodon-font-monospace", monospace;
    background: #282c37;
    color: #fff;
    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
}

.quick-nav {
    list-style: none;
    margin-bottom: 25px;
    font-size: 14px
}

.quick-nav li {
    display: inline-block;
    margin-right: 10px
}

.quick-nav a {
    color: #2b90d9;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: 700
}

.quick-nav a:active, .quick-nav a:focus, .quick-nav a:hover {
    color: #4ea2df
}

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

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

.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: flex;
    flex-wrap: wrap;
    align-items: flex-start
}

.qr-code {
    flex: 0 0 auto;
    background: #fff;
    padding: 4px;
    margin: 0 10px 20px 0;
    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;
    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 {
    box-sizing: border-box;
    background: rgba(223, 64, 90, .5);
    color: #fff;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, .3);
    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: flex;
    flex-wrap: wrap;
    align-items: center
}

.action-pagination .actions, .action-pagination .pagination {
    flex: 1 1 auto
}

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

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

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

.alternative-login {
    margin-top: 20px;
    margin-bottom: 20px
}

.alternative-login h4 {
    font-size: 16px;
    color: #fff;
    text-align: center;
    margin-bottom: 20px;
    border: 0;
    padding: 0
}

.alternative-login .button {
    display: block
}

.scope-danger {
    color: #ff5050
}

.form_admin_settings_closed_registrations_message textarea, .form_admin_settings_custom_css textarea, .form_admin_settings_site_description textarea, .form_admin_settings_site_extended_description textarea, .form_admin_settings_site_short_description textarea, .form_admin_settings_site_terms textarea {
    font-family: "mastodon-font-monospace", monospace
}

.input-copy {
    background: #131419;
    border: 1px solid #0a0b0e;
    border-radius: 4px;
    display: flex;
    align-items: center;
    padding-right: 4px;
    position: relative;
    top: 1px;
    transition: border-color .3s linear
}

.input-copy__wrapper {
    flex: 1 1 auto
}

.input-copy input[type=text] {
    background: transparent;
    border: 0;
    padding: 10px;
    font-size: 14px;
    font-family: "mastodon-font-monospace", monospace
}

.input-copy button {
    flex: 0 0 auto;
    margin: 4px;
    text-transform: none;
    font-weight: 400;
    font-size: 14px;
    padding: 7px 18px 6px;
    width: auto;
    transition: background .3s linear
}

.input-copy.copied {
    border-color: #79bd9a;
    transition: none
}

.input-copy.copied button {
    background: #79bd9a;
    transition: none
}

.connection-prompt {
    margin-bottom: 25px
}

.connection-prompt .fa-link {
    background-color: #1f232b;
    border-radius: 100%;
    font-size: 24px;
    padding: 10px
}

.connection-prompt__column {
    align-items: center;
    display: flex;
    flex: 1;
    flex-direction: column;
    flex-shrink: 1;
    max-width: 50%
}

.connection-prompt__column-sep {
    align-self: center;
    flex-grow: 0;
    overflow: visible;
    position: relative;
    z-index: 1
}

.connection-prompt__column p {
    word-break: break-word
}

.connection-prompt .account__avatar {
    margin-bottom: 20px
}

.connection-prompt__connection {
    background-color: #393f4f;
    box-shadow: 0 0 15px rgba(0, 0, 0, .2);
    border-radius: 4px;
    padding: 25px 10px;
    position: relative;
    text-align: center
}

.connection-prompt__connection:after {
    background-color: #1f232b;
    content: "";
    display: block;
    height: 100%;
    left: 50%;
    position: absolute;
    top: 0;
    width: 1px
}

.connection-prompt__row {
    align-items: flex-start;
    display: flex;
    flex-direction: row
}

.card>a {
    display: block;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 0 15px rgba(0, 0, 0, .2)
}

@media screen and (max-width:415px) {
    .card>a {
        box-shadow: none
    }
}

.card>a:active .card__bar, .card>a:focus .card__bar, .card>a:hover .card__bar {
    background: #393f4f
}

.card__img {
    height: 130px;
    position: relative;
    background: #0e1014;
    border-radius: 4px 4px 0 0
}

.card__img img {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    -o-object-fit: cover;
    font-family: "object-fit:cover";
    object-fit: cover;
    border-radius: 4px 4px 0 0
}

@media screen and (max-width:600px) {
    .card__img {
        height: 200px
    }
}

@media screen and (max-width:415px) {
    .card__img {
        display: none
    }
}

.card__bar {
    position: relative;
    padding: 15px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background: #313543;
    border-radius: 0 0 4px 4px
}

@media screen and (max-width:415px) {
    .card__bar {
        border-radius: 0
    }
}

.card__bar .avatar {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    padding-top: 2px
}

.card__bar .avatar img {
    width: 100%;
    height: 100%;
    display: block;
    margin: 0;
    border-radius: 4px;
    background: #17191f;
    -o-object-fit: cover;
    font-family: "object-fit:cover";
    object-fit: cover
}

.card__bar .display-name {
    margin-left: 15px;
    text-align: left
}

.card__bar .display-name strong {
    font-size: 15px;
    color: #fff;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis
}

.card__bar .display-name span {
    display: block;
    font-size: 14px;
    color: #9baec8;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis
}

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

.pagination .current, .pagination .gap, .pagination .newer, .pagination .older, .pagination .page, .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 .newer, .pagination .older {
    text-transform: uppercase;
    color: #d9e1e8
}

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

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

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

.pagination .newer .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 .newer, .pagination .older {
        display: inline-block
    }
}

.nothing-here {
    background: #282c37;
    box-shadow: 0 0 15px rgba(0, 0, 0, .2);
    color: #9baec8;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: default;
    border-radius: 4px;
    padding: 20px;
    min-height: 30vh
}

.nothing-here--under-tabs {
    border-radius: 0 0 4px 4px
}

.nothing-here--flexible {
    box-sizing: border-box;
    min-height: 100%
}

.account-role, .simple_form .recommended {
    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, .simple_form .recommended.moderator {
    color: #79bd9a;
    background-color: rgba(121, 189, 154, .1);
    border-color: rgba(121, 189, 154, .5)
}

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

.account__header__fields {
    max-width: 100vw;
    padding: 0;
    margin: 15px -15px -15px;
    border-bottom: 0;
    border-top: 0;
    border-color: #42485a currentcolor;
    border-style: solid none;
    border-width: 1px 0;
    font-size: 14px;
    line-height: 20px
}

.account__header__fields dl {
    display: flex;
    border-bottom: 1px solid #42485a
}

.account__header__fields dd, .account__header__fields dt {
    box-sizing: border-box;
    padding: 14px;
    text-align: center;
    max-height: 48px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.account__header__fields dt {
    font-weight: 500;
    width: 120px;
    flex: 0 0 auto;
    color: #d9e1e8;
    background: rgba(23, 25, 31, .5)
}

.account__header__fields dd {
    flex: 1 1 auto;
    color: #9baec8
}

.account__header__fields a {
    color: #2b90d9;
    text-decoration: none
}

.account__header__fields a:active, .account__header__fields a:focus, .account__header__fields a:hover {
    text-decoration: underline
}

.account__header__fields .verified {
    border: 1px solid rgba(121, 189, 154, .5);
    background: rgba(121, 189, 154, .25)
}

.account__header__fields .verified a {
    color: #79bd9a;
    font-weight: 500
}

.account__header__fields .verified__mark {
    color: #79bd9a
}

.account__header__fields dl:last-child {
    border-bottom: 0
}

.directory__tag .trends__item__current {
    width: auto
}

.pending-account__header {
    color: #9baec8
}

.pending-account__header a {
    color: #d9e1e8;
    text-decoration: none
}

.pending-account__header a:active, .pending-account__header a:focus, .pending-account__header a:hover {
    text-decoration: underline
}

.pending-account__header strong {
    color: #fff;
    font-weight: 700
}

.pending-account__body {
    margin-top: 10px
}

.activity-stream {
    box-shadow: 0 0 15px rgba(0, 0, 0, .2);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 10px
}

.activity-stream--under-tabs {
    border-radius: 0 0 4px 4px
}

@media screen and (max-width:415px) {
    .activity-stream {
        margin-bottom: 0;
        border-radius: 0;
        box-shadow: none
    }
}

.activity-stream--headless {
    border-radius: 0;
    margin: 0;
    box-shadow: none
}

.activity-stream--headless .detailed-status, .activity-stream--headless .status {
    border-radius: 0!important
}

.activity-stream div[data-component] {
    width: 100%
}

.activity-stream .entry {
    background: #282c37
}

.activity-stream .entry .detailed-status, .activity-stream .entry .load-more, .activity-stream .entry .status {
    -webkit-animation: none;
    animation: none
}

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

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

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

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

.activity-stream--highlighted .entry {
    background: #393f4f
}

.button.logo-button {
    flex: 0 auto;
    font-size: 14px;
    background: #2b90d9;
    color: #fff;
    text-transform: none;
    line-height: 36px;
    height: auto;
    padding: 3px 15px;
    border: 0
}

.button.logo-button svg {
    width: 20px;
    height: auto;
    vertical-align: middle;
    margin-right: 5px;
    fill: #fff
}

.button.logo-button:active, .button.logo-button:focus, .button.logo-button:hover {
    background: #56a7e1
}

.button.logo-button.disabled:active, .button.logo-button.disabled:focus, .button.logo-button.disabled:hover, .button.logo-button:disabled:active, .button.logo-button:disabled:focus, .button.logo-button:disabled:hover {
    background: #9baec8
}

.button.logo-button.button--destructive:active, .button.logo-button.button--destructive:focus, .button.logo-button.button--destructive:hover {
    background: #df405a
}

@media screen and (max-width:415px) {
    .button.logo-button svg {
        display: none
    }
}

.embed .detailed-status, .public-layout .detailed-status {
    padding: 15px
}

.embed .status, .public-layout .status {
    padding: 15px 15px 15px 78px;
    min-height: 50px
}

.embed .status__avatar, .public-layout .status__avatar {
    left: 15px;
    top: 17px
}

.embed .status__content, .public-layout .status__content {
    padding-top: 5px
}

.embed .status__prepend, .public-layout .status__prepend {
    margin-left: 78px;
    padding-top: 15px
}

.embed .status__prepend-icon-wrapper, .public-layout .status__prepend-icon-wrapper {
    left: -32px
}

.embed .status .media-gallery, .embed .status .video-player, .embed .status__action-bar, .public-layout .status .media-gallery, .public-layout .status .video-player, .public-layout .status__action-bar {
    margin-top: 10px
}

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>")
}

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

.link-button {
    display: block;
    font-size: 15px;
    line-height: 20px;
    color: #2b90d9;
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer
}

.link-button:active, .link-button:hover {
    text-decoration: underline
}

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

.button {
    background-color: #2b90d9;
    border: 10px;
    border-radius: 4px;
    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;
    transition: all .1s ease-in;
    white-space: nowrap;
    width: auto
}

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

.button--destructive {
    transition: none
}

.button--destructive:active, .button--destructive:focus, .button--destructive:hover {
    background-color: #df405a;
    transition: none
}

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

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

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

.button.button-alternative, .button.button-alternative-2, .button.button-primary, .button.button-secondary {
    font-size: 16px;
    line-height: 36px;
    height: auto;
    text-transform: none;
    padding: 4px 16px
}

.button.button-alternative {
    color: #282c37;
    background: #9baec8
}

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

.button.button-alternative-2 {
    background: #606984
}

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

.button.button-secondary {
    color: #9baec8;
    background: transparent;
    padding: 3px 15px;
    border: 1px solid #9baec8
}

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

.button.button-secondary:disabled {
    opacity: .5
}

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

.column__wrapper {
    display: flex;
    flex: 1 1 auto;
    position: relative
}

.icon-button {
    display: inline-block;
    padding: 0;
    color: #606984;
    border: 0;
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
    transition: all .1s ease-in;
    transition-property: background-color, color
}

.icon-button:active, .icon-button:focus, .icon-button:hover {
    color: #707b97;
    background-color: rgba(96, 105, 132, .15);
    transition: all .2s ease-out;
    transition-property: background-color, color
}

.icon-button:focus {
    background-color: rgba(96, 105, 132, .3)
}

.icon-button.disabled {
    color: #444b5d;
    background-color: transparent;
    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: #606984
}

.icon-button.inverted:active, .icon-button.inverted:focus, .icon-button.inverted:hover {
    color: #51596f;
    background-color: rgba(96, 105, 132, .15)
}

.icon-button.inverted:focus {
    background-color: rgba(96, 105, 132, .3)
}

.icon-button.inverted.disabled {
    color: #707b97;
    background-color: transparent
}

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

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

.icon-button.overlayed {
    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: #606984;
    border: 0;
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
    font-weight: 600;
    font-size: 11px;
    padding: 0 3px;
    line-height: 27px;
    outline: 0;
    transition: all .1s ease-in;
    transition-property: background-color, color
}

.text-icon-button:active, .text-icon-button:focus, .text-icon-button:hover {
    color: #51596f;
    background-color: rgba(96, 105, 132, .15);
    transition: all .2s ease-out;
    transition-property: background-color, color
}

.text-icon-button:focus {
    background-color: rgba(96, 105, 132, .3)
}

.text-icon-button.disabled {
    color: #979eb3;
    background-color: transparent;
    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, .invisible {
    position: absolute
}

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

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

.ellipsis:after {
    content: "…"
}

.compose-form {
    padding: 10px
}

.compose-form__sensitive-button {
    padding: 0 10px 10px;
    font-size: 14px;
    font-weight: 500
}

.compose-form__sensitive-button.active {
    color: #2b90d9
}

.compose-form__sensitive-button input[type=checkbox] {
    display: none
}

.compose-form__sensitive-button .checkbox {
    display: inline-block;
    position: relative;
    border: 1px solid #9baec8;
    box-sizing: border-box;
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    margin-right: 10px;
    top: -1px;
    border-radius: 4px;
    vertical-align: middle
}

.compose-form__sensitive-button .checkbox.active {
    border-color: #2b90d9;
    background: #2b90d9
}

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

.compose-form .compose-form__warning strong {
    color: #282c37;
    font-weight: 500
}

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

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

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

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

.compose-form .autosuggest-input, .compose-form .autosuggest-textarea, .compose-form .compose-form__autosuggest-wrapper, .compose-form .spoiler-input {
    position: relative
}

.compose-form .spoiler-input {
    height: 0;
    transform-origin: bottom;
    opacity: 0
}

.compose-form .spoiler-input.spoiler-input--visible {
    height: 36px;
    margin-bottom: 11px;
    opacity: 1
}

.compose-form .autosuggest-textarea__textarea, .compose-form .spoiler-input__input {
    display: block;
    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
}

.compose-form .autosuggest-textarea__textarea::-webkit-input-placeholder, .compose-form .spoiler-input__input::-webkit-input-placeholder {
    color: #606984
}

.compose-form .autosuggest-textarea__textarea::-moz-placeholder, .compose-form .spoiler-input__input::-moz-placeholder {
    color: #606984
}

.compose-form .autosuggest-textarea__textarea:-ms-input-placeholder, .compose-form .spoiler-input__input:-ms-input-placeholder {
    color: #606984
}

.compose-form .autosuggest-textarea__textarea::-ms-input-placeholder, .compose-form .spoiler-input__input::-ms-input-placeholder {
    color: #606984
}

.compose-form .autosuggest-textarea__textarea::placeholder, .compose-form .spoiler-input__input::placeholder {
    color: #606984
}

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

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

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

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

.compose-form .autosuggest-textarea__textarea::-webkit-scrollbar {
    all: unset
}

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

.compose-form .autosuggest-textarea__suggestions-wrapper {
    position: relative;
    height: 0
}

.compose-form .autosuggest-textarea__suggestions {
    box-sizing: border-box;
    display: none;
    position: absolute;
    top: 100%;
    width: 100%;
    z-index: 99;
    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
}

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

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

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

.compose-form .autosuggest-account, .compose-form .autosuggest-emoji, .compose-form .autosuggest-hashtag {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    line-height: 18px;
    font-size: 14px
}

.compose-form .autosuggest-hashtag {
    justify-content: space-between
}

.compose-form .autosuggest-hashtag__name {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.compose-form .autosuggest-hashtag strong {
    font-weight: 500
}

.compose-form .autosuggest-hashtag__uses {
    flex: 0 0 auto;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

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

.compose-form .autosuggest-account .display-name__account {
    color: #606984
}

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

.compose-form .compose-form__modifiers .compose-form__upload-wrapper {
    overflow: hidden
}

.compose-form .compose-form__modifiers .compose-form__uploads-wrapper {
    display: flex;
    flex-direction: row;
    padding: 5px;
    flex-wrap: wrap
}

.compose-form .compose-form__modifiers .compose-form__upload {
    flex: 1 1 0;
    min-width: 40%;
    margin: 5px
}

.compose-form .compose-form__modifiers .compose-form__upload__actions {
    background: linear-gradient(180deg, rgba(0, 0, 0, .8), rgba(0, 0, 0, .35) 80%, transparent);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    opacity: 0;
    transition: opacity .1s ease
}

.compose-form .compose-form__modifiers .compose-form__upload__actions .icon-button {
    flex: 0 1 auto;
    color: #d9e1e8;
    font-size: 14px;
    font-weight: 500;
    padding: 10px;
    font-family: inherit
}

.compose-form .compose-form__modifiers .compose-form__upload__actions .icon-button:active, .compose-form .compose-form__modifiers .compose-form__upload__actions .icon-button:focus, .compose-form .compose-form__modifiers .compose-form__upload__actions .icon-button:hover {
    color: #eff3f5
}

.compose-form .compose-form__modifiers .compose-form__upload__actions.active {
    opacity: 1
}

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

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

.compose-form .compose-form__modifiers .compose-form__upload-description textarea:focus {
    color: #fff
}

.compose-form .compose-form__modifiers .compose-form__upload-description textarea::-webkit-input-placeholder {
    opacity: .75;
    color: #d9e1e8
}

.compose-form .compose-form__modifiers .compose-form__upload-description textarea::-moz-placeholder {
    opacity: .75;
    color: #d9e1e8
}

.compose-form .compose-form__modifiers .compose-form__upload-description textarea:-ms-input-placeholder {
    opacity: .75;
    color: #d9e1e8
}

.compose-form .compose-form__modifiers .compose-form__upload-description textarea::-ms-input-placeholder {
    opacity: .75;
    color: #d9e1e8
}

.compose-form .compose-form__modifiers .compose-form__upload-description textarea::placeholder {
    opacity: .75;
    color: #d9e1e8
}

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

.compose-form .compose-form__modifiers .compose-form__upload-thumbnail {
    border-radius: 4px;
    background-color: #000;
    background-position: 50%;
    background-size: cover;
    background-repeat: no-repeat;
    height: 140px;
    width: 100%;
    overflow: hidden
}

.compose-form .compose-form__buttons-wrapper {
    padding: 10px;
    background: #ebebeb;
    border-radius: 0 0 4px 4px;
    display: flex;
    justify-content: space-between;
    flex: 0 0 auto
}

.compose-form .compose-form__buttons-wrapper .compose-form__buttons {
    display: flex
}

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

.compose-form .compose-form__buttons-wrapper .compose-form__buttons .compose-form__sensitive-button {
    display: none
}

.compose-form .compose-form__buttons-wrapper .compose-form__buttons .compose-form__sensitive-button.compose-form__sensitive-button--visible {
    display: block
}

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

.compose-form .compose-form__buttons-wrapper .icon-button, .compose-form .compose-form__buttons-wrapper .text-icon-button {
    box-sizing: content-box;
    padding: 0 3px
}

.compose-form .compose-form__buttons-wrapper .character-counter__wrapper {
    align-self: center;
    margin-right: 4px
}

.compose-form .compose-form__publish {
    display: flex;
    justify-content: flex-end;
    min-width: 0;
    flex: 0 0 auto
}

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

.character-counter {
    cursor: default;
    font-family: "mastodon-font-sans-serif", sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #606984
}

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

.no-reduce-motion .spoiler-input {
    transition: height .4s ease, opacity .4s ease
}

.emojione {
    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;
    margin-bottom: 10px;
    background: #9baec8;
    padding: 10px;
    min-height: 23px;
    overflow-y: auto;
    flex: 0 2 auto
}

.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 {
    position: relative;
    font-size: 15px;
    line-height: 20px;
    word-wrap: break-word;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-top: 2px;
    color: #fff
}

.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: pre-wrap
}

.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;
    white-space: pre-wrap
}

.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: #707b97
}

.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: #606984
}

.reply-indicator__content a.unhandled-link, .status__content a.unhandled-link {
    color: #4ea2df
}

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

.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__spoiler-link::-moz-focus-inner, .status__content .status__content__spoiler-link::-moz-focus-inner {
    border: 0
}

.reply-indicator__content .status__content__spoiler-link::-moz-focus-inner, .reply-indicator__content .status__content__spoiler-link:active, .reply-indicator__content .status__content__spoiler-link:focus, .status__content .status__content__spoiler-link::-moz-focus-inner, .status__content .status__content__spoiler-link:active, .status__content .status__content__spoiler-link:focus {
    outline: 0!important
}

.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.status__content--collapsed {
    max-height: 300px
}

.status__content__read-more-button {
    display: block;
    font-size: 15px;
    line-height: 20px;
    color: #4ea2df;
    border: 0;
    background: transparent;
    padding: 8px 0 0
}

.status__content__read-more-button:active, .status__content__read-more-button:hover {
    text-decoration: underline
}

.status__content__spoiler-link {
    display: inline-block;
    border-radius: 2px;
    background: transparent;
    border: 0;
    color: #282c37;
    font-weight: 700;
    font-size: 11px;
    padding: 0 6px;
    text-transform: uppercase;
    line-height: 20px;
    cursor: pointer;
    vertical-align: middle
}

.status__wrapper--filtered {
    color: #606984;
    border: 0;
    font-size: inherit;
    text-align: center;
    line-height: inherit;
    margin: 0;
    padding: 15px;
    box-sizing: border-box;
    width: 100%;
    clear: both;
    border-bottom: 1px solid #393f4f
}

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

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

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

.focusable:focus .status.status-direct.muted {
    background: transparent
}

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

.status {
    padding: 8px 10px 8px 68px;
    position: relative;
    min-height: 54px;
    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 .audio-player, .status .video-player {
    margin-top: 8px
}

.status.status-direct:not(.read) {
    background: #393f4f;
    border-bottom-color: #42485a
}

.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: #828ba4
}

.notification__relative_time, .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: flex
}

.status-check-box .status-check-box__status {
    margin: 10px 0 10px 10px;
    flex: 1
}

.status-check-box .status-check-box__status .media-gallery {
    max-width: 250px
}

.status-check-box .status-check-box__status .status__content {
    padding: 0;
    white-space: normal
}

.status-check-box .status-check-box__status .audio-player, .status-check-box .status-check-box__status .video-player {
    margin-top: 8px;
    max-width: 250px
}

.status-check-box .status-check-box__status .media-gallery__item-thumbnail {
    cursor: default
}

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

.status__prepend {
    margin-left: 68px;
    color: #606984;
    padding: 8px 0 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 {
    align-items: center;
    display: flex;
    margin-top: 8px
}

.status__action-bar__counter {
    display: inline-flex;
    margin-right: 11px;
    align-items: center
}

.status__action-bar__counter .status__action-bar-button {
    margin-right: 4px
}

.status__action-bar__counter__label {
    display: inline-block;
    width: 14px;
    font-size: 12px;
    font-weight: 500;
    color: #606984
}

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

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

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

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

.detailed-status--flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start
}

.detailed-status--flex .detailed-status__meta, .detailed-status--flex .status__content {
    flex: 100%
}

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

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

.detailed-status .status__content .status__content__spoiler-link {
    line-height: 24px;
    margin: -1px 0 0
}

.detailed-status .audio-player, .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: flex;
    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: #606984
}

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

.domain .domain__domain-name {
    flex: 1 1 auto;
    display: block;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500
}

.domain__wrapper {
    display: flex
}

.domain_buttons {
    height: 18px;
    padding: 10px;
    white-space: nowrap
}

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

.account.compact {
    padding: 0;
    border-bottom: 0
}

.account.compact .account__avatar-wrapper {
    margin-left: 0
}

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

.account__wrapper {
    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
}

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

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

.account__avatar-composite>div {
    float: left;
    position: relative;
    box-sizing: border-box
}

.account__avatar-composite__label {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    text-shadow: 1px 1px 2px #000;
    font-weight: 700;
    font-size: 15px
}

a .account__avatar {
    cursor: pointer
}

.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;
    white-space: nowrap
}

.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__action-bar {
    border-top: 1px solid #393f4f;
    border-bottom: 1px solid #393f4f;
    line-height: 36px;
    overflow: hidden;
    flex: 0 0 auto;
    display: flex
}

.account__action-bar-dropdown {
    padding: 10px
}

.account__action-bar-dropdown .icon-button {
    vertical-align: middle
}

.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: flex;
    flex: 1 1 auto;
    line-height: 18px;
    text-align: center
}

.account__action-bar__tab {
    text-decoration: none;
    overflow: hidden;
    flex: 0 1 100%;
    border-right: 1px solid #393f4f;
    padding: 10px 0;
    border-bottom: 4px solid transparent
}

.account__action-bar__tab.active {
    border-bottom: 4px solid #2b90d9
}

.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-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
}

.detailed-status__display-name:hover strong, .reply-indicator__display-name:hover strong, .status__display-name:hover strong, a.account__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 .button.logo-button {
    margin-bottom: 15px
}

.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
}

.status__expand {
    width: 68px;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    cursor: pointer
}

.muted .status__content, .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: #282c37
}

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

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

.notification__message .fa {
    color: #2b90d9
}

.notification__message>span {
    display: inline;
    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
}

.notification__relative_time {
    float: right
}

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

.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;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column
}

.image-loader .image-loader__preview-canvas {
    max-width: 100%;
    max-height: 80%;
    background: url(/packs/media/images/void-4c8270c17facce6d53726a2ebb9745f2.png) repeat;
    -o-object-fit: contain;
    font-family: "object-fit:contain";
    object-fit: contain
}

.image-loader .loading-bar {
    position: relative
}

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

.zoomable-image {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center
}

.zoomable-image img {
    max-width: 100%;
    max-height: 80%;
    width: auto;
    height: auto;
    -o-object-fit: contain;
    font-family: "object-fit:contain";
    object-fit: contain
}

.navigation-bar {
    padding: 10px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    cursor: default;
    color: #9baec8
}

.navigation-bar strong {
    color: #d9e1e8
}

.navigation-bar a {
    color: inherit
}

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

.navigation-bar .navigation-bar__actions {
    position: relative
}

.navigation-bar .navigation-bar__actions .icon-button.close {
    position: absolute;
    pointer-events: none;
    transform: scaleX(0) translate(-100%);
    opacity: 0
}

.navigation-bar .navigation-bar__actions .compose__action-bar .icon-button {
    pointer-events: auto;
    transform: scale(1) translate(0);
    opacity: 1
}

.navigation-bar__profile {
    flex: 1 1 auto;
    margin-left: 8px;
    line-height: 20px;
    margin-top: -1px;
    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;
    box-shadow: 2px 4px 15px rgba(0, 0, 0, .4);
    z-index: 9999
}

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

.dropdown-menu.left {
    transform-origin: 100% 50%
}

.dropdown-menu.top {
    transform-origin: 50% 100%
}

.dropdown-menu.bottom {
    transform-origin: 50% 0
}

.dropdown-menu.right {
    transform-origin: 0 50%
}

.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: -7px;
    border-width: 5px 7px 0;
    border-top-color: #d9e1e8
}

.dropdown-menu__arrow.bottom {
    top: -5px;
    margin-left: -7px;
    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;
    box-sizing: border-box;
    text-decoration: none;
    background: #d9e1e8;
    color: #282c37;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.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;
    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;
    box-sizing: border-box;
    text-decoration: none;
    background: #d9e1e8;
    color: #282c37;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.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
}

.columns-area {
    display: flex;
    flex: 1 1 auto;
    flex-direction: row;
    justify-content: flex-start;
    overflow-x: auto;
    position: relative
}

.columns-area.unscrollable {
    overflow-x: hidden
}

.columns-area__panels {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 100vh
}

.columns-area__panels__pane {
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    display: flex;
    justify-content: flex-end;
    min-width: 285px
}

.columns-area__panels__pane--start {
    justify-content: flex-start
}

.columns-area__panels__pane__inner {
    position: fixed;
    width: 285px;
    pointer-events: auto;
    height: 100%
}

.columns-area__panels__main {
    box-sizing: border-box;
    width: 100%;
    max-width: 600px;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column
}

@media screen and (min-width:415px) {
    .columns-area__panels__main {
        padding: 0 10px
    }
}

.tabs-bar__wrapper {
    background: #17191f;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 2;
    padding-top: 0
}

@media screen and (min-width:415px) {
    .tabs-bar__wrapper {
        padding-top: 10px
    }
}

.tabs-bar__wrapper .tabs-bar {
    margin-bottom: 0
}

@media screen and (min-width:415px) {
    .tabs-bar__wrapper .tabs-bar {
        margin-bottom: 10px
    }
}

.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>* {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%
}

.column {
    width: 350px;
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column
}

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

.ui {
    flex: 0 0 auto;
    flex-direction: column;
    width: 100%;
    height: 100%
}

.drawer, .ui {
    display: flex
}

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

.drawer__tab {
    display: block;
    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 {
    flex: 1 1 100%;
    overflow: hidden
}

@media screen and (min-width:631px) {
    .columns-area {
        padding: 0
    }
    .column, .drawer {
        flex: 0 0 auto;
        padding: 10px 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
    }
}

.tabs-bar {
    box-sizing: border-box;
    display: flex;
    background: #393f4f;
    flex: 0 0 auto;
    overflow-y: auto
}

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

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

@media screen and (min-width:631px) {
    .tabs-bar__link:active, .tabs-bar__link:focus, .tabs-bar__link:hover {
        background: #464d60;
        border-bottom-color: #464d60
    }
}

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

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

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

.columns-area--mobile {
    flex-direction: column;
    width: 100%;
    height: 100%;
    margin: 0 auto
}

.columns-area--mobile .column, .columns-area--mobile .drawer {
    width: 100%;
    height: 100%;
    padding: 0
}

.columns-area--mobile .directory__list {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: minmax(0, 50%) minmax(0, 50%)
}

@media screen and (max-width:415px) {
    .columns-area--mobile .directory__list {
        display: block
    }
}

.columns-area--mobile .directory__card {
    margin-bottom: 0
}

.columns-area--mobile .filter-form {
    display: flex
}

.columns-area--mobile .autosuggest-textarea__textarea {
    font-size: 16px
}

.columns-area--mobile .search__input {
    line-height: 18px;
    font-size: 16px;
    padding: 15px 30px 15px 15px
}

.columns-area--mobile .search__icon .fa {
    top: 15px
}

.columns-area--mobile .scrollable {
    overflow: visible
}

@supports (display:grid) {
    .columns-area--mobile .scrollable {
        contain: content
    }
}

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

@media screen and (min-width:630px) {
    .columns-area--mobile .detailed-status {
        padding: 15px
    }
    .columns-area--mobile .detailed-status .audio-player, .columns-area--mobile .detailed-status .media-gallery, .columns-area--mobile .detailed-status .video-player {
        margin-top: 15px
    }
    .columns-area--mobile .account__header__bar {
        padding: 5px 10px
    }
    .columns-area--mobile .compose-form, .columns-area--mobile .navigation-bar {
        padding: 15px
    }
    .columns-area--mobile .compose-form .compose-form__publish .compose-form__publish-button-wrapper {
        padding-top: 15px
    }
    .columns-area--mobile .status {
        padding: 15px 15px 15px 78px;
        min-height: 50px
    }
    .columns-area--mobile .status__avatar {
        left: 15px;
        top: 17px
    }
    .columns-area--mobile .status__content {
        padding-top: 5px
    }
    .columns-area--mobile .status__prepend {
        margin-left: 78px;
        padding-top: 15px
    }
    .columns-area--mobile .status__prepend-icon-wrapper {
        left: -32px
    }
    .columns-area--mobile .status .audio-player, .columns-area--mobile .status .media-gallery, .columns-area--mobile .status .video-player, .columns-area--mobile .status__action-bar {
        margin-top: 10px
    }
    .columns-area--mobile .account {
        padding: 15px 10px
    }
    .columns-area--mobile .account__header__bio {
        margin: 0 -10px
    }
    .columns-area--mobile .notification__message {
        margin-left: 78px;
        padding-top: 15px
    }
    .columns-area--mobile .notification__favourite-icon-wrapper {
        left: -32px
    }
    .columns-area--mobile .notification .account, .columns-area--mobile .notification .status {
        padding-top: 8px
    }
    .columns-area--mobile .notification .account__avatar-wrapper {
        margin-left: 17px;
        margin-right: 15px
    }
}

.floating-action-button {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 3.9375rem;
    height: 3.9375rem;
    bottom: 1.3125rem;
    right: 1.3125rem;
    background: #2588d0;
    color: #fff;
    border-radius: 50%;
    font-size: 21px;
    line-height: 21px;
    text-decoration: none;
    box-shadow: 2px 3px 9px rgba(0, 0, 0, .4)
}

.floating-action-button:active, .floating-action-button:focus, .floating-action-button:hover {
    background: #49a0de
}

@media screen and (min-width:415px) {
    .tabs-bar {
        width: 100%
    }
    .react-swipeable-view-container .columns-area--mobile {
        height: calc(100% - 10px)!important
    }
    .getting-started__wrapper, .search {
        margin-bottom: 10px
    }
}

@media screen and (max-width:895px) {
    .columns-area__panels__pane--compositional {
        display: none
    }
}

@media screen and (min-width:895px) {
    .floating-action-button, .search-page .search, .tabs-bar__link.optional {
        display: none
    }
}

@media screen and (max-width:1190px) {
    .columns-area__panels__pane--navigational {
        display: none
    }
}

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

.icon-with-badge {
    position: relative
}

.icon-with-badge__badge {
    position: absolute;
    left: 9px;
    top: -13px;
    background: #2b90d9;
    border: 2px solid #393f4f;
    padding: 1px 6px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 500;
    line-height: 14px;
    color: #fff
}

.column-link--transparent .icon-with-badge__badge {
    border-color: #17191f
}

.compose-panel {
    width: 285px;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    height: calc(100% - 10px);
    overflow-y: hidden
}

.compose-panel .navigation-bar {
    padding-top: 20px;
    padding-bottom: 20px;
    flex: 0 1 48px;
    min-height: 20px
}

.compose-panel .flex-spacer {
    background: transparent
}

.compose-panel .compose-form {
    flex: 1;
    overflow-y: hidden;
    display: flex;
    flex-direction: column;
    min-height: 310px;
    padding-bottom: 71px;
    margin-bottom: -71px
}

.compose-panel .compose-form__autosuggest-wrapper {
    overflow-y: auto;
    background-color: #fff;
    border-radius: 4px 4px 0 0;
    flex: 0 1 auto
}

.compose-panel .autosuggest-textarea__textarea {
    overflow-y: hidden
}

.compose-panel .compose-form__upload-thumbnail {
    height: 80px
}

.navigation-panel {
    margin-top: 10px;
    margin-bottom: 10px;
    height: calc(100% - 20px);
    overflow-y: auto;
    display: flex;
    flex-direction: column
}

.navigation-panel>a {
    flex: 0 0 auto
}

.navigation-panel hr {
    flex: 0 0 auto;
    border: 0;
    border-top: 1px solid #313543;
    margin: 10px 0
}

.navigation-panel .flex-spacer, .navigation-panel hr {
    background: transparent
}

.drawer__pager {
    flex-grow: 1;
    position: relative
}

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

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

.drawer__inner.darker {
    background: #282c37
}

.drawer__inner__mastodon {
    background: #444b5d url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="%23282C37"/></svg>') no-repeat bottom/100% auto;
    flex: 1;
    min-height: 47px;
    display: none
}

.drawer__inner__mastodon>img {
    display: block;
    -o-object-fit: contain;
    font-family: "object-fit:contain;object-position:bottom left";
    object-fit: contain;
    -o-object-position: bottom left;
    object-position: bottom left;
    width: 100%;
    height: 100%;
    pointer-events: none;
    user-drag: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

@media screen and (min-height:640px) {
    .drawer__inner__mastodon {
        display: block
    }
}

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

.drawer__header {
    flex: 0 0 auto;
    font-size: 16px;
    background: #393f4f;
    margin-bottom: 10px;
    display: flex;
    flex-direction: row
}

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

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

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

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

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

.scrollable--flex {
    display: flex;
    flex-direction: column
}

.scrollable__append {
    flex: 1 1 auto;
    position: relative;
    min-height: 120px
}

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

.column-back-button {
    box-sizing: border-box;
    width: 100%;
    background: #313543;
    color: #2b90d9;
    cursor: pointer;
    flex: 0 0 auto;
    font-size: 16px;
    line-height: inherit;
    border: 0;
    text-align: unset;
    padding: 15px;
    margin: 0;
    z-index: 3;
    outline: 0
}

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

.column-header__back-button {
    background: #313543;
    border: 0;
    font-family: inherit;
    color: #2b90d9;
    cursor: pointer;
    white-space: nowrap;
    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;
    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: rgba(0, 0, 0, 0);
    -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;
    transition: opacity .25s
}

.react-toggle-track {
    width: 50px;
    height: 24px;
    padding: 0;
    border-radius: 30px;
    background-color: #282c37;
    transition: background-color .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;
    transition: opacity .25s ease
}

.react-toggle--checked .react-toggle-track-check, .react-toggle-track-x {
    opacity: 1;
    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 {
    position: absolute;
    top: 1px;
    left: 1px;
    width: 22px;
    height: 22px;
    border: 1px solid #282c37;
    border-radius: 50%;
    background-color: #fafafa;
    box-sizing: border-box;
    transition: all .25s ease;
    transition-property: border-color, left
}

.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:active, .column-link:focus, .column-link:hover {
    background: #404657
}

.column-link:focus {
    outline: 0
}

.column-link--transparent {
    background: transparent;
    color: #d9e1e8
}

.column-link--transparent:active, .column-link--transparent:focus, .column-link--transparent:hover {
    background: transparent;
    color: #fff
}

.column-link--transparent.active {
    color: #2b90d9
}

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

.column-link__badge {
    display: inline-block;
    border-radius: 4px;
    line-height: 19px;
    padding: 4px 8px;
    margin: -6px 10px
}

.column-link__badge, .column-subheading {
    font-size: 12px;
    font-weight: 500;
    background: #282c37
}

.column-subheading {
    color: #606984;
    padding: 8px 20px;
    text-transform: uppercase;
    cursor: default
}

.flex-spacer, .getting-started, .getting-started__wrapper {
    background: #282c37
}

.getting-started__wrapper {
    flex: 0 0 auto
}

.flex-spacer {
    flex: 1 1 auto
}

.getting-started {
    color: #606984;
    overflow: auto
}

.getting-started__footer {
    flex: 0 0 auto;
    padding: 20px 10px 10px
}

.getting-started__footer ul {
    margin-bottom: 10px
}

.getting-started__footer ul li {
    display: inline
}

.getting-started__footer p {
    color: #606984;
    font-size: 13px;
    margin-bottom: 20px
}

.getting-started__footer p a {
    color: #606984;
    text-decoration: underline
}

.getting-started__footer a {
    text-decoration: none;
    color: #9baec8
}

.getting-started__footer a:active, .getting-started__footer a:focus, .getting-started__footer a:hover {
    text-decoration: underline
}

.getting-started__trends {
    flex: 0 1 auto;
    opacity: 1;
    -webkit-animation: fade .15s linear;
    animation: fade .15s linear;
    margin-top: 10px
}

.getting-started__trends h4 {
    font-size: 12px;
    text-transform: uppercase;
    color: #9baec8;
    padding: 10px;
    font-weight: 500;
    border-bottom: 1px solid #393f4f
}

@media screen and (max-height:810px) {
    .getting-started__trends .trends__item:nth-child(3) {
        display: none
    }
}

@media screen and (max-height:720px) {
    .getting-started__trends .trends__item:nth-child(2) {
        display: none
    }
}

@media screen and (max-height:670px) {
    .getting-started__trends {
        display: none
    }
}

.getting-started__trends .trends__item {
    border-bottom: 0;
    padding: 10px
}

.getting-started__trends .trends__item__current {
    color: #9baec8
}

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

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

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

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

.setting-text {
    display: block;
    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;
    border-radius: 4px
}

.setting-text:focus {
    outline: 0
}

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

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

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

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

.reduce-motion button.icon-button i.fa-retweet {
    color: #606984;
    transition: color .1s ease-in
}

.reduce-motion button.icon-button.active i.fa-retweet {
    color: #2b90d9
}

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

.status-card__actions {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0
}

.status-card__actions, .status-card__actions>div {
    display: flex;
    justify-content: center;
    align-items: center
}

.status-card__actions>div {
    background: rgba(0, 0, 0, .6);
    border-radius: 8px;
    padding: 12px 9px;
    flex: 0 0 auto
}

.status-card__actions a, .status-card__actions button {
    display: inline;
    color: #d9e1e8;
    background: transparent;
    border: 0;
    padding: 0 8px;
    text-decoration: none;
    font-size: 18px;
    line-height: 18px
}

.status-card__actions a:active, .status-card__actions a:focus, .status-card__actions a:hover, .status-card__actions button:active, .status-card__actions button:focus, .status-card__actions button:hover {
    color: #fff
}

.status-card__actions a {
    font-size: 19px;
    position: relative;
    bottom: -1px
}

a.status-card {
    cursor: pointer
}

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

.status-card-photo {
    cursor: zoom-in;
    display: block;
    text-decoration: none;
    width: 100%;
    height: auto;
    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;
    white-space: nowrap;
    text-decoration: none
}

.status-card__content {
    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;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.status-card__image {
    flex: 0 0 100px;
    background: #393f4f;
    position: relative
}

.status-card__image>.fa {
    font-size: 21px;
    position: absolute;
    transform-origin: 50% 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.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.compact {
    border-color: #313543
}

.status-card.compact.interactive {
    border: 0
}

.status-card.compact .status-card__content {
    padding: 10px 8px 8px
}

.status-card.compact .status-card__title {
    white-space: nowrap
}

.status-card.compact .status-card__image {
    flex: 0 0 60px
}

a.status-card.compact:hover {
    background-color: #313543
}

.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;
    background-size: cover;
    background-position: 50%
}

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

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

.load-gap {
    border-bottom: 1px solid #393f4f
}

.regeneration-indicator {
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    color: #606984;
    background: #282c37;
    cursor: default;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px
}

.regeneration-indicator__figure, .regeneration-indicator__figure img {
    display: block;
    width: auto;
    height: 160px;
    margin: 0
}

.regeneration-indicator--without-header {
    padding-top: 68px
}

.regeneration-indicator__label {
    margin-top: 30px
}

.regeneration-indicator__label strong {
    display: block;
    margin-bottom: 10px;
    color: #606984
}

.regeneration-indicator__label span {
    font-size: 15px;
    font-weight: 400
}

.column-header__wrapper {
    position: relative;
    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: flex;
    font-size: 16px;
    background: #313543;
    flex: 0 0 auto;
    cursor: pointer;
    position: relative;
    z-index: 2;
    outline: 0;
    overflow: hidden
}

.column-header>button {
    margin: 0;
    border: 0;
    padding: 15px 0 15px 15px;
    color: inherit;
    background: transparent;
    font: inherit;
    text-align: left;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    flex: 1
}

.column-header>.column-header__back-button {
    color: #2b90d9
}

.column-header.active {
    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: flex
}

.column-header__links {
    margin-bottom: 14px
}

.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;
    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: #9baec8;
    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
}

.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%;
    transform: translate(-50%, -50%)
}

.loading-indicator span {
    display: block;
    float: left;
    transform: translateX(-50%);
    margin: 82px 0 0 50%;
    white-space: nowrap
}

.loading-indicator__figure {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 42px;
    height: 42px;
    box-sizing: border-box;
    background-color: transparent;
    border: 6px solid #606984;
    border-radius: 50%
}

.no-reduce-motion .loading-indicator span {
    -webkit-animation: loader-label 1.15s cubic-bezier(.215, .61, .355, 1) infinite;
    animation: loader-label 1.15s cubic-bezier(.215, .61, .355, 1) infinite
}

.no-reduce-motion .loading-indicator__figure {
    -webkit-animation: loader-figure 1.15s cubic-bezier(.215, .61, .355, 1) infinite;
    animation: loader-figure 1.15s cubic-bezier(.215, .61, .355, 1) infinite
}

@-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 {
    align-items: center;
    background: #000;
    color: #fff;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    margin-top: 8px;
    position: relative;
    text-align: center;
    z-index: 100
}

.media-spoiler {
    background: #000;
    color: #9baec8;
    border: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    border-radius: 4px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

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

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

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

.spoiler-button {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 100
}

.spoiler-button--minified {
    display: block;
    left: 4px;
    top: 4px;
    width: auto;
    height: auto
}

.spoiler-button--click-thru {
    pointer-events: none
}

.spoiler-button--hidden {
    display: none
}

.spoiler-button__overlay {
    display: block;
    background: transparent;
    width: 100%;
    height: 100%;
    border: 0
}

.spoiler-button__overlay__label {
    display: inline-block;
    background: rgba(0, 0, 0, .5);
    border-radius: 8px;
    padding: 8px 12px;
    color: #fff;
    font-weight: 500;
    font-size: 14px
}

.spoiler-button__overlay:active .spoiler-button__overlay__label, .spoiler-button__overlay:focus .spoiler-button__overlay__label, .spoiler-button__overlay:hover .spoiler-button__overlay__label {
    background: rgba(0, 0, 0, .8)
}

.spoiler-button__overlay:disabled .spoiler-button__overlay__label {
    background: rgba(0, 0, 0, .5)
}

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

.account--panel {
    background: #313543;
    border-top: 1px solid #393f4f;
    border-bottom: 1px solid #393f4f;
    display: flex;
    flex-direction: row;
    padding: 10px 0
}

.account--panel__button, .detailed-status__button {
    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__hashtags .column-settings__row {
    margin-bottom: 15px
}

.column-settings__hashtags .column-select__control {
    outline: 0;
    box-sizing: border-box;
    width: 100%;
    border: 0;
    box-shadow: none;
    font-family: inherit;
    background: #282c37;
    color: #9baec8;
    font-size: 14px;
    margin: 0
}

.column-settings__hashtags .column-select__control::-webkit-input-placeholder {
    color: #a8b9cf
}

.column-settings__hashtags .column-select__control::-moz-placeholder {
    color: #a8b9cf
}

.column-settings__hashtags .column-select__control:-ms-input-placeholder {
    color: #a8b9cf
}

.column-settings__hashtags .column-select__control::-ms-input-placeholder {
    color: #a8b9cf
}

.column-settings__hashtags .column-select__control::placeholder {
    color: #a8b9cf
}

.column-settings__hashtags .column-select__control::-moz-focus-inner {
    border: 0
}

.column-settings__hashtags .column-select__control::-moz-focus-inner, .column-settings__hashtags .column-select__control:active, .column-settings__hashtags .column-select__control:focus {
    outline: 0!important
}

.column-settings__hashtags .column-select__control:focus {
    background: #313543
}

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

.column-settings__hashtags .column-select__placeholder {
    color: #606984;
    padding-left: 2px;
    font-size: 12px
}

.column-settings__hashtags .column-select__value-container {
    padding-left: 6px
}

.column-settings__hashtags .column-select__multi-value {
    background: #393f4f
}

.column-settings__hashtags .column-select__multi-value__remove {
    cursor: pointer
}

.column-settings__hashtags .column-select__multi-value__remove:active, .column-settings__hashtags .column-select__multi-value__remove:focus, .column-settings__hashtags .column-select__multi-value__remove:hover {
    background: #42485a;
    color: #a8b9cf
}

.column-settings__hashtags .column-select__input, .column-settings__hashtags .column-select__multi-value__label {
    color: #9baec8
}

.column-settings__hashtags .column-select__clear-indicator, .column-settings__hashtags .column-select__dropdown-indicator {
    cursor: pointer;
    transition: none;
    color: #606984
}

.column-settings__hashtags .column-select__clear-indicator:active, .column-settings__hashtags .column-select__clear-indicator:focus, .column-settings__hashtags .column-select__clear-indicator:hover, .column-settings__hashtags .column-select__dropdown-indicator:active, .column-settings__hashtags .column-select__dropdown-indicator:focus, .column-settings__hashtags .column-select__dropdown-indicator:hover {
    color: #687390
}

.column-settings__hashtags .column-select__indicator-separator {
    background-color: #393f4f
}

.column-settings__hashtags .column-select__menu {
    background: #fff;
    border-radius: 4px;
    margin-top: 10px;
    color: #9baec8;
    box-shadow: 2px 4px 15px rgba(0, 0, 0, .4);
    padding: 0;
    background: #d9e1e8
}

.column-settings__hashtags .column-select__menu h4 {
    text-transform: uppercase;
    color: #9baec8;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 10px
}

.column-settings__hashtags .column-select__menu li {
    padding: 4px 0
}

.column-settings__hashtags .column-select__menu ul {
    margin-bottom: 10px
}

.column-settings__hashtags .column-select__menu em {
    font-weight: 500;
    color: #282c37
}

.column-settings__hashtags .column-select__menu-list {
    padding: 6px
}

.column-settings__hashtags .column-select__option {
    color: #282c37;
    border-radius: 4px;
    font-size: 14px
}

.column-settings__hashtags .column-select__option--is-focused, .column-settings__hashtags .column-select__option--is-selected {
    background: #b9c8d5
}

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

.relationship-tag {
    color: #fff;
    margin-bottom: 4px;
    display: block;
    vertical-align: top;
    background-color: #000;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 500;
    padding: 4px;
    border-radius: 4px;
    opacity: .7
}

.relationship-tag:hover {
    opacity: 1
}

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

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

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

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

.empty-column-indicator>span, .error-column>span {
    max-width: 400px
}

.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 {
    flex-direction: column
}

@-webkit-keyframes heartbeat {
    0% {
        transform: scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
    10% {
        transform: scale(.91);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
    17% {
        transform: scale(.98);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
    33% {
        transform: scale(.87);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
    45% {
        transform: scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
}

@keyframes heartbeat {
    0% {
        transform: scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
    10% {
        transform: scale(.91);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
    17% {
        transform: scale(.98);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
    33% {
        transform: scale(.87);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
    45% {
        transform: scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
}

.no-reduce-motion .pulse-loading {
    transform-origin: center center;
    -webkit-animation: heartbeat 1.5s ease-in-out infinite both;
    animation: heartbeat 1.5s ease-in-out infinite both
}

@-webkit-keyframes shake-bottom {
    0%, to {
        transform: rotate(0deg);
        transform-origin: 50% 100%
    }
    10% {
        transform: rotate(2deg)
    }
    20%, 40%, 60% {
        transform: rotate(-4deg)
    }
    30%, 50%, 70% {
        transform: rotate(4deg)
    }
    80% {
        transform: rotate(-2deg)
    }
    90% {
        transform: rotate(2deg)
    }
}

@keyframes shake-bottom {
    0%, to {
        transform: rotate(0deg);
        transform-origin: 50% 100%
    }
    10% {
        transform: rotate(2deg)
    }
    20%, 40%, 60% {
        transform: rotate(-4deg)
    }
    30%, 50%, 70% {
        transform: rotate(4deg)
    }
    80% {
        transform: rotate(-2deg)
    }
    90% {
        transform: rotate(2deg)
    }
}

.no-reduce-motion .shake-bottom {
    transform-origin: 50% 100%;
    -webkit-animation: shake-bottom .8s cubic-bezier(.455, .03, .515, .955) 2s 2 both;
    animation: shake-bottom .8s cubic-bezier(.455, .03, .515, .955) 2s 2 both
}

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

.emoji-picker-dropdown__menu .emoji-mart-scroll {
    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;
    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 {
    align-items: center;
    background: rgba(0, 0, 0, .8);
    display: flex;
    height: 100%;
    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: flex;
    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;
    box-shadow: 0 0 5px rgba(0, 0, 0, .2)
}

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

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

.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 {
    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;
    width: 22px;
    height: 22px;
    margin: 2px 0 0
}

.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;
    box-shadow: 2px 4px 15px rgba(0, 0, 0, .4);
    border-radius: 4px;
    margin-left: 40px;
    overflow: hidden
}

.privacy-dropdown__dropdown.top {
    transform-origin: 50% 100%
}

.privacy-dropdown__dropdown.bottom {
    transform-origin: 50% 0
}

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

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

.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: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px
}

.privacy-dropdown__option__content {
    flex: 1 1 auto;
    color: #606984
}

.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;
    box-shadow: 0 -4px 4px rgba(0, 0, 0, .1)
}

.privacy-dropdown.active .privacy-dropdown__value .icon-button {
    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.top .privacy-dropdown__value {
    border-radius: 0 0 4px 4px
}

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

.search {
    position: relative
}

.search__input {
    outline: 0;
    box-sizing: border-box;
    width: 100%;
    border: 0;
    box-shadow: none;
    font-family: inherit;
    background: #282c37;
    color: #9baec8;
    font-size: 14px;
    margin: 0;
    display: block;
    padding: 15px 30px 15px 15px;
    line-height: 18px;
    font-size: 16px
}

.search__input::-webkit-input-placeholder {
    color: #a8b9cf
}

.search__input::-moz-placeholder {
    color: #a8b9cf
}

.search__input:-ms-input-placeholder {
    color: #a8b9cf
}

.search__input::-ms-input-placeholder {
    color: #a8b9cf
}

.search__input::placeholder {
    color: #a8b9cf
}

.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::-moz-focus-inner {
    border: 0
}

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

.search__icon .fa {
    position: absolute;
    top: 16px;
    right: 10px;
    z-index: 2;
    display: inline-block;
    opacity: 0;
    transition: all .1s linear;
    transition-property: transform, opacity;
    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 {
    transform: rotate(90deg)
}

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

.search__icon .fa-times-circle {
    top: 17px;
    transform: rotate(0deg);
    color: #606984;
    cursor: pointer
}

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

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

.search-results__header {
    color: #606984;
    background: #2c313d;
    padding: 15px;
    font-weight: 500;
    font-size: 16px;
    cursor: default
}

.search-results__header .fa {
    display: inline-block;
    margin-right: 5px
}

.search-results__section {
    margin-bottom: 5px
}

.search-results__section h5 {
    background: #1f232b;
    border-bottom: 1px solid #393f4f;
    cursor: default;
    display: flex;
    padding: 15px;
    font-weight: 500;
    font-size: 16px;
    color: #606984
}

.search-results__section h5 .fa {
    display: inline-block;
    margin-right: 5px
}

.search-results__section .account:last-child, .search-results__section>div:last-child .status {
    border-bottom: 0
}

.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
}

.search-results__info {
    padding: 20px;
    color: #9baec8;
    text-align: center
}

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

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

.modal-root__container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    align-content: space-around;
    z-index: 9999;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.modal-root__modal {
    pointer-events: auto;
    display: flex;
    z-index: 9999
}

.video-modal__container {
    max-width: 100vw;
    max-height: 100vh
}

.audio-modal__container {
    width: 50vw
}

.media-modal {
    width: 100%;
    height: 100%;
    position: relative
}

.media-modal .extended-video-player {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center
}

.media-modal .extended-video-player video {
    max-width: 100%;
    max-height: 80%
}

.media-modal__closer, .media-modal__navigation {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0
}

.media-modal__navigation {
    pointer-events: none;
    transition: opacity .3s linear;
    will-change: opacity
}

.media-modal__navigation * {
    pointer-events: auto
}

.media-modal__navigation.media-modal__navigation--hidden {
    opacity: 0
}

.media-modal__navigation.media-modal__navigation--hidden * {
    pointer-events: none
}

.media-modal__nav {
    background: rgba(0, 0, 0, .5);
    box-sizing: border-box;
    border: 0;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    font-size: 24px;
    height: 20vmax;
    margin: auto 0;
    padding: 30px 15px;
    position: absolute;
    top: 0;
    bottom: 0
}

.media-modal__nav--left {
    left: 0
}

.media-modal__nav--right {
    right: 0
}

.media-modal__meta, .media-modal__pagination {
    width: 100%;
    text-align: center;
    position: absolute;
    left: 0;
    bottom: 20px;
    pointer-events: none
}

.media-modal__meta--shifted {
    bottom: 62px
}

.media-modal__meta a {
    pointer-events: auto;
    text-decoration: none;
    font-weight: 500;
    color: #d9e1e8
}

.media-modal__meta a:active, .media-modal__meta a:focus, .media-modal__meta a:hover {
    text-decoration: underline
}

.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: 8px;
    top: 8px;
    z-index: 100
}

.embed-modal, .error-modal, .onboarding-modal {
    background: #d9e1e8;
    color: #282c37;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column
}

.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%;
    box-sizing: border-box;
    padding: 25px;
    display: none;
    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 {
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.error-modal__body {
    display: flex;
    text-align: center
}

.error-modal__footer, .onboarding-modal__paginator {
    flex: 0 0 auto;
    background: #c0cdd9;
    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: #606984;
    border: 0;
    font-size: 14px;
    font-weight: 500;
    padding: 10px 25px;
    line-height: inherit;
    height: auto;
    margin: -10px;
    border-radius: 4px;
    background-color: transparent
}

.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: #576078;
    background-color: #a6b9c9
}

.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: #282c37
}

.error-modal__footer .error-modal__nav.onboarding-modal__done:active, .error-modal__footer .error-modal__nav.onboarding-modal__done:focus, .error-modal__footer .error-modal__nav.onboarding-modal__done:hover, .error-modal__footer .error-modal__nav.onboarding-modal__next:active, .error-modal__footer .error-modal__nav.onboarding-modal__next:focus, .error-modal__footer .error-modal__nav.onboarding-modal__next:hover, .error-modal__footer .onboarding-modal__nav.onboarding-modal__done:active, .error-modal__footer .onboarding-modal__nav.onboarding-modal__done:focus, .error-modal__footer .onboarding-modal__nav.onboarding-modal__done:hover, .error-modal__footer .onboarding-modal__nav.onboarding-modal__next:active, .error-modal__footer .onboarding-modal__nav.onboarding-modal__next:focus, .error-modal__footer .onboarding-modal__nav.onboarding-modal__next:hover, .onboarding-modal__paginator .error-modal__nav.onboarding-modal__done:active, .onboarding-modal__paginator .error-modal__nav.onboarding-modal__done:focus, .onboarding-modal__paginator .error-modal__nav.onboarding-modal__done:hover, .onboarding-modal__paginator .error-modal__nav.onboarding-modal__next:active, .onboarding-modal__paginator .error-modal__nav.onboarding-modal__next:focus, .onboarding-modal__paginator .error-modal__nav.onboarding-modal__next:hover, .onboarding-modal__paginator .onboarding-modal__nav.onboarding-modal__done:active, .onboarding-modal__paginator .onboarding-modal__nav.onboarding-modal__done:focus, .onboarding-modal__paginator .onboarding-modal__nav.onboarding-modal__done:hover, .onboarding-modal__paginator .onboarding-modal__nav.onboarding-modal__next:active, .onboarding-modal__paginator .onboarding-modal__nav.onboarding-modal__next:focus, .onboarding-modal__paginator .onboarding-modal__nav.onboarding-modal__next:hover {
    color: #313543
}

.error-modal__footer {
    justify-content: center
}

.display-case {
    text-align: center;
    font-size: 15px;
    margin-bottom: 15px
}

.display-case__label {
    font-weight: 500;
    color: #282c37;
    margin-bottom: 5px;
    text-transform: uppercase;
    font-size: 12px
}

.display-case__case {
    background: #282c37;
    color: #d9e1e8;
    font-weight: 500;
    padding: 10px;
    border-radius: 4px
}

.onboard-sliders {
    display: inline-block;
    max-width: 30px;
    max-height: auto;
    margin-left: 10px
}

.actions-modal, .block-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;
    flex-direction: column
}

.actions-modal .status__display-name, .block-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, .block-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__content__spoiler-link, .block-modal .status__content__spoiler-link, .boost-modal .status__content__spoiler-link, .confirmation-modal .status__content__spoiler-link, .mute-modal .status__content__spoiler-link, .report-modal .status__content__spoiler-link {
    color: #f2f5f7
}

.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
}

.block-modal__action-bar, .boost-modal__action-bar, .confirmation-modal__action-bar, .mute-modal__action-bar {
    display: flex;
    justify-content: space-between;
    background: #d9e1e8;
    padding: 10px;
    line-height: 36px
}

.block-modal__action-bar>div, .boost-modal__action-bar>div, .confirmation-modal__action-bar>div, .mute-modal__action-bar>div {
    flex: 1 1 auto;
    text-align: right;
    color: #606984;
    padding-right: 10px
}

.block-modal__action-bar .button, .boost-modal__action-bar .button, .confirmation-modal__action-bar .button, .mute-modal__action-bar .button {
    flex: 0 0 auto
}

.boost-modal__status-header {
    font-size: 15px
}

.boost-modal__status-time {
    float: right;
    font-size: 14px
}

.block-modal, .mute-modal {
    line-height: 24px
}

.block-modal .react-toggle, .mute-modal .react-toggle {
    vertical-align: middle
}

.report-modal {
    width: 90vw;
    max-width: 700px
}

.report-modal__container {
    display: flex;
    border-top: 1px solid #d9e1e8
}

@media screen and (max-width:480px) {
    .report-modal__container {
        flex-wrap: wrap;
        overflow-y: auto
    }
}

.report-modal__comment, .report-modal__statuses {
    box-sizing: border-box;
    width: 50%
}

@media screen and (max-width:480px) {
    .report-modal__comment, .report-modal__statuses {
        width: 100%
    }
}

.focal-point-modal__content, .report-modal__statuses {
    flex: 1 1 auto;
    min-height: 20vh;
    max-height: 80vh;
    overflow-y: auto;
    overflow-x: hidden
}

.focal-point-modal__content .status__content a, .report-modal__statuses .status__content a {
    color: #2b90d9
}

.focal-point-modal__content .status__content, .focal-point-modal__content .status__content p, .report-modal__statuses .status__content, .report-modal__statuses .status__content p {
    color: #282c37
}

@media screen and (max-width:480px) {
    .focal-point-modal__content, .report-modal__statuses {
        max-height: 10vh
    }
}

@media screen and (max-width:480px) {
    .focal-point-modal__content {
        max-height: 40vh
    }
}

.report-modal__comment {
    padding: 20px;
    border-right: 1px solid #d9e1e8;
    max-width: 320px
}

.report-modal__comment p {
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 20px
}

.report-modal__comment .setting-text {
    display: block;
    box-sizing: border-box;
    width: 100%;
    color: #282c37;
    background: #fff;
    padding: 10px;
    font-family: inherit;
    font-size: 14px;
    resize: none;
    outline: 0;
    border-radius: 4px;
    border: 1px solid #d9e1e8;
    min-height: 100px;
    max-height: 50vh;
    margin: 0 0 10px
}

.report-modal__comment .setting-text:focus {
    border: 1px solid #c0cdd9
}

.report-modal__comment .setting-text__wrapper {
    background: #fff;
    border: 1px solid #d9e1e8;
    margin-bottom: 10px;
    border-radius: 4px
}

.report-modal__comment .setting-text__wrapper .setting-text {
    border: 0;
    margin-bottom: 0;
    border-radius: 0
}

.report-modal__comment .setting-text__wrapper .setting-text:focus {
    border: 0
}

.report-modal__comment .setting-text__wrapper__modifiers {
    color: #282c37;
    font-family: inherit;
    font-size: 14px;
    background: #fff
}

.report-modal__comment .setting-text__toolbar {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px
}

.report-modal__comment .setting-text-label {
    display: block;
    color: #282c37;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 10px
}

.report-modal__comment .setting-toggle {
    margin-top: 20px;
    margin-bottom: 24px
}

.report-modal__comment .setting-toggle__label {
    color: #282c37;
    font-size: 14px
}

@media screen and (max-width:480px) {
    .report-modal__comment {
        padding: 10px;
        max-width: 100%;
        order: 2
    }
    .report-modal__comment .setting-toggle {
        margin-bottom: 4px
    }
}

.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;
    flex-shrink: 0;
    max-height: 80vh
}

.actions-modal ul.with-status {
    max-height: calc(80vh - 75px)
}

.actions-modal ul li:empty {
    margin: 0
}

.actions-modal ul li:not(:empty) a {
    color: #282c37;
    display: flex;
    padding: 12px 16px;
    font-size: 15px;
    align-items: center;
    text-decoration: none
}

.actions-modal ul li:not(:empty) a, .actions-modal ul li:not(:empty) a button {
    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
}

.block-modal__action-bar .confirmation-modal__secondary-button, .confirmation-modal__action-bar .confirmation-modal__secondary-button, .mute-modal__action-bar .confirmation-modal__secondary-button {
    flex-shrink: 1
}

.block-modal__cancel-button, .confirmation-modal__cancel-button, .confirmation-modal__secondary-button, .mute-modal__cancel-button {
    background-color: transparent;
    color: #606984;
    font-size: 14px;
    font-weight: 500
}

.block-modal__cancel-button:active, .block-modal__cancel-button:focus, .block-modal__cancel-button:hover, .confirmation-modal__cancel-button:active, .confirmation-modal__cancel-button:focus, .confirmation-modal__cancel-button:hover, .confirmation-modal__secondary-button:active, .confirmation-modal__secondary-button:focus, .confirmation-modal__secondary-button:hover, .mute-modal__cancel-button:active, .mute-modal__cancel-button:focus, .mute-modal__cancel-button:hover {
    color: #576078;
    background-color: transparent
}

.block-modal__container, .confirmation-modal__container, .mute-modal__container, .report-modal__target {
    padding: 30px;
    font-size: 16px
}

.block-modal__container strong, .confirmation-modal__container strong, .mute-modal__container strong, .report-modal__target strong {
    font-weight: 500
}

.block-modal__container strong:lang(ja), .block-modal__container strong:lang(ko), .block-modal__container strong:lang(zh-CN), .block-modal__container strong:lang(zh-HK), .block-modal__container strong:lang(zh-TW), .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
}

.confirmation-modal__container, .report-modal__target {
    text-align: center
}

.block-modal__explanation, .mute-modal__explanation {
    margin-top: 20px
}

.block-modal .setting-toggle, .mute-modal .setting-toggle {
    margin-top: 20px;
    margin-bottom: 24px;
    display: flex;
    align-items: center
}

.block-modal .setting-toggle__label, .mute-modal .setting-toggle__label {
    color: #282c37;
    margin: 0 0 0 8px
}

.report-modal__target {
    padding: 15px
}

.report-modal__target .media-modal__close {
    top: 14px;
    right: 15px
}

.loading-bar {
    background-color: #2b90d9;
    height: 3px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999
}

.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;
    transition: opacity .1s ease;
    line-height: 18px
}

.media-gallery__gifv.autoplay .media-gallery__gifv__label {
    display: none
}

.media-gallery__gifv:hover .media-gallery__gifv__label {
    opacity: 1
}

.attachment-list {
    display: flex;
    font-size: 14px;
    border: 1px solid #393f4f;
    border-radius: 4px;
    margin-top: 14px;
    overflow: hidden
}

.attachment-list__icon {
    flex: 0 0 auto;
    color: #606984;
    padding: 8px 18px;
    cursor: default;
    border-right: 1px solid #393f4f;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 26px
}

.attachment-list__icon .fa {
    display: block
}

.attachment-list__list {
    list-style: none;
    padding: 4px 0 4px 8px;
    display: flex;
    flex-direction: column;
    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
}

.attachment-list.compact {
    border: 0;
    margin-top: 4px
}

.attachment-list.compact .attachment-list__list {
    padding: 0;
    display: block
}

.attachment-list.compact .fa {
    color: #606984
}

.media-gallery {
    margin-top: 8px;
    border-radius: 4px;
    width: 100%
}

.media-gallery, .media-gallery__item {
    box-sizing: border-box;
    overflow: hidden;
    position: relative
}

.media-gallery__item {
    border: 0;
    display: block;
    float: left;
    border-radius: 4px
}

.media-gallery__item.standalone .media-gallery__item-gifv-thumbnail {
    transform: none;
    top: 0
}

.media-gallery__item-thumbnail {
    cursor: zoom-in;
    display: block;
    text-decoration: none;
    color: #d9e1e8;
    position: relative;
    z-index: 1
}

.media-gallery__item-thumbnail, .media-gallery__item-thumbnail img {
    height: 100%;
    width: 100%
}

.media-gallery__item-thumbnail img, .media-gallery__preview {
    -o-object-fit: cover;
    font-family: "object-fit:cover";
    object-fit: cover
}

.media-gallery__preview {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    background: #000
}

.media-gallery__preview--hidden {
    display: none
}

.media-gallery__gifv {
    height: 100%;
    overflow: hidden;
    position: relative;
    width: 100%
}

.media-gallery__item-gifv-thumbnail {
    cursor: zoom-in;
    height: 100%;
    -o-object-fit: cover;
    font-family: "object-fit:cover";
    object-fit: cover;
    position: relative;
    top: 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
}

.detailed .video-player__volume:before, .detailed .video-player__volume__current, .fullscreen .video-player__volume:before, .fullscreen .video-player__volume__current {
    bottom: 27px
}

.detailed .video-player__volume__handle, .fullscreen .video-player__volume__handle {
    bottom: 23px
}

.audio-player {
    box-sizing: border-box;
    position: relative;
    background: #17191f;
    border-radius: 4px;
    padding-bottom: 44px;
    direction: ltr
}

.audio-player.editable {
    border-radius: 0;
    height: 100%
}

.audio-player__waveform {
    padding: 15px 0;
    position: relative;
    overflow: hidden
}

.audio-player__waveform:before {
    content: "";
    display: block;
    position: absolute;
    border-top: 1px solid #313543;
    width: 100%;
    height: 0;
    left: 0;
    top: calc(50% + 1px)
}

.audio-player__progress-placeholder {
    background-color: rgba(78, 162, 223, .5)
}

.audio-player__wave-placeholder {
    background-color: #4a5266
}

.audio-player .video-player__controls {
    padding: 10px 15px 0;
    background: #17191f;
    border-top: 1px solid #313543;
    border-radius: 0 0 4px 4px
}

.video-player {
    overflow: hidden;
    position: relative;
    background: #000;
    max-width: 100%;
    border-radius: 4px;
    box-sizing: border-box;
    direction: ltr
}

.video-player.editable {
    border-radius: 0;
    height: 100%!important
}

.video-player:focus {
    outline: 0
}

.video-player video {
    max-width: 100vw;
    max-height: 80vh;
    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;
    width: 100%!important;
    height: 100%!important
}

.video-player.inline video {
    -o-object-fit: contain;
    font-family: "object-fit:contain";
    object-fit: contain;
    position: relative;
    top: 50%;
    transform: translateY(-50%)
}

.video-player__controls {
    position: absolute;
    z-index: 2;
    bottom: 0;
    left: 0;
    right: 0;
    box-sizing: border-box;
    background: linear-gradient(0deg, rgba(0, 0, 0, .85), rgba(0, 0, 0, .45) 60%, transparent);
    padding: 0 15px;
    opacity: 0;
    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;
    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: #b2c1d5
}

.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: flex;
    justify-content: space-between;
    padding-bottom: 10px
}

.video-player__buttons {
    font-size: 16px;
    white-space: nowrap;
    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: 60px
}

.video-player__time-sep {
    display: inline-block;
    margin: 0 6px
}

.video-player__time-sep, .video-player__time-total {
    color: #fff
}

.video-player__volume {
    cursor: pointer;
    height: 24px;
    display: inline
}

.video-player__volume:before {
    content: "";
    width: 50px;
    background: hsla(0, 0%, 100%, .35)
}

.video-player__volume:before, .video-player__volume__current {
    border-radius: 4px;
    display: block;
    position: absolute;
    height: 4px;
    left: 70px;
    bottom: 20px
}

.video-player__volume__current {
    background: #4ea2df
}

.video-player__volume__handle {
    position: absolute;
    z-index: 3;
    border-radius: 50%;
    width: 12px;
    height: 12px;
    bottom: 16px;
    left: 70px;
    transition: opacity .1s ease;
    background: #4ea2df;
    box-shadow: 1px 2px 6px rgba(0, 0, 0, .2);
    pointer-events: none
}

.video-player__link {
    padding: 2px 10px
}

.video-player__link a {
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    color: #fff
}

.video-player__link a:active, .video-player__link a:focus, .video-player__link a:hover {
    text-decoration: underline
}

.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;
    transition: opacity .1s ease;
    background: #4ea2df;
    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
}

.directory__list {
    width: 100%;
    margin: 10px 0;
    transition: opacity .1s ease-in
}

.directory__list.loading {
    opacity: .7
}

@media screen and (max-width:415px) {
    .directory__list {
        margin: 0
    }
}

.directory__card {
    box-sizing: border-box;
    margin-bottom: 10px
}

.directory__card__img {
    height: 125px;
    position: relative;
    background: #0e1014;
    overflow: hidden
}

.directory__card__img img {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    -o-object-fit: cover;
    font-family: "object-fit:cover";
    object-fit: cover
}

.directory__card__bar {
    display: flex;
    align-items: center;
    background: #313543;
    padding: 10px
}

.directory__card__bar__name {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    text-decoration: none;
    overflow: hidden
}

.directory__card__bar__relationship {
    width: 23px;
    min-height: 1px;
    flex: 0 0 auto
}

.directory__card__bar .avatar {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    padding-top: 2px
}

.directory__card__bar .avatar img {
    width: 100%;
    height: 100%;
    display: block;
    margin: 0;
    border-radius: 4px;
    background: #17191f;
    -o-object-fit: cover;
    font-family: "object-fit:cover";
    object-fit: cover
}

.directory__card__bar .display-name {
    margin-left: 15px;
    text-align: left
}

.directory__card__bar .display-name strong {
    font-size: 15px;
    color: #fff;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis
}

.directory__card__bar .display-name span {
    display: block;
    font-size: 14px;
    color: #9baec8;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis
}

.directory__card__extra {
    background: #282c37;
    display: flex;
    align-items: center;
    justify-content: center
}

.directory__card__extra .accounts-table__count {
    width: 33.33%;
    flex: 0 0 auto;
    padding: 15px 0
}

.directory__card__extra .account__header__content {
    box-sizing: border-box;
    padding: 15px 10px;
    border-bottom: 1px solid #393f4f;
    width: 100%;
    min-height: 48px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.directory__card__extra .account__header__content p {
    display: none
}

.directory__card__extra .account__header__content p:first-child {
    display: inline
}

.directory__card__extra .account__header__content br {
    display: none
}

.account-gallery__container {
    display: flex;
    flex-wrap: wrap;
    padding: 4px 2px
}

.account-gallery__item {
    border: 0;
    box-sizing: border-box;
    display: block;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    margin: 2px
}

.account-gallery__item__icons {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px
}

.account__section-headline, .notification__filter-bar {
    background: #1f232b;
    border-bottom: 1px solid #393f4f;
    cursor: default;
    display: flex;
    flex-shrink: 0
}

.account__section-headline button, .notification__filter-bar button {
    background: #1f232b;
    border: 0;
    margin: 0
}

.account__section-headline a, .account__section-headline button, .notification__filter-bar a, .notification__filter-bar button {
    display: block;
    flex: 1 1 auto;
    color: #9baec8;
    padding: 15px 0;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    position: relative
}

.account__section-headline a.active, .account__section-headline button.active, .notification__filter-bar a.active, .notification__filter-bar button.active {
    color: #d9e1e8
}

.account__section-headline a.active:after, .account__section-headline a.active:before, .account__section-headline button.active:after, .account__section-headline button.active:before, .notification__filter-bar a.active:after, .notification__filter-bar a.active:before, .notification__filter-bar button.active:after, .notification__filter-bar button.active:before {
    display: block;
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 0;
    transform: translateX(-50%);
    border-color: transparent transparent #393f4f;
    border-style: solid;
    border-width: 0 10px 10px
}

.account__section-headline a.active:after, .account__section-headline button.active:after, .notification__filter-bar a.active:after, .notification__filter-bar button.active:after {
    bottom: -1px;
    border-color: transparent transparent #282c37
}

.account__section-headline.directory__section-headline, .notification__filter-bar.directory__section-headline {
    background: #242731;
    border-bottom-color: transparent
}

.account__section-headline.directory__section-headline a.active:before, .account__section-headline.directory__section-headline button.active:before, .notification__filter-bar.directory__section-headline a.active:before, .notification__filter-bar.directory__section-headline button.active:before {
    display: none
}

.account__section-headline.directory__section-headline a.active:after, .account__section-headline.directory__section-headline button.active:after, .notification__filter-bar.directory__section-headline a.active:after, .notification__filter-bar.directory__section-headline button.active:after {
    border-color: transparent transparent #191b22
}

.filter-form {
    background: #282c37
}

.filter-form__column {
    padding: 10px 15px
}

.filter-form .radio-button {
    display: block
}

.radio-button {
    font-size: 14px;
    position: relative;
    display: inline-block;
    padding: 6px 0;
    line-height: 18px;
    cursor: default;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer
}

.radio-button input[type=checkbox], .radio-button input[type=radio] {
    display: none
}

.radio-button__input {
    display: inline-block;
    position: relative;
    border: 1px solid #9baec8;
    box-sizing: border-box;
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    margin-right: 10px;
    top: -1px;
    border-radius: 50%;
    vertical-align: middle
}

.radio-button__input.checked {
    border-color: #4ea2df;
    background: #4ea2df
}

::-webkit-scrollbar-thumb {
    border-radius: 0
}

.search-popout {
    background: #fff;
    border-radius: 4px;
    padding: 10px 14px 14px;
    margin-top: 10px;
    color: #9baec8;
    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;
        transition: margin-top .4s .1s
    }
    .navigation-bar {
        will-change: padding-bottom;
        transition: padding-bottom .4s .1s
    }
    .navigation-bar>a:first-child {
        will-change: margin-top, margin-left, margin-right, width;
        transition: margin-top .4s .1s, margin-left .4s .5s, margin-right .4s .5s
    }
    .navigation-bar>.navigation-bar__profile-edit {
        will-change: margin-top;
        transition: margin-top .4s .1s
    }
    .navigation-bar .navigation-bar__actions>.icon-button.close {
        will-change: opacity transform;
        transition: opacity .2s .1s, transform .4s .1s
    }
    .navigation-bar .navigation-bar__actions>.compose__action-bar .icon-button {
        will-change: opacity transform;
        transition: opacity .2s .3s, transform .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: -100px 10px 0 -50px
    }
    .is-composing .navigation-bar .navigation-bar__profile {
        padding-top: 2px
    }
    .is-composing .navigation-bar .navigation-bar__profile-edit {
        position: absolute;
        margin-top: -60px
    }
    .is-composing .navigation-bar .navigation-bar__actions .icon-button.close {
        pointer-events: auto;
        opacity: 1;
        transform: scale(1) translate(0);
        bottom: 5px
    }
    .is-composing .navigation-bar .navigation-bar__actions .compose__action-bar .icon-button {
        pointer-events: none;
        opacity: 0;
        transform: scaleX(0) translate(100%)
    }
}

.embed-modal {
    width: auto;
    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 {
    outline: 0;
    box-sizing: border-box;
    display: block;
    width: 100%;
    border: 0;
    padding: 10px;
    font-family: "mastodon-font-monospace", monospace;
    background: #282c37;
    color: #fff;
    font-size: 14px;
    margin: 0 0 15px;
    border-radius: 4px
}

.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;
    border-radius: 4px
}

.account__moved-note {
    padding: 14px 10px 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: 0 0 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: 15px 0 15px 15px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background: #313543
}

.column-inline-form label {
    flex: 1 1 auto
}

.column-inline-form label input {
    width: 100%
}

.column-inline-form label input:focus {
    outline: 0
}

.column-inline-form .icon-button {
    flex: 0 0 auto;
    margin: 0 10px
}

.drawer__backdrop {
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .5)
}

.list-editor {
    background: #282c37;
    flex-direction: column;
    border-radius: 8px;
    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);
    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
}

.list-adder {
    background: #282c37;
    flex-direction: column;
    border-radius: 8px;
    box-shadow: 2px 4px 15px rgba(0, 0, 0, .4);
    width: 380px;
    overflow: hidden
}

@media screen and (max-width:420px) {
    .list-adder {
        width: 90%
    }
}

.list-adder__account {
    background: #444b5d
}

.list-adder__lists {
    background: #444b5d;
    height: 50vh;
    border-radius: 0 0 8px 8px;
    overflow-y: auto
}

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

.list-adder .list__wrapper {
    display: flex
}

.list-adder .list__display-name {
    flex: 1 1 auto;
    overflow: hidden;
    text-decoration: none;
    font-size: 16px;
    padding: 10px
}

.focal-point {
    position: relative;
    cursor: move;
    overflow: hidden;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #000
}

.focal-point canvas, .focal-point img, .focal-point video {
    display: block;
    max-height: 80vh;
    width: 100%;
    height: auto;
    margin: 0;
    -o-object-fit: contain;
    font-family: "object-fit:contain";
    object-fit: contain;
    background: #000
}

.focal-point__reticle {
    position: absolute;
    width: 100px;
    height: 100px;
    transform: translate(-50%, -50%);
    background: url(/packs/media/images/reticle-6490ecbb61185e86e62dca0845cf2dcf.png) no-repeat 0 0;
    border-radius: 50%;
    box-shadow: 0 0 0 9999em rgba(0, 0, 0, .35)
}

.focal-point__overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0
}

.focal-point__preview {
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 2;
    cursor: move;
    transition: opacity .1s ease
}

.focal-point__preview:hover {
    opacity: .5
}

.focal-point__preview strong {
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    display: block;
    margin-bottom: 5px
}

.focal-point__preview div {
    border-radius: 4px;
    box-shadow: 0 0 14px rgba(0, 0, 0, .2)
}

@media screen and (max-width:480px) {
    .focal-point img, .focal-point video {
        max-height: 100%
    }
    .focal-point__preview {
        display: 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 {
    overflow: hidden
}

.account__header.inactive {
    opacity: .5
}

.account__header.inactive .account__avatar, .account__header.inactive .account__header__image {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%)
}

.account__header__info {
    position: absolute;
    top: 10px;
    left: 10px
}

.account__header__image {
    overflow: hidden;
    height: 145px;
    position: relative;
    background: #1f232b
}

.account__header__image img {
    -o-object-fit: cover;
    font-family: "object-fit:cover";
    object-fit: cover;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0
}

.account__header__bar {
    position: relative;
    background: #313543;
    padding: 5px;
    border-bottom: 1px solid #42485a
}

.account__header__bar .avatar {
    display: block;
    flex: 0 0 auto;
    width: 94px;
    margin-left: -2px
}

.account__header__bar .avatar .account__avatar {
    background: #17191f;
    border: 2px solid #313543
}

.account__header__tabs {
    display: flex;
    align-items: flex-start;
    padding: 7px 5px;
    margin-top: -55px
}

.account__header__tabs__buttons {
    display: flex;
    align-items: center;
    padding-top: 55px;
    overflow: hidden
}

.account__header__tabs__buttons .icon-button {
    border: 1px solid #42485a;
    border-radius: 4px;
    box-sizing: content-box;
    padding: 2px
}

.account__header__tabs__buttons .button {
    margin: 0 8px
}

.account__header__tabs__name {
    padding: 5px
}

.account__header__tabs__name .account-role {
    vertical-align: top
}

.account__header__tabs__name .emojione {
    width: 22px;
    height: 22px
}

.account__header__tabs__name h1 {
    font-size: 16px;
    line-height: 24px;
    color: #fff;
    font-weight: 500;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.account__header__tabs__name h1 small {
    display: block;
    font-size: 14px;
    color: #9baec8;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis
}

.account__header__tabs .spacer {
    flex: 1 1 auto
}

.account__header__bio {
    overflow: hidden;
    margin: 0 -5px
}

.account__header__bio .account__header__content {
    padding: 20px 15px 5px;
    color: #fff
}

.account__header__bio .account__header__fields {
    margin: 0;
    border-top: 1px solid #42485a
}

.account__header__bio .account__header__fields a {
    color: #4ea2df
}

.account__header__bio .account__header__fields dl:first-child .verified {
    border-radius: 0 4px 0 0
}

.account__header__bio .account__header__fields .verified a {
    color: #79bd9a
}

.account__header__extra {
    margin-top: 4px
}

.account__header__extra__links {
    font-size: 14px;
    color: #9baec8
}

.account__header__extra__links a {
    display: inline-block;
    color: #9baec8;
    text-decoration: none;
    padding: 20px 10px 10px;
    font-weight: 500
}

.account__header__extra__links a strong {
    font-weight: 700;
    color: #fff
}

.trends__header {
    color: #606984;
    background: #2c313d;
    border-bottom: 1px solid #1f232b;
    font-weight: 500;
    padding: 15px;
    font-size: 16px;
    cursor: default
}

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

.trends__item {
    display: flex;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid #393f4f
}

.trends__item:last-child {
    border-bottom: 0
}

.trends__item__name {
    flex: 1 1 auto;
    color: #606984;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.trends__item__name strong {
    font-weight: 500
}

.trends__item__name a {
    color: #9baec8;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.trends__item__name a:active span, .trends__item__name a:focus span, .trends__item__name a:hover span {
    text-decoration: underline
}

.trends__item__current {
    flex: 0 0 auto;
    font-size: 24px;
    line-height: 36px;
    font-weight: 500;
    text-align: right;
    padding-right: 15px;
    margin-left: 5px;
    color: #d9e1e8
}

.trends__item__sparkline {
    flex: 0 0 auto;
    width: 50px
}

.trends__item__sparkline path:first-child {
    fill: rgba(43, 144, 217, .25)!important;
    fill-opacity: 1!important
}

.trends__item__sparkline path:last-child {
    stroke: #459ede!important
}

.conversation {
    display: flex;
    border-bottom: 1px solid #393f4f;
    padding: 5px 5px 0
}

.conversation:focus {
    background: #2c313d;
    outline: 0
}

.conversation__avatar {
    flex: 0 0 auto;
    padding: 12px 10px 10px
}

.conversation__content {
    flex: 1 1 auto;
    padding: 10px 15px 10px 5px;
    overflow: hidden
}

.conversation__content__info {
    overflow: hidden;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between
}

.conversation__content__relative-time {
    font-size: 15px;
    color: #9baec8;
    padding-left: 15px
}

.conversation__content__names {
    color: #9baec8;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
    flex-basis: 90px;
    flex-grow: 1
}

.conversation__content__names a {
    color: #fff;
    text-decoration: none
}

.conversation__content__names a:active, .conversation__content__names a:focus, .conversation__content__names a:hover {
    text-decoration: underline
}

.conversation__content a {
    word-break: break-word
}

.poll {
    margin-top: 16px;
    font-size: 14px
}

.poll li {
    margin-bottom: 10px;
    position: relative
}

.poll__chart {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    display: inline-block;
    border-radius: 4px;
    background: #6d89af
}

.poll__chart.leading {
    background: #2b90d9
}

.poll__text {
    position: relative;
    display: flex;
    padding: 6px 0;
    line-height: 18px;
    cursor: default;
    overflow: hidden
}

.poll__text input[type=checkbox], .poll__text input[type=radio] {
    display: none
}

.poll__text .autossugest-input {
    flex: 1 1 auto
}

.poll__text input[type=text] {
    display: block;
    box-sizing: border-box;
    width: 100%;
    font-size: 14px;
    color: #282c37;
    outline: 0;
    font-family: inherit;
    background: #fff;
    border: 1px solid #dbdbdb;
    border-radius: 4px;
    padding: 6px 10px
}

.poll__text input[type=text]:focus {
    border-color: #2b90d9
}

.poll__text.selectable {
    cursor: pointer
}

.poll__text.editable {
    display: flex;
    align-items: center;
    overflow: visible
}

.poll__input {
    display: inline-block;
    position: relative;
    border: 1px solid #9baec8;
    box-sizing: border-box;
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    margin-right: 10px;
    top: -1px;
    border-radius: 50%;
    vertical-align: middle;
    margin-top: auto;
    margin-bottom: auto;
    flex: 0 0 18px
}

.poll__input.checkbox {
    border-radius: 4px
}

.poll__input.active {
    border-color: #79bd9a;
    background: #79bd9a
}

.poll__number {
    display: inline-block;
    width: 52px;
    font-weight: 700;
    padding: 0 10px 0 8px;
    text-align: right;
    margin-top: auto;
    margin-bottom: auto;
    flex: 0 0 52px
}

.poll__vote__mark {
    float: left;
    line-height: 18px
}

.poll__footer {
    padding-top: 6px;
    padding-bottom: 5px;
    color: #606984
}

.poll__link {
    display: inline;
    background: transparent;
    padding: 0;
    margin: 0;
    border: 0;
    color: #606984;
    text-decoration: underline;
    font-size: inherit
}

.poll__link:hover {
    text-decoration: none
}

.poll__link:active, .poll__link:focus {
    background-color: rgba(96, 105, 132, .1)
}

.poll .button {
    height: 36px;
    padding: 0 16px;
    margin-right: 10px;
    font-size: 14px
}

.compose-form__poll-wrapper {
    border-top: 1px solid #ebebeb
}

.compose-form__poll-wrapper ul {
    padding: 10px
}

.compose-form__poll-wrapper .poll__footer {
    border-top: 1px solid #ebebeb;
    padding: 10px;
    display: flex;
    align-items: center
}

.compose-form__poll-wrapper .poll__footer button, .compose-form__poll-wrapper .poll__footer select {
    flex: 1 1 50%
}

.compose-form__poll-wrapper .button.button-secondary {
    font-size: 14px;
    font-weight: 400;
    padding: 6px 10px;
    height: auto;
    line-height: inherit;
    color: #606984;
    border-color: #606984;
    margin-right: 5px
}

.compose-form__poll-wrapper li {
    display: flex;
    align-items: center
}

.compose-form__poll-wrapper li .poll__text {
    flex: 0 0 auto;
    width: calc(100% - 29px);
    margin-right: 6px
}

.compose-form__poll-wrapper select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-sizing: border-box;
    font-size: 14px;
    color: #282c37;
    display: inline-block;
    width: auto;
    outline: 0;
    font-family: inherit;
    background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='%23DBDBDB'/></svg>") no-repeat right 8px center/auto 16px;
    border: 1px solid #dbdbdb;
    border-radius: 4px;
    padding: 6px 30px 6px 10px
}

.compose-form__poll-wrapper .icon-button.disabled {
    color: #dbdbdb
}

.muted .poll {
    color: #606984
}

.muted .poll__chart {
    background: rgba(109, 137, 175, .2)
}

.muted .poll__chart.leading {
    background: rgba(43, 144, 217, .2)
}

.introduction {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: #282c37
}

@media screen and (max-width:920px) {
    .introduction {
        display: block!important
    }
}

.introduction__pager {
    background: #17191f;
    box-shadow: 0 0 15px rgba(0, 0, 0, .2);
    overflow: hidden
}

.introduction__frame, .introduction__pager {
    border-radius: 10px;
    width: 50vw;
    min-width: 920px
}

@media screen and (max-width:920px) {
    .introduction__frame, .introduction__pager {
        min-width: 0;
        width: 100%;
        border-radius: 0;
        box-shadow: none
    }
}

.introduction__frame-wrapper {
    opacity: 0;
    transition: opacity .5s linear
}

.introduction__frame-wrapper.active {
    opacity: 1;
    transition: opacity 50ms linear
}

.introduction__frame {
    overflow: hidden
}

.introduction__illustration {
    height: 50vh
}

@media screen and (max-width:630px) {
    .introduction__illustration {
        height: auto
    }
}

.introduction__illustration img {
    -o-object-fit: cover;
    font-family: "object-fit:cover";
    object-fit: cover;
    display: block;
    margin: 0;
    width: 100%;
    height: 100%
}

.introduction__text {
    border-top: 2px solid #2b90d9
}

.introduction__text--columnized {
    display: flex
}

.introduction__text--columnized>div {
    flex: 1 1 33.33%;
    text-align: center;
    padding: 25px 25px 30px
}

@media screen and (max-width:630px) {
    .introduction__text--columnized {
        display: block;
        padding: 15px 0 20px
    }
    .introduction__text--columnized>div {
        padding: 10px 25px
    }
}

.introduction__text h3 {
    font-size: 24px;
    line-height: 1.5;
    font-weight: 700;
    margin-bottom: 10px
}

.introduction__text p {
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    color: #9baec8
}

.introduction__text p code {
    display: inline-block;
    background: #17191f;
    font-size: 15px;
    border: 1px solid #393f4f;
    border-radius: 2px;
    padding: 1px 3px
}

.introduction__text--centered {
    padding: 25px 25px 30px;
    text-align: center
}

.introduction__dots {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 25px
}

@media screen and (max-width:630px) {
    .introduction__dots {
        display: none
    }
}

.introduction__dot {
    width: 14px;
    height: 14px;
    border-radius: 14px;
    border: 1px solid #2b90d9;
    background: transparent;
    margin: 0 3px;
    cursor: pointer
}

.introduction__dot:hover {
    background: #393f4f
}

.introduction__dot.active {
    cursor: default;
    background: #2b90d9
}

.introduction__action {
    padding: 0 25px 25px;
    display: flex;
    align-items: center;
    justify-content: center
}

.modal-layout {
    background: #282c37 url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="%23606984"/></svg>') repeat-x bottom fixed;
    display: flex;
    flex-direction: column;
    height: 100vh;
    padding: 0
}

.modal-layout__mastodon {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: flex-end
}

.modal-layout__mastodon>* {
    flex: 1;
    max-height: 235px;
    background: url(/packs/media/images/elephant_ui_plane-e3f2d57c12c376e189c274cbe81af8dd.svg) no-repeat 0 100%/contain
}

@media screen and (max-width:600px) {
    .account-header {
        margin-top: 0
    }
}

.emoji-mart {
    font-size: 13px;
    display: inline-block;
    color: #282c37
}

.emoji-mart, .emoji-mart * {
    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: flex;
    justify-content: space-between;
    padding: 0 6px;
    color: #606984;
    line-height: 0
}

.emoji-mart-anchor {
    position: relative;
    flex: 1;
    text-align: center;
    padding: 12px 4px;
    overflow: hidden;
    transition: color .1s ease-out;
    cursor: pointer
}

.emoji-mart-anchor:hover {
    color: #576078
}

.emoji-mart-anchor-selected {
    color: #2b90d9
}

.emoji-mart-anchor-selected:hover {
    color: #2485cb
}

.emoji-mart-anchor-selected .emoji-mart-anchor-bar {
    bottom: -1px
}

.emoji-mart-anchor-bar {
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: #2b90d9
}

.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 45px 10px 10px;
    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: #282c37;
    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
}

.container {
    box-sizing: border-box;
    max-width: 1235px;
    margin: 0 auto;
    position: relative
}

@media screen and (max-width:1255px) {
    .container {
        width: 100%;
        padding: 0 10px
    }
}

.rich-formatting {
    font-family: "mastodon-font-sans-serif", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.7;
    word-wrap: break-word;
    color: #9baec8
}

.rich-formatting a {
    color: #2b90d9;
    text-decoration: underline
}

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

.rich-formatting li, .rich-formatting p {
    color: #9baec8
}

.rich-formatting p {
    margin-top: 0;
    margin-bottom: .85em
}

.rich-formatting p:last-child {
    margin-bottom: 0
}

.rich-formatting strong {
    font-weight: 700;
    color: #d9e1e8
}

.rich-formatting em {
    font-style: italic;
    color: #d9e1e8
}

.rich-formatting code {
    font-size: .85em;
    background: #17191f;
    border-radius: 4px;
    padding: .2em .3em
}

.rich-formatting h1, .rich-formatting h2, .rich-formatting h3, .rich-formatting h4, .rich-formatting h5, .rich-formatting h6 {
    font-family: mastodon-font-display, sans-serif;
    margin-top: 1.275em;
    margin-bottom: .85em;
    font-weight: 500;
    color: #d9e1e8
}

.rich-formatting h1 {
    font-size: 2em
}

.rich-formatting h2 {
    font-size: 1.75em
}

.rich-formatting h3 {
    font-size: 1.5em
}

.rich-formatting h4 {
    font-size: 1.25em
}

.rich-formatting h5, .rich-formatting h6 {
    font-size: 1em
}

.rich-formatting ul {
    list-style: disc
}

.rich-formatting ol {
    list-style: decimal
}

.rich-formatting ol, .rich-formatting ul {
    padding: 0 0 0 2em;
    margin: 0 0 .85em
}

.rich-formatting ol[type=a], .rich-formatting ul[type=a] {
    list-style-type: lower-alpha
}

.rich-formatting ol[type=i], .rich-formatting ul[type=i] {
    list-style-type: lower-roman
}

.rich-formatting hr {
    width: 100%;
    height: 0;
    border: 0;
    border-bottom: 1px solid #313543;
    margin: 1.7em 0
}

.rich-formatting hr.spacer {
    height: 1px;
    border: 0
}

.rich-formatting table {
    width: 100%;
    border-collapse: collapse;
    -moz-column-break-inside: auto;
    break-inside: auto;
    margin-top: 24px;
    margin-bottom: 32px
}

.rich-formatting table tbody tr, .rich-formatting table thead tr {
    border-bottom: 1px solid #313543;
    font-size: 1em;
    line-height: 1.625;
    font-weight: 400;
    text-align: left;
    color: #9baec8
}

.rich-formatting table thead tr {
    border-bottom-width: 2px;
    line-height: 1.5;
    font-weight: 500;
    color: #606984
}

.rich-formatting table td, .rich-formatting table th {
    padding: 8px;
    align-self: start;
    align-items: start;
    word-break: break-all
}

.rich-formatting table td.nowrap, .rich-formatting table th.nowrap {
    width: 25%;
    position: relative
}

.rich-formatting table td.nowrap:before, .rich-formatting table th.nowrap:before {
    content: "&nbsp;";
    visibility: hidden
}

.rich-formatting table td.nowrap span, .rich-formatting table th.nowrap span {
    position: absolute;
    left: 8px;
    right: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.rich-formatting>:first-child {
    margin-top: 0
}

.information-board {
    background: #1f232b;
    padding: 20px 0
}

.information-board .container-alt {
    position: relative;
    padding-right: 295px
}

.information-board__sections {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap
}

.information-board__section {
    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
}

.information-board__section span, .information-board__section strong {
    display: block
}

.information-board__section span:last-child {
    color: #d9e1e8
}

.information-board__section strong {
    font-family: mastodon-font-display, sans-serif;
    font-weight: 500;
    font-size: 32px;
    line-height: 48px
}

@media screen and (max-width:700px) {
    .information-board__section {
        text-align: center
    }
}

.information-board .panel {
    position: absolute;
    width: 280px;
    box-sizing: border-box;
    background: #17191f;
    padding: 10px 20px 20px;
    border-radius: 4px 4px 0 0;
    right: 0;
    bottom: -40px
}

.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;
    white-space: nowrap;
    overflow: hidden
}

.information-board .panel .panel-header a, .information-board .panel .panel-header span {
    font-weight: 400;
    color: #7a93b6
}

.information-board .panel .panel-header a {
    text-decoration: none
}

.information-board .owner {
    text-align: center
}

.information-board .owner .avatar {
    width: 80px;
    height: 80px;
    margin: 0 auto 15px
}

.information-board .owner .avatar img {
    display: block;
    width: 80px;
    height: 80px;
    border-radius: 48px
}

.information-board .owner .name {
    font-size: 14px
}

.information-board .owner .name a {
    display: block;
    color: #fff;
    text-decoration: none
}

.information-board .owner .name a:hover .display_name {
    text-decoration: underline
}

.information-board .owner .name .username {
    display: block;
    color: #9baec8
}

.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: #bcc9da
}

.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 {
    width: 100%;
    height: 0;
    border: 0;
    border-bottom: 1px solid rgba(96, 105, 132, .6);
    margin: 20px 0
}

.landing-page hr.spacer {
    height: 1px;
    border: 0
}

.landing-page__forms, .landing-page__information {
    padding: 20px
}

.landing-page__call-to-action {
    background: #282c37;
    border-radius: 4px;
    padding: 25px 40px;
    overflow: hidden;
    box-sizing: border-box
}

.landing-page__call-to-action .row {
    width: 100%;
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center
}

.landing-page__call-to-action .row__information-board {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end
}

.landing-page__call-to-action .row__information-board .information-board__section {
    flex: 1 0 auto;
    padding: 0 10px
}

@media screen and (max-width:415px) {
    .landing-page__call-to-action .row__information-board {
        width: 100%;
        justify-content: space-between
    }
}

.landing-page__call-to-action .row__mascot {
    flex: 1;
    margin: 10px -50px 0 0
}

@media screen and (max-width:415px) {
    .landing-page__call-to-action .row__mascot {
        display: none
    }
}

.landing-page__logo {
    margin-right: 20px
}

.landing-page__logo img {
    height: 50px;
    width: auto;
    mix-blend-mode: lighten
}

.landing-page__information {
    padding: 45px 40px;
    margin-bottom: 10px
}

.landing-page__information:last-child {
    margin-bottom: 0
}

.landing-page__information strong {
    font-weight: 500;
    color: #bcc9da
}

.landing-page__information .account {
    border-bottom: 0;
    padding: 0
}

.landing-page__information .account__display-name {
    align-items: center;
    display: flex;
    margin-right: 5px
}

.landing-page__information .account div.account__display-name:hover .display-name strong {
    text-decoration: none
}

.landing-page__information .account div.account__display-name .account__avatar {
    cursor: default
}

.landing-page__information .account__avatar-wrapper {
    margin-left: 0;
    flex: 0 0 auto
}

.landing-page__information .account__avatar {
    width: 44px;
    height: 44px;
    background-size: 44px 44px
}

.landing-page__information .account .display-name {
    font-size: 15px
}

.landing-page__information .account .display-name__account {
    font-size: 14px
}

@media screen and (max-width:960px) {
    .landing-page__information .contact {
        margin-top: 30px
    }
}

@media screen and (max-width:700px) {
    .landing-page__information {
        padding: 25px 20px
    }
}

.landing-page #mastodon-timeline, .landing-page__forms, .landing-page__information {
    box-sizing: border-box;
    background: #282c37;
    border-radius: 4px;
    box-shadow: 0 0 6px rgba(0, 0, 0, .1)
}

.landing-page__mascot {
    height: 104px;
    position: relative;
    left: -40px;
    bottom: 25px
}

.landing-page__mascot img {
    height: 190px;
    width: auto
}

.landing-page__short-description .row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 40px
}

@media screen and (max-width:700px) {
    .landing-page__short-description .row {
        margin-bottom: 20px
    }
}

.landing-page__short-description p a {
    color: #d9e1e8
}

.landing-page__short-description h1 {
    font-weight: 500;
    color: #fff;
    margin-bottom: 0
}

.landing-page__short-description h1 small {
    color: #9baec8
}

.landing-page__short-description h1 small span {
    color: #d9e1e8
}

.landing-page__short-description p:last-child {
    margin-bottom: 0
}

.landing-page__hero {
    margin-bottom: 10px
}

.landing-page__hero img {
    display: block;
    margin: 0;
    max-width: 100%;
    height: auto;
    border-radius: 4px
}

@media screen and (max-width:840px) {
    .landing-page .information-board .container-alt {
        padding-right: 20px
    }
    .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
    }
}

@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-alt, .landing-page .header .container-alt {
        display: block
    }
}

.landing-page .cta {
    margin: 20px
}

.landing {
    margin-bottom: 100px
}

@media screen and (max-width:738px) {
    .landing {
        margin-bottom: 0
    }
}

.landing__brand {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 50px
}

.landing__brand svg {
    fill: #fff;
    height: 52px
}

@media screen and (max-width:415px) {
    .landing__brand {
        padding: 0;
        margin-bottom: 30px
    }
}

.landing .directory {
    margin-top: 30px;
    background: transparent;
    box-shadow: none;
    border-radius: 0
}

.landing .hero-widget {
    margin-top: 30px;
    margin-bottom: 0
}

.landing .hero-widget h4 {
    padding: 10px;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 13px;
    color: #9baec8
}

.landing .hero-widget__text {
    border-radius: 0;
    padding-bottom: 0
}

.landing .hero-widget__footer {
    background: #282c37;
    padding: 10px;
    border-radius: 0 0 4px 4px;
    display: flex
}

.landing .hero-widget__footer__column {
    flex: 1 1 50%
}

.landing .hero-widget .account {
    padding: 10px 0;
    border-bottom: 0
}

.landing .hero-widget .account .account__display-name {
    display: flex;
    align-items: center
}

.landing .hero-widget .account .account__avatar {
    width: 44px;
    height: 44px;
    background-size: 44px 44px
}

.landing .hero-widget__counter {
    padding: 10px
}

.landing .hero-widget__counter strong {
    font-family: mastodon-font-display, sans-serif;
    font-size: 15px;
    font-weight: 700;
    display: block
}

.landing .hero-widget__counter span {
    font-size: 14px;
    color: #9baec8
}

.landing .simple_form .user_agreement .label_input>label, .landing .simple_form p.lead {
    font-weight: 400;
    color: #9baec8
}

.landing .simple_form p.lead {
    font-size: 15px;
    line-height: 20px;
    margin-bottom: 25px
}

.landing__grid {
    max-width: 960px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 50%) minmax(0, 50%);
    grid-gap: 30px
}

@media screen and (max-width:738px) {
    .landing__grid {
        grid-template-columns: minmax(0, 100%);
        grid-gap: 10px
    }
    .landing__grid__column-login {
        grid-row: 1;
        display: flex;
        flex-direction: column
    }
    .landing__grid__column-login .box-widget {
        order: 2;
        flex: 0 0 auto
    }
    .landing__grid__column-login .hero-widget {
        margin-top: 0;
        margin-bottom: 10px;
        order: 1;
        flex: 0 0 auto
    }
    .landing__grid__column-registration {
        grid-row: 2
    }
    .landing__grid .directory {
        margin-top: 10px
    }
}

@media screen and (max-width:415px) {
    .landing__grid {
        grid-gap: 0
    }
    .landing__grid .hero-widget {
        display: block;
        margin-bottom: 0;
        box-shadow: none
    }
    .landing__grid .hero-widget__footer, .landing__grid .hero-widget__img, .landing__grid .hero-widget__img img {
        border-radius: 0
    }
    .landing__grid .box-widget, .landing__grid .directory__tag, .landing__grid .hero-widget {
        border-bottom: 1px solid #393f4f
    }
    .landing__grid .directory {
        margin-top: 0
    }
    .landing__grid .directory__tag {
        margin-bottom: 0
    }
    .landing__grid .directory__tag>a, .landing__grid .directory__tag>div {
        border-radius: 0;
        box-shadow: none
    }
    .landing__grid .directory__tag:last-child {
        border-bottom: 0
    }
}

.brand {
    position: relative;
    text-decoration: none
}

.brand__tagline {
    display: block;
    position: absolute;
    bottom: -10px;
    left: 50px;
    width: 300px;
    color: #9baec8;
    text-decoration: none;
    font-size: 14px
}

@media screen and (max-width:415px) {
    .brand__tagline {
        position: static;
        width: auto;
        margin-top: 20px;
        color: #606984
    }
}

.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;
    background: #1f232b
}

.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.inline-table>tbody>tr:first-child>td, .table.inline-table>tbody>tr:first-child>th {
    border-top: 0
}

.table.batch-table>thead>tr>th {
    background: #282c37;
    border-top: 1px solid #17191f;
    border-bottom: 1px solid #17191f
}

.table.batch-table>thead>tr>th:first-child {
    border-radius: 4px 0 0;
    border-left: 1px solid #17191f
}

.table.batch-table>thead>tr>th:last-child {
    border-radius: 0 4px 0 0;
    border-right: 1px solid #17191f
}

.table--invites tbody td {
    vertical-align: middle
}

.table-wrapper {
    overflow: auto;
    margin-bottom: 20px
}

samp {
    font-family: "mastodon-font-monospace", monospace
}

button.table-action-link {
    background: transparent;
    border: 0;
    font: inherit
}

a.table-action-link, button.table-action-link {
    text-decoration: none;
    display: inline-block;
    margin-right: 5px;
    padding: 0 10px;
    color: #9baec8;
    font-weight: 500
}

a.table-action-link:hover, button.table-action-link:hover {
    color: #fff
}

a.table-action-link i.fa, button.table-action-link i.fa {
    font-weight: 400;
    margin-right: 5px
}

a.table-action-link:first-child, button.table-action-link:first-child {
    padding-left: 0
}

.batch-table__row, .batch-table__toolbar {
    display: flex
}

.batch-table__row__select, .batch-table__toolbar__select {
    box-sizing: border-box;
    padding: 8px 16px;
    cursor: pointer;
    min-height: 100%
}

.batch-table__row__select input, .batch-table__toolbar__select input {
    margin-top: 8px
}

.batch-table__row__select--aligned, .batch-table__toolbar__select--aligned {
    display: flex;
    align-items: center
}

.batch-table__row__select--aligned input, .batch-table__toolbar__select--aligned input {
    margin-top: 0
}

@media screen and (max-width:415px) {
    .batch-table__row__select, .batch-table__toolbar__select {
        display: none
    }
}

.batch-table__row__actions, .batch-table__row__content, .batch-table__toolbar__actions, .batch-table__toolbar__content {
    padding: 8px 16px 8px 0;
    flex: 1 1 auto
}

.batch-table__toolbar {
    border: 1px solid #17191f;
    background: #282c37;
    border-radius: 4px 0 0;
    height: 47px;
    align-items: center
}

.batch-table__toolbar__actions {
    text-align: right;
    padding-right: 11px
}

@media screen and (max-width:415px) {
    .batch-table__toolbar {
        display: none
    }
}

.batch-table__form {
    padding: 16px;
    border: 1px solid #17191f;
    border-top: 0;
    background: #282c37
}

.batch-table__form .fields-row {
    padding-top: 0;
    margin-bottom: 0
}

.batch-table__row {
    border: 1px solid #17191f;
    border-top: 0;
    background: #1f232b
}

@media screen and (max-width:415px) {
    .batch-table__row:first-child {
        border-top: 1px solid #17191f
    }
}

.batch-table__row:hover {
    background: #242731
}

.batch-table__row:nth-child(2n) {
    background: #282c37
}

.batch-table__row:nth-child(2n):hover {
    background: #2c313d
}

.batch-table__row__content {
    padding-top: 12px;
    padding-bottom: 16px
}

.batch-table__row__content--unpadded {
    padding: 0
}

.batch-table__row__content--with-image {
    display: flex;
    align-items: center
}

.batch-table__row__content__image {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px
}

.batch-table__row__content__image .emojione {
    width: 32px;
    height: 32px
}

.batch-table__row__content__text {
    flex: 1 1 auto
}

.batch-table__row__content__extra {
    flex: 0 0 auto;
    text-align: right;
    color: #9baec8;
    font-weight: 500
}

.batch-table__row .directory__tag {
    margin: 0;
    width: 100%
}

.batch-table__row .directory__tag a {
    background: transparent;
    border-radius: 0
}

.batch-table .status__content {
    padding-top: 0
}

.batch-table .status__content summary {
    display: list-item
}

.batch-table .status__content strong {
    font-weight: 700
}

.batch-table .nothing-here {
    border: 1px solid #17191f;
    border-top: 0;
    box-shadow: none
}

@media screen and (max-width:415px) {
    .batch-table .nothing-here {
        border-top: 1px solid #17191f
    }
}

@media screen and (max-width:870px) {
    .batch-table .accounts-table tbody td.optional {
        display: none
    }
}

.admin-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
    min-height: 100vh
}

.admin-wrapper .sidebar-wrapper {
    min-height: 100vh;
    overflow: hidden;
    pointer-events: none;
    flex: 1 1 auto
}

.admin-wrapper .sidebar-wrapper__inner {
    display: flex;
    justify-content: flex-end;
    background: #282c37;
    height: 100%
}

.admin-wrapper .sidebar {
    width: 240px;
    padding: 0;
    pointer-events: auto
}

.admin-wrapper .sidebar__toggle {
    display: none;
    background: #393f4f;
    height: 48px
}

.admin-wrapper .sidebar__toggle__logo {
    flex: 1 1 auto
}

.admin-wrapper .sidebar__toggle__logo a {
    display: inline-block;
    padding: 15px
}

.admin-wrapper .sidebar__toggle__logo svg {
    fill: #fff;
    height: 20px;
    position: relative;
    bottom: -2px
}

.admin-wrapper .sidebar__toggle__icon {
    display: block;
    color: #9baec8;
    text-decoration: none;
    flex: 0 0 auto;
    font-size: 20px;
    padding: 15px
}

.admin-wrapper .sidebar__toggle a:active, .admin-wrapper .sidebar__toggle a:focus, .admin-wrapper .sidebar__toggle a:hover {
    background: #42485a
}

.admin-wrapper .sidebar .logo {
    display: block;
    margin: 40px auto;
    width: 100px;
    height: 100px
}

@media screen and (max-width:600px) {
    .admin-wrapper .sidebar>a:first-child {
        display: none
    }
}

.admin-wrapper .sidebar ul {
    list-style: none;
    border-radius: 4px 0 0 4px;
    overflow: hidden;
    margin-bottom: 20px
}

@media screen and (max-width:600px) {
    .admin-wrapper .sidebar ul {
        margin-bottom: 0
    }
}

.admin-wrapper .sidebar ul a {
    display: block;
    padding: 15px;
    color: #9baec8;
    text-decoration: none;
    transition: all .2s linear;
    transition-property: color, background-color;
    border-radius: 4px 0 0 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.admin-wrapper .sidebar ul a i.fa {
    margin-right: 5px
}

.admin-wrapper .sidebar ul a:hover {
    color: #fff;
    background-color: #1d2028;
    transition: all .1s linear;
    transition-property: color, background-color
}

.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 .simple-navigation-active-leaf a {
    color: #fff;
    background-color: #2b90d9;
    border-bottom: 0;
    border-radius: 0
}

.admin-wrapper .sidebar ul .simple-navigation-active-leaf a:hover {
    background-color: #419bdd
}

.admin-wrapper .sidebar>ul>.simple-navigation-active-leaf a {
    border-radius: 4px 0 0 4px
}

.admin-wrapper .content-wrapper {
    box-sizing: border-box;
    width: 100%;
    max-width: 840px;
    flex: 1 1 auto
}

@media screen and (max-width:1080px) {
    .admin-wrapper .sidebar-wrapper--empty {
        display: none
    }
    .admin-wrapper .sidebar-wrapper {
        width: 240px;
        flex: 0 0 auto
    }
}

@media screen and (max-width:600px) {
    .admin-wrapper .sidebar-wrapper {
        width: 100%
    }
}

.admin-wrapper .content {
    padding: 60px 15px 20px 25px
}

@media screen and (max-width:600px) {
    .admin-wrapper .content {
        max-width: none;
        padding: 30px 15px 15px
    }
}

.admin-wrapper .content h2 {
    color: #d9e1e8;
    font-size: 24px;
    line-height: 28px;
    font-weight: 400;
    padding-bottom: 40px;
    border-bottom: 1px solid #393f4f;
    margin-bottom: 40px
}

@media screen and (max-width:600px) {
    .admin-wrapper .content h2 {
        border-bottom: 0;
        padding-bottom: 0;
        font-weight: 700
    }
}

.admin-wrapper .content h3 {
    color: #d9e1e8;
    font-size: 20px;
    line-height: 28px;
    font-weight: 400;
    margin-bottom: 30px
}

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

.admin-wrapper .content h6 {
    font-size: 16px;
    color: #d9e1e8;
    line-height: 28px;
    font-weight: 500
}

.admin-wrapper .content .fields-group h6 {
    color: #fff;
    font-weight: 500
}

.admin-wrapper .content .directory__tag>a, .admin-wrapper .content .directory__tag>div {
    box-shadow: none
}

.admin-wrapper .content .directory__tag .table-action-link .fa {
    color: inherit
}

.admin-wrapper .content .directory__tag h4 {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    text-transform: none;
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: 0
}

.admin-wrapper .content>p {
    font-size: 14px;
    line-height: 21px;
    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 {
    width: 100%;
    height: 0;
    border: 0;
    border-bottom: 1px solid rgba(96, 105, 132, .6);
    margin: 20px 0
}

.admin-wrapper .content hr.spacer {
    height: 1px;
    border: 0
}

@media screen and (max-width:600px) {
    .admin-wrapper {
        display: block
    }
    .admin-wrapper .sidebar-wrapper {
        min-height: 0
    }
    .admin-wrapper .sidebar {
        width: 100%;
        padding: 0;
        height: auto
    }
    .admin-wrapper .sidebar__toggle {
        display: flex
    }
    .admin-wrapper .sidebar>ul {
        display: none
    }
    .admin-wrapper .sidebar ul a, .admin-wrapper .sidebar ul ul a {
        border-radius: 0;
        border-bottom: 1px solid #313543;
        transition: none
    }
    .admin-wrapper .sidebar ul a:hover, .admin-wrapper .sidebar ul ul a:hover {
        transition: none
    }
    .admin-wrapper .sidebar ul ul {
        border-radius: 0
    }
    .admin-wrapper .sidebar ul .simple-navigation-active-leaf a {
        border-bottom-color: #2b90d9
    }
}

hr.spacer {
    width: 100%;
    border: 0;
    margin: 20px 0;
    height: 1px
}

.admin-wrapper .content .muted-hint, body .muted-hint {
    color: #9baec8
}

.admin-wrapper .content .muted-hint a, body .muted-hint a {
    color: #2b90d9
}

.admin-wrapper .content .positive-hint, body .positive-hint {
    color: #79bd9a;
    font-weight: 500
}

.admin-wrapper .content .negative-hint, body .negative-hint {
    color: #df405a;
    font-weight: 500
}

.admin-wrapper .content .neutral-hint, body .neutral-hint {
    color: #606984;
    font-weight: 500
}

.admin-wrapper .content .warning-hint, body .warning-hint {
    color: #ca8f04;
    font-weight: 500
}

.filters {
    display: flex;
    flex-wrap: wrap
}

.filters .filter-subset {
    flex: 0 0 auto;
    margin: 0 40px 20px 0
}

.filters .filter-subset:last-child {
    margin-bottom: 30px
}

.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: #9baec8;
    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 {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 20px
}

.report-accounts__item {
    display: flex;
    flex: 250px;
    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 {
    flex: 1 1 auto
}

.account-status, .report-status {
    display: flex;
    margin-bottom: 10px
}

.account-status .activity-stream, .report-status .activity-stream {
    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 {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column
}

.account-status__actions .icon-button, .report-status__actions .icon-button {
    font-size: 24px;
    width: 24px;
    text-align: center;
    margin-bottom: 10px
}

.simple_form.new_account_moderation_note, .simple_form.new_report_note {
    max-width: 100%
}

.batch-form-box {
    display: flex;
    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
}

.back-link {
    margin-bottom: 10px;
    font-size: 14px
}

.back-link a {
    color: #2b90d9;
    text-decoration: none
}

.back-link a:hover {
    text-decoration: underline
}

.spacer {
    flex: 1 1 auto
}

.log-entry {
    margin-bottom: 20px;
    line-height: 20px
}

.log-entry__header {
    display: flex;
    justify-content: flex-start;
    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__content {
    max-width: calc(100% - 90px)
}

.log-entry__title {
    word-wrap: break-word
}

.log-entry__timestamp {
    color: #606984
}

.log-entry__extras {
    background: #353a49;
    border-radius: 0 0 4px 4px;
    padding: 10px;
    color: #9baec8;
    font-family: "mastodon-font-monospace", monospace;
    font-size: 12px;
    word-wrap: break-word;
    min-height: 20px
}

.log-entry__icon {
    font-size: 28px;
    margin-right: 10px;
    color: #606984
}

.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: #e87487
}

.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: #e87487
}

.log-entry .diff-neutral {
    color: #d9e1e8
}

.log-entry .diff-new {
    color: #79bd9a
}

.inline-name-tag, .name-tag, a.inline-name-tag, a.name-tag {
    text-decoration: none;
    color: #d9e1e8
}

.inline-name-tag .username, .name-tag .username, a.inline-name-tag .username, a.name-tag .username {
    font-weight: 500
}

.inline-name-tag.suspended .username, .name-tag.suspended .username, a.inline-name-tag.suspended .username, a.name-tag.suspended .username {
    text-decoration: line-through;
    color: #e87487
}

.inline-name-tag.suspended .avatar, .name-tag.suspended .avatar, a.inline-name-tag.suspended .avatar, a.name-tag.suspended .avatar {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    opacity: .8
}

.name-tag, a.name-tag {
    display: flex;
    align-items: center
}

.name-tag .avatar, a.name-tag .avatar {
    display: block;
    margin: 0 5px 0 0;
    border-radius: 50%
}

.name-tag.suspended .avatar, a.name-tag.suspended .avatar {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    opacity: .8
}

.speech-bubble {
    margin-bottom: 20px;
    border-left: 4px solid #2b90d9
}

.speech-bubble.positive {
    border-left-color: #79bd9a
}

.speech-bubble.negative {
    border-left-color: #e87487
}

.speech-bubble.warning {
    border-left-color: #ca8f04
}

.speech-bubble__bubble {
    padding: 16px 16px 16px 14px;
    font-size: 15px;
    line-height: 20px;
    border-radius: 4px 4px 4px 0;
    position: relative;
    font-weight: 500
}

.speech-bubble__bubble a {
    color: #9baec8
}

.speech-bubble__owner {
    padding: 8px 8px 8px 12px
}

.speech-bubble time {
    color: #606984
}

.report-card {
    background: #282c37;
    border-radius: 4px;
    margin-bottom: 20px
}

.report-card__profile {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px
}

.report-card__profile .account {
    padding: 0;
    border: 0
}

.report-card__profile .account__avatar-wrapper {
    margin-left: 0
}

.report-card__profile__stats {
    flex: 0 0 auto;
    font-weight: 500;
    color: #9baec8;
    text-transform: uppercase;
    text-align: right
}

.report-card__profile__stats a {
    color: inherit;
    text-decoration: none
}

.report-card__profile__stats a:active, .report-card__profile__stats a:focus, .report-card__profile__stats a:hover {
    color: #b5c3d6
}

.report-card__profile__stats .red {
    color: #df405a
}

.report-card__summary__item {
    display: flex;
    justify-content: flex-start;
    border-top: 1px solid #1f232b
}

.report-card__summary__item:hover {
    background: #2c313d
}

.report-card__summary__item__assigned, .report-card__summary__item__reported-by {
    padding: 15px;
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 150px;
    color: #9baec8
}

.report-card__summary__item__assigned, .report-card__summary__item__assigned .username, .report-card__summary__item__reported-by, .report-card__summary__item__reported-by .username {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.report-card__summary__item__content {
    flex: 1 1 auto;
    max-width: calc(100% - 300px)
}

.report-card__summary__item__content__icon {
    color: #606984;
    margin-right: 4px;
    font-weight: 500
}

.report-card__summary__item__content a {
    display: block;
    box-sizing: border-box;
    width: 100%;
    padding: 15px;
    text-decoration: none;
    color: #9baec8
}

.one-line {
    white-space: nowrap
}

.ellipsized-ip, .one-line {
    overflow: hidden;
    text-overflow: ellipsis
}

.ellipsized-ip {
    display: inline-block;
    max-width: 120px;
    vertical-align: middle
}

.admin-account-bio {
    display: flex;
    flex-wrap: wrap;
    margin: 20px -5px 0
}

.admin-account-bio>div {
    box-sizing: border-box;
    padding: 0 5px;
    margin-bottom: 10px;
    flex: 1 0 50%
}

.admin-account-bio .account__header__content, .admin-account-bio .account__header__fields {
    background: #393f4f;
    border-radius: 4px;
    height: 100%
}

.admin-account-bio .account__header__fields {
    margin: 0;
    border: 0
}

.admin-account-bio .account__header__fields a {
    color: #4ea2df
}

.admin-account-bio .account__header__fields dl:first-child .verified {
    border-radius: 0 4px 0 0
}

.admin-account-bio .account__header__fields .verified a {
    color: #79bd9a
}

.admin-account-bio .account__header__content {
    box-sizing: border-box;
    padding: 20px;
    color: #fff
}

.dashboard__counters {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -5px 20px
}

.dashboard__counters>div {
    box-sizing: border-box;
    flex: 0 0 33.333%;
    padding: 0 5px;
    margin-bottom: 10px
}

.dashboard__counters>div>a, .dashboard__counters>div>div {
    padding: 20px;
    background: #313543;
    border-radius: 4px;
    box-sizing: border-box;
    height: 100%
}

.dashboard__counters>div>a {
    text-decoration: none;
    color: inherit;
    display: block
}

.dashboard__counters>div>a:active, .dashboard__counters>div>a:focus, .dashboard__counters>div>a:hover {
    background: #393f4f
}

.dashboard__counters__num, .dashboard__counters__text {
    text-align: center;
    font-weight: 500;
    font-size: 24px;
    line-height: 21px;
    color: #fff;
    font-family: mastodon-font-display, sans-serif;
    margin-bottom: 20px;
    line-height: 30px
}

.dashboard__counters__text {
    font-size: 18px
}

.dashboard__counters__label {
    font-size: 14px;
    color: #9baec8;
    text-align: center;
    font-weight: 500
}

.dashboard__widgets {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -5px
}

.dashboard__widgets>div {
    flex: 0 0 33.333%;
    margin-bottom: 20px
}

.dashboard__widgets>div>div {
    padding: 0 5px
}

.dashboard__widgets a:not(.name-tag) {
    color: #d9e1e8;
    font-weight: 500;
    text-decoration: none
}

body.rtl {
    direction: rtl
}

body.rtl .column-header>button {
    text-align: right;
    padding-left: 0;
    padding-right: 15px
}

body.rtl .radio-button__input {
    margin-right: 0;
    margin-left: 10px
}

body.rtl .directory__card__bar .display-name {
    margin-left: 0;
    margin-right: 15px
}

body.rtl .display-name {
    text-align: right
}

body.rtl .notification__message {
    margin-left: 0;
    margin-right: 68px
}

body.rtl .drawer__inner__mastodon>img {
    transform: scaleX(-1)
}

body.rtl .notification__favourite-icon-wrapper {
    left: auto;
    right: -26px
}

body.rtl .landing-page__logo {
    margin-right: 0;
    margin-left: 20px
}

body.rtl .landing-page .features-list .features-list__row .visual {
    margin-left: 0;
    margin-right: 15px
}

body.rtl .column-header__icon, body.rtl .column-link__icon {
    margin-right: 0;
    margin-left: 5px
}

body.rtl .compose-form .compose-form__buttons-wrapper .character-counter__wrapper {
    margin-right: 0;
    margin-left: 4px
}

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 .columns-area {
    direction: rtl
}

body.rtl .column-header__buttons {
    left: 0;
    right: auto;
    margin-left: 0;
    margin-right: -15px
}

body.rtl .column-inline-form .icon-button {
    margin-left: 0;
    margin-right: 5px
}

body.rtl .column-header__links .text-btn {
    margin-left: 10px;
    margin-right: 0
}

body.rtl .account__avatar-wrapper {
    float: right
}

body.rtl .column-header__back-button {
    padding-left: 5px;
    padding-right: 0
}

body.rtl .column-header__setting-arrows {
    float: left
}

body.rtl .setting-toggle__label {
    margin-left: 0;
    margin-right: 8px
}

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 .status__action-bar__counter {
    margin-right: 0;
    margin-left: 11px
}

body.rtl .status__action-bar__counter .status__action-bar-button {
    margin-right: 0;
    margin-left: 4px
}

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-name .display-name {
    text-align: right
}

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: 2.14285714em
}

body.rtl .fa-li {
    left: auto;
    right: -2.14285714em
}

body.rtl .admin-wrapper {
    direction: rtl
}

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 {
    padding-left: 0;
    padding-right: 25px
}

body.rtl .simple_form .input.with_label.boolean label.checkbox {
    padding-left: 25px;
    padding-right: 0
}

body.rtl .simple_form .check_boxes .checkbox input[type=checkbox], body.rtl .simple_form .input.boolean input[type=checkbox], body.rtl .simple_form .input.radio_buttons .radio {
    left: auto;
    right: 0
}

body.rtl .simple_form .input.radio_buttons .radio>label {
    padding-right: 28px;
    padding-left: 0
}

body.rtl .simple_form .input-with-append .input input {
    padding-left: 142px;
    padding-right: 0
}

body.rtl .simple_form .input.boolean label.checkbox {
    left: auto;
    right: 0
}

body.rtl .simple_form .input.boolean .hint, body.rtl .simple_form .input.boolean .label_input {
    padding-left: 0;
    padding-right: 28px
}

body.rtl .simple_form .label_input__append {
    right: auto;
    left: 3px
}

body.rtl .simple_form .label_input__append:after {
    right: auto;
    left: 0;
    background-image: linear-gradient(270deg, rgba(19, 20, 25, 0), #131419)
}

body.rtl .simple_form select {
    background: #131419 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='%2342485A'/></svg>") no-repeat left 8px center/auto 16px
}

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__call-to-action .row__information-board {
    direction: rtl
}

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
    }
}

body.rtl .columns-area--mobile .column, body.rtl .columns-area--mobile .drawer {
    padding-left: 0;
    padding-right: 0
}

body.rtl .public-layout .header .nav-button {
    margin-left: 8px;
    margin-right: 0
}

body.rtl .public-layout .public-account-header__tabs {
    margin-left: 0;
    margin-right: 20px
}

body.rtl .landing-page__information .account__display-name {
    margin-right: 0;
    margin-left: 5px
}

body.rtl .landing-page__information .account__avatar-wrapper {
    margin-left: 12px;
    margin-right: 0
}

body.rtl .card__bar .display-name {
    margin-left: 0;
    margin-right: 15px;
    text-align: right
}

body.rtl .fa-chevron-left:before {
    content: ""
}

body.rtl .fa-chevron-right:before {
    content: ""
}

body.rtl .column-back-button__icon {
    margin-right: 0;
    margin-left: 5px
}

body.rtl .column-header__setting-arrows .column-header__setting-btn:last-child {
    padding-left: 0;
    padding-right: 10px
}

body.rtl .simple_form .input.radio_buttons .radio>label input {
    left: auto;
    right: 0
}

.emojione[title=":8ball:"], .emojione[title=":ant:"], .emojione[title=":back:"], .emojione[title=":black_circle:"], .emojione[title=":black_heart:"], .emojione[title=":black_large_square:"], .emojione[title=":black_medium_small_square:"], .emojione[title=":black_medium_square:"], .emojione[title=":black_nib:"], .emojione[title=":black_small_square:"], .emojione[title=":bomb:"], .emojione[title=":bowling:"], .emojione[title=":bust_in_silhouette:"], .emojione[title=":busts_in_silhouette:"], .emojione[title=":camera:"], .emojione[title=":camera_with_flash:"], .emojione[title=":clubs:"], .emojione[title=":copyright:"], .emojione[title=":curly_loop:"], .emojione[title=":currency_exchange:"], .emojione[title=":dark_sunglasses:"], .emojione[title=":eight_pointed_black_star:"], .emojione[title=":electric_plug:"], .emojione[title=":end:"], .emojione[title=":female-guard:"], .emojione[title=":film_projector:"], .emojione[title=":fried_egg:"], .emojione[title=":gorilla:"], .emojione[title=":guardsman:"], .emojione[title=":heavy_check_mark:"], .emojione[title=":heavy_division_sign:"], .emojione[title=":heavy_dollar_sign:"], .emojione[title=":heavy_minus_sign:"], .emojione[title=":heavy_multiplication_x:"], .emojione[title=":heavy_plus_sign:"], .emojione[title=":hocho:"], .emojione[title=":hole:"], .emojione[title=":joystick:"], .emojione[title=":kaaba:"], .emojione[title=":lower_left_ballpoint_pen:"], .emojione[title=":lower_left_fountain_pen:"], .emojione[title=":male-guard:"], .emojione[title=":microphone:"], .emojione[title=":mortar_board:"], .emojione[title=":movie_camera:"], .emojione[title=":musical_score:"], .emojione[title=":on:"], .emojione[title=":registered:"], .emojione[title=":soon:"], .emojione[title=":spades:"], .emojione[title=":speaking_head_in_silhouette:"], .emojione[title=":spider:"], .emojione[title=":telephone_receiver:"], .emojione[title=":tm:"], .emojione[title=":top:"], .emojione[title=":tophat:"], .emojione[title=":turkey:"], .emojione[title=":vhs:"], .emojione[title=":video_camera:"], .emojione[title=":video_game:"], .emojione[title=":water_buffalo:"], .emojione[title=":waving_black_flag:"], .emojione[title=":wavy_dash:"] {
    -webkit-filter: drop-shadow(1px 1px 0 #fff) drop-shadow(-1px 1px 0 #fff) drop-shadow(1px -1px 0 #fff) drop-shadow(-1px -1px 0 #fff);
    filter: drop-shadow(1px 1px 0 #ffffff) drop-shadow(-1px 1px 0 #ffffff) drop-shadow(1px -1px 0 #ffffff) drop-shadow(-1px -1px 0 #ffffff);
    transform: scale(.71)
}


@charset "UTF-8";
@font-face {
    font-family: "mastodon-font-sans-serif";
    src: local("Roboto Italic"), url(/packs/media/fonts/roboto/roboto-italic-webfont-50efdad8c62f5f279e3f4f1f63a4f9bc.woff2) format("woff2"), url(/packs/media/fonts/roboto/roboto-italic-webfont-927fdbf83b347742d39f0b00f3cfa99a.woff) format("woff"), url(/packs/media/fonts/roboto/roboto-italic-webfont-4c71bd4a88468ea62f92e55cb4e33aef.ttf) format("truetype"), url(/packs/media/fonts/roboto/roboto-italic-webfont-d88a9e8476fabedea3b87fd0ba2df3b3.svg#roboto-italic-webfont) format("svg");
    font-weight: 400;
    font-style: italic
}

@font-face {
    font-family: "mastodon-font-sans-serif";
    src: local("Roboto Bold"), url(/packs/media/fonts/roboto/roboto-bold-webfont-f633cb5c651ba4d50791e1adf55d3c18.woff2) format("woff2"), url(/packs/media/fonts/roboto/roboto-bold-webfont-df0f5fd966b99c0f503ae50c064fbba8.woff) format("woff"), url(/packs/media/fonts/roboto/roboto-bold-webfont-5bacc29257521cc73732f2597cc19c4b.ttf) format("truetype"), url(/packs/media/fonts/roboto/roboto-bold-webfont-4cbd1966fc397282fa35d69070782b80.svg#roboto-bold-webfont) format("svg");
    font-weight: 700;
    font-style: normal
}

@font-face {
    font-family: "mastodon-font-sans-serif";
    src: local("Roboto Medium"), url(/packs/media/fonts/roboto/roboto-medium-webfont-69c55fc2fe77d38934ea98dc31642ce6.woff2) format("woff2"), url(/packs/media/fonts/roboto/roboto-medium-webfont-6484794cd05bbf97f3f0c730cec21665.woff) format("woff"), url(/packs/media/fonts/roboto/roboto-medium-webfont-7f0e4c7727a4bc5f37d95d804c6e0348.ttf) format("truetype"), url(/packs/media/fonts/roboto/roboto-medium-webfont-f407ec033f15172c3c4acf75608dd11d.svg#roboto-medium-webfont) format("svg");
    font-weight: 500;
    font-style: normal
}

@font-face {
    font-family: "mastodon-font-sans-serif";
    src: local("Roboto"), url(/packs/media/fonts/roboto/roboto-regular-webfont-3ec24f953ed5e859a6402cb3c030ea8b.woff2) format("woff2"), url(/packs/media/fonts/roboto/roboto-regular-webfont-b06ad091cf548c38401f3e5883cb36a2.woff) format("woff"), url(/packs/media/fonts/roboto/roboto-regular-webfont-42a434b9f3c8c7a57b83488483b2d08e.ttf) format("truetype"), url(/packs/media/fonts/roboto/roboto-regular-webfont-77dc6a0145954a963b95d30773543105.svg#roboto-regular-webfont) format("svg");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: "mastodon-font-monospace";
    src: local("Roboto Mono"), url(/packs/media/fonts/roboto-mono/robotomono-regular-webfont-6c1ce30b90ee993b22618ec489585594.woff2) format("woff2"), url(/packs/media/fonts/roboto-mono/robotomono-regular-webfont-09e0ef66c9dee2fa2689f6e5f2437670.woff) format("woff"), url(/packs/media/fonts/roboto-mono/robotomono-regular-webfont-0ba95b3b2370e6bf1dcdb20aa3a54ff2.ttf) format("truetype"), url(/packs/media/fonts/roboto-mono/robotomono-regular-webfont-51e9ccf8c829f4894a7e5a0883e864fc.svg#roboto_monoregular) format("svg");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: mastodon-font-display;
    src: local("Montserrat"), url(/packs/media/fonts/montserrat/Montserrat-Regular-080422d4c1328f3407818d25c86cce51.woff2) format("woff2"), url(/packs/media/fonts/montserrat/Montserrat-Regular-b0322f2faed575161a052b5af953251a.woff) format("woff"), url(/packs/media/fonts/montserrat/Montserrat-Regular-6a18f75e59e23e7f23b8a4ef70d748cd.ttf) format("truetype");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: mastodon-font-display;
    src: local("Montserrat Medium"), url(/packs/media/fonts/montserrat/Montserrat-Medium-5f797490f806b3b229299f0a66de89c9.ttf) format("truetype");
    font-weight: 500;
    font-style: normal
}

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
}

html {
    scrollbar-color: #313543 rgba(0, 0, 0, .1)
}

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

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

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

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

::-webkit-scrollbar-track {
    border: 0 #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: #191b22;
    font-size: 13px;
    line-height: 18px;
    font-weight: 400;
    color: #fff;
    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: rgba(0, 0, 0, 0);
    -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 {
    padding: 0
}

body.app-body.layout-single-column {
    height: auto;
    min-height: 100vh;
    overflow-y: scroll
}

body.app-body.layout-multiple-columns {
    position: absolute;
    width: 100%;
    height: 100%
}

body.app-body.with-modals--active {
    overflow-y: hidden
}

body.lighter {
    background: #282c37
}

body.with-modals {
    overflow-x: hidden;
    overflow-y: scroll
}

body.with-modals--active {
    overflow-y: hidden
}

body.player {
    text-align: center
}

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

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

body.admin {
    background: #1f232b;
    padding: 0
}

body.error {
    position: absolute;
    text-align: center;
    color: #9baec8;
    background: #282c37;
    width: 100%;
    height: 100%;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center
}

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

body.error .dialog__illustration 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, .app-holder>noscript {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    outline: 0!important
}

.app-holder>noscript {
    height: 100vh
}

.layout-single-column .app-holder, .layout-single-column .app-holder>div {
    min-height: 100vh
}

.layout-multiple-columns .app-holder, .layout-multiple-columns .app-holder>div {
    height: 100%
}

.app-holder noscript, .error-boundary {
    flex-direction: column;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.7;
    color: #e25169;
    text-align: center
}

.app-holder noscript>div, .error-boundary>div {
    max-width: 500px
}

.app-holder noscript p, .error-boundary p {
    margin-bottom: .85em
}

.app-holder noscript p:last-child, .error-boundary p:last-child {
    margin-bottom: 0
}

.app-holder noscript a, .error-boundary a {
    color: #2b90d9
}

.app-holder noscript a:active, .app-holder noscript a:focus, .app-holder noscript a:hover, .error-boundary a:active, .error-boundary a:focus, .error-boundary a:hover {
    text-decoration: none
}

.app-holder noscript__footer, .error-boundary__footer {
    color: #606984;
    font-size: 13px
}

.app-holder noscript__footer a, .error-boundary__footer a {
    color: #606984
}

.app-holder noscript button, .error-boundary button {
    display: inline;
    border: 0;
    background: transparent;
    color: #606984;
    font: inherit;
    padding: 0;
    margin: 0;
    line-height: inherit;
    cursor: pointer;
    outline: 0;
    transition: color .3s linear;
    text-decoration: underline
}

.app-holder noscript button:active, .app-holder noscript button:focus, .app-holder noscript button:hover, .error-boundary button:active, .error-boundary button:focus, .error-boundary button:hover {
    text-decoration: none
}

.app-holder noscript button.copied, .error-boundary button.copied {
    color: #79bd9a;
    transition: none
}

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

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

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

@media screen and (max-width:500px) {
    .logo-container {
        margin: 40px auto 0
    }
}

.logo-container h1 {
    display: flex;
    justify-content: center;
    align-items: center
}

.logo-container h1 svg {
    fill: #fff;
    height: 42px;
    margin-right: 10px
}

.logo-container h1 a {
    display: flex;
    justify-content: 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;
    padding: 20px 0;
    margin: 40px auto 0;
    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;
    display: flex;
    font-size: 13px;
    line-height: 18px;
    box-sizing: border-box;
    padding: 20px 0 0;
    margin: 40px auto -30px
}

@media screen and (max-width:440px) {
    .account-header {
        width: 100%;
        margin: 0 0 10px;
        padding: 20px 20px 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 {
    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
}

.grid-3 {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 3fr 1fr;
    grid-auto-columns: 25%;
    grid-auto-rows: -webkit-max-content;
    grid-auto-rows: max-content
}

.grid-3 .column-0 {
    grid-column: 1/3;
    grid-row: 1
}

.grid-3 .column-1 {
    grid-column: 1;
    grid-row: 2
}

.grid-3 .column-2 {
    grid-column: 2;
    grid-row: 2
}

.grid-3 .column-3 {
    grid-column: 1/3;
    grid-row: 3
}

@media screen and (max-width:415px) {
    .grid-3 {
        grid-gap: 0;
        grid-template-columns: minmax(0, 100%)
    }
    .grid-3 .column-0 {
        grid-column: 1
    }
    .grid-3 .column-1 {
        grid-column: 1;
        grid-row: 3
    }
    .grid-3 .column-2 {
        grid-column: 1;
        grid-row: 2
    }
    .grid-3 .column-3 {
        grid-column: 1;
        grid-row: 4
    }
}

.grid-4 {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-columns: 25%;
    grid-auto-rows: -webkit-max-content;
    grid-auto-rows: max-content
}

.grid-4 .column-0 {
    grid-column: 1/5;
    grid-row: 1
}

.grid-4 .column-1 {
    grid-column: 1/4;
    grid-row: 2
}

.grid-4 .column-2 {
    grid-column: 4;
    grid-row: 2
}

.grid-4 .column-3 {
    grid-column: 2/5;
    grid-row: 3
}

.grid-4 .column-4 {
    grid-column: 1;
    grid-row: 3
}

.grid-4 .landing-page__call-to-action {
    min-height: 100%
}

.grid-4 .flash-message {
    margin-bottom: 10px
}

@media screen and (max-width:738px) {
    .grid-4 {
        grid-template-columns: minmax(0, 50%) minmax(0, 50%)
    }
    .grid-4 .landing-page__call-to-action {
        padding: 20px;
        display: flex;
        align-items: center;
        justify-content: center
    }
    .grid-4 .row__information-board {
        width: 100%;
        justify-content: center;
        align-items: center
    }
    .grid-4 .row__mascot {
        display: none
    }
}

@media screen and (max-width:415px) {
    .grid-4 {
        grid-gap: 0;
        grid-template-columns: minmax(0, 100%)
    }
    .grid-4 .column-0 {
        grid-column: 1
    }
    .grid-4 .column-1 {
        grid-column: 1;
        grid-row: 3
    }
    .grid-4 .column-2 {
        grid-column: 1;
        grid-row: 2
    }
    .grid-4 .column-3 {
        grid-column: 1;
        grid-row: 5
    }
    .grid-4 .column-4 {
        grid-column: 1;
        grid-row: 4
    }
}

@media screen and (max-width:415px) {
    .public-layout {
        padding-top: 48px
    }
}

.public-layout .container {
    max-width: 960px
}

@media screen and (max-width:415px) {
    .public-layout .container {
        padding: 0
    }
}

.public-layout .header {
    background: #393f4f;
    box-shadow: 0 0 15px rgba(0, 0, 0, .2);
    border-radius: 4px;
    height: 48px;
    margin: 10px 0;
    display: flex;
    align-items: stretch;
    justify-content: center;
    flex-wrap: nowrap;
    overflow: hidden
}

@media screen and (max-width:415px) {
    .public-layout .header {
        position: fixed;
        width: 100%;
        top: 0;
        left: 0;
        margin: 0;
        border-radius: 0;
        box-shadow: none;
        z-index: 110
    }
}

.public-layout .header>div {
    flex: 1 1 33.3%;
    min-height: 1px
}

.public-layout .header .nav-left {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    flex-wrap: nowrap
}

.public-layout .header .nav-center {
    display: flex;
    align-items: stretch;
    justify-content: center;
    flex-wrap: nowrap
}

.public-layout .header .nav-right {
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    flex-wrap: nowrap
}

.public-layout .header .brand {
    display: block;
    padding: 15px
}

.public-layout .header .brand svg {
    display: block;
    height: 18px;
    width: auto;
    position: relative;
    bottom: -2px;
    fill: #fff
}

@media screen and (max-width:415px) {
    .public-layout .header .brand svg {
        height: 20px
    }
}

.public-layout .header .brand:active, .public-layout .header .brand:focus, .public-layout .header .brand:hover {
    background: #42485a
}

.public-layout .header .nav-link {
    display: flex;
    align-items: center;
    padding: 0 1rem;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    color: #9baec8;
    white-space: nowrap;
    text-align: center
}

.public-layout .header .nav-link:active, .public-layout .header .nav-link:focus, .public-layout .header .nav-link:hover {
    text-decoration: underline;
    color: #fff
}

@media screen and (max-width:550px) {
    .public-layout .header .nav-link.optional {
        display: none
    }
}

.public-layout .header .nav-button {
    background: #4a5266;
    margin: 8px 8px 8px 0;
    border-radius: 4px
}

.public-layout .header .nav-button:active, .public-layout .header .nav-button:focus, .public-layout .header .nav-button:hover {
    text-decoration: none;
    background: #535b72
}

.public-layout .grid {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: minmax(300px, 3fr) minmax(298px, 1fr);
    grid-auto-columns: 25%;
    grid-auto-rows: -webkit-max-content;
    grid-auto-rows: max-content
}

.public-layout .grid .column-0 {
    grid-row: 1;
    grid-column: 1
}

.public-layout .grid .column-1 {
    grid-row: 1;
    grid-column: 2
}

@media screen and (max-width:600px) {
    .public-layout .grid {
        grid-template-columns: 100%;
        grid-gap: 0
    }
    .public-layout .grid .column-1 {
        display: none
    }
}

.public-layout .directory__card {
    border-radius: 4px
}

@media screen and (max-width:415px) {
    .public-layout .directory__card {
        border-radius: 0
    }
}

@media screen and (max-width:415px) {
    .public-layout .page-header {
        border-bottom: 0
    }
}

.public-layout .public-account-header {
    overflow: hidden;
    margin-bottom: 10px;
    box-shadow: 0 0 15px rgba(0, 0, 0, .2)
}

.public-layout .public-account-header.inactive {
    opacity: .5
}

.public-layout .public-account-header.inactive .avatar, .public-layout .public-account-header.inactive .public-account-header__image {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%)
}

.public-layout .public-account-header.inactive .logo-button {
    background-color: #d9e1e8
}

.public-layout .public-account-header__image {
    border-radius: 4px 4px 0 0;
    overflow: hidden;
    height: 300px;
    position: relative;
    background: #0e1014
}

.public-layout .public-account-header__image:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    box-shadow: inset 0 -1px 1px 1px rgba(0, 0, 0, .15);
    top: 0;
    left: 0
}

.public-layout .public-account-header__image img {
    -o-object-fit: cover;
    font-family: "object-fit:cover";
    object-fit: cover;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: 4px 4px 0 0
}

@media screen and (max-width:600px) {
    .public-layout .public-account-header__image {
        height: 200px
    }
}

.public-layout .public-account-header--no-bar {
    margin-bottom: 0
}

.public-layout .public-account-header--no-bar .public-account-header__image, .public-layout .public-account-header--no-bar .public-account-header__image img {
    border-radius: 4px
}

@media screen and (max-width:415px) {
    .public-layout .public-account-header--no-bar .public-account-header__image, .public-layout .public-account-header--no-bar .public-account-header__image img {
        border-radius: 0
    }
}

@media screen and (max-width:415px) {
    .public-layout .public-account-header {
        margin-bottom: 0;
        box-shadow: none
    }
    .public-layout .public-account-header__image:after {
        display: none
    }
    .public-layout .public-account-header__image, .public-layout .public-account-header__image img {
        border-radius: 0
    }
}

.public-layout .public-account-header__bar {
    position: relative;
    margin-top: -80px;
    display: flex;
    justify-content: flex-start
}

.public-layout .public-account-header__bar:before {
    content: "";
    display: block;
    background: #313543;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    border-radius: 0 0 4px 4px;
    z-index: -1
}

.public-layout .public-account-header__bar .avatar {
    display: block;
    width: 120px;
    height: 120px;
    padding-left: 16px;
    flex: 0 0 auto
}

.public-layout .public-account-header__bar .avatar img {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: 50%;
    border: 4px solid #313543;
    background: #17191f
}

@media screen and (max-width:600px) {
    .public-layout .public-account-header__bar {
        margin-top: 0;
        background: #313543;
        border-radius: 0 0 4px 4px;
        padding: 5px
    }
    .public-layout .public-account-header__bar:before {
        display: none
    }
    .public-layout .public-account-header__bar .avatar {
        width: 48px;
        height: 48px;
        padding: 7px 0 7px 10px
    }
    .public-layout .public-account-header__bar .avatar img {
        border: 0;
        border-radius: 4px
    }
}

@media screen and (max-width:600px) and (max-width:360px) {
    .public-layout .public-account-header__bar .avatar {
        display: none
    }
}

@media screen and (max-width:415px) {
    .public-layout .public-account-header__bar {
        border-radius: 0
    }
}

@media screen and (max-width:600px) {
    .public-layout .public-account-header__bar {
        flex-wrap: wrap
    }
}

.public-layout .public-account-header__tabs {
    flex: 1 1 auto;
    margin-left: 20px
}

.public-layout .public-account-header__tabs__name {
    padding-top: 20px;
    padding-bottom: 8px
}

.public-layout .public-account-header__tabs__name h1 {
    font-size: 20px;
    line-height: 27px;
    color: #fff;
    font-weight: 500;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-shadow: 1px 1px 1px #000
}

.public-layout .public-account-header__tabs__name h1 small {
    display: block;
    font-size: 14px;
    color: #fff;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis
}

@media screen and (max-width:600px) {
    .public-layout .public-account-header__tabs {
        margin-left: 15px;
        display: flex;
        justify-content: space-between;
        align-items: center
    }
    .public-layout .public-account-header__tabs__name {
        padding-top: 0;
        padding-bottom: 0
    }
    .public-layout .public-account-header__tabs__name h1 {
        font-size: 16px;
        line-height: 24px;
        text-shadow: none
    }
    .public-layout .public-account-header__tabs__name h1 small {
        color: #9baec8
    }
}

.public-layout .public-account-header__tabs__tabs {
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    height: 58px
}

.public-layout .public-account-header__tabs__tabs .details-counters {
    display: flex;
    flex-direction: row;
    min-width: 300px
}

@media screen and (max-width:600px) {
    .public-layout .public-account-header__tabs__tabs .details-counters {
        display: none
    }
}

.public-layout .public-account-header__tabs__tabs .counter {
    width: 33.3%;
    box-sizing: border-box;
    flex: 0 0 auto;
    color: #9baec8;
    padding: 10px;
    border-right: 1px solid #313543;
    cursor: default;
    text-align: center;
    position: relative
}

.public-layout .public-account-header__tabs__tabs .counter a {
    display: block
}

.public-layout .public-account-header__tabs__tabs .counter:last-child {
    border-right: 0
}

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

.public-layout .public-account-header__tabs__tabs .counter.active:after {
    border-bottom: 4px solid #2b90d9;
    opacity: 1
}

.public-layout .public-account-header__tabs__tabs .counter.active.inactive:after {
    border-bottom-color: #d9e1e8
}

.public-layout .public-account-header__tabs__tabs .counter:hover:after {
    opacity: 1;
    transition-duration: .1s
}

.public-layout .public-account-header__tabs__tabs .counter a {
    text-decoration: none;
    color: inherit
}

.public-layout .public-account-header__tabs__tabs .counter .counter-label {
    font-size: 12px;
    display: block
}

.public-layout .public-account-header__tabs__tabs .counter .counter-number {
    font-weight: 500;
    font-size: 18px;
    margin-bottom: 5px;
    color: #fff;
    font-family: mastodon-font-display, sans-serif
}

.public-layout .public-account-header__tabs__tabs .spacer {
    flex: 1 1 auto;
    height: 1px
}

.public-layout .public-account-header__tabs__tabs__buttons {
    padding: 7px 8px
}

.public-layout .public-account-header__extra {
    display: none;
    margin-top: 4px
}

.public-layout .public-account-header__extra .public-account-bio {
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    margin: 0 -5px
}

.public-layout .public-account-header__extra .public-account-bio .account__header__fields {
    border-top: 1px solid #42485a
}

.public-layout .public-account-header__extra .public-account-bio .roles {
    display: none
}

.public-layout .public-account-header__extra__links {
    margin-top: -15px;
    font-size: 14px;
    color: #9baec8
}

.public-layout .public-account-header__extra__links a {
    display: inline-block;
    color: #9baec8;
    text-decoration: none;
    padding: 15px;
    font-weight: 500
}

.public-layout .public-account-header__extra__links a strong {
    font-weight: 700;
    color: #fff
}

@media screen and (max-width:600px) {
    .public-layout .public-account-header__extra {
        display: block;
        flex: 100%
    }
}

.public-layout .account__section-headline {
    border-radius: 4px 4px 0 0
}

@media screen and (max-width:415px) {
    .public-layout .account__section-headline {
        border-radius: 0
    }
}

.public-layout .detailed-status__meta {
    margin-top: 25px
}

.public-layout .public-account-bio {
    background: #393f4f;
    box-shadow: 0 0 15px rgba(0, 0, 0, .2);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 10px
}

@media screen and (max-width:415px) {
    .public-layout .public-account-bio {
        box-shadow: none;
        margin-bottom: 0;
        border-radius: 0
    }
}

.public-layout .public-account-bio .account__header__fields {
    margin: 0;
    border-top: 0
}

.public-layout .public-account-bio .account__header__fields a {
    color: #4ea2df
}

.public-layout .public-account-bio .account__header__fields dl:first-child .verified {
    border-radius: 0 4px 0 0
}

.public-layout .public-account-bio .account__header__fields .verified a {
    color: #79bd9a
}

.public-layout .public-account-bio .account__header__content {
    padding: 20px 20px 0;
    color: #fff
}

.public-layout .public-account-bio .roles, .public-layout .public-account-bio__extra {
    padding: 20px;
    font-size: 14px;
    color: #9baec8
}

.public-layout .public-account-bio .roles {
    padding-bottom: 0
}

.public-layout .directory__list {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: minmax(0, 50%) minmax(0, 50%)
}

@media screen and (max-width:415px) {
    .public-layout .directory__list {
        display: block
    }
}

.public-layout .directory__list .icon-button {
    font-size: 18px
}

.public-layout .directory__card {
    margin-bottom: 0
}

.public-layout .card-grid {
    display: flex;
    flex-wrap: wrap;
    min-width: 100%;
    margin: 0 -5px
}

.public-layout .card-grid>div {
    box-sizing: border-box;
    flex: 1 0 auto;
    width: 300px;
    padding: 0 5px;
    margin-bottom: 10px;
    max-width: 33.333%
}

@media screen and (max-width:900px) {
    .public-layout .card-grid>div {
        max-width: 50%
    }
}

@media screen and (max-width:600px) {
    .public-layout .card-grid>div {
        max-width: 100%
    }
}

@media screen and (max-width:415px) {
    .public-layout .card-grid {
        margin: 0;
        border-top: 1px solid #393f4f
    }
    .public-layout .card-grid>div {
        width: 100%;
        padding: 0;
        margin-bottom: 0;
        border-bottom: 1px solid #393f4f
    }
    .public-layout .card-grid>div:last-child {
        border-bottom: 0
    }
    .public-layout .card-grid>div .card__bar {
        background: #282c37
    }
    .public-layout .card-grid>div .card__bar:active, .public-layout .card-grid>div .card__bar:focus, .public-layout .card-grid>div .card__bar:hover {
        background: #313543
    }
}

.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
}

.public-layout .footer {
    text-align: left;
    padding-top: 20px;
    padding-bottom: 60px;
    font-size: 12px;
    color: #737d99
}

@media screen and (max-width:415px) {
    .public-layout .footer {
        padding-left: 20px;
        padding-right: 20px
    }
}

.public-layout .footer .grid {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 1fr 1fr 2fr 1fr 1fr
}

.public-layout .footer .grid .column-0 {
    grid-column: 1;
    grid-row: 1;
    min-width: 0
}

.public-layout .footer .grid .column-1 {
    grid-column: 2;
    grid-row: 1;
    min-width: 0
}

.public-layout .footer .grid .column-2 {
    grid-column: 3;
    grid-row: 1;
    min-width: 0;
    text-align: center
}

.public-layout .footer .grid .column-2 h4 a {
    color: #737d99
}

.public-layout .footer .grid .column-3 {
    grid-column: 4;
    grid-row: 1;
    min-width: 0
}

.public-layout .footer .grid .column-4 {
    grid-column: 5;
    grid-row: 1;
    min-width: 0
}

@media screen and (max-width:690px) {
    .public-layout .footer .grid {
        grid-template-columns: 1fr 2fr 1fr
    }
    .public-layout .footer .grid .column-0, .public-layout .footer .grid .column-1 {
        grid-column: 1
    }
    .public-layout .footer .grid .column-1 {
        grid-row: 2
    }
    .public-layout .footer .grid .column-2 {
        grid-column: 2
    }
    .public-layout .footer .grid .column-3, .public-layout .footer .grid .column-4 {
        grid-column: 3
    }
    .public-layout .footer .grid .column-4 {
        grid-row: 2
    }
}

@media screen and (max-width:600px) {
    .public-layout .footer .grid .column-1 {
        display: block
    }
}

@media screen and (max-width:415px) {
    .public-layout .footer .grid .column-0, .public-layout .footer .grid .column-1, .public-layout .footer .grid .column-3, .public-layout .footer .grid .column-4 {
        display: none
    }
}

.public-layout .footer h4 {
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 8px;
    color: #9baec8
}

.public-layout .footer h4 a {
    color: inherit;
    text-decoration: none
}

.public-layout .footer ul a {
    text-decoration: none;
    color: #737d99
}

.public-layout .footer ul a:active, .public-layout .footer ul a:focus, .public-layout .footer ul a:hover {
    text-decoration: underline
}

.public-layout .footer .brand svg {
    display: block;
    height: 36px;
    width: auto;
    margin: 0 auto;
    fill: #737d99
}

.public-layout .footer .brand:active svg, .public-layout .footer .brand:focus svg, .public-layout .footer .brand:hover svg {
    fill: #7f88a2
}

.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
}

.hero-widget {
    margin-bottom: 10px;
    box-shadow: 0 0 15px rgba(0, 0, 0, .2)
}

.hero-widget__img {
    width: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 4px 4px 0 0;
    background: #000
}

.hero-widget__img img {
    -o-object-fit: cover;
    font-family: "object-fit:cover";
    object-fit: cover;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: 4px 4px 0 0
}

.hero-widget__text {
    background: #282c37;
    padding: 20px;
    border-radius: 0 0 4px 4px;
    font-size: 15px;
    color: #9baec8;
    line-height: 20px;
    word-wrap: break-word;
    font-weight: 400
}

.hero-widget__text .emojione {
    width: 20px;
    height: 20px;
    margin: -3px 0 0
}

.hero-widget__text p {
    margin-bottom: 20px
}

.hero-widget__text p:last-child {
    margin-bottom: 0
}

.hero-widget__text em {
    display: inline;
    margin: 0;
    padding: 0;
    font-weight: 700;
    background: transparent;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: #bcc9da
}

.hero-widget__text a {
    color: #d9e1e8;
    text-decoration: none
}

.hero-widget__text a:hover {
    text-decoration: underline
}

@media screen and (max-width:415px) {
    .hero-widget {
        display: none
    }
}

.endorsements-widget {
    margin-bottom: 10px;
    padding-bottom: 10px
}

.endorsements-widget h4 {
    padding: 10px;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 13px;
    color: #9baec8
}

.endorsements-widget .account {
    padding: 10px 0
}

.endorsements-widget .account:last-child {
    border-bottom: 0
}

.endorsements-widget .account .account__display-name {
    display: flex;
    align-items: center
}

.endorsements-widget .account .account__avatar {
    width: 44px;
    height: 44px;
    background-size: 44px 44px
}

.endorsements-widget .trends__item {
    padding: 10px
}

.trends-widget h4 {
    color: #9baec8
}

.box-widget {
    padding: 20px;
    border-radius: 4px;
    background: #282c37;
    box-shadow: 0 0 15px rgba(0, 0, 0, .2)
}

.placeholder-widget {
    padding: 16px;
    border-radius: 4px;
    border: 2px dashed #606984;
    text-align: center;
    color: #9baec8;
    margin-bottom: 10px
}

.contact-widget {
    min-height: 100%;
    font-size: 15px;
    color: #9baec8;
    line-height: 20px;
    word-wrap: break-word;
    font-weight: 400;
    padding: 0
}

.contact-widget h4 {
    padding: 10px;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 13px;
    color: #9baec8
}

.contact-widget .account {
    border-bottom: 0;
    padding: 5px 0 10px
}

.contact-widget>a {
    display: inline-block;
    padding: 0 10px 10px;
    color: #9baec8;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.contact-widget>a:active, .contact-widget>a:focus, .contact-widget>a:hover {
    text-decoration: underline
}

.moved-account-widget {
    padding: 15px 15px 20px;
    border-radius: 4px;
    background: #282c37;
    box-shadow: 0 0 15px rgba(0, 0, 0, .2);
    color: #d9e1e8;
    font-weight: 400;
    margin-bottom: 10px
}

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

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

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

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

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

.moved-account-widget__message {
    margin-bottom: 15px
}

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

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

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

.moved-account-widget__card .detailed-status__display-name span {
    font-weight: 400
}

.memoriam-widget {
    padding: 20px;
    background: #000;
    font-size: 14px;
    color: #9baec8;
    margin-bottom: 10px
}

.memoriam-widget, .page-header {
    border-radius: 4px;
    box-shadow: 0 0 15px rgba(0, 0, 0, .2)
}

.page-header {
    background: #393f4f;
    padding: 60px 15px;
    text-align: center;
    margin: 10px 0
}

.page-header h1 {
    color: #fff;
    font-size: 36px;
    line-height: 1.1;
    font-weight: 700;
    margin-bottom: 10px
}

.page-header p {
    font-size: 15px;
    color: #9baec8
}

@media screen and (max-width:415px) {
    .page-header {
        margin-top: 0;
        background: #313543
    }
    .page-header h1 {
        font-size: 24px
    }
}

.directory {
    background: #282c37;
    border-radius: 4px;
    box-shadow: 0 0 15px rgba(0, 0, 0, .2)
}

.directory__tag {
    box-sizing: border-box;
    margin-bottom: 10px
}

.directory__tag>a, .directory__tag>div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #282c37;
    border-radius: 4px;
    padding: 15px;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 0 15px rgba(0, 0, 0, .2)
}

.directory__tag>a:active, .directory__tag>a:focus, .directory__tag>a:hover {
    background: #393f4f
}

.directory__tag.active>a {
    background: #2b90d9;
    cursor: default
}

.directory__tag.disabled>div {
    opacity: .5;
    cursor: default
}

.directory__tag h4 {
    flex: 1 1 auto;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.directory__tag h4 .fa {
    color: #9baec8
}

.directory__tag h4 small {
    display: block;
    font-weight: 400;
    font-size: 15px;
    margin-top: 8px;
    color: #9baec8
}

.directory__tag.active h4, .directory__tag.active h4 .fa, .directory__tag.active h4 .trends__item__current, .directory__tag.active h4 small {
    color: #fff
}

.directory__tag .avatar-stack {
    flex: 0 0 auto;
    width: 120px
}

.directory__tag.active .avatar-stack .account__avatar {
    border-color: #2b90d9
}

.directory__tag .trends__item__current {
    padding-right: 0
}

.avatar-stack {
    display: flex;
    justify-content: flex-end
}

.avatar-stack .account__avatar {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    position: relative;
    margin-left: -10px;
    background: #17191f;
    border: 2px solid #282c37
}

.avatar-stack .account__avatar:first-child {
    z-index: 1
}

.avatar-stack .account__avatar:nth-child(2) {
    z-index: 2
}

.avatar-stack .account__avatar:nth-child(3) {
    z-index: 3
}

.accounts-table {
    width: 100%
}

.accounts-table .account {
    padding: 0;
    border: 0
}

.accounts-table strong {
    font-weight: 700
}

.accounts-table thead th {
    text-align: center;
    text-transform: uppercase;
    color: #9baec8;
    font-weight: 700;
    padding: 10px
}

.accounts-table thead th:first-child {
    text-align: left
}

.accounts-table tbody td {
    padding: 15px 0;
    vertical-align: middle;
    border-bottom: 1px solid #393f4f
}

.accounts-table tbody tr:last-child td {
    border-bottom: 0
}

.accounts-table__count {
    width: 120px;
    text-align: center;
    font-size: 15px;
    font-weight: 500;
    color: #fff
}

.accounts-table__count small {
    display: block;
    color: #9baec8;
    font-weight: 400;
    font-size: 14px
}

.accounts-table__comment {
    width: 50%;
    vertical-align: initial!important
}

@media screen and (max-width:415px) {
    .accounts-table tbody td.optional {
        display: none
    }
}

@media screen and (max-width:415px) {
    .box-widget, .contact-widget, .directory, .landing-page__information.contact-widget, .memoriam-widget, .moved-account-widget, .page-header {
        margin-bottom: 0;
        box-shadow: none;
        border-radius: 0
    }
}

.statuses-grid {
    min-height: 600px
}

@media screen and (max-width:640px) {
    .statuses-grid {
        width: 100%!important
    }
}

.statuses-grid__item {
    width: 313.3333333333px
}

@media screen and (max-width:1255px) {
    .statuses-grid__item {
        width: 306.6666666667px
    }
}

@media screen and (max-width:640px) {
    .statuses-grid__item {
        width: 100%
    }
}

@media screen and (max-width:415px) {
    .statuses-grid__item {
        width: 100vw
    }
}

.statuses-grid .detailed-status {
    border-radius: 4px
}

@media screen and (max-width:415px) {
    .statuses-grid .detailed-status {
        border-top: 1px solid #4a5266
    }
}

.statuses-grid .detailed-status.compact .detailed-status__meta {
    margin-top: 15px
}

.statuses-grid .detailed-status.compact .status__content {
    font-size: 15px;
    line-height: 20px
}

.statuses-grid .detailed-status.compact .status__content .emojione {
    width: 20px;
    height: 20px;
    margin: -3px 0 0
}

.statuses-grid .detailed-status.compact .status__content .status__content__spoiler-link {
    line-height: 20px;
    margin: 0
}

.statuses-grid .detailed-status.compact .media-gallery, .statuses-grid .detailed-status.compact .status-card, .statuses-grid .detailed-status.compact .video-player {
    margin-top: 15px
}

.notice-widget {
    color: #9baec8
}

.notice-widget, .notice-widget p {
    margin-bottom: 10px
}

.notice-widget p:last-child {
    margin-bottom: 0
}

.notice-widget a {
    font-size: 14px;
    line-height: 20px
}

.notice-widget a, .placeholder-widget a {
    text-decoration: none;
    font-weight: 500;
    color: #2b90d9
}

.notice-widget a:active, .notice-widget a:focus, .notice-widget a:hover, .placeholder-widget a:active, .placeholder-widget a:focus, .placeholder-widget a:hover {
    text-decoration: underline
}

.table-of-contents {
    background: #1f232b;
    min-height: 100%;
    font-size: 14px;
    border-radius: 4px
}

.table-of-contents li a {
    display: block;
    font-weight: 500;
    padding: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
    color: #fff;
    border-bottom: 1px solid #313543
}

.table-of-contents li a:active, .table-of-contents li a:focus, .table-of-contents li a:hover {
    text-decoration: underline
}

.table-of-contents li:last-child a {
    border-bottom: 0
}

.table-of-contents li ul {
    padding-left: 20px;
    border-bottom: 1px solid #313543
}

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 .input.hidden {
    margin: 0
}

.simple_form .input.radio_buttons .radio {
    margin-bottom: 15px
}

.simple_form .input.radio_buttons .radio:last-child {
    margin-bottom: 0
}

.simple_form .input.radio_buttons .radio>label {
    position: relative;
    padding-left: 28px
}

.simple_form .input.radio_buttons .radio>label input {
    position: absolute;
    top: -2px;
    left: 0
}

.simple_form .input.boolean {
    position: relative;
    margin-bottom: 0
}

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

.simple_form .input.boolean .hint, .simple_form .input.boolean .label_input {
    padding-left: 28px
}

.simple_form .input.boolean .label_input__wrapper {
    position: static
}

.simple_form .input.boolean label.checkbox {
    position: absolute;
    top: 2px;
    left: 0
}

.simple_form .input.boolean label a {
    color: #2b90d9;
    text-decoration: underline
}

.simple_form .input.boolean label a:active, .simple_form .input.boolean label a:focus, .simple_form .input.boolean label a:hover {
    text-decoration: none
}

.simple_form .input.boolean .recommended {
    position: absolute;
    margin: -2px 4px 0
}

.simple_form .row {
    display: flex;
    margin: 0 -5px
}

.simple_form .row .input {
    box-sizing: border-box;
    flex: 1 1 auto;
    width: 50%;
    padding: 0 5px
}

.simple_form .hint {
    color: #9baec8
}

.simple_form .hint a {
    color: #2b90d9
}

.simple_form .hint code {
    border-radius: 3px;
    padding: .2em .4em;
    background: #0e1014
}

.simple_form .hint li {
    list-style: disc;
    margin-left: 18px
}

.simple_form ul.hint {
    margin-bottom: 15px
}

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

.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
}

.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 .input.with_floating_label .label_input {
    display: flex
}

.simple_form .input.with_floating_label .label_input>label {
    font-family: inherit;
    font-size: 14px;
    color: #fff;
    font-weight: 500;
    min-width: 150px;
    flex: 0 0 auto
}

.simple_form .input.with_floating_label .label_input input, .simple_form .input.with_floating_label .label_input select {
    flex: 1 1 auto
}

.simple_form .input.with_floating_label.select .hint {
    margin-top: 6px;
    margin-left: 150px
}

.simple_form .input.with_label .label_input>label {
    font-family: inherit;
    font-size: 14px;
    color: #fff;
    display: block;
    margin-bottom: 8px;
    word-wrap: break-word;
    font-weight: 500
}

.simple_form .input.with_label .hint {
    margin-top: 6px
}

.simple_form .input.with_label ul {
    flex: 390px
}

.simple_form .input.with_block_label {
    max-width: none
}

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

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

.simple_form .input.with_block_label ul {
    -moz-columns: 2;
    column-count: 2
}

.simple_form .required abbr {
    text-decoration: none;
    color: #e87487
}

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

.simple_form .fields-group .input:last-child {
    margin-bottom: 0
}

.simple_form .fields-row {
    display: flex;
    padding-top: 5px;
    margin: 0 -10px 25px
}

.simple_form .fields-row .input {
    max-width: none
}

.simple_form .fields-row__column {
    box-sizing: border-box;
    padding: 0 10px;
    flex: 1 1 auto;
    min-height: 1px
}

.simple_form .fields-row__column-6 {
    max-width: 50%
}

.simple_form .fields-row__column .actions {
    margin-top: 27px
}

.simple_form .fields-row .fields-group:last-child, .simple_form .fields-row .fields-row__column.fields-group {
    margin-bottom: 0
}

@media screen and (max-width:600px) {
    .simple_form .fields-row {
        display: block;
        margin-bottom: 0
    }
    .simple_form .fields-row__column {
        max-width: none
    }
    .simple_form .fields-row .fields-group:last-child, .simple_form .fields-row .fields-row__column, .simple_form .fields-row .fields-row__column.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 .check_boxes .checkbox label {
    font-family: inherit;
    font-size: 14px;
    color: #fff;
    display: inline-block;
    width: auto;
    position: relative;
    padding-top: 5px;
    padding-left: 25px;
    flex: 1 1 auto
}

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

.simple_form .input.static .label_input__wrapper {
    font-size: 16px;
    padding: 10px;
    border: 1px solid #606984;
    border-radius: 4px
}

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

.simple_form input[type=email]::-webkit-input-placeholder, .simple_form input[type=number]::-webkit-input-placeholder, .simple_form input[type=password]::-webkit-input-placeholder, .simple_form input[type=text]::-webkit-input-placeholder, .simple_form textarea::-webkit-input-placeholder {
    color: #a8b9cf
}

.simple_form input[type=email]::-moz-placeholder, .simple_form input[type=number]::-moz-placeholder, .simple_form input[type=password]::-moz-placeholder, .simple_form input[type=text]::-moz-placeholder, .simple_form textarea::-moz-placeholder {
    color: #a8b9cf
}

.simple_form input[type=email]:-ms-input-placeholder, .simple_form input[type=number]:-ms-input-placeholder, .simple_form input[type=password]:-ms-input-placeholder, .simple_form input[type=text]:-ms-input-placeholder, .simple_form textarea:-ms-input-placeholder {
    color: #a8b9cf
}

.simple_form input[type=email]::-ms-input-placeholder, .simple_form input[type=number]::-ms-input-placeholder, .simple_form input[type=password]::-ms-input-placeholder, .simple_form input[type=text]::-ms-input-placeholder, .simple_form textarea::-ms-input-placeholder {
    color: #a8b9cf
}

.simple_form input[type=email]::placeholder, .simple_form input[type=number]::placeholder, .simple_form input[type=password]::placeholder, .simple_form input[type=text]::placeholder, .simple_form textarea::placeholder {
    color: #a8b9cf
}

.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 {
    box-shadow: none
}

.simple_form input[type=email]:focus:invalid:not(:placeholder-shown), .simple_form input[type=number]:focus:invalid:not(:placeholder-shown), .simple_form input[type=password]:focus:invalid:not(:placeholder-shown), .simple_form input[type=text]:focus:invalid:not(:placeholder-shown), .simple_form textarea:focus:invalid:not(:placeholder-shown) {
    border-color: #e87487
}

.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-color: #79bd9a
}

.simple_form input[type=email]:hover, .simple_form input[type=number]:hover, .simple_form input[type=password]:hover, .simple_form input[type=text]:hover, .simple_form textarea:hover {
    border-color: #000
}

.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-color: #2b90d9;
    background: #17191f
}

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

.simple_form .input.field_with_errors input[type=email], .simple_form .input.field_with_errors input[type=number], .simple_form .input.field_with_errors input[type=password], .simple_form .input.field_with_errors input[type=text], .simple_form .input.field_with_errors select, .simple_form .input.field_with_errors textarea {
    border-color: #e87487
}

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

.simple_form .input.disabled {
    opacity: .5
}

.simple_form .actions {
    margin-top: 30px;
    display: flex
}

.simple_form .actions.actions--top {
    margin-top: 0;
    margin-bottom: 30px
}

.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;
    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:disabled:hover, .simple_form .button:disabled:hover, .simple_form button:disabled:hover {
    background-color: #9baec8
}

.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 {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-sizing: border-box;
    font-size: 16px;
    color: #fff;
    display: block;
    width: 100%;
    outline: 0;
    font-family: inherit;
    resize: vertical;
    background: #131419 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='%2342485A'/></svg>") no-repeat right 8px center/auto 16px;
    border: 1px solid #0a0b0e;
    border-radius: 4px;
    padding-left: 10px;
    padding-right: 30px;
    height: 41px
}

.simple_form h4 {
    margin-bottom: 15px!important
}

.simple_form .label_input__wrapper {
    position: relative
}

.simple_form .label_input__append {
    position: absolute;
    right: 3px;
    top: 1px;
    padding: 10px 10px 9px;
    font-size: 16px;
    color: #606984;
    font-family: inherit;
    pointer-events: none;
    cursor: default;
    max-width: 140px;
    white-space: nowrap;
    overflow: hidden
}

.simple_form .label_input__append:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 1px;
    width: 5px;
    background-image: linear-gradient(90deg, rgba(19, 20, 25, 0), #131419)
}

.simple_form__overlay-area {
    position: relative
}

.simple_form__overlay-area__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(40, 44, 55, .65);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    border-radius: 4px
}

.simple_form__overlay-area__overlay__content {
    text-align: center
}

.simple_form__overlay-area__overlay__content.rich-formatting, .simple_form__overlay-area__overlay__content.rich-formatting p {
    color: #fff
}

.block-icon {
    display: block;
    margin: 0 auto 10px;
    font-size: 24px
}

.flash-message {
    background: #393f4f;
    color: #9baec8;
    border-radius: 4px;
    padding: 15px 10px;
    margin-bottom: 30px;
    text-align: center
}

.flash-message.notice {
    border: 1px solid rgba(121, 189, 154, .5);
    background: rgba(121, 189, 154, .25);
    color: #79bd9a
}

.flash-message.alert {
    border: 1px solid rgba(223, 64, 90, .5);
    background: rgba(223, 64, 90, .25);
    color: #df405a
}

.flash-message a {
    display: inline-block;
    color: #9baec8;
    text-decoration: none
}

.flash-message a:hover {
    color: #fff;
    text-decoration: underline
}

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

.flash-message .oauth-code {
    outline: 0;
    box-sizing: border-box;
    display: block;
    width: 100%;
    border: 0;
    padding: 10px;
    font-family: "mastodon-font-monospace", monospace;
    background: #282c37;
    color: #fff;
    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
}

.quick-nav {
    list-style: none;
    margin-bottom: 25px;
    font-size: 14px
}

.quick-nav li {
    display: inline-block;
    margin-right: 10px
}

.quick-nav a {
    color: #2b90d9;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: 700
}

.quick-nav a:active, .quick-nav a:focus, .quick-nav a:hover {
    color: #4ea2df
}

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

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

.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: flex;
    flex-wrap: wrap;
    align-items: flex-start
}

.qr-code {
    flex: 0 0 auto;
    background: #fff;
    padding: 4px;
    margin: 0 10px 20px 0;
    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;
    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 {
    box-sizing: border-box;
    background: rgba(223, 64, 90, .5);
    color: #fff;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, .3);
    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: flex;
    flex-wrap: wrap;
    align-items: center
}

.action-pagination .actions, .action-pagination .pagination {
    flex: 1 1 auto
}

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

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

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

.alternative-login {
    margin-top: 20px;
    margin-bottom: 20px
}

.alternative-login h4 {
    font-size: 16px;
    color: #fff;
    text-align: center;
    margin-bottom: 20px;
    border: 0;
    padding: 0
}

.alternative-login .button {
    display: block
}

.scope-danger {
    color: #ff5050
}

.form_admin_settings_closed_registrations_message textarea, .form_admin_settings_custom_css textarea, .form_admin_settings_site_description textarea, .form_admin_settings_site_extended_description textarea, .form_admin_settings_site_short_description textarea, .form_admin_settings_site_terms textarea {
    font-family: "mastodon-font-monospace", monospace
}

.input-copy {
    background: #131419;
    border: 1px solid #0a0b0e;
    border-radius: 4px;
    display: flex;
    align-items: center;
    padding-right: 4px;
    position: relative;
    top: 1px;
    transition: border-color .3s linear
}

.input-copy__wrapper {
    flex: 1 1 auto
}

.input-copy input[type=text] {
    background: transparent;
    border: 0;
    padding: 10px;
    font-size: 14px;
    font-family: "mastodon-font-monospace", monospace
}

.input-copy button {
    flex: 0 0 auto;
    margin: 4px;
    text-transform: none;
    font-weight: 400;
    font-size: 14px;
    padding: 7px 18px 6px;
    width: auto;
    transition: background .3s linear
}

.input-copy.copied {
    border-color: #79bd9a;
    transition: none
}

.input-copy.copied button {
    background: #79bd9a;
    transition: none
}

.connection-prompt {
    margin-bottom: 25px
}

.connection-prompt .fa-link {
    background-color: #1f232b;
    border-radius: 100%;
    font-size: 24px;
    padding: 10px
}

.connection-prompt__column {
    align-items: center;
    display: flex;
    flex: 1;
    flex-direction: column;
    flex-shrink: 1;
    max-width: 50%
}

.connection-prompt__column-sep {
    align-self: center;
    flex-grow: 0;
    overflow: visible;
    position: relative;
    z-index: 1
}

.connection-prompt__column p {
    word-break: break-word
}

.connection-prompt .account__avatar {
    margin-bottom: 20px
}

.connection-prompt__connection {
    background-color: #393f4f;
    box-shadow: 0 0 15px rgba(0, 0, 0, .2);
    border-radius: 4px;
    padding: 25px 10px;
    position: relative;
    text-align: center
}

.connection-prompt__connection:after {
    background-color: #1f232b;
    content: "";
    display: block;
    height: 100%;
    left: 50%;
    position: absolute;
    top: 0;
    width: 1px
}

.connection-prompt__row {
    align-items: flex-start;
    display: flex;
    flex-direction: row
}

.card>a {
    display: block;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 0 15px rgba(0, 0, 0, .2)
}

@media screen and (max-width:415px) {
    .card>a {
        box-shadow: none
    }
}

.card>a:active .card__bar, .card>a:focus .card__bar, .card>a:hover .card__bar {
    background: #393f4f
}

.card__img {
    height: 130px;
    position: relative;
    background: #0e1014;
    border-radius: 4px 4px 0 0
}

.card__img img {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    -o-object-fit: cover;
    font-family: "object-fit:cover";
    object-fit: cover;
    border-radius: 4px 4px 0 0
}

@media screen and (max-width:600px) {
    .card__img {
        height: 200px
    }
}

@media screen and (max-width:415px) {
    .card__img {
        display: none
    }
}

.card__bar {
    position: relative;
    padding: 15px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background: #313543;
    border-radius: 0 0 4px 4px
}

@media screen and (max-width:415px) {
    .card__bar {
        border-radius: 0
    }
}

.card__bar .avatar {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    padding-top: 2px
}

.card__bar .avatar img {
    width: 100%;
    height: 100%;
    display: block;
    margin: 0;
    border-radius: 4px;
    background: #17191f;
    -o-object-fit: cover;
    font-family: "object-fit:cover";
    object-fit: cover
}

.card__bar .display-name {
    margin-left: 15px;
    text-align: left
}

.card__bar .display-name strong {
    font-size: 15px;
    color: #fff;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis
}

.card__bar .display-name span {
    display: block;
    font-size: 14px;
    color: #9baec8;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis
}

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

.pagination .current, .pagination .gap, .pagination .newer, .pagination .older, .pagination .page, .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 .newer, .pagination .older {
    text-transform: uppercase;
    color: #d9e1e8
}

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

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

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

.pagination .newer .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 .newer, .pagination .older {
        display: inline-block
    }
}

.nothing-here {
    background: #282c37;
    box-shadow: 0 0 15px rgba(0, 0, 0, .2);
    color: #9baec8;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: default;
    border-radius: 4px;
    padding: 20px;
    min-height: 30vh
}

.nothing-here--under-tabs {
    border-radius: 0 0 4px 4px
}

.nothing-here--flexible {
    box-sizing: border-box;
    min-height: 100%
}

.account-role, .simple_form .recommended {
    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, .simple_form .recommended.moderator {
    color: #79bd9a;
    background-color: rgba(121, 189, 154, .1);
    border-color: rgba(121, 189, 154, .5)
}

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

.account__header__fields {
    max-width: 100vw;
    padding: 0;
    margin: 15px -15px -15px;
    border-bottom: 0;
    border-top: 0;
    border-color: #42485a currentcolor;
    border-style: solid none;
    border-width: 1px 0;
    font-size: 14px;
    line-height: 20px
}

.account__header__fields dl {
    display: flex;
    border-bottom: 1px solid #42485a
}

.account__header__fields dd, .account__header__fields dt {
    box-sizing: border-box;
    padding: 14px;
    text-align: center;
    max-height: 48px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.account__header__fields dt {
    font-weight: 500;
    width: 120px;
    flex: 0 0 auto;
    color: #d9e1e8;
    background: rgba(23, 25, 31, .5)
}

.account__header__fields dd {
    flex: 1 1 auto;
    color: #9baec8
}

.account__header__fields a {
    color: #2b90d9;
    text-decoration: none
}

.account__header__fields a:active, .account__header__fields a:focus, .account__header__fields a:hover {
    text-decoration: underline
}

.account__header__fields .verified {
    border: 1px solid rgba(121, 189, 154, .5);
    background: rgba(121, 189, 154, .25)
}

.account__header__fields .verified a {
    color: #79bd9a;
    font-weight: 500
}

.account__header__fields .verified__mark {
    color: #79bd9a
}

.account__header__fields dl:last-child {
    border-bottom: 0
}

.directory__tag .trends__item__current {
    width: auto
}

.pending-account__header {
    color: #9baec8
}

.pending-account__header a {
    color: #d9e1e8;
    text-decoration: none
}

.pending-account__header a:active, .pending-account__header a:focus, .pending-account__header a:hover {
    text-decoration: underline
}

.pending-account__header strong {
    color: #fff;
    font-weight: 700
}

.pending-account__body {
    margin-top: 10px
}

.activity-stream {
    box-shadow: 0 0 15px rgba(0, 0, 0, .2);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 10px
}

.activity-stream--under-tabs {
    border-radius: 0 0 4px 4px
}

@media screen and (max-width:415px) {
    .activity-stream {
        margin-bottom: 0;
        border-radius: 0;
        box-shadow: none
    }
}

.activity-stream--headless {
    border-radius: 0;
    margin: 0;
    box-shadow: none
}

.activity-stream--headless .detailed-status, .activity-stream--headless .status {
    border-radius: 0!important
}

.activity-stream div[data-component] {
    width: 100%
}

.activity-stream .entry {
    background: #282c37
}

.activity-stream .entry .detailed-status, .activity-stream .entry .load-more, .activity-stream .entry .status {
    -webkit-animation: none;
    animation: none
}

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

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

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

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

.activity-stream--highlighted .entry {
    background: #393f4f
}

.button.logo-button {
    flex: 0 auto;
    font-size: 14px;
    background: #2b90d9;
    color: #fff;
    text-transform: none;
    line-height: 36px;
    height: auto;
    padding: 3px 15px;
    border: 0
}

.button.logo-button svg {
    width: 20px;
    height: auto;
    vertical-align: middle;
    margin-right: 5px;
    fill: #fff
}

.button.logo-button:active, .button.logo-button:focus, .button.logo-button:hover {
    background: #56a7e1
}

.button.logo-button.disabled:active, .button.logo-button.disabled:focus, .button.logo-button.disabled:hover, .button.logo-button:disabled:active, .button.logo-button:disabled:focus, .button.logo-button:disabled:hover {
    background: #9baec8
}

.button.logo-button.button--destructive:active, .button.logo-button.button--destructive:focus, .button.logo-button.button--destructive:hover {
    background: #df405a
}

@media screen and (max-width:415px) {
    .button.logo-button svg {
        display: none
    }
}

.embed .detailed-status, .public-layout .detailed-status {
    padding: 15px
}

.embed .status, .public-layout .status {
    padding: 15px 15px 15px 78px;
    min-height: 50px
}

.embed .status__avatar, .public-layout .status__avatar {
    left: 15px;
    top: 17px
}

.embed .status__content, .public-layout .status__content {
    padding-top: 5px
}

.embed .status__prepend, .public-layout .status__prepend {
    margin-left: 78px;
    padding-top: 15px
}

.embed .status__prepend-icon-wrapper, .public-layout .status__prepend-icon-wrapper {
    left: -32px
}

.embed .status .media-gallery, .embed .status .video-player, .embed .status__action-bar, .public-layout .status .media-gallery, .public-layout .status .video-player, .public-layout .status__action-bar {
    margin-top: 10px
}

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>")
}

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

.link-button {
    display: block;
    font-size: 15px;
    line-height: 20px;
    color: #2b90d9;
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer
}

.link-button:active, .link-button:hover {
    text-decoration: underline
}

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

.button {
    background-color: #2b90d9;
    border: 10px;
    border-radius: 4px;
    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;
    transition: all .1s ease-in;
    white-space: nowrap;
    width: auto
}

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

.button--destructive {
    transition: none
}

.button--destructive:active, .button--destructive:focus, .button--destructive:hover {
    background-color: #df405a;
    transition: none
}

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

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

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

.button.button-alternative, .button.button-alternative-2, .button.button-primary, .button.button-secondary {
    font-size: 16px;
    line-height: 36px;
    height: auto;
    text-transform: none;
    padding: 4px 16px
}

.button.button-alternative {
    color: #282c37;
    background: #9baec8
}

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

.button.button-alternative-2 {
    background: #606984
}

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

.button.button-secondary {
    color: #9baec8;
    background: transparent;
    padding: 3px 15px;
    border: 1px solid #9baec8
}

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

.button.button-secondary:disabled {
    opacity: .5
}

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

.column__wrapper {
    display: flex;
    flex: 1 1 auto;
    position: relative
}

.icon-button {
    display: inline-block;
    padding: 0;
    color: #606984;
    border: 0;
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
    transition: all .1s ease-in;
    transition-property: background-color, color
}

.icon-button:active, .icon-button:focus, .icon-button:hover {
    color: #707b97;
    background-color: rgba(96, 105, 132, .15);
    transition: all .2s ease-out;
    transition-property: background-color, color
}

.icon-button:focus {
    background-color: rgba(96, 105, 132, .3)
}

.icon-button.disabled {
    color: #444b5d;
    background-color: transparent;
    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: #606984
}

.icon-button.inverted:active, .icon-button.inverted:focus, .icon-button.inverted:hover {
    color: #51596f;
    background-color: rgba(96, 105, 132, .15)
}

.icon-button.inverted:focus {
    background-color: rgba(96, 105, 132, .3)
}

.icon-button.inverted.disabled {
    color: #707b97;
    background-color: transparent
}

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

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

.icon-button.overlayed {
    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: #606984;
    border: 0;
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
    font-weight: 600;
    font-size: 11px;
    padding: 0 3px;
    line-height: 27px;
    outline: 0;
    transition: all .1s ease-in;
    transition-property: background-color, color
}

.text-icon-button:active, .text-icon-button:focus, .text-icon-button:hover {
    color: #51596f;
    background-color: rgba(96, 105, 132, .15);
    transition: all .2s ease-out;
    transition-property: background-color, color
}

.text-icon-button:focus {
    background-color: rgba(96, 105, 132, .3)
}

.text-icon-button.disabled {
    color: #979eb3;
    background-color: transparent;
    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, .invisible {
    position: absolute
}

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

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

.ellipsis:after {
    content: "…"
}

.compose-form {
    padding: 10px
}

.compose-form__sensitive-button {
    padding: 0 10px 10px;
    font-size: 14px;
    font-weight: 500
}

.compose-form__sensitive-button.active {
    color: #2b90d9
}

.compose-form__sensitive-button input[type=checkbox] {
    display: none
}

.compose-form__sensitive-button .checkbox {
    display: inline-block;
    position: relative;
    border: 1px solid #9baec8;
    box-sizing: border-box;
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    margin-right: 10px;
    top: -1px;
    border-radius: 4px;
    vertical-align: middle
}

.compose-form__sensitive-button .checkbox.active {
    border-color: #2b90d9;
    background: #2b90d9
}

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

.compose-form .compose-form__warning strong {
    color: #282c37;
    font-weight: 500
}

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

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

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

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

.compose-form .autosuggest-input, .compose-form .autosuggest-textarea, .compose-form .compose-form__autosuggest-wrapper, .compose-form .spoiler-input {
    position: relative
}

.compose-form .spoiler-input {
    height: 0;
    transform-origin: bottom;
    opacity: 0
}

.compose-form .spoiler-input.spoiler-input--visible {
    height: 36px;
    margin-bottom: 11px;
    opacity: 1
}

.compose-form .autosuggest-textarea__textarea, .compose-form .spoiler-input__input {
    display: block;
    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
}

.compose-form .autosuggest-textarea__textarea::-webkit-input-placeholder, .compose-form .spoiler-input__input::-webkit-input-placeholder {
    color: #606984
}

.compose-form .autosuggest-textarea__textarea::-moz-placeholder, .compose-form .spoiler-input__input::-moz-placeholder {
    color: #606984
}

.compose-form .autosuggest-textarea__textarea:-ms-input-placeholder, .compose-form .spoiler-input__input:-ms-input-placeholder {
    color: #606984
}

.compose-form .autosuggest-textarea__textarea::-ms-input-placeholder, .compose-form .spoiler-input__input::-ms-input-placeholder {
    color: #606984
}

.compose-form .autosuggest-textarea__textarea::placeholder, .compose-form .spoiler-input__input::placeholder {
    color: #606984
}

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

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

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

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

.compose-form .autosuggest-textarea__textarea::-webkit-scrollbar {
    all: unset
}

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

.compose-form .autosuggest-textarea__suggestions-wrapper {
    position: relative;
    height: 0
}

.compose-form .autosuggest-textarea__suggestions {
    box-sizing: border-box;
    display: none;
    position: absolute;
    top: 100%;
    width: 100%;
    z-index: 99;
    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
}

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

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

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

.compose-form .autosuggest-account, .compose-form .autosuggest-emoji, .compose-form .autosuggest-hashtag {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    line-height: 18px;
    font-size: 14px
}

.compose-form .autosuggest-hashtag {
    justify-content: space-between
}

.compose-form .autosuggest-hashtag__name {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.compose-form .autosuggest-hashtag strong {
    font-weight: 500
}

.compose-form .autosuggest-hashtag__uses {
    flex: 0 0 auto;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

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

.compose-form .autosuggest-account .display-name__account {
    color: #606984
}

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

.compose-form .compose-form__modifiers .compose-form__upload-wrapper {
    overflow: hidden
}

.compose-form .compose-form__modifiers .compose-form__uploads-wrapper {
    display: flex;
    flex-direction: row;
    padding: 5px;
    flex-wrap: wrap
}

.compose-form .compose-form__modifiers .compose-form__upload {
    flex: 1 1 0;
    min-width: 40%;
    margin: 5px
}

.compose-form .compose-form__modifiers .compose-form__upload__actions {
    background: linear-gradient(180deg, rgba(0, 0, 0, .8), rgba(0, 0, 0, .35) 80%, transparent);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    opacity: 0;
    transition: opacity .1s ease
}

.compose-form .compose-form__modifiers .compose-form__upload__actions .icon-button {
    flex: 0 1 auto;
    color: #d9e1e8;
    font-size: 14px;
    font-weight: 500;
    padding: 10px;
    font-family: inherit
}

.compose-form .compose-form__modifiers .compose-form__upload__actions .icon-button:active, .compose-form .compose-form__modifiers .compose-form__upload__actions .icon-button:focus, .compose-form .compose-form__modifiers .compose-form__upload__actions .icon-button:hover {
    color: #eff3f5
}

.compose-form .compose-form__modifiers .compose-form__upload__actions.active {
    opacity: 1
}

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

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

.compose-form .compose-form__modifiers .compose-form__upload-description textarea:focus {
    color: #fff
}

.compose-form .compose-form__modifiers .compose-form__upload-description textarea::-webkit-input-placeholder {
    opacity: .75;
    color: #d9e1e8
}

.compose-form .compose-form__modifiers .compose-form__upload-description textarea::-moz-placeholder {
    opacity: .75;
    color: #d9e1e8
}

.compose-form .compose-form__modifiers .compose-form__upload-description textarea:-ms-input-placeholder {
    opacity: .75;
    color: #d9e1e8
}

.compose-form .compose-form__modifiers .compose-form__upload-description textarea::-ms-input-placeholder {
    opacity: .75;
    color: #d9e1e8
}

.compose-form .compose-form__modifiers .compose-form__upload-description textarea::placeholder {
    opacity: .75;
    color: #d9e1e8
}

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

.compose-form .compose-form__modifiers .compose-form__upload-thumbnail {
    border-radius: 4px;
    background-color: #000;
    background-position: 50%;
    background-size: cover;
    background-repeat: no-repeat;
    height: 140px;
    width: 100%;
    overflow: hidden
}

.compose-form .compose-form__buttons-wrapper {
    padding: 10px;
    background: #ebebeb;
    border-radius: 0 0 4px 4px;
    display: flex;
    justify-content: space-between;
    flex: 0 0 auto
}

.compose-form .compose-form__buttons-wrapper .compose-form__buttons {
    display: flex
}

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

.compose-form .compose-form__buttons-wrapper .compose-form__buttons .compose-form__sensitive-button {
    display: none
}

.compose-form .compose-form__buttons-wrapper .compose-form__buttons .compose-form__sensitive-button.compose-form__sensitive-button--visible {
    display: block
}

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

.compose-form .compose-form__buttons-wrapper .icon-button, .compose-form .compose-form__buttons-wrapper .text-icon-button {
    box-sizing: content-box;
    padding: 0 3px
}

.compose-form .compose-form__buttons-wrapper .character-counter__wrapper {
    align-self: center;
    margin-right: 4px
}

.compose-form .compose-form__publish {
    display: flex;
    justify-content: flex-end;
    min-width: 0;
    flex: 0 0 auto
}

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

.character-counter {
    cursor: default;
    font-family: "mastodon-font-sans-serif", sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #606984
}

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

.no-reduce-motion .spoiler-input {
    transition: height .4s ease, opacity .4s ease
}

.emojione {
    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;
    margin-bottom: 10px;
    background: #9baec8;
    padding: 10px;
    min-height: 23px;
    overflow-y: auto;
    flex: 0 2 auto
}

.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 {
    position: relative;
    font-size: 15px;
    line-height: 20px;
    word-wrap: break-word;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-top: 2px;
    color: #fff
}

.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: pre-wrap
}

.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;
    white-space: pre-wrap
}

.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: #707b97
}

.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: #606984
}

.reply-indicator__content a.unhandled-link, .status__content a.unhandled-link {
    color: #4ea2df
}

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

.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__spoiler-link::-moz-focus-inner, .status__content .status__content__spoiler-link::-moz-focus-inner {
    border: 0
}

.reply-indicator__content .status__content__spoiler-link::-moz-focus-inner, .reply-indicator__content .status__content__spoiler-link:active, .reply-indicator__content .status__content__spoiler-link:focus, .status__content .status__content__spoiler-link::-moz-focus-inner, .status__content .status__content__spoiler-link:active, .status__content .status__content__spoiler-link:focus {
    outline: 0!important
}

.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.status__content--collapsed {
    max-height: 300px
}

.status__content__read-more-button {
    display: block;
    font-size: 15px;
    line-height: 20px;
    color: #4ea2df;
    border: 0;
    background: transparent;
    padding: 8px 0 0
}

.status__content__read-more-button:active, .status__content__read-more-button:hover {
    text-decoration: underline
}

.status__content__spoiler-link {
    display: inline-block;
    border-radius: 2px;
    background: transparent;
    border: 0;
    color: #282c37;
    font-weight: 700;
    font-size: 11px;
    padding: 0 6px;
    text-transform: uppercase;
    line-height: 20px;
    cursor: pointer;
    vertical-align: middle
}

.status__wrapper--filtered {
    color: #606984;
    border: 0;
    font-size: inherit;
    text-align: center;
    line-height: inherit;
    margin: 0;
    padding: 15px;
    box-sizing: border-box;
    width: 100%;
    clear: both;
    border-bottom: 1px solid #393f4f
}

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

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

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

.focusable:focus .status.status-direct.muted {
    background: transparent
}

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

.status {
    padding: 8px 10px 8px 68px;
    position: relative;
    min-height: 54px;
    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 .audio-player, .status .video-player {
    margin-top: 8px
}

.status.status-direct:not(.read) {
    background: #393f4f;
    border-bottom-color: #42485a
}

.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: #828ba4
}

.notification__relative_time, .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: flex
}

.status-check-box .status-check-box__status {
    margin: 10px 0 10px 10px;
    flex: 1
}

.status-check-box .status-check-box__status .media-gallery {
    max-width: 250px
}

.status-check-box .status-check-box__status .status__content {
    padding: 0;
    white-space: normal
}

.status-check-box .status-check-box__status .audio-player, .status-check-box .status-check-box__status .video-player {
    margin-top: 8px;
    max-width: 250px
}

.status-check-box .status-check-box__status .media-gallery__item-thumbnail {
    cursor: default
}

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

.status__prepend {
    margin-left: 68px;
    color: #606984;
    padding: 8px 0 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 {
    align-items: center;
    display: flex;
    margin-top: 8px
}

.status__action-bar__counter {
    display: inline-flex;
    margin-right: 11px;
    align-items: center
}

.status__action-bar__counter .status__action-bar-button {
    margin-right: 4px
}

.status__action-bar__counter__label {
    display: inline-block;
    width: 14px;
    font-size: 12px;
    font-weight: 500;
    color: #606984
}

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

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

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

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

.detailed-status--flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start
}

.detailed-status--flex .detailed-status__meta, .detailed-status--flex .status__content {
    flex: 100%
}

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

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

.detailed-status .status__content .status__content__spoiler-link {
    line-height: 24px;
    margin: -1px 0 0
}

.detailed-status .audio-player, .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: flex;
    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: #606984
}

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

.domain .domain__domain-name {
    flex: 1 1 auto;
    display: block;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500
}

.domain__wrapper {
    display: flex
}

.domain_buttons {
    height: 18px;
    padding: 10px;
    white-space: nowrap
}

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

.account.compact {
    padding: 0;
    border-bottom: 0
}

.account.compact .account__avatar-wrapper {
    margin-left: 0
}

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

.account__wrapper {
    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
}

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

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

.account__avatar-composite>div {
    float: left;
    position: relative;
    box-sizing: border-box
}

.account__avatar-composite__label {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    text-shadow: 1px 1px 2px #000;
    font-weight: 700;
    font-size: 15px
}

a .account__avatar {
    cursor: pointer
}

.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;
    white-space: nowrap
}

.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__action-bar {
    border-top: 1px solid #393f4f;
    border-bottom: 1px solid #393f4f;
    line-height: 36px;
    overflow: hidden;
    flex: 0 0 auto;
    display: flex
}

.account__action-bar-dropdown {
    padding: 10px
}

.account__action-bar-dropdown .icon-button {
    vertical-align: middle
}

.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: flex;
    flex: 1 1 auto;
    line-height: 18px;
    text-align: center
}

.account__action-bar__tab {
    text-decoration: none;
    overflow: hidden;
    flex: 0 1 100%;
    border-right: 1px solid #393f4f;
    padding: 10px 0;
    border-bottom: 4px solid transparent
}

.account__action-bar__tab.active {
    border-bottom: 4px solid #2b90d9
}

.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-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
}

.detailed-status__display-name:hover strong, .reply-indicator__display-name:hover strong, .status__display-name:hover strong, a.account__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 .button.logo-button {
    margin-bottom: 15px
}

.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
}

.status__expand {
    width: 68px;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    cursor: pointer
}

.muted .status__content, .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: #282c37
}

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

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

.notification__message .fa {
    color: #2b90d9
}

.notification__message>span {
    display: inline;
    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
}

.notification__relative_time {
    float: right
}

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

.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;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column
}

.image-loader .image-loader__preview-canvas {
    max-width: 100%;
    max-height: 80%;
    background: url(/packs/media/images/void-4c8270c17facce6d53726a2ebb9745f2.png) repeat;
    -o-object-fit: contain;
    font-family: "object-fit:contain";
    object-fit: contain
}

.image-loader .loading-bar {
    position: relative
}

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

.zoomable-image {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center
}

.zoomable-image img {
    max-width: 100%;
    max-height: 80%;
    width: auto;
    height: auto;
    -o-object-fit: contain;
    font-family: "object-fit:contain";
    object-fit: contain
}

.navigation-bar {
    padding: 10px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    cursor: default;
    color: #9baec8
}

.navigation-bar strong {
    color: #d9e1e8
}

.navigation-bar a {
    color: inherit
}

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

.navigation-bar .navigation-bar__actions {
    position: relative
}

.navigation-bar .navigation-bar__actions .icon-button.close {
    position: absolute;
    pointer-events: none;
    transform: scaleX(0) translate(-100%);
    opacity: 0
}

.navigation-bar .navigation-bar__actions .compose__action-bar .icon-button {
    pointer-events: auto;
    transform: scale(1) translate(0);
    opacity: 1
}

.navigation-bar__profile {
    flex: 1 1 auto;
    margin-left: 8px;
    line-height: 20px;
    margin-top: -1px;
    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;
    box-shadow: 2px 4px 15px rgba(0, 0, 0, .4);
    z-index: 9999
}

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

.dropdown-menu.left {
    transform-origin: 100% 50%
}

.dropdown-menu.top {
    transform-origin: 50% 100%
}

.dropdown-menu.bottom {
    transform-origin: 50% 0
}

.dropdown-menu.right {
    transform-origin: 0 50%
}

.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: -7px;
    border-width: 5px 7px 0;
    border-top-color: #d9e1e8
}

.dropdown-menu__arrow.bottom {
    top: -5px;
    margin-left: -7px;
    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;
    box-sizing: border-box;
    text-decoration: none;
    background: #d9e1e8;
    color: #282c37;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.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;
    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;
    box-sizing: border-box;
    text-decoration: none;
    background: #d9e1e8;
    color: #282c37;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.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
}

.columns-area {
    display: flex;
    flex: 1 1 auto;
    flex-direction: row;
    justify-content: flex-start;
    overflow-x: auto;
    position: relative
}

.columns-area.unscrollable {
    overflow-x: hidden
}

.columns-area__panels {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 100vh
}

.columns-area__panels__pane {
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    display: flex;
    justify-content: flex-end;
    min-width: 285px
}

.columns-area__panels__pane--start {
    justify-content: flex-start
}

.columns-area__panels__pane__inner {
    position: fixed;
    width: 285px;
    pointer-events: auto;
    height: 100%
}

.columns-area__panels__main {
    box-sizing: border-box;
    width: 100%;
    max-width: 600px;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column
}

@media screen and (min-width:415px) {
    .columns-area__panels__main {
        padding: 0 10px
    }
}

.tabs-bar__wrapper {
    background: #17191f;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 2;
    padding-top: 0
}

@media screen and (min-width:415px) {
    .tabs-bar__wrapper {
        padding-top: 10px
    }
}

.tabs-bar__wrapper .tabs-bar {
    margin-bottom: 0
}

@media screen and (min-width:415px) {
    .tabs-bar__wrapper .tabs-bar {
        margin-bottom: 10px
    }
}

.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>* {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%
}

.column {
    width: 350px;
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column
}

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

.ui {
    flex: 0 0 auto;
    flex-direction: column;
    width: 100%;
    height: 100%
}

.drawer, .ui {
    display: flex
}

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

.drawer__tab {
    display: block;
    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 {
    flex: 1 1 100%;
    overflow: hidden
}

@media screen and (min-width:631px) {
    .columns-area {
        padding: 0
    }
    .column, .drawer {
        flex: 0 0 auto;
        padding: 10px 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
    }
}

.tabs-bar {
    box-sizing: border-box;
    display: flex;
    background: #393f4f;
    flex: 0 0 auto;
    overflow-y: auto
}

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

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

@media screen and (min-width:631px) {
    .tabs-bar__link:active, .tabs-bar__link:focus, .tabs-bar__link:hover {
        background: #464d60;
        border-bottom-color: #464d60
    }
}

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

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

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

.columns-area--mobile {
    flex-direction: column;
    width: 100%;
    height: 100%;
    margin: 0 auto
}

.columns-area--mobile .column, .columns-area--mobile .drawer {
    width: 100%;
    height: 100%;
    padding: 0
}

.columns-area--mobile .directory__list {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: minmax(0, 50%) minmax(0, 50%)
}

@media screen and (max-width:415px) {
    .columns-area--mobile .directory__list {
        display: block
    }
}

.columns-area--mobile .directory__card {
    margin-bottom: 0
}

.columns-area--mobile .filter-form {
    display: flex
}

.columns-area--mobile .autosuggest-textarea__textarea {
    font-size: 16px
}

.columns-area--mobile .search__input {
    line-height: 18px;
    font-size: 16px;
    padding: 15px 30px 15px 15px
}

.columns-area--mobile .search__icon .fa {
    top: 15px
}

.columns-area--mobile .scrollable {
    overflow: visible
}

@supports (display:grid) {
    .columns-area--mobile .scrollable {
        contain: content
    }
}

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

@media screen and (min-width:630px) {
    .columns-area--mobile .detailed-status {
        padding: 15px
    }
    .columns-area--mobile .detailed-status .audio-player, .columns-area--mobile .detailed-status .media-gallery, .columns-area--mobile .detailed-status .video-player {
        margin-top: 15px
    }
    .columns-area--mobile .account__header__bar {
        padding: 5px 10px
    }
    .columns-area--mobile .compose-form, .columns-area--mobile .navigation-bar {
        padding: 15px
    }
    .columns-area--mobile .compose-form .compose-form__publish .compose-form__publish-button-wrapper {
        padding-top: 15px
    }
    .columns-area--mobile .status {
        padding: 15px 15px 15px 78px;
        min-height: 50px
    }
    .columns-area--mobile .status__avatar {
        left: 15px;
        top: 17px
    }
    .columns-area--mobile .status__content {
        padding-top: 5px
    }
    .columns-area--mobile .status__prepend {
        margin-left: 78px;
        padding-top: 15px
    }
    .columns-area--mobile .status__prepend-icon-wrapper {
        left: -32px
    }
    .columns-area--mobile .status .audio-player, .columns-area--mobile .status .media-gallery, .columns-area--mobile .status .video-player, .columns-area--mobile .status__action-bar {
        margin-top: 10px
    }
    .columns-area--mobile .account {
        padding: 15px 10px
    }
    .columns-area--mobile .account__header__bio {
        margin: 0 -10px
    }
    .columns-area--mobile .notification__message {
        margin-left: 78px;
        padding-top: 15px
    }
    .columns-area--mobile .notification__favourite-icon-wrapper {
        left: -32px
    }
    .columns-area--mobile .notification .account, .columns-area--mobile .notification .status {
        padding-top: 8px
    }
    .columns-area--mobile .notification .account__avatar-wrapper {
        margin-left: 17px;
        margin-right: 15px
    }
}

.floating-action-button {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 3.9375rem;
    height: 3.9375rem;
    bottom: 1.3125rem;
    right: 1.3125rem;
    background: #2588d0;
    color: #fff;
    border-radius: 50%;
    font-size: 21px;
    line-height: 21px;
    text-decoration: none;
    box-shadow: 2px 3px 9px rgba(0, 0, 0, .4)
}

.floating-action-button:active, .floating-action-button:focus, .floating-action-button:hover {
    background: #49a0de
}

@media screen and (min-width:415px) {
    .tabs-bar {
        width: 100%
    }
    .react-swipeable-view-container .columns-area--mobile {
        height: calc(100% - 10px)!important
    }
    .getting-started__wrapper, .search {
        margin-bottom: 10px
    }
}

@media screen and (max-width:895px) {
    .columns-area__panels__pane--compositional {
        display: none
    }
}

@media screen and (min-width:895px) {
    .floating-action-button, .search-page .search, .tabs-bar__link.optional {
        display: none
    }
}

@media screen and (max-width:1190px) {
    .columns-area__panels__pane--navigational {
        display: none
    }
}

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

.icon-with-badge {
    position: relative
}

.icon-with-badge__badge {
    position: absolute;
    left: 9px;
    top: -13px;
    background: #2b90d9;
    border: 2px solid #393f4f;
    padding: 1px 6px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 500;
    line-height: 14px;
    color: #fff
}

.column-link--transparent .icon-with-badge__badge {
    border-color: #17191f
}

.compose-panel {
    width: 285px;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    height: calc(100% - 10px);
    overflow-y: hidden
}

.compose-panel .navigation-bar {
    padding-top: 20px;
    padding-bottom: 20px;
    flex: 0 1 48px;
    min-height: 20px
}

.compose-panel .flex-spacer {
    background: transparent
}

.compose-panel .compose-form {
    flex: 1;
    overflow-y: hidden;
    display: flex;
    flex-direction: column;
    min-height: 310px;
    padding-bottom: 71px;
    margin-bottom: -71px
}

.compose-panel .compose-form__autosuggest-wrapper {
    overflow-y: auto;
    background-color: #fff;
    border-radius: 4px 4px 0 0;
    flex: 0 1 auto
}

.compose-panel .autosuggest-textarea__textarea {
    overflow-y: hidden
}

.compose-panel .compose-form__upload-thumbnail {
    height: 80px
}

.navigation-panel {
    margin-top: 10px;
    margin-bottom: 10px;
    height: calc(100% - 20px);
    overflow-y: auto;
    display: flex;
    flex-direction: column
}

.navigation-panel>a {
    flex: 0 0 auto
}

.navigation-panel hr {
    flex: 0 0 auto;
    border: 0;
    border-top: 1px solid #313543;
    margin: 10px 0
}

.navigation-panel .flex-spacer, .navigation-panel hr {
    background: transparent
}

.drawer__pager {
    flex-grow: 1;
    position: relative
}

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

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

.drawer__inner.darker {
    background: #282c37
}

.drawer__inner__mastodon {
    background: #444b5d url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="%23282C37"/></svg>') no-repeat bottom/100% auto;
    flex: 1;
    min-height: 47px;
    display: none
}

.drawer__inner__mastodon>img {
    display: block;
    -o-object-fit: contain;
    font-family: "object-fit:contain;object-position:bottom left";
    object-fit: contain;
    -o-object-position: bottom left;
    object-position: bottom left;
    width: 100%;
    height: 100%;
    pointer-events: none;
    user-drag: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

@media screen and (min-height:640px) {
    .drawer__inner__mastodon {
        display: block
    }
}

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

.drawer__header {
    flex: 0 0 auto;
    font-size: 16px;
    background: #393f4f;
    margin-bottom: 10px;
    display: flex;
    flex-direction: row
}

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

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

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

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

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

.scrollable--flex {
    display: flex;
    flex-direction: column
}

.scrollable__append {
    flex: 1 1 auto;
    position: relative;
    min-height: 120px
}

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

.column-back-button {
    box-sizing: border-box;
    width: 100%;
    background: #313543;
    color: #2b90d9;
    cursor: pointer;
    flex: 0 0 auto;
    font-size: 16px;
    line-height: inherit;
    border: 0;
    text-align: unset;
    padding: 15px;
    margin: 0;
    z-index: 3;
    outline: 0
}

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

.column-header__back-button {
    background: #313543;
    border: 0;
    font-family: inherit;
    color: #2b90d9;
    cursor: pointer;
    white-space: nowrap;
    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;
    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: rgba(0, 0, 0, 0);
    -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;
    transition: opacity .25s
}

.react-toggle-track {
    width: 50px;
    height: 24px;
    padding: 0;
    border-radius: 30px;
    background-color: #282c37;
    transition: background-color .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;
    transition: opacity .25s ease
}

.react-toggle--checked .react-toggle-track-check, .react-toggle-track-x {
    opacity: 1;
    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 {
    position: absolute;
    top: 1px;
    left: 1px;
    width: 22px;
    height: 22px;
    border: 1px solid #282c37;
    border-radius: 50%;
    background-color: #fafafa;
    box-sizing: border-box;
    transition: all .25s ease;
    transition-property: border-color, left
}

.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:active, .column-link:focus, .column-link:hover {
    background: #404657
}

.column-link:focus {
    outline: 0
}

.column-link--transparent {
    background: transparent;
    color: #d9e1e8
}

.column-link--transparent:active, .column-link--transparent:focus, .column-link--transparent:hover {
    background: transparent;
    color: #fff
}

.column-link--transparent.active {
    color: #2b90d9
}

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

.column-link__badge {
    display: inline-block;
    border-radius: 4px;
    line-height: 19px;
    padding: 4px 8px;
    margin: -6px 10px
}

.column-link__badge, .column-subheading {
    font-size: 12px;
    font-weight: 500;
    background: #282c37
}

.column-subheading {
    color: #606984;
    padding: 8px 20px;
    text-transform: uppercase;
    cursor: default
}

.flex-spacer, .getting-started, .getting-started__wrapper {
    background: #282c37
}

.getting-started__wrapper {
    flex: 0 0 auto
}

.flex-spacer {
    flex: 1 1 auto
}

.getting-started {
    color: #606984;
    overflow: auto
}

.getting-started__footer {
    flex: 0 0 auto;
    padding: 20px 10px 10px
}

.getting-started__footer ul {
    margin-bottom: 10px
}

.getting-started__footer ul li {
    display: inline
}

.getting-started__footer p {
    color: #606984;
    font-size: 13px;
    margin-bottom: 20px
}

.getting-started__footer p a {
    color: #606984;
    text-decoration: underline
}

.getting-started__footer a {
    text-decoration: none;
    color: #9baec8
}

.getting-started__footer a:active, .getting-started__footer a:focus, .getting-started__footer a:hover {
    text-decoration: underline
}

.getting-started__trends {
    flex: 0 1 auto;
    opacity: 1;
    -webkit-animation: fade .15s linear;
    animation: fade .15s linear;
    margin-top: 10px
}

.getting-started__trends h4 {
    font-size: 12px;
    text-transform: uppercase;
    color: #9baec8;
    padding: 10px;
    font-weight: 500;
    border-bottom: 1px solid #393f4f
}

@media screen and (max-height:810px) {
    .getting-started__trends .trends__item:nth-child(3) {
        display: none
    }
}

@media screen and (max-height:720px) {
    .getting-started__trends .trends__item:nth-child(2) {
        display: none
    }
}

@media screen and (max-height:670px) {
    .getting-started__trends {
        display: none
    }
}

.getting-started__trends .trends__item {
    border-bottom: 0;
    padding: 10px
}

.getting-started__trends .trends__item__current {
    color: #9baec8
}

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

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

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

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

.setting-text {
    display: block;
    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;
    border-radius: 4px
}

.setting-text:focus {
    outline: 0
}

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

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

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

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

.reduce-motion button.icon-button i.fa-retweet {
    color: #606984;
    transition: color .1s ease-in
}

.reduce-motion button.icon-button.active i.fa-retweet {
    color: #2b90d9
}

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

.status-card__actions {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0
}

.status-card__actions, .status-card__actions>div {
    display: flex;
    justify-content: center;
    align-items: center
}

.status-card__actions>div {
    background: rgba(0, 0, 0, .6);
    border-radius: 8px;
    padding: 12px 9px;
    flex: 0 0 auto
}

.status-card__actions a, .status-card__actions button {
    display: inline;
    color: #d9e1e8;
    background: transparent;
    border: 0;
    padding: 0 8px;
    text-decoration: none;
    font-size: 18px;
    line-height: 18px
}

.status-card__actions a:active, .status-card__actions a:focus, .status-card__actions a:hover, .status-card__actions button:active, .status-card__actions button:focus, .status-card__actions button:hover {
    color: #fff
}

.status-card__actions a {
    font-size: 19px;
    position: relative;
    bottom: -1px
}

a.status-card {
    cursor: pointer
}

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

.status-card-photo {
    cursor: zoom-in;
    display: block;
    text-decoration: none;
    width: 100%;
    height: auto;
    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;
    white-space: nowrap;
    text-decoration: none
}

.status-card__content {
    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;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.status-card__image {
    flex: 0 0 100px;
    background: #393f4f;
    position: relative
}

.status-card__image>.fa {
    font-size: 21px;
    position: absolute;
    transform-origin: 50% 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.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.compact {
    border-color: #313543
}

.status-card.compact.interactive {
    border: 0
}

.status-card.compact .status-card__content {
    padding: 10px 8px 8px
}

.status-card.compact .status-card__title {
    white-space: nowrap
}

.status-card.compact .status-card__image {
    flex: 0 0 60px
}

a.status-card.compact:hover {
    background-color: #313543
}

.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;
    background-size: cover;
    background-position: 50%
}

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

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

.load-gap {
    border-bottom: 1px solid #393f4f
}

.regeneration-indicator {
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    color: #606984;
    background: #282c37;
    cursor: default;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px
}

.regeneration-indicator__figure, .regeneration-indicator__figure img {
    display: block;
    width: auto;
    height: 160px;
    margin: 0
}

.regeneration-indicator--without-header {
    padding-top: 68px
}

.regeneration-indicator__label {
    margin-top: 30px
}

.regeneration-indicator__label strong {
    display: block;
    margin-bottom: 10px;
    color: #606984
}

.regeneration-indicator__label span {
    font-size: 15px;
    font-weight: 400
}

.column-header__wrapper {
    position: relative;
    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: flex;
    font-size: 16px;
    background: #313543;
    flex: 0 0 auto;
    cursor: pointer;
    position: relative;
    z-index: 2;
    outline: 0;
    overflow: hidden
}

.column-header>button {
    margin: 0;
    border: 0;
    padding: 15px 0 15px 15px;
    color: inherit;
    background: transparent;
    font: inherit;
    text-align: left;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    flex: 1
}

.column-header>.column-header__back-button {
    color: #2b90d9
}

.column-header.active {
    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: flex
}

.column-header__links {
    margin-bottom: 14px
}

.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;
    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: #9baec8;
    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
}

.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%;
    transform: translate(-50%, -50%)
}

.loading-indicator span {
    display: block;
    float: left;
    transform: translateX(-50%);
    margin: 82px 0 0 50%;
    white-space: nowrap
}

.loading-indicator__figure {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 42px;
    height: 42px;
    box-sizing: border-box;
    background-color: transparent;
    border: 6px solid #606984;
    border-radius: 50%
}

.no-reduce-motion .loading-indicator span {
    -webkit-animation: loader-label 1.15s cubic-bezier(.215, .61, .355, 1) infinite;
    animation: loader-label 1.15s cubic-bezier(.215, .61, .355, 1) infinite
}

.no-reduce-motion .loading-indicator__figure {
    -webkit-animation: loader-figure 1.15s cubic-bezier(.215, .61, .355, 1) infinite;
    animation: loader-figure 1.15s cubic-bezier(.215, .61, .355, 1) infinite
}

@-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 {
    align-items: center;
    background: #000;
    color: #fff;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    margin-top: 8px;
    position: relative;
    text-align: center;
    z-index: 100
}

.media-spoiler {
    background: #000;
    color: #9baec8;
    border: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    border-radius: 4px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

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

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

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

.spoiler-button {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 100
}

.spoiler-button--minified {
    display: block;
    left: 4px;
    top: 4px;
    width: auto;
    height: auto
}

.spoiler-button--click-thru {
    pointer-events: none
}

.spoiler-button--hidden {
    display: none
}

.spoiler-button__overlay {
    display: block;
    background: transparent;
    width: 100%;
    height: 100%;
    border: 0
}

.spoiler-button__overlay__label {
    display: inline-block;
    background: rgba(0, 0, 0, .5);
    border-radius: 8px;
    padding: 8px 12px;
    color: #fff;
    font-weight: 500;
    font-size: 14px
}

.spoiler-button__overlay:active .spoiler-button__overlay__label, .spoiler-button__overlay:focus .spoiler-button__overlay__label, .spoiler-button__overlay:hover .spoiler-button__overlay__label {
    background: rgba(0, 0, 0, .8)
}

.spoiler-button__overlay:disabled .spoiler-button__overlay__label {
    background: rgba(0, 0, 0, .5)
}

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

.account--panel {
    background: #313543;
    border-top: 1px solid #393f4f;
    border-bottom: 1px solid #393f4f;
    display: flex;
    flex-direction: row;
    padding: 10px 0
}

.account--panel__button, .detailed-status__button {
    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__hashtags .column-settings__row {
    margin-bottom: 15px
}

.column-settings__hashtags .column-select__control {
    outline: 0;
    box-sizing: border-box;
    width: 100%;
    border: 0;
    box-shadow: none;
    font-family: inherit;
    background: #282c37;
    color: #9baec8;
    font-size: 14px;
    margin: 0
}

.column-settings__hashtags .column-select__control::-webkit-input-placeholder {
    color: #a8b9cf
}

.column-settings__hashtags .column-select__control::-moz-placeholder {
    color: #a8b9cf
}

.column-settings__hashtags .column-select__control:-ms-input-placeholder {
    color: #a8b9cf
}

.column-settings__hashtags .column-select__control::-ms-input-placeholder {
    color: #a8b9cf
}

.column-settings__hashtags .column-select__control::placeholder {
    color: #a8b9cf
}

.column-settings__hashtags .column-select__control::-moz-focus-inner {
    border: 0
}

.column-settings__hashtags .column-select__control::-moz-focus-inner, .column-settings__hashtags .column-select__control:active, .column-settings__hashtags .column-select__control:focus {
    outline: 0!important
}

.column-settings__hashtags .column-select__control:focus {
    background: #313543
}

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

.column-settings__hashtags .column-select__placeholder {
    color: #606984;
    padding-left: 2px;
    font-size: 12px
}

.column-settings__hashtags .column-select__value-container {
    padding-left: 6px
}

.column-settings__hashtags .column-select__multi-value {
    background: #393f4f
}

.column-settings__hashtags .column-select__multi-value__remove {
    cursor: pointer
}

.column-settings__hashtags .column-select__multi-value__remove:active, .column-settings__hashtags .column-select__multi-value__remove:focus, .column-settings__hashtags .column-select__multi-value__remove:hover {
    background: #42485a;
    color: #a8b9cf
}

.column-settings__hashtags .column-select__input, .column-settings__hashtags .column-select__multi-value__label {
    color: #9baec8
}

.column-settings__hashtags .column-select__clear-indicator, .column-settings__hashtags .column-select__dropdown-indicator {
    cursor: pointer;
    transition: none;
    color: #606984
}

.column-settings__hashtags .column-select__clear-indicator:active, .column-settings__hashtags .column-select__clear-indicator:focus, .column-settings__hashtags .column-select__clear-indicator:hover, .column-settings__hashtags .column-select__dropdown-indicator:active, .column-settings__hashtags .column-select__dropdown-indicator:focus, .column-settings__hashtags .column-select__dropdown-indicator:hover {
    color: #687390
}

.column-settings__hashtags .column-select__indicator-separator {
    background-color: #393f4f
}

.column-settings__hashtags .column-select__menu {
    background: #fff;
    border-radius: 4px;
    margin-top: 10px;
    color: #9baec8;
    box-shadow: 2px 4px 15px rgba(0, 0, 0, .4);
    padding: 0;
    background: #d9e1e8
}

.column-settings__hashtags .column-select__menu h4 {
    text-transform: uppercase;
    color: #9baec8;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 10px
}

.column-settings__hashtags .column-select__menu li {
    padding: 4px 0
}

.column-settings__hashtags .column-select__menu ul {
    margin-bottom: 10px
}

.column-settings__hashtags .column-select__menu em {
    font-weight: 500;
    color: #282c37
}

.column-settings__hashtags .column-select__menu-list {
    padding: 6px
}

.column-settings__hashtags .column-select__option {
    color: #282c37;
    border-radius: 4px;
    font-size: 14px
}

.column-settings__hashtags .column-select__option--is-focused, .column-settings__hashtags .column-select__option--is-selected {
    background: #b9c8d5
}

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

.relationship-tag {
    color: #fff;
    margin-bottom: 4px;
    display: block;
    vertical-align: top;
    background-color: #000;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 500;
    padding: 4px;
    border-radius: 4px;
    opacity: .7
}

.relationship-tag:hover {
    opacity: 1
}

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

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

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

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

.empty-column-indicator>span, .error-column>span {
    max-width: 400px
}

.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 {
    flex-direction: column
}

@-webkit-keyframes heartbeat {
    0% {
        transform: scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
    10% {
        transform: scale(.91);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
    17% {
        transform: scale(.98);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
    33% {
        transform: scale(.87);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
    45% {
        transform: scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
}

@keyframes heartbeat {
    0% {
        transform: scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
    10% {
        transform: scale(.91);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
    17% {
        transform: scale(.98);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
    33% {
        transform: scale(.87);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
    45% {
        transform: scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
}

.no-reduce-motion .pulse-loading {
    transform-origin: center center;
    -webkit-animation: heartbeat 1.5s ease-in-out infinite both;
    animation: heartbeat 1.5s ease-in-out infinite both
}

@-webkit-keyframes shake-bottom {
    0%, to {
        transform: rotate(0deg);
        transform-origin: 50% 100%
    }
    10% {
        transform: rotate(2deg)
    }
    20%, 40%, 60% {
        transform: rotate(-4deg)
    }
    30%, 50%, 70% {
        transform: rotate(4deg)
    }
    80% {
        transform: rotate(-2deg)
    }
    90% {
        transform: rotate(2deg)
    }
}

@keyframes shake-bottom {
    0%, to {
        transform: rotate(0deg);
        transform-origin: 50% 100%
    }
    10% {
        transform: rotate(2deg)
    }
    20%, 40%, 60% {
        transform: rotate(-4deg)
    }
    30%, 50%, 70% {
        transform: rotate(4deg)
    }
    80% {
        transform: rotate(-2deg)
    }
    90% {
        transform: rotate(2deg)
    }
}

.no-reduce-motion .shake-bottom {
    transform-origin: 50% 100%;
    -webkit-animation: shake-bottom .8s cubic-bezier(.455, .03, .515, .955) 2s 2 both;
    animation: shake-bottom .8s cubic-bezier(.455, .03, .515, .955) 2s 2 both
}

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

.emoji-picker-dropdown__menu .emoji-mart-scroll {
    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;
    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 {
    align-items: center;
    background: rgba(0, 0, 0, .8);
    display: flex;
    height: 100%;
    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: flex;
    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;
    box-shadow: 0 0 5px rgba(0, 0, 0, .2)
}

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

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

.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 {
    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;
    width: 22px;
    height: 22px;
    margin: 2px 0 0
}

.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;
    box-shadow: 2px 4px 15px rgba(0, 0, 0, .4);
    border-radius: 4px;
    margin-left: 40px;
    overflow: hidden
}

.privacy-dropdown__dropdown.top {
    transform-origin: 50% 100%
}

.privacy-dropdown__dropdown.bottom {
    transform-origin: 50% 0
}

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

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

.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: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px
}

.privacy-dropdown__option__content {
    flex: 1 1 auto;
    color: #606984
}

.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;
    box-shadow: 0 -4px 4px rgba(0, 0, 0, .1)
}

.privacy-dropdown.active .privacy-dropdown__value .icon-button {
    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.top .privacy-dropdown__value {
    border-radius: 0 0 4px 4px
}

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

.search {
    position: relative
}

.search__input {
    outline: 0;
    box-sizing: border-box;
    width: 100%;
    border: 0;
    box-shadow: none;
    font-family: inherit;
    background: #282c37;
    color: #9baec8;
    font-size: 14px;
    margin: 0;
    display: block;
    padding: 15px 30px 15px 15px;
    line-height: 18px;
    font-size: 16px
}

.search__input::-webkit-input-placeholder {
    color: #a8b9cf
}

.search__input::-moz-placeholder {
    color: #a8b9cf
}

.search__input:-ms-input-placeholder {
    color: #a8b9cf
}

.search__input::-ms-input-placeholder {
    color: #a8b9cf
}

.search__input::placeholder {
    color: #a8b9cf
}

.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::-moz-focus-inner {
    border: 0
}

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

.search__icon .fa {
    position: absolute;
    top: 16px;
    right: 10px;
    z-index: 2;
    display: inline-block;
    opacity: 0;
    transition: all .1s linear;
    transition-property: transform, opacity;
    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 {
    transform: rotate(90deg)
}

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

.search__icon .fa-times-circle {
    top: 17px;
    transform: rotate(0deg);
    color: #606984;
    cursor: pointer
}

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

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

.search-results__header {
    color: #606984;
    background: #2c313d;
    padding: 15px;
    font-weight: 500;
    font-size: 16px;
    cursor: default
}

.search-results__header .fa {
    display: inline-block;
    margin-right: 5px
}

.search-results__section {
    margin-bottom: 5px
}

.search-results__section h5 {
    background: #1f232b;
    border-bottom: 1px solid #393f4f;
    cursor: default;
    display: flex;
    padding: 15px;
    font-weight: 500;
    font-size: 16px;
    color: #606984
}

.search-results__section h5 .fa {
    display: inline-block;
    margin-right: 5px
}

.search-results__section .account:last-child, .search-results__section>div:last-child .status {
    border-bottom: 0
}

.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
}

.search-results__info {
    padding: 20px;
    color: #9baec8;
    text-align: center
}

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

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

.modal-root__container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    align-content: space-around;
    z-index: 9999;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.modal-root__modal {
    pointer-events: auto;
    display: flex;
    z-index: 9999
}

.video-modal__container {
    max-width: 100vw;
    max-height: 100vh
}

.audio-modal__container {
    width: 50vw
}

.media-modal {
    width: 100%;
    height: 100%;
    position: relative
}

.media-modal .extended-video-player {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center
}

.media-modal .extended-video-player video {
    max-width: 100%;
    max-height: 80%
}

.media-modal__closer, .media-modal__navigation {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0
}

.media-modal__navigation {
    pointer-events: none;
    transition: opacity .3s linear;
    will-change: opacity
}

.media-modal__navigation * {
    pointer-events: auto
}

.media-modal__navigation.media-modal__navigation--hidden {
    opacity: 0
}

.media-modal__navigation.media-modal__navigation--hidden * {
    pointer-events: none
}

.media-modal__nav {
    background: rgba(0, 0, 0, .5);
    box-sizing: border-box;
    border: 0;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    font-size: 24px;
    height: 20vmax;
    margin: auto 0;
    padding: 30px 15px;
    position: absolute;
    top: 0;
    bottom: 0
}

.media-modal__nav--left {
    left: 0
}

.media-modal__nav--right {
    right: 0
}

.media-modal__meta, .media-modal__pagination {
    width: 100%;
    text-align: center;
    position: absolute;
    left: 0;
    bottom: 20px;
    pointer-events: none
}

.media-modal__meta--shifted {
    bottom: 62px
}

.media-modal__meta a {
    pointer-events: auto;
    text-decoration: none;
    font-weight: 500;
    color: #d9e1e8
}

.media-modal__meta a:active, .media-modal__meta a:focus, .media-modal__meta a:hover {
    text-decoration: underline
}

.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: 8px;
    top: 8px;
    z-index: 100
}

.embed-modal, .error-modal, .onboarding-modal {
    background: #d9e1e8;
    color: #282c37;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column
}

.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%;
    box-sizing: border-box;
    padding: 25px;
    display: none;
    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 {
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.error-modal__body {
    display: flex;
    text-align: center
}

.error-modal__footer, .onboarding-modal__paginator {
    flex: 0 0 auto;
    background: #c0cdd9;
    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: #606984;
    border: 0;
    font-size: 14px;
    font-weight: 500;
    padding: 10px 25px;
    line-height: inherit;
    height: auto;
    margin: -10px;
    border-radius: 4px;
    background-color: transparent
}

.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: #576078;
    background-color: #a6b9c9
}

.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: #282c37
}

.error-modal__footer .error-modal__nav.onboarding-modal__done:active, .error-modal__footer .error-modal__nav.onboarding-modal__done:focus, .error-modal__footer .error-modal__nav.onboarding-modal__done:hover, .error-modal__footer .error-modal__nav.onboarding-modal__next:active, .error-modal__footer .error-modal__nav.onboarding-modal__next:focus, .error-modal__footer .error-modal__nav.onboarding-modal__next:hover, .error-modal__footer .onboarding-modal__nav.onboarding-modal__done:active, .error-modal__footer .onboarding-modal__nav.onboarding-modal__done:focus, .error-modal__footer .onboarding-modal__nav.onboarding-modal__done:hover, .error-modal__footer .onboarding-modal__nav.onboarding-modal__next:active, .error-modal__footer .onboarding-modal__nav.onboarding-modal__next:focus, .error-modal__footer .onboarding-modal__nav.onboarding-modal__next:hover, .onboarding-modal__paginator .error-modal__nav.onboarding-modal__done:active, .onboarding-modal__paginator .error-modal__nav.onboarding-modal__done:focus, .onboarding-modal__paginator .error-modal__nav.onboarding-modal__done:hover, .onboarding-modal__paginator .error-modal__nav.onboarding-modal__next:active, .onboarding-modal__paginator .error-modal__nav.onboarding-modal__next:focus, .onboarding-modal__paginator .error-modal__nav.onboarding-modal__next:hover, .onboarding-modal__paginator .onboarding-modal__nav.onboarding-modal__done:active, .onboarding-modal__paginator .onboarding-modal__nav.onboarding-modal__done:focus, .onboarding-modal__paginator .onboarding-modal__nav.onboarding-modal__done:hover, .onboarding-modal__paginator .onboarding-modal__nav.onboarding-modal__next:active, .onboarding-modal__paginator .onboarding-modal__nav.onboarding-modal__next:focus, .onboarding-modal__paginator .onboarding-modal__nav.onboarding-modal__next:hover {
    color: #313543
}

.error-modal__footer {
    justify-content: center
}

.display-case {
    text-align: center;
    font-size: 15px;
    margin-bottom: 15px
}

.display-case__label {
    font-weight: 500;
    color: #282c37;
    margin-bottom: 5px;
    text-transform: uppercase;
    font-size: 12px
}

.display-case__case {
    background: #282c37;
    color: #d9e1e8;
    font-weight: 500;
    padding: 10px;
    border-radius: 4px
}

.onboard-sliders {
    display: inline-block;
    max-width: 30px;
    max-height: auto;
    margin-left: 10px
}

.actions-modal, .block-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;
    flex-direction: column
}

.actions-modal .status__display-name, .block-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, .block-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__content__spoiler-link, .block-modal .status__content__spoiler-link, .boost-modal .status__content__spoiler-link, .confirmation-modal .status__content__spoiler-link, .mute-modal .status__content__spoiler-link, .report-modal .status__content__spoiler-link {
    color: #f2f5f7
}

.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
}

.block-modal__action-bar, .boost-modal__action-bar, .confirmation-modal__action-bar, .mute-modal__action-bar {
    display: flex;
    justify-content: space-between;
    background: #d9e1e8;
    padding: 10px;
    line-height: 36px
}

.block-modal__action-bar>div, .boost-modal__action-bar>div, .confirmation-modal__action-bar>div, .mute-modal__action-bar>div {
    flex: 1 1 auto;
    text-align: right;
    color: #606984;
    padding-right: 10px
}

.block-modal__action-bar .button, .boost-modal__action-bar .button, .confirmation-modal__action-bar .button, .mute-modal__action-bar .button {
    flex: 0 0 auto
}

.boost-modal__status-header {
    font-size: 15px
}

.boost-modal__status-time {
    float: right;
    font-size: 14px
}

.block-modal, .mute-modal {
    line-height: 24px
}

.block-modal .react-toggle, .mute-modal .react-toggle {
    vertical-align: middle
}

.report-modal {
    width: 90vw;
    max-width: 700px
}

.report-modal__container {
    display: flex;
    border-top: 1px solid #d9e1e8
}

@media screen and (max-width:480px) {
    .report-modal__container {
        flex-wrap: wrap;
        overflow-y: auto
    }
}

.report-modal__comment, .report-modal__statuses {
    box-sizing: border-box;
    width: 50%
}

@media screen and (max-width:480px) {
    .report-modal__comment, .report-modal__statuses {
        width: 100%
    }
}

.focal-point-modal__content, .report-modal__statuses {
    flex: 1 1 auto;
    min-height: 20vh;
    max-height: 80vh;
    overflow-y: auto;
    overflow-x: hidden
}

.focal-point-modal__content .status__content a, .report-modal__statuses .status__content a {
    color: #2b90d9
}

.focal-point-modal__content .status__content, .focal-point-modal__content .status__content p, .report-modal__statuses .status__content, .report-modal__statuses .status__content p {
    color: #282c37
}

@media screen and (max-width:480px) {
    .focal-point-modal__content, .report-modal__statuses {
        max-height: 10vh
    }
}

@media screen and (max-width:480px) {
    .focal-point-modal__content {
        max-height: 40vh
    }
}

.report-modal__comment {
    padding: 20px;
    border-right: 1px solid #d9e1e8;
    max-width: 320px
}

.report-modal__comment p {
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 20px
}

.report-modal__comment .setting-text {
    display: block;
    box-sizing: border-box;
    width: 100%;
    color: #282c37;
    background: #fff;
    padding: 10px;
    font-family: inherit;
    font-size: 14px;
    resize: none;
    outline: 0;
    border-radius: 4px;
    border: 1px solid #d9e1e8;
    min-height: 100px;
    max-height: 50vh;
    margin: 0 0 10px
}

.report-modal__comment .setting-text:focus {
    border: 1px solid #c0cdd9
}

.report-modal__comment .setting-text__wrapper {
    background: #fff;
    border: 1px solid #d9e1e8;
    margin-bottom: 10px;
    border-radius: 4px
}

.report-modal__comment .setting-text__wrapper .setting-text {
    border: 0;
    margin-bottom: 0;
    border-radius: 0
}

.report-modal__comment .setting-text__wrapper .setting-text:focus {
    border: 0
}

.report-modal__comment .setting-text__wrapper__modifiers {
    color: #282c37;
    font-family: inherit;
    font-size: 14px;
    background: #fff
}

.report-modal__comment .setting-text__toolbar {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px
}

.report-modal__comment .setting-text-label {
    display: block;
    color: #282c37;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 10px
}

.report-modal__comment .setting-toggle {
    margin-top: 20px;
    margin-bottom: 24px
}

.report-modal__comment .setting-toggle__label {
    color: #282c37;
    font-size: 14px
}

@media screen and (max-width:480px) {
    .report-modal__comment {
        padding: 10px;
        max-width: 100%;
        order: 2
    }
    .report-modal__comment .setting-toggle {
        margin-bottom: 4px
    }
}

.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;
    flex-shrink: 0;
    max-height: 80vh
}

.actions-modal ul.with-status {
    max-height: calc(80vh - 75px)
}

.actions-modal ul li:empty {
    margin: 0
}

.actions-modal ul li:not(:empty) a {
    color: #282c37;
    display: flex;
    padding: 12px 16px;
    font-size: 15px;
    align-items: center;
    text-decoration: none
}

.actions-modal ul li:not(:empty) a, .actions-modal ul li:not(:empty) a button {
    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
}

.block-modal__action-bar .confirmation-modal__secondary-button, .confirmation-modal__action-bar .confirmation-modal__secondary-button, .mute-modal__action-bar .confirmation-modal__secondary-button {
    flex-shrink: 1
}

.block-modal__cancel-button, .confirmation-modal__cancel-button, .confirmation-modal__secondary-button, .mute-modal__cancel-button {
    background-color: transparent;
    color: #606984;
    font-size: 14px;
    font-weight: 500
}

.block-modal__cancel-button:active, .block-modal__cancel-button:focus, .block-modal__cancel-button:hover, .confirmation-modal__cancel-button:active, .confirmation-modal__cancel-button:focus, .confirmation-modal__cancel-button:hover, .confirmation-modal__secondary-button:active, .confirmation-modal__secondary-button:focus, .confirmation-modal__secondary-button:hover, .mute-modal__cancel-button:active, .mute-modal__cancel-button:focus, .mute-modal__cancel-button:hover {
    color: #576078;
    background-color: transparent
}

.block-modal__container, .confirmation-modal__container, .mute-modal__container, .report-modal__target {
    padding: 30px;
    font-size: 16px
}

.block-modal__container strong, .confirmation-modal__container strong, .mute-modal__container strong, .report-modal__target strong {
    font-weight: 500
}

.block-modal__container strong:lang(ja), .block-modal__container strong:lang(ko), .block-modal__container strong:lang(zh-CN), .block-modal__container strong:lang(zh-HK), .block-modal__container strong:lang(zh-TW), .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
}

.confirmation-modal__container, .report-modal__target {
    text-align: center
}

.block-modal__explanation, .mute-modal__explanation {
    margin-top: 20px
}

.block-modal .setting-toggle, .mute-modal .setting-toggle {
    margin-top: 20px;
    margin-bottom: 24px;
    display: flex;
    align-items: center
}

.block-modal .setting-toggle__label, .mute-modal .setting-toggle__label {
    color: #282c37;
    margin: 0 0 0 8px
}

.report-modal__target {
    padding: 15px
}

.report-modal__target .media-modal__close {
    top: 14px;
    right: 15px
}

.loading-bar {
    background-color: #2b90d9;
    height: 3px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999
}

.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;
    transition: opacity .1s ease;
    line-height: 18px
}

.media-gallery__gifv.autoplay .media-gallery__gifv__label {
    display: none
}

.media-gallery__gifv:hover .media-gallery__gifv__label {
    opacity: 1
}

.attachment-list {
    display: flex;
    font-size: 14px;
    border: 1px solid #393f4f;
    border-radius: 4px;
    margin-top: 14px;
    overflow: hidden
}

.attachment-list__icon {
    flex: 0 0 auto;
    color: #606984;
    padding: 8px 18px;
    cursor: default;
    border-right: 1px solid #393f4f;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 26px
}

.attachment-list__icon .fa {
    display: block
}

.attachment-list__list {
    list-style: none;
    padding: 4px 0 4px 8px;
    display: flex;
    flex-direction: column;
    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
}

.attachment-list.compact {
    border: 0;
    margin-top: 4px
}

.attachment-list.compact .attachment-list__list {
    padding: 0;
    display: block
}

.attachment-list.compact .fa {
    color: #606984
}

.media-gallery {
    margin-top: 8px;
    border-radius: 4px;
    width: 100%
}

.media-gallery, .media-gallery__item {
    box-sizing: border-box;
    overflow: hidden;
    position: relative
}

.media-gallery__item {
    border: 0;
    display: block;
    float: left;
    border-radius: 4px
}

.media-gallery__item.standalone .media-gallery__item-gifv-thumbnail {
    transform: none;
    top: 0
}

.media-gallery__item-thumbnail {
    cursor: zoom-in;
    display: block;
    text-decoration: none;
    color: #d9e1e8;
    position: relative;
    z-index: 1
}

.media-gallery__item-thumbnail, .media-gallery__item-thumbnail img {
    height: 100%;
    width: 100%
}

.media-gallery__item-thumbnail img, .media-gallery__preview {
    -o-object-fit: cover;
    font-family: "object-fit:cover";
    object-fit: cover
}

.media-gallery__preview {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    background: #000
}

.media-gallery__preview--hidden {
    display: none
}

.media-gallery__gifv {
    height: 100%;
    overflow: hidden;
    position: relative;
    width: 100%
}

.media-gallery__item-gifv-thumbnail {
    cursor: zoom-in;
    height: 100%;
    -o-object-fit: cover;
    font-family: "object-fit:cover";
    object-fit: cover;
    position: relative;
    top: 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
}

.detailed .video-player__volume:before, .detailed .video-player__volume__current, .fullscreen .video-player__volume:before, .fullscreen .video-player__volume__current {
    bottom: 27px
}

.detailed .video-player__volume__handle, .fullscreen .video-player__volume__handle {
    bottom: 23px
}

.audio-player {
    box-sizing: border-box;
    position: relative;
    background: #17191f;
    border-radius: 4px;
    padding-bottom: 44px;
    direction: ltr
}

.audio-player.editable {
    border-radius: 0;
    height: 100%
}

.audio-player__waveform {
    padding: 15px 0;
    position: relative;
    overflow: hidden
}

.audio-player__waveform:before {
    content: "";
    display: block;
    position: absolute;
    border-top: 1px solid #313543;
    width: 100%;
    height: 0;
    left: 0;
    top: calc(50% + 1px)
}

.audio-player__progress-placeholder {
    background-color: rgba(78, 162, 223, .5)
}

.audio-player__wave-placeholder {
    background-color: #4a5266
}

.audio-player .video-player__controls {
    padding: 10px 15px 0;
    background: #17191f;
    border-top: 1px solid #313543;
    border-radius: 0 0 4px 4px
}

.video-player {
    overflow: hidden;
    position: relative;
    background: #000;
    max-width: 100%;
    border-radius: 4px;
    box-sizing: border-box;
    direction: ltr
}

.video-player.editable {
    border-radius: 0;
    height: 100%!important
}

.video-player:focus {
    outline: 0
}

.video-player video {
    max-width: 100vw;
    max-height: 80vh;
    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;
    width: 100%!important;
    height: 100%!important
}

.video-player.inline video {
    -o-object-fit: contain;
    font-family: "object-fit:contain";
    object-fit: contain;
    position: relative;
    top: 50%;
    transform: translateY(-50%)
}

.video-player__controls {
    position: absolute;
    z-index: 2;
    bottom: 0;
    left: 0;
    right: 0;
    box-sizing: border-box;
    background: linear-gradient(0deg, rgba(0, 0, 0, .85), rgba(0, 0, 0, .45) 60%, transparent);
    padding: 0 15px;
    opacity: 0;
    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;
    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: #b2c1d5
}

.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: flex;
    justify-content: space-between;
    padding-bottom: 10px
}

.video-player__buttons {
    font-size: 16px;
    white-space: nowrap;
    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: 60px
}

.video-player__time-sep {
    display: inline-block;
    margin: 0 6px
}

.video-player__time-sep, .video-player__time-total {
    color: #fff
}

.video-player__volume {
    cursor: pointer;
    height: 24px;
    display: inline
}

.video-player__volume:before {
    content: "";
    width: 50px;
    background: hsla(0, 0%, 100%, .35)
}

.video-player__volume:before, .video-player__volume__current {
    border-radius: 4px;
    display: block;
    position: absolute;
    height: 4px;
    left: 70px;
    bottom: 20px
}

.video-player__volume__current {
    background: #4ea2df
}

.video-player__volume__handle {
    position: absolute;
    z-index: 3;
    border-radius: 50%;
    width: 12px;
    height: 12px;
    bottom: 16px;
    left: 70px;
    transition: opacity .1s ease;
    background: #4ea2df;
    box-shadow: 1px 2px 6px rgba(0, 0, 0, .2);
    pointer-events: none
}

.video-player__link {
    padding: 2px 10px
}

.video-player__link a {
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    color: #fff
}

.video-player__link a:active, .video-player__link a:focus, .video-player__link a:hover {
    text-decoration: underline
}

.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;
    transition: opacity .1s ease;
    background: #4ea2df;
    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
}

.directory__list {
    width: 100%;
    margin: 10px 0;
    transition: opacity .1s ease-in
}

.directory__list.loading {
    opacity: .7
}

@media screen and (max-width:415px) {
    .directory__list {
        margin: 0
    }
}

.directory__card {
    box-sizing: border-box;
    margin-bottom: 10px
}

.directory__card__img {
    height: 125px;
    position: relative;
    background: #0e1014;
    overflow: hidden
}

.directory__card__img img {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    -o-object-fit: cover;
    font-family: "object-fit:cover";
    object-fit: cover
}

.directory__card__bar {
    display: flex;
    align-items: center;
    background: #313543;
    padding: 10px
}

.directory__card__bar__name {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    text-decoration: none;
    overflow: hidden
}

.directory__card__bar__relationship {
    width: 23px;
    min-height: 1px;
    flex: 0 0 auto
}

.directory__card__bar .avatar {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    padding-top: 2px
}

.directory__card__bar .avatar img {
    width: 100%;
    height: 100%;
    display: block;
    margin: 0;
    border-radius: 4px;
    background: #17191f;
    -o-object-fit: cover;
    font-family: "object-fit:cover";
    object-fit: cover
}

.directory__card__bar .display-name {
    margin-left: 15px;
    text-align: left
}

.directory__card__bar .display-name strong {
    font-size: 15px;
    color: #fff;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis
}

.directory__card__bar .display-name span {
    display: block;
    font-size: 14px;
    color: #9baec8;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis
}

.directory__card__extra {
    background: #282c37;
    display: flex;
    align-items: center;
    justify-content: center
}

.directory__card__extra .accounts-table__count {
    width: 33.33%;
    flex: 0 0 auto;
    padding: 15px 0
}

.directory__card__extra .account__header__content {
    box-sizing: border-box;
    padding: 15px 10px;
    border-bottom: 1px solid #393f4f;
    width: 100%;
    min-height: 48px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.directory__card__extra .account__header__content p {
    display: none
}

.directory__card__extra .account__header__content p:first-child {
    display: inline
}

.directory__card__extra .account__header__content br {
    display: none
}

.account-gallery__container {
    display: flex;
    flex-wrap: wrap;
    padding: 4px 2px
}

.account-gallery__item {
    border: 0;
    box-sizing: border-box;
    display: block;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    margin: 2px
}

.account-gallery__item__icons {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px
}

.account__section-headline, .notification__filter-bar {
    background: #1f232b;
    border-bottom: 1px solid #393f4f;
    cursor: default;
    display: flex;
    flex-shrink: 0
}

.account__section-headline button, .notification__filter-bar button {
    background: #1f232b;
    border: 0;
    margin: 0
}

.account__section-headline a, .account__section-headline button, .notification__filter-bar a, .notification__filter-bar button {
    display: block;
    flex: 1 1 auto;
    color: #9baec8;
    padding: 15px 0;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    position: relative
}

.account__section-headline a.active, .account__section-headline button.active, .notification__filter-bar a.active, .notification__filter-bar button.active {
    color: #d9e1e8
}

.account__section-headline a.active:after, .account__section-headline a.active:before, .account__section-headline button.active:after, .account__section-headline button.active:before, .notification__filter-bar a.active:after, .notification__filter-bar a.active:before, .notification__filter-bar button.active:after, .notification__filter-bar button.active:before {
    display: block;
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 0;
    transform: translateX(-50%);
    border-color: transparent transparent #393f4f;
    border-style: solid;
    border-width: 0 10px 10px
}

.account__section-headline a.active:after, .account__section-headline button.active:after, .notification__filter-bar a.active:after, .notification__filter-bar button.active:after {
    bottom: -1px;
    border-color: transparent transparent #282c37
}

.account__section-headline.directory__section-headline, .notification__filter-bar.directory__section-headline {
    background: #242731;
    border-bottom-color: transparent
}

.account__section-headline.directory__section-headline a.active:before, .account__section-headline.directory__section-headline button.active:before, .notification__filter-bar.directory__section-headline a.active:before, .notification__filter-bar.directory__section-headline button.active:before {
    display: none
}

.account__section-headline.directory__section-headline a.active:after, .account__section-headline.directory__section-headline button.active:after, .notification__filter-bar.directory__section-headline a.active:after, .notification__filter-bar.directory__section-headline button.active:after {
    border-color: transparent transparent #191b22
}

.filter-form {
    background: #282c37
}

.filter-form__column {
    padding: 10px 15px
}

.filter-form .radio-button {
    display: block
}

.radio-button {
    font-size: 14px;
    position: relative;
    display: inline-block;
    padding: 6px 0;
    line-height: 18px;
    cursor: default;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer
}

.radio-button input[type=checkbox], .radio-button input[type=radio] {
    display: none
}

.radio-button__input {
    display: inline-block;
    position: relative;
    border: 1px solid #9baec8;
    box-sizing: border-box;
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    margin-right: 10px;
    top: -1px;
    border-radius: 50%;
    vertical-align: middle
}

.radio-button__input.checked {
    border-color: #4ea2df;
    background: #4ea2df
}

::-webkit-scrollbar-thumb {
    border-radius: 0
}

.search-popout {
    background: #fff;
    border-radius: 4px;
    padding: 10px 14px 14px;
    margin-top: 10px;
    color: #9baec8;
    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;
        transition: margin-top .4s .1s
    }
    .navigation-bar {
        will-change: padding-bottom;
        transition: padding-bottom .4s .1s
    }
    .navigation-bar>a:first-child {
        will-change: margin-top, margin-left, margin-right, width;
        transition: margin-top .4s .1s, margin-left .4s .5s, margin-right .4s .5s
    }
    .navigation-bar>.navigation-bar__profile-edit {
        will-change: margin-top;
        transition: margin-top .4s .1s
    }
    .navigation-bar .navigation-bar__actions>.icon-button.close {
        will-change: opacity transform;
        transition: opacity .2s .1s, transform .4s .1s
    }
    .navigation-bar .navigation-bar__actions>.compose__action-bar .icon-button {
        will-change: opacity transform;
        transition: opacity .2s .3s, transform .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: -100px 10px 0 -50px
    }
    .is-composing .navigation-bar .navigation-bar__profile {
        padding-top: 2px
    }
    .is-composing .navigation-bar .navigation-bar__profile-edit {
        position: absolute;
        margin-top: -60px
    }
    .is-composing .navigation-bar .navigation-bar__actions .icon-button.close {
        pointer-events: auto;
        opacity: 1;
        transform: scale(1) translate(0);
        bottom: 5px
    }
    .is-composing .navigation-bar .navigation-bar__actions .compose__action-bar .icon-button {
        pointer-events: none;
        opacity: 0;
        transform: scaleX(0) translate(100%)
    }
}

.embed-modal {
    width: auto;
    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 {
    outline: 0;
    box-sizing: border-box;
    display: block;
    width: 100%;
    border: 0;
    padding: 10px;
    font-family: "mastodon-font-monospace", monospace;
    background: #282c37;
    color: #fff;
    font-size: 14px;
    margin: 0 0 15px;
    border-radius: 4px
}

.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;
    border-radius: 4px
}

.account__moved-note {
    padding: 14px 10px 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: 0 0 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: 15px 0 15px 15px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background: #313543
}

.column-inline-form label {
    flex: 1 1 auto
}

.column-inline-form label input {
    width: 100%
}

.column-inline-form label input:focus {
    outline: 0
}

.column-inline-form .icon-button {
    flex: 0 0 auto;
    margin: 0 10px
}

.drawer__backdrop {
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .5)
}

.list-editor {
    background: #282c37;
    flex-direction: column;
    border-radius: 8px;
    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);
    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
}

.list-adder {
    background: #282c37;
    flex-direction: column;
    border-radius: 8px;
    box-shadow: 2px 4px 15px rgba(0, 0, 0, .4);
    width: 380px;
    overflow: hidden
}

@media screen and (max-width:420px) {
    .list-adder {
        width: 90%
    }
}

.list-adder__account {
    background: #444b5d
}

.list-adder__lists {
    background: #444b5d;
    height: 50vh;
    border-radius: 0 0 8px 8px;
    overflow-y: auto
}

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

.list-adder .list__wrapper {
    display: flex
}

.list-adder .list__display-name {
    flex: 1 1 auto;
    overflow: hidden;
    text-decoration: none;
    font-size: 16px;
    padding: 10px
}

.focal-point {
    position: relative;
    cursor: move;
    overflow: hidden;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #000
}

.focal-point canvas, .focal-point img, .focal-point video {
    display: block;
    max-height: 80vh;
    width: 100%;
    height: auto;
    margin: 0;
    -o-object-fit: contain;
    font-family: "object-fit:contain";
    object-fit: contain;
    background: #000
}

.focal-point__reticle {
    position: absolute;
    width: 100px;
    height: 100px;
    transform: translate(-50%, -50%);
    background: url(/packs/media/images/reticle-6490ecbb61185e86e62dca0845cf2dcf.png) no-repeat 0 0;
    border-radius: 50%;
    box-shadow: 0 0 0 9999em rgba(0, 0, 0, .35)
}

.focal-point__overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0
}

.focal-point__preview {
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 2;
    cursor: move;
    transition: opacity .1s ease
}

.focal-point__preview:hover {
    opacity: .5
}

.focal-point__preview strong {
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    display: block;
    margin-bottom: 5px
}

.focal-point__preview div {
    border-radius: 4px;
    box-shadow: 0 0 14px rgba(0, 0, 0, .2)
}

@media screen and (max-width:480px) {
    .focal-point img, .focal-point video {
        max-height: 100%
    }
    .focal-point__preview {
        display: 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 {
    overflow: hidden
}

.account__header.inactive {
    opacity: .5
}

.account__header.inactive .account__avatar, .account__header.inactive .account__header__image {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%)
}

.account__header__info {
    position: absolute;
    top: 10px;
    left: 10px
}

.account__header__image {
    overflow: hidden;
    height: 145px;
    position: relative;
    background: #1f232b
}

.account__header__image img {
    -o-object-fit: cover;
    font-family: "object-fit:cover";
    object-fit: cover;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0
}

.account__header__bar {
    position: relative;
    background: #313543;
    padding: 5px;
    border-bottom: 1px solid #42485a
}

.account__header__bar .avatar {
    display: block;
    flex: 0 0 auto;
    width: 94px;
    margin-left: -2px
}

.account__header__bar .avatar .account__avatar {
    background: #17191f;
    border: 2px solid #313543
}

.account__header__tabs {
    display: flex;
    align-items: flex-start;
    padding: 7px 5px;
    margin-top: -55px
}

.account__header__tabs__buttons {
    display: flex;
    align-items: center;
    padding-top: 55px;
    overflow: hidden
}

.account__header__tabs__buttons .icon-button {
    border: 1px solid #42485a;
    border-radius: 4px;
    box-sizing: content-box;
    padding: 2px
}

.account__header__tabs__buttons .button {
    margin: 0 8px
}

.account__header__tabs__name {
    padding: 5px
}

.account__header__tabs__name .account-role {
    vertical-align: top
}

.account__header__tabs__name .emojione {
    width: 22px;
    height: 22px
}

.account__header__tabs__name h1 {
    font-size: 16px;
    line-height: 24px;
    color: #fff;
    font-weight: 500;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.account__header__tabs__name h1 small {
    display: block;
    font-size: 14px;
    color: #9baec8;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis
}

.account__header__tabs .spacer {
    flex: 1 1 auto
}

.account__header__bio {
    overflow: hidden;
    margin: 0 -5px
}

.account__header__bio .account__header__content {
    padding: 20px 15px 5px;
    color: #fff
}

.account__header__bio .account__header__fields {
    margin: 0;
    border-top: 1px solid #42485a
}

.account__header__bio .account__header__fields a {
    color: #4ea2df
}

.account__header__bio .account__header__fields dl:first-child .verified {
    border-radius: 0 4px 0 0
}

.account__header__bio .account__header__fields .verified a {
    color: #79bd9a
}

.account__header__extra {
    margin-top: 4px
}

.account__header__extra__links {
    font-size: 14px;
    color: #9baec8
}

.account__header__extra__links a {
    display: inline-block;
    color: #9baec8;
    text-decoration: none;
    padding: 20px 10px 10px;
    font-weight: 500
}

.account__header__extra__links a strong {
    font-weight: 700;
    color: #fff
}

.trends__header {
    color: #606984;
    background: #2c313d;
    border-bottom: 1px solid #1f232b;
    font-weight: 500;
    padding: 15px;
    font-size: 16px;
    cursor: default
}

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

.trends__item {
    display: flex;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid #393f4f
}

.trends__item:last-child {
    border-bottom: 0
}

.trends__item__name {
    flex: 1 1 auto;
    color: #606984;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.trends__item__name strong {
    font-weight: 500
}

.trends__item__name a {
    color: #9baec8;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.trends__item__name a:active span, .trends__item__name a:focus span, .trends__item__name a:hover span {
    text-decoration: underline
}

.trends__item__current {
    flex: 0 0 auto;
    font-size: 24px;
    line-height: 36px;
    font-weight: 500;
    text-align: right;
    padding-right: 15px;
    margin-left: 5px;
    color: #d9e1e8
}

.trends__item__sparkline {
    flex: 0 0 auto;
    width: 50px
}

.trends__item__sparkline path:first-child {
    fill: rgba(43, 144, 217, .25)!important;
    fill-opacity: 1!important
}

.trends__item__sparkline path:last-child {
    stroke: #459ede!important
}

.conversation {
    display: flex;
    border-bottom: 1px solid #393f4f;
    padding: 5px 5px 0
}

.conversation:focus {
    background: #2c313d;
    outline: 0
}

.conversation__avatar {
    flex: 0 0 auto;
    padding: 12px 10px 10px
}

.conversation__content {
    flex: 1 1 auto;
    padding: 10px 15px 10px 5px;
    overflow: hidden
}

.conversation__content__info {
    overflow: hidden;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between
}

.conversation__content__relative-time {
    font-size: 15px;
    color: #9baec8;
    padding-left: 15px
}

.conversation__content__names {
    color: #9baec8;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
    flex-basis: 90px;
    flex-grow: 1
}

.conversation__content__names a {
    color: #fff;
    text-decoration: none
}

.conversation__content__names a:active, .conversation__content__names a:focus, .conversation__content__names a:hover {
    text-decoration: underline
}

.conversation__content a {
    word-break: break-word
}

.poll {
    margin-top: 16px;
    font-size: 14px
}

.poll li {
    margin-bottom: 10px;
    position: relative
}

.poll__chart {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    display: inline-block;
    border-radius: 4px;
    background: #6d89af
}

.poll__chart.leading {
    background: #2b90d9
}

.poll__text {
    position: relative;
    display: flex;
    padding: 6px 0;
    line-height: 18px;
    cursor: default;
    overflow: hidden
}

.poll__text input[type=checkbox], .poll__text input[type=radio] {
    display: none
}

.poll__text .autossugest-input {
    flex: 1 1 auto
}

.poll__text input[type=text] {
    display: block;
    box-sizing: border-box;
    width: 100%;
    font-size: 14px;
    color: #282c37;
    outline: 0;
    font-family: inherit;
    background: #fff;
    border: 1px solid #dbdbdb;
    border-radius: 4px;
    padding: 6px 10px
}

.poll__text input[type=text]:focus {
    border-color: #2b90d9
}

.poll__text.selectable {
    cursor: pointer
}

.poll__text.editable {
    display: flex;
    align-items: center;
    overflow: visible
}

.poll__input {
    display: inline-block;
    position: relative;
    border: 1px solid #9baec8;
    box-sizing: border-box;
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    margin-right: 10px;
    top: -1px;
    border-radius: 50%;
    vertical-align: middle;
    margin-top: auto;
    margin-bottom: auto;
    flex: 0 0 18px
}

.poll__input.checkbox {
    border-radius: 4px
}

.poll__input.active {
    border-color: #79bd9a;
    background: #79bd9a
}

.poll__number {
    display: inline-block;
    width: 52px;
    font-weight: 700;
    padding: 0 10px 0 8px;
    text-align: right;
    margin-top: auto;
    margin-bottom: auto;
    flex: 0 0 52px
}

.poll__vote__mark {
    float: left;
    line-height: 18px
}

.poll__footer {
    padding-top: 6px;
    padding-bottom: 5px;
    color: #606984
}

.poll__link {
    display: inline;
    background: transparent;
    padding: 0;
    margin: 0;
    border: 0;
    color: #606984;
    text-decoration: underline;
    font-size: inherit
}

.poll__link:hover {
    text-decoration: none
}

.poll__link:active, .poll__link:focus {
    background-color: rgba(96, 105, 132, .1)
}

.poll .button {
    height: 36px;
    padding: 0 16px;
    margin-right: 10px;
    font-size: 14px
}

.compose-form__poll-wrapper {
    border-top: 1px solid #ebebeb
}

.compose-form__poll-wrapper ul {
    padding: 10px
}

.compose-form__poll-wrapper .poll__footer {
    border-top: 1px solid #ebebeb;
    padding: 10px;
    display: flex;
    align-items: center
}

.compose-form__poll-wrapper .poll__footer button, .compose-form__poll-wrapper .poll__footer select {
    flex: 1 1 50%
}

.compose-form__poll-wrapper .button.button-secondary {
    font-size: 14px;
    font-weight: 400;
    padding: 6px 10px;
    height: auto;
    line-height: inherit;
    color: #606984;
    border-color: #606984;
    margin-right: 5px
}

.compose-form__poll-wrapper li {
    display: flex;
    align-items: center
}

.compose-form__poll-wrapper li .poll__text {
    flex: 0 0 auto;
    width: calc(100% - 29px);
    margin-right: 6px
}

.compose-form__poll-wrapper select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-sizing: border-box;
    font-size: 14px;
    color: #282c37;
    display: inline-block;
    width: auto;
    outline: 0;
    font-family: inherit;
    background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='%23DBDBDB'/></svg>") no-repeat right 8px center/auto 16px;
    border: 1px solid #dbdbdb;
    border-radius: 4px;
    padding: 6px 30px 6px 10px
}

.compose-form__poll-wrapper .icon-button.disabled {
    color: #dbdbdb
}

.muted .poll {
    color: #606984
}

.muted .poll__chart {
    background: rgba(109, 137, 175, .2)
}

.muted .poll__chart.leading {
    background: rgba(43, 144, 217, .2)
}

.introduction {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: #282c37
}

@media screen and (max-width:920px) {
    .introduction {
        display: block!important
    }
}

.introduction__pager {
    background: #17191f;
    box-shadow: 0 0 15px rgba(0, 0, 0, .2);
    overflow: hidden
}

.introduction__frame, .introduction__pager {
    border-radius: 10px;
    width: 50vw;
    min-width: 920px
}

@media screen and (max-width:920px) {
    .introduction__frame, .introduction__pager {
        min-width: 0;
        width: 100%;
        border-radius: 0;
        box-shadow: none
    }
}

.introduction__frame-wrapper {
    opacity: 0;
    transition: opacity .5s linear
}

.introduction__frame-wrapper.active {
    opacity: 1;
    transition: opacity 50ms linear
}

.introduction__frame {
    overflow: hidden
}

.introduction__illustration {
    height: 50vh
}

@media screen and (max-width:630px) {
    .introduction__illustration {
        height: auto
    }
}

.introduction__illustration img {
    -o-object-fit: cover;
    font-family: "object-fit:cover";
    object-fit: cover;
    display: block;
    margin: 0;
    width: 100%;
    height: 100%
}

.introduction__text {
    border-top: 2px solid #2b90d9
}

.introduction__text--columnized {
    display: flex
}

.introduction__text--columnized>div {
    flex: 1 1 33.33%;
    text-align: center;
    padding: 25px 25px 30px
}

@media screen and (max-width:630px) {
    .introduction__text--columnized {
        display: block;
        padding: 15px 0 20px
    }
    .introduction__text--columnized>div {
        padding: 10px 25px
    }
}

.introduction__text h3 {
    font-size: 24px;
    line-height: 1.5;
    font-weight: 700;
    margin-bottom: 10px
}

.introduction__text p {
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    color: #9baec8
}

.introduction__text p code {
    display: inline-block;
    background: #17191f;
    font-size: 15px;
    border: 1px solid #393f4f;
    border-radius: 2px;
    padding: 1px 3px
}

.introduction__text--centered {
    padding: 25px 25px 30px;
    text-align: center
}

.introduction__dots {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 25px
}

@media screen and (max-width:630px) {
    .introduction__dots {
        display: none
    }
}

.introduction__dot {
    width: 14px;
    height: 14px;
    border-radius: 14px;
    border: 1px solid #2b90d9;
    background: transparent;
    margin: 0 3px;
    cursor: pointer
}

.introduction__dot:hover {
    background: #393f4f
}

.introduction__dot.active {
    cursor: default;
    background: #2b90d9
}

.introduction__action {
    padding: 0 25px 25px;
    display: flex;
    align-items: center;
    justify-content: center
}

.modal-layout {
    background: #282c37 url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="%23606984"/></svg>') repeat-x bottom fixed;
    display: flex;
    flex-direction: column;
    height: 100vh;
    padding: 0
}

.modal-layout__mastodon {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: flex-end
}

.modal-layout__mastodon>* {
    flex: 1;
    max-height: 235px;
    background: url(/packs/media/images/elephant_ui_plane-e3f2d57c12c376e189c274cbe81af8dd.svg) no-repeat 0 100%/contain
}

@media screen and (max-width:600px) {
    .account-header {
        margin-top: 0
    }
}

.emoji-mart {
    font-size: 13px;
    display: inline-block;
    color: #282c37
}

.emoji-mart, .emoji-mart * {
    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: flex;
    justify-content: space-between;
    padding: 0 6px;
    color: #606984;
    line-height: 0
}

.emoji-mart-anchor {
    position: relative;
    flex: 1;
    text-align: center;
    padding: 12px 4px;
    overflow: hidden;
    transition: color .1s ease-out;
    cursor: pointer
}

.emoji-mart-anchor:hover {
    color: #576078
}

.emoji-mart-anchor-selected {
    color: #2b90d9
}

.emoji-mart-anchor-selected:hover {
    color: #2485cb
}

.emoji-mart-anchor-selected .emoji-mart-anchor-bar {
    bottom: -1px
}

.emoji-mart-anchor-bar {
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: #2b90d9
}

.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 45px 10px 10px;
    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: #282c37;
    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
}

.container {
    box-sizing: border-box;
    max-width: 1235px;
    margin: 0 auto;
    position: relative
}

@media screen and (max-width:1255px) {
    .container {
        width: 100%;
        padding: 0 10px
    }
}

.rich-formatting {
    font-family: "mastodon-font-sans-serif", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.7;
    word-wrap: break-word;
    color: #9baec8
}

.rich-formatting a {
    color: #2b90d9;
    text-decoration: underline
}

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

.rich-formatting li, .rich-formatting p {
    color: #9baec8
}

.rich-formatting p {
    margin-top: 0;
    margin-bottom: .85em
}

.rich-formatting p:last-child {
    margin-bottom: 0
}

.rich-formatting strong {
    font-weight: 700;
    color: #d9e1e8
}

.rich-formatting em {
    font-style: italic;
    color: #d9e1e8
}

.rich-formatting code {
    font-size: .85em;
    background: #17191f;
    border-radius: 4px;
    padding: .2em .3em
}

.rich-formatting h1, .rich-formatting h2, .rich-formatting h3, .rich-formatting h4, .rich-formatting h5, .rich-formatting h6 {
    font-family: mastodon-font-display, sans-serif;
    margin-top: 1.275em;
    margin-bottom: .85em;
    font-weight: 500;
    color: #d9e1e8
}

.rich-formatting h1 {
    font-size: 2em
}

.rich-formatting h2 {
    font-size: 1.75em
}

.rich-formatting h3 {
    font-size: 1.5em
}

.rich-formatting h4 {
    font-size: 1.25em
}

.rich-formatting h5, .rich-formatting h6 {
    font-size: 1em
}

.rich-formatting ul {
    list-style: disc
}

.rich-formatting ol {
    list-style: decimal
}

.rich-formatting ol, .rich-formatting ul {
    padding: 0 0 0 2em;
    margin: 0 0 .85em
}

.rich-formatting ol[type=a], .rich-formatting ul[type=a] {
    list-style-type: lower-alpha
}

.rich-formatting ol[type=i], .rich-formatting ul[type=i] {
    list-style-type: lower-roman
}

.rich-formatting hr {
    width: 100%;
    height: 0;
    border: 0;
    border-bottom: 1px solid #313543;
    margin: 1.7em 0
}

.rich-formatting hr.spacer {
    height: 1px;
    border: 0
}

.rich-formatting table {
    width: 100%;
    border-collapse: collapse;
    -moz-column-break-inside: auto;
    break-inside: auto;
    margin-top: 24px;
    margin-bottom: 32px
}

.rich-formatting table tbody tr, .rich-formatting table thead tr {
    border-bottom: 1px solid #313543;
    font-size: 1em;
    line-height: 1.625;
    font-weight: 400;
    text-align: left;
    color: #9baec8
}

.rich-formatting table thead tr {
    border-bottom-width: 2px;
    line-height: 1.5;
    font-weight: 500;
    color: #606984
}

.rich-formatting table td, .rich-formatting table th {
    padding: 8px;
    align-self: start;
    align-items: start;
    word-break: break-all
}

.rich-formatting table td.nowrap, .rich-formatting table th.nowrap {
    width: 25%;
    position: relative
}

.rich-formatting table td.nowrap:before, .rich-formatting table th.nowrap:before {
    content: "&nbsp;";
    visibility: hidden
}

.rich-formatting table td.nowrap span, .rich-formatting table th.nowrap span {
    position: absolute;
    left: 8px;
    right: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.rich-formatting>:first-child {
    margin-top: 0
}

.information-board {
    background: #1f232b;
    padding: 20px 0
}

.information-board .container-alt {
    position: relative;
    padding-right: 295px
}

.information-board__sections {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap
}

.information-board__section {
    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
}

.information-board__section span, .information-board__section strong {
    display: block
}

.information-board__section span:last-child {
    color: #d9e1e8
}

.information-board__section strong {
    font-family: mastodon-font-display, sans-serif;
    font-weight: 500;
    font-size: 32px;
    line-height: 48px
}

@media screen and (max-width:700px) {
    .information-board__section {
        text-align: center
    }
}

.information-board .panel {
    position: absolute;
    width: 280px;
    box-sizing: border-box;
    background: #17191f;
    padding: 10px 20px 20px;
    border-radius: 4px 4px 0 0;
    right: 0;
    bottom: -40px
}

.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;
    white-space: nowrap;
    overflow: hidden
}

.information-board .panel .panel-header a, .information-board .panel .panel-header span {
    font-weight: 400;
    color: #7a93b6
}

.information-board .panel .panel-header a {
    text-decoration: none
}

.information-board .owner {
    text-align: center
}

.information-board .owner .avatar {
    width: 80px;
    height: 80px;
    margin: 0 auto 15px
}

.information-board .owner .avatar img {
    display: block;
    width: 80px;
    height: 80px;
    border-radius: 48px
}

.information-board .owner .name {
    font-size: 14px
}

.information-board .owner .name a {
    display: block;
    color: #fff;
    text-decoration: none
}

.information-board .owner .name a:hover .display_name {
    text-decoration: underline
}

.information-board .owner .name .username {
    display: block;
    color: #9baec8
}

.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: #bcc9da
}

.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 {
    width: 100%;
    height: 0;
    border: 0;
    border-bottom: 1px solid rgba(96, 105, 132, .6);
    margin: 20px 0
}

.landing-page hr.spacer {
    height: 1px;
    border: 0
}

.landing-page__forms, .landing-page__information {
    padding: 20px
}

.landing-page__call-to-action {
    background: #282c37;
    border-radius: 4px;
    padding: 25px 40px;
    overflow: hidden;
    box-sizing: border-box
}

.landing-page__call-to-action .row {
    width: 100%;
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center
}

.landing-page__call-to-action .row__information-board {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end
}

.landing-page__call-to-action .row__information-board .information-board__section {
    flex: 1 0 auto;
    padding: 0 10px
}

@media screen and (max-width:415px) {
    .landing-page__call-to-action .row__information-board {
        width: 100%;
        justify-content: space-between
    }
}

.landing-page__call-to-action .row__mascot {
    flex: 1;
    margin: 10px -50px 0 0
}

@media screen and (max-width:415px) {
    .landing-page__call-to-action .row__mascot {
        display: none
    }
}

.landing-page__logo {
    margin-right: 20px
}

.landing-page__logo img {
    height: 50px;
    width: auto;
    mix-blend-mode: lighten
}

.landing-page__information {
    padding: 45px 40px;
    margin-bottom: 10px
}

.landing-page__information:last-child {
    margin-bottom: 0
}

.landing-page__information strong {
    font-weight: 500;
    color: #bcc9da
}

.landing-page__information .account {
    border-bottom: 0;
    padding: 0
}

.landing-page__information .account__display-name {
    align-items: center;
    display: flex;
    margin-right: 5px
}

.landing-page__information .account div.account__display-name:hover .display-name strong {
    text-decoration: none
}

.landing-page__information .account div.account__display-name .account__avatar {
    cursor: default
}

.landing-page__information .account__avatar-wrapper {
    margin-left: 0;
    flex: 0 0 auto
}

.landing-page__information .account__avatar {
    width: 44px;
    height: 44px;
    background-size: 44px 44px
}

.landing-page__information .account .display-name {
    font-size: 15px
}

.landing-page__information .account .display-name__account {
    font-size: 14px
}

@media screen and (max-width:960px) {
    .landing-page__information .contact {
        margin-top: 30px
    }
}

@media screen and (max-width:700px) {
    .landing-page__information {
        padding: 25px 20px
    }
}

.landing-page #mastodon-timeline, .landing-page__forms, .landing-page__information {
    box-sizing: border-box;
    background: #282c37;
    border-radius: 4px;
    box-shadow: 0 0 6px rgba(0, 0, 0, .1)
}

.landing-page__mascot {
    height: 104px;
    position: relative;
    left: -40px;
    bottom: 25px
}

.landing-page__mascot img {
    height: 190px;
    width: auto
}

.landing-page__short-description .row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 40px
}

@media screen and (max-width:700px) {
    .landing-page__short-description .row {
        margin-bottom: 20px
    }
}

.landing-page__short-description p a {
    color: #d9e1e8
}

.landing-page__short-description h1 {
    font-weight: 500;
    color: #fff;
    margin-bottom: 0
}

.landing-page__short-description h1 small {
    color: #9baec8
}

.landing-page__short-description h1 small span {
    color: #d9e1e8
}

.landing-page__short-description p:last-child {
    margin-bottom: 0
}

.landing-page__hero {
    margin-bottom: 10px
}

.landing-page__hero img {
    display: block;
    margin: 0;
    max-width: 100%;
    height: auto;
    border-radius: 4px
}

@media screen and (max-width:840px) {
    .landing-page .information-board .container-alt {
        padding-right: 20px
    }
    .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
    }
}

@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-alt, .landing-page .header .container-alt {
        display: block
    }
}

.landing-page .cta {
    margin: 20px
}

.landing {
    margin-bottom: 100px
}

@media screen and (max-width:738px) {
    .landing {
        margin-bottom: 0
    }
}

.landing__brand {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 50px
}

.landing__brand svg {
    fill: #fff;
    height: 52px
}

@media screen and (max-width:415px) {
    .landing__brand {
        padding: 0;
        margin-bottom: 30px
    }
}

.landing .directory {
    margin-top: 30px;
    background: transparent;
    box-shadow: none;
    border-radius: 0
}

.landing .hero-widget {
    margin-top: 30px;
    margin-bottom: 0
}

.landing .hero-widget h4 {
    padding: 10px;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 13px;
    color: #9baec8
}

.landing .hero-widget__text {
    border-radius: 0;
    padding-bottom: 0
}

.landing .hero-widget__footer {
    background: #282c37;
    padding: 10px;
    border-radius: 0 0 4px 4px;
    display: flex
}

.landing .hero-widget__footer__column {
    flex: 1 1 50%
}

.landing .hero-widget .account {
    padding: 10px 0;
    border-bottom: 0
}

.landing .hero-widget .account .account__display-name {
    display: flex;
    align-items: center
}

.landing .hero-widget .account .account__avatar {
    width: 44px;
    height: 44px;
    background-size: 44px 44px
}

.landing .hero-widget__counter {
    padding: 10px
}

.landing .hero-widget__counter strong {
    font-family: mastodon-font-display, sans-serif;
    font-size: 15px;
    font-weight: 700;
    display: block
}

.landing .hero-widget__counter span {
    font-size: 14px;
    color: #9baec8
}

.landing .simple_form .user_agreement .label_input>label, .landing .simple_form p.lead {
    font-weight: 400;
    color: #9baec8
}

.landing .simple_form p.lead {
    font-size: 15px;
    line-height: 20px;
    margin-bottom: 25px
}

.landing__grid {
    max-width: 960px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 50%) minmax(0, 50%);
    grid-gap: 30px
}

@media screen and (max-width:738px) {
    .landing__grid {
        grid-template-columns: minmax(0, 100%);
        grid-gap: 10px
    }
    .landing__grid__column-login {
        grid-row: 1;
        display: flex;
        flex-direction: column
    }
    .landing__grid__column-login .box-widget {
        order: 2;
        flex: 0 0 auto
    }
    .landing__grid__column-login .hero-widget {
        margin-top: 0;
        margin-bottom: 10px;
        order: 1;
        flex: 0 0 auto
    }
    .landing__grid__column-registration {
        grid-row: 2
    }
    .landing__grid .directory {
        margin-top: 10px
    }
}

@media screen and (max-width:415px) {
    .landing__grid {
        grid-gap: 0
    }
    .landing__grid .hero-widget {
        display: block;
        margin-bottom: 0;
        box-shadow: none
    }
    .landing__grid .hero-widget__footer, .landing__grid .hero-widget__img, .landing__grid .hero-widget__img img {
        border-radius: 0
    }
    .landing__grid .box-widget, .landing__grid .directory__tag, .landing__grid .hero-widget {
        border-bottom: 1px solid #393f4f
    }
    .landing__grid .directory {
        margin-top: 0
    }
    .landing__grid .directory__tag {
        margin-bottom: 0
    }
    .landing__grid .directory__tag>a, .landing__grid .directory__tag>div {
        border-radius: 0;
        box-shadow: none
    }
    .landing__grid .directory__tag:last-child {
        border-bottom: 0
    }
}

.brand {
    position: relative;
    text-decoration: none
}

.brand__tagline {
    display: block;
    position: absolute;
    bottom: -10px;
    left: 50px;
    width: 300px;
    color: #9baec8;
    text-decoration: none;
    font-size: 14px
}

@media screen and (max-width:415px) {
    .brand__tagline {
        position: static;
        width: auto;
        margin-top: 20px;
        color: #606984
    }
}

.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;
    background: #1f232b
}

.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.inline-table>tbody>tr:first-child>td, .table.inline-table>tbody>tr:first-child>th {
    border-top: 0
}

.table.batch-table>thead>tr>th {
    background: #282c37;
    border-top: 1px solid #17191f;
    border-bottom: 1px solid #17191f
}

.table.batch-table>thead>tr>th:first-child {
    border-radius: 4px 0 0;
    border-left: 1px solid #17191f
}

.table.batch-table>thead>tr>th:last-child {
    border-radius: 0 4px 0 0;
    border-right: 1px solid #17191f
}

.table--invites tbody td {
    vertical-align: middle
}

.table-wrapper {
    overflow: auto;
    margin-bottom: 20px
}

samp {
    font-family: "mastodon-font-monospace", monospace
}

button.table-action-link {
    background: transparent;
    border: 0;
    font: inherit
}

a.table-action-link, button.table-action-link {
    text-decoration: none;
    display: inline-block;
    margin-right: 5px;
    padding: 0 10px;
    color: #9baec8;
    font-weight: 500
}

a.table-action-link:hover, button.table-action-link:hover {
    color: #fff
}

a.table-action-link i.fa, button.table-action-link i.fa {
    font-weight: 400;
    margin-right: 5px
}

a.table-action-link:first-child, button.table-action-link:first-child {
    padding-left: 0
}

.batch-table__row, .batch-table__toolbar {
    display: flex
}

.batch-table__row__select, .batch-table__toolbar__select {
    box-sizing: border-box;
    padding: 8px 16px;
    cursor: pointer;
    min-height: 100%
}

.batch-table__row__select input, .batch-table__toolbar__select input {
    margin-top: 8px
}

.batch-table__row__select--aligned, .batch-table__toolbar__select--aligned {
    display: flex;
    align-items: center
}

.batch-table__row__select--aligned input, .batch-table__toolbar__select--aligned input {
    margin-top: 0
}

@media screen and (max-width:415px) {
    .batch-table__row__select, .batch-table__toolbar__select {
        display: none
    }
}

.batch-table__row__actions, .batch-table__row__content, .batch-table__toolbar__actions, .batch-table__toolbar__content {
    padding: 8px 16px 8px 0;
    flex: 1 1 auto
}

.batch-table__toolbar {
    border: 1px solid #17191f;
    background: #282c37;
    border-radius: 4px 0 0;
    height: 47px;
    align-items: center
}

.batch-table__toolbar__actions {
    text-align: right;
    padding-right: 11px
}

@media screen and (max-width:415px) {
    .batch-table__toolbar {
        display: none
    }
}

.batch-table__form {
    padding: 16px;
    border: 1px solid #17191f;
    border-top: 0;
    background: #282c37
}

.batch-table__form .fields-row {
    padding-top: 0;
    margin-bottom: 0
}

.batch-table__row {
    border: 1px solid #17191f;
    border-top: 0;
    background: #1f232b
}

@media screen and (max-width:415px) {
    .batch-table__row:first-child {
        border-top: 1px solid #17191f
    }
}

.batch-table__row:hover {
    background: #242731
}

.batch-table__row:nth-child(2n) {
    background: #282c37
}

.batch-table__row:nth-child(2n):hover {
    background: #2c313d
}

.batch-table__row__content {
    padding-top: 12px;
    padding-bottom: 16px
}

.batch-table__row__content--unpadded {
    padding: 0
}

.batch-table__row__content--with-image {
    display: flex;
    align-items: center
}

.batch-table__row__content__image {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px
}

.batch-table__row__content__image .emojione {
    width: 32px;
    height: 32px
}

.batch-table__row__content__text {
    flex: 1 1 auto
}

.batch-table__row__content__extra {
    flex: 0 0 auto;
    text-align: right;
    color: #9baec8;
    font-weight: 500
}

.batch-table__row .directory__tag {
    margin: 0;
    width: 100%
}

.batch-table__row .directory__tag a {
    background: transparent;
    border-radius: 0
}

.batch-table .status__content {
    padding-top: 0
}

.batch-table .status__content summary {
    display: list-item
}

.batch-table .status__content strong {
    font-weight: 700
}

.batch-table .nothing-here {
    border: 1px solid #17191f;
    border-top: 0;
    box-shadow: none
}

@media screen and (max-width:415px) {
    .batch-table .nothing-here {
        border-top: 1px solid #17191f
    }
}

@media screen and (max-width:870px) {
    .batch-table .accounts-table tbody td.optional {
        display: none
    }
}

.admin-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
    min-height: 100vh
}

.admin-wrapper .sidebar-wrapper {
    min-height: 100vh;
    overflow: hidden;
    pointer-events: none;
    flex: 1 1 auto
}

.admin-wrapper .sidebar-wrapper__inner {
    display: flex;
    justify-content: flex-end;
    background: #282c37;
    height: 100%
}

.admin-wrapper .sidebar {
    width: 240px;
    padding: 0;
    pointer-events: auto
}

.admin-wrapper .sidebar__toggle {
    display: none;
    background: #393f4f;
    height: 48px
}

.admin-wrapper .sidebar__toggle__logo {
    flex: 1 1 auto
}

.admin-wrapper .sidebar__toggle__logo a {
    display: inline-block;
    padding: 15px
}

.admin-wrapper .sidebar__toggle__logo svg {
    fill: #fff;
    height: 20px;
    position: relative;
    bottom: -2px
}

.admin-wrapper .sidebar__toggle__icon {
    display: block;
    color: #9baec8;
    text-decoration: none;
    flex: 0 0 auto;
    font-size: 20px;
    padding: 15px
}

.admin-wrapper .sidebar__toggle a:active, .admin-wrapper .sidebar__toggle a:focus, .admin-wrapper .sidebar__toggle a:hover {
    background: #42485a
}

.admin-wrapper .sidebar .logo {
    display: block;
    margin: 40px auto;
    width: 100px;
    height: 100px
}

@media screen and (max-width:600px) {
    .admin-wrapper .sidebar>a:first-child {
        display: none
    }
}

.admin-wrapper .sidebar ul {
    list-style: none;
    border-radius: 4px 0 0 4px;
    overflow: hidden;
    margin-bottom: 20px
}

@media screen and (max-width:600px) {
    .admin-wrapper .sidebar ul {
        margin-bottom: 0
    }
}

.admin-wrapper .sidebar ul a {
    display: block;
    padding: 15px;
    color: #9baec8;
    text-decoration: none;
    transition: all .2s linear;
    transition-property: color, background-color;
    border-radius: 4px 0 0 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.admin-wrapper .sidebar ul a i.fa {
    margin-right: 5px
}

.admin-wrapper .sidebar ul a:hover {
    color: #fff;
    background-color: #1d2028;
    transition: all .1s linear;
    transition-property: color, background-color
}

.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 .simple-navigation-active-leaf a {
    color: #fff;
    background-color: #2b90d9;
    border-bottom: 0;
    border-radius: 0
}

.admin-wrapper .sidebar ul .simple-navigation-active-leaf a:hover {
    background-color: #419bdd
}

.admin-wrapper .sidebar>ul>.simple-navigation-active-leaf a {
    border-radius: 4px 0 0 4px
}

.admin-wrapper .content-wrapper {
    box-sizing: border-box;
    width: 100%;
    max-width: 840px;
    flex: 1 1 auto
}

@media screen and (max-width:1080px) {
    .admin-wrapper .sidebar-wrapper--empty {
        display: none
    }
    .admin-wrapper .sidebar-wrapper {
        width: 240px;
        flex: 0 0 auto
    }
}

@media screen and (max-width:600px) {
    .admin-wrapper .sidebar-wrapper {
        width: 100%
    }
}

.admin-wrapper .content {
    padding: 60px 15px 20px 25px
}

@media screen and (max-width:600px) {
    .admin-wrapper .content {
        max-width: none;
        padding: 30px 15px 15px
    }
}

.admin-wrapper .content h2 {
    color: #d9e1e8;
    font-size: 24px;
    line-height: 28px;
    font-weight: 400;
    padding-bottom: 40px;
    border-bottom: 1px solid #393f4f;
    margin-bottom: 40px
}

@media screen and (max-width:600px) {
    .admin-wrapper .content h2 {
        border-bottom: 0;
        padding-bottom: 0;
        font-weight: 700
    }
}

.admin-wrapper .content h3 {
    color: #d9e1e8;
    font-size: 20px;
    line-height: 28px;
    font-weight: 400;
    margin-bottom: 30px
}

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

.admin-wrapper .content h6 {
    font-size: 16px;
    color: #d9e1e8;
    line-height: 28px;
    font-weight: 500
}

.admin-wrapper .content .fields-group h6 {
    color: #fff;
    font-weight: 500
}

.admin-wrapper .content .directory__tag>a, .admin-wrapper .content .directory__tag>div {
    box-shadow: none
}

.admin-wrapper .content .directory__tag .table-action-link .fa {
    color: inherit
}

.admin-wrapper .content .directory__tag h4 {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    text-transform: none;
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: 0
}

.admin-wrapper .content>p {
    font-size: 14px;
    line-height: 21px;
    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 {
    width: 100%;
    height: 0;
    border: 0;
    border-bottom: 1px solid rgba(96, 105, 132, .6);
    margin: 20px 0
}

.admin-wrapper .content hr.spacer {
    height: 1px;
    border: 0
}

@media screen and (max-width:600px) {
    .admin-wrapper {
        display: block
    }
    .admin-wrapper .sidebar-wrapper {
        min-height: 0
    }
    .admin-wrapper .sidebar {
        width: 100%;
        padding: 0;
        height: auto
    }
    .admin-wrapper .sidebar__toggle {
        display: flex
    }
    .admin-wrapper .sidebar>ul {
        display: none
    }
    .admin-wrapper .sidebar ul a, .admin-wrapper .sidebar ul ul a {
        border-radius: 0;
        border-bottom: 1px solid #313543;
        transition: none
    }
    .admin-wrapper .sidebar ul a:hover, .admin-wrapper .sidebar ul ul a:hover {
        transition: none
    }
    .admin-wrapper .sidebar ul ul {
        border-radius: 0
    }
    .admin-wrapper .sidebar ul .simple-navigation-active-leaf a {
        border-bottom-color: #2b90d9
    }
}

hr.spacer {
    width: 100%;
    border: 0;
    margin: 20px 0;
    height: 1px
}

.admin-wrapper .content .muted-hint, body .muted-hint {
    color: #9baec8
}

.admin-wrapper .content .muted-hint a, body .muted-hint a {
    color: #2b90d9
}

.admin-wrapper .content .positive-hint, body .positive-hint {
    color: #79bd9a;
    font-weight: 500
}

.admin-wrapper .content .negative-hint, body .negative-hint {
    color: #df405a;
    font-weight: 500
}

.admin-wrapper .content .neutral-hint, body .neutral-hint {
    color: #606984;
    font-weight: 500
}

.admin-wrapper .content .warning-hint, body .warning-hint {
    color: #ca8f04;
    font-weight: 500
}

.filters {
    display: flex;
    flex-wrap: wrap
}

.filters .filter-subset {
    flex: 0 0 auto;
    margin: 0 40px 20px 0
}

.filters .filter-subset:last-child {
    margin-bottom: 30px
}

.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: #9baec8;
    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 {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 20px
}

.report-accounts__item {
    display: flex;
    flex: 250px;
    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 {
    flex: 1 1 auto
}

.account-status, .report-status {
    display: flex;
    margin-bottom: 10px
}

.account-status .activity-stream, .report-status .activity-stream {
    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 {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column
}

.account-status__actions .icon-button, .report-status__actions .icon-button {
    font-size: 24px;
    width: 24px;
    text-align: center;
    margin-bottom: 10px
}

.simple_form.new_account_moderation_note, .simple_form.new_report_note {
    max-width: 100%
}

.batch-form-box {
    display: flex;
    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
}

.back-link {
    margin-bottom: 10px;
    font-size: 14px
}

.back-link a {
    color: #2b90d9;
    text-decoration: none
}

.back-link a:hover {
    text-decoration: underline
}

.spacer {
    flex: 1 1 auto
}

.log-entry {
    margin-bottom: 20px;
    line-height: 20px
}

.log-entry__header {
    display: flex;
    justify-content: flex-start;
    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__content {
    max-width: calc(100% - 90px)
}

.log-entry__title {
    word-wrap: break-word
}

.log-entry__timestamp {
    color: #606984
}

.log-entry__extras {
    background: #353a49;
    border-radius: 0 0 4px 4px;
    padding: 10px;
    color: #9baec8;
    font-family: "mastodon-font-monospace", monospace;
    font-size: 12px;
    word-wrap: break-word;
    min-height: 20px
}

.log-entry__icon {
    font-size: 28px;
    margin-right: 10px;
    color: #606984
}

.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: #e87487
}

.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: #e87487
}

.log-entry .diff-neutral {
    color: #d9e1e8
}

.log-entry .diff-new {
    color: #79bd9a
}

.inline-name-tag, .name-tag, a.inline-name-tag, a.name-tag {
    text-decoration: none;
    color: #d9e1e8
}

.inline-name-tag .username, .name-tag .username, a.inline-name-tag .username, a.name-tag .username {
    font-weight: 500
}

.inline-name-tag.suspended .username, .name-tag.suspended .username, a.inline-name-tag.suspended .username, a.name-tag.suspended .username {
    text-decoration: line-through;
    color: #e87487
}

.inline-name-tag.suspended .avatar, .name-tag.suspended .avatar, a.inline-name-tag.suspended .avatar, a.name-tag.suspended .avatar {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    opacity: .8
}

.name-tag, a.name-tag {
    display: flex;
    align-items: center
}

.name-tag .avatar, a.name-tag .avatar {
    display: block;
    margin: 0 5px 0 0;
    border-radius: 50%
}

.name-tag.suspended .avatar, a.name-tag.suspended .avatar {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    opacity: .8
}

.speech-bubble {
    margin-bottom: 20px;
    border-left: 4px solid #2b90d9
}

.speech-bubble.positive {
    border-left-color: #79bd9a
}

.speech-bubble.negative {
    border-left-color: #e87487
}

.speech-bubble.warning {
    border-left-color: #ca8f04
}

.speech-bubble__bubble {
    padding: 16px 16px 16px 14px;
    font-size: 15px;
    line-height: 20px;
    border-radius: 4px 4px 4px 0;
    position: relative;
    font-weight: 500
}

.speech-bubble__bubble a {
    color: #9baec8
}

.speech-bubble__owner {
    padding: 8px 8px 8px 12px
}

.speech-bubble time {
    color: #606984
}

.report-card {
    background: #282c37;
    border-radius: 4px;
    margin-bottom: 20px
}

.report-card__profile {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px
}

.report-card__profile .account {
    padding: 0;
    border: 0
}

.report-card__profile .account__avatar-wrapper {
    margin-left: 0
}

.report-card__profile__stats {
    flex: 0 0 auto;
    font-weight: 500;
    color: #9baec8;
    text-transform: uppercase;
    text-align: right
}

.report-card__profile__stats a {
    color: inherit;
    text-decoration: none
}

.report-card__profile__stats a:active, .report-card__profile__stats a:focus, .report-card__profile__stats a:hover {
    color: #b5c3d6
}

.report-card__profile__stats .red {
    color: #df405a
}

.report-card__summary__item {
    display: flex;
    justify-content: flex-start;
    border-top: 1px solid #1f232b
}

.report-card__summary__item:hover {
    background: #2c313d
}

.report-card__summary__item__assigned, .report-card__summary__item__reported-by {
    padding: 15px;
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 150px;
    color: #9baec8
}

.report-card__summary__item__assigned, .report-card__summary__item__assigned .username, .report-card__summary__item__reported-by, .report-card__summary__item__reported-by .username {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.report-card__summary__item__content {
    flex: 1 1 auto;
    max-width: calc(100% - 300px)
}

.report-card__summary__item__content__icon {
    color: #606984;
    margin-right: 4px;
    font-weight: 500
}

.report-card__summary__item__content a {
    display: block;
    box-sizing: border-box;
    width: 100%;
    padding: 15px;
    text-decoration: none;
    color: #9baec8
}

.one-line {
    white-space: nowrap
}

.ellipsized-ip, .one-line {
    overflow: hidden;
    text-overflow: ellipsis
}

.ellipsized-ip {
    display: inline-block;
    max-width: 120px;
    vertical-align: middle
}

.admin-account-bio {
    display: flex;
    flex-wrap: wrap;
    margin: 20px -5px 0
}

.admin-account-bio>div {
    box-sizing: border-box;
    padding: 0 5px;
    margin-bottom: 10px;
    flex: 1 0 50%
}

.admin-account-bio .account__header__content, .admin-account-bio .account__header__fields {
    background: #393f4f;
    border-radius: 4px;
    height: 100%
}

.admin-account-bio .account__header__fields {
    margin: 0;
    border: 0
}

.admin-account-bio .account__header__fields a {
    color: #4ea2df
}

.admin-account-bio .account__header__fields dl:first-child .verified {
    border-radius: 0 4px 0 0
}

.admin-account-bio .account__header__fields .verified a {
    color: #79bd9a
}

.admin-account-bio .account__header__content {
    box-sizing: border-box;
    padding: 20px;
    color: #fff
}

.dashboard__counters {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -5px 20px
}

.dashboard__counters>div {
    box-sizing: border-box;
    flex: 0 0 33.333%;
    padding: 0 5px;
    margin-bottom: 10px
}

.dashboard__counters>div>a, .dashboard__counters>div>div {
    padding: 20px;
    background: #313543;
    border-radius: 4px;
    box-sizing: border-box;
    height: 100%
}

.dashboard__counters>div>a {
    text-decoration: none;
    color: inherit;
    display: block
}

.dashboard__counters>div>a:active, .dashboard__counters>div>a:focus, .dashboard__counters>div>a:hover {
    background: #393f4f
}

.dashboard__counters__num, .dashboard__counters__text {
    text-align: center;
    font-weight: 500;
    font-size: 24px;
    line-height: 21px;
    color: #fff;
    font-family: mastodon-font-display, sans-serif;
    margin-bottom: 20px;
    line-height: 30px
}

.dashboard__counters__text {
    font-size: 18px
}

.dashboard__counters__label {
    font-size: 14px;
    color: #9baec8;
    text-align: center;
    font-weight: 500
}

.dashboard__widgets {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -5px
}

.dashboard__widgets>div {
    flex: 0 0 33.333%;
    margin-bottom: 20px
}

.dashboard__widgets>div>div {
    padding: 0 5px
}

.dashboard__widgets a:not(.name-tag) {
    color: #d9e1e8;
    font-weight: 500;
    text-decoration: none
}

body.rtl {
    direction: rtl
}

body.rtl .column-header>button {
    text-align: right;
    padding-left: 0;
    padding-right: 15px
}

body.rtl .radio-button__input {
    margin-right: 0;
    margin-left: 10px
}

body.rtl .directory__card__bar .display-name {
    margin-left: 0;
    margin-right: 15px
}

body.rtl .display-name {
    text-align: right
}

body.rtl .notification__message {
    margin-left: 0;
    margin-right: 68px
}

body.rtl .drawer__inner__mastodon>img {
    transform: scaleX(-1)
}

body.rtl .notification__favourite-icon-wrapper {
    left: auto;
    right: -26px
}

body.rtl .landing-page__logo {
    margin-right: 0;
    margin-left: 20px
}

body.rtl .landing-page .features-list .features-list__row .visual {
    margin-left: 0;
    margin-right: 15px
}

body.rtl .column-header__icon, body.rtl .column-link__icon {
    margin-right: 0;
    margin-left: 5px
}

body.rtl .compose-form .compose-form__buttons-wrapper .character-counter__wrapper {
    margin-right: 0;
    margin-left: 4px
}

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 .columns-area {
    direction: rtl
}

body.rtl .column-header__buttons {
    left: 0;
    right: auto;
    margin-left: 0;
    margin-right: -15px
}

body.rtl .column-inline-form .icon-button {
    margin-left: 0;
    margin-right: 5px
}

body.rtl .column-header__links .text-btn {
    margin-left: 10px;
    margin-right: 0
}

body.rtl .account__avatar-wrapper {
    float: right
}

body.rtl .column-header__back-button {
    padding-left: 5px;
    padding-right: 0
}

body.rtl .column-header__setting-arrows {
    float: left
}

body.rtl .setting-toggle__label {
    margin-left: 0;
    margin-right: 8px
}

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 .status__action-bar__counter {
    margin-right: 0;
    margin-left: 11px
}

body.rtl .status__action-bar__counter .status__action-bar-button {
    margin-right: 0;
    margin-left: 4px
}

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-name .display-name {
    text-align: right
}

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: 2.14285714em
}

body.rtl .fa-li {
    left: auto;
    right: -2.14285714em
}

body.rtl .admin-wrapper {
    direction: rtl
}

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 {
    padding-left: 0;
    padding-right: 25px
}

body.rtl .simple_form .input.with_label.boolean label.checkbox {
    padding-left: 25px;
    padding-right: 0
}

body.rtl .simple_form .check_boxes .checkbox input[type=checkbox], body.rtl .simple_form .input.boolean input[type=checkbox], body.rtl .simple_form .input.radio_buttons .radio {
    left: auto;
    right: 0
}

body.rtl .simple_form .input.radio_buttons .radio>label {
    padding-right: 28px;
    padding-left: 0
}

body.rtl .simple_form .input-with-append .input input {
    padding-left: 142px;
    padding-right: 0
}

body.rtl .simple_form .input.boolean label.checkbox {
    left: auto;
    right: 0
}

body.rtl .simple_form .input.boolean .hint, body.rtl .simple_form .input.boolean .label_input {
    padding-left: 0;
    padding-right: 28px
}

body.rtl .simple_form .label_input__append {
    right: auto;
    left: 3px
}

body.rtl .simple_form .label_input__append:after {
    right: auto;
    left: 0;
    background-image: linear-gradient(270deg, rgba(19, 20, 25, 0), #131419)
}

body.rtl .simple_form select {
    background: #131419 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='%2342485A'/></svg>") no-repeat left 8px center/auto 16px
}

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__call-to-action .row__information-board {
    direction: rtl
}

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
    }
}

body.rtl .columns-area--mobile .column, body.rtl .columns-area--mobile .drawer {
    padding-left: 0;
    padding-right: 0
}

body.rtl .public-layout .header .nav-button {
    margin-left: 8px;
    margin-right: 0
}

body.rtl .public-layout .public-account-header__tabs {
    margin-left: 0;
    margin-right: 20px
}

body.rtl .landing-page__information .account__display-name {
    margin-right: 0;
    margin-left: 5px
}

body.rtl .landing-page__information .account__avatar-wrapper {
    margin-left: 12px;
    margin-right: 0
}

body.rtl .card__bar .display-name {
    margin-left: 0;
    margin-right: 15px;
    text-align: right
}

body.rtl .fa-chevron-left:before {
    content: ""
}

body.rtl .fa-chevron-right:before {
    content: ""
}

body.rtl .column-back-button__icon {
    margin-right: 0;
    margin-left: 5px
}

body.rtl .column-header__setting-arrows .column-header__setting-btn:last-child {
    padding-left: 0;
    padding-right: 10px
}

body.rtl .simple_form .input.radio_buttons .radio>label input {
    left: auto;
    right: 0
}

.emojione[title=":8ball:"], .emojione[title=":ant:"], .emojione[title=":back:"], .emojione[title=":black_circle:"], .emojione[title=":black_heart:"], .emojione[title=":black_large_square:"], .emojione[title=":black_medium_small_square:"], .emojione[title=":black_medium_square:"], .emojione[title=":black_nib:"], .emojione[title=":black_small_square:"], .emojione[title=":bomb:"], .emojione[title=":bowling:"], .emojione[title=":bust_in_silhouette:"], .emojione[title=":busts_in_silhouette:"], .emojione[title=":camera:"], .emojione[title=":camera_with_flash:"], .emojione[title=":clubs:"], .emojione[title=":copyright:"], .emojione[title=":curly_loop:"], .emojione[title=":currency_exchange:"], .emojione[title=":dark_sunglasses:"], .emojione[title=":eight_pointed_black_star:"], .emojione[title=":electric_plug:"], .emojione[title=":end:"], .emojione[title=":female-guard:"], .emojione[title=":film_projector:"], .emojione[title=":fried_egg:"], .emojione[title=":gorilla:"], .emojione[title=":guardsman:"], .emojione[title=":heavy_check_mark:"], .emojione[title=":heavy_division_sign:"], .emojione[title=":heavy_dollar_sign:"], .emojione[title=":heavy_minus_sign:"], .emojione[title=":heavy_multiplication_x:"], .emojione[title=":heavy_plus_sign:"], .emojione[title=":hocho:"], .emojione[title=":hole:"], .emojione[title=":joystick:"], .emojione[title=":kaaba:"], .emojione[title=":lower_left_ballpoint_pen:"], .emojione[title=":lower_left_fountain_pen:"], .emojione[title=":male-guard:"], .emojione[title=":microphone:"], .emojione[title=":mortar_board:"], .emojione[title=":movie_camera:"], .emojione[title=":musical_score:"], .emojione[title=":on:"], .emojione[title=":registered:"], .emojione[title=":soon:"], .emojione[title=":spades:"], .emojione[title=":speaking_head_in_silhouette:"], .emojione[title=":spider:"], .emojione[title=":telephone_receiver:"], .emojione[title=":tm:"], .emojione[title=":top:"], .emojione[title=":tophat:"], .emojione[title=":turkey:"], .emojione[title=":vhs:"], .emojione[title=":video_camera:"], .emojione[title=":video_game:"], .emojione[title=":water_buffalo:"], .emojione[title=":waving_black_flag:"], .emojione[title=":wavy_dash:"] {
    -webkit-filter: drop-shadow(1px 1px 0 #fff) drop-shadow(-1px 1px 0 #fff) drop-shadow(1px -1px 0 #fff) drop-shadow(-1px -1px 0 #fff);
    filter: drop-shadow(1px 1px 0 #ffffff) drop-shadow(-1px 1px 0 #ffffff) drop-shadow(1px -1px 0 #ffffff) drop-shadow(-1px -1px 0 #ffffff);
    transform: scale(.71)
}

/*# sourceMappingURL=default-f6471bf0.chunk.css.map*/