/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

/* ШАПКО-ССЫЛКИ: Меню хэдера: Библия, Цитаты, Поиск */

header nav {
  display: flex;
  padding: 10px 0 0 0;
}
header nav > a {
  padding-right: 10px;
}
header nav > #settings-btn {
  margin-left: auto;
  padding-right: 0;
}

.local {
  text-decoration: underline;
  text-decoration-style: dashed;
}

/* МЕНЮ НАСТРОЕК */

#settings-area {
  z-index: 1;
  position: absolute;
  top: 100%;
  right: 0;
  background-color: #f6f4e4;
  border-radius: 0 0 5px 5px;
  box-shadow: 0px 1px 1px #deddd1;
}
.night-mode #settings-area {
  background-color: #2f3541;
  box-shadow: none;
}

#settings-area > el {
  display: flex;
  align-items: center;
  white-space: nowrap;
  padding: 8px 12px;
}

#settings-area label {
  padding: 0 12px 0 0;
}

#settings-area .switcher {
  display: inline-block;
  margin-left: auto;
  padding: 0 0 0 12px;
}

/* КНИГИ: Меню книг: Бытие, Исход ... */

.menu-books {
  width: calc(100% - 20px);
  padding: 15px;
  margin: 0;
  background-color: #f6f4e4;
  border-radius: 0 0 5px 5px;
  position: absolute;
  z-index: 1;
  box-shadow: rgb(222, 221, 209) 0px 1px 1px;
}

.menu-books::after {
  content: '';
  position: absolute;
  left: 20px;
  top: -19px;
  border: 10px solid transparent;
  border-bottom: 10px solid #f6f4e4;
}

.menu-books.bible-clicked {
  width: calc(100% - -5px);
  padding: 10px 10px 15px 15px;
  margin: 0 -15px;
}

.night-mode .menu-books {
  background-color:#2f3541;
  box-shadow: none;
}

.night-mode .menu-books::after {
  border-bottom: 10px solid #2f3541;
}

.menu-books #filter-books,
.menu-books #filter-author-books {
  display: block;
  margin: 0 auto 10px auto;
  font-size: 1.2em;
  background-color: #ffffffb5;
  border: 1px solid #d8d1c0;
  color: #565656;
  border-radius: 4px;
  outline: none;
  padding: 5px 8px;
  width: 100%;
}

.menu-books #filter-books:focus,
.menu-books #filter-author-books:focus {
  border-color: #9c9073;
}
.night-mode .menu-books #filter-books,
.night-mode .menu-books #filter-author-books {
  border-color: #4d4c49;
  color: #898781;
  background-color: #363534b5;
}
.night-mode .menu-books #filter-books:focus,
.night-mode .menu-books #filter-author-books:focus {
  border-color: #666560;
}


.menu-books form {
  display: block;
  position: relative;
}

.menu-books form .search-icon {
  position: absolute;
  right: 3px;
  top: 3px;
  cursor: pointer;
  color: #565656;
}

.menu-books.dark a {
  opacity: 0.3;
}

.menu-books .h-light {
  opacity: 1 !important;
}

.menu-books.book-clicked {
  top: 98px;
  border-radius: 5px;
}

.menu-books.book-clicked::after {
  left: 50%;
  margin-left: -10px;
}

.menu-books .search-icon {
  display: inline-block;
  padding: 4px 5px 5px 0;
  background: none;
  border: none;
  cursor: pointer;
}

.menu-books .menu-tree {
  padding: 0 0 20px 0;
}


/* BOOK NAME */
.content .title {
  margin: 0;
  font-size: 32px;
  font-family: 'Linux Libertine','Georgia','Times','Source Serif Pro',serif;
}

.menu-wrap { flex: 0 1 auto !important; }
.breadcrumbs-wrap { background-color: #f6f4e4; flex: 0 1 auto !important; }
.night-mode .breadcrumbs-wrap { background-color: #2f3541; }

.breadcrumbs-wrap .content {
  padding: 0px 10px 13px 10px;
}
.breadcrumbs {
  font-size: 11px;
  position: relative;
  margin: 0;
}

.content .title a {
  text-decoration: none;
}

.content .error {
  text-align: center;
  margin: 20px 0;
  color: rgb(201, 41, 41);
}
/* CHAPTERS */

/* в блоке глав все надписи по центру  */
#chapter-content .hint, nav#menu-chapters {
  text-align: center;
}

nav#menu-chapters a {
  display: inline-block;
  min-width: 35px;
  padding: 2px 5px;
  font-size: 1.2em;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 4px;
  font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;
  /* font-weight: bold; */
}

/* Альтернативный вариант с рамочкой, тоже красиво, смложно остановиться на одном варианте */
/* nav#menu-chapters a.selected {
  border: 1px solid rgba(205,151,101, 1);
} */
nav#menu-chapters a.selected {
  border: 1px solid #8c6964;
  background-color: #8c6964;
  color: #fdfcf1;
}

.night-mode nav#menu-chapters a.selected {
  border: 1px solid rgba(205,151,101, 1);
  background-color: rgba(205,151,101, 1);
  /* border: 1px solid rgba(97,175,239, 1);
  background-color: rgba(97,175,239, 1); */
  color: #282c34;
}

/* СТИХИ */
table {
  border-spacing: 0;
  border-collapse: collapse;
  width: 100%;
}

td {
  line-height: 1.6em;
}
td.verse-line {
  min-width: 25px;
  cursor: pointer;

  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */

  vertical-align: top;
  text-align: right;
  color: #616562;
  font-size: 13px;
  font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;
}

.text-small td.verse-line { padding: 4px 8px 0 0; }
.text-medium td.verse-line { padding: 8px 8px 0 0; }
.text-large td.verse-line { padding: 11px 8px 0 0; }

td.zero-verse {
  text-align: center;
  color: #df4a4a;
  padding-bottom: 10px;
}

th.verse-title {
  display: table-cell;
  border-left: 2px solid transparent;
  padding: 0 7px 15px 7px;
  text-align: left;
}

td.verse-text {
  display: table-cell;
  border-left: 2px solid transparent;
  padding-left: 7px;
}

td.highlighted {
  background: #cd97652e;
  border-left: 2px solid #cd9765;
}

tr:hover td.verse-line {
  position: relative;
  color: transparent;

}

tr:hover td.verse-line:before {
    content: url('data:image/svg+xml;utf8,<svg fill="%23a0ae62" height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M6.354 5.5H4a3 3 0 0 0 0 6h3a3 3 0 0 0 2.83-4H9c-.086 0-.17.01-.25.031A2 2 0 0 1 7 10.5H4a2 2 0 1 1 0-4h1.535c.218-.376.495-.714.82-1z"/><path d="M9 5.5a3 3 0 0 0-2.83 4h1.098A2 2 0 0 1 9 6.5h3a2 2 0 1 1 0 4h-1.535a4.02 4.02 0 0 1-.82 1H12a3 3 0 1 0 0-6H9z"/></svg>');
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: right;
    top: 0;
    right: 0;
}
.text-small tr:hover td.verse-line:before { padding: 4px 8px 0 0; }
.text-medium tr:hover td.verse-line:before { padding: 8px 8px 0 0; }
.text-large tr:hover td.verse-line:before { padding: 11px 8px 0 0; }

.night-mode td.highlighted {
  color: #d4dded;
  background: #90b99025;
  border-left: 2px solid #90b990c9;
}

/* .night-mode tr:hover td.verse-line {
  color: #828e88;
} */

.img-header-wrap {
  position: relative;
  overflow: hidden;
}

