body.sb-left .app-navbar {
  left: 250px;
}
body.sb-left .app-main {
  margin-left: 250px;
}
/* === Unify selection everywhere: blue bg + white text === */
::selection {
  background: #1b55e2 !important;
  color: #fff !important;
}

/* force nested elements (strong/em/a/etc) to inherit selection color */
*::selection {
  background: #1b55e2 !important;
  color: #fff !important;
}

/* extra safety for common inline tags that often keep their own color */
a::selection,
strong::selection,
b::selection,
em::selection,
i::selection,
code::selection,
pre::selection,
span::selection,
mark::selection {
  background: #1b55e2 !important;
  color: #fff !important;
}

.app-aside.left {
  width: 250px;
}
.bg-success.light {
  box-shadow: 0 0 9px 1px #8dbf42;
}
.bg-danger.light {
  box-shadow: 0 0 9px 1px #e7515a;
}
video {
  width: 100%;
  height: auto;
  max-height: 100%;
}
div.dataTables_wrapper div.dataTables_filter input {
  width: 300px;
}
.aside-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px 15px;
  background-color: #edf0f5;
  text-align: center;
}
.aside-footer .hamburger-inner {
  background-color: #ccc;
}
.aside-footer .hamburger-inner::before,
.aside-footer .hamburger-inner::after {
  background-color: #ccc;
}
.main-content .gist .markdown-body .highlight pre {
  font-size: 16px;
}
.main-content .gist .markdown-body pre {
  font-size: 16px;
}
.editor-toolbar a.fa-columns,
.editor-toolbar a.fa-arrows-alt {
  display: none;
}
pre {
  margin: 0 10px;
  padding: 10px 15px;
  background-color: #fafafa;
  border-radius: 5px;
}
pre .log-date {
  display: inline-block;
  margin: 5px 0 10px;
  padding: 10px;
  font-size: 14px;
  font-weight: 600;
  background-color: #e6eaee;
  border-radius: 5px;
}
.form-group .sub-label {
  font-size: 12px;
  color: #383838;
  letter-spacing: 0.7px;
}
/*# sourceMappingURL=custom.css.map */

.tg-img-status{
  max-height: 20px;
}

.knowlage-item-wrapper a{
  color: #008a44;
  border-bottom: 1px dotted;
}

.knowlage-item-wrapper a:hover{
  color: #007bff;
  border-bottom: 1px dotted;
}

.knowlage-item-wrapper p{
  line-height: 22px;
}
.knowlage-item-wrapper em
{
  background: #ced2db4a;
  padding: 3px 5px!important;
  border-radius: 5px!important;
}

.knowlage-item-wrapper pre{
  padding: 5px!important;
  border-radius: 5px!important;
  margin: 7px 0 !important;
  line-height: 24px!important;
}

/* KB: базовий текст */
.knowledge-base,
.knowledge-base p,
.knowledge-base span,
.knowledge-base li {
    color: #383838;
}


/* === Unify selection color in editor (CodeMirror/SimpleMDE) === */
.CodeMirror ::selection {
  background: #1b55e2 !important;
  color: #fff !important;
}

/* CodeMirror selection blocks (most important) */
.CodeMirror-selected,
.CodeMirror-line::selection,
.CodeMirror-line > span::selection,
.CodeMirror-line > span > span::selection {
  background: #1b55e2 !important;
}

/* Some themes use this for selected text span */
.CodeMirror-selectedtext {
  background: #1b55e2 !important;
  color: #fff !important;
}

/* KB article: force readable text color (lists included) */
.knowlage-item-wrapper,
.knowlage-item-wrapper p,
.knowlage-item-wrapper ul,
.knowlage-item-wrapper ol,
.knowlage-item-wrapper li {
  color: #383838 !important;
}

/* bullets / numbers color (the dot/number itself) */
.knowlage-item-wrapper li::marker {
  color: #383838 !important;
}

/* TЗ-9: Article text — color, font-size, line-height */
.knowlage-item-wrapper {
  color: #383838 !important;
  font-size: 1rem !important;
  line-height: 1.7rem !important;
}

