.ruban-status-trigger {
  align-items: center;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  gap: 5px;
  height: 35px;
  justify-content: center;
  line-height: 1;
  min-width: 35px;
  padding: 0 7px;
}
.ruban-status-trigger:hover,
.ruban-status-trigger:focus-visible { background: rgba(255,255,255,.14); outline: 2px solid currentColor; outline-offset: -2px; }
.ruban-status-trigger svg { fill: currentColor; height: 20px; width: 20px; }
.ruban-status-label { font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.ruban-status-menu-tool { float: right; }
.ruban-status-menu-tool .ruban-status-trigger { color: #9cf2bb; }
.navbar-nav .ruban-status-trigger { color: #555; height: 50px; }
.cbp-spmenu .ruban-status-trigger { color: inherit; justify-content: flex-start; min-height: 44px; padding: 10px 18px; width: 100%; }

.ruban-status-panel {
  --ruban-status-right: 18px;
  --ruban-status-top: 58px;
  background: #fff;
  border: 1px solid rgba(24,33,43,.18);
  border-radius: 10px;
  box-shadow: 0 16px 50px rgba(0,0,0,.24);
  color: #1d2731;
  font-family: Arial, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  max-height: min(620px,calc(100vh - var(--ruban-status-top) - 14px));
  overflow: auto;
  position: fixed;
  right: var(--ruban-status-right);
  top: var(--ruban-status-top);
  width: min(390px,calc(100vw - 24px));
  z-index: 10050;
}
.ruban-status-panel[hidden] { display: none !important; }
.ruban-status-panel > header { align-items: flex-start; border-bottom: 1px solid #e4e8eb; display: flex; justify-content: space-between; padding: 15px 16px 12px; }
.ruban-status-panel h2 { color: #17212b; font: 700 21px/1.15 Arial,sans-serif; margin: 2px 0 0; }
.ruban-status-kicker { color: #63707b; display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ruban-status-close { background: transparent; border: 0; color: #45515b; cursor: pointer; font-size: 27px; line-height: 1; padding: 0 2px; }
.ruban-status-content { padding: 14px 16px 16px; }
.ruban-status-loading,.ruban-status-error { color: #596671; margin: 0; }
.ruban-status-section + .ruban-status-section { border-top: 1px solid #e4e8eb; margin-top: 14px; padding-top: 14px; }
.ruban-status-section h3 { align-items: center; color: #25313b; display: flex; font: 700 15px/1.3 Arial,sans-serif; justify-content: space-between; margin: 0 0 8px; }
.ruban-status-ok { color: #167443; }
.ruban-status-total { background: #e8f5ee; border-radius: 999px; color: #12663a; font-size: 12px; padding: 3px 8px; }
.ruban-status-note { color: #596671; font-size: 12px; margin: 7px 0 0; }
.ruban-status-list { list-style: none; margin: 0; padding: 0; }
.ruban-status-list li { align-items: baseline; display: flex; gap: 10px; justify-content: space-between; padding: 5px 0; }
.ruban-status-list li + li { border-top: 1px solid #f0f2f3; }
.ruban-status-list strong { color: #202b34; font-size: 13px; font-weight: 600; }
.ruban-status-list span { color: #596671; flex: none; font-size: 12px; }
.ruban-status-empty { background: #f4f7f5; border-radius: 7px; color: #385448; margin: 0; padding: 10px; }
.ruban-status-outage { align-items: flex-start !important; display: block !important; }
.ruban-status-outage strong,.ruban-status-outage span { display: block; }
.ruban-status-panel > footer { background: #f5f7f8; border-radius: 0 0 10px 10px; color: #66717a; font-size: 11px; padding: 9px 16px; }

@media (max-width: 767px) {
  .ruban-status-label { display: inline; }
  .ruban-status-panel { bottom: 8px; max-height: calc(100vh - 16px); right: 8px; top: auto; width: calc(100vw - 16px); }
}