.img-header-wrap .blured {
  position: absolute;
  width: 102%;
  background-color: #333;
}
.night-mode .img-header-wrap .blured { background-color: #222; }

.img-header-wrap .blured img {
  filter: blur(15px);
  width: 100%;
  height: 400px;
  object-fit: cover;
  object-position: center;
}

.img-header-wrap .content {
  padding: 0 10px;
  margin: 0;
}

.img-header-wrap .content {
  display: flex;
  justify-content: center;
  max-width: 100%;
  max-height: 400px;
}

.img-header img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  margin: 0 auto;
}

@media (max-width: 1180px) {
  .img-header {
    margin-left: -10px;
    margin-right: -10px;
  }
}

footer dd.tip {
  margin: 0 0 20px 0;
  font-size: 0.7em;
}

#change-locale-area {
  margin: 0 0 10px 0;
}

.key {
  background: linear-gradient(-26.5deg,#928b76,#cbc6b5);
  border-radius: 2px;
  box-shadow: inset 0 -2px 0 0 #696659, inset 0 0 1px 1px #ceccb5, 0 2px 2px 0 rgba(67, 65, 59, 0.3);
  display: inline-block;
  margin: 0 2px;
  padding: 0px 3px;
  color: #ffffff;
  border: 0;
  font-size: 0.8em;
}

.night-mode .key {
  background: linear-gradient(-26.5deg,#566072,#31435b);
  box-shadow: inset 0 -2px 0 0 #283c55, inset 0 0 1px 1px #51687d, 0 2px 2px 0 rgba(3, 6, 9, 0.3);
  color: #dae6ffaa;
}

#bottom-page-bar {
  margin: 30px 0;
  border-top: 1px solid rgb(172, 160, 143);
}

#visits {
  float: right;
  margin: 2px 0;
  font-size: 12px;
}
#visits svg {
  width: 10px;
  height: 10px;
}

.error-not-found {
  margin: 50px 10px;
  text-align: center;
  font-size: 22px;
}

.error-not-found .error-msg {
  font-weight: bold;
}
.error-not-found .propose {
  margin: 20px 0;
}

.tip-hkeys {
  margin: 30px 0 0 0;
  text-align: center;
  font-size: .7em;
}

.fixed-side-btn {
  z-index: 999;
  position: fixed;
  right: 40px;
  width: 50px;
  height: 50px;
  background-color: #d0d7be;
  color: #808667;
  font-weight: bold;
  text-align: center;
  line-height: 50px;
  border-radius: 5px;
  cursor: pointer;
}

#scroll-to-top-btn {
  bottom: 20px;
}

#call-minimap-btn {
  bottom: 80px;
  display: none;
}

/* Стрелка вверх (по умолчанию) */
.fixed-side-btn svg {
  transition: transform 0.3s;
}

/* Стрелка вниз (перевернутая) */
.fixed-side-btn.scroll-down svg {
  transform: rotate(180deg);
}

.night-mode .fixed-side-btn {
  color: #abb2bf;
  background-color: #333;
}

a.bib-comment {
  display: inline-block;
  margin: 0;
  padding: 0px 5px;
  position: relative;
  font-size: 0.6em;
  color: #7f5e32;
  background-color: #ffffff;
  border: 1px solid #f5ebd8;
  border-radius: 5px;
  text-decoration: none;
  line-height: 1.8em;
  bottom: 3px;
}

a.bib-comment:hover {
  background-color: #fbf2e0;
}
.night-mode a.bib-comment {
  background-color: transparent;
  border: 1px solid #454a53;
}
.night-mode a.bib-comment:hover {
  background-color: #d4e4ff11;
}


.share-btn {
  display: inline-block;
}
.dl-btn {
  text-decoration: none;
}


/* МЕТКА BIBLEOX с объяснениями */

.translation-notice {
  width: 27px;
  display: inline-block;
  margin: 0 0 0 5px;
  position: relative;
  cursor: help;
  opacity: 0.5;
  vertical-align: middle;
  top: -3px;
}

.translation-notice:hover {
  opacity: 1;
}

.translation-icon {
  opacity: 0.8;
  transition: all 0.3s ease;
}

.translation-tooltip {
  font-size: 12px; /* РАЗМЕР ТЕКСТА */
  font-family: Arial, sans-serif !important;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 300px;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  color: #333;
  visibility: hidden;
  opacity: 0;
  transition: all 0.3s ease;
  z-index: 100;
  margin-top: 0;
}

.translation-tooltip .title {
  display: block;
  font-size: 15px;
  text-align: center;
  margin-bottom: 10px;
}


/* Стрелочка с рамкой */
.translation-tooltip::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: transparent transparent #fff transparent;
}

/* Рамка для стрелки (повторяет цвет основной рамки) */
.translation-tooltip::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 7px;
  border-style: solid;
  border-color: transparent transparent #e0e0e0 transparent;
  z-index: -1;
}

.translation-notice:hover .translation-tooltip {
  visibility: visible;
  opacity: 1;
  margin-top: 5px;
}

.translation-tooltip p {
  margin: 0 0 10px 0;
}

.translation-tooltip p:last-child {
  margin-bottom: 0;
}

/* Тёмная тема */

.night-mode .translation-tooltip {
  background: #2d2d2d;
  border-color: #444;
  color: #f0f0f0;
}

.night-mode .translation-tooltip::before {
  border-color: transparent transparent #2d2d2d transparent;
}

.night-mode .translation-tooltip::after {
  border-color: transparent transparent #444 transparent;
}
/* ===============================
=            Choices            =
=============================== */
.choices {
  position: relative;
  overflow: hidden;
  /* margin-bottom: 24px; */
  font-size: 16px;
}
.choices:focus {
  outline: none;
}
.choices:last-child {
  margin-bottom: 0;
}
.choices.is-open {
  overflow: visible;
}
.choices.is-disabled .choices__inner,
.choices.is-disabled .choices__input {
  background-color: #eaeaea;
  cursor: not-allowed;
  -webkit-user-select: none;
          user-select: none;
}
.choices.is-disabled .choices__item {
  cursor: not-allowed;
}
.choices [hidden] {
  display: none !important;
}

.choices[data-type*=select-one] {
  cursor: pointer;
}
.choices[data-type*=select-one] .choices__inner {
  padding-bottom: 7.5px;
}
.choices[data-type*=select-one] .choices__input {
  display: block;
  width: 100%;
  padding: 10px;
  border-bottom: 1px solid #ddd;
  background-color: #fff;
  margin: 0;
}
.choices[data-type*=select-one] .choices__button {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==");
  padding: 0;
  background-size: 8px;
  position: absolute;
  top: 50%;
  right: 0;
  margin-top: -10px;
  margin-right: 25px;
  height: 20px;
  width: 20px;
  border-radius: 10em;
  opacity: 0.25;
}
.choices[data-type*=select-one] .choices__button:hover, .choices[data-type*=select-one] .choices__button:focus {
  opacity: 1;
}
.choices[data-type*=select-one] .choices__button:focus {
  /* box-shadow: 0 0 0 2px #00bcd4; */
}
.choices[data-type*=select-one] .choices__item[data-value=""] .choices__button {
  display: none;
}
.choices[data-type*=select-one]::after {
  content: "";
  height: 0;
  width: 0;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
  border-width: 5px;
  position: absolute;
  right: 11.5px;
  top: 50%;
  margin-top: -2.5px;
  pointer-events: none;
}
.choices[data-type*=select-one].is-open::after {
  border-color: transparent transparent #333 transparent;
  margin-top: -7.5px;
}
.choices[data-type*=select-one][dir=rtl]::after {
  left: 11.5px;
  right: auto;
}
.choices[data-type*=select-one][dir=rtl] .choices__button {
  right: auto;
  left: 0;
  margin-left: 25px;
  margin-right: 0;
}

