/* Start:/local/templates/skm1c/components/bitrix/breadcrumb/.default/style.css?1788362195585*/
.bx-breadcrumb {
	margin: 10px 0;
}
.bx-breadcrumb i {
	color: #b5bdc2;
	line-height: 13px;
	font-size: 12px;
	vertical-align: middle;
	margin-right: 5px;
}
.bx-breadcrumb .bx-breadcrumb-item {
	float: left;
	margin-bottom: 10px;
	white-space: nowrap;
	line-height: 13px;
	vertical-align: middle;
	margin-right: 10px;
}
.bx-breadcrumb .bx-breadcrumb-item span {
	font-family: "Open Sans", Arial, "Helvetica Neue", Helvetica, sans-serif;
	font-size: 13px;
	white-space: normal;
}
.bx-breadcrumb .bx-breadcrumb-item a {border-bottom: none;}
.bx-breadcrumb .bx-breadcrumb-item a:hover {}

/* End */


/* Start:/local/templates/skm1c/components/bitrix/news/articles/bitrix/news.detail/.default/style.css?1687936590155*/
div.news-detail
{
	word-wrap: break-word;
}
div.news-detail img.detail_picture
{
	float:left;
	margin:0 8px 6px 1px;
}
.news-date-time
{
	color:#486DAA;
}

/* End */


/* Start:/local/templates/skm1c/css/rating.css?17909149794586*/
/* The rating block: the numerals 1-5 in circles, the average, and - once one is chosen - the robot check and the confirm button.
   Styled once for every page that shows it.
   1. THE HIT AREA. A circle is 44px across: most of this site is read on a phone, and five of them with their gaps are 252px,
      so the row never needs to wrap at the narrowest screen.
   2. THE SITE'S OWN BLUE. The ring and the numeral are the navbar's #0f7ba7 (4.76:1 on white, the contrast text needs); the CHOSEN
      numeral is filled with it and its digit turns white (the same 4.76:1). A state never depends on colour alone: it is also the
      filled disc against an outline, and the average and the visitor's own rating are written out beside it.
   3. HIDDEN UNTIL IT CAN WORK. The block carries the hidden attribute in the served page and the script shows it once the endpoint
      has answered. The display rules below therefore must not override it.
   The class names say «star»: the first design drew stars, and the names are the hooks of pages a cache still holds. */
