.gajos-env-banner {
    align-items: center;
    border-bottom: 1px solid transparent;
    display: flex;
    gap: 9px;
    min-height: 30px;
    padding: 5px 14px;
    position: sticky;
    top: 0;
    z-index: 1100;
    font-size: 12px;
    line-height: 1.35;
}

.gajos-env-banner.is-green { color: #174f31; border-color: #79c596; background: #e7f8ed; }
.gajos-env-banner.is-amber { color: #704600; border-color: #ddb94e; background: #fff5cf; }
.gajos-env-banner.is-red { color: #751c1c; border-color: #cf5048; background: #ffe4e1; box-shadow: inset 0 -2px 0 #c83d35; }
.gajos-env-banner.is-production { min-height: 24px; padding-block: 3px; opacity: .92; }
.gajos-env-icon { align-items: center; border: 1px solid currentColor; border-radius: 50%; display: inline-flex; flex: 0 0 18px; height: 18px; justify-content: center; font-size: 11px; font-weight: 800; }
.gajos-env-summary { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.gajos-env-separator { margin: 0 3px; opacity: .6; }
.gajos-env-host { opacity: .78; }
.gajos-env-details { flex: 0 1 auto; }
.gajos-env-details summary { cursor: pointer; font-weight: 700; white-space: nowrap; }
.gajos-env-details[open] { align-items: flex-start; display: flex; flex-wrap: wrap; gap: 4px 12px; }
.gajos-env-details[open] summary { width: 100%; }
.gajos-env-details span { overflow-wrap: anywhere; }

@media (max-width: 900px) {
    .gajos-env-banner { align-items: flex-start; flex-wrap: wrap; padding-inline: 10px; }
    .gajos-env-details { margin-left: 27px; width: calc(100% - 27px); }
}