canvas.board {
	position: fixed;
	left: 5px;
	top: 5px;
	font-family: sans-serif;
}

canvas.bonusWheel {
	width: 300px;
	height: 120px;
	font-family: sans-serif;
}

canvas.spiralPowerMeter {
	position: absolute;
	left: 0px;
	width: 100px;
	height: 100px;
	font-family: sans-serif;
}

button.bonusWheel {
	border: 1px solid #0F0;
	color: #0F0;
	background: #050;
	border-radius: 20px;
	font-family: sans-serif;
	font-size: 1em;
	margin-top: 2.5px;
	margin-bottom: 2.5px;
	transition-duration: 250ms;
}

button.bonusWheel:disabled {
	border: 1px solid #080;
	color: #080;
	background: #555;
}

div.hyperContainer {
	border-radius: 15px;
	padding: 5px;
	margin: 2.5px;
	width: 250px;
	text-align: center;
	border: 2px solid #880;
	background: #220;
	color: #FF0;
	font-family: sans-serif;
}

div.hyperMeterBorder {
	border: 2px solid #FF0;
	height: 10px;
}

button.hyperSystem {
	border: 1px solid #FF0;
	color: #FF0;
	background: #550;
	border-radius: 20px;
	font-family: sans-serif;
	font-size: 1em;
	margin-top: 2.5px;
	margin-bottom: 2.5px;
	transition-duration: 250ms;
}

button.hyperSystem:disabled {
	border: 1px solid #880;
	color: #880;
	background: #555;
}

div.hyperMeterFill {
	background: #FF0;
	height: 10px;
}

div.overdrive {
	color: #0FF;
}

div.spiralContainer {
	border-radius: 15px;
	padding: 5px;
	margin: 2.5px;
	text-align: center;
	border: 2px solid #080;
	background: #020;
	color: #0F0;
	font-family: sans-serif;
}

div.spiralMeterBorder {
	border: 2px solid #0F0;
	height: 10px;
}

div.spiralMeterFill {
	background: #0F0;
	height: 10px;
}

button.notification {
	float: right;
	border: 2px solid #000;
	border-radius: 5px;
	font-size: 20px;
	vertical-align: center;
	overflow-y: hidden;
	font-family: sans-serif;
}

div.notifications {
	position: fixed;
	top: 3px;
	right: 3px;
	font-family: sans-serif;
}

div.flavorText {
	font-style: italic;
}

div.small {
	font-size: 0.75em;
}

td.rightUI {
	font-family: sans-serif;
}

div.menuPadding {
	height: 5px;
	clear: both;
}

div.bonusWheel {
	clear: both;
}

div.upgradesContainer, div.upgradesSubContainer, div.machinesContainer, div.statsContainer, div.optionsContainer {
	border-radius: 15px;
	clear: both;
	padding: 5px;
	font-family: sans-serif;
	margin: 2.5px;
}

div.upgradesContainer, div.upgradesSubContainer {
	border: 2px solid #080;
	vertical-align: top;
}

div.upgradesContainerLight, div.upgradesSubContainerLight {
	background: #CFC;
}

div.upgradesContainerDark, div.upgradesSubContainerDark {
	background: #030;
}

div.upgradesSubContainer {
	clear: none;
	display: inline-block;
}

div.machinesContainerLight {
	border: 2px solid #088;
	background: #CFF;
}

div.machinesContainerDark {
	border: 2px solid #088;
	background: #033;
}

div.statsContainerLight {
	border: 2px solid #008;
	background: #CCF;
}

div.statsContainerDark {
	border: 2px solid #008;
	background: #003;
}

div.statsSection {
	padding-top: 5px;
	padding-right: 5px;
	display: inline-block;
}

div.statsRow {
	display: block;
}

div.optionsContainerLight {
	border: 2px solid #808;
	background: #FCF;
}

div.optionsContainerDark {
	border: 2px solid #808;
	background: #303;
}

span.upgradeHeaderNew {
	font-family: sans-serif;
	color: #F00;
}

button.upgradesHeader, button.upgradesSubHeader, button.machinesHeader, button.statsHeader, button.optionsHeader {
	width: 100%;
	border: none;
	text-align: center;
	outline: none;
	font-weight: bold;
	font-family: sans-serif;
}

button.upgradesHeader, button.machinesHeader, button.statsHeader, button.optionsHeader {
	font-size: 1.5em;
}

