/*------------------------------------------------------------------------------
* BACKGROUND COLOR PALETTE =====================================================
------------------------------------------------------------------------------*/

/*----------------------
base background and text
----------------------*/

/* background and drawer */
body.app-body,
.ui,
.drawer__tab,
.drawer__inner,
.drawer__inner.darker,
.drawer__inner__mastodon,
.tabs-bar,
.tabs-bar__wrapper,
.getting-started,
.search-results__section h5,
.account__section-headline,
    .account__section-headline button,
.notification__filter-bar,
    .notification__filter-bar button,
.timeline-hint,
.introduction,
.account__header__account-note textarea:focus,
.flex-spacer, .getting-started, .getting-started__wrapper,
/* DMs */
.status.status-direct,
    .status.status-direct:not(.read),
    .focusable:focus .status.status-direct,
    .status-direct .status__content,
    .notification-favourite .status.status-direct,
/* column preferences */
.column-settings__section,
    .column-header__collapsible,
    .column-header__collapsible-inner,
    .column-header__button.active,
    .setting-meta__label,
    .setting-toggle__label,
.column-subheading,
.content-wrapper,
.media-spoiler,
    .video-player__spoiler,
    .video-player__spoiler.active:active,
    .video-player__spoiler.active:focus,
.react-toggle-track,
.filter-form,
/* in reply to */
.reply-indicator,
.reply-indicator__display-name,
.reply-indicator__content,
.reply-indicator__cancel .icon-button.inverted,
.reply-indicator__content .status__content__spoiler-link,
/* cw show more */
.status__content .status__content__spoiler-link,
.compose__action-bar .icon-button,
/* settings page */
.admin-wrapper .sidebar-wrapper,
    .admin-wrapper .sidebar-wrapper__inner,
    .admin-wrapper .sidebar ul a,
    .admin-wrapper .sidebar ul a.selected,
    .admin-wrapper .sidebar ul ul a,
    .admin-wrapper .content h2,
    .admin-wrapper .content h6,
/* modals */
.boost-modal__action-bar,
    .confirmation-modal__action-bar,
    .mute-modal__action-bar,
.confirmation-modal__action-bar .confirmation-modal__cancel-button,
    .confirmation-modal__action-bar .mute-modal__cancel-button,
    .mute-modal__action-bar .confirmation-modal__cancel-button,
    .mute-modal__action-bar .mute-modal__cancel-button,
.error-column,
    .regeneration-indicator,
    .empty-column-indicator,
.report-modal__comment .setting-text,
.introduction__text p code,
.list-editor .search__input,
.announcements__item,
/* opengraph previews */
.status-card__image,
.status-card__content,
.status-card__description,
.button:disabled,
/* public pages */
body.theme-default,
.button.button-alternative,
    .button.button-alternative-2,
.landing-page__call-to-action,
.public-layout .header,
.public-layout .header .nav-link,
.public-layout .header .nav-button,
.nothing-here,
.brand__tagline,
.table-of-contents
{
background: var(--bgPage);
color: var(--textPage)
}


/*--------------------
override for bold text
--------------------*/

/* strong elements */
.navigation-bar strong,
.status-card__title,
.status-direct .display-name strong,
.reply-indicator__display-name strong,
.admin-wrapper .content>p strong,
.simple_form strong,
.regeneration-indicator__label strong,
.account__section-headline a.active,
    .account__section-headline button.active,
    .notification__filter-bar a.active,
    .notification__filter-bar button.active,
/* public pages */
.information-board__section,
    .information-board__section span:last-child,
.endorsements-widget .display-name__html,
    .endorsements-widget h4,
.pagination .page,
    .pagination .gap,
    .pagination .newer,
    .pagination .older,
    .pagination a
{
color: var(--textPageBold)
}

/*---------------------
override for muted text
---------------------*/

/* de-emphasized elements */
.navigation-bar,
.navigation-panel hr,
.getting-started,
    .getting-started p,
    .getting-started__footer p,
.column-subheading,
.account__section-headline a,
.status-direct .icon-button,
    .status-direct .display-name,
    .status-direct .status__relative-time,
    .status-direct .status__action-bar__counter__label,
.status-direct.muted .status__content p,
    .status-direct.muted .status__content a,
    .status-direct.muted .display-name strong,
.notification-favourite .status.status-direct .icon-button.disabled,
.simple_form p.hint,
    .simple_form span.hint,
    .admin-wrapper .content .muted-hint,
    .admin-wrapper .content>p,
.status-card__host,
.button:disabled,
.loading-indicator,
.list-editor .search__input::placeholder,
    .list-editor .search__icon .fa,
    .list-editor .search__icon .fa-times-circle,
/* settings page */
body .neutral-hint, .admin-wrapper .content .neutral-hint,
/* public pages */
.endorsements-widget .display-name__account,
.public-layout .footer h4,
    .public-layout .footer ul a,
    .public-layout .footer ul li,
    .public-layout .footer .grid .column-2 h4 a,
    .public-layout .header .nav-button,
/* log in, sign up, forgot passwd */
.form-footer a,
.lighter .simple_form p.hint.subtle-hint
{
color: var(--textPageMuted)
}

/* border color fix */
.status.status-direct:not(.read),
.table-of-contents li a
{border-color: var(--textPageMuted)}

/* Tuan's fix*/
body {
background: var(--bgPage);
}
code {
background: var(--bg);
}
.page-header {
background: var(--bgPage);
}
.tabs-bar__link {   
border-bottom: 2px solid var(--bg);
}
.tabs-bar__link.active {
border-bottom: 2px solid var(--bgHead);
}
@media screen and (min-width: 631px) {
.auto-columns .tabs-bar__link:active, .auto-columns .tabs-bar__link:focus, .auto-columns .tabs-bar__link:hover {
	background: var(--bg);
	border-bottom-color: var(--accent);
	}
}
.drawer--results {
background: var(--bgPage);
}
.trends__item {
box-shadow: 0 0 2px #000;
border-radius: 2px;
margin: 8px;
padding: 15px;
border-bottom: 1px solid #393f4f;
}
.drawer--results>.search-results__contents>section h5 {
box-shadow: 0 0 2px #000;
border-radius: 2px;
margin: 8px;
background: var(--bg);
border-bottom: 1px solid var(--bgPage);
padding: 15px;
color: var(--textBold);
}
.drawer--results>.search-results__contents {
background: var(--bgPage);
}
.drawer--results>header {
color: var(--textHead);
background: var(--bgHead);
border-radius: 2px;
box-shadow: 0 0 2px #000;
margin-bottom: 8px;
}
.status__content {
line-height: 20px;
}
.status__content .emojione {
width: 30px;
height: 30px;
margin: 0px 0 0;
}