/* Ensure common text nodes inherit correctly */
.knowlage-item-wrapper p,
.knowlage-item-wrapper li,
.knowlage-item-wrapper blockquote,
.knowlage-item-wrapper pre,
.knowlage-item-wrapper code {
  color: #383838 !important;
  font-size: 1rem !important;
  line-height: 1.7rem !important;
}

/* Жирний текст, позначений у редакторі */
.knowlage-item-wrapper strong,
.knowlage-item-wrapper b {
  font-weight: 700;
}

/* Горизонтальна лінія у готовій статті */
.knowlage-item-wrapper hr {
  border: 0;
  border-top: 3px solid #e2ebe4;
}

/* Горизонтальна лінія всередині редактора Toast UI */
#kb-editor .toastui-editor-contents hr {
  border: 0;
  border-top: 3px solid #e2ebe4;
}

/* Відступ над заголовками у готовій статті */
.knowlage-item-wrapper h1,
.knowlage-item-wrapper h2,
.knowlage-item-wrapper h3,
.knowlage-item-wrapper h4,
.knowlage-item-wrapper h5,
.knowlage-item-wrapper h6 {
  margin-top: 2.5rem;
}

/* Відступ над заголовками всередині редактора Toast UI */
#kb-editor .toastui-editor-contents h1,
#kb-editor .toastui-editor-contents h2,
#kb-editor .toastui-editor-contents h3,
#kb-editor .toastui-editor-contents h4,
#kb-editor .toastui-editor-contents h5,
#kb-editor .toastui-editor-contents h6 {
  margin-top: 2.5rem;
}

/* Межа навколо зображень у готовій статті */
.knowlage-item-wrapper img {
  border: 2px solid #dee1e4;
  box-sizing: border-box;
}

/* Межа навколо зображень всередині редактора Toast UI */
#kb-editor .toastui-editor-contents img {
  border: 2px solid #dee1e4;
  box-sizing: border-box;
}

/* Lists marker (dots/numbers) */
.knowlage-item-wrapper li::marker {
  color: #383838 !important;
}

* TЗ-10: headings in article */
.knowlage-item-wrapper h1,
.knowlage-item-wrapper h2,
.knowlage-item-wrapper h3,
.knowlage-item-wrapper h4,
.knowlage-item-wrapper h5,
.knowlage-item-wrapper h6 {
  color: #383838 !important;
}

/* TЗ-11: links in article */
.knowlage-item-wrapper a {
  color: #383838 !important;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
}

.knowlage-item-wrapper a:hover {
  color: #008a44 !important;
}

/* TЗ-12: tags/chips in article */
.knowlage-item-wrapper .badge-chip,
.knowlage-item-wrapper .badge,
.knowlage-item-wrapper .tag {
  color: #008a44 !important;
}

.knowlage-item-wrapper .badge-chip:hover,
.knowlage-item-wrapper .badge:hover,
.knowlage-item-wrapper .tag:hover {
  background: #008a442b !important;
  color: #008a44 !important;
}

/* Sidebar menu: hover background -> green light */
#sidebar ul.menu-categories li.menu > a.dropdown-toggle:hover,
#sidebar ul.menu-categories li.menu > a.dropdown-toggle:focus {
  background: #008a442b !important;
}

/* Top-right user dropdown: hover/active background -> green light */
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus,
.dropdown-menu .dropdown-item.active,
.dropdown-menu .dropdown-item:active {
  background: #008a442b !important;
}

/* Profile: "About" text should keep line breaks like in other block */
.user-profile .bio .widget-content-area .p-2.pb-4,
.user-profile .bio .widget-content-area .p-2.pb-4 p {
  white-space: pre-line !important;
}

/* === Sidebar icons: outline only (no fill), color #f9584f === */

#sidebar ul.menu-categories > li.menu > a.dropdown-toggle:hover,
#sidebar ul.menu-categories > li.menu > a.dropdown-toggle:focus,
#sidebar ul.menu-categories > li.menu > a.dropdown-toggle[aria-expanded="true"],
#sidebar ul.menu-categories > li.menu > a.dropdown-toggle[data-active="true"],
#sidebar ul.menu-categories > li.menu.active > a.dropdown-toggle {
  color: #f9584f !important;
}

