@import url('https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    color-scheme: only light;
    --bg: #faf4ea;

    --color: #313131;
    --link-basic: black;
    --link-basic-hover: #1155cc;
    --link: #1c5fb4;

    --dark-bg: #0e0e0e;
    --dark-color: rgb(155 155 155);
    --dark-link: #D8DEE9; /* #bad9fb */
    --dark-link-hover: #f3f7ff;
    --dark-sup: #2196f3;

    --font:  'Noto sans', sans-serif, "Noto Color Emoji", sans-serif;
    --font-condensed: 'Noto sans', sans-serif, "Noto Color Emoji", sans-serif;

    --font-weight-bold: 600;
    font-size: 16px;
}

/*@font-face {
    font-family: 'Vezitsa';
    src: url('/fonts/vezitsacyrillic.ttf') format('truetype');
}*/

/* Подключаем шрифты с помощью @font-face */
@font-face {
  font-family: 'Source Sans Pro';
  src: url('/fonts/SourceSansPro-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Source Sans Pro';
  src: url('/fonts/SourceSansPro-Italic.ttf') format('truetype');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'Source Sans Pro';
  src: url('/fonts/SourceSansPro-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Source Sans Pro';
  src: url('/fonts/SourceSansPro-BoldItalic.ttf') format('truetype');
  font-weight: bold;
  font-style: italic;
}

.frame p a {
    color: var(--link) !important;
}

.frame p {
    line-height: normal;
}


/*
 * Стили для блока примечания (.note)
 */
p.note {
    border-left: 4px solid #f0ad4e;
    padding: 15px 20px 15px 15px;
    margin: 1.5em 0;
    background: #fdf7f0;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, .1);
    /*border-radius: 8px;*/
}


/* ---------------- МЕНЮ / ХЕДЕР ----------------  */
.mobile-header {
    display: none;  
}
.videos a {
    display: block !important;
}
.container-of-narrow-menu {
        display: none;
    }
    .hidden {visibility: hidden;height: 0;}
    .container-of-wide-menu {
            /*border-bottom: 3px solid transparent;*/
            border-image: url(/images/official/bg2025-list-border.jpg) 50 round;
            background: url(/images/official/bg2025-list.jpg);

        display: flex;
        justify-content: space-between;

        position: fixed;
        z-index: 1000;
        top: 0;
        box-shadow: 0 0px 10px rgb(0 0 0 / 25%);
        width: 98%;
        padding: 0 1%;
    }

a.tooltip { border-bottom: 1px dashed var(--blue-accent); cursor: pointer; }
a.tooltip span { display: none !important; }

    .container-of-wide-menu a {
        padding: 5px;
        margin: 2px;
    }

    header fieldset a {
        font-size: 1rem;
        padding: initial;
        border-bottom: initial;
    }

    header fieldset a:hover {
        background: unset;

    }

    .container-of-wide-menu[min] a {
        padding: 4px 7px;
    }

    .left-section-of-menu {
        display: flex;
        justify-content: flex-start;
    }

    .right-section-of-menu {
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    .change-theme-button {
        background-color: #FFFFFF00;
        font-size: 1.6rem;
        transform: translateY(-1px);
        padding: 0 10px 0px 10px;
        border: 0;
    }

    .aggregate {
        margin: 20px auto;
        max-width: 90%;
        width: 500px;
        height: 700px;
        border: 2px dashed lightgray;
    }

p:has(img.picture) {
    text-align: center;
}
p img {
    max-height: 550px;
}

img {
    max-width: 100%;
    height: auto;
}

p.wip {
    color: gray;
}
/* ---------------------------------------- */

/*.rule::first-letter {
    color:red;
}*/

/* СТИЛИ ДЛЯ КАРТОЧЕК */
.card-container { display: flex; flex-direction: column; gap: 2px; margin-bottom: 20px; }
.card { padding: 0 !important; box-sizing: border-box; width: 100%; display: flex; flex-direction: column; border-left: 2px #00800069 solid; border-bottom: 1px #4b800030 solid;}
.card-line { display: flex; flex-direction: row; justify-content: space-between; }
.card-line p { margin: 0; border: 0; padding: 0 10px; font-size: 1em; font-weight: 400; }
.card-description { color: #666; margin: 0; }
.modalFromMainPage h2 { font-size: inherit; margin: 0; }

hr {
    border: 2px solid gray;
    border-bottom: 0;
    margin: 2.5rem auto;
}

button {
/*    background: #e5dbd1;*/
    border: 1px solid #968f88;
    border-radius: 2px;
    font-family: var(--font);
}
input {
    font-family: var(--font);
}

body { 
    color: var(--color); 
    margin: 0; font-family: var(--font); 
    background-color:  #c98a45;

/*    background: url(/images/official/bg2025-1.jpg);
    background-size: 105%;
    background-attachment: fixed;
    background-position: center;*/
}


h1, h2, h3, h4, h5, h6 {
    margin-left: auto;
    margin-right: auto;
    text-indent: 0;    
    font-weight: 400;
    position: relative;
}

h1 {font-size: 2em; }
h2 {font-size: 1.8rem;}
h3 {font-size: 1.8rem;}
h4 {font-size: 2rem; /*color:#1155cc;*/} /*h4:before {content:'§ ';}*/
h5 {font-size: 1.6rem; }
h6 {font-size: 1.6rem; }

p:has(audio){margin: 0.8rem 0;height: 50px}
audio{width:100%;}
.Ruyrik {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.2rem;
    padding-bottom: 1rem;
/*    font-size: 2rem;*/
    margin: 0 -30px;
    width: 100%;
}
.Ruyrik img:hover { cursor: pointer; }

/* Стили для картинки на главной */
.RyurikMainPage {
    position: relative;
    overflow: hidden;
    width: 96%;
    height: 90vh;
    max-height: 60vw;
    margin: auto;
    box-shadow: 0 0px 30px rgb(0 0 0 / 20%);
    background-position: center;
    border-radius: 20px;
    transition: background-image 1s ease;
    background-size: cover;

    display: flex;
    align-items: center;

}

.RyurikMainPage .Ruyrik {
background-image: url(/images/root/gerb-opacity.png);
    background-position: 50% 0;
    background-repeat: no-repeat;
    background-size: 10rem;
    height: 10rem;
}

.RyurikMainPage .Ruyrik img {
    width: 100px;
    padding-right: 0.5em;
    vertical-align: middle;
}

.RyurikMainPage + .contentDiv {
    margin-top: -100px;
}



    @keyframes zoomInOut {
      0%, 100% {
        background-size: 180%;
      }
      50% {
        background-size: 220%;
      }
    }



strong, b {font-weight: var(--font-weight-bold);}
time {
    color: blue;
/*    font-size: large;*/
}
/*Заголовок страницы*/
h1 {
    margin-top: 0px;
    text-align: center;
    font-weight: var(--font-weight-bold);
/*    border-bottom: 2px solid #0000007a;*/
}
.basic h1 {padding-bottom: 2rem; text-align: center;}
.basic h1:has(+.subtitle) {
    padding-bottom: 0rem;
/*    border-bottom: none;*/
    margin-bottom: 0;
}
h2 {
    margin: 2em auto 0.5em auto;
    text-align: left;
    font-weight: var(--font-weight-bold);
}
/* Заголовок на страницах с материалами */
h3 { 
    font-weight: var(--font-weight-bold);
    text-align: center;
    margin: 0em auto 1em auto;
    border-bottom: 1px solid darkgray;
}

.subtitle {
    text-indent: 0;
    max-width: 92vw;
    font-weight: 400;
/*    font-size: 1.1rem;*/
    text-align: center;
    margin: 10px auto 1em auto;
    border-bottom: 1px solid;
    padding-bottom: 1em;
}
.subtitle .app {
    background: #bfbfdb69;
    padding: 2px 6px;
    border-radius: 5px;
}

/*Наименование материала*/
h4 { 
    text-align: left;
    margin: 40px auto 0.2rem auto;

}
/* Часть (глава) материала */
h5 { 
    text-align: left;
    margin: 20px auto 0.2rem auto;
}
/* Тезис материала */
h6 { 
    text-align: left;
    margin: 1em auto 0.8rem auto;
/*    font-weight: var(--font-weight-bold);*/
}

p.strong { font-weight: var(--font-weight-bold); }
p { margin-top: 1rem; margin-bottom:1.5rem; /*hyphens: auto; text-align: justify;*/}

p:has(+ h4) {
    /*border-bottom: 1px solid #000;*/
    /*padding-bottom: 2em;*/
}

h4 + p:has(iframe),
h5 + p:has(iframe),
h6 + p:has(iframe) {
    margin-top: 1rem;
}

p:has(iframe) {
    margin: auto;
    width: 100%;
}

iframe {
/*    width: 100%;*/
    display: block;
    margin: auto;
}

h4 + h5, h5 + h6, h4 + h6 { margin-top: 0.2rem; }
h6 + p, h5 + p { margin-top: 0; }

/* Страница  /records/search/ */
.search-panel button {
    margin-left: 4px;
    margin-right: -4px;
}

span[style*="background"] {
  border-radius: 7px;
/*  box-shadow: 0 0 0 2px #E2EFD9;*/
}


.sutra {
    text-align: left;
    color:darkblue;
    padding: 10px;
    border-radius: 5px;
    border: 3px solid lightgray;
    width: min(92%,667px);
    margin: 1rem auto;
}

body[dark] .sutra { color: #039BE5; }

/* Ссылки на заголовки возле этих заголовков */

h6:hover .anchor-link {
    opacity: 1;
}

p:focus-visible {
    outline: none;
    outline-offset: 5px;
    border-radius: 1px;
}

a:hover b {
    text-decoration: underline;
}

.anchor-link {
    width: 1rem!important;
    background-image: url(/images/official/anchor-link.png);
    height: 1rem;
    display: inline-block!important;
    background-size: contain!important;
    position: absolute;
    left: -1.2rem;
    top: 0.2rem;
    opacity: 0;
    transition: opacity 0.1s;
    background-repeat: no-repeat;
    border-bottom: none!important;
}

.read {
    border-bottom: none!important;
}

.story-item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.anchor-link:hover {
    opacity: 1;
    transition: opacity 0.1s;
    cursor: pointer;
}

/* Ссылки на видео возле заголовков */

.video {
    margin: auto;
    width: 600px;
    height: calc(600px * (9/16));
    display: none;
}

    .show-video {
        width: 16px;
        height: 16px;
        background-image: url(/images/official/icon-of-video.png);
        display: inline-block;
        background-size: contain;
        margin-left: 5px;
        opacity: 0.4;
        transition: opacity 0.2s;
        cursor: pointer;
    }

    .show-video:hover {
        opacity: 1;
        transition: opacity 0.2s;
    }

    /* Цвет маркера на главных страницах */
    .contentDiv.basic li::marker { color: darkgray; }

    a { color: var(--link); text-decoration: none; transition: background .12s ease-out; }
    a:hover { text-decoration: underline; }

    .contentDiv a:hover { text-decoration: underline; }



    .contentDiv.basic a { color: var(--color); }
    .contentDiv.basic a:hover { color: var(--color-hover); }

    header a { text-decoration: none; color: inherit; padding: 7px;}
    header a:hover {
/*        color: #222222;*/
/*        background: rgba(208,215,222,0.32);*/
/*        border-radius: 5%;*/
/*        transition: background .12s ease-out;*/
    }

    pre { white-space: pre-line; font-family: var(--font); }

    u i { text-decoration: underline; font-style: italic; }
    strong em, em strong { font-weight: var(--font-weight-bold); font-style: italic; }

    /* Стиль таблиц */
    table p {
        margin: 0;
    }

    div.table-wrapper:has(table) { overflow: overlay; }
    table { text-align: left; background: white; hyphens: auto; margin: 1rem auto;/* width: 666px;*/ border-collapse:collapse; vertical-align: top; max-width: 100%; overflow-x: auto; /*white-space: nowrap; */-webkit-overflow-scrolling: touch; }
    table, table td, table th { border: 1px solid #a7a7a7; }
    table td,table th { padding: 5px; }
    table th { background: #347c99; font-weight: normal; }
    table caption {text-align: left;padding-left: 20px;font-weight: bold;}

    .detailsGloss summary::-webkit-details-marker { display: none }
    .detailsGloss > summary { list-style: none; }
    .detailsGloss summary:hover { text-decoration: none; cursor: inherit; }

    summary:hover {
        text-decoration: underline;
        cursor: pointer;
    }

    p.pagenum {
        position: absolute;
        left: 1rem;
        margin-top: -1.3rem;
    }

    /* Стиль цитат */
    q { color: #1155cc; font-style: italic;} 
    q:before { content: none; }
    q:after { content: none; }

blockquote, .citata_aab {
    padding: 0 0 0 15px;
    margin: 0;
    border-left: 2px solid #ccc;
}

blockquote p:first-child {
  margin-top: 0;
}

blockquote p:last-child {
  margin-bottom: 0;
}

    blockquote blockquote,
    blockquote .citata_aab,
    .citata_aab .citata_aab {
        padding: 0;
        margin: 0;
        background-color: #ffffff00;
        border: none;
        border-radius: 0;
    }

    small { display: block; padding: 5px; }

    :target { scroll-margin-top: 95px; }

    .contentDiv, .search-results {
    /*font-family: noto sans;*/
    width: min(85%, 900px);
    line-height: 1.7;
    /*text-align: justify;*/
    position: relative;
    padding: 30px 45px;
    margin: 80px auto 40px auto;
    border-radius: 10px;

    /*border: 8px solid transparent;*/
    border-image: url(/images/official/bg2025-list-border.jpg) 30 round;

    background-color: var(--bg);

    background: url(/images/official/bg2025-list.jpg);
    background-size: 300px;

    /* border: 4px solid ForestGreen; */
    /* border: 4px solid #7695a96b; */
    /* font-size: 1.2rem; */
    box-shadow: 0 0px 50px rgb(0 0 0 / 25%);
    }
    .contentDiv.search {padding: 30px 30px 15px 30px;}

    .search-results {
/*    padding: 25px;*/
    margin-top: 0;
    }

    .contentDiv.biblicalFormat { padding: 30px 90px 30px 120px; }

/*    .contentDiv.StrangeSwans { font-family: georgia; font-size: 22px; margin-top: 30px;}*/
/*    .contentDiv.StrangeSwans p { margin: 0 auto 0 auto; text-indent: 25px; }*/
/*    .contentDiv.StrangeSwans h2 { font-size: 28px ; margin-bottom: 10px; }*/
/*    .contentDiv.StrangeSwans h4 { font-size: 22px; margin-bottom: 20px;}*/

    .noIndent { text-indent: 0; } /*Исключительно для Трансмутации*/
    .picture { border-radius: 10px; display: block; margin: 8px auto 8px auto; max-width: 100%; max-height: 555px;}
    .source { text-align: right; margin-top: 1.5rem; }
    .darkgray { color: darkgray; font-weight: 400; }

    .numberOfVerse {color: darkgray;}

    .message {
    max-width: 700px;
    font-size: 16px;
    border-bottom: 2px solid #a5a5a557;
    padding: 1rem 1rem 0 1rem;
    margin: 1rem 0;
    }
    .message p {
    text-align: left;
    hyphens: none;
}
    .fragmentOfSofy {
    border-bottom: 2px solid #ccc;
    padding: 10px 0;
    margin: 0;

/*        padding: 0 0 0 1rem;
    margin: 0;
    border-left: 2px solid #53535357;
    background: #ffffff73;
    border-radius: 5px;*/
    }

    .numberOfRecord { font-size: 1rem; min-width: 31px; text-align: end; color: darkgray; margin-left: -35px; display: inline-block;}

    /* Сноски */
    .spanFootNoteNone { display: none;  }
    .spanFootNote a { text-decoration: initial; }
    .spanFootNote a:hover { text-decoration: underline; }
    .footNote { 

    font-family: var(--font-condensed);
    font-size: 1rem;
    border-radius: 5px;
    background: #fff6ec;
    border: 1px solid #878787;
    display: none;
    position: absolute; width: 300px; padding: 5px 10px; z-index: 2; border: 1px solid #787878; /*min-height: 2em;*/ background-color: white; text-align: left; font-weight: 400;
    color: var(--color); cursor: initial; box-shadow: 0 0 3px 0 silver; }
    .spanFootNote { vertical-align: text-top; background-color: yellow;
    padding: 0 2px;
    border-radius: 4px;font-weight: 800; /*font-size: 0.7rem;*/ cursor: pointer; color: #4B85CE; font-weight: var(--font-weight-bold); }
    .spanFootNote[open] .footNote { display: inline; }
    .footNote p:last-child { margin-bottom: 0; }
    .footNote sup ~ p { display: inline; }

/* Обложки книг */
.cover { position: relative; font-family: Georgia; background-color: #03072C; color: #ffff00; margin: 55px auto 55px auto; width: calc(210px*2); height: calc(297px*2); border: 1px solid black; }
.cover p { position: absolute; text-align: right; right: 20px; font-family: var(--font); }
.cover h1 { margin-top: 170px; font-size: 36px;  max-width: 96%; }
.cover h3 { margin-top: 60px; font-size: 1.25rem;  max-width: 96%; }

/* Смена темы */
/*.changeTheme { position: absolute; background-color: #FFFFFF; font-size: 1.25rem; right: 14px; top: 0;  margin: 0; border: 0; transition: top 0.2s ease; }*/

/* Цвета для выделения текста (строк) */
span.red { color: #c2185b; }
span.blue { color: #1155CC; }
span.green { color: green; }
/*.accent { color: black; text-decoration: none; font-style: inherit; }*/

/* Стили для автоСодержания */

.containerOfContents {
    border-radius: 8px;
    -ms-overflow-style: none;
    scrollbar-width: none;
    overflow: scroll;
    min-height: 600px;
    max-height: 90vh;
    width: 450px;
    position: fixed;
    border: 1px solid silver;
    background-color: #f9f9f9;
    padding: 0;
    top: 50px;
    right: -480px;
    text-align: left;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.containerOfContents[open] {
    right: 20px;
    z-index: 100;
    
}

.toggleContents {
    margin: 0px 5px;
    background-image: url(/images/official/contentsIcon.png);
    background-size: contain;
    top: 0px;
    height: 28px;
    width: 28px;
    right: 45px;
    border: 0;
    z-index: 15;
    transition: top 0.2s ease;
    background-color: rgba(0,0,0,0);
}
.toggleContents:hover, .changeTheme:hover { color: #4B85CE; cursor: pointer; }

.containerOfContents li,
.containerOfContents li li,
.containerOfContents li li li {
    list-style-type: none;
}

/* Видимость, отображаемость */
.containerOfContents li ul { display: none; overflow: hidden; /*transition: height 0.3s ease;*/ }
.containerOfContents li[open] ul { display: block; }
.containerOfContents li[open] li[open] ul {  display: block; }
.containerOfContents li[open] li ul { display: none; }
.containerOfContents::-webkit-scrollbar { display: none; }
ol li p {
    margin: 0;
}
.containerOfContents li {
    position: relative;
    padding-bottom: 0;
    padding-top: 0;        
}

.containerOfContents ul,
.containerOfContents ol {
    margin: 0;
    list-style-type: none;
    padding-left: 0;
}

/* Все уровни */
.containerOfContents a {
    display: block;
    padding: 7px 40px 7px 7px;
    border-bottom: 1px solid #6b6f735c;
}

/* Уровень ПЕРВЫЙ */
.containerOfContents li a {
    background-color: #daf1ff;
    font-family: var(--font-condensed);
    font-size: 1rem;
    color: black;
}

.containerOfContents p {

    font-size: 24px;
    margin: 0;
    padding: 6px;
    line-height: normal;
    font-weight: 600;
    background-color: #daf1ff;
    text-align: left;
    hyphens: none;

}

/* Уровень ВТОРОЙ */
.containerOfContents li ul li a {
    font-weight: 400;
    background-color: #efefef7d;
    font-family: var(--font-condensed);
    font-size: 1rem;
    color: black;
}

/* Уровень ТРЕТИЙ */
.containerOfContents li ul ul li a {
    padding: 4px 40px 4px 8px;
    background-color: white;
    font-family: var(--font-condensed);
    font-size: 0.95rem;
    color: black;
    border: 0;
    border-bottom: 1px dashed lightgray;
}
/*.containerOfContents li ul ul li:first-child a { padding-top: 14px; }*/
.containerOfContents li ul ul li:last-child a { border: 0; /*padding-bottom: 14px;*/ }
.containerOfContents li a.discloser,
.containerOfContents li a:hover { color: #1155cc; text-decoration: none; }
.containerOfContents li a[select] { color:#1155cc; }
.containerOfContents a.discloser { color: darkgray; font-size: 1.25rem; }

a.discloser::after {
    color: inherit; 
    position: absolute;
    content: '▼';
    display: block;
    right: 0px;
    top: 0;
    height: 30px;
    width: 40px;
    text-align: center;
    padding-top: 8px;
 }
    
li a.discloser::after { content: '▼'; }
li[open] a.discloser::after { content: '▲'; }
li[open] ul li a.discloser::after { content: '▼'; }
li[open] ul li[open] a.discloser::after { content: '▲'; }


.containerOfContents a.discloser {
    padding-right: 5px;
    right: 10px;
    position: absolute;
    top: 0;
    border: none;
    cursor: default;
    text-decoration: none;
    color: silver;
    background-color: unset;
}

.watchOnYouTube ~ h4 { margin-top: 25px; }
.watchOnYouTube {
    width: 450px;
    background-color: rgba(120, 160, 180, 0.1);
    border-left: 5px solid rgba(0,0,0,0.1);
    margin: 10px 0 auto 0;
    padding: 10px 15px 10px 20px;
    font-family: var(--font-condensed);
    color: black;
}

.comment {
    padding: 10px 15px 10px 20px;
    font-family: var(--font);
    border-bottom: 4px solid lightgrey;
/*    margin: 10px -3% 10px -3%;*/
    margin: 10px 1% 10px 1%;
    border-top: 1px solid;
    border-right: 1px solid;
    border-left: 1px solid;
    border-color: #dfd1a66e;
    border-radius: 5px;
    background: #d3d3d326;
}

/* Название материала на мобильном устройстве отображается только на моб. устройстве */
.short-name-of-contents {display: none;}
.subtitle a { color: var(--link); }


.container-of-short-name { display: none; }

.stanza-us {text-align: center; border-bottom: 2px solid #a7a7a782; width: fit-content; margin: 2em auto 0; padding: 10px 35px; border-radius: 8px; background-color: #f4f4f473; box-shadow: 0px 0px 4px 0px #c7c7c7b8;}
.stanza-us:hover { cursor: pointer; }




@media (min-width: 1200px) {

    header a { font-size: 1.1rem; padding: 9px; }
    
    .form-of-search input[type="search"] {padding: 2.5px;font-size: 14.5pt;}
    .change-theme-button {font-size: 14.5pt;font-size: 16.5pt;transform: translateY(-1px);}

    .container-of-wide-menu a {padding: 6px;}
    .container-of-wide-menu[min] a { padding: 5px 9px; }

    .container-of-wide-menu {width: 98%; padding: 0 1%; }
    

    .toggleContents { font-size: 1.1rem; }

    .numberOfRecord { font-size: 1.1rem; width: 55px; margin-left: -60px;}
    .contentDiv { width: min(85%, 1200px); font-size: 1.2rem; padding: 30px 80px 60px 80px;}
    .contentDiv.search { padding: 30px 120px 60px 120px;}
    .cover { margin: 65px auto 65px auto; width: calc(245px*2); height: calc(347px*2); }
    .cover h1 { margin-top: 198px; font-size: 42px; }
    .cover h3 { margin-top: 7px; font-size: 24px; }

}









/* /Меню (хедер) */
/**
 * Поиск по разделам
 */
    input[name=ssystem]:checked {
        background: color:red;
    }

    .toggleContents.desktop { background-image: none; width: initial; padding: 0 10px 0 5px;}

    .search-options {
        position: fixed;
        top: 50px;
        width: 313px;
        background-color: white;
        display: none;
        padding: 20px;
        right: 10%;
/*        border: 3px solid #7695a9;*/
        box-shadow: 0 0px 30px rgb(0 0 0 / 20%);
        border-radius: 8px;
        z-index: 50;
    }

    .search-panel {
        transition: width 0.2s ease;
        border: 1px solid #adbac7;
        background: white;
        font-size: 1rem;
        border-radius: 0;
        padding: 3px 5px;
        margin-right:8px;
        width: 300px;
    }

    @media (min-width: 999px) and (max-width: 1190px) { .search-panel { width: 200px; } }

    select {
        font-size: 1rem;
    }

    .search-panel:focus-visible {
        outline: 0;
    }




@media (max-width: 999px) {

    table, table td, table th { min-width: auto; margin: 0; }
    table { min-width: 100%; hyphens: none; }
    div { overflow: auto; max-width: 100%; }

        .RyurikMainPage {
        width: 100%;
        height: 110vh;
        max-height: 45vh;
        border-radius: 0;
        position: relative;
        background-size: cover;
        z-index: 2;

    animation: zoomInOut 20s ease-in-out infinite;
    background-repeat: no-repeat; /* Убедитесь, что фон не повторяется */
    background-position: center center; /* Центрируем фон */


    }

    .RyurikMainPage .Ruyrik {
        background-position: 50% 70px;
        margin: 90px auto 0;
        font-size: 2rem;

        background-size: 40%;
        height: 15rem;
    }
    .RyurikMainPage + .contentDiv {
        margin-top: -50px;
    }

        iframe {
        width: 96vw;
        height: 53vw;
    }

    .Ruyrik {
        z-index: 1;
        font-size: 2rem;
        margin: 30px 0 0 0;
        background-image: none;
    }

    .Ruyrik img {
        display: none;
/*        width: 0px !important;*/
    }

    .contentDiv:has(h1.Ruyrik) {
        background-image: url(/images/root/gerb-opacity.png?v=3);
        background-position: 50% 100px;
        background-repeat: no-repeat;
        min-height: 758px;
        background-size: 30%;
    }

    .card-line .darkgray {display: none;}

    body {
        background: unset;
    }

    strong em,
    em strong,
    strong,
    b {
        font-weight: var(--font-weight-bold);
    }

    .video {
        width: 300px;
        height: calc(300px * (9/16));
    }

    .anchor-link {
        position: initial;
        margin-left: 4px;
        opacity: 0.2;
    }

    .pagenum {
        display: none;
    }

    .sutra {
        margin: 1rem auto;
    }

    body[dark] .toggleContents {
        background-image: url(/images/official/contents-Icon-invert.png);
    }

    .container-of-narrow-menu {
        font-size: 1.10rem;
        display: flex;
        width: 100%;
        justify-content: space-between;
        height: 48px;
        z-index: 10;
        position: fixed;
        top: 0;
        background: #F4f3f2;
        background: #cbebff;
        box-shadow: 0 3px 3px rgb(0 0 0 / 20%);
    }

    .left-section-of-menu {
        /*        flex-direction: column;*/
        /*        width: 17vw;*/
    }

    .container-of-mobile-menu-in-left-section {
        width: 210px;
        padding: 0 10px;
        flex-direction: column;
        background: white;
        border-bottom: 1px solid darkgray;
        border-right: 1px solid darkgray;
        display: none;
    }

    .container-of-mobile-menu-in-left-section[open] {
        display: flex;
    }

    .form-of-search {
        width: inherit;
        display: flex;
        justify-content: flex-end;
    }

    .form-of-search input[type="search"] {
        font-size: 1.8rem;
        margin-right: 0;
        width: 40px;
        align-items: end;
        display: flex;
        justify-content: flex-end;
    }

    .form-of-search input[type="search"]:focus-visible {

        outline: 0;
        width: inherit;
    }

    .right-section-of-menu {
        padding-right: 10px;
        width: inherit;
    }

    .change-theme-button {
        margin: 1px 0 0 0;
        background-color: #FFFFFF;
        font-size: 14.5pt;
        /*1.25rem*/
        border: 0;
        text-align: left;
        padding: 7px;
        font-family: var(--font);
        color: inherit;
    }

    .toggle-mobile-menu {
        background: none;
        border: 0;
        text-align: left;
        padding: 5px 10px;
        width: fit-content;
    }

    .toggle-mobile-menu img {
        width: 36px;
    }

    .toggleContents {
        position: initial;
    }

    header a {
        border-bottom: 1px solid darkgray;
    }

    .contentDiv.basic a {
        font-family: var(--font);
    }



    h1 {font-size: 1.6rem;}

    h4 {font-size: 1.8rem;}

    h5 {font-size: 1.4rem;}

    h6 {font-size: 1.6rem;}

    h1,
    .cover {
        margin-top: 10px;
    }

    h2+div.contentDiv {
        margin-top: 30px;
    }

    .contentDiv>h4:first-child {
        margin-top: 0.5em;
    }

    .contentDiv.basic ol {
        padding-left: 25x;
    }

    ol {
        padding-left: 40px;
    }

    :target {
        scroll-margin-top: 95px;
    }

    .form-of-search {
        margin-right: 0;
    }

    .contentDiv {
        margin: 10px auto 0 auto;
        border-radius: 0;
        width: 96%;
        text-align: left;
        font-size: 1rem;
        padding: 70px 2% 30px 2% !important;
        border: 0;
    }

    .contentDiv.basic {
        font-size: 1rem;
    }

    .contentDiv.StrangeSwans p {
        font-size: 1rem;
        text-indent: 25px;
    }

    .contentDiv.glossaryPages {
        font-family: var(--font);
        padding: 0 0 15px 0
    }

    .contentDiv.glossaryPages pre {
        font-family: var(--font);
    }

    .contentDiv.biblicalFormat {
        padding-top: 70px;
        padding-left: 4%;
    }

    .contentDiv.basic li {
        border-bottom: 1px dashed;
        padding: 5px 0;
        font-family: var(--font);
    }

    .contentDiv.basic ul li:last-child,
    .contentDiv.basic ol li:last-child {
        border-bottom: none;
    }

    .contentDiv.basic ul {
        padding-left: 25px
    }

    .containerOfContents {
        border-radius: 0;
    }

    .fragmentOfSofy {
        padding: 0.5rem;
        border: 0;
        border-bottom: 2px solid #a5a5a557;
        margin: 10px -2% 10px -2%;
        font-family: var(--font-condensed);
    }

    .cover {
        width: 90vw;
        height: calc(90vw * (297/210));
    }

    .cover h1 {
        margin-top: calc(90vw/(420/170));
        font-size: calc(90vw/(420/36));
    }

    .cover h3 {
        margin-top: 60px;
        font-size: calc(90vw / (420/20));
    }



    .toggleContents {
        background-image: url(/images/official/contentsIcon.png);
        background-size: contain;
        height: 50px;
        width: 50px;
        margin: 10px 0 10px 10px;
    }

    .containerOfContents {
        right: -102%;
        width: 100%;
        top: 50px;
        height: calc(100vh - 120px);
        padding-bottom: 80px;
        z-index: 100;
        border: none;
    }

    .containerOfContents[open] {
        border: none;
        width: 100%;
        top: 50px;
        height: calc(100vh - 120px);
        bottom: 0;
        right: 0;
    }

    .containerOfContents ol {
        padding-left: 9%;
        width: 86%;
    }

    .container-of-short-name {
        justify-content: center;
        display: flex;
        container-type: inline-size;
        width: calc(100vw - 210px);
        position: fixed;
        top: 0;
        left: 85px;
        z-index: 20;
        height: 50px;
        align-items: center;
    }

    .short-name-of-contents {
        visibility: hidden;
        display: flex;
        text-align: center;
        line-height: 1.2;
    }

    .footNote {
        width: 86%;
        left: 3%;
        padding: 5px 10px;
    }

    .search-panel {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='currentColor' class='bi bi-search' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'%3E%3C/path%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-size: 34px;
        background-color: #ffffff00;
        border: none;

        transition: width 0.2s ease;
        outline: 0;
        font-size: 1.4rem;
        padding: 5px;
        margin-right: 0;
        width: 40px;
        align-items: end;
        display: flex;
        justify-content: flex-end;
    }

    .search-panel[select] {
        background-image: none;
        background-color: white;
        border: initial;
        flex-grow: 1;
        z-index: 100;
    }

    .search-options {
        right: 2%;
        position: fixed;
        top: 96px;
        width: 96%;
        display: none;
        padding: 0;
        border-top: 1px solid lightgray;
        border-bottom: 1px solid lightgray;

    }

    .search-options fieldset {
        margin: 5px;
        border-radius: 5px;
    }

    select {
        font-size: 1rem;
        margin: 15px
    }
    .left-section-of-menu {
        overflow-x: scroll;
        flex-direction: row;
        margin-top: 0;
        width: auto;
/*        min-width: fit-content;*/
        background-color: white;
    }
    .left-section-of-menu::-webkit-scrollbar { 
    display: none; 
}


    .right-section-of-menu {
        display: none;
    }


    .container-of-narrow-menu {

        height: 50px;

    }

    .container-of-wide-menu a {
        padding: 5px;
        margin: 5px;
        min-width: fit-content;
        font-size: 1em;
        font-weight: 400;
        border-bottom: unset;
        color: #767676;
        }



    .container-of-wide-menu {
        border-bottom: 0;
        display: flex;
        background: #93b7d0;
        top: 0;
        width: 100%;
        box-shadow: 0 3px 3px rgb(0 0 0 / 20%);
        flex-direction: column;
        padding: 0;
    }
.mobile-header {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0;
    padding: 0 6px;
    height: 50px;
    background: #93b7d0;
    justify-content: flex-end;
    align-items: center;
    display: flex!important;

}
}

@media screen and (min-width: 1600px) {
    .container-of-wide-menu { width: 80%; padding: 0 10%; }
    .search-panel { width: 300px; }
    .Ruyrik {
        margin: 0 -7%;
        width: 114%;
    }


    .RyurikMainPage {
        width: 80%;
    }

    .RyurikMainPage .Ruyrik {
        font-size: 3.4rem;
    }
}






body {
    background: #cec4b8 !important;
}

.contentDiv {
    background: #f9efe2 !important;
    max-width: 800px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5); 
    box-shadow: unset;
    border-radius: 0;
    /*font-size: 1rem;*/
}


.container-of-wide-menu {
    background: #f9efe2 !important;
}