.choices[data-type*=select-multiple] .choices__inner,
.choices[data-type*=text] .choices__inner {
  cursor: text;
}
.choices[data-type*=select-multiple] .choices__button,
.choices[data-type*=text] .choices__button {
  position: relative;
  display: inline-block;
  margin-top: 0;
  margin-right: -4px;
  margin-bottom: 0;
  margin-left: 8px;
  padding-left: 16px;
  border-left: 1px solid #008fa1;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==");
  background-size: 8px;
  width: 8px;
  line-height: 1;
  opacity: 0.75;
  border-radius: 0;
}
.choices[data-type*=select-multiple] .choices__button:hover, .choices[data-type*=select-multiple] .choices__button:focus,
.choices[data-type*=text] .choices__button:hover,
.choices[data-type*=text] .choices__button:focus {
  opacity: 1;
}

/* IMPORTANT PLACE -- always visible field  */
.choices__inner {
  display: inline-block;
  vertical-align: middle;
  width: 100%;
  height: 100%;
  background-color: #f6f4e4;
  padding: 7.5px 7.5px 3.75px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  min-height: 44px;
  overflow: hidden;
}

.is-focused .choices__inner, .is-open .choices__inner {
  border-color: #b7b7b7;
  border-radius: 0;
}
.is-open .choices__inner {
  border-radius: 2.5px 2.5px 0 0;
}
.is-flipped.is-open .choices__inner {
  border-radius: 0 0 2.5px 2.5px;
}

.choices__list {
  margin: 0;
  padding-left: 0;
  list-style: none;
}
.choices__list--single {
  display: inline-block;
  padding: 4px 16px 4px 4px;
  width: 100%;
}
[dir=rtl] .choices__list--single {
  padding-right: 4px;
  padding-left: 16px;
}
.choices__list--single .choices__item {
  width: 100%;
}

.choices__list--multiple {
  display: inline;
}
.choices__list--multiple .choices__item {
  display: inline-block;
  vertical-align: middle;
  border-radius: 20px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  margin-right: 3.75px;
  margin-bottom: 3.75px;
  background-color: #00bcd4;
  border: 1px solid #00a5bb;
  color: #fff;
  word-break: break-all;
  box-sizing: border-box;
}
.choices__list--multiple .choices__item[data-deletable] {
  padding-right: 5px;
}
[dir=rtl] .choices__list--multiple .choices__item {
  margin-right: 0;
  margin-left: 3.75px;
}
.choices__list--multiple .choices__item.is-highlighted {
  background-color: #00a5bb;
  border: 1px solid #008fa1;
}
.is-disabled .choices__list--multiple .choices__item {
  background-color: #aaaaaa;
  border: 1px solid #919191;
}

.choices__list--dropdown, .choices__list[aria-expanded] {
  visibility: hidden;
  z-index: 1;
  position: absolute;
  width: 100%;
  background-color: #fff;
  border: 1px solid #ddd;
  top: 100%;
  margin-top: -1px;
  border-bottom-left-radius: 2.5px;
  border-bottom-right-radius: 2.5px;
  overflow: hidden;
  word-break: break-all;
  will-change: visibility;
}
.is-active.choices__list--dropdown, .is-active.choices__list[aria-expanded] {
  visibility: visible;
}
.is-open .choices__list--dropdown, .is-open .choices__list[aria-expanded] {
  border-color: #b7b7b7;
}
.is-flipped .choices__list--dropdown, .is-flipped .choices__list[aria-expanded] {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: -1px;
  border-radius: 0.25rem 0.25rem 0 0;
}
.choices__list--dropdown .choices__list, .choices__list[aria-expanded] .choices__list {
  position: relative;
  max-height: 300px;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  will-change: scroll-position;

}
.choices__list--dropdown .choices__list::-webkit-scrollbar {
  width: 8px;               /* ширина scrollbar */
}
.choices__list--dropdown .choices__list::-webkit-scrollbar-track {
  background: transparent;        /* цвет дорожки */
}
.choices__list--dropdown .choices__list::-webkit-scrollbar-thumb {
  background-color: #333;    /* цвет плашки */
  border-radius: 10px;       /* закругления плашки */
  border: 1px solid transparent;  /* padding вокруг плашки */
}
.choices__list--dropdown .choices__list {
  scrollbar-width: thin;
  scrollbar-color: #333 transparent;
}

.choices__list--dropdown .choices__item, .choices__list[aria-expanded] .choices__item {
  position: relative;
  padding: 10px;
  font-size: 14px;
}
[dir=rtl] .choices__list--dropdown .choices__item, [dir=rtl] .choices__list[aria-expanded] .choices__item {
  text-align: right;
}
@media (min-width: 640px) {
  .choices__list--dropdown .choices__item--selectable, .choices__list[aria-expanded] .choices__item--selectable {
    /* padding-right: 100px; */
  }
  .choices__list--dropdown .choices__item--selectable::after, .choices__list[aria-expanded] .choices__item--selectable::after {
    content: attr(data-select-text);
    font-size: 12px;
    opacity: 0;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
  }
  [dir=rtl] .choices__list--dropdown .choices__item--selectable, [dir=rtl] .choices__list[aria-expanded] .choices__item--selectable {
    text-align: right;
    padding-left: 100px;
    padding-right: 10px;
  }
  [dir=rtl] .choices__list--dropdown .choices__item--selectable::after, [dir=rtl] .choices__list[aria-expanded] .choices__item--selectable::after {
    right: auto;
    left: 10px;
  }
}


/* наведенение на элемент меню */
.choices__list--dropdown .choices__item--selectable.is-highlighted, .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
  background-color: #f2f2f266;
}
.choices__list--dropdown .choices__item--selectable.is-highlighted::after, .choices__list[aria-expanded] .choices__item--selectable.is-highlighted::after {
  opacity: 0.5;
}

/* выбранный элемент меню */
.choices__item.is-selected {
  background-color: #a7b77455 !important;
}

.choices__item {
  cursor: default;
}

.choices__item--selectable {
  cursor: pointer;
}

.choices__item--disabled {
  cursor: not-allowed;
  -webkit-user-select: none;
          user-select: none;
  opacity: 0.5;
}

.choices__heading {
  font-weight: 600;
  font-size: 12px;
  padding: 10px;
  border-bottom: 1px solid #EEE;
  color: #000000;
  background-color: #f6f4e3;
}

.choices__button {
  text-indent: -9999px;
  -webkit-appearance: none;
          appearance: none;
  border: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
}
.choices__button:focus {
  outline: none;
}

.choices__input {
  display: inline-block;
  vertical-align: baseline;
  background-color: #f9f9f9;
  font-size: 14px;
  margin-bottom: 5px;
  border: 0;
  border-radius: 0;
  max-width: 100%;
  padding: 4px 0 4px 2px;
}
.choices__input:focus {
  outline: 0;
}
.choices__input::-webkit-search-decoration, .choices__input::-webkit-search-cancel-button, .choices__input::-webkit-search-results-button, .choices__input::-webkit-search-results-decoration {
  display: none;
}
.choices__input::-ms-clear, .choices__input::-ms-reveal {
  display: none;
  width: 0;
  height: 0;
}
[dir=rtl] .choices__input {
  padding-right: 2px;
  padding-left: 0;
}

.choices__placeholder {
  opacity: 0.5;
}

/* =====  night mode  ====== */

.night-mode .choices {
  color: #ccc;
}

.night-mode .choices.is-disabled .choices__inner,
.night-mode .choices.is-disabled .choices__input {
  background-color: #4d41375e;
}