.skm-rating {
  margin: 30px 0 10px;
}
.skm-rating[hidden],
.skm-rating__confirm[hidden] {
  display: none;
}
.skm-rating__title {
  margin: 0 0 8px;
  color: #555555;
}
.skm-rating__stars {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.skm-rating__star {
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 2px solid #0f7ba7;
  border-radius: 50%;
  background: #ffffff;
  color: #0f7ba7;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color 0.15s ease, color 0.15s ease;
}
/* Hover: the tint stays light enough for the blue numeral to keep 4.5:1 (#f4fafc, 4.52:1) and a second ring says «this one». */
.skm-rating__star:hover {
  background: #f4fafc;
  box-shadow: 0 0 0 1px #0f7ba7;
}
.skm-rating__star--on,
.skm-rating__star--on:hover {
  background: #0f7ba7;
  color: #ffffff;
}
.skm-rating__star:disabled {
  cursor: default;
  opacity: 1;
}
.skm-rating__star:disabled:not(.skm-rating__star--on) {
  border-color: #c4c4c4;
  background: #ffffff;
  color: #767676;
}
.skm-rating__star:focus-visible {
  outline: 2px solid #222222;
  outline-offset: 2px;
}
/* THE AVERAGE LINE. Larger than the body text, and its NUMBER set apart: a soft blue badge under the numeral in the site's #0f7ba7
   (4.12:1 on the tint - enough for text this size, 32px bold, which needs 3:1). The count is bold, the rest stays plain. */
.skm-rating__summary {
  margin: 12px 0 8px;
  color: #333333;
  font-size: 18px;
  line-height: 1.5;
}
.skm-rating__avg {
  display: inline-block;
  margin: 0 2px;
  padding: 0 12px;
  border-radius: 10px;
  background: #e3f1f7;
  color: #0f7ba7;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.25;
  vertical-align: middle;
}
.skm-rating__count {
  font-weight: 700;
}
/* THE GAP BEFORE THE VOTES. The whitespace between the two sentences of the summary is the one element js/rating.js wraps, and its width is
   set here, once, for every language: the space itself plus the width of three more spaces (3 x 0.278em, the space of the body font). Word
   spacing belongs to the space it widens, so when the line breaks there it goes with it and the next line starts flush. */
.skm-rating__sep {
  word-spacing: 0.834em;
}
.skm-rating__confirm {
  margin: 8px 0 0;
}
.skm-rating__check {
  margin: 0 0 8px;
  color: #555555;
}
.skm-rating__widget {
  min-height: 65px;
  margin: 0 0 8px;
}
.skm-rating__submit {
  min-height: 44px;
  padding: 11px 18px;
  white-space: normal;
}
.skm-rating__status {
  margin: 8px 0 0;
  min-height: 1.5em;
  font-size: 16px;
}
.skm-rating__status--ok {
  color: #2d682d;
}
.skm-rating__status--error {
  color: #a94442;
}
/* ONE ROW FROM TABLET WIDTH UP. At 768px and wider the numerals and the summary line - «Рейтинг», the average and
   «Голосів» - stand in one row with a 28px gap; the title, the robot check and the status keep the full width above and below.
   Under 768px (a phone) nothing changes: the numerals, then the line under them. The grid sits on the block itself, so the
   markup - and every page a cache still holds - is unchanged. 768 is the site's own phone/tablet line, the one the share row uses. */
@media (min-width: 768px) {
  .skm-rating {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 28px;
    align-items: center;
  }
  .skm-rating__title,
  .skm-rating__confirm,
  .skm-rating__status {
    grid-column: 1 / -1;
  }
  .skm-rating__summary {
    margin: 0;
  }
}

/* End */


/* Start:/local/templates/skm1c/css/share.css?17907462321668*/
/* The share block: one list of buttons, styled once for every page that shows it.
   Each control is a stock default button; these rules add only what it does not give:
   1. THE HIT AREA. A stock button is 34px tall. Most of this site is read on a phone,
      so the control goes to 44px, bought with padding.
   2. THE WRAP. The labels can come to more than the content column of a narrow
      screen, so the row breaks; a flex row with wrap breaks it into whole buttons and
      spaces them apart in both directions, which a margin on the items would not do
      without also indenting the first.
   3. ON A PHONE, ICONS ONLY. Under 768px the label is taken out of the layout but stays
      in the document, so a screen reader still hears it and the button keeps its name.
   Contrast is the default button's own: the #333 label on the #fff fill is 12.63:1. */
.skm-share {
  margin: 30px 0 10px;
}
.skm-share__title {
  margin: 0 0 8px;
  color: #555555;
}
.skm-share__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 0;
  padding-left: 0;
  list-style: none;
}
.skm-share__btn {
  min-height: 44px;
  padding: 11px 14px;
  white-space: normal;
}
/* The Google mark is an inline image of four colours; it takes the size of the text it stands beside. */
.skm-share__gicon {
  width: 1.1em;
  height: 1.1em;
  vertical-align: -0.2em;
}
@media (max-width: 767px) {
  .skm-share__btn {
    min-width: 44px;
    padding: 11px;
  }
  .skm-share__label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

/* End */


/* Start:/local/templates/skm1c/css/see_also.css?17908389102390*/
/* The «See also» block: three framed thumbnails, a short caption under each, under the share row.
   Styled once for every page that shows it.
   1. ONE SIZE FOR EVERY DEVICE. The thumbnail is generated at 200x150 (the height of the /articles/ list squares) and
      shown at exactly that size, framed like the list's: 210px wide with the frame. Three of them and two 24px gaps are
      678px, which fits the narrowest content column of a tablet or a desktop (696px); a phone shows one at its natural
      size, so nothing is stretched past its source.
   2. THREE COLUMNS FROM 768px, ONE UNDER IT. The same line the share row and the rating block use.
   3. THE CAPTION IS A SMALL BOLD HEADING OF AT MOST TWO LINES, cut with an ellipsis; the whole item is one link.
   4. THE FRAME CLASS COMES FROM THE FRAMEWORK. The framework's rules load after this sheet, so the image's own
      rules name the block as well - two classes beat its one. */
.skm-seealso {
  margin: 30px 0 10px;
}
.skm-seealso__title {
  margin: 0 0 8px;
  color: #555555;
}
.skm-seealso__list {
  display: grid;
  grid-template-columns: 210px;
  gap: 20px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 768px) {
  .skm-seealso__list {
    grid-template-columns: repeat(3, 210px);
  }
}
/* On a phone the single column of items stands in the MIDDLE of the content column, each caption centred under its photograph. */
@media (max-width: 767px) {
  .skm-seealso__list {
    justify-content: center;
  }
  .skm-seealso .skm-seealso__caption {
    text-align: center;
  }
}
.skm-seealso .skm-seealso__link {
  display: block;
  width: 210px;
  max-width: 100%;
  color: #333333;
  text-decoration: none;
}
.skm-seealso .skm-seealso__img {
  display: block;
  box-sizing: content-box;
  width: 200px;
  height: 150px;
  max-width: none;
}
.skm-seealso .skm-seealso__caption {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  max-height: 2.7em;
  margin-top: 6px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.skm-seealso .skm-seealso__link:hover .skm-seealso__caption,
.skm-seealso .skm-seealso__link:focus-visible .skm-seealso__caption {
  color: #0f7ba7;
  text-decoration: underline;
}
.skm-seealso .skm-seealso__link:focus-visible {
  outline: 2px solid #222222;
  outline-offset: 2px;
}

/* End */


/* Start:/local/templates/skm1c/css/comments.css?17907536253930*/
/* The comments section and its window. Styled once for every page that shows it.
   1. THE SITE'S OWN COLOURS: the navbar blue #0f7ba7 for accents (4.76:1 on white), the grey
      scale the rating block set (#555 titles, #333 text), the status greens/reds every block
      shares. Buttons are the site's two named classes (.skm-btn-blue) - never a new component.
   2. HIDDEN UNTIL IT CAN WORK. The section carries the hidden attribute in the served page and
      the script shows it once the endpoint has answered; the rules below must not override it.
   3. TEXT, NOT MARKUP. A comment's body is one text node; pre-line turns its newlines into
      lines without letting anything be parsed. */
.skm-comments {
  margin: 30px 0 10px;
}
.skm-comments[hidden],
.skm-comments__none[hidden],
.skm-comment-modal__replying[hidden],
.skm-comment-modal__hint[hidden],
.skm-comment-modal__form[hidden],
.skm-comment-modal__check[hidden] {
  display: none;
}
.skm-comments__title {
  margin: 0 0 14px;
  font-size: 22px;
  color: #333333;
}
.skm-comments__count {
  color: #767676;
  font-weight: 400;
}
.skm-comments__none {
  margin: 0 0 12px;
  color: #555555;
}
/* --- one comment ------------------------------------------------------- */
.skm-comment {
  margin: 0 0 12px;
  padding: 12px 14px;
  border: 1px solid #dfe5ea;
  border-left: 3px solid #0f7ba7;
  border-radius: 6px;
  background: #ffffff;
}
.skm-comment--reply {
  margin: 10px 0 0;
  border-left-color: #9fc6d8;
  background: #f7fafc;
}
.skm-comment__replies {
  margin: 10px 0 0 18px;
}
.skm-comment__head {
  margin: 0 0 6px;
}
.skm-comment__name {
  font-weight: 700;
  color: #333333;
}
.skm-comment__date {
  margin-left: 10px;
  color: #767676;
  font-size: 13px;
}
.skm-comment__body {
  margin: 0;
  color: #333333;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.skm-comment__reply,
.skm-comment-modal__cancel-reply {
  padding: 6px 0 0;
  border: 0;
  background: none;
  color: #0f7ba7;
  font-size: 14px;
  text-decoration: underline;
}
.skm-comment__reply:hover,
.skm-comment-modal__cancel-reply:hover {
  color: #0c6486;
}
/* --- the centred trigger and the shared "show more" --------------------- */
.skm-comments__addwrap {
  margin: 16px 0 0;
  text-align: center;
}
.skm-comments__add {
  min-height: 44px;
  padding: 11px 22px;
  white-space: normal;
}
.skm-comments__more {
  display: block;
  width: 100%;
  margin: 4px 0 12px;
  min-height: 44px;
}
/* --- the window --------------------------------------------------------- */
.skm-comment-modal__rules {
  margin: 0 0 12px;
  color: #555555;
}
.skm-comment-modal__replying {
  margin: 0 0 10px;
  color: #333333;
  font-weight: 700;
}
.skm-comment-modal__label {
  display: block;
  margin: 10px 0 4px;
  font-weight: 700;
  color: #333333;
}
.skm-comment-modal__req {
  color: #a94442;
}
.skm-comment-modal__field,
.skm-comment-modal__text {
  box-sizing: border-box;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #c4c4c4;
  border-radius: 4px;
  font: inherit;
  color: #333333;
}
.skm-comment-modal__field:focus,
.skm-comment-modal__text:focus {
  border-color: #0f7ba7;
  outline: 2px solid #0f7ba7;
  outline-offset: 0;
}
.skm-comment-modal__counter {
  margin: 4px 0 0;
  color: #767676;
  font-size: 13px;
  text-align: right;
}
.skm-comment-modal__hint {
  margin: 8px 0 0;
  color: #8a6100;
}
/* The field no person sees: removed from the layout and from the reading order alike. */
.skm-comment-modal__hp {
  display: none;
}
.skm-comment-modal__check {
  margin: 12px 0 8px;
  color: #555555;
}
.skm-comment-modal__widget {
  min-height: 65px;
  margin: 0 0 8px;
}
.skm-comment-modal__submit {
  min-height: 44px;
  padding: 11px 18px;
  white-space: normal;
}
.skm-comment-modal__status {
  margin: 8px 0 0;
  min-height: 1.5em;
  font-size: 16px;
}
.skm-comment-modal__status--ok {
  color: #2d682d;
}
.skm-comment-modal__status--error {
  color: #a94442;
}

/* End */
/* /local/templates/skm1c/components/bitrix/breadcrumb/.default/style.css?1788362195585 */
/* /local/templates/skm1c/components/bitrix/news/articles/bitrix/news.detail/.default/style.css?1687936590155 */
/* /local/templates/skm1c/css/rating.css?17909149794586 */
/* /local/templates/skm1c/css/share.css?17907462321668 */
/* /local/templates/skm1c/css/see_also.css?17908389102390 */
/* /local/templates/skm1c/css/comments.css?17907536253930 */