/* var.19 grafo74 — reliable article controls, aligned paper widths, unified footer green */
:root {
  --grafo-unified-green: #0d5c63;
  --grafo-unified-green-hover: #094950;
  --grafo-unified-green-active: #073c42;
  --grafo-paper-max-width: 1120px;
  --grafo-paper-bg: #f4faff;
  --grafo-paper-edge: rgba(128, 174, 201, .34);
}

/* One green for every actual button/control. */
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
.main-block__button,
.item-service__button,
.io_button,
.btn_open,
.btn_close,
.button,
.btn,
.viewer-controls button,
.viewer-toolbar button,
.controls button,
[data-pro-toggle],
[role="button"].button,
[role="button"].btn {
  background: var(--grafo-unified-green) !important;
  background-color: var(--grafo-unified-green) !important;
  background-image: none !important;
  border-color: var(--grafo-unified-green) !important;
  color: #fff !important;
}
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
.main-block__button:hover,
.item-service__button:hover,
.io_button:hover,
.button:hover,
.btn:hover,
.viewer-controls button:hover,
.viewer-toolbar button:hover,
.controls button:hover,
[data-pro-toggle]:hover {
  background: var(--grafo-unified-green-hover) !important;
  border-color: var(--grafo-unified-green-hover) !important;
  color: #fff !important;
}
button:active,
.io_button:active,
.button:active,
.btn:active {
  background: var(--grafo-unified-green-active) !important;
}

/* One horizontal grid for the initial article, collapsed and expanded pages. */
.article-paper-section > .Rules__container {
  box-sizing: border-box !important;
  width: min(calc(100% - 32px), var(--grafo-paper-max-width)) !important;
  max-width: var(--grafo-paper-max-width) !important;
  margin-inline: auto !important;
  padding-inline: 0 !important;
}
.article-paper-section > .Rules__container > .Rules__body,
.article-paper-section .text_hide_wrap,
.article-paper-section .io_item,
.article-paper-section .io_item_wrap {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-inline: 0 !important;
}
.article-paper-section > .Rules__container > .Rules__body > .items__item:first-child,
.article-paper-section .io_item_wrap > .item_text {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 24px 0 !important;
  padding: clamp(34px, 6vw, 76px)
           clamp(24px, 6vw, 76px)
           clamp(34px, 6vw, 76px)
           clamp(86px, 12vw, 152px) !important;
  overflow: hidden !important;
  border: 1px solid var(--grafo-paper-edge) !important;
  border-radius: 0 !important;
  background: radial-gradient(ellipse at 52% 43%, #fff 0%, #f8fcff 56%, #e7f4fb 100%) !important;
  box-shadow:
    0 24px 44px -25px rgba(31, 57, 72, .24),
    0 8px 20px -15px rgba(31, 57, 72, .30),
    inset -18px -12px 34px rgba(115, 177, 214, .10) !important;
}
.article-paper-section > .Rules__container > .Rules__body > .items__item:first-child::after,
.article-paper-section .io_item_wrap > .item_text::after {
  display: none !important;
  content: none !important;
}
.article-paper-section > .Rules__container > .Rules__body > .items__item:first-child::before,
.article-paper-section .io_item_wrap > .item_text::before {
  content: "" !important;
  position: absolute !important;
  z-index: 7 !important;
  top: 34px !important;
  bottom: 34px !important;
  left: clamp(22px, 3.4vw, 42px) !important;
  width: 20px !important;
  aspect-ratio: auto !important;
  pointer-events: none !important;
  background-image: radial-gradient(circle 8px at 10px 10px,
    rgba(104, 113, 119, .78) 0 5px,
    rgba(190, 199, 205, .72) 5.5px 7px,
    rgba(255, 255, 255, .98) 7.5px 8.5px,
    transparent 9px) !important;
  background-size: 20px clamp(92px, 11vw, 132px) !important;
  background-repeat: repeat-y !important;
  filter: drop-shadow(1px 2px 2px rgba(33, 47, 56, .20)) !important;
}
.article-paper-section > .Rules__container > .Rules__body > .items__item:first-child,
.article-paper-section .io_item_wrap > .item_text {
  position: relative !important;
  isolation: isolate !important;
}
.article-paper-section .io_item_wrap > .item_text > *,
.article-paper-section > .Rules__container > .Rules__body > .items__item:first-child > * {
  position: relative;
  z-index: 3;
}

/* Reliable collapsed/expanded state. */
.article-paper-section .io_item_wrap {
  position: relative !important;
  overflow: hidden !important;
  transition: max-height .35s ease !important;
}
.article-paper-section .io_item:not(.open) > .io_item_wrap {
  max-height: 190px !important;
}
.article-paper-section .io_item.open > .io_item_wrap {
  max-height: none !important;
  overflow: visible !important;
}
.article-paper-section .io_trans {
  position: absolute !important;
  inset: auto 0 0 !important;
  height: 90px !important;
  pointer-events: none !important;
  background: linear-gradient(to bottom, rgba(244,250,255,0), rgba(244,250,255,.98)) !important;
}
.article-paper-section .io_item.open .io_trans {
  display: none !important;
}
.article-paper-section .io_button_wrap {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 14px 0 34px !important;
}
.article-paper-section .io_button {
  width: auto !important;
  min-width: 0 !important;
  max-width: max-content !important;
  padding: .72em 1.3em !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}
.article-paper-section .io_item:not(.open) .btn_close,
.article-paper-section .io_item.open .btn_open {
  display: none !important;
}
.article-paper-section .io_item:not(.open) .btn_open,
.article-paper-section .io_item.open .btn_close {
  display: inline-flex !important;
}

@media (max-width: 720px) {
  .article-paper-section > .Rules__container {
    width: min(calc(100% - 20px), var(--grafo-paper-max-width)) !important;
  }
  .article-paper-section > .Rules__container > .Rules__body > .items__item:first-child,
  .article-paper-section .io_item_wrap > .item_text {
    padding: 30px 20px 30px 68px !important;
  }
  .article-paper-section > .Rules__container > .Rules__body > .items__item:first-child::before,
  .article-paper-section .io_item_wrap > .item_text::before {
    left: 18px !important;
    width: 18px !important;
    background-image: radial-gradient(circle 7px at 9px 9px,
      rgba(104, 113, 119, .78) 0 4.5px,
      rgba(190, 199, 205, .72) 5px 6px,
      #fff 6.5px 7.5px,
      transparent 8px) !important;
    background-size: 18px 96px !important;
  }
}

@media print {
  .article-paper-section .io_button_wrap { display: none !important; }
  .article-paper-section > .Rules__container { width: 210mm !important; max-width: 210mm !important; }
  .article-paper-section > .Rules__container > .Rules__body > .items__item:first-child,
  .article-paper-section .io_item_wrap > .item_text {
    min-height: 297mm !important;
    margin: 0 !important;
    padding: 15mm 15mm 15mm 30mm !important;
    border: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
  }
  .article-paper-section .io_item_wrap { max-height: none !important; overflow: visible !important; }
  .article-paper-section .io_trans,
  .article-paper-section .item_text::before,
  .article-paper-section .items__item::before { display: none !important; }
}
