template.css

/*
 The static part of the template.

 This assumes that the CSS variables '--mast-in-*' used below have already been
 defined in the :root element prior to including the following CSS. However, it
 includes defaults (same as the default Mastodon theme, as of Jan 2024) in case
 they're not defined so that this CSS file can be loaded standalone too.
 */
:root {
    --mast-base-color: var(--mast-in-base, #282c37);
    --mast-primary-color: var(--mast-in-primary, #9baec8);
    --mast-secondary-color: var(--mast-in-secondary, #d9e1e8);
    --mast-shadow-color: var(--mast-in-shadow, black);
    --mast-highlight-color: var(--mast-in-highlight, #6364ff);
}

/*
 Use CSS mix to generate the derived colors.

 Mastodon itself does this using the SASS lighten and darken macros. We don't
 have access to those here, and we instead use the color-mix CSS function to do
 this at render time. To lighten, we mix with white; to darken, with black.

 Currently (Jan 2024), color-mix has around 86% caniuse. Good enough, but not
 universal, and if you need to cover such unsupported browsers, replace the
 color-mix functions in this section with their equivalent result for the theme
 you're trying to achieve.

 This does NOT produce an equivalent color though. It is close enough, but not
 the same as what the SASS lighten/darken would've done. There are ways to fix
 this discrepancy if needed:

 1. Convert using JavaScript in our code.

 2. Use the CSS relative color syntax. This, however, has even lesser browser
    support currently, but this might be a viable option in the future.
*/
:root {
    /* Just an alias for now */
    --mast-primary-text-color: var(--mast-primary-color);

    /* lighten(base-color, 2%) */
    /* --mast-base-color-l02: #2c313d; */
    --mast-base-color-l02: color-mix(in srgb, var(--mast-base-color), white 2%);

    /* lighten(base-color, 4%) */
    /* --mast-base-color-l04: #313543; */
    --mast-base-color-l04: color-mix(in srgb, var(--mast-base-color), white 4%);

    /* lighten(base-color, 8%) */
    /* --mast-base-color-l08: #393f4f; */
    --mast-base-color-l08: color-mix(in srgb, var(--mast-base-color), white 8%);

    /* lighten(base-color, 12%) */
    /* --mast-base-color-l12: #42485a; */
    --mast-base-color-l12: color-mix(
        in srgb,
        var(--mast-base-color),
        white 12%
    );

    /* lighten(base-color, 26%) */
    /* --mast-base-color-l26: #606984; */
    --mast-base-color-l26: color-mix(
        in srgb,
        var(--mast-base-color),
        white 26%
    );

    /* darken(base-color, 4%) */
    /* --mast-base-color-d04: #1f232b; */
    --mast-base-color-d04: color-mix(in srgb, var(--mast-base-color), black 4%);

    /* darken(base-color, 8%) */
    /* --mast-base-color-d08: #17191f; */
    --mast-base-color-d08: color-mix(in srgb, var(--mast-base-color), black 8%);

    /* darken(highlight-color, 8%) */
    /* --mast-highlight-text-color: #8c8dff; */
    --mast-highlight-text-color: color-mix(
        in srgb,
        var(--mast-highlight-color),
        black 8%
    );

    /* lighten(lighten(primary-color, 20%), 4%) */
    /* 4% of 20% is 23.2, almost 24% */
    /* --mast-darker-text-color: #a8b9cf; */
    --mast-darker-text-color: color-mix(
        in srgb,
        var(--mast-primary-color),
        white 24%
    );
}

/* Keep all variable declaration above this */
/* ----------- TEMPLATE STARTS ------------ */

:root {
    --dropdown-border-color: var(--mast-base-color-l12) !important;
    --dropdown-background-color: var(--mast-base-color-l04) !important;
    --dropdown-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.25),
        0 8px 10px -6px rgba(0, 0, 0, 0.25);
    --modal-background-color: var(--mast-base-color-d04) !important;
    --modal-border-color: var(--mast-base-color-l04) !important;
}

html {
    scrollbar-color: transparent rgba(0, 0, 0, 0.1) !important;
}

::-webkit-scrollbar-track {
    background: transparent !important;
}

::-webkit-scrollbar-track:hover {
    background: rgba(0, 0, 0, 0.1) !important;
}

::-webkit-scrollbar-track:active {
    background: rgba(0, 0, 0, 0.2) !important;
}

::-webkit-scrollbar-thumb {
    background: var(--mast-base-color-l04) !important;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--mast-base-color-l12) !important;
}

::-webkit-scrollbar-thumb:active {
    background: var(--mast-highlight-color) !important;
}

body {
    background: var(--mast-base-color-d04) !important;
    color: var(--mast-primary-text-color) !important;
}

body.lighter {
    background: var(--mast-base-color) !important;
}

body.admin {
    background: var(--mast-base-color-d04) !important;
}

body.error {
    background: var(--mast-base-color) !important;
    color: var(--mast-primary-color) !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    color: var(--mast-primary-color) !important;
}

strong {
    color: var(--mast-primary-text-color) !important;
}

hr,
.status,
.column > .scrollable,
.column-header,
.columns-area,
.columns-area--mobile,
.column-link,
.getting-started .column-link,
.scrollable .column-link,
dl,
.column-subheading,
.column-inline-form,
.column-back-button,
.column-header,
.column-header__collapsible-inner {
    border-color: var(--mast-base-color-l08) !important;
    border-top-color: var(--mast-base-color-l08) !important;
}

.dropdown-menu {
    background-color: var(--mast-base-color-l08) !important;
}

.dropdown-menu__item a,
.dropdown-menu__item button {
    background-color: transparent !important;
}

.dropdown-menu__item a:focus,
.dropdown-menu__item a:hover,
.dropdown-menu__item a:active,
.dropdown-menu__item button:focus,
.dropdown-menu__item button:hover,
.dropdown-menu__item button:active {
    background-color: var(--mast-base-color) !important;
}

.dropdown-menu__separator {
    border-color: var(--mast-base-color-l12) !important;
}

.column-header__collapsible {
    border-color: var(--mast-base-color-l26) !important;
}

.notification__filter-bar {
    border-color: var(--mast-base-color-l08) !important;
}

.search__input {
    background-color: var(--mast-base-color-l08) !important;
    border-color: var(--mast-base-color-d08) !important;
}

.column-header__back-button,
.column-header__button,
.column-header__button.active,
.account__header {
    background-color: transparent !important;
}

.hint {
    color: var(--mast-secondary-color) !important;
}

.prose {
    color: var(--mast-base-color-l26) !important;
}

label {
    color: var(--mast-primary-color) !important;
}

.admin-wrapper textarea,
select,
input {
    background-color: var(--mast-shadow-color) !important;
    color: var(--mast-primary-color) !important;
    border-color: var(--mast-base-color-l08) !important;
}

select::placeholder,
input::placeholder,
textarea::placeholder {
    color: var(--mast-base-color-l26) !important;
}

mark {
    color: var(--mast-highlight-color) !important;
}

a {
    color: var(--mast-primary-color) !important;
}

a:focus {
    outline: solid 2px #7477fd;
}

a:focus:not(:focus-visible) {
    outline: none;
}

body.player {
    background: #191b22;
}

body.embed {
    background: var(--mast-base-color-l04) !important;
}

.logo {
    color: var(--mast-primary-text-color) !important;
}

.logo-container a {
    color: var(--mast-primary-text-color) !important;
}

.account-header {
    border-bottom: 1px solid var(--mast-base-color) !important;
}

.account-header .name {
    color: var(--mast-secondary-color) !important;
}

.account-header .logout-link {
    color: var(--mast-secondary-color) !important;
}

.account__header__bar {
    border-bottom: 1px solid var(--mast-base-color-l08) !important;
}

.hero-widget__img {
    background: #000000;
}

.hero-widget__text {
    background: var(--mast-base-color) !important;
    color: var(--mast-primary-color) !important;
}

.hero-widget__text em {
    color: #bcc9da;
}

.hero-widget__text a {
    color: var(--mast-secondary-color) !important;
}

.endorsements-widget h4 {
    color: var(--mast-primary-color) !important;
}

.directory {
    background: var(--mast-base-color) !important;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}

.directory__tag > a,
.directory__tag > div {
    background: var(--mast-base-color) !important;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    color: inherit;
}

.directory__tag > a:hover,
.directory__tag > a:active,
.directory__tag > a:focus {
    background: var(--mast-base-color-l08) !important;
}

.directory__tag.active > a {
    background: var(--mast-highlight-color) !important;
}

.directory__tag h4,
.directory__tag h4 .fa,
.directory__tag h4 small,
.directory__tag h4 .trends__item__current {
    color: var(--mast-primary-text-color) !important;
}

.directory__tag.active .avatar-stack .account__avatar {
    border-color: var(--mast-highlight-color) !important;
}

.accounts-table thead th {
    color: var(--mast-primary-color) !important;
}

.accounts-table__count {
    color: var(--mast-primary-text-color) !important;
}

.accounts-table__count small {
    color: var(--mast-primary-color) !important;
}

.accounts-table tbody td.accounts-table__extra {
    color: var(--mast-primary-color) !important;
}

.accounts-table tbody td.accounts-table__extra a {
    color: inherit;
}

.placeholder-widget a {
    color: var(--mast-highlight-color) !important;
}

.form-container {
    color: var(--mast-secondary-color) !important;
}

.indicator-icon {
    color: var(--mast-primary-text-color) !important;
}

.indicator-icon.success {
    background: #79bd9a;
}

.indicator-icon.failure {
    background: #df405a;
}

.input-copy {
    background-color: transparent !important;
    border-color: transparent !important;
}

.simple_form input,
.simple_form textarea {
    color: var(--mast-primary-text-color) !important;
    background: var(--mast-shadow-color) !important;
    border: 1px solid var(--mast-shadow-color) !important;
}

.simple_form input[type="text"],
.simple_form input[type="number"],
.simple_form input[type="email"],
.simple_form input[type="password"],
.simple_form input[type="url"],
.simple_form input[type="datetime-local"],
.simple_form textarea {
    color: var(--mast-primary-text-color) !important;
    background: var(--mast-shadow-color) !important;
}

.simple_form input::-ms-input-placeholder,
.simple_form textarea::-ms-input-placeholder {
    color: var(--mast-darker-text-color) !important;
}

.simple_form input::placeholder,
.simple_form textarea::placeholder {
    color: var(--mast-darker-text-color) !important;
}

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

.simple_form input[type="text"]:active,
.simple_form input[type="text"]:focus,
.simple_form input[type="number"]:active,
.simple_form input[type="number"]:focus,
.simple_form input[type="email"]:active,
.simple_form input[type="email"]:focus,
.simple_form input[type="password"]:active,
.simple_form input[type="password"]:focus,
.simple_form input[type="url"]:active,
.simple_form input[type="url"]:focus,
.simple_form input[type="datetime-local"]:active,
.simple_form input[type="datetime-local"]:focus,
.simple_form textarea:active,
.simple_form textarea:focus {
    border-color: var(--mast-highlight-text-color) !important;
}

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

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

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

.simple_form .input.field_with_errors .error {
    color: #e87487;
}

.simple_form button,
.simple_form .button,
.simple_form .block-button {
    background-color: var(--mast-highlight-color) !important;
    color: var(--mast-base-color-d08) !important;
    border-color: var(--mast-shadow-color) !important;
}

.simple_form button:active,
.simple_form button:focus,
.simple_form button:hover,
.simple_form .button:active,
.simple_form .button:focus,
.simple_form .button:hover,
.simple_form .block-button:active,
.simple_form .block-button:focus,
.simple_form .block-button:hover {
    background-color: transparent !important;
    color: var(--mast-highlight-color) !important;
    border-color: var(--mast-shadow-color) !important;
}

.simple_form button:disabled:hover,
.simple_form .button:disabled:hover,
.simple_form .block-button:disabled:hover {
    background-color: var(--mast-primary-color) !important;
    color: var(--mast-base-color-d08) !important;
}

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

.simple_form button.negative:hover,
.simple_form button.negative:active,
.simple_form button.negative:focus,
.simple_form .button.negative:hover,
.simple_form .button.negative:active,
.simple_form .button.negative:focus,
.simple_form .block-button.negative:hover,
.simple_form .block-button.negative:active,
.simple_form .block-button.negative:focus {
    background-color: #b7253d;
}

.flash-message {
    background: var(--mast-base-color-l08) !important;
    color: var(--mast-primary-color) !important;
}

.flash-message a {
    color: var(--mast-primary-color) !important;
}

.flash-message.notice {
    background: rgba(121, 189, 154, 0.25);
    color: #79bd9a;
}

.flash-message.warning {
    background: rgba(202, 143, 4, 0.25);
    color: #ca8f04;
}

.flash-message.alert {
    background: rgba(223, 64, 90, 0.1);
    color: #df405a;
}

.card__bar {
    background: var(--mast-base-color-l04) !important;
}

.card__bar .avatar img {
    background: var(--mast-base-color-d08) !important;
}

.card__bar .display-name strong {
    color: var(--mast-primary-text-color) !important;
}

.card__bar .display-name span {
    color: var(--mast-primary-color) !important;
}

.pagination a,
.pagination .current,
.pagination .newer,
.pagination .older,
.pagination .page,
.pagination .gap {
    color: var(--mast-primary-text-color) !important;
}

.pagination .current {
    background: var(--mast-primary-text-color) !important;
    color: var(--mast-base-color) !important;
}

.pagination .older,
.pagination .newer {
    color: var(--mast-secondary-color) !important;
}

.nothing-here {
    background: var(--mast-base-color) !important;
    color: var(--mast-primary-color) !important;
}

.information-badge,
.simple_form .overridden,
.simple_form .recommended,
.simple_form .not_recommended {
    color: var(--mast-secondary-color) !important;
}

.account-role {
    border: 1px solid var(--mast-highlight-text-color) !important;
    color: var(--mast-highlight-text-color) !important;
}

.account-role svg {
    color: currentColor;
}

.account__header__fields dt {
    background: rgba(23, 25, 31, 0.5);
    color: var(--mast-secondary-color) !important;
}

.account__header__fields dd {
    color: var(--mast-primary-color) !important;
}

.account__header__fields a {
    color: var(--mast-highlight-text-color) !important;
}

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

.batch-table__row--muted {
    color: var(--mast-base-color-l26) !important;
}

.batch-table__row--attention {
    color: #ca8f04;
}

.activity-stream {
    background: var(--mast-base-color) !important;
}

.activity-stream--highlighted .entry {
    background: var(--mast-base-color-l08) !important;
}

.notification__filter-bar button.active,
.notification__filter-bar a.active,
.account__section-headline button.active,
.account__section-headline a.active {
    color: var(--mast-highlight-color) !important;
}

.notification__filter-bar button {
    color: var(--mast-primary-text-color) !important;
}

.button {
    background-color: var(--mast-highlight-color) !important;
    color: var(--mast-base-color-d08) !important;
    border-color: var(--mast-shadow-color) !important;
}

.button:active,
.button:focus,
.button:hover {
    background-color: transparent !important;
    color: var(--mast-highlight-color) !important;
    border-color: var(--mast-shadow-color) !important;
}

.button--destructive:active,
.button--destructive:focus,
.button--destructive:hover {
    background-color: #b7253d;
}

.button:disabled,
.button.disabled {
    background-color: var(--mast-primary-color) !important;
}

.button:disabled:hover,
.button.disabled:hover {
    background-color: var(--mast-primary-color) !important;
    color: var(--mast-base-color-d08) !important;
}

.button.button-secondary {
    background-color: var(--mast-highlight-color) !important;
    color: var(--mast-base-color-d08) !important;
    border-color: var(--mast-shadow-color) !important;
}

.button.button-secondary:active,
.button.button-secondary:focus,
.button.button-secondary:hover {
    background-color: transparent !important;
    color: var(--mast-highlight-color) !important;
    border-color: var(--mast-shadow-color) !important;
}

.button.button-tertiary {
    background-color: transparent !important;
    color: var(--mast-highlight-color) !important;
    border-color: var(--mast-shadow-color) !important;
}

.button.button-tertiary:active,
.button.button-tertiary:focus,
.button.button-tertiary:hover {
    background-color: var(--mast-highlight-color) !important;
    color: var(--mast-base-color-d08) !important;
    border-color: var(--mast-shadow-color) !important;
}

.button.button-tertiary.button--confirmation {
    color: #79bd9a;
    border-color: #79bd9a;
}

.button.button-tertiary.button--confirmation:active,
.button.button-tertiary.button--confirmation:focus,
.button.button-tertiary.button--confirmation:hover {
    background: #79bd9a;
    color: var(--mast-primary-text-color) !important;
}

.button.button-tertiary.button--destructive {
    color: #df405a;
    border-color: #df405a;
}

.button.button-tertiary.button--destructive:active,
.button.button-tertiary.button--destructive:focus,
.button.button-tertiary.button--destructive:hover {
    background: #df405a;
    color: var(--mast-primary-text-color) !important;
}

.icon-button {
    color: var(--mast-base-color-l26) !important;
}

.icon-button:hover,
.icon-button:active,
.icon-button:focus {
    color: var(--mast-secondary-color) !important;
    background-color: rgba(96, 105, 132, 0.15);
}

.icon-button.disabled {
    color: var(--mast-base-color-l12) !important;
    background-color: transparent !important;
}

.text-icon-button {
    color: var(--mast-base-color-l26) !important;
}

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

.text-icon-button.disabled {
    color: #979eb3;
    background-color: transparent !important;
}

.text-icon-button.active {
    color: var(--mast-highlight-text-color) !important;
}

.link-button {
    color: var(--mast-highlight-text-color) !important;
}

.link-button--destructive {
    color: #df405a;
}

.link-button:disabled {
    color: var(--mast-primary-color) !important;
    cursor: default;
}

.animated-number {
    /* color: #79bd9a; */
    color: var(--mast-highlight-color) !important;
}

.inline-alert {
    color: #79bd9a;
}

.compose-form .autosuggest-textarea,
.compose-form .autosuggest-input,
.compose-form .spoiler-input {
    background-color: var(--mast-base-color-d08) !important;
    color: var(--mast-primary-text-color) !important;
}

.compose-form .autosuggest-textarea__textarea {
    color: black !important;
}

.compose-form__poll-wrapper .autosuggest-input {
    background-color: transparent !important;
}

.poll__option .autosuggest-input .poll__option input[type="text"] {
    background-color: white !important;
    color: black !important;
}

.compose-form .autosuggest-textarea__textarea::-ms-input-placeholder,
.compose-form .spoiler-input__input::-ms-input-placeholder,
.compose-form .autosuggest-textarea__textarea::placeholder,
.compose-form .spoiler-input__input::placeholder {
    color: var(--mast-base-color-l26) !important;
}

.compose-form .autosuggest-textarea__suggestions {
    background: var(--mast-secondary-color) !important;
    color: var(--mast-base-color) !important;
}

.compose-form .autosuggest-textarea__suggestions__item {
    background: #b9c8d5;
}

.compose-form .autosuggest-hashtag__name,
.compose-form .autosuggest-account .display-name__account,
.compose-form .compose-form__modifiers,
.compose-form .compose-form__modifiers .compose-form__upload-wrapper,
.compose-form .compose-form__modifiers .compose-form__uploads-wrapper,
.compose-form .compose-form__modifiers .compose-form__upload__actions,
.compose-form .compose-form__modifiers .compose-form__upload .icon-button,
.compose-form .compose-form__buttons-wrapper,
.compose-form .compose-form__buttons-wrapper .compose-form__buttons,
.compose-form .compose-form__buttons-wrapper .icon-button,
.compose-form .compose-form__buttons-wrapper .text-icon-button,
.compose-form .compose-form__publish,
.compose-form .compose-form__publish .compose-form__publish-button-wrapper,
.character-counter {
    color: var(--mast-base-color) !important;
}

.sign-in-banner p {
    color: var(--mast-primary-color) !important;
}

.sign-in-banner p a {
    color: var(--mast-secondary-color) !important;
}

.reply-indicator {
    background: var(--mast-base-color-l08) !important;
}

.reply-indicator__display-name {
    color: var(--mast-secondary-color) !important;
}

.status,
.status.light,
.status--in-thread,
.status--first-in-thread,
.status__visibility-icon,
.status__display-name,
.status__info,
.status-check-box__status,
.status-check-box__status .detailed-status__display-name,
.detailed-status,
.detailed-status--flex,
.detailed-status .status__content,
.detailed-status .status__prepend,
.detailed-status__meta {
    color: var(--mast-primary-text-color) !important;
}

.status--in-thread .status__content,
.status--in-thread .status__action-bar,
.status--in-thread .media-gallery,
.status--in-thread .video-player,
.status--in-thread .audio-player,
.status--in-thread .attachment-list,
.status--in-thread .picture-in-picture-placeholder,
.status--in-thread .status-card,
.status--in-thread .hashtag-bar {
    color: var(--mast-secondary-color) !important;
}

.status__relative-time,
.notification__relative_time {
    color: var(--mast-base-color-l26) !important;
}
.status__display-name,
.status__relative-time,
.detailed-status__display-name,
.detailed-status__datetime,
.detailed-status__application,
.account__display-name {
    color: var(--mast-base-color-l26) !important;
}

.status__line,
.status__line--full::before,
.status__prepend,
.status__prepend .status__display-name strong,
.status__action-bar,
.detailed-status__action-bar-dropdown,
.detailed-status,
.detailed-status--flex .status__content,
.detailed-status--flex .detailed-status__meta {
    color: var(--mast-primary-text-color) !important;
}

.status__content a,
.status__content a:hover,
.status__content a.mention:hover span,
.status__content a.unhandled-link,
.status__content .status__content__spoiler-link:hover,
.status__content .status__content__spoiler-link:focus {
    color: var(--mast-highlight-text-color) !important;
}

.status__content.status__content--with-spoiler .status__content__text,
.reply-indicator__content.status__content--with-spoiler .status__content__text,
.detailed-status .status__content .status__content__spoiler-link {
    color: var(--mast-primary-text-color) !important;
    background: var(--mast-base-color-l04) !important;
}

.detailed-status .status__content .status__content__spoiler-link:hover,
.detailed-status .status__content .status__content__spoiler-link:focus {
    background: var(--mast-base-color-d04) !important;
}

.announcements__item__content,
.announcements__item__content p {
    color: var(--mast-secondary-color) !important;
}

.announcements__item__content a,
.announcements__item__content a:hover,
.announcements__item__content a.mention:hover span,
.announcements__item__content a.unhandled-link {
    color: var(--mast-highlight-text-color) !important;
}

.translate-button,
.status__content__read-more-button,
.status__content__translate-button,
.status__content__read-more-button:hover,
.status__content__read-more-button:active,
.status__content__translate-button:hover,
.status__content__translate-button:active {
    color: var(--mast-highlight-text-color) !important;
}

.status__content__spoiler-link,
.translate-button {
    background: var(--mast-base-color-l26) !important;
    color: var(--mast-base-color-d08) !important;
}

.status__content__spoiler-link:hover,
.status__content__spoiler-link:focus,
.translate-button:hover,
.translate-button:active {
    background: var(--mast-base-color-04) !important;
    color: var(--mast-primary-text-color) !important;
}

.status__wrapper--filtered,
.status__wrapper--filtered__button,
.status__wrapper--filtered__button:hover,
.status__wrapper--filtered__button:active {
    color: var(--mast-highlight-text-color) !important;
    background: var(--mast-primary-text-color) !important;
}

.focusable:focus,
.focusable:focus .detailed-status,
.focusable:focus .detailed-status__action-bar {
    background: var(--mast-base-color-l04) !important;
}

.status__wrapper-direct,
.status__wrapper-direct:focus,
.status__wrapper-direct .status__prepend {
    background: #2b2f41;
}

.detailed-status {
    background: var(--mast-base-color-l04) !important;
    border-top: 1px solid var(--mast-base-color-l08) !important;
}

.detailed-status__meta {
    color: var(--mast-base-color-l26) !important;
}

.detailed-status__action-bar {
    background: var(--mast-base-color-l04) !important;
    border-top: 1px solid var(--mast-base-color-l08) !important;
    border-bottom: 1px solid var(--mast-base-color-l08) !important;
}

.detailed-status__wrapper-direct .detailed-status,
.detailed-status__wrapper-direct .detailed-status__action-bar {
    background: #2b2f41;
}

.detailed-status__wrapper-direct:focus .detailed-status,
.detailed-status__wrapper-direct:focus .detailed-status__action-bar {
    background: #34374c;
}

.detailed-status__link {
    color: inherit;
}

.domain {
    border-bottom: 1px solid var(--mast-base-color-l08) !important;
}

.domain .domain__domain-name {
    color: var(--mast-primary-text-color) !important;
}

.account {
    border-bottom: 1px solid var(--mast-base-color-l08) !important;
}

.account .account__display-name {
    color: var(--mast-primary-color) !important;
}

.account__note {
    color: var(--mast-primary-color) !important;
}

.notification__report {
    border-bottom: 1px solid var(--mast-base-color-l08) !important;
}

.notification__report__details {
    color: var(--mast-primary-color) !important;
}

.notification__message {
    color: var(--mast-primary-color) !important;
}

.icon-button.star-icon.active {
    color: var(--mast-highlight-color) !important;
}

.icon-button.bookmark-icon.active {
    color: var(--mast-highlight-color) !important;
}

.icon-button.active {
    color: var(--mast-highlight-color) !important;
}

.navigation-bar {
    color: var(--mast-primary-color) !important;
}

.ui__header {
    background: var(--mast-base-color-d08) !important;
}

.layout-single-column .ui__header {
    border-bottom: 1px solid var(--mast-base-color-l08) !important;
}

.tabs-bar__wrapper {
    background: var(--mast-base-color-d08) !important;
}

.column > .scrollable {
    background: var(--mast-base-color) !important;
}

.drawer__tab {
    color: var(--mast-primary-color) !important;
    border-bottom: 2px solid transparent !important;
}

.navigation-panel {
    background: var(--mast-base-color-l08) !important;
    -webkit-border-start: 1px solid var(--mast-base-color-l08) !important;
    border-inline-start: 1px solid var(--mast-base-color-l08) !important;
}

.copy-paste-text {
    background: var(--mast-base-color-l04) !important;
    border: 1px solid var(--mast-base-color-l08) !important;
    color: var(--mast-primary-text-color) !important;
}

.copy-paste-text:focus,
.copy-paste-text.focused {
    border-color: var(--mast-highlight-text-color) !important;
}

.copy-paste-text.copied {
    border-color: #79bd9a;
}

.column-back-button {
    border-bottom: 1px solid var(--mast-base-color-l08) !important;
    background: transparent !important;
}

.column-header__back-button {
    background: transparent !important;
}

.column-link {
    background: var(--mast-base-color-l08) !important;
    color: var(--mast-primary-text-color) !important;
    border-left: 4px solid transparent !important;
}

.column-link:hover,
.column-link:focus,
.column-link:active {
    background: var(--mast-base-color-d08) !important;
    color: var(--mast-highlight-color) !important;
}

.column-link:focus-visible {
    border-color: #7477fd;
}

.switch-to-advanced {
    background-color: var(--mast-base-color) !important;
    color: var(--mast-primary-color) !important;
}

.switch-to-advanced .switch-to-advanced__toggle {
    color: var(--mast-shadow-color) !important;
    font-weight: bold;
}

.onboarding__link {
    background: var(--mast-base-color-l04) !important;
    color: var(--mast-highlight-text-color) !important;
}

.onboarding__link:hover,
.onboarding__link:focus,
.onboarding__link:active {
    background: var(--mast-base-color-l08) !important;
}

.onboarding__steps__item {
    background: var(--mast-base-color-l04) !important;
}

.onboarding__steps__item:hover,
.onboarding__steps__item:focus,
.onboarding__steps__item:active {
    background: var(--mast-base-color-l08) !important;
}

.follow-recommendations {
    background: var(--mast-base-color-d04) !important;
}

.tip-carousel {
    background: var(--mast-base-color-l04) !important;
    border: 1px solid transparent !important;
}

.tip-carousel:focus {
    border-color: var(--mast-highlight-text-color) !important;
}

.copy-paste-text {
    background: var(--mast-base-color-l04) !important;
    border: 1px solid var(--mast-base-color-l08) !important;
    color: var(--mast-primary-text-color) !important;
}

.copy-paste-text:focus,
.copy-paste-text.focused {
    border-color: var(--mast-highlight-text-color) !important;
}

.copy-paste-text.copied {
    border-color: #79bd9a;
}

.onboarding__link {
    background: var(--mast-base-color-l04) !important;
    color: var(--mast-highlight-text-color) !important;
}

.onboarding__link:hover,
.onboarding__link:focus,
.onboarding__link:active {
    background: var(--mast-base-color-l08) !important;
}

.onboarding__steps__item {
    background: var(--mast-base-color-l04) !important;
}

.onboarding__steps__item:hover,
.onboarding__steps__item:focus,
.onboarding__steps__item:active {
    background: var(--mast-base-color-l08) !important;
}

.follow-recommendations {
    background: var(--mast-base-color-d04) !important;
}

.tip-carousel {
    background: var(--mast-base-color-l04) !important;
    border: 1px solid transparent !important;
}

.tip-carousel:focus {
    border-color: var(--mast-highlight-text-color) !important;
}

.copy-paste-text {
    background: var(--mast-base-color-l04) !important;
    border: 1px solid var(--mast-base-color-l08) !important;
    color: var(--mast-primary-text-color) !important;
}

.copy-paste-text:focus,
.copy-paste-text.focused {
    border-color: var(--mast-highlight-text-color) !important;
}

.copy-paste-text.copied {
    border-color: #79bd9a;
}

.onboarding__link {
    background: var(--mast-base-color-l04) !important;
    color: var(--mast-highlight-text-color) !important;
}

.onboarding__link:hover,
.onboarding__link:focus,
.onboarding__link:active {
    background: var(--mast-base-color-l08) !important;
}

.onboarding__steps__item {
    background: var(--mast-base-color-l04) !important;
}

.onboarding__steps__item:hover,
.onboarding__steps__item:focus,
.onboarding__steps__item:active {
    background: var(--mast-base-color-l08) !important;
}

.follow-recommendations {
    background: var(--mast-base-color-d04) !important;
}

.tip-carousel {
    background: var(--mast-base-color-l04) !important;
    border: 1px solid transparent !important;
}

.tip-carousel:focus {
    border-color: var(--mast-highlight-text-color) !important;
}

.copy-paste-text {
    background: var(--mast-base-color-l04) !important;
    border: 1px solid var(--mast-base-color-l08) !important;
    color: var(--mast-primary-text-color) !important;
}

.copy-paste-text:focus,
.copy-paste-text.focused {
    border-color: var(--mast-highlight-text-color) !important;
}

.copy-paste-text.copied {
    border-color: #79bd9a;
}

.onboarding__link {
    background: var(--mast-base-color-l04) !important;
    color: var(--mast-highlight-text-color) !important;
}

.onboarding__link:hover,
.onboarding__link:focus,
.onboarding__link:active {
    background: var(--mast-base-color-l08) !important;
}

.onboarding__steps__item {
    background: var(--mast-base-color-l04) !important;
}

.onboarding__steps__item:hover,
.onboarding__steps__item:focus,
.onboarding__steps__item:active {
    background: var(--mast-base-color-l08) !important;
}

.follow-recommendations {
    background: var(--mast-base-color-d04) !important;
}

.tip-carousel {
    background: var(--mast-base-color-l04) !important;
    border: 1px solid transparent !important;
}

.tip-carousel:focus {
    border-color: var(--mast-highlight-text-color) !important;
}

.status-card {
    color: var(--mast-primary-color) !important;
    border: 1px solid var(--mast-base-color-l08) !important;
}

.status-card__actions > div {
    background: rgba(0, 0, 0, 0.6);
}

.status-card__actions button,
.status-card__actions a {
    color: var(--mast-secondary-color) !important;
}

.status-card__actions button:hover,
.status-card__actions button:active,
.status-card__actions button:focus,
.status-card__actions a:hover,
.status-card__actions a:active,
.status-card__actions a:focus {
    color: var(--mast-primary-text-color) !important;
}

a.status-card:hover .status-card__title,
a.status-card:hover .status-card__host,
a.status-card:hover .status-card__author,
a.status-card:hover .status-card__description,
a.status-card:focus .status-card__title,
a.status-card:focus .status-card__host,
a.status-card:focus .status-card__author,
a.status-card:focus .status-card__description,
a.status-card:active .status-card__title,
a.status-card:active .status-card__host,
a.status-card:active .status-card__author,
a.status-card:active .status-card__description {
    color: var(--mast-highlight-text-color) !important;
}

.status-card__title {
    color: var(--mast-primary-text-color) !important;
}

.status-card__host {
    color: var(--mast-primary-color) !important;
}

.status-card__author {
    color: var(--mast-primary-text-color) !important;
}

.status-card__description {
    color: var(--mast-primary-color) !important;
}

.load-more {
    color: var(--mast-base-color-l26) !important;
    background-color: transparent !important;
}

.load-more:hover {
    background: var(--mast-base-color-l02) !important;
}

.timeline-hint {
    color: var(--mast-primary-color) !important;
}

.timeline-hint strong {
    color: var(--mast-base-color-l26) !important;
}

.timeline-hint a {
    color: var(--mast-highlight-text-color) !important;
}

.timeline-hint a:hover,
.timeline-hint a:focus,
.timeline-hint a:active {
    color: #a0a1ff;
}

.regeneration-indicator {
    color: var(--mast-base-color-l26) !important;
}

.regeneration-indicator__label strong {
    color: var(--mast-base-color-l26) !important;
}

.regeneration-indicator__label span {
    color: var(--mast-base-color-l26) !important;
}

.column-header {
    background: var(--mast-base-color) !important;
}

.column-header > button {
    color: inherit;
}

.column-header > .column-header__back-button {
    background: transparent !important;
    color: var(--mast-secondary-color) !important;
}

.column-header__button {
    color: var(--mast-primary-color) !important;
    background: transparent !important;
}

.column-header__button:hover {
    color: var(--mast-highlight-text-color) !important;
}

.column-header__button.active {
    color: var(--mast-primary-text-color) !important;
    background: var(--mast-base-color-l04) !important;
}

.column-header__button.active:hover {
    color: var(--mast-primary-text-color) !important;
}

.column-header__button:disabled {
    color: var(--mast-base-color-l26) !important;
}

.column-header__collapsible {
    color: var(--mast-primary-color) !important;
}

.column-header__collapsible hr {
    border-top: 1px solid var(--mast-base-color-l08) !important;
}

.column-header__collapsible-inner {
    background: var(--mast-base-color) !important;
}

.column-header__setting-btn:hover,
.column-header__setting-btn:focus {
    color: var(--mast-primary-color) !important;
}

.text-btn {
    color: inherit;
}

.column-header__issue-btn {
    color: #ff5050;
}

.column-header__issue-btn:hover {
    color: #df405a;
}

.loading-indicator {
    color: var(--mast-base-color-l26) !important;
}

.circular-progress {
    color: var(--mast-base-color-l26) !important;
}

.circular-progress circle {
    stroke: currentColor;
}

.account--panel {
    background: var(--mast-base-color-l04) !important;
    border-top: 1px solid var(--mast-base-color-l08) !important;
    border-bottom: 1px solid var(--mast-base-color-l08) !important;
}

.column-subheading {
    background: var(--mast-base-color-l08) !important;
}

.drawer__header,
.drawer__inner,
.drawer__inner__mastodon {
    background-color: var(--mast-base-color-l08) !important;
}

.column-settings__outer {
    background: var(--mast-base-color-l08) !important;
}

.column-settings__section {
    color: var(--mast-primary-color) !important;
}

.column-settings__hashtags .column-select__control {
    background: var(--mast-base-color) !important;
    color: var(--mast-primary-color) !important;
}

.column-settings__hashtags .column-select__placeholder {
    color: var(--mast-base-color-l26) !important;
}

.column-settings__hashtags .column-select__multi-value {
    background: var(--mast-base-color-l08) !important;
}

.column-settings__hashtags .column-select__multi-value__remove {
    background: var(--mast-base-color-l12) !important;
    color: var(--mast-darker-text-color) !important;
}

.column-settings__hashtags .column-select__multi-value__label,
.column-settings__hashtags .column-select__input,
.column-settings__hashtags .column-select__input-container {
    color: var(--mast-primary-color) !important;
}

.column-settings__hashtags .column-select__clear-indicator,
.column-settings__hashtags .column-select__dropdown-indicator {
    color: var(--mast-base-color-l26) !important;
}

.column-settings__hashtags .column-select__clear-indicator:hover,
.column-settings__hashtags .column-select__clear-indicator:active,
.column-settings__hashtags .column-select__clear-indicator:focus,
.column-settings__hashtags .column-select__dropdown-indicator:hover,
.column-settings__hashtags .column-select__dropdown-indicator:active,
.column-settings__hashtags .column-select__dropdown-indicator:focus {
    color: #687390;
}

.column-settings__hashtags .column-select__indicator-separator {
    background-color: var(--mast-base-color-l08) !important;
}

.column-settings__hashtags .column-select__menu {
    background: var(--mast-secondary-color) !important;
    color: var(--mast-primary-color) !important;
    box-shadow: 2px 4px 15px rgba(0, 0, 0, 0.4);
}

.column-settings__hashtags .column-select__menu h4 {
    color: var(--mast-primary-color) !important;
}

.column-settings__hashtags .column-select__menu em {
    color: var(--mast-base-color) !important;
}

.column-settings__hashtags .column-select__option {
    color: var(--mast-base-color) !important;
}

.column-settings__hashtags .column-select__option--is-focused,
.column-settings__hashtags .column-select__option--is-selected {
    background: #b9c8d5;
}

.relationship-tag {
    color: var(--mast-primary-text-color) !important;
    background-color: rgba(0, 0, 0, 0.45);
}

.setting-toggle__label {
    color: var(--mast-primary-color) !important;
}

.limited-account-hint p {
    color: var(--mast-secondary-color) !important;
}

.empty-column-indicator,
.follow_requests-unlocked_explanation {
    color: var(--mast-base-color-l26) !important;
    background: var(--mast-base-color) !important;
}

.empty-column-indicator a,
.follow_requests-unlocked_explanation a {
    color: var(--mast-highlight-text-color) !important;
}

.follow_requests-unlocked_explanation {
    background: var(--mast-base-color-d04) !important;
    border-bottom: 1px solid var(--mast-base-color-l08) !important;
}

.error-column {
    background: var(--mast-base-color) !important;
}

.error-column__message {
    color: var(--mast-primary-color) !important;
}

.error-column__message h1 {
    color: var(--mast-primary-text-color) !important;
}

.emoji-picker-dropdown__menu {
    background: var(--mast-primary-text-color) !important;
}

.emoji-picker-dropdown__modifiers__menu {
    background: var(--mast-primary-text-color) !important;
}

.emoji-picker-dropdown__modifiers__menu button {
    background: transparent !important;
}

.emoji-mart-search input {
    background: transparent !important;
    color: #000000 !important;
}

.upload-area {
    background: rgba(0, 0, 0, 0.8);
}

.upload-area__content {
    color: var(--mast-secondary-color) !important;
    border: 2px dashed var(--mast-base-color-l26) !important;
}

.upload-progress {
    color: var(--mast-base-color-l26) !important;
}

.privacy-dropdown__dropdown {
    background: var(--mast-base-color-l08) !important;
}

.privacy-dropdown__option {
    color: var(--mast-secondary-text-color) !important;
}

.privacy-dropdown__option__content {
    color: var(--mast-secondary-text-color) !important;
}

.privacy-dropdown__option__content strong {
    color: var(--mast-primary-text-color) !important;
}

.privacy-dropdown__option:hover {
    background: var(--mast-base-color) !important;
}

.privacy-dropdown__option.active .privacy-dropdown__option__content,
.privacy-dropdown__option.active .privacy-dropdown__option__content strong {
    color: var(--mast-base-color-d08) !important;
}

.privacy-dropdown__option.active {
    background: var(--mast-highlight-color) !important;
    color: var(--mast-base-color-d08) !important;
}

.privacy-dropdown__option.active:hover {
    background: var(--mast-base-color-d04) !important;
    color: var(--mast-highlight-color) !important;
}

.privacy-dropdown__option.active:hover .privacy-dropdown__option__content,
.privacy-dropdown__option.active:hover
    .privacy-dropdown__option__content
    strong {
    color: var(--mast-highlight-color) !important;
}

.language-dropdown__dropdown {
    background: var(--mast-base-color-d08) !important;
}

.language-dropdown__dropdown__results__item {
    color: var(--mast-base-color) !important;
}

.language-dropdown__dropdown__results__item.active {
    background: var(--mast-base-color-l12) !important;
    color: var(--mast-primary-text-color) !important;
}

.language-dropdown__dropdown__results__item.active:hover {
    background: var(--mast-base-color-l26) !important;
}

.search__popout {
    background: var(--mast-base-color) !important;
}

.search__popout h4 {
    color: var(--mast-base-color-l26) !important;
}

.search__popout__menu__item {
    color: var(--mast-primary-color) !important;
}

.search__popout__menu__item:hover,
.search__popout__menu__item:focus,
.search__popout__menu__item:active,
.search__popout__menu__item.selected {
    background: var(--mast-base-color-l26) !important;
    color: var(--mast-primary-text-color) !important;
}

.search__popout__menu__item:hover .icon-button,
.search__popout__menu__item:focus .icon-button,
.search__popout__menu__item:active .icon-button,
.search__popout__menu__item.selected .icon-button {
    color: var(--mast-primary-text-color) !important;
}

.search.active .search__popout {
    background: var(--mast-base-color) !important;
}

.search__input {
    color: var(--mast-primary-color) !important;
}

.search__icon .icon {
    color: var(--mast-secondary-color) !important;
}

.search__icon .icon-times-circle {
    color: var(--mast-base-color-l26) !important;
}

.search__icon .icon-times-circle:hover {
    color: var(--mast-secondary-color) !important;
}

.search-results__header {
    color: var(--mast-base-color-l26) !important;
    background: var(--mast-base-color-l02) !important;
}

.search-results__section__header {
    background: var(--mast-base-color-d04) !important;
    color: var(--mast-primary-color) !important;
}

.search-results__hashtag {
    color: var(--mast-secondary-color) !important;
}

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

.search-results__info {
    color: var(--mast-primary-color) !important;
}

.modal-root__overlay {
    background: rgba(0, 0, 0, 0.7);
}

.modal-root__container {
    background: var(--mast-base-color) !important;
}

.media-modal__close,
.media-modal__zoom-button {
    color: rgba(255, 255, 255, 0.7);
}

.media-modal__close:hover,
.media-modal__close:focus,
.media-modal__close:active,
.media-modal__zoom-button:hover,
.media-modal__zoom-button:focus,
.media-modal__zoom-button:active {
    color: var(--mast-primary-text-color) !important;
    background-color: rgba(255, 255, 255, 0.15);
}

.media-modal__close:focus,
.media-modal__zoom-button:focus {
    background-color: rgba(255, 255, 255, 0.3);
}

.media-modal__closer {
    background: transparent !important;
}

.media-modal__nav {
    color: rgba(255, 255, 255, 0.7);
}

.media-modal__nav:hover,
.media-modal__nav:focus,
.media-modal__nav:active {
    color: var(--mast-primary-text-color) !important;
}

.media-modal__overlay
    .picture-in-picture__footer
    .icon-button.star-icon.active:hover,
.media-modal__overlay
    .picture-in-picture__footer
    .icon-button.star-icon.active:focus,
.media-modal__overlay
    .picture-in-picture__footer
    .icon-button.star-icon.active:active {
    background: rgba(202, 143, 4, 0.15);
}

.media-modal__overlay
    .picture-in-picture__footer
    .icon-button.star-icon.active:focus {
    background: rgba(202, 143, 4, 0.3);
}

.media-modal__page-dot {
    background-color: var(--mast-primary-text-color) !important;
}

.media-modal__page-dot:focus {
    background-color: var(--mast-highlight-text-color) !important;
}

.onboarding-modal,
.error-modal,
.embed-modal {
    background: var(--mast-secondary-color) !important;
    color: var(--mast-base-color) !important;
}

.onboarding-modal__paginator,
.error-modal__footer {
    background: #c0cdd9;
}

.display-case__label {
    color: var(--mast-base-color) !important;
}

.display-case__case {
    background: var(--mast-base-color) !important;
    color: var(--mast-secondary-color) !important;
}

.boost-modal,
.confirmation-modal,
.report-modal,
.actions-modal,
.mute-modal,
.block-modal,
.compare-history-modal {
    background: #f2f5f7;
    color: var(--mast-base-color) !important;
}

.boost-modal__action-bar,
.confirmation-modal__action-bar,
.mute-modal__action-bar,
.block-modal__action-bar {
    background: var(--mast-base-color-l26) !important;
}

.report-dialog-modal,
.compare-history-modal__container {
    background: #f2f5f7;
    color: var(--mast-base-color) !important;
}

.report-dialog-modal__container {
    border-top: 1px solid var(--mast-secondary-color) !important;
}

.report-dialog-modal__subtitle,
.report-dialog-modal__lead {
    color: #4a5266;
}

.report-dialog-modal .status__content,
.report-dialog-modal .status__content p {
    color: var(--mast-base-color) !important;
}

.report-dialog-modal .status__content__spoiler-link,
.report-dialog-modal .status__content__spoiler-link:hover {
    color: var(--mast-primary-text-color) !important;
    background: var(--mast-primary-color) !important;
}

.setting-divider {
    background: transparent !important;
}

.compare-history-modal .report-modal__target {
    border-bottom: 1px solid var(--mast-secondary-color) !important;
}

.loading-bar {
    background-color: var(--mast-highlight-text-color) !important;
}

.media-gallery__gifv__label {
    color: var(--mast-primary-text-color) !important;
    background: rgba(0, 0, 0, 0.65);
}

.attachment-list {
    border: 1px solid var(--mast-base-color-l08) !important;
}

.attachment-list__icon {
    color: var(--mast-base-color-l26) !important;
    -webkit-border-end: 1px solid var(--mast-base-color-l08) !important;
    border-inline-end: 1px solid var(--mast-base-color-l08) !important;
}

.attachment-list__list a {
    color: var(--mast-base-color-l26) !important;
}

.attachment-list.compact .icon {
    color: var(--mast-base-color-l26) !important;
}

.onboarding-modal__paginator .onboarding-modal__nav,
.onboarding-modal__paginator .error-modal__nav,
.error-modal__footer .onboarding-modal__nav,
.error-modal__footer .error-modal__nav {
    color: var(--mast-base-color-l26) !important;
}

.onboarding-modal__paginator .onboarding-modal__nav:hover,
.onboarding-modal__paginator .onboarding-modal__nav:focus,
.onboarding-modal__paginator .onboarding-modal__nav:active,
.onboarding-modal__paginator .error-modal__nav:hover,
.onboarding-modal__paginator .error-modal__nav:focus,
.onboarding-modal__paginator .error-modal__nav:active,
.error-modal__footer .onboarding-modal__nav:hover,
.error-modal__footer .onboarding-modal__nav:focus,
.error-modal__footer .onboarding-modal__nav:active,
.error-modal__footer .error-modal__nav:hover,
.error-modal__footer .error-modal__nav:focus,
.error-modal__footer .error-modal__nav:active {
    color: #576078;
    background-color: #a6b9c9;
}

.onboarding-modal__paginator .onboarding-modal__nav.onboarding-modal__done,
.onboarding-modal__paginator .onboarding-modal__nav.onboarding-modal__next,
.onboarding-modal__paginator .error-modal__nav.onboarding-modal__done,
.onboarding-modal__paginator .error-modal__nav.onboarding-modal__next,
.error-modal__footer .onboarding-modal__nav.onboarding-modal__done,
.error-modal__footer .onboarding-modal__nav.onboarding-modal__next,
.error-modal__footer .error-modal__nav.onboarding-modal__done,
.error-modal__footer .error-modal__nav.onboarding-modal__next {
    color: var(--mast-base-color) !important;
}

.onboarding-modal__paginator
    .onboarding-modal__nav.onboarding-modal__done:hover,
.onboarding-modal__paginator
    .onboarding-modal__nav.onboarding-modal__done:focus,
.onboarding-modal__paginator
    .onboarding-modal__nav.onboarding-modal__done:active,
.onboarding-modal__paginator
    .onboarding-modal__nav.onboarding-modal__next:hover,
.onboarding-modal__paginator
    .onboarding-modal__nav.onboarding-modal__next:focus,
.onboarding-modal__paginator
    .onboarding-modal__nav.onboarding-modal__next:active,
.onboarding-modal__paginator .error-modal__nav.onboarding-modal__done:hover,
.onboarding-modal__paginator .error-modal__nav.onboarding-modal__done:focus,
.onboarding-modal__paginator .error-modal__nav.onboarding-modal__done:active,
.onboarding-modal__paginator .error-modal__nav.onboarding-modal__next:hover,
.onboarding-modal__paginator .error-modal__nav.onboarding-modal__next:focus,
.onboarding-modal__paginator .error-modal__nav.onboarding-modal__next:active,
.error-modal__footer .onboarding-modal__nav.onboarding-modal__done:hover,
.error-modal__footer .onboarding-modal__nav.onboarding-modal__done:focus,
.error-modal__footer .onboarding-modal__nav.onboarding-modal__done:active,
.error-modal__footer .onboarding-modal__nav.onboarding-modal__next:hover,
.error-modal__footer .onboarding-modal__nav.onboarding-modal__next:focus,
.error-modal__footer .onboarding-modal__nav.onboarding-modal__next:active,
.error-modal__footer .error-modal__nav.onboarding-modal__done:hover,
.error-modal__footer .error-modal__nav.onboarding-modal__done:focus,
.error-modal__footer .error-modal__nav.onboarding-modal__done:active,
.error-modal__footer .error-modal__nav.onboarding-modal__next:hover,
.error-modal__footer .error-modal__nav.onboarding-modal__next:focus,
.error-modal__footer .error-modal__nav.onboarding-modal__next:active {
    color: var(--mast-base-color-l04) !important;
}

.media-gallery {
    background: none;
    color: none;
}

.media-gallery__item-thumbnail {
    color: var(--mast-secondary-color) !important;
}

.media-gallery__preview {
    background: #000000;
}

.audio-player {
    background: var(--mast-base-color-d08) !important;
}

.audio-player .video-player__volume::before,
.audio-player .video-player__seek::before {
    background: currentColor;
}

.audio-player .video-player__buttons button,
.audio-player .video-player__buttons a {
    color: currentColor;
}

.video-player {
    background: #000000;
    color: var(--mast-primary-text-color) !important;
}

.video-player__controls {
    background: linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.85) 0,
        rgba(0, 0, 0, 0.45) 60%,
        transparent
    );
}