/* прибираємо заливку і фарбуємо тільки stroke */
#sidebar ul.menu-categories > li.menu > a.dropdown-toggle:hover svg,
#sidebar ul.menu-categories > li.menu > a.dropdown-toggle[aria-expanded="true"] svg,
#sidebar ul.menu-categories > li.menu > a.dropdown-toggle[data-active="true"] svg,
#sidebar ul.menu-categories > li.menu.active > a.dropdown-toggle svg {
  fill: none !important;              /* ключове: НЕ заливати */
  color: #f9584f !important;
}

/* надійно для всіх елементів всередині svg */
#sidebar ul.menu-categories > li.menu > a.dropdown-toggle:hover svg *,
#sidebar ul.menu-categories > li.menu > a.dropdown-toggle[aria-expanded="true"] svg *,
#sidebar ul.menu-categories > li.menu > a.dropdown-toggle[data-active="true"] svg *,
#sidebar ul.menu-categories > li.menu.active > a.dropdown-toggle svg * {
  fill: none !important;              /* прибрати заливку у path/rect/circle */
  stroke: #f9584f !important;         /* контур */
  stroke-width: 2px;                  /* як у feather, можна прибрати якщо зайве */
}

/* one underline only */
.knowlage-item-wrapper a{
  color: #383838 !important;
  text-decoration: underline !important;
  text-decoration-style: dotted !important;
  text-underline-offset: 2px;
  border-bottom: none !important;
}
/* кнопка коллеги*/
.navbar .nav-item.dropdown.message-dropdown > a.nav-link.dropdown-toggle {
  display: none !important;
}

/* PROFILE: icons should NOT change color on hover */
.user-profile .user-info-list .contacts-block__item svg.feather,
.user-profile .user-info-list .contacts-block__item svg.feather * {
  stroke: #00944f !important;   /* базовий зелений як у темі */
  fill: none !important;
}

/* override any hover rules that make them blue */
.user-profile .user-info-list .contacts-block__item:hover svg.feather,
.user-profile .user-info-list .contacts-block__item:hover svg.feather * {
  stroke: #00944f !important;
  fill: none !important;
}
#load_screen .spinner-grow {
  color: #008a44 !important;
}
/* KB: single green divider always (no double lines) */
body[data-module="knowledge-base"][data-page="view"] .kb-divider{
  border-top: 1px solid #008a44;
  margin: 10px 0 18px;
}