.night-mode .choices[data-type*=select-one] .choices__input {
  color: #59b682;
  border-bottom: 1px solid #4d41375e;
  background-color: #4d41375e;
}
.night-mode .choices[data-type*=select-one] .choices__button:focus {
  box-shadow: 0 0 0 2px #00bcd4;
}
.night-mode .choices__inner {
  background-color: #4d41375e;
  border: 1px solid #5d47345e;
}
.night-mode .is-focused .choices__inner,
.night-mode .is-open .choices__inner {
  /* стрелочка вниз */
  border-color: #5d4734;
}
.night-mode .choices__list--dropdown,
.night-mode .choices__list[aria-expanded] {
  background-color: #4d4137;
  border: 1px solid #5d4734;
}
.night-mode .is-open .choices__list--dropdown,
.night-mode .is-open .choices__list[aria-expanded] {
  /* стрелочка вниз */
  border-color: #5d4734;
}
.night-mode .choices__heading {
  background-color: transparent;
  border-bottom: 1px solid transparent;
  color: #59b682;
}
.night-mode .choices__input {
  background-color: #4d4137;
}

/* наведенение на элемент меню */
.night-mode .choices__list--dropdown .choices__item--selectable.is-highlighted,
.night-mode .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
  background-color: #57493e;
}
/* выбранный элемент меню */
.night-mode .choices__item.is-selected {
  background-color: #59b68255 !important;
}
.night-mode .choices[data-type*=select-one]::after {
  border-color: #90909090 transparent transparent transparent;
}
.night-mode .choices[data-type*=select-one].is-open::after {
  border-color: transparent transparent #90909090 transparent;
}

/* =====  End of Choices  ====== */

.choices__list {
  white-space: nowrap;
}
.choices__list--dropdown {
  min-width: 350px !important;
}
.choices__list--dropdown.choices__item {
  overflow-y: auto;
  overflow-x: hidden;
}
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  position: relative;
  margin: 0;
  width: 100%;
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-size: 16px;
  line-height: 1.4;
  overflow-x: hidden;
  background-color: #fdfcf1;
}

.hidden {
  display: none !important;
}

article.text-small { font-size: 1.1em; }
article.text-medium { font-size: 1.4em; }
article.text-large { font-size: 1.7em; }

/* для подстрочника покрупнее делаем текст */
.interliner {
  font-size: 1.5em;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0 35px 0;
}

hr {
  display: block;
  margin: 30px 0;
  border: 0;
  border-bottom: 1px dashed #aca08f;
  height: 1px;
}

.night-mode hr {
  border-bottom: 1px dashed #555;
}


mark { background-color: #FAF594; }
.night-mode mark { background-color: #FAF594D4; }


h1, h2, h3, h4 {
  position: relative;
  margin-top: 0;
  margin-bottom: 12px;
  font-weight: 400;
  line-height: 1.2;
}
.night-mode h1, .night-mode h2, .night-mode h3, .night-mode h4 {
  color: #ccc;
}

h1, .h1 { font-size: 32px; }
h2, .h2 { font-size: 26px; }
h3, .h3 { font-size: 22px; }
h4, .h4 { font-size: 18px; }
h5, .h5 { font-size: 16px; }
h6, .h6 { font-size: 14px; }

/* basic styles ends */

::selection {
  background: #59b68277;
  color: #111;
}
::-moz-selection {
  background: #59b68277;
  color: #111;
}
::-webkit-selection {
  background: #59b68277;
  color: #111;
}

header {
  background-color: #f6f4e4;
}

header .container, footer .container {
  position: relative;
  max-width: 1200px;
  width: 100%;
  padding: 12px 10px;
  margin: 0 auto;
}

.csl {font-family: 'Ponomar', Verdana, Tahoma;font-size: 1.4em;line-height: 1.5em;}
.t-rtl {direction: rtl;}

/* ==================================================== */
/* text bar -- настройки перед текстом (язык, озвучить) */
/* ==================================================== */

#text-bar-wrapper {
  padding-top: 35px;
}

#text-bar {
  display: flex;
  gap: 20px;
  position: relative;
  margin: 0 0 25px 0;
  border-top: 1px solid #aca08f;
}

.night-mode #text-bar {
  border-top: 1px solid #555;
}

#text-bar .bar-el {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
}

#text-bar .right-group {
  display: flex;
  gap: 20px;
  margin-left: auto;
}

#text-bar .bar-el.btn a { color: #222 }
#text-bar .bar-el.btn {
  padding: 0 10px;
  font-size: 14px;
  line-height: 29px;
  color: #222;
  border: 1px solid #66666633;
  border-top: none;
  border-radius: 0 0 4px 4px;
  cursor: pointer;
  background-color: #f6f4e4;
}
#text-bar .bar-el.btn:hover { background-color: #ebeae0; }

.night-mode #text-bar .bar-el.btn a { color: #ccc; }
.night-mode #text-bar .bar-el.btn {
  background-color: #4d41375e;
  border: 1px solid #5d47345e;
  color: #ccc;
}
.night-mode #text-bar .bar-el.btn:hover { background-color: #574a3f88; }
.night-mode #text-bar .bar-el.btn:active { background-color: #5b4d41aa; }

/* ==================================================== */
/* АУДИО-ПЛЕЕР */
/* ==================================================== */

#audio-player {
  position: sticky;
  top: 0;
  margin-bottom: 10px;
}

#audio-player audio {
  width: 100%;
}

#audio-player a.copy {
  font-size: 8px;
  display: block;
  position: absolute;
  bottom: 7px;
  right: 2px;
  color:#b7b5a6;
}

#audio-player audio::-webkit-media-controls-enclosure {
  border-radius: 0;
  background-color: #f6f4e4;
}

.night-mode #audio-player a.copy {
  color:#1e1e1e;
}
.night-mode #audio-player audio::-webkit-media-controls-enclosure {
  background-color: #444;
}

/* ЯЗЫК КОНТЕНТА: выбор языка на главной */
.lang-select {
  min-width: 170px;
}

.lang-select .choices__inner {
  border-radius: 0 0 4px 4px;
  border-top: none;
  padding: 0 0 0 6px;
  padding-bottom: 0 !important;
  min-height: 30px;
}

.lang-select.is-open .choices__inner {
  border-radius: 0;
}

/* .lang-select i {
  color: red;
} */

/* ЯЗЫК UI: выбор языка кнопочек в подвале */
dd#change-ui-lang-area {
  display: inline-block;
  min-height: 65px;
  font-size: 0.7em;
  padding: 0 0 15px 0;
}

dd#change-ui-lang-area label {
  display: inline-block;
  padding: 5px 0;
}

dd#change-ui-lang-area .choices__inner {
  border-radius: 4px;
  padding: 0;
  padding-bottom: 0 !important;
  min-height: 30px;
  min-width: 225px;
}

.logo img {
  width: 200px;
  /* background-color: #d0d7be; */
  /* background-color: #406c59; */
  padding: 0;
  border-radius: 4px;
  -webkit-transition: background-color 124ms linear;
  -ms-transition: background-color 124ms linear;
  transition: background-color 124ms linear;
}

.night-mode .logo img {
  /* background-color: #c0cda1; */
  /* background-color: #406c59; */
}

.logo img:hover {
  /* background-color: #a4d091; */
  /* background-color: #a4d091; */
}
.logo img:active {
  /* background-color: #a2b997; */
  /* background-color: #a2b997; */
}

footer {
  flex-shrink: 0;
  padding: 10px 0 30px 0;
  background-color: #f6f4e4;
}

footer dd {
  margin: 0;
  padding: 0;
}

.flex-wrap {
  display: flex;
  flex: 1 0 auto;
  justify-content: center;
}

.flex-wrap .content {
  max-width: 1200px;
  width: 100%;
  position: relative;
}

.flex-wrap .content.main {
  padding: 30px 10px;
}

a {
  color: #808667;
  cursor: pointer;
}

.invisible {
  opacity: 0;
}

/* LINKS */

