.ui-thermometer {
    margin: 0;
    padding:0;
    width: 100%;
    height: auto;
    margin-left: -6px;
    appearance: none;
    overflow: hidden;
    display: block;
    box-sizing: border-box;
    vertical-align: baseline;
}
.ui-thermometer li{
    list-style: none;
}

.ui-thermometer__state {
    display: none;
}

.ui-thermometer__level {
    width: 20%;
    height: 8px;
    margin-top: 2px;
    box-sizing: border-box;
    float: left;
    border-left: 6px solid #fff;
}

.ui-thermometer__level--1 {
    background: #fff0f0;
}

.ui-thermometer__level--2 {
    background: #fff5e8;
}

.ui-thermometer__level--3 {
    background: #fffcda;
}

.ui-thermometer__level--4 {
    background: #f1fdd7;
}

.ui-thermometer__level--5 {
    background: #edf8ee;
}

.ui-thermometer[value="0"] .ui-thermometer__level {
    margin: 0;
    background: #eee;
}

.ui-thermometer[value="1"] .ui-thermometer__level--1 {
    height: 12px;
    margin: 0;
    background: #ff605a;
}

.ui-thermometer[value="2"] .ui-thermometer__level--2 {
    height: 12px;
    margin: 0;
    background: #ffb656;
}

.ui-thermometer[value="3"] .ui-thermometer__level--3 {
    height: 12px;
    margin: 0;
    background: #fff044;
}

.ui-thermometer[value="4"] .ui-thermometer__level--4 {
    height: 12px;
    margin: 0;
    background: #bbff1f;
}

.ui-thermometer[value="5"] .ui-thermometer__level--5 {
    height: 12px;
    margin: 0;
    background: #39b54a;
}