/*******************************************************************************************************************************************
 *******************************************************************************************************************************************

 ######      ###    ##     ##  ######   ########  ######  
##    ##    ## ##   ##     ## ##    ##  ##       ##    ## 
##         ##   ##  ##     ## ##        ##       ##       
##   #### ##     ## ##     ## ##   #### ######    ######  
##    ##  ######### ##     ## ##    ##  ##             ## 
##    ##  ##     ## ##     ## ##    ##  ##       ##    ## 
 ######   ##     ##  #######   ######   ########  ######  

*******************************************************************************************************************************************
**************************** see http://www.dev.equideow.com/doc/ for more details ********************************************************
*******************************************************************************************************************************************
*******************************************************************************************************************************************/

/*******************************************************************************************************************************************
 ######      ###    ##     ##  ######   ########    ######## ########     ###     ######   ##     ## ######## ##    ## ######## 
##    ##    ## ##   ##     ## ##    ##  ##          ##       ##     ##   ## ##   ##    ##  ###   ### ##       ###   ##    ##    
##         ##   ##  ##     ## ##        ##          ##       ##     ##  ##   ##  ##        #### #### ##       ####  ##    ##    
##   #### ##     ## ##     ## ##   #### ######      ######   ########  ##     ## ##   #### ## ### ## ######   ## ## ##    ##    
##    ##  ######### ##     ## ##    ##  ##          ##       ##   ##   ######### ##    ##  ##     ## ##       ##  ####    ##    
##    ##  ##     ## ##     ## ##    ##  ##          ##       ##    ##  ##     ## ##    ##  ##     ## ##       ##   ###    ##    
 ######   ##     ##  #######   ######   ########    ##       ##     ## ##     ##  ######   ##     ## ######## ##    ##    ##    
*******************************************************************************************************************************************/

/** fragment (ltr) ***********************************************************************************************************************/
.body--ltr .gaugefragment__table__cell:first-child{
    border-radius: 15px 0 0 15px;
}
.body--ltr .gaugefragment__table__cell:last-child{
    border-radius: 0 15px 15px 0;
}
.body--ltr .gaugefragment-fragment:first-child::before,
.body--ltr .gaugefragment-fragment:first-child .gaugefragment-inner{
	border-radius: 15px 0 0 15px;
}
.body--ltr .gaugefragment-fragment:first-child::before{
	left: 0;
}
.body--ltr .gaugefragment-fragment:last-child{
	padding: 0 0 0 2px;
	border-radius: 0 15px 15px 0;
	overflow: hidden;
}
.body--ltr .gaugefragment-fragment:last-child::before{
	border-radius: 0 15px 15px 0;
}
.body--ltr .gaugefragment-fragment:not(:last-child)::after{
	right: -2px;
}
/** fragment (rtl) ***********************************************************************************************************************/
.body--rtl .gaugefragment__table__cell:first-child{
    border-radius: 0 15px 15px 0;
}
.body--rtl .gaugefragment__table__cell:last-child{
    border-radius: 15px 0 0 15px;
}


/*******************************************************************************************************************************************
 ######  #### ########   ######  ##       ########  ######      ###    ##     ##  ######   ######## 
##    ##  ##  ##     ## ##    ## ##       ##       ##    ##    ## ##   ##     ## ##    ##  ##       
##        ##  ##     ## ##       ##       ##       ##         ##   ##  ##     ## ##        ##       
##        ##  ########  ##       ##       ######   ##   #### ##     ## ##     ## ##   #### ######   
##        ##  ##   ##   ##       ##       ##       ##    ##  ######### ##     ## ##    ##  ##       
##    ##  ##  ##    ##  ##    ## ##       ##       ##    ##  ##     ## ##     ## ##    ##  ##       
 ######  #### ##     ##  ######  ######## ########  ######   ##     ##  #######   ######   ######## 
*******************************************************************************************************************************************/

.circlegauge{
 	position: relative;
 	width: 64px;
 	height: 64px;
}
.circlegauge::after{
 	border-radius: 64px;
 	border: 8px solid rgba(0,0,0,.3);
 	bottom: 0;
 	left: 0;
 	right: 0;
 	top: 0;
  	box-sizing: border-box;
  	content: "";
  	position: absolute;
  	z-index: 0;
}

/** content *******************************************************************************************************************************/
.circlegauge__content{
 	display: table;
 	position: absolute;
 	left: 8px;
 	top: 8px;
 	z-index: 2;
 	border-radius: 48px;
 	width: 48px;
 	height: 48px;
 	overflow: hidden;
}
.circlegauge__content__inner{
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}
.circlegauge__content__inner .svg{
	display: block;
	width: 24px;
	height: 24px;
	margin: 0 auto;
}

/** container *****************************************************************************************************************************/
.circlegauge__container{
 	position: absolute;
 	z-index: 1;
 	left: 2px;
 	top: 2px;
}
.circlegauge__container--left{
	clip: rect(0, 60px, 60px, 30px);
}
.circlegauge__container--right{
	clip: rect(0, 30px, 60px, 0);
}
.circlegauge__container__element{
	position: absolute;
	box-sizing: border-box;
	border-radius: 60px;
	border: 4px solid #fff;
	clip: rect(0, 30px, 60px, 0);
}
.circlegauge__container,
.circlegauge__container__element{
	width: 60px;
	height: 60px;
}

/** circlegauge:  svg *****************************************************************************************************************************/
.circlegauge__svg{
	position: absolute;
	z-index: 2;
	box-sizing: border-box;
	border-radius: 50%;
	height: 24px;
	width: 24px;
	padding: 6px;
	right: -6px;
	top: -6px;
}

/** circlegauge:  badge *****************************************************************************************************************************/
.circlegauge__badge{
	position: absolute;
	z-index: 2;
	box-sizing: border-box;
	border-radius: 50%;
	height: 24px;
	width: 24px;
	padding: 6px;
	left: -6px;
	top: -6px;
}