.video-player__spoiler {
    background: #000000;
    color: var(--mast-primary-color) !important;
}

.video-player__spoiler.active:hover,
.video-player__spoiler.active:active,
.video-player__spoiler.active:focus {
    color: #b2c1d5;
}

.video-player__buttons a {
    color: var(--mast-primary-text-color) !important;
}

.scrollable .account-card {
    background: var(--mast-base-color-l08) !important;
}

.notification__filter-bar,
.account__section-headline {
    background: var(--mast-base-color) !important;
    border-bottom: 1px solid var(--mast-base-color-l08) !important;
}

.notification__filter-bar button,
.account__section-headline button {
    background: transparent !important;
}

.notification__filter-bar button.active::before,
.account__section-headline button.active::before {
    background: var(--mast-highlight-text-color) !important;
}

.filter-form {
    background: var(--mast-base-color) !important;
}

.column-inline-form {
    background: var(--mast-base-color-l04) !important;
}

.list-editor {
    background: var(--mast-base-color) !important;
}

.list-editor h4 {
    background: var(--mast-base-color-l12) !important;
}

.list-adder {
    background: var(--mast-base-color) !important;
}

.list-adder__account,
.list-adder__lists,
.list-adder .list {
    background: var(--mast-base-color-l12) !important;
}

