.ati-indicator {
display: flex;
align-items: center;
margin-bottom: 0px;
}
.ati-icon {
width: 60px;
flex-shrink: 0;
}
.ati-icon img {
width: 60px;
height: 60px;
object-fit: contain;
}
.ati-bar-wrap,
.ati-thermo-bar {
flex: 1;
margin: 0 20px;
position: relative;
}
.ati-bar-bg,
.ati-thermo-bar {
height: 30px;
background: #489641;
position: relative;
overflow: hidden;
border-radius: 15px; }
.ati-bar-fill {
height: 100%;
background: #155545;
border-radius: 15px 0 0 15px; }
.ati-bar-text {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
color: #fff;
font-size: 14px;
z-index: 2;
pointer-events: none;
}
.ati-value {
min-width: 90px;
text-align: left;
font-weight: 600;
color: #155545;
} .ati-thermo-bar::before {
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: var(--thermo-fill);
background: #155545;
} .ati-thermo-scale {
display: flex;
justify-content: space-between;
font-size: 12px;
color: #155545;
margin: -20px 108px 0 80px; position: relative;
z-index: 1;
}
.ati-thermo-bar .ati-bar-text {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
color: #fff;
font-size: 14px;
z-index: 2;
}
@media (max-width: 575px) {
.ati-bar-text {
font-size: 10px;
}
.ati-thermo-bar .ati-bar-text {
font-size: 10px;
}
.ati-bar-wrap,
.ati-thermo-bar {
margin: 0 10px;
}
}