/* Сноски. Стиль. Сделано Kolobdur. Версия 3.4.
-------------------------------------------------------------*/

/* 1 */
html {
  scroll-behavior: smooth;
}

/* В посту и блок снизу
-------------------------------------------------------------*/

/* 2 */
.fn-ref sup {
  font-size: 0.5em;
  vertical-align: super;
  margin-left: 2px;
}

/* 3 */
.fn-post-block {
  font-size: 0.9em;
}

/* 4 */
.fn-post-block ol {
  padding-left: 18px;
}

/* 5 */
.fn-post-block li,
.fn-post-group li {
  margin-bottom: 4px;
}

/* 6 */
#pun-main .fn-post-block a.fn-back {
  text-shadow: none;
  font-size: 1em;
  text-decoration: none;
  margin-left: 6px;
  color: #006597;
  transition: color 0.5s ease;
}

/* 7 */
#pun-main .fn-post-block a.fn-back:hover {
  color: #D46400;
  transition: color 0.5s ease;
}

/* 8 */
.fn-post-block:before {
  content: '--  --  --  --  --  --  --  --  --  --  --';
  display: block;
  height: auto;
  width: auto;
  padding: 0 0 4px;
  font-size: 1em;
  white-space: pre; 
  color: #393939;
}

/* Модальное окно сносок
-------------------------------------------------------------*/

/* 9 */
#fn-modal {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;
}

/* 10 */
#fn-modal h3,
#fn-modal h4,
.fn-insert-box h3,
.fn-close {
  margin: 0;
}

/* 11 */
#fn-modal h3,
#fn-modal h4 {
  color: #000000;
}

/* 12 */
.fn-insert-box h3,
.fn-close {
  color: #006597;
}

/* 13 */
#fn-modal h3,
.fn-insert-box h3 {
  text-align: center;
  font-size: 1.8em;
  text-transform: uppercase;
}

/* 14 */
#fn-modal h4 {
  font-size: 1.4em;
}

/* 15 */
#fn-modal ol, 
.fn-post-block ol {
  margin: 4px;
  padding-left: 10px;
  list-style-type: none;
}

/* 16 */
#fn-modal a {
  text-decoration: none;
  font-size: 1.2em;
  letter-spacing: 0.4px;
  line-height: 1;
  color: #006597;
  transition: color 0.5s ease;
}

/* 17 */
#fn-modal a:active {
  color: #006597;
}

/* 18 */
#fn-modal a:hover,
.fn-close:hover {
  color: #D46400;
  transition: color 0.5s ease;
}

/* 19 */
#fn-modal li:before {
  font-size: 1.4em;
}

/* 20 */
#fn-modal.show {
  display: block;
}

/* 21 */
#fn-modal:not(.show) {
  display: none;
}

/* 22 */
.fn-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
}

/* 23 */
.fn-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 92%;
  max-width: 600px;
  max-height: 75vh;
  overflow: auto;
  padding: 20px;
  border-radius: 6px;
}

/* 24 */
.fn-close {
  position: absolute;
  right: 10px;
  top: 5px;
  font-size: 22px;
  cursor: pointer;
}

/* Модальное окно бб-кода
-------------------------------------------------------------*/

/* 25 */
.fn-insert-modal {
  position: fixed; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%;
  background: rgba(0,0,0,0.4); display: flex;
  justify-content: center; 
  align-items: center; 
  z-index: 9999;
}

/* 26 */
.fn-insert-box {
  padding: 15px; 
  border-radius: 6px;
  min-width: 280px; 
  max-width: 400px;
}

/* 27 */
.fn-insert-box h3 {
  margin-bottom: 10px;
}

/* 28 */
.fn-insert-box #fn-show-block {
  width: auto;
}

/* 29 */
.fn-insert-box .fn-buttons {
  text-align: right;
}

/* 30 */
.fn-insert-box #fn-word, 
.fn-insert-box #fn-text,
.fn-insert-box textarea {
  display: block;
  width: 97%;
  margin-bottom: 8px;
  margin: 3px 0;
  padding: 3px;
  font-size: 1.4em;
  border: 1px solid #E0E7EF;
}

/* 31 */
.fn-insert-box button {
  padding: 3px 5px;
  border-radius: 4px;
  font-family: "Lucida Grande Bold", "Lucida Grande", "Trebuchet MS", Verdana, sans-serif;
  font-weight: normal;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  border: 1px solid #E0E7EF;
  background: #F0F0F0 url(https://forumstatic.ru/files/0013/49/9f/22436.gif) repeat-x top left;
  color: #006597;
}

/* 31 */
.fn-insert-box button,
.fn-insert-box label {
  font-size: 10px;
}

/* 32 */
.fn-insert-box button:hover {
  background-position: bottom left;
  color: #D46400;
}

/* 33 */
.fn-insert-box, .fn-box {
  background: #fff;
}

/* 34 */
.punbb #pun-main a.fn-ref,
.punbb #pun-main a.fn-ref:hover {
  position: relative;
  display: inline-block;
  font-size: inherit;
  font-weight: 600;
  line-height: 1;
  text-shadow: none;
  color: #445c4d;
  text-decoration: none;
}

/* 35 */
.fn-ref:after {
  background-color: #445c4d; /*задаём цвет линии*/
}

/* 36 */
.fn-ref:after {
  content: "";
  display: block;
  position: absolute;
  left: 0; /*изменить на right:0;, чтобы изменить направление подчёркивания */
  width: 0; /*задаём длинну линии до наведения курсора*/
  height: 0.13em; /*задаём ширину линии*/
  transition: width 0.3s ease-out; /*задаём время анимации*/
}

/* 37 */
.fn-ref:hover:after, 
.fn-ref:focus:after {
  width: 100%;
}

/* Названия
-------------------------------------------------------------*/

/* 38 */
#fn-modal h3:before {
  content: 'Сноски страницы';
}

/* 39 */
#fn-modal h4:before {
  content: 'Пост ';
}

/* Цифры списков
-------------------------------------------------------------*/

/* 40 */
.fn-post-block ol li, .fn-post-group ol li {counter-increment: i;}

/* 41 */
.fn-post-block ol li:before, 
.fn-post-group ol li:before {
  content: counter(i) ".  ";
}