
                                                 
           
                                                 
@define stats-graph-line-color: #669CED;
@define stats-graph-gradient-color: #344d7333;
@define stats-graph-guide-color: #50855050;
@define stats-graph-guide-color-text: #99ff99;
@define stats-graph-line-thickness: 3;
@define stats-graph-line-softness: 1;

@define stats-graph-background-line-color: #3f3f3f3f;
@define stats-graph-background-line-thickness: 2;
@define stats-graph-background-line-softness: 1;


.linegraph__root {
	width: 100%;
	height: 270px;

	horizontal-align:center;

  	             	

	                           	   
}


.linegraph__outer {
	height: 100%;
	width: 100%;

	padding-bottom: 40px;
	padding-left: 40px;

	padding-top: 20px;
	padding-right: 30px;	
}

.linegraph__container {

	width:100%;
	height: 100%;
	flow-children: down;

	horizontal-align:center;
	vertical-align: center;

	                           	   
}

.linegraph__container__background {

	background-color: gradient( linear, 0% 100%, 0% 0%, from( #00000090), to( #50505010 ) );

	width: 100%;
	height: 100%;

	flow-children: right;

	border-bottom: 1px solid rgba( 255,255,255,0.1);
	border-left: 1px solid rgba( 255,255,255,0.1);
}

.linegraph__container__background__x-axis__gridline {

	width: -1px;
	height: 100%;

	transform: translateX( -1px);

	border-left: 1px solid rgba( 255,255,255,0.1);
  	                                               

	overflow: noclip;

}

#LinegraphTodayLabel {
	horizontal-align: right;
}

#LinegraphStartLabel {
	horizontal-align: left;
	width: 100px;
	transform: translateX( -50px) translateY( 20px);
}


.linegraph__xaxis_label {

	text-align: center;
    font-size: 10px;
	color: rgb(194, 191, 191);
	text-transform: uppercase;
	vertical-align:bottom;
	transform: translateX( 0px ) translateY( 20px);
}

.linegraph__yaxis-range_label,
.linegraph__yaxis_label
{
	visibility: visible;
	text-align: center;
    font-size: 10px;
	vertical-align: top;

	overflow:noclip;
}


.linegraph__yaxis_label{
color: stats-graph-guide-color-text;
transform: translateX( 25px ) translateY( -5px);
horizontal-align: right;

}

.linegraph__yaxis-range_label{
	transform: translateX( -5px ) translateY( -6px);
	text-align: right;
	color: rgb(194, 191, 191);
}

.no-data .linegraph__yaxis_label,
.no-data .linegraph__yaxis-range_label,
{
	visibility: collapse;
}

#GraphContainer{
	opacity: 1;

	                                 
	                                   
	                                 
	-s2-mix-blend-mode: SRGBadditive;

}

.linegraph__graph{

	transition-property:  clip;
	transition-duration: 2s;
	transition-timing-function: ease-out;


}


.linegraph__graph--appear {

  	                                 

}

.linegraph__graph--hide {

  	                                

}

.stat-selection-button-container
{
	flow-children: right;
	horizontal-align: center;

	tooltip-position: bottom;

  	                                          

}


.stat-display-panel
{
	margin: 0px 2px 0px 0px;
    text-align: center;
	width: 68px;

	tooltip-position: top;
}

                                                         
.RadioBox
{
	visibility: collapse;
}
RadioButton:selected Label {
	
}
#StatSelectionButtonContainer RadioButton Label
{
	margin-left: 0px;
}


.stat-name-container
{
    background-color: rgba(63, 62, 62, 0.767);
    padding: 4px;
    horizontal-align: center;
	width: 100%;
	height: 20px;
}

                                             
 
                                
 

                           
 
                        
    
.stat-name-container Label
{
    text-align: center;
    font-size: 12px;
	color: rgb(194, 191, 191);
	horizontal-align: center;
	text-transform: uppercase;

  	             

	
	font-family: Stratum2 Bold Monodigit, 'Arial Unicode MS';
}