button.upgradesSubHeader {
	font-size: 1.2em;
}

button.upgradesHeaderLight, button.upgradesSubHeaderLight {
	background: #CFC;
	color: #000;
}

button.upgradesHeaderDark, button.upgradesSubHeaderDark {
	background: #030;
	color: #FFF;
}

button.machinesHeaderLight {
	background: #CFF;
	color: #000;
}

button.machinesHeaderDark {
	background: #033;
	color: #FFF;
}

button.statsHeaderLight {
	background: #CCF;
	color: #000;
}

button.statsHeaderDark {
	background: #003;
	color: #FFF;
}

button.optionsHeaderLight {
	background: #FCF;
	color: #000;
}

button.optionsHeaderDark {
	background: #303;
	color: #FFF;
}

div.upgradesContents, div.machinesContents, div.statsContents, div.optionsContents {
	line-height: 1.2em;
	font-family: sans-serif;
	font-size: 1em;
	overflow: hidden;
}

div.upgradeButtonWrapper {
	display: inline-block;
	margin: 2.5px;
}

button.upgradeButton, button.rubyUpgradeButton, button.sapphireUpgradeButton, button.emeraldUpgradeButton, button.topazUpgradeButton, button.turquoiseUpgradeButton, button.amethystUpgradeButton, button.opalUpgradeButton, button.opalStaticUpgradeButton, button.eightBallUpgradeButton, button.beachBallUpgradeButton, button.rubberBandBallUpgradeButton, button.spiralBallUpgradeButton {
	border: 1px solid #000;
	border-radius: 10px;
	font-family: sans-serif;
	font-size: 1em;
	padding: 5px;
	transition-duration: 250ms;
}

button.upgradeButtonMaxedShrink {
	transition-delay: 250ms;
	font-size: 0.6em;
}

button.upgradeButtonLight {
	background: #8C8;
	color: #000;
}

button.upgradeButtonDark {
	background: #383;
	color: #FFF;
}

button.upgradeButtonLight:disabled {
	background: #888;
	color: #000;
}

button.upgradeButtonDark:disabled {
	background: #555;
	color: #FFF;
}

button.rubyUpgradeButtonLight {
	background: #F88;
	color: #000;
}

button.rubyUpgradeButtonDark {
	background: #833;
	color: #FFF;
}

button.rubyUpgradeButtonLight:disabled {
	background: #A77;
	color: #000;
}

button.rubyUpgradeButtonDark:disabled {
	background: #300;
	color: #FFF;
}

button.sapphireUpgradeButtonLight {
	background: #88F;
	color: #000;
}

button.sapphireUpgradeButtonDark {
	background: #338;
	color: #FFF;
}

button.sapphireUpgradeButtonLight:disabled {
	background: #77A;
	color: #000;
}

button.sapphireUpgradeButtonDark:disabled {
	background: #003;
	color: #FFF;
}

button.emeraldUpgradeButtonLight {
	background: #8F8;
	color: #000;
}

button.emeraldUpgradeButtonDark {
	background: #383;
	color: #FFF;
}

button.emeraldUpgradeButtonLight:disabled {
	background: #7A7;
	color: #000;
}

button.emeraldUpgradeButtonDark:disabled {
	background: #030;
	color: #FFF;
}

button.topazUpgradeButtonLight {
	background: #FF8;
	color: #000;
}

button.topazUpgradeButtonDark {
	background: #883;
	color: #FFF;
}

button.topazUpgradeButtonLight:disabled {
	background: #AA7;
	color: #000;
}

button.topazUpgradeButtonDark:disabled {
	background: #330;
	color: #FFF;
}

button.turquoiseUpgradeButtonLight {
	background: #8FF;
	color: #000;
}

button.turquoiseUpgradeButtonDark {
	background: #388;
	color: #FFF;
}

button.turquoiseUpgradeButtonLight:disabled {
	background: #7AA;
	color: #000;
}

button.turquoiseUpgradeButtonDark:disabled {
	background: #033;
	color: #FFF;
}

button.amethystUpgradeButtonLight {
	background: #F8F;
	color: #000;
}

button.amethystUpgradeButtonDark {
	background: #838;
	color: #FFF;
}

button.amethystUpgradeButtonLight:disabled {
	background: #A7A;
	color: #000;
}

