/***********************************************************************************************************************************/
/* GAUGES **************************************************************************************************************************/
/***********************************************************************************************************************************/

.gauge {
    overflow: hidden;
    position: relative;
}
.gauge-inner {
    display: block;
}

/***********************************************************************************************************************************/
/* GAUGE-STYLE-1 *******************************************************************************************************************/
/***********************************************************************************************************************************/

.gauge-style-1 {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background: rgba(0, 0, 0, 0.4);
    height: 7px;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}
.gauge-style-1-gauge {
    display: block;
    overflow: hidden;
}
.gauge-style-1,
.gauge-style-1-gauge {
    border-radius: 4px;
}
.gauge-style-1-gauge.width-0,
.gauge-style-1-gauge.width-100 {
    border: medium none;
    height: 7px;
}
.gauge-style-1-inner {
    background: #fff;
    border-radius: 3px;
    height: 5px;
    overflow: hidden;
    width: 100%;
    width: calc(100% - 2px); /* for mobile browsers who support it */
    margin: 1px;
}
.gauge-style-text{
	margin: 0;
	font-size: 0.75rem;
	text-align: center;
}

/***********************************************************************************************************************************/
/* GAUGE-STYLE-2 *******************************************************************************************************************/
/***********************************************************************************************************************************/
.gauge-style-2 {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background: rgba(0, 0, 0, 0.2);
    height: 9px;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}
.gauge-style-2-gauge {
    display: block;
    overflow: hidden;
}
.gauge-style-2,
.gauge-style-2-gauge {
    border-radius: 4px;
}
.gauge-style-2-gauge.width-0,
.gauge-style-2-gauge.width-100 {
    border: medium none;
    height: 9px;
}
.gauge-style-2-inner {
    background: #e6ff70;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    height: 7px;
    overflow: hidden;
    width: 100%;
}
.gauge-style-text{
    margin: 0;
    font-size: 0.75rem;
    text-align: center;
}

/***********************************************************************************************************************************/
/* GAUGE-STYLE-3 *******************************************************************************************************************/
/***********************************************************************************************************************************/
.gauge-style-3 {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background: white;
    height: 7px;
    width: 90%;
    margin: auto;
}
.gauge-style-3-gauge {
    display: block;
    overflow: hidden;
}
.gauge-style-3,
.gauge-style-3-gauge {
    border-radius: 4px;
}
.gauge-style-3-gauge.width-0,
.gauge-style-3-gauge.width-100 {
    border: medium none;
    height: 9px;
}
.gauge-style-3-inner {
    background: red;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    height: 7px;
    overflow: hidden;
    width: 100%;
}

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

.circle-gauge {
    border-style: solid;
    border-width: 1px;
    box-sizing: border-box;
    position: relative;
    background-color: rgba(0, 0, 0, 0.2);
}
.circle-gauge span {
    display: block;
}
.circle-gauge .trophypicture {
    margin: 20px auto 0;
}
.circle-item {
    border-style: solid;
    position: absolute;
    transition: all 1s;
}
.circle-item-left,
.circle-item-right {
    z-index: 1;
}
.circle-item-off {
    border-style: solid;
    overflow: hidden;
    position: absolute;
    text-align: center;
    z-index: 0;
}
.circle-wrapper-left,
.circle-wrapper-right {
    position: absolute;
    z-index: 1;
}
.circle-style-1 {
    border-color: #55564c;
    border-radius: 32px;
    height: 64px;
    width: 64px;
}
.circle-style-1 .circle-item {
    border-radius: 48px;
    border-width: 7px;
    height: 48px;
    width: 48px;
}
.circle-style-1 .circle-item-left,
.circle-style-1 .circle-item-right {
    clip: rect(0px, 32px, 64px, 0px);
}
.circle-style-1 .circle-item-left,
.circle-style-1 .circle-item-right {

   border-color: #55564c;
}
.circle-style-1 .circle-item-off {
   /* border-color: rgba(0, 0, 0, 0.4);*/
    border-width: 7px;
    font-weight: normal;
    line-height: 48px;
   	color: #fff;
}
.circle-style-1 .circle-item-off span{
    line-height: initial;
}
.circle-style-1 .circle-wrapper-left { 
    clip: rect(0px, 64px, 64px, 30px);
}
.circle-style-1 .circle-wrapper-left,
.circle-style-1 .circle-wrapper-right {
    height: 64px;
    width: 64px;
}
.circle-style-1 .circle-wrapper-right {
    clip: rect(0px, 30px, 64px, 0px);
}
.circle-style-1 .circle-item-off,
.circle-style-1 .circle-wrapper-left,
.circle-style-1 .circle-wrapper-right {
    left: 0;
    top: 0;
}

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

.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;
}

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

.pass-gauge {
    width: 100%;
    height: 44px;
    border: 1px solid #fff;
    border-radius: 5px;
    box-shadow: 2px 2px 5px rgba(0,0,0,.2) inset;
    position: relative;
    top: 4px;
    background-color: rgba(0, 0, 0, 0.1);
}
.pass-gauge div {
    border: 1px solid #748301;
    background: #a4c601;
    background: -moz-linear-gradient(top,#a4c601 0,#829700 100%);
    background: -webkit-linear-gradient(top,#a4c601 0,#829700 100%);
    background: linear-gradient(to bottom,#a4c601 0,#829700 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a4c601', endColorstr='#829700', GradientType=0 );
    border-radius: 5px;
    height: 35px;
    padding: 7px 0 0;
}

/***********************************************************************************************************************************
 ######      ###    ##     ##  ######   ########          ######  ##    ## #### ##       ##               ########  ##          ###    ##    ## ######## ######## ########  ######  
##    ##    ## ##   ##     ## ##    ##  ##               ##    ## ##   ##   ##  ##       ##               ##     ## ##         ## ##   ###   ## ##          ##    ##       ##    ## 
##         ##   ##  ##     ## ##        ##               ##       ##  ##    ##  ##       ##               ##     ## ##        ##   ##  ####  ## ##          ##    ##       ##       
##   #### ##     ## ##     ## ##   #### ######   #######  ######  #####     ##  ##       ##       ####### ########  ##       ##     ## ## ## ## ######      ##    ######    ######  
##    ##  ######### ##     ## ##    ##  ##                     ## ##  ##    ##  ##       ##               ##        ##       ######### ##  #### ##          ##    ##             ## 
##    ##  ##     ## ##     ## ##    ##  ##               ##    ## ##   ##   ##  ##       ##               ##        ##       ##     ## ##   ### ##          ##    ##       ##    ## 
 ######   ##     ##  #######   ######   ########          ######  ##    ## #### ######## ########         ##        ######## ##     ## ##    ## ########    ##    ########  ######  
***********************************************************************************************************************************/
.gauge-skill-planetes .simple-step-gauge-on {
    height: 15px;
    width: 15px;
    background-position: 0 -15px;
    display: inline-block;
    background-repeat: no-repeat;
}


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

/** cell ******************************************************************************************************************************/
.gaugefragment__table__cell:first-child{
    border-radius: 15px 0 0 15px;
}
.gaugefragment__table__cell:last-child{
    border-radius: 0 15px 15px 0;
}

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


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

.gaugespecialtoken{
    border-radius: 4px;
    border: 1px solid #AF9C8C;
}
.gaugespecialtoken .gaugeview{
    margin-top: 10px;
    margin-bottom: 10px
}
.gaugespecialtoken__divine{
    height: 55px;
    margin-top: -24px;
    margin-bottom: -13px;
    width: 55px;
}