.main{display:flex;flex:1;overflow:auto;padding:16px;flex-direction:column;align-items:center}
.graph-container{width:100%;max-width:1200px;display:flex;flex:1}
.tab-content{display:none;width:100%}
.tab-content.active{display:flex;justify-content:center;flex-direction:column;gap:8px}
.graphscontrolbox{font-size:15px;margin-top:16px}
.periodselect{display:flex;gap:8px;flex-direction:column;align-items:center;background:#fafafa;padding:8px;border-radius:4px;border:1px solid #ddd}
.periodmenu{display:flex;gap:4px;margin:0;padding:0}
.periodmenu li{padding:2px 6px;border-radius:4px;color:#373737;list-style:none}
.periodmenu li:hover{cursor:pointer;text-decoration:underline}
.periodmenu li.active,.periodmenu li.active:hover{color:#fff;background:#2e64a8;text-decoration:none}
select:hover,input[type=button]:hover{cursor:pointer}
button,input,optgroup,select,textarea{line-height:initial}
.chartTitle{display:block;text-align:center;font-size:19px;font-variation-settings:'wght' 600;color:#11624f}

.line-style{stroke-width:2px}
.label-null line{stroke:#a870df;stroke-width:1px;stroke-dasharray:8px 4px}
.bb svg{font-family:inherit;max-height:350px}
.bb-axis text{fill:#505050;font-size:12px}
.bb-grid .bb-ygrids line{stroke:#ddd}
.bb-grid .bb-xgrid-focus{stroke:#bc8f8f}
.bb-axis path{stroke:#999}
.bb-title{font-family:inherit;font-size:16px;font-variation-settings:'wght' 500;fill:#303434}
.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 screen and (max-width: 450px) {
  .main{padding:8px}
}
@media screen and (min-height: 900px) {
  .bb svg{font-family:inherit;max-height:initial;height:500px}
}