body.dark-mode, html.dark-mode {
  transition: all 0.3s ease-in;
  background-color: #222 !important;
}
body.dark-mode section .page-content .text p, html.dark-mode section .page-content .text p {
  color: #fff !important;
}
body.dark-mode section .page-content form label span, html.dark-mode section .page-content form label span {
  color: #fff !important;
}
body.dark-mode section .page-content form label input, body.dark-mode section .page-content form label textarea, html.dark-mode section .page-content form label input, html.dark-mode section .page-content form label textarea {
  border: 1px #3e3e3e solid !important;
  background-color: #161616;
}
body.dark-mode section.story-page, html.dark-mode section.story-page {
  background-color: #222 !important;
}
body.dark-mode section.story-page .container .top .right h2, html.dark-mode section.story-page .container .top .right h2 {
  color: #fff !important;
}
body.dark-mode section.story-page .container .top .right .interaction ul li div span, html.dark-mode section.story-page .container .top .right .interaction ul li div span {
  color: #fff !important;
}
body.dark-mode section.story-page .container .top .right .interaction ul li div.text, html.dark-mode section.story-page .container .top .right .interaction ul li div.text {
  color: #fff !important;
}
body.dark-mode section.story-page .container .top .right .interaction ul li div img, html.dark-mode section.story-page .container .top .right .interaction ul li div img {
  filter: brightness(0) invert(1);
}
body.dark-mode section.story-page .container .bottom .intro p, html.dark-mode section.story-page .container .bottom .intro p {
  color: #fff !important;
}
body.dark-mode section.story-page .container .bottom .intro .avatar h3, html.dark-mode section.story-page .container .bottom .intro .avatar h3 {
  color: #fff !important;
}
body.dark-mode section.story-page .container .bottom .intro .contents h2, html.dark-mode section.story-page .container .bottom .intro .contents h2 {
  color: #fff !important;
}
body.dark-mode section.story-page .container .bottom .intro .contents ul li a, html.dark-mode section.story-page .container .bottom .intro .contents ul li a {
  color: #fff !important;
}
body.dark-mode section.story-page .container .bottom .intro .contents ul li a:hover, html.dark-mode section.story-page .container .bottom .intro .contents ul li a:hover {
  background-color: #1a1a1a !important;
}
body.dark-mode section .item, html.dark-mode section .item {
  background-color: #111111 !important;
}
body.dark-mode section .item .left .label, html.dark-mode section .item .left .label {
  background-color: #000 !important;
  color: #fff !important;
}
body.dark-mode section .item .right, html.dark-mode section .item .right {
  color: #fff;
}
body.dark-mode section .item .right img, html.dark-mode section .item .right img {
  filter: brightness(0) invert(1);
}
body.dark-mode section .item .right a, html.dark-mode section .item .right a {
  color: #fff !important;
}
body.dark-mode header .right, html.dark-mode header .right {
  background-color: #222 !important;
}
body.dark-mode header .right > ul li a, html.dark-mode header .right > ul li a {
  color: #fff !important;
}
body.dark-mode header .right > ul li a img, html.dark-mode header .right > ul li a img {
  filter: brightness(0) invert(1);
}
body.dark-mode header .right > ul li a:hover, html.dark-mode header .right > ul li a:hover {
  background-color: #000 !important;
}
body.dark-mode header .right .mobil-button img, html.dark-mode header .right .mobil-button img {
  filter: brightness(0) invert(1);
}
body.dark-mode .gallery-page, html.dark-mode .gallery-page {
  background: linear-gradient(135deg, #000 0%, #222 100%) !important;
}
body.dark-mode .gallery-header h1, html.dark-mode .gallery-header h1 {
  color: #fff !important;
}
body.dark-mode .chapter-selector-container .selector-header, html.dark-mode .chapter-selector-container .selector-header {
  background-color: #0e0e0e !important;
}
body.dark-mode .chapter-selector-container .selector-header:hover, html.dark-mode .chapter-selector-container .selector-header:hover {
  background-color: #000 !important;
}
body.dark-mode .chapter-selector-container .story-info .story-details h2, html.dark-mode .chapter-selector-container .story-info .story-details h2 {
  color: #fff !important;
}
body.dark-mode .chapter-selector-container .story-info .story-details .author, html.dark-mode .chapter-selector-container .story-info .story-details .author {
  color: #ccc !important;
}
body.dark-mode .chapter-selector-container .progress-container, html.dark-mode .chapter-selector-container .progress-container {
  background-color: #5a5a5a !important;
}
body.dark-mode .chapter-selector-container .chapter-dropdown, html.dark-mode .chapter-selector-container .chapter-dropdown {
  background-color: #0e0e0e !important;
}
body.dark-mode .chapter-selector-container .chapter-dropdown .chapter-list .chapter-item, html.dark-mode .chapter-selector-container .chapter-dropdown .chapter-list .chapter-item {
  color: #fff !important;
}
body.dark-mode .chapter-selector-container .chapter-dropdown .chapter-list .chapter-item:hover, html.dark-mode .chapter-selector-container .chapter-dropdown .chapter-list .chapter-item:hover {
  background-color: #2f2f2f !important;
  color: #fff !important;
}
body.dark-mode .chapter-header h1, html.dark-mode .chapter-header h1 {
  color: #fff !important;
}
body.dark-mode .chapter-header .chapter-stats span, html.dark-mode .chapter-header .chapter-stats span {
  color: #fff !important;
}
body.dark-mode .chapter-header .chapter-stats img, html.dark-mode .chapter-header .chapter-stats img {
  filter: brightness(0) invert(1);
}
body.dark-mode .right-column .chapter-content, html.dark-mode .right-column .chapter-content {
  color: #fff !important;
}
body.dark-mode .right-column .chapter-content .paragraph-container:hover, html.dark-mode .right-column .chapter-content .paragraph-container:hover {
  background-color: #2f2f2f !important;
}
body.dark-mode .right-column .chapter-content .paragraph-container .paragraph-comments .paragraph-comment-toggle, html.dark-mode .right-column .chapter-content .paragraph-container .paragraph-comments .paragraph-comment-toggle {
  background-color: #2f2f2f !important;
  color: #fff !important;
  border: 1px solid #444444 !important;
}
body.dark-mode .right-column .chapter-content .paragraph-container .paragraph-comments .paragraph-comment-toggle img, html.dark-mode .right-column .chapter-content .paragraph-container .paragraph-comments .paragraph-comment-toggle img {
  filter: brightness(0) invert(1);
}
body.dark-mode .right-column .chapter-content .paragraph-container .paragraph-comments .paragraph-comment-toggle:hover img, html.dark-mode .right-column .chapter-content .paragraph-container .paragraph-comments .paragraph-comment-toggle:hover img {
  filter: brightness(1) invert(0);
}
body.dark-mode .sidebar-right, html.dark-mode .sidebar-right {
  background-color: #222 !important;
}
body.dark-mode .sidebar-right .comments-header, html.dark-mode .sidebar-right .comments-header {
  background-color: #0e0e0e !important;
  border-bottom: 1px solid #4b4b4b !important;
}
body.dark-mode .sidebar-right .comments-header h3, html.dark-mode .sidebar-right .comments-header h3 {
  color: #fff !important;
}
body.dark-mode .sidebar-right .paragraph-text, html.dark-mode .sidebar-right .paragraph-text {
  background: #060606 !important;
  border-bottom: 1px solid #4b4b4b !important;
}
body.dark-mode .sidebar-right .paragraph-text p, html.dark-mode .sidebar-right .paragraph-text p {
  color: #fff !important;
}
body.dark-mode .sidebar-right .comment-form, html.dark-mode .sidebar-right .comment-form {
  background-color: #222 !important;
  border-bottom: 1px solid #4b4b4b !important;
  color: #fff !important;
}
body.dark-mode .sidebar-right .comment-form a, html.dark-mode .sidebar-right .comment-form a {
  color: #fff !important;
  font-weight: 700;
  text-decoration: underline;
}
body.dark-mode .search-popup, html.dark-mode .search-popup {
  background: #222 !important;
}
body.dark-mode .search-popup .search-header, html.dark-mode .search-popup .search-header {
  border-bottom: 1px solid #4b4b4b !important;
  background: #161616 !important;
}
body.dark-mode .search-popup .search-header h3, html.dark-mode .search-popup .search-header h3 {
  color: #fff;
}
body.dark-mode .search-popup .search-input-container, html.dark-mode .search-popup .search-input-container {
  border-bottom: 1px solid #222;
}
body.dark-mode .search-popup .search-input-container input[type=text], body.dark-mode .search-popup .search-input-container input[type=password], html.dark-mode .search-popup .search-input-container input[type=text], html.dark-mode .search-popup .search-input-container input[type=password] {
  border: 1px solid #4e4e4e;
  background: #171717;
  color: #fff;
}
body.dark-mode .search-popup .search-input-container input[type=text]:focus, body.dark-mode .search-popup .search-input-container input[type=password]:focus, html.dark-mode .search-popup .search-input-container input[type=text]:focus, html.dark-mode .search-popup .search-input-container input[type=password]:focus {
  border-color: #0093ff;
  background: #171717;
  box-shadow: 0 0 0 3px rgba(253, 191, 0, 0.1);
}
body.dark-mode .search-popup .user-result, html.dark-mode .search-popup .user-result {
  color: #fff;
}
body.dark-mode .search-popup .button-login, body.dark-mode .search-popup .button-sign-up, html.dark-mode .search-popup .button-login, html.dark-mode .search-popup .button-sign-up {
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
}