/* If older rules were adding extra lines, neutralize them */
body[data-module="knowledge-base"][data-page="view"] .tags{
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
body[data-module="knowledge-base"][data-page="view"] .breadcrumb-five{
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}


/* Breadcrumbs (хлібні крихти) */
.breadcrumb-five .breadcrumb li a {
  color: #008a44 !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* Hover/active трохи виразніше */
.breadcrumb-five .breadcrumb li a:hover,
.breadcrumb-five .breadcrumb li a:focus {
  color: #006f36 !important;
  text-decoration-thickness: 2px;
}


/* Edit icon (pencil) hover -> green */
a.edit-main{
  color: inherit; /* щоб не ламало поточний вигляд */
}

a.edit-main:hover{
  color: #008a44 !important;
}

a.edit-main svg{
  stroke: currentColor; /* гарантуємо, що SVG бере колір з color */
}

.badge-chip .author-initials{
  width: 50px;
  height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #cfd6dd;
  color: #1a1a1a;
  font-weight: 700;
  font-size: 18px;
  border-radius: 10px; /* якщо хочеш круг — 50% */
  margin-right: 10px;
  line-height: 1;
}

.searchable-container .searchable-items.list .items .user-profile img{
  object-fit: contain !important;
  object-position: center !important;
  background: #f2f3f5 !important;
}
/* KB: ховати DataTables-пошук тільки на сторінці списку бази знань */
.kb-main-page div.dataTables_wrapper div.dataTables_filter {
  display: none !important;
}

/* KB: картинки не ширші за блок з текстом */
.knowlage-item-wrapper img,
.toastui-editor-contents img {
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
  margin: 40px auto !important;
}

/* KB: великий пошук (інпут + кнопка) */
.kb-search-group .kb-search-input {
  height: 40px !important;                 /* = висота як у кнопки */
  line-height: 40px !important;            /* вертикальне центрування тексту */
  padding: 0 14px !important;
  border-radius: 5px 5px 5px 5px !important;   /* зліва округлення */
  box-shadow: 0 6px 18px rgba(0,0,0,.08) !important;
  border: 1px solid rgba(0,0,0,.08) !important;
}

.kb-search-group .kb-search-btn {
  height: 40px !important;
  line-height: 44px !important;
  padding: 0 18px !important;
  border-radius: 5px 5px 5px 5px !important;   /* справа округлення */
  background: #008a44 !important;
  border-color: #008a44 !important;
  color: #fff !important;
}

.kb-search-group .kb-search-btn:hover,
.kb-search-group .kb-search-btn:focus {
  background: #00783b !important;
  border-color: #00783b !important;
  color: #fff !important;
}

/* KB: відступ між кнопками "Шукати" і "Скинути" */
.kb-search-group .kb-search-btn + .kb-search-btn {
  margin-left: 5px !important;
}

/* KB: відступ між інпутом і блоком кнопок */
.kb-search-group .input-group-append {
  margin-left: 5px !important;
}

/* KB: ідеальне вертикальне центрування тексту в кнопках пошуку */
.kb-search-group .kb-search-btn{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  height: 40px !important;
  line-height: 1 !important;   /* важливо */
  padding: 0 18px !important;  /* без вертикального паддінга */
}

/* KB: кнопка "Скинути" (червона) */
.kb-search-group .kb-reset-btn{
  background: #f9584f !important;
  border-color: #f9584f !important;
  color: #fff !important;
}

.kb-search-group .kb-reset-btn:hover,
.kb-search-group .kb-reset-btn:focus{
  background: #e44b43 !important;
  border-color: #e44b43 !important;
  color: #fff !important;
}

/* KB: назви статей в списку — 14px */
#zero-config tbody td {
  font-size: 14px !important;
}

/* KB: ширина текстового контенту статті */
.knowlage-item-wrapper{
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

/* KB: Lightbox для картинок */
#kb-img-overlay{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}

#kb-img-overlay.is-open{
  display: block;
}

#kb-img-overlay .kb-img-overlay-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.85);
}

#kb-img-overlay .kb-img-overlay-img{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 96vw;
  max-height: 92vh;
  width: auto;
  height: auto;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  cursor: zoom-out;
}

#kb-img-overlay .kb-img-overlay-close{
  position: absolute;
  top: 14px;
  right: 18px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 10px;
  background: rgba(255,255,255,.12);
  color: #fff;
  font-size: 28px;
  line-height: 44px;
  cursor: pointer;
}

.kb-img-lock{
  overflow: hidden;
}

/* курсор для картинок у статтях — щоб було зрозуміло, що клікабельно */
.knowlage-item-wrapper img{
  cursor: zoom-in;
}

/* Відступи для контенту статті */
.knowlage-item-wrapper img,
.knowlage-item-wrapper table,
.knowlage-item-wrapper blockquote {
  margin-top: 20px;
  margin-bottom: 20px;
}

.knowlage-item-wrapper table {
  width: 100%;
  border-collapse: collapse;
}

.knowlage-item-wrapper blockquote {
  padding: 15px 20px;
  background: #f8f9fa;
  border-left: 4px solid #4361ee;
  border-radius: 6px;
}

/* Таблиці в статтях БЗ — зробити "карткою" */
.knowlage-item-wrapper table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 20px 0;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 10px;
  overflow: hidden; /* щоб скруглення працювало */
  background: #fff;
}

/* Клітинки */
.knowlage-item-wrapper th,
.knowlage-item-wrapper td{
  padding: 12px 14px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  vertical-align: top;
}

/* Останній рядок без нижньої лінії */
.knowlage-item-wrapper tr:last-child td,
.knowlage-item-wrapper tr:last-child th{
  border-bottom: 0;
}

