@charset "UTF-8";
/* stm25 – extracted minimal styles for #top-bar (Government.ru) */
html, body {
  margin: 0;
  padding: 0;
  background: transparent; }

body {
  overflow-x: hidden; }

/* Utility equivalents used in the saved markup */
.clearfix::after {
  content: "";
  display: table;
  clear: both; }

.fright {
  float: right !important; }

.nobottommargin {
  margin-bottom: 0 !important; }

.p-0 {
  padding: 0 !important; }

.pl-lg-4 {
  padding-left: 1.5rem !important; }

.pr-lg-4 {
  padding-right: 1.5rem !important; }

/* Minimal grid from the legacy markup */
.col_half {
  float: left;
  width: 50%; }

.col_last {
  float: right; }

/* ----------------------------------------------------------------
   Top Bar
----------------------------------------------------------------- */
#top-bar {
  position: relative;
  border-bottom: 1px solid #EEE;
  height: 45px;
  line-height: 44px;
  font-size: 13px; }

#top-bar .col_half {
  width: auto; }

/* Dark theme (the markup has class="dark") */
.dark #top-bar,
#top-bar.dark {
  border-bottom-color: rgba(255, 255, 255, 0.1);
  background-color: #282828; }

/* Top Links */
.top-links {
  position: relative;
  float: left; }

.top-links ul {
  margin: 0;
  padding: 0;
  list-style: none; }

.top-links ul li {
  float: left;
  position: relative;
  height: 44px;
  border-left: 1px solid #EEE; }

.top-links ul li:first-child {
  border-left: 0 !important; }

.dark .top-links ul li {
  border-left-color: rgba(255, 255, 255, 0.1); }

.dark .top-links ul li.support-of-citizens-desctop {
  border-left: none; }

.top-links li > a {
  display: block;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  height: 44px;
  color: #666;
  text-decoration: none; }

.dark .top-links li > a {
  color: #AAA; }

.top-links li:hover {
  background-color: #EEE; }

.dark .top-links li:hover {
  background-color: #333;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2); }

/* Top Social */
#top-social,
#top-social ul {
  margin: 0;
  padding: 0;
  list-style: none; }

#top-social li,
#top-social li a,
#top-social li .ts-icon,
#top-social li .max-icon,
#top-social li .ts-text {
  display: block;
  position: relative;
  float: left;
  width: auto;
  overflow: hidden;
  height: 45px;
  line-height: 44px; }

#top-social li {
  border-left: 1px solid #EEE; }

#top-social li:first-child {
  border-left: 0 !important; }

.dark #top-social li {
  border-left: 1px solid rgba(255, 255, 255, 0.1); }

#top-social li a {
  float: none;
  width: 40px;
  font-weight: bold;
  color: #666;
  text-decoration: none;
  transition: color .3s ease-in-out, background-color .3s ease-in-out, width .3s ease-in-out; }

.dark #top-social li a {
  color: #BBB; }

#top-social li a:hover {
  color: #FFF !important;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2); }

#top-social li .ts-icon,
#top-social li .max-icon {
  width: 40px;
  text-align: center;
  font-size: 14px; }

/* The saved markup uses a grid wrapper */
#top-social-wrapper {
  width: 0 !important;
  display: grid;
  justify-content: end; }

#top-social ul {
  display: grid;
  grid-auto-flow: column;
  background-color: #325c92;
  grid-auto-columns: max-content; }

#top-social li {
  min-width: 40px;
  width: fit-content !important; }

/* Ads blocks (in the left menu) */
.HM-GOV-Ad-Block {
  line-height: 1em;
  border-right: 1px solid #e0e0e0;
  border-bottom: 0;
  min-height: 45px;
  padding: 0 10px; }

#top-social li .dzen-icon {
  display: block;
  width: 40px;
  height: 45px;
  background-image: url("/images/dzen-header.svg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 16px 16px; }

.HM-GOV-Ad-Block:hover {
  background-color: white;
  opacity: 0.8; }

@media (max-width: 1398px) {
  .HM_ad_text {
    font-size: 0.7em; } }
/* Small screens: keep the bar usable */
@media (max-width: 768px) {
  #top-bar {
    height: auto;
    line-height: 1.2; }

  .col_half, .col_last {
    float: none !important;
    width: 100% !important; }

  #top-social-wrapper {
    width: auto !important;
    justify-content: start; } }
/* Hide social block for narrow-but-not-mobile widths (as in the original CSS) */
@media (min-width: 1024px) and (max-width: 1434px) {
  #top-social {
    display: none; } }