.list-adder .list__display-name {
    color: none;
}

.focal-point {
    background: #000000;
}

.focal-point img,
.focal-point video,
.focal-point canvas {
    background: #000000;
}

.focal-point__reticle {
    background: url(/packs/media/images/reticle-dbff413218a2f5843b32cf2fb9968eb4.png)
        no-repeat 0 0;
    box-shadow: 0 0 0 9999em rgba(0, 0, 0, 0.35);
}

.focal-point__preview strong {
    color: var(--mast-primary-text-color) !important;
}

@media screen and (width <= 480px) {
    .focal-point img,
    .focal-point video {
        max-height: 100%;
    }
}

.account__header__content {
    color: var(--mast-primary-color) !important;
}

.account__header__content a {
    color: inherit;
}

.account__header__image {
    background: var(--mast-base-color-d04) !important;
    border-bottom: 1px solid var(--mast-base-color-l08) !important;
}

.account__header__bar .account__avatar {
    background: var(--mast-base-color-d08) !important;
    border: 2px solid var(--mast-base-color) !important;
}

.account__header__tabs__buttons .icon-button {
    border: 1px solid var(--mast-base-color-l12) !important;
}

.account__header__tabs__buttons .icon-button.copied {
    border-color: #79bd9a;
}

.account__header__tabs__name h1 {
    color: var(--mast-primary-text-color) !important;
}

