#top {
    height: 8%;
    width: 100%;
    top: 0;
    /* position: absolute; */
    background: linear-gradient(left , rgb(5, 120, 211) , rgb(1, 109, 210) 16% , rgb(7, 125, 212) 64% , rgb(4, 106, 211) 94%);
    background: -o-linear-gradient(left , rgb(5, 120, 211) , rgb(1, 109, 210) 16% , rgb(7, 125, 212) 64% , rgb(4, 106, 211) 94%);
    background: -ms-linear-gradient(left , rgb(5, 120, 211) , rgb(1, 109, 210) 16% , rgb(7, 125, 212) 64% , rgb(4, 106, 211) 94%);
    background: -moz-linear-gradient(left , rgb(5, 120, 211) , rgb(1, 109, 210) 16% , rgb(7, 125, 212) 64% , rgb(4, 106, 211) 94%);
    background: -webkit-linear-gradient(left , rgb(5, 120, 211) , rgb(1, 109, 210) 16% , rgb(7, 125, 212) 64% , rgb(4, 106, 211) 94%);
}
#top .logo{
    display: inline-block;
    margin-top: 0.8%;
    margin-left: 2%;
    height: 100%;
}
.toggle{padding: 0;float: right;height: 55%;background: #fff;/* width: 200px; */border-radius: 9px;text-align: center;/* padding-top: 11px; */position: relative;margin-top: 0.9%;margin-right: 5%;}
.toggle div{
    height: 100%;
    cursor: pointer;
}
#top .logo img{
    width: auto;
    height: 68%;
}
.toggle .realTime{
    display: inline-block;
    height: 100%;
    /* width: 33.33333%; */
    font-size: 1.1vw;
    /* padding-top: 16px; */
    border-bottom-left-radius: 9px;
    border-top-left-radius: 9px;
    text-align: center;
}

/*.history:before{*/
/*content: '';*/
/*display: inline-block;*/
/*height: 28px;*/
/*width: 2px;*/
/*top: 12px;*/
/*color: #000;*/
/*background: #000;*/
/*position: absolute;*/
/*left: 0;*/
/*}*/
.toggle .active{
    background: #032843;
    color: #fff;
}
.toggle .history{
    font-size: 1.1vw;
    padding-top: 16px;
    /* border-right: 1px solid #000; */
}
.toggle .monitoring{
    font-size: 1.1vw;
    padding-top: 16px;
    border-bottom-right-radius: 9px;
    border-top-right-radius: 9px;
}