/* все ссылки */
a:hover { color: #8c6964; }

/* активная ссылка в header */
a.selected { color: #8c6964; }
a.selected:hover { color: #a67f7f; }

.highlight {
  color: rgba(255,151,101, 1)
}

.line-highlight {
  background-color: #ffe70e;
  color: black;
}

.hint {
  font-size: 14px;
  margin: 10px 0;
  color: #aaa;
}

.hint.small {
  margin-bottom: 2px;
}

input.pretty {
  padding: 6px 12px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  height: 45px;
  color: #212529;
  background-color: #f6f4e4;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  appearance: none;
  border-radius: 4px;
  transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

input.pretty:focus {
  color: #212529;
  background-color: #fff;
  border-color: #86b7fe;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, .25);
}

input.btn {
  background-color: #3a824b;
  color: white;
}
input.btn:active, input.btn:focus {
  background-color: #317441;
}

.tree-search {
  max-width: 400px;
  margin: 15px auto 0 auto
}

.search-tree-input {
  width: 100%;
}
.search-tree-input-area {
  position: relative;
}

.search-tree-input-area .search-icon {
  position: absolute;
  right: 12px;
  top: 12px;
  cursor: pointer;
  background: none;
  border: none;
}
/* TEXT TAGS  */

j {
  color: #c54a4a;
}

.night-mode b,
.night-mode strong {
  color: #ddd;
}

/* FORM */

.large-block {
  margin: 15px 0;
  font-size: 1.2em;
}
.large-block select {
  font-size: 1em;
}

/* =========== NIGHT MODE =========== */

.night-mode ::selection {
  /* background: #ffd500; */
  color: #ccc;
}
.night-mode ::-moz-selection {
  /* background: #ffd500; */
  color: #ccc;
}
.night-mode ::-webkit-selection {
  /* background: #ffd500; */
  color: #ccc;
}

body.night-mode {
  background-color: rgb(40,44,52);
  color: #abb2bf;
}

.night-mode header, .night-mode footer {
  background-color: #2f3541;
}

/* все ссылки */
.night-mode a, .night-mode button { color: #61afef; }
.night-mode a:hover, .night-mode button:hover { color: #7dc3ff;}

/* активная ссылка в header */
.night-mode a.selected { color: #cd9765; }
.night-mode a.selected:hover { color: #e4b487; }

.hint {
  font-size: 14px;
  margin: 10px 0;
  color: #616562;
}

.night-mode input.pretty {
  color: #ccc;
  background-color: #4d41375e;
  border-color: #5d47345e;
}

.night-mode input.pretty:focus {
  background-color: #4d41375e;
  border-color: #5d47345e;
  color: #ccc;
  box-shadow: 0 0 0 0.15rem rgba(89, 182, 130, .35);
}

.night-mode #search-input {
  color: #59b682;
}

.night-mode input.btn {
  background-color: #3a824b;
  color: white;
}
.night-mode input.btn:active, .night-mode input.btn:focus {
  background-color: #317441;
}


.bible-list {
  display: flex;
  flex-wrap: wrap;
}

.bible-column {
  flex: 1;
  min-width: 300px; /* Минимальная ширина колонки */
  box-sizing: border-box;
  padding: 10px;
}

@media (max-width: 800px) {
  .bible-column {
    flex: 100%; /* Колонки занимают всю ширину контейнера */
  }
}

.mainp h2 {
  text-align: center !important;
  margin-top: 20px !important;
  padding-bottom: 20px;
  border-bottom: 1px solid #999;
}

.pre-bible-text {
  font-size: 0.9em !important;
}

a#current-book {
  cursor: default;
}

.bar-description {
  font-size: 12px;
  padding-bottom: 5px;
  padding-left: 0px;
  opacity: .8;
}

.spinner {
  width: 24px;
  height: 24px;
  border: 3px solid rgba(0, 0, 0, 0.1);
  border-top-color: #007bff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 10px auto;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

#infinite-scroll-trigger, .end-of-results {
  height: 150px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* ruby, rb, rt {
  display: inline-block;
} */

ruby {
  margin: 0;
  background: #AAAAAA11;
  padding: 15px 5px 5px 5px;
  border-radius: 4px;
  border: 1px solid #AAAAAA11;
}

ruby a {
  text-decoration: none;
}
ruby v {
  color: transparent;
}

.word-info {
  display: none; /* Скрываем по умолчанию */
  width: 100%;
  position: fixed;
  padding: 20px 40px;
  left: 0;
  bottom: 0;
  width: 100%;
  border-radius: 4px;
  font-size: 0.9em;
  color: #333;
  background-color: #d7d5ca;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  z-index: 999;
}

.word-info .word-content {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  word-wrap: break-word;
  white-space: normal;
}

body.select-bar-enabled .word-info {
  bottom: 73px;
}

.word-link.active + .word-info {
  display: block; /* Показываем при активации */
}

.night-mode .word-info {
  color: #cdd1db;
  background-color: #3e4759;
}
#chapter-header {
  position: relative;
  padding-bottom: 30px;
  margin-bottom: 0;
}

#text-menu { display: flex; justify-content: flex-end; }
#text-menu > a {
  display: inline-block;
  padding: 2px;
  min-height: 30px;
  min-width: 40px;
  line-height: 30px;
  text-align: center;
  cursor: pointer;
}
#text-menu > a:hover {
  background-color: #80808010;
}
#text-menu > a.active {
  background-color: #8c6964;
  color: #f6f4e4;
  border-color: transparent;
}
.night-mode #text-menu > a.active {
  background-color: #cd9765;
  color: #2f3541;
}

#text-menu #text-small-btn {
  font-size: 1em;
  border: 1px solid #80808040;
  border-radius: 4px 0 0 4px;
}
#text-menu #text-medium-btn {
  font-size: 1.2em;
  border-top: 1px solid #80808040;
  border-bottom: 1px solid #80808040;
}
#text-menu #text-large-btn {
  font-size: 1.4em;
  border: 1px solid #80808040;
  border-radius: 0 4px 4px 0;
}


/* PAGINATION  */
#pagination-bottom {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-style: italic;
  margin: 35px 0 10px 0;
}

#pagination-bottom #end-tip {
  padding: 0 20px;
  text-align: center;
}

/* SELECT-BAR  */

#select-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0 10px;
  overflow: hidden;
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #d7d5ca;
  user-select: none;
  z-index: 10;
  overflow: visible;
}

#select-bar .bar-el {
  display: inline-block;
  max-width: 135px;
  position: relative;
  text-align: center;
  padding: 13px 10px;
  text-decoration: none;
  font-size: 1em;
  background-color: #54524912;
  margin-right: 1px;
}

#select-bar .bar-el:hover {
  background-color: #e3c89e;
  cursor: pointer;
}
#select-bar .bar-el:active {
  background-color: #9f9c9733;
}
#select-bar .bar-el.active {
  color: #d7d5ca;
  background-color: #8c6964;
}

#select-bar .bar-el svg {
  width: 20px;
  height: 20px;
}

#select-bar .icon-title {
  font-size: 1.1em;
}

#select-bar .bar-el-group {
  display: flex;
  position: relative;
}

#select-bar .bar-el-group:hover {
  background-color: #dbc7a8;
}

.night-mode #select-bar .bar-el-group:hover {
  background-color: #1f6db2;
}

.night-mode #select-bar {
  background-color: #3e4759;
}

.night-mode #select-bar .bar-el {
  color: #cdd1db;
  background-color: #ffffff11;
}

.night-mode #select-bar .bar-el:hover {
  background-color: #257bc7;
  color: #fff;
}

.night-mode #select-bar .bar-el:active {
  background-color: #b8c6d533;
}
.night-mode #select-bar .bar-el.active {
  background-color: rgba(205,151,101, 1);
  color: #3e4759;
}

#copy-text-address-btn, #copy-burger-icon {
  display: inline-block;
}

