/********************************************************************
5.9. Progress BAR
*********************************************************************/
 [class*="sao-progress-item-"]{
	 float:right;
	 margin-top:var(--sao-pg-gp,20px);
	 width:100%;
	 position:relative;
 	 
 }
 .sao-progress-item-1{
	 margin-top:0px !important;
 }
 
.sao-progress-title-warp {
    float: right;
    width: 100%;
		font-size:var(--sao-tl-fn-sz,var(--sao-fn-md)) !important;
		line-height:1em;
margin:0 0 12px !important;
}

.sao-progress-title {
    float: right;
	margin:0 0 0em !important;
    line-height:inherit;
	color:var(--sao-tl-cr,var(--sao-lk-cr)) !important;
	font-size:var(--sao-tl-fn-sz,var(--sao-fn-md)) !important;
   	font-weight:var(--sao-tl-fn-wt,700);
   	font-style:var(--sao-tl-fn-st,normal);
}

.sao-progress-percent {
    float: left;	 
	margin:0 0 0em !important;
	color:var(--sao-pr-cr,var(--sao-tl-cr,var(--sao-lk-cr))) !important;
    line-height:inherit;
		font-size:var(--sao-pr-fn-sz,var(--sao-fn-md)) !important;
     	font-weight:var(--sao-pr-fn-wt,700);
   	font-style:var(--sao-pr-fn-st,normal);	

}
  
.sao-bar-warp {
    position: relative;
	width: 100%;
	float: right;
	overflow:hidden;
 
	background:var(--sao-bar-wp-bg,rgba(0,0,0,0.15));
	border-radius:var(--sao-bar-wp-rd,0px);
	border:var(--sao-bar-wp-br,none);
}
  .sao-bar {
    overflow: hidden;
    position: relative;
	width:0%;
	height:var(--sao-bar-ht,30px);

	float:right;
 	background:var(--sao-bar-bg,blue);
	border-radius:var(--sao-bar-rd,0px);
   transition-property: width;
	 transition-duration:var(--sao-dr,2000ms) ;

}
 
 [class*="sao-progress-item-"].animated .sao-bar  {
    overflow: hidden;
    position: relative;
	width:var(--sao-pr) !important;
	   transition-property: width;
	 transition-duration:var(--sao-dr,2000ms) ;

}
.sao-bar-candy::before {
 	content:"";
  width: 100% ;
 height: 100% ;
 float:right;
    background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.25) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0.25) 75%, transparent 75%, transparent);
    background-repeat: repeat;
    background-size: 30px 30px;
}

.sao-bar-candy.sao-bar-candy-rtl::before {
     animation: progressStripertl .6s linear infinite;
}
 

@keyframes progressStripertl {
    to {
        background-position: 30px 0;
    }
}

 
.sao-progress-bar-style-2 .sao-progress-title-warp,
.sao-progress-bar-style-3 .sao-progress-title-warp,
.sao-progress-bar-style-4 .sao-progress-title-warp{
	position:absolute;
	line-height:var(--sao-bar-ht,30px);
	width:100%;
	height:100%;
	right:0px;
	top:0px;
	z-index:1;
	padding:0 1em;
	 
}
.sao-progress-bar-style-2 .sao-progress-title,
.sao-progress-bar-style-3 .sao-progress-title,
.sao-progress-bar-style-4 .sao-progress-title
 {
	color:var(--sao-tl-cr,#ffffff);
}
.sao-progress-bar-style-4 .sao-progress-title::before {
    content: ":";
    float: left;
}
.sao-progress-bar-style-4 .sao-progress-percent{
	float:right;
 color:var(--sao-pr-cr,#ffffff);

		margin-right:0.5em;

}
/*************************************** Pie Chart ******************************/
.sao-json{
	display:none;
}


.sao-chart-percent {
    position: absolute;
    right: 50%;
    top: 50%;
    transform: translate(50%, -50%);
    
    font-size: 1.5em;
    font-style: normal;
    vertical-align: top;
    line-height: 3em;
    display: inline-block;
    font-style: normal;
    vertical-align: top;
    display: inline-block;
		color:var(--sao-pr-cr,var(--sao-lk-cr)) !important;

	font-size:var(--sao-pr-fn-sz,calc(var(--sao-fn-lg) * 1.5)) !important;

 	font-weight:var(--sao-pr-fn-wt,400);
 }

.sao-chart {
    vertical-align: top;
    width: auto;
    display: inline-block;
    position: relative;	 border-radius:50%;
   	border:var(--sao-cht-br);
 	 box-shadow: var(--sao-cht-out-sd,0px 0px);
}

.sao-chart::before{
	 content:"";
	 position:absolute;
	 top:0px;
	 width:100%;
	 border-radius:50%;
	 right:0;
	 height:100%;
	 border-width: var(--sao-bar-sz,5px);
	 border-style:solid;
	 border-color:transparent;
	 z-index:1;
	 pointer-events: none; 

	 box-shadow: var(--sao-cht-ins-sd,0px 0px) inset;
 
 }
.sao-chart canvas {
	 background: var(--sao-cht-bg,none);
    transform: rotate(90deg);
	border-radius:50%;vertical-align: top;
	 
  }

 
 /*************************************** Pie Chart ******************************/
body .sao-count-number {
 	margin-top:var(--sao-dt-mg-tp,var(--sao-pd)) !important;
     line-height: 1em;
	 		color:var(--sao-num-cr,var(--sao-lk-cr)) !important;

	font-size:var(--sao-num-fn-sz,calc(var(--sao-fn-lg) * 2));
 	font-weight:var(--sao-num-fn-wt,400);
}
body .sao-count  .sao-line,
 body .sao-count .sao-title{
 	margin-top:var(--sao-tl-mg-tp,var(--sao-mg-tp)) !important;
	 
 }
 
 
@media (max-width: 1199px) {
body .sao-count-number {
 	margin-top: var(--sao-pd)  !important;
 
	font-size: calc(var(--sao-fn-lg) * 1.5) !important;
 	 
}
 body .sao-count .sao-title,
body .sao-count  .sao-line {
 	margin-top: var(--sao-mg-tp) !important;
	 
} 
}