/* Harankhui gorim. html elemented is-dark class nemegdehed idevhjine. */

html.is-dark {
    --dark-background: #1c1f24;
    --dark-surface: #262a31;
    --dark-surface-light: #30353d;
    --dark-border: #3d434e;
    --dark-text: #dbdee3;
    --dark-text-strong: #f2f4f7;
    --dark-text-light: #98a0ad;
    --dark-link: #8296ee;
    color-scheme: dark;
}

html.is-dark {
    background-color: var(--dark-background);
}

html.is-dark body {
    color: var(--dark-text);
}

html.is-dark a:not(.button):not(.navbar-item):not(.navbar-link):not(.pagination-link) {
    color: var(--dark-link);
}

html.is-dark strong,
html.is-dark .title,
html.is-dark .subtitle strong,
html.is-dark .label,
html.is-dark .content h1,
html.is-dark .content h2,
html.is-dark .content h3,
html.is-dark .content h4,
html.is-dark .content h5,
html.is-dark .content h6 {
    color: var(--dark-text-strong);
}

html.is-dark .subtitle,
html.is-dark .content,
html.is-dark .help:not(.is-danger):not(.is-success):not(.is-warning):not(.is-info) {
    color: var(--dark-text);
}

html.is-dark hr,
html.is-dark .navbar-divider {
    background-color: var(--dark-border);
}

/* navbar */
html.is-dark .navbar,
html.is-dark .navbar-dropdown {
    background-color: var(--dark-surface);
}

html.is-dark .navbar-dropdown {
    border-top-color: var(--dark-border);
}

html.is-dark .navbar-item,
html.is-dark .navbar-link {
    color: var(--dark-text);
}

html.is-dark a.navbar-item:hover,
html.is-dark a.navbar-item:focus,
html.is-dark a.navbar-item.is-active,
html.is-dark .navbar-link:hover,
html.is-dark .navbar-link:focus,
html.is-dark .navbar-link.is-active {
    background-color: var(--dark-surface-light);
    color: var(--dark-text-strong);
}

html.is-dark .navbar-item.has-dropdown:hover .navbar-link,
html.is-dark .navbar-item.has-dropdown.is-active .navbar-link {
    background-color: var(--dark-surface-light);
}

html.is-dark .navbar-link:not(.is-arrowless)::after,
html.is-dark .select:not(.is-multiple):not(.is-loading)::after {
    border-color: var(--dark-link);
}

/* card, box, panel, dropdown */
html.is-dark .card,
html.is-dark .box,
html.is-dark .panel,
html.is-dark .dropdown-content {
    background-color: var(--dark-surface);
    color: var(--dark-text);
}

html.is-dark .card-header {
    box-shadow: 0 1px 2px rgba(10, 10, 10, 0.4);
}

html.is-dark .card-header-title,
html.is-dark .panel-heading {
    color: var(--dark-text-strong);
}

html.is-dark .card-footer,
html.is-dark .card-footer-item:not(:last-child),
html.is-dark .panel-block,
html.is-dark .panel-tabs {
    border-color: var(--dark-border);
}

/* Bulma ni hover deer whitesmoke tavidag - harankhui gorimd tekst ni tsaisaad aldagdana. */
html.is-dark a.panel-block:hover,
html.is-dark label.panel-block:hover {
    background-color: var(--dark-surface-light);
}

html.is-dark .dropdown-item {
    color: var(--dark-text);
}

html.is-dark a.dropdown-item:hover {
    background-color: var(--dark-surface-light);
    color: var(--dark-text-strong);
}

/* table */
html.is-dark .table {
    background-color: var(--dark-surface);
    color: var(--dark-text);
}

html.is-dark .table td,
html.is-dark .table th {
    border-color: var(--dark-border);
    color: var(--dark-text);
}

html.is-dark .table thead td,
html.is-dark .table thead th {
    background-color: var(--dark-surface-light);
    color: var(--dark-text-strong);
}

html.is-dark .table tfoot td,
html.is-dark .table tfoot th {
    background-color: var(--dark-surface-light);
    color: var(--dark-text-strong);
}

html.is-dark .table.is-striped tbody tr:not(.is-selected):nth-child(even) {
    background-color: #2b2f37;
}

html.is-dark .table.is-hoverable tbody tr:not(.is-selected):hover,
html.is-dark .table.is-hoverable.is-striped tbody tr:not(.is-selected):hover,
html.is-dark .table.is-hoverable.is-striped tbody tr:not(.is-selected):hover:nth-child(even) {
    background-color: var(--dark-surface-light);
}