/* ----------------------------------------------------------------
   page-header__up (донор krd.ru) — пока только index.php
----------------------------------------------------------------- */
.page-header__up-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 0;
    border-bottom: 1px solid #d9d9de;
}
@media (max-width: 1079px) {
    .page-header__up-wrapper { display: none; } /* на мобильных скрыто, там бургер-меню */
}
.page-header__up-wrapper .link-over.personal-area {
    margin-bottom: 0;
}
.page-header__up-wrapper a {
    text-decoration: none;
}
.page-header__up-wrapper .social,
.page-header__up-wrapper .social li {
    list-style: none;
    margin: 0;
    padding: 0;
}
/* вернуть отступ между иконками соцсетей, перебитый более специфичным
   правилом сброса маркеров списка выше */
.page-header__up-wrapper .social li + li {
    margin-left: 32px;
}
@media (min-width: 1080px) {
    .page-header__up-wrapper .social li + li {
        margin-left: 24px;
    }
}
.page-header__wrapper-left {
    display: flex;
    align-items: center;
}
.page-header__wrapper-right {
    display: flex;
    align-items: center;
}
.page-header .link-over {
    margin-right: 30px;
}
.page-header .link-over:last-child {
    margin-right: 0;
}
/* было .page-header .link-over — такого класса-обёртки в разметке нет,
   реальная обёртка называется .page-header__up */
.page-header__up .link-over {
    margin-right: 30px;
}
.page-header__up .link-over:last-child {
    margin-right: 0;
}
.link-over {
    display: flex;
    align-items: center;
}
.link-over svg {
    width: 16px;
    height: 16px;
    stroke: #a7a8ab;
    flex-shrink: 0;
    margin-right: 8px;
    stroke-width: 2px;
    transition: all .3s ease-in-out;
}
.link-over span {
    font-size: 14px;
    line-height: 20px;
    color: #0050b2;
    transition: all .3s ease-in-out;
}
.link-over:hover span {
    color: #003b83;
}
.link-over:hover svg {
    stroke: #003b83;
}
.social {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.social li + li {
    margin-left: 32px;
}
.link-over .social .svg {
    display: block;
    width: 24px;
    height: 24px;
    background: #a7a8ab;
    mask-size: 24px 24px;
    mask-repeat: no-repeat;
    mask-position: 50% 50%;
    -webkit-mask-size: 24px 24px;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: 50% 50%;
    transition: all .3s ease-in-out;
}
.link-over .social a:hover .svg {
    background: #003B83;
}
@media (min-width: 1080px) {
    .social li + li { margin-left: 24px; }
    .link-over .social .svg { width: 16px; height: 16px; background: #a7a8ab; mask-size: 16px 16px; -webkit-mask-size: 16px 16px; }
}

/* Bootstrap Icons вместо донорского sprite.svg (в проекте своего спрайта нет,
   но bootstrap-icons уже подключены на всех страницах через CDN) */
.link-over > i {
    width: 16px;
    font-size: 16px;
    line-height: 1;
    color: #a7a8ab;
    flex-shrink: 0;
    margin-right: 8px;
    transition: all .3s ease-in-out;
}
.link-over:hover > i {
    color: #003b83;
}
/* Одноклассники: в проекте нет отдельной моно-иконки ОК (как и в старом
   #top-social, где для неё тоже использовался bi-people) — тот же приём.
   Проверено в DevTools: правило побеждает в каскаде корректно (box 16/24px
   совпадает с остальными), но сам глиф bi-people-fill визуально мельче —
   у него, в отличие от логотипов VK/Rutube/Дзен, залитых в размер полностью,
   есть встроенные отступы внутри своего EM-квадрата. Компенсируем
   увеличенным font-size (~1.3x), а не width — иначе глиф просто обрежется. */
.page-header__up .link-over .social a i.bi-people-fill {
    display: block;
    width: auto;
    font-size: 32px;
    line-height: 1;
    color: #a7a8ab;
    text-align: center;
    transition: all .3s ease-in-out;
}
.page-header__up .link-over .social a:hover i.bi-people-fill {
    color: #003B83;
}
@media (min-width: 1080px) {
    .page-header__up .link-over .social a i.bi-people-fill { width: auto; font-size: 21px; }
}

/* ----------------------------------------------------------------
   Панель поиска — открывается сверху страницы (как .special-settings
   у версии для слабовидящих), не модалка по центру экрана
----------------------------------------------------------------- */
.stm-search-panel {
    position: relative;
    z-index: 1300;
    background: #f5f5f7;
    border-bottom: 1px solid #d9d9de;
}
.stm-search-panel[hidden] {
    display: none;
}
.stm-search-panel__form {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 0;
}
.stm-search-panel__input {
    flex: 1 1 auto;
    padding: 10px 14px;
    border: 1px solid #d9d9de;
    border-radius: .25rem;
    font-size: 16px;
    color: #000;
    background: #fff;
}
.stm-search-panel__close {
    border: 0;
    background: transparent;
    font-size: 28px;
    line-height: 1;
    color: #666;
    cursor: pointer;
    padding: 0 4px;
}
.stm-search-panel__close:hover {
    color: #003b83;
}
