body{
    margin: 0;
    padding: 0;
}
.quality-table{
    position: relative;
    padding: 8px 0;
}
.quality-table table{
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed;
}
.quality-table .header td{
    background: #d2eafc;
    color: #2196f3;
}
.quality-table td{
    padding: 4px 8px;
    font-size: 14px;
    line-height: 24px;
    text-align: center;
}
.quality-table .list{
    border-bottom: 1px dashed #e6e6e6;
}
.tag{
    width: 8px;
    height: 8px;
    display: inline-block;
    border-radius: 50%;
}
.tag.good , .text.good{
    background: lime;
}
.tag.commonly , .text.commonly{
    background: yellow;
}
.tag.light , .text.light{
    background: #ff7d00;
}
.tag.moderate , .text.moderate{
    background: #ff0000;
}
.tag.severe , .text.severe{
    background: #9c004a;
}
.tag.serious , .text.serious{
    background: #7b0021;
}
.quality-table .text{
    width: 80px;
    text-align: center;
    display: inline-block;
    color: #545b62;
}
#myscroll{
    height: 360px;
    overflow: hidden;
}
.quality-table .title {
    color: #1A5284;
    border-left: 4px solid #fabe16;
    font-size: 18px;
    padding-left: 8px;
    margin: 8px 8px 0 8px;
}
.quality-table .title a{
    color: #1A5284;
    font-weight: bold;
}
.quality-table .info{
    font-size: 14px;
    color: #8c8c8c;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 0 12px 0 20px;
    margin-bottom: 12px;
    height: 27px;
}

#monthSelector{
    border: 1px solid #349aff;
    padding: 4px 0 4px 4px;
    outline: none;
    width: 60px;
    background: #e9f4ff;
}
#titleDate img:hover{
    cursor: pointer;
    opacity: 0.8;
}