.account__header__tabs__name h1 small {
    color: var(--mast-primary-color) !important;
}

.account__header__bio .account__header__content {
    color: var(--mast-primary-text-color) !important;
}

.account__header__bio .account__header__fields dt {
    color: var(--mast-base-color-l26) !important;
}

.account__header__bio .account__header__fields dd {
    color: var(--mast-primary-color) !important;
}

.account__header__bio .account__header__fields a {
    color: var(--mast-highlight-text-color) !important;
}

.account__header__extra__links {
    color: var(--mast-primary-color) !important;
}

.account__header__extra__links a strong {
    color: var(--mast-primary-text-color) !important;
}

.account__header__account-note {
    color: var(--mast-primary-text-color) !important;
}

.account__header__account-note label {
    color: var(--mast-primary-color) !important;
}

.account__header__account-note textarea {
    color: var(--mast-secondary-color) !important;
    background: transparent !important;
}

.account__header__account-note textarea::-ms-input-placeholder {
    color: var(--mast-base-color-l26) !important;
}

.account__header__account-note textarea::placeholder {
    color: var(--mast-base-color-l26) !important;
}

.account__header__account-note textarea:focus {
    background: var(--mast-base-color) !important;
}

.trends__item {
    border-bottom: 1px solid var(--mast-base-color-l08) !important;
}