button.amethystUpgradeButtonDark:disabled {
	background: #303;
	color: #FFF;
}

button.eightBallUpgradeButton {
	background: #000;
	color: #FFF;
}

button.eightBallUpgradeButtonLight:disabled {
	background: #888;
	color: #000;
}

button.eightBallUpgradeButtonDark:disabled {
	background: #555;
	color: #FFF;
}

@-webkit-keyframes opalUpgradeButtonLightColor {
	0% { background: #F88; }
	17% { background: #FF8; }
	33% { background: #8F8; }
	50% { background: #8FF; }
	67% { background: #88F; }
	83% { background: #F8F; }
	100% { background: #F88; }
}

@-webkit-keyframes opalUpgradeButtonDarkColor {
	0% { background: #833; }
	17% { background: #883; }
	33% { background: #383; }
	50% { background: #388; }
	67% { background: #338; }
	83% { background: #838; }
	100% { background: #833; }
}

@-webkit-keyframes opalUpgradeButtonLightDisabledColor {
	0% { background: #A77; }
	17% { background: #AA7; }
	33% { background: #7A7; }
	50% { background: #7AA; }
	67% { background: #77A; }
	83% { background: #A7A; }
	100% { background: #A77; }
}

@-webkit-keyframes opalUpgradeButtonDarkDisabledColor {
	0% { background: #300; }
	17% { background: #330; }
	33% { background: #030; }
	50% { background: #033; }
	67% { background: #003; }
	83% { background: #303; }
	100% { background: #300; }
}

button.opalUpgradeButtonLight {
	background: white;
	color: #000;
	-webkit-animation-name: opalUpgradeButtonLightColor;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-duration: 2s;
}

button.opalUpgradeButtonDark {
	background: black;
	color: #FFF;
	-webkit-animation-name: opalUpgradeButtonDarkColor;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-duration: 2s;
}

button.opalUpgradeButtonLight:disabled {
	background: #AAA;
	color: #000;
	-webkit-animation-name: opalUpgradeButtonLightDisabledColor;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-duration: 2s;
}

button.opalUpgradeButtonDark:disabled {
	background: #333;
	color: #FFF;
	-webkit-animation-name: opalUpgradeButtonDarkDisabledColor;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-duration: 2s;
}

button.opalStaticUpgradeButtonLight {
	background: repeating-linear-gradient(
		135deg,
		#F88,
		#FF8 10px,
		#8F8 20px,
		#8FF 30px,
		#88F 40px,
		#F8F 50px,
		#F88 60px
	);
	color: #000;
}

button.opalStaticUpgradeButtonLight:disabled {
	background: repeating-linear-gradient(
		135deg,
		#A77,
		#AA7 10px,
		#7A7 20px,
		#7AA 30px,
		#77A 40px,
		#A7A 50px,
		#A77 60px
	);
	color: #000;
}

button.opalStaticUpgradeButtonDark {
	background: repeating-linear-gradient(
		135deg,
		#A33,
		#AA3 10px,
		#3A3 20px,
		#3AA 30px,
		#33A 40px,
		#A3A 50px,
		#A33 60px
	);
	color: #FFF;
}

button.opalStaticUpgradeButtonDark:disabled {
	background: repeating-linear-gradient(
		135deg,
		#300,
		#330 10px,
		#030 20px,
		#033 30px,
		#003 40px,
		#303 50px,
		#300 60px
	);
	color: #FFF;
}

button.beachBallUpgradeButtonLight {
	background: repeating-linear-gradient(
		45deg,
		#F88,
		#F88 10px,
		#FF8 10px,
		#FF8 20px,
		#8F8 20px,
		#8F8 30px,
		#8FF 30px,
		#8FF 40px,
		#88F 40px,
		#88F 50px,
		#F8F 50px,
		#F8F 60px
	);
	color: #000;
}

button.beachBallUpgradeButtonLight:disabled {
	background: repeating-linear-gradient(
		45deg,
		#A77,
		#A77 10px,
		#AA7 10px,
		#AA7 20px,
		#7A7 20px,
		#7A7 30px,
		#7AA 30px,
		#7AA 40px,
		#77A 40px,
		#77A 50px,
		#A7A 50px,
		#A7A 60px
	);
	color: #000;
}

button.beachBallUpgradeButtonDark {
	background: repeating-linear-gradient(
		45deg,
		#A33,
		#A33 10px,
		#AA3 10px,
		#AA3 20px,
		#3A3 20px,
		#3A3 30px,
		#3AA 30px,
		#3AA 40px,
		#33A 40px,
		#33A 50px,
		#A3A 50px,
		#A3A 60px
	);
	color: #FFF;
}

button.beachBallUpgradeButtonDark:disabled {
	background: repeating-linear-gradient(
		45deg,
		#300,
		#300 10px,
		#330 10px,
		#330 20px,
		#030 20px,
		#030 30px,
		#033 30px,
		#033 40px,
		#003 40px,
		#003 50px,
		#303 50px,
		#303 60px
	);
	color: #FFF;
}

button.rubberBandBallUpgradeButtonLight {
	background: repeating-linear-gradient(
		120deg,
		#AFA,
		#AFA 5px,
		#FAA 5px,
		#FAA 10px,
		#AAF 10px,
		#AAF 15px,
		#FFA 15px,
		#FFA 20px,
		#AFF 20px,
		#AFF 25px,
		#FAF 25px,
		#FAF 30px
	);
	color: #000;
}

button.rubberBandBallUpgradeButtonLight:disabled {
	background: repeating-linear-gradient(
		120deg,
		#8A8,
		#8A8 5px,
		#A88 5px,
		#A88 10px,
		#88A 10px,
		#88A 15px,
		#AA8 15px,
		#AA8 20px,
		#8AA 20px,
		#8AA 25px,
		#A8A 25px,
		#A8A 30px
	);
	color: #000;
}

button.rubberBandBallUpgradeButtonDark {
	background: repeating-linear-gradient(
		120deg,
		#282,
		#282 5px,
		#822 5px,
		#822 10px,
		#228 10px,
		#228 15px,
		#882 15px,
		#882 20px,
		#288 20px,
		#288 25px,
		#828 25px,
		#828 30px
	);
	color: #FFF;
}

button.rubberBandBallUpgradeButtonDark:disabled {
	background: repeating-linear-gradient(
		120deg,
		#030,
		#030 5px,
		#300 5px,
		#300 10px,
		#003 10px,
		#003 15px,
		#330 15px,
		#330 20px,
		#033 20px,
		#033 25px,
		#303 25px,
		#303 30px
	);
	color: #FFF;
}

button.spiralBallUpgradeButtonLight {
	background: repeating-radial-gradient(
		circle at -5px,
		#7D7,
		#7D7 5px,
		#8F8 5px,
		#8F8 10px
	);
	color: #000;
}

button.spiralBallUpgradeButtonLight:disabled {
	background: repeating-radial-gradient(
		circle at -5px,
		#787,
		#787 5px,
		#898 5px,
		#898 10px
	);
	color: #000;
}

button.spiralBallUpgradeButtonDark {
	background: repeating-radial-gradient(
		circle at -5px,
		#282,
		#282 5px,
		#060 5px,
		#060 10px
	);
	color: #FFF;
}

button.spiralBallUpgradeButtonDark:disabled {
	background: repeating-radial-gradient(
		circle at -5px,
		#030,
		#030 5px,
		#010 5px,
		#010 10px
	);
	color: #FFF;
}

button.machineButton {
	border: 1px solid #000;
	border-radius: 10px;
	font-family: sans-serif;
	font-size: 1em;
	padding: 5px;
	transition-duration: 250ms;
}

button.machineButtonLight {
	background: #8CC;
	color: #000;
}

button.machineButtonDark {
	background: #388;
	color: #FFF;
}

button.machineButtonLight:disabled {
	background: #888;
	color: #000;
}

button.machineButtonDark:disabled {
	background: #555;
	color: #FFF;
}

button.statsButton, button.optionButton, button.optionButtonRed {
	border: 1px solid #000;
	border-radius: 20px;
	font-family: sans-serif;
	font-size: 1em;
	margin-top: 2.5px;
	margin-bottom: 2.5px;
}

button.statsButtonLight {
	background: #88C;
	color: #000;
}

button.statsButtonDark {
	background: #338;
	color: #FFF;
}

button.optionButtonLight {
	background: #C8C;
	color: #000;
}

button.optionButtonDark {
	background: #838;
	color: #FFF;
}

button.optionButtonRedLight {
	background: #F88;
	color: #000;
}

button.optionButtonRedDark {
	background: #833;
	color: #FFF;
}

div.messageBox {
	display: block;
	font-size: 1em;
	font-family: sans-serif;
}

div.messageBoxLight {
	color: #000;
	a:link { color: #00E; }
	a:visited { color: #551A8B; }
	a:link:active, :visited:active { color: #F00; }
}

div.messageBoxDark {
	color: #FFF;
	a:link { color: #08E; }
	a:visited { color: #A3F; }
	a:link:active, :visited:active { color: #F00; }
}

span.messageBoxLarge {
	font-size: 2.2em;
	font-weight: bolder;
}

button.dropZone {
	border: 0px;
	position: fixed;
	background: #0F0;
	opacity: 0.25;
	transition-duration: 200ms;
	font-family: sans-serif;
}

button.dropZone:disabled {
	background: #F00;
	transition-duration: 200ms;
}

.tooltip {
	width: 200px;
	background-color: #555;
	color: #fff;
	text-align: center;
	border-radius: 5px;
	padding: 5px;
	position: fixed;
	z-index: 100;
	font-family: sans-serif;
	font-size: 1em;
}

.modal {
	display: none;
	position: fixed;
	z-index: 255;
	left: 0px;
	top: 0px;
	overflow: auto;
	background-color: rgba(0,0,0,0.3);
}

.modalContent {
	font-family: sans-serif;
	border-radius: 20px;
	border: 3px solid #888;
}

.modalContentLight {
	background-color: #fff;
	color: #000;
}

.modalContentDark {
	background-color: #000;
	color: #fff;
}

.modalCloseButton {
	float: right;
	font-size: 2em;
	font-weight: bold;
}

.modalCloseButtonLight {
	color: #aaa;
}

.modalCloseButtonDark {
	color: #888;
}

.modalCloseButton:hover,
.modalCloseButton:focus {
	text-decoration: none;
	cursor: pointer;
}

.modalCloseButtonLight:hover,
.modalCloseButtonLight:focus {
	color: #000;
}

.modalCloseButtonDark:hover,
.modalCloseButtonDark:focus {
	color: #FFF;
}

textarea.exportedSave {
	padding: 5px;
	font-family: monospace;
	overflow-wrap: break-word;
}

textarea.exportedSaveLight {
	background-color: #fff;
	color: #000;
	border: 1px solid #000;
}

textarea.exportedSaveDark {
	background-color: #000;
	color: #fff;
	border: 1px solid #fff;
}

span.prismaticText {
	background-clip: text;
	color: transparent;
}

span.spellCard {
	color: #F88;
}

@-webkit-keyframes prismaticTextLightColor {
	0% { color: #C00; }
	17% { color: #CC0; }
	33% { color: #0C0; }
	50% { color: #0CC; }
	67% { color: #00C; }
	83% { color: #C0C; }
	100% { color: #C00; }
}

@-webkit-keyframes prismaticTextDarkColor {
	0% { color: #F88; }
	17% { color: #FF8; }
	33% { color: #8F8; }
	50% { color: #8FF; }
	67% { color: #88F; }
	83% { color: #F8F; }
	100% { color: #F88; }
}

span.prismaticTextLight {
	background: #FFF;
	color: #000;
	-webkit-animation-name: prismaticTextLightColor;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-duration: 2s;
}

span.prismaticTextDark {
	background: #000;
	color: #FFF;
	-webkit-animation-name: prismaticTextDarkColor;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-duration: 2s;
}

div.speedrunTimerContainer {
	text-align: center;
	position: fixed;
	left: 5px;
	bottom: 5px;
}

span.speedrunTimer {
	font-family: monospace;
	font-size: 1.5em;
	font-weight: bolder;
}

span.speedrunTimerActiveLight {
	color: #080;
}

span.speedrunTimerActiveDark {
	color: #0F0;
}

span.speedrunTimerCompleted, span.speedrunTimerSplit {
	font-weight: bold;
}

span.speedrunTimerCompletedLight, span.speedrunTimerSplitLight {
	color: #00F;
}

span.speedrunTimerCompletedDark, span.speedrunTimerSplitDark {
	color: #0FF;
}

span.warning {
	color: #F00;
	font-weight: bold;
}

span.arrows {
	font-weight: bolder;
	font-family: monospace;
}