.period-stats-container
{
    background-color: rgba(0, 0, 0, 0.4);
    flow-children: down;
    border-radius: 1px;
    padding: 4px 2px 2px 2px;
	width: 100%;

	transition-property:  brightness, background-color;
	transition-duration: 0.2s;
	transition-timing-function: ease-in;	
}

.period-stats-container Label {
	                      
	                            

  	                                                         
	letter-spacing: 1px;
	font-size: 14px;
	color: white;
}

.no-data .period-stats-container Label {
	opacity: 0;
}


.period-stats-container__bar {
	width: 100%;
	height: 30px;
	border-bottom: 1px solid rgba(0,0,0,0.3);

}

.period-stats-container__value { 
	vertical-align: center;
	horizontal-align: right;
	margin-right: 4px;
}


Label.period-stats-container__value--normal{
	color:stats-graph-line-color;
}

Label.period-stats-container__rank{
	color:stats-graph-guide-color-text;
}

.stat-button__graph {
	width: 100%;
}
.stat-button__graph__image {
	horizontal-align: left;
	width: 12px;
	height: 12px;
}


.stat-tooltip {
	tooltip-position: top;
}

.stat-button__selection-highlight
{
	opacity: 0;
	background-color: white;
	width: 100%;
	height: 4px;
	horizontal-align: center;
	vertical-align: bottom;
}

.stat-button:selected .stat-button__selection-highlight
{
	opacity: 1;
}

.graph-body
{
    width: 100%;
	height: 100%;

	horizontal-align: center;
}

.graph-point-mouse-target
{
    width:10px;
	height:10px;
	transform: translateX(-5px) translateY(-5px);	
}

.graph-point-mouse-target:hover
{
	brightness:10;
}

.graph-point
{
    width:8px;
	height:width-percentage( 100%);
	border-radius: 50%;
	border: 2px solid black;
    background-color: rgba( 255, 255, 255, 0.3);
	                                                   

	                                       

	horizontal-align: center;
	vertical-align: center;

	pre-transform-scale2d: 0.1;

	transition-property:  pre-transform-scale2d;
	transition-duration: 0.2s;
	transition-timing-function: ease-in;	

}

.graph-point-avg
{
    width:8px;
	height:width-percentage( 100%);
	border-radius: 50%;

	background-color: rgba(255,255,255,0.5);
    border: 2px solid black;
	transform:  translateX(-4px) translateY(-4px);

	pre-transform-scale2d: 0.1;

	transition-property:  pre-transform-scale2d;
	transition-duration: 0.2s;
	transition-timing-function: ease-in;		
}

.graph-body.active-graph .graph-point--reveal
{
	pre-transform-scale2d: 1;
}

.show-graph{

	animation-name: show-graph;
    animation-duration: 0.3s;
	animation-timing-function: ease-out;
	animation-fill-mode: forwards;
	animation-iteration-count: 1;
	
}

.hide-graph{

	animation-name: hide-graph;
    animation-duration: 0.3s;
	animation-timing-function: ease-out;
	animation-fill-mode: forwards;
	animation-iteration-count: 1;
}

@keyframes 'show-graph'
{
	0%
	{
		clip: rect( 0%, 0%, 100%, 0% );
	}
	100%
	{
		clip: rect( 0%, 100%, 100%, 0% );
	}
}

@keyframes 'hide-graph'
{
	0%
	{
		clip: rect( 0%, 100%, 100%, 0% );
	}
	100%
	{
		clip: rect( 0%, 100%, 100%, 100% );
		
	}
}

.loading-spinner
{
	height: 25%;
	width: height-percentage(100%);
	horizontal-align: center;
	vertical-align: center;
	visibility: collapse;
}

.stats-loading .loading-spinner
{
	visibility: visible;
}

.graph-container
{
	flow-children: none;
	width: 100%;
	height: 100%;
}

.hidden
{
	visibility: collapse;
}