<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">/*******************************************************************************************************************************************
 *******************************************************************************************************************************************

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

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

/** BLOCK : DIPSTICK **********************************************************************************************************************
 ******************************************************************************************************************************************/

.dipstick{
    background-color: rgba(0, 0, 0, .2);
    border-radius: 15px;
    box-shadow: inset 0 4px 8px 0 rgba(0,0,0,0.2);
    overflow: hidden;
    padding: 3px;
    position: relative;
    text-indent: -999em;
}

/** ELEMENT : MASK ***********************************************************************************************************************
 ******************************************************************************************************************************************/

.dipstick__mask,
.dipstick__mask--positive,
.dipstick__mask--negative{
	border-radius: 15px;
	overflow: hidden;
}
.dipstick__mask--gauge{
	position: relative;
	z-index: 1;
}
.dipstick__mask--positive,
.dipstick__mask--negative{
	position: absolute;
	left: 3px;
	right: 3px;
	top: 3px;
	bottom: 3px;
}
.dipstick__mask--positive{
	z-index: 0;
}
.dipstick__mask--negative{
	z-index: 3;
}

/** ELEMENT : MASK__VALUE *****************************************************************************************************************
 ******************************************************************************************************************************************/

.dipstick,
.dipstick__mask--gauge,
.dipstick__mask__preview,
.dipstick__mask__value{
	height: 12px;
	transition: width 1s;
}
.body--ltr .dipstick__mask__value{
	float: left;
}
.body--rtl .dipstick__mask__value{
	float: right;
}
.dipstick__mask__value:not(.width-100){
	background: #fff;
}
.dipstick__mask__value.width-100{
	background: #F6CE1D;
}
.dipstick__mask__value.width-100::after{
	background-size: 1rem 1rem;
	border-radius: 15px;
	bottom: 0;
	content: "";
	display: block;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
}
/** fallback for IE &amp; Edge *********************************************************************************************************/
body:not(.body--edge):not(.body--ie11) .dipstick__mask__value.width-100{
	background-blend-mode: soft-light;
	background-image: linear-gradient(to top, #000000, #ffffff);
	will-change: opacity; /* BUG CHROME TOUJOURS LE METTRE*/
}
body:not(.body--edge):not(.body--ie11) .dipstick__mask__value.width-100::after{
	background-image: linear-gradient(-45deg,rgba(0,0,0,0.3) 25%,transparent 25%,transparent 50%,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.3) 75%,transparent 75%,transparent);
	mix-blend-mode: soft-light;
}

/** ELEMENT : PREVIEW *********************************************************************************************************************
 ******************************************************************************************************************************************/

.dipstick__mask__preview{
	top: 0;
	position: absolute;
	box-sizing: border-box;	
	border-style: solid;
	border-color: #fff;
}
.dipstick__mask__preview::after{
	background-size: 1rem 1rem;
	bottom: 0;
	content: "";
	display: block;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
}
/** fallback for IE &amp; Edge *********************************************************************************************************/
body:not(.body--edge):not(.body--ie) .dipstick__mask__preview{
	background-blend-mode: soft-light;
	background-image: linear-gradient(to top, #000000, #ffffff);
	will-change: opacity; /* BUG CHROME TOUJOURS LE METTRE*/
}
body:not(.body--edge):not(.body--ie) .dipstick__mask__preview::after{
	background-image: linear-gradient(-45deg,rgba(0,0,0,0.3) 25%,transparent 25%,transparent 50%,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.3) 75%,transparent 75%,transparent);
	mix-blend-mode: soft-light;
}
.body--ltr .dipstick__mask__preview{
	border-width: 2px 2px 2px 0;
}
.body--rtl .dipstick__mask__preview{
	border-width: 2px 0 2px 2px;
}

/** PREVIEW MODIFIER : POSITIVE ***********************************************************************************************************
 ******************************************************************************************************************************************/

.dipstick__mask__preview--positive{
	background-color: #7DD2FE;
	z-index: 0;
}
.body--ltr .dipstick__mask__preview--positive{
	border-radius: 15px 0 0 15px;
}
.body--rtl .dipstick__mask__preview--positive{
	border-radius: 0 15px 15px 0;
}

/** PREVIEW MODIFIER : NEGATIVE ***********************************************************************************************************
 ******************************************************************************************************************************************/

.dipstick__mask__preview--negative{
	background-color: #e25353;
	z-index: 2;
}

</pre></body></html>