html {
    height: 100%;
 }
body {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
div.play {
	width: 160px;
	height:160px;
	background:url('data:image/svg+xml;utf8,<svg width="409" height="409" viewBox="0 0 409 409" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 204.111C13 98.5677 98.5677 13 204.11 13C309.659 13 395.221 98.5674 395.22 204.111C395.22 309.656 309.659 395.221 204.11 395.221C98.5676 395.221 13 309.656 13 204.111Z" fill="black" fill-opacity="0.2" stroke="white" stroke-width="26"/><path d="M160.179 294.415L286.547 221.944C303.551 212.19 303.551 196.376 286.547 186.624L160.179 114.158C143.175 104.41 129.398 112.383 129.398 131.985V276.581C129.398 296.178 143.176 304.165 160.179 294.415Z" fill="white"/></svg>');
	background-size: 100%;
	position:absolute;
	top: 50%;
	left:50%;
	margin-top:-80px;
	margin-left:-80px;
	z-index:10;
}

.jamContainer {
	border-width: 0;
	border-style: solid;
}

#singleChartContainer {
	position:absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	overflow:hidden;
}

#singleChartContainer {
	font-size:1vh; /* this will determine the em size of child elements */
}

.notAvailable {
	background: #fafafa;
}

div.notAvailable > div {
	font-size: 4em;
	text-align: center;
	position: relative;
	top: 50%;
	margin-top:  -2em;
}

.chartSpacer {
	/* use !important to override bootstrap ".ratio > *" css */
	position:absolute !important; 
	height:100% !important;
	width:100% !important;
	left: 75% !important;
	bottom: 50% !important;
	top: auto !important;
}
.priceTicker {
	color: #fff;
	text-shadow: 0px 1px 2px rgba(0,0,0,0.1);
	z-index:10;
}

.priceTicker {
	display: none; /* only show after played */
	position:absolute;
	top: 100%;
	height: 10em;
	margin-top:-10em;
	left: 0;
	width: 20%;
	text-align:right;
	line-height:normal;
	font-family: WagnerGrotesk;
	font-weight: normal;
}
.dollarSign {
	font-size:3em;
}
.priceField {
	font-size:5em;
}
.priceTime {
	display: none;
}
.chart {
	position:absolute;
	bottom: 0px;
	left: -70%;
	height: 100%;
	width:100%;
}
.dot {
	position:absolute;
	height:40px;
	margin-bottom: 0px;
	opacity:100%;
	z-index: 3;
}
.dot > div {
	border-radius: 0.5vh;
	position: absolute;
	left: 2px;
	height: 100%;
	bottom: 2px;
	width: 100%;
	z-index:5;
	opacity:0%;
}

.dot.delta {
	z-index: 2;
	mix-blend-mode: screen;
}

.dot.delta > div {
	background: rgba(255,255,255,0.5);
	border-radius: 0.5vh;
}
.dot.delta.increase > div {
	background: rgba(20,20,200,1.0);
}
.dot.delta.decrease > div {
	background: rgba(200,20,20,1.0);
	top: -2px;
}

.dot.value.playing > div {
	background-color: #fff !important;
}
.dot.ETH.played > div, .dot.ETH.playing > div, .thumbnail .dot.ETH > div {
	opacity:100%;
}
.dot.BTC > div {
	display:none;
}
/*.dot.BTC.playing > div {
	display:block;
}
*/
@keyframes vibrate { 
	0% { 
		margin-left:0px;
		margin-right:0px;
	} 
	100% {
		margin-left:4px;
		margin-right: -4px;
	}
}
@keyframes revealDelta {
	0%, 20% {
		width: 100%;
		height: 0;
	}
	100% {
		width:100%;
		height: 100%;
	}
}
@keyframes revealValue { 
	0% { 
		box-shadow: 0px 0px 10em 10em rgba(255,255,255, 1.0);
		width:300%;
	} 

	50% {
		box-shadow: 0px 0px 5em 1em rgba(255,255,255, 0.8);
		width:100%;
	}
	100% {
		box-shadow: 0px 0px 5em 1em rgba(255,255,255, 0.8);
		width:100%;
	}
}
.dot span.tooltip {
	display:none;
	position:absolute;
	font-weight:bold;
	top:0px;left:20%; width:100px;
	margin-left:-125px;
	color:#ffffff;
	text-align: center;
	z-index:9999999;
	font-size: 2em;
}
.stripe {
	position:absolute;
	left:-100%;
	right:-100%;
}

.territory {
	position:absolute;
	left:-100%;
	right:-100%;
	margin-bottom:  2px;
}
.change.territory {
	mix-blend-mode: screen;
	opacity: 90%;
	z-index: 2;
}
.range.territory {
	background:  rgba(0,0,0,0.1);
	mix-blend-mode: color-burn;
	z-index: 1;
}
.tonic {
	position:absolute;
		transform: scaleY(0);

	left:-100%;
	right:-100%;	
}