@import url("http://fonts.googleapis.com/css?family=Roboto:500,300");
@import url("https://fonts.googleapis.com/css?family=Playfair+Display:400i");
/*@import url("https://fonts.googleapis.com/css?family=Raleway");*/


html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}body{line-height:1;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-collapse:collapse;border-spacing:0;}body{-webkit-text-size-adjust:none}

/**, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}*/

.chart-field{
    border:2px #cdcdcd solid;
    width  : 100%;
    height : 717px;
    text-align: left;
    overflow-y: scroll;
    padding-left: 49px;
}
.ratio-bars{
    padding:7px 0;
}
.one-bar{
    height:17px;
}
.on-load-bar{    
    background-color: green;
}
.on-service-bar{    
    background-color: #cecece;
}
.bar-driver{
    position:relative; 
    margin-left:-47px; 
    float: left;
    color: #d26427;
    font-weight: bold;
}
.bar-value{
    position:relative; 
    margin-left:calc(100% + 21px);    
}