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

.gaugeview{
	direction: ltr;
	padding: 3px 15px;
	border-radius: 12px; /* = gaugeview's height / 2 */
	color: #fff;
	font-weight: bold;
	font-size: 16px;
	line-height: 1;
}
/** first cell *************************************************************************************************************************/
.gaugeview .first,
.gaugeview .last{
	white-space: nowrap;
}
.gaugeview .first{
	text-align: left;
}
body#equideo .gaugeview .first,
.body--ltr .gaugeview .first{
	padding-right: 10px;
}

/** middle cell *************************************************************************************************************************/
.gaugeview .middle{
	width: 100%;
}
/** last cell *************************************************************************************************************************/
.gaugeview .last{
	text-align: right;
	padding-left: 10px;
}
.body--ltr .gaugeview .last{
	padding-left: 10px;
}

/** image *************************************************************************************************************************/
.gaugeview img,
.gaugeview .pix {
	width: 48px;
	height: 48px;
	margin-top: -15px;
	margin-bottom: -15px;
	vertical-align: middle;
}
body#equideo .gaugeview img,
.gaugeview img,
.gaugeview .pix{
	margin-right: -10px;
}


/* MODIFIER :  GAUGEVIEW--WHITE ****************************************************************************************************/
/***********************************************************************************************************************************/

.gaugeview:not(.gaugeview--white){
	background-color: rgba(0, 0, 0, .3);
}
.gaugeview--white{
	background-color: rgba(255, 255, 255, .3);
}

/* MODIFIER :  GAUGEVIEW--S ********************************************************************************************************/
/***********************************************************************************************************************************/

.gaugeview--s{
	font-size: 13px;
}
.gaugeview--s .dipstick,
.gaugeview--s .dipstick__mask,
.gaugeview--s .dipstick__preview,
.gaugeview--s .dipstick__mask__value{
	height: 8px;
}
.gaugeview--s img,
.gaugeview--s .pix{
	width: 32px;
	height: 32px;
	margin-top: -9px;
	margin-bottom: -9px;
}

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

.gaugefragment{
	background-color: rgba(0, 0, 0, .3);
	border-radius: 15px;
    overflow: hidden;
}
/** container *****************************************************************************************************************************/
.gaugefragment__table{
    display: table;
    border-spacing: 3px;
    table-layout: fixed;
    width: 100%;
    height: 24px;
}
/** fragment ******************************************************************************************************************************/
.gaugefragment__table__cell{
	background-color: rgba(0, 0, 0, .2);
	box-shadow: inset 0 4px 8px 0 rgba(0,0,0,0.2);
    display: table-cell;
    box-sizing: border-box;
    height: 100%;
    overflow: hidden;
}
/** inner ********************************************************************************************************************************/
.gaugefragment__table__cell--fill{
    display: block;
    height: 100%;
    background: #fff;
}

/* MODIFIER :  GAUGEFRAGMENT--S ****************************************************************************************************/
/***********************************************************************************************************************************/

.gaugefragment--s .gaugefragment__table {
	height: 14px;
}

.gaugeview--s img,
.gaugeview--s .pix {
	width: 32px;
	height: 32px;
	margin-top: -9px;
	margin-bottom: -9px;
}

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

.gaugefragmentview{
	padding: 3px 15px;
	border-radius: 12px; /* = gaugefragmentview's height / 2 */
	border-collapse: separate;
	color: #fff;
	font-weight: bold;
	font-size: 16px;
	line-height: 1;
}
.gaugefragmentview:not(.gaugefragmentview--white){
	background-color: rgba(0, 0, 0, .3);
}
.gaugefragmentview--white{
	background-color: rgba(255, 255, 255, .3);
}
body#equideo .gaugefragmentview,
.body--ltr .gaugefragmentview{
	direction: ltr;
}
.gaugefragmentview .gaugefragment__table{
	height: 18px;
}
.gaugefragmentview .first,
.gaugefragmentview .last{
	white-space: nowrap;
}
.gaugefragmentview .first{
	text-align: left;
}
body#equideo .gaugefragmentview .first,
.body--ltr .gaugefragmentview .first{
	padding-right: 10px;
}
.gaugefragmentview .middle{
	width: 100%;
}
.gaugefragmentview .last{
	text-align: right;
	padding-left: 10px;
}
body#equideo .gaugefragmentview .last,
.body--ltr .gaugefragmentview .last{
	padding-left: 10px;
}
.gaugefragmentview img,
.gaugefragmentview .pix{
	width: 48px;
	height: 48px;
	margin-top: -15px;
	margin-bottom: -15px;
	vertical-align: middle;
}
body#equideo .gaugefragmentview img,
.gaugefragmentview img,
.gaugefragmentview .pix{
	margin-right: -10px;
}


/* MODIFIER :  FRAGMENTGAUGEVIEW--S ********************************************************************************************************/
/***********************************************************************************************************************************/

.gaugefragmentview--s{
	font-size: 13px;
}
.gaugefragmentview--s .gaugefragment__table{
	height: 14px;
}
.gaugefragmentview--s img,
.gaugefragmentview--s .pix{
	width: 32px;
	height: 32px;
	margin-top: -9px;
	margin-bottom: -9px;
}