.trends__item__name {
    color: var(--mast-base-color-l26) !important;
}

.trends__item__name a {
    color: var(--mast-primary-color) !important;
}

.trends__item__current {
    color: var(--mast-secondary-color) !important;
}

.trends__item--requires-review .trends__item__name,
.trends__item--disabled .trends__item__name,
.trends--compact .trends__item {
    color: var(--mast-base-color-l12) !important;
}

.trends__item--requires-review .trends__item__name a,
.trends__item--disabled .trends__item__name a {
    color: var(--mast-base-color-l12) !important;
}

.trends__item--requires-review .trends__item__current,
.trends__item--disabled .trends__item__current {
    color: var(--mast-base-color-l12) !important;
}

.announcements {
    background: var(--mast-base-color-l08) !important;
}

.announcements__item {
    background: #000000;
}

.announcements__pagination {
    color: var(--mast-primary-color) !important;
}

.reactions-bar__item {
    background: var(--mast-base-color-l12) !important;
    color: var(--mast-primary-color) !important;
}

.reactions-bar__item:hover,
.reactions-bar__item:focus,
.reactions-bar__item:active {
    background: #4a5266;
    color: var(--mast-darker-text-color) !important;
}

.reactions-bar__item.active {
    background-color: #494e7b;
    color: #b5b5ff;
}