#copy-burger-icon {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

/* контекстное меню копирования */
#copy-burger-menu {
  position: absolute;
  /* 0px - отступ справа, то есть прижимаем вправо */
  /* calc(100% + 3px) - отступ снизу вверх на высотку селект-бара, плюс 3px */
  inset: auto 0px calc(100% + 3px) auto;
  background-color: #fdfcf1;
  color: #000000;
  border-radius: 5px;
  border: 1px solid #b4ada2;
  box-shadow: 0px 0px 8px #282c3471;
  overflow: hidden;
  font-size: 1em;
  text-align: left;
}

/* элементы контекстного меню */
/* все */
#copy-burger-menu > div {
  padding: 8px 5px;
  border-bottom: 1px solid #9f9c9741;
  white-space: nowrap;
  padding: 8px 15px;
}
#copy-burger-menu > div:last-child {
  border-bottom: none !important;
}
/* заголовок */
#copy-burger-menu .menu-title {
  padding: 8px 28px;
  color: #ffffff;
  background-color: #817f7c8c;
  font-weight: bold;
  text-align: center;
  cursor: default;
}
/* активные */
#copy-burger-menu > .active-el {
  color: #000;
}
/* активные: наведённые */
#copy-burger-menu > .active-el:hover {
  background-color: #ebbc8177;
  border-color: transparent;
}
/* иконка активного элемента */
#copy-burger-menu > .active-el .icon-title {
  font-weight: bold;
  display: inline-block;
  min-width: 75px;
  text-align: right;
  padding: 0 10px 0 0;
  color: #00000040;
}

/* ночной режим */
.night-mode #copy-burger-menu {
  background-color: #3e4759;
  color: #cdd1db;
  border: 1px solid #ffffff11;
  box-shadow: 0px 0px 9px #282c34;
}
.night-mode #copy-burger-menu > div {
  border-bottom: 1px solid #ffffff11;
}
/* заголовок */
.night-mode #copy-burger-menu .menu-title {
  padding: 8px 28px;
  color: #a3a7b1;
  background-color: #343b49;
}
/* активные */
.night-mode #copy-burger-menu > .active-el {
  color: #cdd1db;
}
/* активные: наведённые */
.night-mode #copy-burger-menu > .active-el:hover {
  background-color: #257bc7;
  color: white;
}

.night-mode #copy-burger-menu > .active-el .icon-title {
  color: #ffffff40
}

po {
  display: inline-block;
  background-color: #88888833;
  border-radius: 2px;
}
po:hover {
  display: inline-block;
  background-color: #829eba33;
  border-radius: 2px;
  cursor: pointer;
}

dict .desc {
  background: #333;
  color: white;
  padding: 1rem;
  max-width: 600px;
  position: fixed;
  top: 1rem;
  left: 0;
  right: 0;
  margin: 0 auto;
  white-space: pre-wrap;
}

/* POPUP for Select-bar */

#popup-notif {
  position: fixed;
  padding: 6px 10px;
  bottom: 130px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 250px;
  max-width: 500px;
  border-radius: 4px;
  text-align: center;
  font-size: 0.9em;
  color: #51504c;
  background-color: #d4e2ce;
  opacity: 1;
  -webkit-transition: opacity 500ms linear;
  transition: opacity 500ms linear;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  word-wrap: break-word;
}

.night-mode #popup-notif {
  color: #cdd1db;
  background-color: rgba(74,103,133,1);
}

#popup-notif t {
  display: block;
  margin-bottom: 2px;
  font-weight: bold;
}

.prev-next-bar {
  display: flex;
  justify-content: space-between;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-style: italic;
}

.prev {
  text-align: left;
}

.next {
  margin-left: auto;
  text-align: right;
}

#page-content {
  word-wrap: break-word;
}

#page-content img { max-width: 100%;}

#page-content.text-page table {
    border-collapse: collapse;
    margin: 0;
    overflow: hidden;
    table-layout: fixed;
    width: 100%;
}

#page-content.text-page table th {
    border: 1px solid #777777;
    box-sizing: border-box;
    min-width: 1em;
    padding: 6px 8px;
    position: relative;
    vertical-align: top;
}
#page-content.text-page table th {
    background-color: #AAAAAA;
    font-weight: 700;
    text-align: left;
}

#page-content.text-page table td, #page-content.text-page table th {
    border: 1px solid #777777;
    box-sizing: border-box;
    min-width: 1em;
    padding: 6px 8px;
    position: relative;
    vertical-align: top;
}


/* Для pages нужны помельче главы */
#page-content nav#menu-chapters a {
  font-size: 0.9em;
  font-family: inherit;
}

#page-content h1#subject {
  font-weight: 500;
}

#page-content .subject-desc {
  font-size: 0.9em;
}

#h1-title {
  margin-top: 10px;
  text-align: center;
}

#page-content #h1-title h1.title {
  display: inline-block;
}

#page-content h1.title {
  font-size: 36px;
}

#page-content #title-sub {
  margin: 12px 0 20px 0;
  text-align: center;
  font-size: 16px;
}
#page-content #links-sub {
  margin: 10px 0 0 0;
  font-size: 12px;
}

.btn-group {
  display: flex;
  justify-content: center; /* Горизонтальное выравнивание по центру */
  align-items: center; /* Вертикальное выравнивание по центру */
}

.btn {
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid #ccc;
  text-decoration: none;
}

.btn:first-child {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.btn:last-child {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

.btn:not(:first-child) {
  border-left: none;
}

.btn:hover {
  background-color: #e9e9e9;
}

.btn.pressed {
  cursor: default;
  color: #6e6e6e;
  background-color: #f6f4e3;
}

.night-mode .btn {
  border: 1px solid #666;
}
.night-mode .btn:hover {
  background-color: #425369;
}

.night-mode .btn.pressed {
  cursor: default;
  color: #eee;
  background-color: #666;
}



#page-content p {
  hyphens: auto;
  hyphenate-limit-chars: 5 3 3;
}

@media (min-width: 1180px) {
  #page-content p {
    text-align: justify;
  }
}

#page-content .pages {
  margin: 0 0 20px 0;
  display: flex;
  flex-wrap: wrap;
  overflow-x: hidden;
}

#page-content #page-body {
  margin: 20px 0;
}

#page-references-text {
  font-size: 0.8em;
}

#page-references-title {
  margin-bottom: 20px;
}

#page-references ol,
#page-references ul {
  line-height: 1rem;
}


/* TEXT */

/* ПРИМЕНЯЕТСЯ К ТЕКСТАМ ИЗ СТАТЕЙ */
.looks-like-page hr {
  display: block;
  margin: 30px 0;
  border: 0;
  border-bottom: 1px dashed #aca08f;
  height: 1px;
}

.looks-like-page ul,
.looks-like-page ol {
  padding: 0;
  padding-inline-start: 32px;
  /* line-height: 1.5rem; */
}

.looks-like-page li > ul,
.looks-like-page li > ol {
  margin-top: 10px;
}

.looks-like-page li+li {
  margin: 12px 0 0;
}

.looks-like-page h1,
.looks-like-page h2 {
  font-family: 'Linux Libertine','Georgia','Times','Source Serif Pro',serif;
}