/* Шапка (якщо є thead/th) */
.knowlage-item-wrapper thead th,
.knowlage-item-wrapper th{
  font-weight: 600;
  background: rgba(0,0,0,.03);
}

/* Шапка таблиці в статтях БЗ */
.knowlage-item-wrapper table thead th{
  background: #008a44 !important;
  color: #ffffff;        /* щоб текст був читабельний */
  font-weight: 600;
}

.knowlage-item-wrapper blockquote{
  background: #e2ebe4;
  padding: 10px 20px;
  border-left: 4px solid #008a44;
  border-radius: 6px;     /* можеш лишити або прибрати */
  margin: 20px 0;         /* якщо вже є окремо margin-top/bottom — можна не дублювати */
}

/* Хмара тегів у базі знань */
#kbTagsCollapse .outline-badge-success {
  color: #008a44 !important;
  border: 1px solid #008a44 !important;
  background-color: transparent !important;
}

#kbTagsCollapse .outline-badge-success:hover,
#kbTagsCollapse .outline-badge-success:focus {
  color: #ffffff !important;
  background-color: #008a44 !important;
  border-color: #008a44 !important;
  text-decoration: none !important;
}

#kbTagsCollapse .badge-success {
  color: #ffffff !important;
  background-color: #008a44 !important;
  border: 1px solid #008a44 !important;
}

#kbTagsCollapse .badge-success:hover,
#kbTagsCollapse .badge-success:focus {
  color: #ffffff !important;
  background-color: #00733a !important;
  border-color: #00733a !important;
  text-decoration: none !important;
}

.kb-tags-toggle {
  color: #008a44 !important;
  border: 1px solid #008a44 !important;
  background-color: transparent !important;
}

.kb-tags-toggle:hover,
.kb-tags-toggle:focus,
.kb-tags-toggle[aria-expanded="true"] {
  color: #ffffff !important;
  background-color: #008a44 !important;
  border-color: #008a44 !important;
  text-decoration: none !important;
}
.kb-tags-toggle {
  color: #ffffff !important;
  background-color: #008a44 !important;
  border: 1px solid #008a44 !important;
  text-decoration: none !important;
}

.kb-tags-toggle:hover,
.kb-tags-toggle:focus,
.kb-tags-toggle:active,
.kb-tags-toggle[aria-expanded="true"] {
  color: #ffffff !important;
  background-color: #008a44 !important;
  border-color: #008a44 !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

.kb-tag-cloud-item {
  font-size: 14px !important;
  padding: 8px 10px !important;
}

/* Колеги: стабільне вирівнювання колонок (ім'я / пошта / день народження) */
.searchable-container .searchable-items.list .items .item-content {
  gap: 16px;
}

.searchable-container .searchable-items.list .items .user-profile {
  flex: 0 0 36%;
  min-width: 0;
  align-items: center;
}

.searchable-container .searchable-items.list .items .user-email {
  flex: 0 0 30%;
  min-width: 220px;
  text-align: left;
}

.searchable-container .searchable-items.list .items .user-email .usr-email-addr {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.searchable-container .searchable-items.list .items .user-location {
  flex: 0 0 28%;
  min-width: 170px;
  text-align: left;
}

@media (max-width: 991px) {
  .searchable-container .searchable-items.list .items .item-content {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .searchable-container .searchable-items.list .items .user-profile,
  .searchable-container .searchable-items.list .items .user-email,
  .searchable-container .searchable-items.list .items .user-location {
    flex: 1 1 100%;
    min-width: 0;
  }
}

/* =========================================================
   Sidebar: ширше меню та перенесення довгих назв категорій
   ========================================================= */

/*
 * Розширюємо бокове меню тільки на широких екранах.
 *
 * 1200–1510 px: ширина 272 px
 * 1600 px: приблизно 288 px
 * 1667 px і більше: максимум 300 px
 *
 * На планшетах і невеликих ноутбуках зберігається штатна ширина.
 */
@media (min-width: 1200px) {
  .sidebar-wrapper {
    width: clamp(272px, 18vw, 300px);
  }

  #content {
    margin-left: clamp(272px, 18vw, 300px);
  }
}

/*
 * Перенесення довгих назв у звичайних розділах меню:
 * Послуги, Сервіси, Сайти, Налаштування тощо.
 *
 * Базу знань виключаємо, бо вона має власну багаторівневу структуру.
 */
#sidebar ul.menu-categories ul.submenu:not(#knowledge-base) > li {
  height: auto;
  white-space: normal;
}

#sidebar ul.menu-categories ul.submenu:not(#knowledge-base) > li > a {
  height: auto;
  min-height: 38px;

  white-space: normal;
  overflow: hidden;
  text-overflow: clip;

  overflow-wrap: anywhere;
  word-break: normal;

  line-height: 1.35;
  box-sizing: border-box;
  align-items: flex-start;
}