.reactions-bar__item.active .reactions-bar__item__count {
    color: #b5b5ff;
}

.reactions-bar .emoji-button {
    color: var(--mast-primary-color) !important;
}

.reactions-bar .emoji-button:hover,
.reactions-bar .emoji-button:active,
.reactions-bar .emoji-button:focus {
    color: var(--mast-darker-text-color) !important;
}

.notifications-permission-banner {
    background: var(--mast-base-color-l08) !important;
}

.notifications-permission-banner h2 {
    color: var(--mast-primary-color) !important;
}

.notifications-permission-banner p {
    color: var(--mast-primary-color) !important;
}

.explore__search-header {
    background: var(--mast-base-color-d04) !important;
}

.explore__search-header .search__input {
    border: 1px solid var(--mast-base-color-l08) !important;
}

.explore__search-header .search__popout {
    border: 1px solid var(--mast-base-color-l08) !important;
}

.explore__search-header .search .icon {
    color: var(--mast-base-color-l26) !important;
}

.explore__search-results {
    background: var(--mast-base-color) !important;
}

.story {
    color: var(--mast-primary-text-color) !important;
    border-bottom: 1px solid var(--mast-base-color-l08) !important;
}

.story:hover,
.story:active,
.story:focus {
    color: var(--mast-highlight-text-color) !important;
}

.story:hover .story__details__publisher,
.story:hover .story__details__shared,
.story:active .story__details__publisher,
.story:active .story__details__shared,
.story:focus .story__details__publisher,
.story:focus .story__details__shared {
    color: var(--mast-highlight-text-color) !important;
}

.story__details__publisher {
    color: var(--mast-primary-color) !important;
}

.story__details__title {
    color: var(--mast-primary-text-color) !important;
}

.story__details__shared {
    color: var(--mast-primary-color) !important;
}

