*,html,body {
    margin: 0;
    padding: 0;
    font: 13px/2em Avenir,Arial,sans-serif;
    box-sizing:border-box;
    // background: #ffffff;
}
html,body{width:100%;height:100%;min-width:400px;}
body{padding-top:87px}
a {
    text-decoration: none;
    outline: none;
    cursor: pointer;
}

table {
    border-collapse: collapse;
}

ol, ul {
    list-style: none;
}

li {
    list-style-type: none;
}

.clear {
    overflow: auto;
    overflow-y: hidden;
    zoom: 1;
}

.toolbar{
    background:#00c3ef;height:82px;position:fixed;top:0;left:0;right:0;box-shadow:0 0px 10px #666;z-index:10;
    .connect{
        background:darken(#00c3ef,10%);padding:8px 15px;
        input{
            border:none;text-align:center;float:left;display:inline;width:35%;
            &.disabled{background:darken(#00c3ef,20%)}
        }
        button{
            width:30%;float:left;border:none;background:#4ab911;color:#fff;cursor:pointer;
            &.disabled{background:#b91111}
        }
    }
    .filter{
        padding:8px 15px;
        span{
            display:inline-block;background:#50b31d;float:left;cursor:pointer;text-align:right;font-size:10px;color:#fff;position:relative;padding:0 8px 0 20px;margin-right:2px;
            &:before{content:"●";text-align:left;position:absolute;left:8px;top:0px;}
            &.disabled{
                background:#b91111;
                &:before{content:"○"}
            }
        }
        input{height:24px;border:none;text-align:center;float:right;display:inline;font-size:12px;width:65px;}
        button{height:24px;border:none;float:right;display:inline;font-size:12px;width:30px;background:darken(#00c3ef,10%);color:#fff}
    }
}
.box{
    border-top:1px #eee solid;
    &:last-child{border-bottom:1px #eee solid;}
    .head{
        height:26px;position:relative;
        span.line{position:absolute;right:15px;top:0;line-height:26px;}
        span.level{position:absolute;left:15px;top:5px;line-height:16px;display:block;width:80px;height:16px;border-radius:20px;font-size:12px;text-align:center;background:#eee}
        h2{height:26px;line-height:26px;padding:0 60px 0 100px;overflow:hidden;text-align:right;word-break: break-all;}
    }
    .content{padding:5px 20px;line-height:24px;word-break: break-all;font-size:14px}
    .info{
        line-height:18px;font-size:10px;position:relative;padding:5px 0 5px 15px;background:#eee;
        span{position:absolute;right:15px;top:5px;line-height:18px;font-size:10px;}
    }
    &.LOG{
        background:#009434;color:#fff;
        .head{background:darken(#009434,5%)}
        .info{background:darken(#009434,2%)}
        span.level{background:darken(#009434,10%)}
    }
    &.DEBUG{
        background:#3f83e8;color:#fff;
        .head{background:darken(#3f83e8,5%)}
        .info{background:darken(#3f83e8,2%)}
        span.level{background:darken(#3f83e8,10%)}
    }
    &.WARNING{
        background:#f7bf21;color:#fff;
        .head{background:darken(#f7bf21,5%)}
        .info{background:darken(#f7bf21,2%)}
        span.level{background:darken(#f7bf21,10%)}
    }
    &.ERROR{
        background:#ca004a;color:#fff;
        .head{background:darken(#ca004a,5%)}
        .info{background:darken(#ca004a,2%)}
        span.level{background:darken(#ca004a,10%)}
    }
}