.mcp-section-bar-container { max-width: 345px; width: 100%; }
.mcp-section-bar-top-info {display: flex; justify-content: space-between;align-items: baseline; margin-bottom: 8px;}
.mcp-section-bar-top-info .bar-1-info {color: #1371D5;}
.mcp-section-bar-top-info .bar-2-info {color: #002A95;}
.mcp-section-bar-track { height: 32px; width: 100%; background-color: #C5E2F9; border-radius: 0px 16px 16px 0px; position: relative; overflow-x: clip; }
.mcp-section-bar-container .stat-bar { position: absolute; top: 0; left: 0; height: 100%; border-radius: 0 16px 16px 0; color: #fff; display: flex; align-items: flex-start; justify-content: center; font-weight: bold; line-height: 32px; overflow: hidden; padding: 0 12px; text-align: center; word-break: keep-all;}
.mcp-section-bar-container .bar-1 { background-color: #1371D5; border-radius: 0;}
.mcp-section-bar-container .bar-2 { background-color: #002A95; }
.mcp-section-bar-container .divider-dot {width: 16px; height: 16px; background: #080808; border-radius: 100%; border: 4px solid #fff; position: absolute; top: 8px;}
.mcp-section-bar-container .divider-dot:before {position: absolute; content: "Dx"; font-size: 16px; line-height: 24px; font-weight: bold; top:-44px; white-space: nowrap; left: 3px; }
.mcp-section-bar-container .divider-dot:after {position: absolute; content: " "; height: 12px; width: 1px; top: -24px; left: 4px;background-image: url("data:image/svg+xml,%3Csvg width='1' height='12' viewBox='0 0 1 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='0.5' y1='2.18557e-08' x2='0.499999' y2='12' stroke='%23080808' stroke-dasharray='1 1'/%3E%3C/svg%3E%0A"); }
.mcp-section-bar-bottom-info {display: flex; justify-content: space-between;align-items: center; padding-top: 8px; margin-top: 16px; border-top: 1px dotted #1371D5; }
.mcp-section-bar-bottom-info .full-duration-info {font-weight: bold;}