:root {
    --color-font: #57866a;
    --color-comment-back: #f6f6f6;
    --color-comment-border: #dfe4e4;
    --color-headline-back: #edebc5;

    --color-dark-back: var(--color-font);
    --color-dark-font: white;
    --color-dark-comment-back: #202020;
    --color-dark-comment-border: #404040;
    --color-dark-headline-back: #454439;
}

html, body .spirit .layout {
    font-family: 'Roboto', sans-serif!important;
}

.button {
    background-color: var(--color-font)!important;
    color: white!important;
}

div.layout__admin div.messages_info {
    background-color: #edebc5!important;
}

a.button i {
    color: white!important;
}

i {
    color: var(--color-font)!important;
}

div.header__logo_wrapper {
    flex: initial!important;
}

div.header__logo_wrapper a h1 {
    display: inline-flex!important;
    color: var(--color-font);
    font-size: 3rem;
}

div.no-pic {
    background-color: var(--color-font)!important;
}

::selection { background: var(--color-font)!important; color:#000000; }
::-moz-selection { background: var(--color-font)!important; color:#000000; }

:focus {
    border: 1px solid var(--color-font)!important;
}

:focus-visible {
    border: 1px solid var(--color-font)!important;
}

input[type="search"]:focus {
    border: 2px solid var(--color-font)!important;
}

input[type="search"]:focus-visible {
    border: 2px solid var(--color-font)!important;
}


input:focus {
    outline: none !important;
    border: 2px solid var(--color-font);
}

div.js-search-content {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

div.comments_list__comment {
    background-color: var(--color-comment-back);
    margin-bottom: 1rem;
    border: 2px solid var(--color-comment-border);
}

a.comment__info__username__link {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    background-color: white;
    color: var(--color-font);
    font-weight: bold;
}

ul.comment__actions li a {
    background-color: white;

    color: var(--color-font);
}

ul.comment__actions li {
    background-color: white;
    padding-left: 0.5rem;
    padding-right: 0.5rem;

    color: var(--color-font);
}

ul.breadcrumb_nav {
    background-color: #dfe4e4;
    padding-bottom: 0.2rem;
    padding-top: 0.2rem;
    margin-bottom: 0!important;
}

ul.breadcrumb_nav li a {
    color: var(--color-font);
}

ul.breadcrumb_nav:first-child {
    padding-left: 0.75rem;
}

ul.breadcrumb_nav li a:hover {
    color: black!important;
}

ul.comment__reply__actions__list li {
    margin-right: 1rem!important;
    margin-left: 0!important;
}

ul.comment__reply__actions__list span {
    color: var(--color-font);
    font-size: 120%;
    position: relative;
    bottom: -1px;
}

h1.headline {
    padding-top: 1rem;
    padding-bottom: 1rem;
    background-color: var(--color-headline-back);
    margin-bottom: 1rem!important;
    padding-left: 0.75rem;
}

div.header__tabs_wrapper {
    display: contents;
}

div.header__tabs_content {
    width: fit-content;
}

.spirit ul.menu_list {
    width: fit-content!important;
    float: right!important;
}

div.menu_list_wrapper {
    width: fit-content;
}

div.menu__dropdown_button {
    margin-left: 0.75rem!important;
}

a.header__tabs__item {
    color: var(--color-font);
}

ul.paginator {
    margin-left: 0.75rem
}

.comment__info__date li {
    color: var(--color-font);
}

ul.comment__actions li a.comment-send-all {
    background-color: var(--color-font);
    color: white;
    padding: .5rem;
}
ul.comment__actions li.comment-send-all {
    padding: 0;
}

div.layout__menu {
    margin-bottom: 1rem!important;
}

.tbg-top-button {
    font-size: 120%;
}

@media (prefers-color-scheme: dark) {
    .button:hover {
        color: #e0e0e0!important;
    }
    .spirit .layout__list__item__link.is-visited, .spirit .layout__list__item__link:visited, .spirit .topic__link.is-visited, .spirit .topic__link:visited {
        color: #dbdbdb;
    }
    .js-clickable-area:hover .js-clickable-area-target {
        color: white;
    }
    ul.breadcrumb_nav {
        background-color: #7c7c7c;
    }
    ul.breadcrumb_nav li a {
        color: var(--color-dark-font);
    }
    div.comments_list__comment {
        background-color: var(--color-dark-comment-back);
        border: 2px solid var(--color-dark-comment-border);
    }
    a.comment__info__username__link {
        color: var(--color-dark-font);
        background: var(--color-dark-back);
    }
    ul.comment__actions li {
        color: var(--color-dark-font);
        background-color: var(--color-dark-back);
    }
    ul.comment__actions li a {
        background-color: var(--color-dark-back);
        color: var(--color-dark-font);
    }
    i {
        color: var(--color-dark-font)!important;
    }
    ul.comment__actions li a.comment-send-all {
        background-color: var(--color-dark-back);
        color: var(--color-dark-font);
    }
    ul.comment__reply__actions__list span {
        color: var(--color-dark-font);
    }
    h1.headline {
        background-color: var(--color-dark-headline-back);
    }
}