.looks-like-page h2 { border-bottom: 1px solid #999; padding-bottom: 3px; }

.looks-like-page h1 { font-weight: 200; }
.looks-like-page h2,
.looks-like-page h3,
.looks-like-page h4 {
  font-weight: 500;
}

.looks-like-page h1 {
  font-size: 1.8em;
  margin-top: 30px;
}
.looks-like-page h2 {
  font-size: 1.5em;
  margin-top: 2em;
}
.looks-like-page h3 {
  font-size: 1.2em;
  margin-top: 1.8em;
}
.looks-like-page h4 {
  font-size: 1.0em;
  margin-top: 1.5em;
}

.looks-like-page h2+p,
.looks-like-page h3+p,
.looks-like-page h4+p {
  margin-top: 0.8em;
}

.looks-like-page p+p {
  margin-top: 1.4em;
  display: block;
}

.looks-like-page blockquote > p { margin: 0 }

.looks-like-page code {
  background-color: rgba(#616161, 0.1);
  color: #616161;
}

.looks-like-page pre {
  background: #0D0D0D;
  color: #FFF;
  font-family: 'JetBrainsMono', monospace;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
}
.looks-like-page pre code {
  color: inherit;
  padding: 0;
  background: none;
  font-size: 0.8rem;
}

.looks-like-page img {
  height: auto;
}

.looks-like-page blockquote {
  border-left: 2px solid #d5cdb7;
  background-color: #d5cdb724;
  font-family: Arial,Helvetica,sans-serif;
  font-style: italic;
  margin: 20px 0;
  padding: 5px 10px;
}

.title-bar-icons {
  text-align: center;
}

.title-bar-icons a.icon {
  display: inline-block;
  width: 20px;
}

.source-link {
  margin: -20px 0 25px 0;
  font-size: .9em;
  padding: 4px 12px;
}
/* КОНЕЦ // ПРИМЕНЯЕТСЯ К ТЕКСТАМ ИЗ СТАТЕЙ */

.night-mode #page-content .subject {
  color: #b2bbc1;
}

/* MENU */
.level {
  margin-left: 15px;
}

.menu-subject.depth-0 {
  font-weight: 600;
  margin-top: 0.8em;
}
.menu-subject {
  font-size: 1.1em;
  font-weight: bold;
  margin-top: 0.9em;
  margin-bottom: 0.5em;
}

.menu-unit {
  display: inline-block;
  overflow: hidden;
  border-radius: 3px;
  padding: 0;
  margin: 1px 4px 1px 0;
}

.menu-tree .menu-link.not-exist span {
  padding: 5px 10px;
  color: #AAAAAA;
  background-color: #80808015;
}
.menu-tree .menu-link.not-exist a:hover span {
  padding: 5px 10px;
  color: #AAAAAA;
  background-color: rgba(102, 102, 102, 0.153);
}

.menu-tree .menu-link a {
  text-decoration: none;
}

.menu-tree .menu-link span {
  display: inline-block;
  padding: 5px 10px;
  height: 100%;
  color: #4c5428;
  background-color: #204f0314;
  z-index: -1;
}
.menu-tree .menu-link a:hover span {
  color: #4c5428b8;
  background-color: #2c640a1c;
  -webkit-transition: background-color 80ms ease;
  -ms-transition: background-color 80ms ease;
  transition: background-color 80ms ease;
}

/* GOLD */
.menu-tree .menu-link.gold span {
  color: #5f572b !important;
  background: #ffd7008a;
}
.menu-tree .menu-link.gold a:hover span {
  background: #ffd700b0;
}

.menu-tree .menu-link.selected span,
.menu-tree .menu-link.selected a:hover span {
  background-color: #8c6964;
  color: #fdfcf1 !important;
}

.night-mode .menu-tree .menu-link.gold span {
  color: #ffe86b !important;
  background: #ffd70014;
}
.night-mode .menu-tree .menu-link.gold a:hover span {
  background: #ffd70020;
}

.night-mode .menu-tree .menu-link span {
  color: #61afef;
}
.night-mode .menu-tree .menu-link a:hover span {
  color: #7dc3ff;
}

.night-mode .menu-tree .menu-link.selected span,
.night-mode .menu-tree .menu-link.selected a:hover span {
  background-color: rgba(205,151,101, 1);
  color: #282c34 !important;
}


.night-mode .menu-tree span {
  background-color: #61afef10;
}

.night-mode .menu-tree a:hover span {
  background-color: #61afef20;
}

.menu-tree {
  padding: 5px 0 0 0;
}

.menu-tree.hidden-children .menu-link,
.menu-tree.hidden-children .menu-subject {
  display: none;
}
.menu-tree.hidden-children .visible {
  display: inline-block;
}


.menu-tree a.non-kanon span {
  background-color: #7e7e7e30;
  color: #888;
}
.menu-tree a.non-kanon:hover span {
  background-color: #7e7e7e40;
  color: #777;
}
.night-mode .menu-tree a.non-kanon span {
  background-color: #7e7e7e1f;
  color: #999;
}
.night-mode .menu-tree a.non-kanon:hover span {
  background-color: #7e7e7e2f;
  color: #AAA;
}


.menu-tree .menu-link.not-exist span {
  padding: 5px 10px;
  color: #AAAAAA;
  background-color: #80808015;
}
.menu-tree .menu-link.not-exist a:hover span {
  padding: 5px 10px;
  color: #AAAAAA;
  background-color: rgba(102, 102, 102, 0.153);
}



/* GOD */
.menu-tree .menu-link.gold.God span {
  color: #fff !important;
  background-color: #b63333 !important;
  font-weight: bold;
}
.menu-tree .menu-link.gold.God a:hover span {
  background-color: #c84242 !important;

}

.menu-tree .icon {
  width: 40px;
  height: 32.5px;
  margin: 0;
  border-radius: 4px 0 0 4px;
  display: flex;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  /* --- */
  background-color: #836b5240;
}
.night-mode .menu-tree .icon {
  background-color: #836b527d;
}

.menu-tree .icon .real img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* вписывается в контейнер, сохраняя пропорции */
  object-position: center; /* центрирует картинку (можно изменить на top, left и т. д.) */
}

.menu-link a {
  display: flex !important;
  align-items: flex-start;
}

.menu-tree a span {
  flex: 1;
}

.menu-tree .vis {
  display: inline-block;
  font-size: .5em;
  vertical-align: middle;
  opacity: .6;
  margin-left: 2px;
  user-select: none;
}
/* menu end */


.night-mode #page-content blockquote {
  border-left: 2px solid #90b990;
  background-color: #90b99011;
}
.night-mode #page-content #title-sub {
  color: #777;
}

.filter {
  font-size: 24px;
  margin: 0 0 10px 0;
}

/* article menu */

#article-menu {
  margin: 40px auto 10px auto;
  min-width: 200px;
  max-width: 900px;
  padding: 10px 15px;
  border: 1px solid #7777772E;
  border-radius: 3px;
  background-color: #90888111;
}
.text-small #article-menu { font-size: 1.2em; }
.text-medium #article-menu { font-size: 1.0em; }
.text-large #article-menu { font-size: 0.85em; }

#article-menu .menu-name {
  text-align: center;
}

#article-menu .nav-h2,
#article-menu .nav-h3,
#article-menu .nav-h4 {
  margin: 10px 0;
}

#article-menu .nav-h2 { margin-left: 0; }
#article-menu .nav-h3 { margin-left: 20px; font-size: 0.8em; }
#article-menu .nav-h4 { margin-left: 40px; font-size: 0.6em; }

#article-menu .short { display: inline-block; margin-right: 10px; }

/* маркер перед старшими пунктами меню */
/* #article-menu .nav-h2::before {
  content: "・";
  margin-left: 0px;
  margin-right: 0px;
} */

/* подсветка параграфа, к которому перешли по нажатию на якорь сноску */
#page-references-text p:target {
  color: #000000;
  background-color: #cd97652e;
  border: 1px solid #cd97655e;
  border-radius: 3px;
  padding: 3px 8px;
}
.night-mode #page-references-text p:target {
  color: #EEEEEE;
  background-color: #90b9901c;
  border: 1px solid #90b9905e;
}

.foot-ref a,
a.foot-note {
  text-decoration: none;
}

/* сноски не нужно выделять и копировать */
.foot-ref,
a.foot-note {
  user-select: none;
}

