.dbi-dd[hidden] { display: none !important; }
.dbi-dd, .dbi-dd * { box-sizing: border-box; }
.dbi-dd { margin: 30px auto 50px; font-family: inherit; text-transform: none; }
.dbi-dd-symbols { position: absolute; width: 0; height: 0; overflow: hidden; }
.dbi-dd-link { display: block; color: inherit; text-decoration: none; }
.dbi-dd-link:hover { color: inherit; }
.dbi-dd-link:focus-visible { outline: 3px solid #7fb7c9; outline-offset: 8px; }
.dbi-dd-title { padding: 12px 0; background: #7fb7c9; color: #fff; font-size: 26px; font-weight: 900; text-align: center; }
.dbi-dd-panels { display: flex; gap: 5px; margin: 0; opacity: 1; text-transform: none; }
.dbi-dd-panel { position: relative; display: flex; flex: 1; flex-direction: column; align-items: center; gap: 3px; min-width: 0; height: 190px; padding: 40px 0; border-top: 6px solid #f1f1f2; background: #2b2d31; text-align: center; }
.dbi-dd-panel dt { color: #fff; font-size: 24px; font-weight: 600; }
.dbi-dd-panel dd { margin: 0; color: #7fb7c9; font-size: 38px; font-weight: 600; line-height: 1; }
.dbi-dd-unit { display: block; font-size: 24px; line-height: 1.2; }
.dbi-dd-icon { position: absolute; bottom: -30px; width: 60px; height: 60px; padding: 5px; border-radius: 50%; background: #f1f1f2; }
.dbi-dd-icon svg { display: block; width: 50px; height: 50px; padding: 8px; border-radius: 50%; background: #7fb7c9; color: #fff; }
.dbi-dd-panel.is-active { border-top-color: #7fb7c9; background: #7fb7c9; }
.dbi-dd-panel.is-active dd { color: #2b2d31; }
.dbi-dd-panel.is-active .dbi-dd-icon svg { background: #2b2d31; }
.dbi-dd-mobile { display: none; }
@media (max-width: 849px) {
    .dbi-dd { margin: 25px auto 20px; }
    .dbi-dd-desktop { display: none; }
    .dbi-dd-mobile { display: block; width: 100%; max-width: 540px; height: auto; margin: auto; overflow: visible; }
    .dbi-dd-sector { fill: #2b2d31; stroke: #f1f1f2; stroke-width: 4px; }
    .dbi-dd-icon-border { fill: #f1f1f2; }
    .dbi-dd-icon-background { fill: #7fb7c9; }
    .dbi-dd-mobile-icon { color: #fff; }
    .dbi-dd-mobile-label { fill: #fff; font-size: 14px; font-weight: 600; }
    .dbi-dd-mobile-value { fill: #7fb7c9; font-size: 26px; font-weight: 600; }
    .dbi-dd-mobile-unit { fill: #7fb7c9; font-size: 12px; font-weight: 600; }
    .dbi-dd-mobile .is-active .dbi-dd-sector { fill: #7fb7c9; }
    .dbi-dd-mobile .is-active .dbi-dd-icon-background { fill: #2b2d31; }
    .dbi-dd-mobile .is-active .dbi-dd-mobile-value,
    .dbi-dd-mobile .is-active .dbi-dd-mobile-unit { fill: #2b2d31; }
    .dbi-dd-center { fill: #7fb7c9; stroke: #fff; stroke-width: 5px; filter: drop-shadow(3px 4px 3px #0004); }
    .dbi-dd-center-label { fill: #fff; font-size: 14px; font-weight: 700; }
}