.server-banner {
    background: var(--mast-base-color) !important;
}

.server-banner__introduction {
    color: var(--mast-primary-color) !important;
}

.server-banner__introduction strong {
    color: var(--mast-primary-text-color) !important;
}

.server-banner__introduction a {
    color: inherit;
}

.server-banner__hero {
    background: var(--mast-base-color) !important;
}

.server-banner__number {
    color: var(--mast-primary-text-color) !important;
}

.server-banner__number-label {
    color: var(--mast-primary-color) !important;
}

.server-banner h4 {
    color: var(--mast-primary-color) !important;
}

.interaction-modal {
    background: var(--modal-background-color);
    border: 1px solid var(--modal-border-color);
}

.interaction-modal h3 {
    color: var(--mast-highlight-text-color) !important;
}

.interaction-modal p {
    color: var(--mast-primary-color) !important;
}

.interaction-modal p strong {
    color: var(--mast-primary-text-color) !important;
}

.interaction-modal__icon {
    color: var(--mast-highlight-text-color) !important;
}

.interaction-modal__lead h3 {
    color: var(--mast-highlight-text-color) !important;
}

.interaction-modal__login__input {
    background: var(--mast-base-color) !important;
    border: 1px solid var(--mast-base-color-l08) !important;
    color: var(--mast-primary-text-color) !important;
}

.interaction-modal__login__input input {
    background: transparent !important;
    color: inherit;
}

.interaction-modal__login__input input::-ms-input-placeholder {
    color: var(--mast-darker-text-color) !important;
}

.interaction-modal__login__input input::placeholder {
    color: var(--mast-darker-text-color) !important;
}

.interaction-modal__login__input input:focus {
    background: var(--mast-base-color-l04) !important;
    border-color: var(--mast-highlight-text-color) !important;
}

.interaction-modal__choices__choice p {
    color: var(--mast-primary-color) !important;
}

.interaction-modal__choices__choice h3 {
    color: var(--mast-highlight-text-color) !important;
}

.dismissable-banner,
.warning-banner {
    border: 1px solid var(--mast-highlight-text-color) !important;
    background: rgba(140, 141, 255, 0.15);
}

.dismissable-banner__message,
.warning-banner__message {
    color: var(--mast-primary-text-color) !important;
}

.dismissable-banner__message h1,
.warning-banner__message h1 {
    color: var(--mast-highlight-text-color) !important;
}

.dismissable-banner__action .icon-button,
.warning-banner__action .icon-button {
    color: var(--mast-highlight-text-color) !important;
}

.image__preview {
    background: var(--mast-base-color-l04) !important;
}

.link-footer p {
    color: var(--mast-base-color-l26) !important;
}

.link-footer p a {
    color: var(--mast-base-color-l26) !important;
}

.about {
    background: var(--mast-base-color-l04) !important;
}

.about__footer {
    color: var(--mast-base-color-l26) !important;
}

.about__header__hero {
    background: var(--mast-base-color-l04) !important;
}

.about__header h1 {
    color: var(--mast-primary-text-color) !important;
}

.about__header p {
    color: var(--mast-primary-color) !important;
}

.about__meta {
    background: var(--mast-base-color-l04) !important;
}

.about__meta h4 {
    color: var(--mast-primary-color) !important;
}

.about__mail {
    color: var(--mast-primary-text-color) !important;
}

.about__section__title {
    background: var(--mast-base-color-l04) !important;
    color: var(--mast-highlight-text-color) !important;
}

.about__domain-blocks {
    background: var(--mast-base-color-d04) !important;
    border: 1px solid var(--mast-base-color-l04) !important;
}

.about__domain-blocks__domain {
    background: #242731;
    color: var(--mast-primary-color) !important;
}

.notification-bar {
    background: rgba(0, 0, 0, 0.85);
    color: var(--mast-primary-text-color) !important;
    border: 1px solid rgba(49, 53, 67, 0.85);
}

.notification-bar-action {
    color: var(--mast-highlight-color) !important;
}

.hashtag-header {
    border-bottom: 1px solid var(--mast-base-color-l08) !important;
    color: var(--mast-primary-color) !important;
}

.poll__chart {
    background: #8ba1bf;
}

.poll__chart.leading {
    background: var(--mast-highlight-color) !important;
}

.poll progress::-moz-progress-bar {
    background: #8ba1bf;
}

.poll progress::-ms-fill {
    background: #8ba1bf;
}

.poll progress::-webkit-progress-value {
    background: #8ba1bf;
}

.poll__option input[type="text"]:focus {
    border-color: var(--mast-highlight-text-color) !important;
}

.poll__footer,
.poll__link {
    color: var(--mast-base-color-l26) !important;
}

.modal-layout {
    background: var(--mast-base-color) !important;
}

.modal-layout__mastodon > div {
    background: var(--mast-base-color) !important;
}

.rules-list li::before {
    background: var(--mast-highlight-text-color) !important;
    color: var(--mast-base-color) !important;
}

.table th,
.table td {
    background: var(--mast-base-color-d04) !important;
    border-top: 1px solid var(--mast-base-color) !important;
}

.table th.critical,
.table td.critical {
    color: #ca8f04;
}

.table > thead > tr > th {
    border-bottom: 2px solid var(--mast-base-color) !important;
}

.table > tbody > tr:nth-child(odd) > td,
.table > tbody > tr:nth-child(odd) > th {
    background: var(--mast-base-color) !important;
}

.table a {
    color: var(--mast-highlight-text-color) !important;
}

.table.batch-table > thead > tr > th {
    background: var(--mast-base-color) !important;
    border-top: 1px solid var(--mast-base-color-d08) !important;
    border-bottom: 1px solid var(--mast-base-color-d08) !important;
}

.batch-table__toolbar {
    background: var(--mast-base-color) !important;
    border: 1px solid var(--mast-base-color-d08) !important;
}

.batch-table__select-all button {
    color: var(--mast-highlight-text-color) !important;
}

.batch-table__select-all button:hover,
.batch-table__select-all button:focus,
.batch-table__select-all button:active {
    background: var(--mast-base-color-l08) !important;
}

.batch-table__form {
    background: var(--mast-base-color) !important;
    border: 1px solid var(--mast-base-color-d08) !important;
}

.batch-table__row {
    background: var(--mast-base-color-d04) !important;
    border: 1px solid var(--mast-base-color-d08) !important;
}

.batch-table__row:hover {
    background: #242731;
}

.batch-table__row:nth-child(even) {
    background: var(--mast-base-color) !important;
}

.batch-table__row:nth-child(even):hover {
    background: var(--mast-base-color-l02) !important;
}

.admin-wrapper .sidebar-wrapper__inner {
    background: var(--mast-base-color) !important;
}

.admin-wrapper .sidebar__toggle {
    background: var(--mast-base-color-d04) !important;
    border-bottom: 1px solid var(--mast-base-color-l04) !important;
}

.admin-wrapper .sidebar__toggle__icon {
    color: var(--mast-primary-color) !important;
}

.admin-wrapper .sidebar__toggle__icon:focus {
    background: var(--mast-base-color) !important;
}

.admin-wrapper .sidebar ul a {
    color: var(--mast-primary-color) !important;
}

.admin-wrapper .sidebar ul a:hover {
    color: var(--mast-primary-text-color) !important;
    background-color: #1d2028;
}

.admin-wrapper .sidebar ul ul {
    background: var(--mast-base-color-d04) !important;
}

.admin-wrapper .sidebar ul ul a {
    color: var(--mast-primary-color) !important;
}

.admin-wrapper .sidebar ul .warning a {
    color: #ca8f04;
}

.admin-wrapper .sidebar ul .simple-navigation-active-leaf a {
    color: var(--mast-primary-text-color) !important;
    background-color: var(--mast-highlight-color) !important;
}

.admin-wrapper .content-wrapper {
    background: var(--mast-base-color-l08) !important;
}

.admin-wrapper .content__heading__tabs a {
    color: var(--mast-primary-color) !important;
}

.admin-wrapper .content__heading__tabs a:hover,
.admin-wrapper .content__heading__tabs a:focus,
.admin-wrapper .content__heading__tabs a:active {
    background: var(--mast-base-color-l04) !important;
}

.admin-wrapper .content__heading__tabs a.selected {
    color: var(--mast-primary-text-color) !important;
    background: var(--mast-highlight-color) !important;
}

.admin-wrapper .content__heading h2 small {
    color: var(--mast-primary-color) !important;
}

.admin-wrapper .content h2 {
    color: var(--mast-secondary-color) !important;
}

.admin-wrapper .content h3 {
    color: var(--mast-secondary-color) !important;
}

.admin-wrapper .content h4 {
    color: var(--mast-primary-color) !important;
    border-bottom: 1px solid var(--mast-base-color-l08) !important;
}

.admin-wrapper .content h6 {
    color: var(--mast-secondary-color) !important;
}

.admin-wrapper .content .fields-group h6 {
    color: var(--mast-primary-text-color) !important;
}

.admin-wrapper .content .directory__tag h4 {
    color: var(--mast-primary-text-color) !important;
}

.admin-wrapper .content > p {
    color: var(--mast-secondary-color) !important;
}

.admin-wrapper .content > p strong {
    color: var(--mast-primary-text-color) !important;
}

.admin-wrapper .content hr {
    border-bottom: 1px solid var(--mast-base-color-l08) !important;
}

.admin-wrapper .sidebar ul a,
.admin-wrapper .sidebar ul ul a {
    border-bottom: 1px solid var(--mast-base-color-l04) !important;
}

.admin-wrapper .sidebar > ul.visible {
    background: var(--mast-base-color-d08) !important;
}

.admin-wrapper .sidebar ul a:hover {
    background: var(--mast-base-color-l08) !important;
}

.admin-wrapper .sidebar ul .simple-navigation-active-leaf a {
    color: var(--mast-base-color-d08) !important;
}