h2.parent-title {
  border-bottom: none;
  text-align: center;
  font-size: 1em;
  margin: 0 0 -10px 0;
  padding: 0;
}

.parent-title a {
  text-decoration: none;
}

/* ============================ minimap ======================== */

/*
#minimap-container { right: 0; }
.minimap { right: 20px; }
.minimap-items { right: 0; }
.minimap-item { right: 0; }
.minimap-label { right: 5px; }
.minimap-items:hover .minimap-label,
#minimap-container.opened .minimap-label { right: 15px; }
.minimap-hit-area { right: 0; }
.minimap-progress { right: 0; }

также поменяй все border-right-color и border-right на left (наоборот тут)
*/

#minimap-container {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100px;
    z-index: 100;
}

.minimap {
    position: absolute;
    top: 20px;
    bottom: 20px;
    left: 0;
    width: 4px;
    background-color: rgba(0,0,0,0.1);
}

.minimap-items {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 200px;
}

.minimap-item {
    position: relative;
    left: 2px;
    width: 6px;
    height: 6px;
    background-color: #5252527c;
    border-radius: 50%;
    margin-left: -3px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.minimap-item.active {
    background-color: #0000007e;
}

/* синяя обводка активного кружка */
.minimap-item.active::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0); /* Начальное состояние - масштаб 0 */
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: rgba(0, 110, 255, 0.3);
  z-index: -1;
  opacity: 0; /* Начальное состояние - прозрачный */
  transition: transform 2s ease, opacity 2s ease; /* Анимация масштаба и прозрачности */
}

/* Состояние при активации */
.minimap-item.active::before {
  transform: translate(-50%, -50%) scale(1); /* Конечное состояние - масштаб 1 */
  opacity: 1; /* Конечное состояние - непрозрачный */
}

.minimap-label {
    display: block;
    position: absolute;
    left: 5px;
    top: 50%;
    transform: translateY(-50%);
    background-color: #fff;
    color: #333 !important;
    border-color: #d3d3d3;
    text-decoration: none !important;
    border: 1px solid #ddd;
    padding: 4px 8px;
    border-radius: 3px;
    white-space: nowrap;
    opacity: 0;
    font-size: 13px;
    transition: all 0.09s ease-out;
    will-change: transform, opacity;
    z-index: 4;
}

/* если меток очень много, то они по умолчанию скрыты */
.too-many .minimap-label {
  display: none;
}
.minimap-label.visible {
  display: block;
}

/* фон, когда открыта миникарта с помощью кнопки */
#minimap-container.opened {
  width: 100%;
  background: linear-gradient(to right, transparent, #fdfcf1);
}
.night-mode #minimap-container.opened {
  width: 50%;
  background: linear-gradient(to right, transparent, #5b5b5b73);
}

/* наведение мышкой на меню, или клик на открытие меню (добавит класс opened) */
.minimap-items:hover .minimap-label,
#minimap-container.opened .minimap-label {
    opacity: 1;
    left: 15px; /* Конечная позиция метки после появления */
    pointer-events: auto;
}
/* активный (сейчас читаемый) элемент */
.minimap-item.active .minimap-label {
    border-color: #215ee2;
}
/* наведенный мышкой элемент */
.minimap-label:hover {
    border-color: #a4a4a4;
    z-index: 999 !important;
}
/* показывается, когда скрываются все прочие labels, если их очень много на странице */
/* показывается либо тот, на который навели мышкой, либо активный */
.minimap-item.active .minimap-label,
.minimap-item .minimap-label:hover {
    display: block;
}

/* Невидимая область для наведения (после наведения появляется соответствеющий label */
.minimap-hit-area {
    position: absolute;
    left: 0;
    top: -11px;
    bottom: 0;
    width: 100px; /* Широкая область для наведения */
    height: 30px;
    z-index: 3;
}

/* Стрелочка к точке */
.minimap-label::after {
    content: '';
    position: absolute;
    left: -6px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-right: 6px solid #fff;
    z-index: 1;
}

/* Обводка для стрелочки */
.minimap-label::before {
    content: '';
    position: absolute;
    left: -7px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 7px solid #ddd;
    z-index: 0;
}
/* изменение СТРЕЛОЧКИ при наведении, и у активного элемента */
/* активная */
.minimap-item.active .minimap-label::before {
    border-right: 7px solid #215ee2;
}
/* наведённая */
.minimap-label:hover::before {
    border-right: 7px solid #a4a4a4;
}


/* ================= Тёмная тема ===================== */
.night-mode .minimap {
    background-color: rgba(255,255,255,0.1);
}

.night-mode .minimap-item {
    background-color: #aaaaaa58;
}

.night-mode .minimap-item.active {
    background-color: #ffffff9b;
}

/* МЕТКА */
.night-mode .minimap-label {
    background-color: #242424;
    color: #eee !important;
    border-color: #555;
}
/* МЕТКА active */
.night-mode .minimap-item.active .minimap-label {
    border-color: #215ee2;
}
/* МЕТКА HOVER */
.night-mode .minimap-label:hover {
    background-color: #2c2c2c;
}

/* СТРЕЛОЧКА */
.night-mode .minimap-label::after {
    border-right-color: #242424;
}
/* ОБВОДКА СТРЕЛОЧКИ */
.night-mode .minimap-label::before {
    border-right-color: #555;
}

/* изменение стрелочки при наведении и у активного элемента */
/* ОБВОДКА СТРЕЛОЧКИ HOVER */
.night-mode .minimap-label:hover::before {
    border-right-color: #555;
}
/* СТРЕЛОЧКА HOVER */
.night-mode .minimap-label:hover::after {
    border-right-color: #2c2c2c;
}
/* ОБВОДКА СТРЕЛОЧКА АКТИВНАЯ */
.night-mode .minimap-item.active .minimap-label::before {
  border-right-color: #215ee2;
}

/* ПОКАЗЫВАЕМ КАРТУ ТОЛЬКО НА БОЛЬШИХ ЭКРАНАХ */
/* @media (max-width: 1250px) {
  #minimap-container { display: none;}
} */


.copy-anchor {
  content: url('data:image/svg+xml;utf8,<svg fill="%23a0ae62" height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M6.354 5.5H4a3 3 0 0 0 0 6h3a3 3 0 0 0 2.83-4H9c-.086 0-.17.01-.25.031A2 2 0 0 1 7 10.5H4a2 2 0 1 1 0-4h1.535c.218-.376.495-.714.82-1z"/><path d="M9 5.5a3 3 0 0 0-2.83 4h1.098A2 2 0 0 1 9 6.5h3a2 2 0 1 1 0 4h-1.535a4.02 4.02 0 0 1-.82 1H12a3 3 0 1 0 0-6H9z"/></svg>');
  position: absolute;
  left: -32px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  width: 35px;
  padding-right: 10px;
  height: 100%;
}

h1:hover .copy-anchor,
h2:hover .copy-anchor,
h3:hover .copy-anchor,
h4:hover .copy-anchor,
.copy-anchor:hover {
  opacity: 1;
}

#page-body.verses {
  margin-top: -20px !important;
}

#search-results .match {
  margin: 0 0 10px 39px;
  position: relative;
}

#search-results .thumb {
  width: 30px;
  position: absolute;
  margin: 4px 0 0 -40px;
}

#search-results .parent-link {
  margin-top: 5px;
  opacity: .5;
  font-size: .5em;
}

#search-input {
  width: 100%;
}

.search-options {
  display: flex;
  gap: 10px;
}

.search-options > .search-param {
  flex-grow: 1;
}

#search-input-area {
  position: relative;
}

#search-input-area .search-icon {
  position: absolute;
  right: 12px;
  top: 12px;
  cursor: pointer;
  background: none;
  border: none;
}