* {margin: 0;padding: 0;} html *, html:after, html:before {box-sizing: inherit;} html {overflow: hidden;}
.hidden {display: none!important;}

body {width: 100%;height: 400px;min-height: 400px;max-height: 400px;max-width:800px;margin:0 auto ;box-sizing: border-box;font-size: 15px;font-family: 'Roboto', sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;overflow: hidden;}
body.scmp-m-ios{width:100vw;}
.container {position: relative;display: inline-block;width: 100%;max-width:800px;min-width: 290px;height: 100%;margin: 0 auto;    border-top: 5px solid #f2f2f2;}
.title {width: 100%;font-size: 24px;font-family: 'Merriweather', serif;color:#333;font-weight: 600;top: 0;left: 1px;position: relative;border-radius: 3px 3px 0 0;letter-spacing: 0.2px;padding-top: 2px;}
.logo{position: absolute;right: 3px;bottom: 1px;font-size: 12px;font-weight:600;letter-spacing:-0.3px;color: #848484;text-transform:uppercase;letter-spacing: 0.2px;transition:opacity 0.6s ease;}
.source {position: absolute;left: 1px;bottom: 1px;font-weight:300;font-size: 10px;color: #848484;border-top: 0.6px solid #f2f2f2;width: 100%;padding-top: 4px;text-transform:uppercase;}
.source a {text-decoration: none;color: #848484;font-weight:600;text-transform:none;}
.source a:hover {text-decoration: none;color: #000;}

.updated{position: absolute;right: 3px;bottom: 1px;font-size: 10px;font-weight:600;letter-spacing:-0.3px;color: #848484;text-transform:uppercase;letter-spacing: 0.2px;transition:opacity 0.6s ease;}
.updated span{ position:relative;left:2px; }
.logo.hide, .updated.hide{ opacity:0; }

.legend{       
	position: relative;
    top: 12px;
    width: 192px;
    padding: 14px 0px;
    margin: 0 14px;
    text-transform: uppercase;
    letter-spacing: 0.2px; 
}

.legend .key{ position: relative;display: inline-block;margin-right: 12px;    margin-bottom: 5px; }

.legend .key:before{ content:'';display:inline-block;position:relative;left:0;top:0;background:#000;width:14px;height:14px;margin-right: 6px; }

.legend #prod:before{ background:rgba(250,190,166,1); }
.legend #proe:before{ background:rgba(141,126,167,1); }
.legend #ind:before{ background:rgba(89,89,89,1); }
.legend #empty:before{ background:rgba(204,204,204,1); }

.total{
	position: absolute;
    top: 42px;
    right: 32px;
    background: #eee;
    padding: 20px 12px;
    font-size: 18px;
    font-weight: 500;
}


.total span{
	font-size: 48px;
    top: 0;
    position: relative;
    vertical-align: middle;
}

.charts{     position: relative;
    top: 80px;
    width: 98%;
    margin: 0 1%;
    display: block;}

.charts .outsidebar{
	position: relative;
    top: 0;
    width: 100%;
    height: 52px;
    background: #fff;
}

.charts .outsidebar .bar{
	position:relative;
	width:1%;
	margin:0 1px;
	height:100%;
	display:inline-block;
	text-align: center;
	transition:width 0.4s ease;
}

.charts .outsidebar #prodbar{ background:rgba(250,190,166,1);transition:width 0.6s ease; }
.charts .outsidebar #proebar{ background:rgba(141,126,167,1);transition:0.6s width 0.6s ease; }
.charts .outsidebar #indbar{ background:rgba(89,89,89,1);transition:0.6s width 1.2s ease; }
.charts .outsidebar #emptybar{ background:rgba(204,204,204,1);transition:0.6s width 1.8s ease; }



.charts .outsidebar .bar .label{
	position: absolute;
    display: inline-block;
	top:72px;
    width: 100%;
	left:0;
	/* background:#fff; */
}

.charts .outsidebar .bar .label .value{
	font-size:15px;
	font-weight:600;
	background:#fff;
}

.charts .outsidebar .bar .label .per{ background:#fff;}

.charts .outsidebar #prodbar .label{}
.charts .outsidebar #prodbar .label:before{
    content: '';
    position: absolute;
    width: 1px;
    background: #000;
    height: 32px;
    display: block;
    margin: 0 calc(50% - 0.5px);
    top: -38px;
}

.charts .outsidebar #proebar .label,
.charts .outsidebar #emptybar .label{ top:-52px; }
.charts .outsidebar #proebar .label:before,
.charts .outsidebar #emptybar .label:before{
	content: '';
    position: absolute;
    width: 1px;
    background: #000;
    height: 32px;
    display: block;
    margin: 0 calc(50% - 0.5px);
    top: 38px;
}

.charts .outsidebar #indbar .label{}
.charts .outsidebar #indbar .label:before{
	content: '';
    position: absolute;
    width: 1px;
    background: #000;
    height: 32px;
    display: block;
    margin: 0 calc(50% - 0.5px);
    top: -38px;
}

.controls{ position: absolute;width: 220px;display: inline-block;right: 12px;top: 42px; }
.controls .control{ position: relative;width: 48%;margin: 0 1%;display: inline-block;text-align: center;border: 1px solid #ccc;color: #ccc;padding:3px 0;cursor:pointer; }
.controls .control:hover{ color:#555;border-color:#555; }
.controls .control.active{ color:#000;border-color:#000;cursor:default; }

.desktopsrc{display:inline-block;}
.mobilesrc{display:none;}
@media screen and (min-width: 700px){
	.charts .chart .value{ font-size:48px;}
}
@media screen and (max-width: 690px){
	.charts{ top:68px;width:94%; margin:0 3%;}
	.total{ top:88px;}
}
@media screen and (max-width: 450px){
	.controls { right: 0;left: 0;height: 44px;text-align: center;width: 100%;bottom: 36px;top: unset;}
	.controls .control { width: 120px;margin: 0 4px;padding: 12px 0; }
	.total{     right: 8px;
    width: 132px;
    text-align: center;     top: 66px;}
	.legend .key{ font-size:13px; }
	.charts{
		width:92%; margin:0 4%;
	}
}
@media screen and (max-width: 380px){
	.title{ font-size:18px;}
	.total{ top:58px; }
}
@media screen and (max-width: 350px){
	.desktopsrc{display:none;}
	.mobilesrc{display:inline-block;}
	
	/* .charts .outsidebar .bar{ margin:0 2px;} */
	
}
@media screen and (max-width: 320px){
	.total{ font-size:14px;width:100px;top:72px;}
	.total span{ font-size:32px;}
	/* .charts .outsidebar .bar{ margin:0 4px;} */
}
@media screen and (max-width: 290px){
	.charts .chart .value{ font-size:20px;}
}