#sidebar ul.menu-categories ul.submenu:not(#knowledge-base) > li > a b,
#sidebar ul.menu-categories ul.submenu:not(#knowledge-base) > li > a span {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}

/*
 * База знань: дозволяємо перенесення тексту,
 * але не змінюємо її вкладеність, відступи та маркери.
 */
#sidebar #knowledge-base li {
  height: auto;
}

#sidebar #knowledge-base li > a {
  height: auto;

  white-space: normal;
  overflow: hidden;
  text-overflow: clip;

  overflow-wrap: anywhere;
  word-break: normal;
}

/*
 * Перенесення назв верхнього рівня меню, якщо колись
 * з'явиться довга назва самого розділу.
 */
#sidebar ul.menu-categories li.menu > .dropdown-toggle {
  height: auto;
}

#sidebar ul.menu-categories li.menu > .dropdown-toggle > div:first-child {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  align-items: center;

  overflow: visible;
  white-space: normal;
}

#sidebar ul.menu-categories li.menu > .dropdown-toggle > div:first-child span {
  white-space: normal;
  overflow: visible;
  overflow-wrap: anywhere;
  word-break: normal;
  line-height: 1.35;
    margin-bottom: -2px;
}

#sidebar ul.menu-categories li.menu > .dropdown-toggle > div:first-child svg {
  flex: 0 0 auto;
  margin-top: 1px;
}

#sidebar ul.menu-categories li.menu > .dropdown-toggle > div:last-child {
  flex: 0 0 auto;
}
/* =========================================================
   KB: позначки рівня доступу
   ========================================================= */

.kb-access-badge,
.kb-access-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  box-sizing: border-box;
}

/* Повна позначка біля автора та дати у статті */
.kb-access-badge {
  min-height: 32px;
  max-width: 100%;
  margin-left: 18px;
  padding: 5px 10px;
  gap: 6px;

  border-radius: 6px;

  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  white-space: normal;
  vertical-align: middle;

  cursor: help;
}

.kb-access-badge-icon {
  flex: 0 0 auto;
  font-size: 15px;
  line-height: 1;
}

/* Вузька колонка у списку статей */
#zero-config th.kb-access-col,
#zero-config td.kb-access-col {
  width: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;

  padding-left: 6px;
  padding-right: 6px;

  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}

/* Компактний значок у таблиці */
.kb-access-icon {
  width: 30px;
  height: 30px;

  border-radius: 6px;

  font-size: 16px;
  line-height: 1;

  cursor: help;
}

/* Public */
.kb-access-public {
  color: #008a44;
  background: #eef8f2;
  border-color: #b9dec8;
}

/* Internal */
.kb-access-internal {
  color: #8a6500;
  background: #fff7df;
  border-color: #eed38a;
}

/* Restricted */
.kb-access-restricted {
  color: #d84a42;
  background: #fff0ef;
  border-color: #efb7b3;
}

/* Фокус під час навігації клавіатурою */
.kb-access-badge:focus,
.kb-access-icon:focus {
  outline: 2px solid rgba(0, 138, 68, 0.25);
  outline-offset: 2px;
}

/* На мобільному позначка може перейти під дату */
@media (max-width: 575.98px) {
  .kb-access-badge {
    margin-top: 8px;
    margin-left: 8px;
  }
}