.infobox{display:flex;flex-direction:column;flex:1;align-items:center;padding:24px 0 40px;overflow:auto}
.temperature{font-size:74px;color:#2f3235;min-width:230px;text-align:center;font-variation-settings:'wght' 500;letter-spacing:-1px;line-height:1.3}
.temperature span.temperatureSuffix{font-size:36px;font-variation-settings:'wght' 700;vertical-align:28px}
.temperature span.warm{color:#f77}
.temperature span.cold{color:#8e8ef9}
.additionalinfo{border-bottom:2px solid #dbd9d9;border-top:2px solid #dbd9d9;min-width:230px;padding:1px 4px;margin:5px 0 20px;font-family: monospace;font-size: 14px;}
.additionalinfoline {
    display: flex;
    justify-content: space-between;
}
.additionalinfoline span:first-child{color:#62686f;}
.bb{display:flex;min-height:250px;max-width:500px}
.bb-title{fill:#6a8abc;font-family:inherit;font-size:16px;font-variation-settings:'wght' 500}
.bb svg{font-family:inherit}
.bb-axis text{fill:#8d8d8d;font-size:12px}
.bb-grid .bb-ygrids line{stroke:#ddd}
.bb-grid .bb-xgrid-focus{stroke:#bc8f8f}
.bb-axis path{stroke:#999}
.line-style{stroke-width:2px}
.label-null line{stroke:#a870df;stroke-width:1px;stroke-dasharray:8px 4px}
.bb-tooltip{padding:8px 12px;border:1px solid #bbb8b3;display:flex;flex-direction:column;font-size:13px;opacity:1;border-radius:4px;gap:4px}
.bb-tooltip span:first-child{font-variation-settings:'wght' 500;font-size:14px}
.bb-tooltip span:last-child{color:#0d372a}

@media (min-height: 580px) {
    .infobox{justify-content:center}
}