.barchart-line-row {text-align: left; padding: 10px 0;}
.barchart-line-row > div {display: inline-block; vertical-align: middle;}
.barchart-line-row .barchart-label,
.barchart-line-row .barchart-data {font-family: "Titillium Web", RazerF5, Arial, Helvetica, sans-serif; font-weight: 700;position: relative;}
.barchart-line-row .barchart-label span {display: block;}
.barchart-line-row .barchart-label .text {text-transform: uppercase;}
.barchart-line-row .barchart-label.left {width: 25%; text-align: right; padding-right: 20px;}
.barchart-line-row .barchart-label.right span {color: #fff;}
.barchart-line-row .barchart-label.left .text {font-size: 0.875rem; line-height: 14px;}
html:lang(fr-CA), 
html:lang(zh-CN) {
	.barchart-line-row .barchart-label.left .text {font-size: 0.6rem;}
}
.barchart-line-row .barchart-label.left .number {font-size: 23.6px; line-height: 25px; text-transform: uppercase;}
.barchart-line-row .barchart-label.right .text {font-size: 9.18px; line-height: 12px;}
.barchart-line-row .barchart-label.right .number {font-size: 19.67px; line-height: 22px;}
.barchart-line-row .barchart-data {height: 70px; margin-right: 8px;padding-left:10px;font-size: 18px; line-height: 70px;color:#000;}
.barchart-line-row.fill-green-dark .barchart-label.left span {color: #267319;}
.barchart-line-row.fill-green-dark .barchart-data {background: linear-gradient(270deg, rgba(25,75,16,1) 0%, rgba(38, 115, 25, 1) 50%);}
.barchart-line-row.fill-green .barchart-label.left span {color: #44d62c;}
.barchart-line-row.fill-green .barchart-data {background: linear-gradient(270deg, rgba(25,75,16,1) 0%, rgba(68,214,44,1) 50%);}
.barchart-line.fill-blue .barchart-label.left span {color: #3396c4;}
.barchart-line-row.fill-blue .barchart-data {background: linear-gradient(270deg, rgba(15,45,58,1) 0%, rgba(51,150,196,1) 50%);}
.barchart-line-row.fill-red .barchart-label.left span {color: #ff0000;}
.barchart-line-row.fill-red .barchart-data {background: linear-gradient(270deg, rgba(94,0,0,1) 0%, rgba(255,0,0,1) 50%);}
.barchart-line-row.fill-yellow .barchart-label.left span {color: #fbed20;}
.barchart-line-row.fill-yellow .barchart-data {background: linear-gradient(270deg, rgba(94,88,0,1) 0%, rgba(251,237,32,1) 50%);}
.barchart-line-row.fill-pink .barchart-label.left span {color: #fd65d8;}
.barchart-line-row.fill-pink .barchart-data {background: linear-gradient(270deg, rgba(134,31,123,1) 0%, rgba(253,101,216,1) 50%);}
.barchart-line-row.fill-purple .barchart-label.left span {color: #5824ef;}
.barchart-line-row.fill-purple .barchart-data {background: linear-gradient(270deg, rgba(38,29,128,1) 0%, rgba(88,36,239,1) 50%);}
.barchart-line-row.fill-mint .barchart-label.left span {color: #25dfe1;}
.barchart-line-row.fill-mint .barchart-data {background: linear-gradient(270deg, rgba(0,94,100,1) 0%, rgba(37,223,225,1) 50%);}
.barchart-freehtml-container .wrapper{position: relative;}
.barchart-freehtml-container .faster{
  position: absolute;
  right: 0;
  bottom:10%;
  text-align: left;
  color:#fff;
  font-size: 3rem;
  line-height: 3.5rem;
  font-weight: bold;
  font-family: "Titillium Web",RazerF5,Arial,Helvetica,sans-serif;
  text-transform: uppercase;
	 width: 44%;
}
.razer-rtl .barchart-freehtml-container .faster {
	text-align: right;
}
.razer-rtl .barchart-line-row .barchart-label.left {text-align: left;}
.barchart-freehtml-container .faster-bar{
  display: block;
  height: 160px;
  width: 52%;  
  position: absolute;
  right: 0;
  bottom:0;
  border-left: 1px dashed #fff;
  border-right: 1px dashed #fff;
}
.barchart-freehtml-container .faster-bar .faster-bar-line { 
  background-color:#53ff38;
  display: block;
  position: absolute;
  left: 0;
  top:50%;
	 height: 1px;
	 width: 100%;
	&::before,
	&::after {
	  content: "";
	  position: absolute;
	  top: 50%;
	  width: 10px;
	  height: 10px;
	  border-top: 2px solid #53ff38;
	  border-right: 2px solid #53ff38;
	  transform: translateY(-50%);
	}
		&::before {
	  left: 0;
	  transform: translateY(-50%) rotate(-135deg);
	}
		&::after {
	  right: 0;
	  transform: translateY(-50%) rotate(45deg);
	}
}
.barchart-freehtml-container .faster .percent{
  color:#44d62c;
  display: block;
  font-size: 5.5rem;
  font-weight: 700;
  line-height: 5rem;
}
.barchart-line-row.row-m .barchart-data {width: 33%;}
.barchart-line-row.row-product .barchart-data {width: 13.5%;}
.barchart-line-row.row-n .barchart-data {width: 28%;}
.barchart-line-row.row-l .barchart-data {width: 70%;}
@media (min-width: 768px) {
  .barchart-line-row .barchart-data br{display:none;}
 }
@media (max-width: 767px) {
  .barchart-freehtml-container {display: block;}	
	.barchart-freehtml-container .faster-bar {height: 165px;} 
  .barchart-line-row .barchart-label.left {padding-right: 10px;}
  .barchart-line-row .barchart-label.left .text {font-size: 0.75rem; line-height: 0.75rem;}
  .barchart-line-row .barchart-label.left .number {font-size: 17px; line-height: 20px;}
  .barchart-line-row .barchart-label.right .text {font-size: 8px; line-height: 10px;}
  .barchart-line-row .barchart-label.right .number {font-size: 17px; line-height: 20px;}
    .barchart-line-row .barchart-data {line-height: 18px;padding-top: 6px; font-size: 16px; padding-left: 8px;} 
      .barchart-freehtml-container .faster{font-size: 1.5rem;line-height: 1.5rem;bottom: 27%;width: 40%}
  .barchart-freehtml-container .faster .percent{font-size: 2.5rem;line-height: 2.5rem;} 
 html:lang(fr-CA) {
		.barchart-freehtml-container .faster-bar {height: 160px;} 
 }	
	html:lang(de-DE) {
			.barchart-line-row .barchart-label.left .text {
   		 font-size: 0.75rem;
		    line-height: 14px;
		 }
	  .barchart-freehtml-container .faster{font-size: 1.3rem;}
  	.barchart-freehtml-container .faster .percent{font-size: 2.3rem;} 
	} 	
}
@media(max-width: 400px) {
	html:lang(fr-CA) {			
			.barchart-freehtml-container .faster-bar {height: 165px;} 
	}
}
@media (max-width: 380px) {
	html:lang(fr-CA) {
			.barchart-line-row .barchart-label.left .text {font-size: 0.6rem;}			
	}
	html:lang(zh-CN) {
		.barchart-line-row .barchart-label.left .text {font-size: 0.5rem;}
	}
}
@media (max-width: 320px) {
		.barchart-line-row .barchart-label.left .text {font-size: 10px;}
   .barchart-line-row .barchart-label.left .number {font-size: 14px;}
	.barchart-line-row .barchart-data {font-size: 14px;}
	.barchart-freehtml-container .faster {width: 40%}
	html:lang(zh-CN),
	html:lang(de-DE) {
		.barchart-freehtml-container .faster-bar {
        height: 177px;
    }
	}
	html:lang(fr-CA) {			
			.barchart-freehtml-container .faster-bar {height: 170px;} 
	}
}
 @media screen and (max-width:767px){} @media screen and (-webkit-max-device-pixel-ratio: 1) and (min-width: 1200px), screen and (min-width: 768px) and (max-width: 1200px){} @media screen and (-webkit-min-device-pixel-ratio: 1) and (min-width: 1200px){} @media screen and (-webkit-min-device-pixel-ratio: 1.5) and (min-width: 1200px){}