.admin-wrapper .sidebar ul .simple-navigation-active-leaf a:hover {
    color: var(--mast-primary-color) !important;
}

.admin-wrapper .content__heading__tabs a.selected {
    color: var(--mast-base-color-d08) !important;
}

.admin-wrapper .content__heading__tabs a:hover {
    color: var(--mast-primary-color) !important;
}

body .muted-hint,
.admin-wrapper .content .muted-hint {
    color: var(--mast-primary-color) !important;
}

body .muted-hint a,
.admin-wrapper .content .muted-hint a {
    color: var(--mast-highlight-text-color) !important;
}

body .positive-hint,
.admin-wrapper .content .positive-hint {
    color: #79bd9a;
}

body .negative-hint,
.admin-wrapper .content .negative-hint {
    color: #df405a;
}

body .neutral-hint,
.admin-wrapper .content .neutral-hint {
    color: var(--mast-base-color-l26) !important;
}

body .warning-hint,
.admin-wrapper .content .warning-hint {
    color: #ca8f04;
}

.filters .filter-subset strong {
    color: var(--mast-primary-color) !important;
}

.filters .filter-subset a {
    color: var(--mast-primary-color) !important;
}

.filters .filter-subset a:hover {
    color: var(--mast-primary-text-color) !important;
    border-bottom: 2px solid #333846;
}

.filters .filter-subset a.selected {
    color: var(--mast-highlight-text-color) !important;
    border-bottom: 2px solid var(--mast-highlight-color) !important;
}

.report-card {
    background: var(--mast-base-color) !important;
}

.report-card__summary__item__reported-by,
.report-card__summary__item__assigned {
    color: var(--mast-primary-color) !important;
}

.report-card__summary__item:hover {
    background: var(--mast-base-color-l02) !important;
}

.report-card__profile__stats {
    color: var(--mast-primary-color) !important;
}

.report-card__profile__stats a:hover,
.report-card__profile__stats a:focus,
.report-card__profile__stats a:active {
    color: #b5c3d6;
}

.report-card__profile__stats .red {
    color: #df405a;
}

.speech-bubble {
    border-inline-start: 4px solid var(--mast-highlight-color) !important;
}

.speech-bubble.positive {
    border-left-color: #79bd9a;
}

.speech-bubble.negative {
    border-left-color: #e87487;
}

.speech-bubble.warning {
    border-left-color: #ca8f04;
}

.speech-bubble__bubble {
    color: var(--mast-primary-color) !important;
}

.speech-bubble__owner {
    color: var(--mast-primary-color) !important;
}

.speech-bubble time {
    color: var(--mast-base-color-l26) !important;
}

.report-card__profile__stats .red {
    color: #df405a;
}

.ellipsized-ip {
    color: var(--mast-secondary-color) !important;
}

.notification__filter-bar button.active::before,
.notification__filter-bar a.active::before,
.account__section-headline button.active::before,
.account__section-headline a.active::before {
    background: var(--mast-highlight-color) !important;
}

.account__header__bio .account__header__fields {
    background: var(--mast-base-color-l08) !important;
}

.admin-account-bio .account__header__fields,
.admin-account-bio .account__header__content {
    background: var(--mast-base-color-l08) !important;
}

.admin-account-bio .account__header__fields a {
    color: var(--mast-highlight-text-color) !important;
}

.admin-account-bio .account__header__fields .verified a {
    color: #79bd9a;
}

.admin-account-bio .account__header__content {
    color: var(--mast-primary-text-color) !important;
}

.applications-list__item,
.filters-list__item {
    background: var(--mast-base-color) !important;
    border: 1px solid var(--mast-base-color-l04) !important;
}

.user-role {
    color: var(--user-role-accent);
}

.announcements-list__item,
.filters-list__item {
    background: var(--mast-base-color) !important;
    border-bottom: 1px solid var(--mast-base-color-l04) !important;
}

.announcements-list__item__title,
.filters-list__item__title {
    color: var(--mast-secondary-color) !important;
}

.announcements-list__item__meta,
.filters-list__item__meta {
    color: var(--mast-base-color-l26) !important;
}

.announcements-list__item__action-bar,
.filters-list__item__action-bar {
    color: var(--mast-primary-text-color) !important;
}

.retention__table__number {
    color: var(--mast-secondary-color) !important;
}

.retention__table__label {
    color: var(--mast-primary-color) !important;
}

.retention__table__box,
.retention__table__box--0,
.retention__table__box--10,
.retention__table__box--20,
.retention__table__box--30,
.retention__table__box--40,
.retention__table__box--50,
.retention__table__box--60,
.retention__table__box--70,
.retention__table__box--80,
.retention__table__box--90,
.retention__table__box--100 {
    color: var(--mast-primary-text-color) !important;
}

.sparkline {
    background-color: var(--mast-base-color-l08) !important;
}

.sparkline__value__total,
.sparkline__value__change,
.sparkline__label {
    color: var(--mast-primary-color) !important;
}

.sparkline__value__change.positive {
    color: #79bd9a;
}

.sparkline__value__change.negative {
    color: #df405a;
}

.report-reason-selector,
.report-reason-selector__category {
    background: var(--mast-base-color) !important;
}

.report-reason-selector__category__label,
.report-reason-selector__rule {
    color: var(--mast-primary-text-color) !important;
}

.report-header__details__item,
.report-header__details__item__header {
    color: var(--mast-primary-color) !important;
}

.account-card {
    background: var(--mast-base-color) !important;
}

.account-card__title .display-name {
    color: var(--mast-primary-color) !important;
}

.account-card__title .display-name bdi {
    color: var(--mast-primary-text-color) !important;
}

.account-card__bio::after {
    background: linear-gradient(
        to left,
        var(--mast-base-color),
        transparent
    ) !important;
}

.account-card__bio a {
    color: var(--mast-secondary-color) !important;
}

.account-card__counters__item {
    color: var(--mast-primary-text-color) !important;
}

.account-card__counters__item small {
    color: var(--mast-primary-color) !important;
}

.report-notes__item {
    background: var(--mast-base-color) !important;
    border-bottom: 1px solid var(--mast-base-color-d08) !important;
}

.report-notes__item:hover {
    background-color: var(--mast-base-color-l04) !important;
}

.report-notes__item__header {
    color: var(--mast-primary-color) !important;
}

.report-notes__item__header .username {
    color: var(--mast-primary-text-color) !important;
}

.report-notes__item__header .username a {
    color: inherit;
}

.report-notes__item__content {
    color: var(--mast-primary-text-color) !important;
}

.report-notes__item__content a {
    color: var(--mast-highlight-text-color) !important;
}

.report-notes__item__actions {
    color: var(--mast-primary-color) !important;
}

.report-actions {
    border: 1px solid var(--mast-base-color-d08) !important;
}

.report-actions__item {
    border-bottom: 1px solid var(--mast-base-color-d08) !important;
}

.report-actions__item__description {
    color: var(--mast-base-color-l26) !important;
}

.section-skip-link a {
    color: var(--mast-highlight-color) !important;
}

.strike-card {
    background: var(--mast-base-color) !important;
    color: var(--mast-primary-text-color) !important;
}

.strike-card a {
    color: var(--mast-highlight-text-color) !important;
}

.strike-card__rules {
    color: var(--mast-primary-color) !important;
}

.strike-card__rules__text {
    color: var(--mast-primary-text-color) !important;
}

.strike-card__statuses-list {
    border: 1px solid var(--mast-base-color-d08) !important;
}

.strike-card__statuses-list__item {
    background: var(--mast-base-color-l02) !important;
    border-bottom: 1px solid var(--mast-base-color-d08) !important;
}

.strike-card__statuses-list__item__meta {
    color: var(--mast-primary-color) !important;
}

.strike-card__statuses-list__item a {
    color: inherit;
}

.availability-indicator {
    color: var(--mast-primary-text-color) !important;
}

.availability-indicator__graphic__item {
    background: var(--mast-base-color-l08) !important;
}

.availability-indicator__graphic__item.positive {
    background: #79bd9a;
}

.availability-indicator__graphic__item.negative {
    background: #df405a;
}

.history li::before {
    background: var(--mast-base-color) !important;
    border: 1px solid var(--mast-highlight-text-color) !important;
    color: var(--mast-highlight-text-color) !important;
}

.history li::after {
    background: var(--mast-highlight-text-color) !important;
}

.history__entry h5 {
    color: var(--mast-primary-text-color) !important;
}

.dashboard__counters > div > div,
.dashboard__counters > div > a {
    background: var(--mast-base-color-l04) !important;
}

.dashboard__counters > div > a:hover,
.dashboard__counters > div > a:focus,
.dashboard__counters > div > a:active {
    background: var(--mast-base-color-l08) !important;
}

.dashboard__counters__num,
.dashboard__counters__text {
    color: var(--mast-primary-text-color) !important;
}

.dashboard__counters__label {
    color: var(--mast-primary-color) !important;
}

.dashboard__quick-access {
    background: var(--mast-highlight-color) !important;
    color: var(--mast-base-color-l08) !important;
}

.dashboard__quick-access:active,
.dashboard__quick-access:focus,
.dashboard__quick-access:hover {
    background-color: var(--mast-shadow-color);
}

.dashboard__quick-access.positive {
    background: var(--mast-base-color-l04) !important;
    color: #79bd9a;
}

.dashboard__quick-access.negative {
    background: var(--mast-base-color-l04) !important;
    color: #df405a;
}

.history li::before {
    background: var(--mast-base-color) !important;
    border: 1px solid var(--mast-highlight-text-color) !important;
    color: var(--mast-highlight-text-color) !important;
}

.reply-indicator__content blockquote {
    border-left-color: var(--mast-base-color) !important;
    color: var(--mast-base-color) !important;
}