/* form */
html.is-dark .input,
html.is-dark .textarea,
html.is-dark .select select {
    background-color: #1f2329;
    border-color: var(--dark-border);
    color: var(--dark-text-strong);
}

html.is-dark .input::placeholder,
html.is-dark .textarea::placeholder,
html.is-dark .select select::placeholder {
    color: var(--dark-text-light);
}

html.is-dark .input[disabled],
html.is-dark .textarea[disabled],
html.is-dark .select select[disabled] {
    background-color: var(--dark-surface-light);
    border-color: var(--dark-border);
    color: var(--dark-text-light);
}

html.is-dark .file-cta,
html.is-dark .file-name {
    background-color: var(--dark-surface-light);
    border-color: var(--dark-border);
    color: var(--dark-text);
}

html.is-dark .checkbox:hover,
html.is-dark .radio:hover {
    color: var(--dark-text-strong);
}

/* button */
html.is-dark .button:not([class*="is-"]),
html.is-dark .button.is-light:not(.is-primary):not(.is-link):not(.is-info):not(.is-success):not(.is-warning):not(.is-danger) {
    background-color: var(--dark-surface-light);
    border-color: var(--dark-border);
    color: var(--dark-text);
}

html.is-dark .button:not([class*="is-"]):hover,
html.is-dark .button:not([class*="is-"]):focus {
    background-color: #3a4049;
    border-color: #4a515d;
    color: var(--dark-text-strong);
}

html.is-dark .button[disabled] {
    background-color: var(--dark-surface-light);
    border-color: var(--dark-border);
    color: var(--dark-text-light);
}

/* modal */
html.is-dark .modal-background {
    background-color: rgba(10, 10, 10, 0.8);
}

html.is-dark .modal-card-head,
html.is-dark .modal-card-foot {
    background-color: var(--dark-surface-light);
    border-color: var(--dark-border);
}

html.is-dark .modal-card-body {
    background-color: var(--dark-surface);
    color: var(--dark-text);
}

html.is-dark .modal-card-title {
    color: var(--dark-text-strong);
}

/* tabs, breadcrumb, pagination */
html.is-dark .tabs a {
    border-bottom-color: var(--dark-border);
    color: var(--dark-text);
}

html.is-dark .tabs a:hover {
    border-bottom-color: var(--dark-text-strong);
    color: var(--dark-text-strong);
}

html.is-dark .tabs li.is-active a {
    border-bottom-color: var(--dark-link);
    color: var(--dark-link);
}

html.is-dark .breadcrumb a,
html.is-dark .breadcrumb li.is-active a {
    color: var(--dark-link);
}

html.is-dark .breadcrumb li + li::before {
    color: var(--dark-text-light);
}

html.is-dark .pagination-previous,
html.is-dark .pagination-next,
html.is-dark .pagination-link {
    background-color: var(--dark-surface);
    border-color: var(--dark-border);
    color: var(--dark-text);
}

/* notification, message, tag */
html.is-dark .notification:not([class*="is-"]) {
    background-color: var(--dark-surface-light);
    color: var(--dark-text);
}

html.is-dark .message-body {
    background-color: var(--dark-surface);
    border-color: var(--dark-border);
    color: var(--dark-text);
}

html.is-dark .tag:not(body):not([class*="is-"]) {
    background-color: var(--dark-surface-light);
    color: var(--dark-text);
}

/* footer */
html.is-dark .footer {
    background-color: var(--dark-surface);
    color: var(--dark-text);
}

/* helper class-uudiig darah */
html.is-dark .has-text-black,
html.is-dark .has-text-dark,
html.is-dark .has-text-grey-dark,
html.is-dark .has-text-grey-darker {
    color: var(--dark-text) !important;
}

html.is-dark .has-text-grey {
    color: var(--dark-text-light) !important;
}

html.is-dark .button.is-static {
    background-color: var(--dark-surface-light);
    border-color: var(--dark-border);
    color: var(--dark-text-light);
}

html.is-dark .has-background-white,
html.is-dark .has-background-white-ter,
html.is-dark .has-background-light {
    background-color: var(--dark-surface-light) !important;
}

/* site.css deer zassan hesguud */
html.is-dark .sort {
    border-color: var(--dark-text);
}

html.is-dark .vote-bar {
    background-color: var(--dark-border);
}

html.is-dark #blazor-error-ui {
    background: #4a4020;
    color: var(--dark-text-strong);
}

html.is-dark #blazor-error-ui a {
    color: var(--dark-link);
}