.monitor {
        /* margin-left: 7px; */
        margin-bottom: 30px;
        /* width: 80%; */
        padding-top: 0px;
        /* color: #000000; */
        /* font-size: 0px; */
        color: #419ac4;
        font-family: Arial, Helvetica, sans-serif;
    }
    .monitor_online {
        width: 37px;
        border-radius: 4px;
        float: left;
        margin-right: 5px;
        text-align: center;
        font-size: 14px;
        background: #f5f7f8;
        box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
        height: 37px;
        line-height: 37px;
    }
    .monitor_name {font-size: 15px;color: #419ac4;font-weight: 600;/* width: 199px; *//* margin-left: 17px; */margin-top: 20px;/* float: left; */}
    .green,
    .red,
    .blue{
        background: url(bar.png) no-repeat;
        width: 0;
        height: 7px;
        border-radius: 15px;
        background-image: linear-gradient(
900deg
,#53e9f3,#b9c5f6);
    }
    .green {
        background-position: 0 0;
    }
    .red {
        background-position: 0 -32px;
    }
    .blue {
        background-position: 0 -16px;
    }
    .progressbar {
        height: 7px;
        position: relative;
    }
    .progressbar::after {
        content: '';
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }
    span {
        width: 81%;
        display: block;
        margin-left: 50px;
        height: 7px;
        border-radius: 4px;
        /* padding-top: 10px; */
        position: relative;
        border: 1px solid #d4d7da;
        box-shadow: inset 0 1px 1px rgba(0,0,0,.1);
        transition: transform .8s;
        background-color: #21d4fd;
        background-image: linear-gradient(
230deg
,#1dd5e6,#46aef7);
    }
    .recordBox{
        /* width: 200px; */
        color: #5b5b5b;
        font-family: Arial, Helvetica, sans-serif;
        text-align: center;
    }
.monitor_online_rpg {
    width: 45px;
    border-radius: 50%;
    float: left;
    margin-right: 5px;
    text-align: center;
    font-size: 18px;
    /* background: #21282b; */
    background: linear-gradient(to right, #5be8f2, #bdf7cd);
    box-shadow: inset 0 1px 2px rgb(0 0 0 / 20%);
    height: 35px;
    line-height: 37px;
230deg
,#1dd5e6,#46aef7); */
    box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
    height: 45px;
    line-height: 44px;
    }
.monitor_online_space {
    width: 45px;
    border-radius: 50%;
    float: left;
    margin-right: 5px;
    text-align: center;
    font-size: 14px;
    background: linear-gradient(to right, #f2df5b, #f7bdc4);
    /* background: #8b61a3; */
    box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
    height: 45px;
    line-height: 45px;
    }
.monitor_online_flans {
    width: 37px;
    border-radius: 13px;
    float: left;
    margin-right: 5px;
    text-align: center;
    font-size: 14px;
    background: #21282b;
    /* background: url(../images/aside_block_eff.png); */
    box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
    height: 37px;
    line-height: 37px;
    }
.monitor_online_epic {
    width: 37px;
    border-radius: 13px;
    float: left;
    margin-right: 5px;
    text-align: center;
    font-size: 14px;
    background: #21282b;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
    height: 37px;
    line-height: 37px;
}