.graph-canvas-wrap{
    position:relative;
}
.graph-canvas-wrap canvas{
    z-index:1;
    position:relative;
}
.graph-filltext{
    position:absolute;
    top:calc(50% - 12px);
    font-size:24px;
    left:0px;
    right:0px;
    z-index:0;
}
.wrap-bubble{
    margin:10px;
    padding:20px;
    background-color:var(--bubble);
    border-radius:20px;
    float:left;
    width: calc(100% - 60px);
    position:relative;
    display:block;
}
.wrap-bubble.light{
    margin:6px;
    padding:8px 14px;
    width:calc(100% - 28px);
}
.notification_unread_status{
    width:15px;
    height:15px;
    border-radius:10px 0px 15px 0px;
    position:absolute;
    top:0px;
    left:0px;
    background-color:var(--identity-color);
}
.bubble-error .notification_unread_status{
    background-color:var(--graph-red);
}
.bubble-notice .notification_unread_status{
    background-color:#ded078;
}
/*width*/
.bubble-cont{
    height: calc(100% - 40px);
}
.notification_bubble.bubble-error a{
    color:var(--graph-red);
}
.notification_bubble.bubble-notice a{
    color:#ded078;
}
.wrap-bubble.w-quarter{
    width:calc(25% - 60px);
}
.wrap-bubble.w-third{
    width:calc(33.3% - 60px);
}
.wrap-bubble.w-twothird{
    width:calc(66.6% - 60px);
}
.wrap-bubble.w-half{
    width:calc(50% - 60px);
}
.wrap-bubble.w-20{
    width:calc(20% - 60px);
}
.wrap-bubble.w-16{
    width:calc(16.6% - 60px);
}
.wrap-bubble.w-14{
    width:calc(14.2% - 60px);
}
/*width empty*/
.bubble-cont.empty{
    height: 100%;
}
.wrap-bubble.empty.w-quarter{
    width:25%;
}
.wrap-bubble.empty.w-third{
    width:33.3%;
}
.wrap-bubble.empty.w-twothird{
    width:66.6%;
}
.wrap-bubble.empty.w-half{
    width:50%;
}
.wrap-bubble.empty.w-20{
    width:20%;
}
.wrap-bubble.empty.w-16{
    width:16.6%;
}
.wrap-bubble.empty.w-14{
    width:14.2%;
}
/*width light*/
.wrap-bubble.light.w-quarter{
    width:calc(25% - 40px);
}
.wrap-bubble.light.w-third{
    width:calc(33.3% - 40px);
}
.wrap-bubble.light.w-twothird{
    width:calc(66.6% - 40px);
}
.wrap-bubble.light.w-half{
    width:calc(50% - 40px);
}
.wrap-bubble.light.w-20{
    width:calc(20% - 40px);
}
.wrap-bubble.light.w-16{
    width:calc(16.6% - 40px);
}
.wrap-bubble.light.w-14{
    width:calc(14.2% - 40px);
}
/*height*/
.wrap-bubble.h-s{
    height:130px;
}
.wrap-bubble.h-m{
    height:200px;
}
.wrap-bubble.h-l{
    height:320px;
}
.wrap-bubble.h-xl{
    height:400px;
}
.wrap-bubble.h-auto{
    max-height:100%;
}
/*height empty*/
.wrap-bubble.empty.h-s{
    height:200px;
}
.wrap-bubble.empty.h-m{
    height:280px;
}
.wrap-bubble.empty.h-l{
    height:380px;
}
.wrap-bubble.empty.h-xl{
    height:480px;
}
.empty .wrap-bubble.light{
    margin:3px;
    width:calc(100% - 34px);
}

.wrap-bubble h3{
    color:var(--text-light);
    text-align:left;
    margin-top:0px;
}
.wrap-bubble h4{
    color:var(--text-light);
    text-align:left;
    margin:0px;
    font-size:0.7em;
    font-weight:normal;
    margin-top:-10px;
}
.wrap-bubble a{
    color:var(--title-light-blue);
    text-decoration:none;
}
.wrap-bubble .graph-canvas-wrap{
    height:100%;
}
.wrap-bubble.empty{
    margin:0px;
    padding:0px;  
    background-color:transparent;  
    width:100%;
}
.graph_state_value{
    font-size:4em;
    text-align:right;
    display:inline-block;
    transition: opacity 1s;
}
.graph_state_units{
    font-size:1em;
    text-align:left;
    display:inline-block;
}

.row_title{
    font-size:16px;
    margin-top:6px;
}