.chart-container { height:250px; padding:20px 10px 30px;}
.chart-container.small-height { height:250px;}

.chart-info { display:flex; gap:15px; padding:10px;}
.chart-info span { font-size:12px; color: #6a7e92;}
.chart-info span strong { font-weight:bold; color: #062849;}
.chart-info-left { flex-shrink: 0;}
.chart-info-left span { font-size:22px; font-weight:bold; }
.chart-info-left i { display: block; font-size: 12px; margin-top: 10px; }
.chart-info-left i u { margin-left:6px; font-size:12px; font-weight:bold; text-decoration: none;}
.chart-info-left i strong { font-weight:bold; }

.chart-info.up .chart-info-left i u, .chart-info.up .chart-info-left span { color: var(--color-green);}
.chart-info.down .chart-info-left i u, .chart-info.down .chart-info-left span { color: var(--color-red);}

.chart-info.update-down { background-color: #ffebeb; }
.chart-info.update-up { background-color: #e2ffe2; }

.chart-info.up .chart-info-left i u:after { content:''; width:8px; height:6px; display:inline-block; margin-left:7px; margin-bottom:3px;
    background-image: url("data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M4.76822 0.921865C4.36843 0.44211 3.63157 0.442111 3.23178 0.921865L0.366819 4.35982C-0.175953 5.01114 0.287204 6 1.13504 6H6.86496C7.7128 6 8.17595 5.01114 7.63318 4.35982L4.76822 0.921865Z' fill='%233DB472'/></svg>");
    background-repeat: no-repeat;
    background-position: center center;
}

.chart-info.down .chart-info-left i u:after { content:''; width:8px; height:6px; display:inline-block; margin-left:7px; margin-bottom:3px; transform:rotate(180deg); -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg); -ms-transform:rotate(180deg); -o-transform:rotate(180deg);
    background-image: url("data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M4.76822 0.921865C4.36843 0.44211 3.63157 0.442111 3.23178 0.921865L0.366819 4.35982C-0.175953 5.01114 0.287204 6 1.13504 6H6.86496C7.7128 6 8.17595 5.01114 7.63318 4.35982L4.76822 0.921865Z' fill='%23D51317'/></svg>");
    background-repeat: no-repeat;
    background-position: center center;
    
}
.chart-info-right {flex-grow: 9999;}
.chart-info-right-top { width: 100%; display:flex; justify-content: space-between; }
.chart-info-right-top span { display: flex; flex-direction: column; justify-content: flex-end; }
.chart-info-right-top span:last-child { align-items: flex-end;}
.chart-info-right-top span strong { margin-top:8px;}

.chart-info-bar {width: 100%; height: 2px; margin-top:20px; background: #062849; position:relative;}
.chart-info-bar span { position: absolute; width: 7px; height: 7px; top: -2px; background: #D51317; transform: rotate(45deg);}

.chart-info-open-data { display:block; width:100%; margin-top:14px; text-align: center; }

@media (min-width:767px) {
    
    
}

@media (min-width:992px) {
    
}

@media (min-width:1200px) {
    .chart-container { height:330px;}
    
}

@media (min-width:1400px) {
    .chart-container { height:400px;}
    .chart-info { gap:30px; padding:16px 20px 10px;}
    .chart-info span {font-size:12px;}
    .chart-info-left span { font-size:26px;}
    .chart-info-left i u { font-size:14px;}
}

@media (min-width:1560px) {
    .chart-info-left span { font-size:32px;}
}