style.css

@font-face {
	font-family: "Mario";
	src: url(font.ttf) format("truetype");
}


.displayNone {
	display: none !important;
}
.displayInit {
}

.visible {
	visibility: visible !important;
	opacity: 1 !important;
}
.hidden {
	visibility: hidden !important;
	opacity: 0 !important;
}
.visibilityTransition {
-webkit-transition: visibility .25s, opacity .25s;
   -moz-transition: visibility .25s, opacity .25s;
		transition: visibility .25s, opacity .25s;
}


body {
	font-family: Helvetica, Segoe UI, Arial, sans-serif;
	background-image: url(img/bgs/default.jpg);
	background-color: #0060d7;
	background-position-x: center;
	background-position-y: center;
	background-repeat-x: no-repeat;
	background-repeat-y: no-repeat;
	background-attachment: fixed;
-webkit-background-size: cover;
   -moz-background-size: cover;
		background-size: cover;
	overflow-y: scroll;

	color: #111111;
	font-size: 20px;
	margin: 0;
}

a {
	font-size: 20px;
	white-space: nowrap;
	color: #1C00D6;
	cursor: pointer;
	text-decoration: none;
	transition: color .15s;
}
a:hover {
	color: inherit;
	text-decoration: none;
}

input:not([type]) {
	width: 170px;
}
input:not([type]), textarea {
	font-family: sans-serif;
	font-size: 18px;
	padding: 0px 3px;
	border: 1px solid #c8ccd4;
	border-radius: 3px;
	outline: none !important;
	background: #6871f123;
}

html, body, #bodyContainer {
	height: 100%;
	overflow: hidden;
}

#bodyContainer {
	height: calc(100% - 86px);
	padding: 8px;
	margin-top: 70px;
	overflow: auto scroll;
}

noscript > span {
	position: absolute;
	top: 0;
	left: 0;
	background-color: black;
	padding: 10px;
	margin: 5px;
	border: 2px solid yellow;
	color: white;
	border-radius: 1.2rem;
	z-index: 9999;
}

/* == Global == */
.marginLeft {
	padding-left: 50px;
}
.draggable {
	cursor: pointer;
}
.nowrap {
	white-space: nowrap;
}
.relative {
	position: relative;
}
.fullOpacity {
	opacity: 1 !important;
}
.fullOpacity:hover {
	opacity: .9 !important; /* I have absolutely no idea if this is supposed to be .9 or if it was a mistake */
}
.fullOpacity:active {
	opacity: 1 !important;
}

.titleText {
	font-family: 'Mario';
	font-size: 20px;
	color: #1F1F1F;
}

/* == Scrollbar == */
::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

::-webkit-scrollbar-track {
	border-radius: 10px;
	margin: 8px 0;
	background-color: #dadada8a;
	box-shadow: inset 2px 2px 2px #00000036;
}

::-webkit-scrollbar-thumb {
	border-radius: 10px;
	background-color: #70c9e0;
	box-shadow: inset -2px -2px 2px #00000036;
}
::-webkit-scrollbar-thumb:hover {
	background-color: #6abfd5;
}
::-webkit-scrollbar-thumb:active {
	background-color: #5da5b8;
	box-shadow: inset 2px 2px 2px #00000036;
}
::-webkit-scrollbar-corner {
	display: none;
}

/* == Counters == */
#playerContainer {
	white-space: nowrap;
}
.player {
	display: inline-block;
	margin-top: 30px;

	flex-wrap: wrap;
	flex-direction: column;
	align-content: flex-start;
	justify-content: space-between;
}
.player .draggable {
	display: none;
}
.player .characterDiv {
	display: block;
}
.counterText {
	font-size: 22px;
	color: white;
	font-family: 'Mario';
	position: relative;
	top: -4px;
}
.counterBelow100::before {
	content: 'x';
}
.counterDisplay {
	height: 35px;
	margin-left: 15px;
}
.characterImg {
	margin-right: 65px;
	width: 116px;
	padding-left: 2px;
	padding-right: 2px;
}
.comImg {
	width: 120px;
	position: absolute;
	display: inline;
	top: 87px;
	opacity: 0;
}
.characterDiv {
	position: relative;
	margin-bottom: 11px;
	pointer-events: none;
}
.characterDiv div {
	position: relative;
	pointer-events: auto;
}
.stars {
	position: absolute;
}
.starsBonus {
	width: auto !important;
	position: absolute;
	white-space: nowrap;
}
.starsHitbox {
	display: block;
	position: absolute;
	opacity: 0;
	height: 51px;
	width: 190px;
	cursor: pointer;
	z-index: 50;
}
.turns {
	font-size: 20px;
	font-family: 'Mario';
	color: white;
	cursor: pointer;
	white-space: nowrap;
  -webkit-touch-callout: none;
	-webkit-user-select: none;
	   -moz-user-select: none;
		-ms-user-select: none;
			user-select: none;
}
#turnText {
	margin-top: 60px;
	font-size: 30px;
}
#curTurnText, #maxTurnText {
	font-size: 30px;
	position: relative;
}
#curTurnTextContainer {
	width: 60px;
	text-align: right;
}
.turnTextContainer {
	position: absolute;
}

#coinStar {
	width: 35px;
	margin-left: 26px;
}
#coinStarCharacter {
	height: 50px;
	position: absolute;
	top: -24px;
	left: -5px;
}
#coinStarText {
	left: 10px;
	margin-left: 40px;
}
#coinStarDiv {
	margin-left: 5px;
	pointer-events: none;
	position: relative;
}
#coinStarHitbox {
	width: 165px;
	height: 50px;
	position: absolute;
	left: 30px;
	top: -24px;
}

/* == Animations == */

@keyframes bounce {
	0% { top: -4px; }
	65% { top: -13px; }
	80% { top: -9px; }
	100% { top: -4px; }
}

.counterAnimation {
	animation: bounce .19s ease-out 0s 1 both;
}

@keyframes saved {
	0% { opacity: 0; }
	20% { opacity: 1; }
	80% { opacity: 1; }
	100% { opacity: 0; }
}

.saveReloadSaved {
	animation: saved 1.3s ease-out 0s 1 both;
}

@keyframes inactive {
	0% { opacity: 1; filter: unset; }
	15% { opacity: .5; filter: blur(3px); }
	85% { opacity: .5; filter: blur(3px); }
	100% { opacity: 1; filter: unset; }
}

.saveReloadInactive {
	pointer-events: none;
	animation: inactive 1.3s ease-out 0s 1 both;
}

@keyframes show {
	from { opacity: 0; }
	to { opacity: 1; }
}
@keyframes hide {
	from { opacity: 1; }
	to { opacity: 0; }
}

.visibleAnimation {
	animation: show .25s ease 0s 1 both;
}
.hiddenAnimation {
	animation: hide .25s ease 0s 1 both;
}

@keyframes error {
	0% { color: #ff0000; }
	50% { color: #ff0000; }
	100% { color: #111111; }
}
.errorAni {
	animation: error .5s linear 0s 1 both;
}

@keyframes notif {
	0% { color: #009814; }
	50% { color: #009814; }
	100% { color: #111111; }
}
.notifAni {
	animation: notif .5s linear 0s 1 both;
}

@keyframes nvSave {
	0% { fill: #000; }
	30% { fill: #15d415; }
	70% { fill: #15d415; }
	100% { fill: #000; }
}
.nvSaveAni {
	animation: nvSave .6s ease-out 0s 1 both;
}

@keyframes nvReload {
	0% { fill: #000; }
	30% { fill: #dac40e; }
	70% { fill: #dac40e; }
	100% { fill: #000; }
}
.nvReloadAni {
	animation: nvReload .6s ease-out 0s 1 both;
}

@keyframes nvReset {
	0% { fill: #000; }
	30% { fill: #f13c3c; }
	70% { fill: #f13c3c; }
	100% { fill: #000; }
}
.nvResetAni {
	animation: nvReset .6s ease-out 0s 1 both;
}

@keyframes nvCopy {
	0% { fill: #000; }
	30% { fill: #26a6f7; }
	70% { fill: #26a6f7; }
	100% { fill: #000; }
}
.nvCopyAni {
	animation: nvCopy .6s ease-out 0s 1 both;
}

@keyframes nvTextAni {
	0% { opacity: 0; }
	30% { opacity: 1; }
	70% { opacity: 1; }
	100% { opacity: 0; }
}
.nvSavedTextAni {
	animation: nvTextAni .6s ease-out 0s 1 both;
}

/* == Coin star tie == */
.coinStarTieDiv {
	height: 40px;
	position: absolute;
	display: inline;
	left: 160px;
	top: 10px;
}
.coinStarTie {
	height: 30px;
	position: absolute;
}
#coinStarTie1 {
	top: -39px;
	left: -99px;
}
#coinStarTie2 {
	top: -39px;
	left: -69px;
}
#coinStarTie3 {
	top: -10px;
	left: -99px;
}
#coinStarTie4 {
	top: -10px;
	left: -69px;
}
#coinStarTie5 {
	top: -13px;
	left: -84px;
}

/* == Navbar == */
#navbar {
	display: flex;
	position: absolute;
	background: #7fd2e4c2;
	backdrop-filter: blur(7px);
	width: 100%;
	height: 70px;
	top: 0;
	left: 0;
	z-index: 95;
-webkit-user-select: none;
    	user-select: none;
}
#navbar > span {
	display: inline-block;
	height: 100%;
	width: 70px;
	padding: 5px;
	box-sizing: border-box;

-webkit-transition: background-color .2s;
   -moz-transition: background-color .2s;
		transition: background-color .2s;
}
#navbar > span img {
	height: 60px;
}
.nvCom {
	display: block;
	width: 60px;
	height: auto !important;
	position: relative;
	top: -23px;
	pointer-events: none;
	opacity: 0;
	transition: opacity .25s;
}
.nvSelected {
	background-color: #09198e87; /* displayed as #4070b6(c2) with the original navbar color behind it */
}
#navbar > span:hover {
	background-color: #0120ff69;
	cursor: pointer;
}
#navbar > span:active {
	background-color: #09198e87;
}
#nvSettings > svg {
	height: 50px !important;
	padding: 5px 0 0 5px;
}
#navbar img, #navbarChars img, #navbarGames img {
-webkit-user-drag: none;
		user-drag: none;
}

#nvGameImg {
	background-image: url(img/smp.png);
	background-position: center center;
	background-size: contain;
	background-repeat: no-repeat;
	display: inline-block;
	width: 100%;
	height: 50px;
    margin: 5px 0px;
	display: none;
}
#nvGameAll {
	font-family: 'Mario';
	font-size: 23px;
	position: relative;
	top: 4px;
}
#nvGamesContainer {
	margin: 5px;
}
#nvGamesContainer div {
	display: flex;
	justify-content: space-between;
}
#nvall {
	height: 45px;
}
#nvall > span {
	font-family: 'Mario';
	font-size: 32px;
	position: relative;
	top: -13px;
}
#nvGamesContainer img {
	height: 45px;
}
#nvall, #nvGamesContainer img {
	cursor: pointer;
	padding: 5px;
	border-radius: 10px;
	margin: 2px;

-webkit-transition: background-color .3s;
   -moz-transition: background-color .3s;
		transition: background-color .3s;
}
#nvall:hover, #nvGamesContainer img:hover {
	background-color: #c0dfffb5;
}
#nvall:active, #nvGamesContainer img:active {
	background-color: #f8fcffc2;
}

#nvActionText {
	position: absolute;
	font-family: 'Mario';
	bottom: -5px;
	font-size: 12px;
	width: 60px;
	text-align: center;
}
#nvActionIcon {
	display: inline-block;
	width: 100%;
	height: 100%;
	line-height: 60px;
	text-align: center;
	font-family: 'Mario';
	font-size: 40px;
	position: relative;
	top: -9px;
}
#nvAmountText {
	font-family: 'Mario';
	display: inline-block;
	width: 100%;
	line-height: 60px;
	font-size: 30px;
	text-align: center;
}
#nvCtrlHeld, #nvShiftHeld {
	display: none;
	position: absolute;
	font-family: 'Mario';
	color: #e20303;
	font-size: 10px;
    z-index: +1;
-webkit-text-stroke: 1px #000;
		text-stroke: 1px #000;
}
#nvSavedText {
	position: absolute;
	left: -5px;
	top: -40px;
	opacity: 0;
	font-family: 'Mario';
	text-align: center;
	font-size: 10px;
	width: 70px;
-webkit-text-stroke: 1px #000;
		text-stroke: 1px #000;
}

.nvGamesSelected {
	cursor: default !important;
	background: none !important;
-webkit-filter: grayscale(100%);
		filter: grayscale(100%);
}

#closeNavbar {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


.navbarContent {
	position: absolute;
	background: #2885d4c2;
	top: 70px;
	height: 0;
	margin-top: 5px;
	border-radius: 15px;
	overflow: hidden;
	backdrop-filter: blur(3px);
	z-index: 99;
	cursor: default; /* Somehow needed */

	-webkit-transition: height .3s;
	   -moz-transition: height .3s;
			transition: height .3s;
}
.navbarContent > div {
	/*width: fit-content;*/
}
.nvContentLeftTransition {
-webkit-transition: height .3s, padding .3s, left .3s;
   -moz-transition: height .3s, padding .3s, left .3s;
		transition: height .3s, padding .3s, left .3s;
}
#nvCurPlayer {
	padding: 5px 5px 0 10px;
}
#nvPlayerImg {
	height: 30px;
}
#nvComImg {
	height: 30px;
	opacity: .7;
	cursor: pointer;

-webkit-transition: opacity .3s;
   -moz-transition: opacity .3s;
		transition: opacity .3s;
}
#nvComImg:hover {
	opacity: .85;
}
#nvComImg:active {
	opacity: .95;
}
.nvComSelected {
	opacity: 1 !important;
}
#nvRandoImg {
	height: 30px;
	opacity: .85;
	cursor: pointer;

-webkit-transition: opacity .3s;
   -moz-transition: opacity .3s;
		transition: opacity .3s;
}
#nvRandoImg:hover {
	opacity: .95;
}
#nvRandoImg:active {
	opacity: 1;
}

.nvCharPlayerDisplay {
	height: 18px !important;
	position: relative;
	top: -3px;
	left: -4px;
}

#nvCharList {
	padding: 0 5px 5px 5px;
	white-space: nowrap;
}
#nvCharList img {
	height: 70px;
	margin: 5px;
	opacity: .85;

-webkit-transition: opacity .3s;
   -moz-transition: opacity .3s;
		transition: opacity .3s;
}
#nvCharList img:hover {
	cursor: pointer;
	opacity: 1;
}
#nvCharList img:active {
	opacity: 1;
}
.nvCharPlayer {
	height: 20px;
	position: absolute;
	display: none;
}
.nvCharSelected {
-webkit-filter: grayscale(100%) !important;
		filter: grayscale(100%) !important;
	opacity: 1 !important;
	cursor: default !important;
}

.nvSettingsItem {
	display: block;
	font-family: 'Mario';
	font-size: 15px;
	padding: 5px;
	height: 40px;
	line-height: 40px;
	text-align: center;

-webkit-transition: background-color .3s;
   -moz-transition: background-color .3s;
		transition: background-color .3s;
}
.nvSettingsSave {
	display: block;
	width: 100%;
}
.nvSettingsSave span {
	display: inline-block;
	width: calc(50% - 13px);
	font-family: 'Mario';
	font-size: 15px;
	padding: 5px;
	height: 40px;
	line-height: 40px;
	text-align: center;
		text-stroke: 1px #000;
-webkit-text-stroke: 1px #000;

-webkit-transition: background-color .3s;
   -moz-transition: background-color .3s;
		transition: background-color .3s;
}
.nvSettingsItem:hover, .nvSettingsSave span:hover {
	cursor: pointer;
	background-color: #aff4ff4a;
}
.nvSettingsItem:active, .nvSettingsSave span:active {
	background-color: #aff4ff7a;
}
#nvSettingsReset {
	color: #f13c3c;
-webkit-text-stroke: 1px #000;
		text-stroke: 1px #000;
}
#nvSettingsConfirm {
	display: none;
}



@media screen and (max-width: 630px) {
	#nvCounters { display: none !important; }
}
@media screen and (max-width: 560px) {
	#nvGame { display: none !important; }
}

/* == Settings == */
.note {
	color: #252525c7;
	font-size: 18px;
	font-style: italic;
}
#navbarAssist .note {
	color: #f7f7f7bf;
}
.resizableInput {
	resize: both;
	max-width: 500px;
	min-width: 200px;
	min-height: 70px;
}
.popupContent {
	position: absolute;
	max-height: 100%;
	top: 50%;
	left: 50%;
-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	background: linear-gradient(#ccccccc4, #138bd2eb);
	padding: 20px;
	border-radius: 25px;
	white-space: normal;

	-webkit-transition: visibility .3s, opacity .3s;
	   -moz-transition: visibility .3s, opacity .3s;
			transition: visibility .3s, opacity .3s;
}
#settingsSelectionSpanBreak {
	display: none;
}
#assistSelectorBreak {
	margin-right: 0px;
}

#generalMPOSettings {
	white-space: normal;
	min-width: 688px;
}
#generalMPOSettings span, #generalMPOSettings label {
	line-height: 31px;
}

#settingsMain {
	overflow: auto;
	padding-top: 10px;
	padding-bottom: 10px;
	height: 100%;
	max-width: 1039px;
	padding-right: 5px;
}
#settingsClose {
	float: right;
}


.border {
	border-bottom: #0e25c17a 3px solid;
}
.settingsContentPopout .border {
	position: relative;
    left: calc(-25% + 15px); /* 20% from padding - 5% additional % as it doesn't take 20% from the screen size but instead from it's parent that already had 20% subtracted */
    width: calc(125% - 15px); /* no idea about 15px but it's required */
}
#assistHeader {
	display: none;
	width: 100%;
	max-width: 1044px;
	padding-top: 5px;
	padding-bottom: 5px;
}
#assistNotif {
	text-align: center;
}
#settingsFooterBorder {
	margin-bottom: 7px;
}
#settingsHintsContainer {
	position: absolute;
	width: calc(100% - 342px);
	max-width: 742px;
	padding-left: 5px;
	margin-top: 6px;
	overflow: hidden;
	text-align: center;
	cursor: default;
	font-size: 16px;
}
#settingsHints {
	z-index: -1;
}
#tutorialHints {
	cursor: default;
}

.counterSelection {
	display: flex;
	margin-bottom: 13px;
	min-width: 850px;
	max-width: 1060px;
	white-space: nowrap;
}
.counterSelection span:not(.flexAuto) {
	width: 310px;
}
.settingsTitle {
	font-size: 27px;
	border-bottom: 2px #111111 solid;
	color: #111111;
	margin-bottom: 10px;
	display: inline-block;
}
#navbarAssist .settingsTitle {
	border-bottom: 2px #f7f7f7 solid;
	color: #f7f7f7;
}
#siteError {
	display: none;
	font-size: 20px;
}
#cookieError {
	display: none;
	font-size: 20px;
}
.error {
	color: #b10000;
	font-weight: bold;
}

#counterOrder {
	white-space: nowrap;
}
#counterNames {
	white-space: nowrap;
	float: right;
}

.settingsSelection {
	font-size: 26px;
	margin-right: 10px;
	margin-bottom: 2px;
	color: #2121ec;
	border-color: #2121ec77;
	cursor: pointer;
	transition: color .15s;
}
.settingsSelection:last-child {
	margin-right: 0;
}
.settingsSelection:hover {
	color: #e64940;
	border-color: #e64940;
}
.settingsSelection:active {
	color: #e41105;
	border-color: #e41105;
}
.settingsSelected {
	color: #d00000 !important;
	border-color: #d00000 !important;
	cursor: default;
}
.settingsSelected:hover {
	color: #d00000 !important;
	border-color: #d00000 !important;
}
.flexAuto {
	flex: auto;
}
#settingsSelectionSpan {
	display: flex;
	position: relative;
	width: 100%;
	max-width: 1044px;
	margin-bottom: 10px;
}
.settingsSelectionImportant {
	color: #009814;
	border-color: #00981477;
}
.settingsSelectionImportant:hover {
	color: #e64940;
	border-color: #e64940;
}
.settingsSelectionImportant:active {
	color: #e41105;
	border-color: #e41105;
}

#settingsSelectionUnderline {
	position: absolute;
	background-color: #d00000;
	margin-top: 31px;
	height: 2px;

-webkit-transition: width .4s, left .4s;
   -moz-transition: width .4s, left .4s;
		transition: width .4s, left .4s;

	width: 96.828125px;
	left: 384px;
}

.assistButton {
	font-family: 'Mario';
	font-size: 22px;
	color: #000000;
	-webkit-text-stroke: 1.5px #d7d7d7;
			text-stroke: 1.5px #d7d7d7;
	text-shadow: 3px 3px 4px #202020;
	letter-spacing: -.5px;
	cursor: pointer;
}
.assistButton:hover {
	color: #d40101;
}
.assistButton:active {
	color: #940000;
}

#settings {
	position: fixed;
	z-index: 999;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.35);

-webkit-font-smoothing: subpixel-antialiased;
		font-smoothing: subpixel-antialiased;
-webkit-transform: scale(2) zoom: 0.5;
		transform: scale(2) zoom: 0.5;

	visibility: hidden;
	opacity: 0;

	/* transition rules are added in boot.js prepareMPO() */
}
.settingsContentPopout {
	padding: 20px;
	position: absolute;
	border: none;
	background-color: #F3F3F3;

	width: calc(80% - 20px) !important; /* 80% instead of 100% due to 20% padding, also 20px instead of 40px because idk */
	height: calc(100% - 40px) !important;
	min-width: unset !important;

	padding-left: 20%;
}
#settingsContent {
    width: 51%;
    height: 85%;
	min-width: 800px;
	background: no-repeat url(img/settingsbg-light.png), linear-gradient(#d6d6d6eb, #70b0fff2);
	display: flex;
	flex-direction: column;
	white-space: nowrap;
	backdrop-filter: blur(4px);
}
#tutorialSettings {
	white-space: normal;
}
#toSeperation {
	width: 35px;
}
#creditsBorder {
	border-bottom: rgba(0, 0, 0, 0.4) 2px solid;
}

.scroll {
	overflow-y: scroll !important;
}

@media screen and (max-width: 1040px), screen and (max-height: 860px) { /* Will be used when screen is small enough - reminder to change it in popout too */
	.settingsPopup {
		padding: 20px;
		position: absolute;
		border: none !important;
		background-color: #F3F3F3;
		width: calc(100% - 40px) !important;
		height: calc(100% - 40px) !important;
		min-width: unset !important;
		min-height: unset !important;
		border-radius: 0rem;
		transform: none;
		top: 0;
		left: 0;
	}/*popupContent settingsPopup vs settingsContentPopout*/
	#settingsCloseSpan { position: fixed; }
	#settingsCloseSave { display: block !important; }
}
@media screen and (max-width: 1329px) { /* moves settings to center - fullscreen-only */
	.settingsContentPopout {
		width: calc(100% - 40px) !important;
		height: calc(100% - 40px) !important;
		padding-left: 20px;
	}
	.border {
		left: unset !important;
		width: unset !important;
	}
}
@media screen and (min-width: 1330px) and (max-height: 860px) {
	.settingsPopup {
		width: calc(80% - 20px) !important;
		height: calc(100% - 40px) !important;
		min-width: unset !important;
		padding-left: 20%;
	}
	.settingsPopup .border {
		position: relative;
		left: calc(-25% + 15px);
		width: calc(125% - 15px);
	}
}
@media screen and (max-width: 1090px) {
	#settingsHintsContainer { display: none; }
	#settingsSelectionUnderline { display: none; }
	.settingsSelected {
		border-bottom-width: 2px;
		border-bottom-style: solid;
		margin-bottom: 0px;
	}
}

/* == Slots == */
#slotsSettings {
	text-align: center;
	white-space: normal;
	display: block;
}
#slotList {
-webkit-user-select: none;
		user-select: none;
}
#slotList, .emptySlot {
	display: inline-block;
	width: fit-content;
}
#slotList .slotDiv:hover {
	background-color: rgba(0, 190, 0, 0.2);
}
#slotList .slotDiv:active {
	background-color: rgba(0, 190, 0, 0.4);
}
.slotDuplicate .slotDiv:hover:not(.slotSelected) {
	background-color: rgba(45, 137, 204, 0.4) !important;
}
.slotDuplicate .slotDiv:active:not(.slotSelected) {
	background-color: rgba(49, 148, 221, 0.6) !important;
}
.slotDelete .slotDiv:hover:not(.slotSelected) {
	background-color: rgba(255, 0, 0, 0.6) !important;
}
.slotDelete .slotDiv:active:not(.slotSelected) {
	background-color: rgba(255, 0, 0, 0.8) !important;
}

.slotDiv {
	border: 2px solid #252525;
	border-radius: 20px;
	padding: 5px;
	width: 295px;
	margin-bottom: 15px;
	cursor: pointer;
	text-align: initial;

-webkit-transition: background-color .2s;
   -moz-transition: background-color .2s;
		transition: background-color .2s;
}
.emptySlot {
	border-color: #0B0B0B91;
	color: #0B0B0B91;
	font-family: 'Mario';
	font-size: 16px;
	text-align: center;
	border-style: dashed;
}
.emptySlot:hover {
	background-color: rgba(0, 190, 0, 0.2);
	border-color: #252525;
	color: #252525;
	border-style: solid;
}
.emptySlot:active {
	background-color: rgba(0, 190, 0, 0.4);
}
.slotSelected {
	background-color: rgba(0, 190, 0, 0.6) !important;
}
.slotTurnText {
	font-family: 'Mario';
	font-size: 20px;
	position: absolute;
	margin-left: 80px;
	top: -20px;
}
.slotTurn {
	position: absolute;
	right: -110px;
}
.slotAllText {
	font-family: 'Mario';
	font-size: 20px;
	position: absolute;
	top: -19px;
}
.slotImg {
	height: 30px !important;
	margin-right: 20px;
}
.slotDiv img {
	height: 45px;
}
.slotButtons {
	font-family: 'Mario';
	font-size: 19px;
	color: #000000;
	margin-right: 20px;
	cursor: pointer;
-webkit-text-stroke: 1px #c4c4c4;
		text-stroke: 1px #c4c4c4;

-webkit-transition: color .3s;
   -moz-transition: color .3s;
		transition: color .3s;
}
.slotButtons:hover {
	color: #ff1b1b;
}
.slotButtons:active {
	color: #bf0808;
}
#slotDuplicate + label:hover {
	color: #199af9;
}
#slotDuplicate + label:active {
	color: #177ac1;
}

#slotDuplicate:checked + label {
	color: #38a9fc;
	text-shadow: 0px 0px 10px #00e7ffcf;
}
#slotDuplicate:checked + label:active {
	color: #177ac1;
}
#slotDelete:checked + label {
	color: #ff0000;
	text-shadow: 0px 0px 10px #ff0000cf;
}
#slotDelete:checked + label:active {
	color: #bf0808;
}

#slotLoad, #slotDuplicate, #slotDelete {
	display: none;
}

#dataBackupContainer * {
	width: 132px;
	display: inline-block;
}

#uploadFile {
	font-size: 17px;
}

#savefileLoadReminder {
	position: absolute;
	top: 0;
	width: 100%;
	background: linear-gradient(#F6F6F6, #d6d6d6);
	border-bottom: 3px solid #111111;
	box-shadow: 0px 5px 5px #282828a8;
	color: black;
	z-index: 9999;
	left: 0;
	display: none;
}
#sflReminderChars img {
	height: 40px;
	position: relative;
	top: 3px;
}
#sflReminderMore, #sflReminderChars {
	white-space: nowrap;
}

#loadButton:hover {
	color: #05b936;
}
#loadButton:active {
	color: #038a28;
}

/* == Choose Character == */
.playerText {
	font-family: 'Mario';
	font-size: 16px;
	color: #111111;
}
#gameSelectorDiv {
	font-family: 'Mario';
	font-size: 18px;
	color: #111111;
	display: flex;
	max-width: 1044px;
}

#playerSettingsWrapper {
	display: flex;
	max-width: 1050px;
	min-width: 585px;
	height: calc(100% - 20px);
	min-height: 400px;
}
.characterSelector {
	width: 87px;
	height: 100%;
	min-height: 200px;
	overflow-y: scroll;
	display: inline-block;
	position: relative;
	border: 2px solid #404040aa;
	border-radius: 15px;
	background-color: #d4d4d45c;
	padding-left: 12px;
	padding-top: 6px;
}
.charSelectorFullWrapper {
	height: calc(100% - 114px);
}
.charSelector .inputContainer { /* Game Checkboxes at top of settings */
	margin: 0;
	margin-top: -12px;
	padding: 0;
	position: absolute;
	z-index: 99;
}
.charSelectorFullWrapper .inputContainer { /* COM Checkboxes */
	margin-top: -6px;
}
.characterSelector .inputContainer { /* Character checkboxes in Characters tab */
	margin: 0;
}
#iconSelector .inputContainer { /* Icon type checkboxes under general - you know, seperate classes would definitely help here but unfortunately I'm too lazy for that... */
	top: -18px;
}
.charSelector input:active +.charSelectorLabel, .charSelector input:active +.drinkcard-cc {
	opacity: .9;
}
.charSelector input:checked +.charSelectorLabel, .charSelector input:checked +.drinkcard-cc {
	-webkit-filter: drop-shadow(0px 0px 6px #fff82b);
	   -moz-filter: drop-shadow(0px 0px 6px #fff82b);
			filter: drop-shadow(0px 0px 6px #fff82b);
}

.charSelectorLabel {
	cursor: pointer;
	background-size: contain;
	background-repeat: no-repeat;
	display: inline-block;
	height: 70px;
	width: 70px;
	-webkit-filter: grayscale(.6) opacity(.5);
	   -moz-filter: grayscale(.6) opacity(.5);
			filter: grayscale(.6) opacity(.5);
	transition: filter .3s;
}
.charSelectorLabelImg {
	height: 70px;
	width: 70px;
}
.charSelectorLabel:hover {
	-webkit-filter: grayscale(.3) opacity(.7);
	   -moz-filter: grayscale(.3) opacity(.7);
			filter: grayscale(.3) opacity(.7);
}
.charSelectorLabel:active {
	-webkit-filter: grayscale(.1) opacity(.9);
	   -moz-filter: grayscale(.1) opacity(.9);
			filter: grayscale(.1) opacity(.9);
}


.mario {
	background-image:url(img/mpsrIcons/mario.png);
}
.luigi {
	background-image:url(img/mpsrIcons/luigi.png);
}
.peach {
	background-image:url(img/mpsrIcons/peach.png);
}
.yoshi {
	background-image:url(img/mpsrIcons/yoshi.png);
}
.wario {
	background-image:url(img/mpsrIcons/wario.png);
}
.waluigi {
	background-image:url(img/mpsrIcons/waluigi.png);
}
.rosalina {
	background-image:url(img/mpsrIcons/rosalina.png);
}
.daisy {
	background-image:url(img/mpsrIcons/daisy.png);
}
.toad {
	background-image:url(img/mpsrIcons/toad.png);
}
.toadette {
	background-image:url(img/mpsrIcons/toadette.png);
}
.dk {
	background-image:url(img/mpsrIcons/dk.png);
}
.diddy {
	background-image:url(img/mpsrIcons/diddy.png);
}
.birdo {
	background-image:url(img/mpsrIcons/birdo.png);
}
.bowser {
	background-image:url(img/mpsrIcons/bowser.png);
}
.bowserjr {
	background-image:url(img/mpsrIcons/bowserjr.png);
}
.koopakid {
	background-image:url(img/mpsrIcons/koopakid.png);
}
.pompom {
	background-image:url(img/mpsrIcons/pompom.png);
}
.goomba {
	background-image:url(img/mpsrIcons/goomba.png);
}
.koopa {
	background-image:url(img/mpsrIcons/koopa.png);
}
.drybones {
	background-image:url(img/mpsrIcons/drybones.png);
}
.monty {
	background-image:url(img/mpsrIcons/monty.png);
}
.boo {
	background-image:url(img/mpsrIcons/boo.png);
}
.spike {
	background-image:url(img/mpsrIcons/spike.png);
}
.blooper {
	background-image:url(img/mpsrIcons/blooper.png);
}
.shyguy {
	background-image:url(img/mpsrIcons/shyguy.png);
}
.hammerbro {
	background-image:url(img/mpsrIcons/hammerbro.png);
}
.kamek {
	background-image:url(img/mpsrIcons/kamek.png);
}

.com {
	background-image:url(img/com.png);
	width: 100px;
	height: 45px;
}

#charRandoButton {
	position: relative;
	top: -10px;
}


.counterOnOff {
	height: 25px;
	width: 25px;
	position: relative;
	top: 3px;
}
.counterOnOffText {
	position: relative;
	top: -3px;
}

.happeningOnOff {
	background-image:url(img/happening.png);
}
.minigameOnOff {
	background-image:url(img/minigame.png);
}
.redSpaceOnOff {
	background-image:url(img/redspace.png);
}
.runningOnOff {
	background-image:url(img/running.png);
}
.shoppingOnOff {
	background-image:url(img/shopping.png);
}
.itemOnOff {
	background-image:url(img/item.png);
}
.friendSpaceOnOff {
	background-image:url(img/friendspace.png);
}
.hexOnOff {
	background-image:url(img/hex.png);
}
.balloonOnOff {
	background-image:url(img/balloon.png);
}
.spinSpaceOnOff {
	background-image:url(img/spinspace.png);
}
.minusOnOff {
	background-image:url(img/minus.png);
}
.almostOnOff {
	background-image:url(img/almost.png);
}
.lonerOnOff {
	background-image:url(img/loner.png);
}
.duelOnOff {
	background-image:url(img/duel.png);
}
.wandererOnOff {
	background-image:url(img/wanderer.png);
}
.allyOnOff {
	background-image:url(img/ally.png);
}
.stompyOnOff {
	background-image:url(img/stompy.png);
}
.doormatOnOff {
	background-image:url(img/doormat.png);
}
.starsOnOff {
	background-image:url(img/stars.png);
}
.miniStarsOnOff {
	background-image:url(img/ministar.png);
}
.bananasOnOff {
	background-image:url(img/banana.png);
}
.coinsOnOff {
	background-image:url(img/coins.png);
}

.iconLabel {
	height: 40px;
	width: 40px;
}

.gameLabel {
	height: 25px;
	width: 25px;
}

.all {
	width: 50px;
}
.mp1 {
	background-image:url(img/mp1.png);
	width: 20px;
}
.mp2 {
	background-image:url(img/mp2.png);
}
.mp3 {
	background-image:url(img/mp3.png);
}
.mp4 {
	background-image:url(img/mp4.png);
}
.mp5 {
	background-image:url(img/mp5.png);
}
.mp6 {
	background-image:url(img/mp6.png);
}
.mp7 {
	background-image:url(img/mp7.png);
}
.mp8 {
	background-image:url(img/mp8.png);
}
.mp9 {
	background-image:url(img/mp9.png);
}
.mp10 {
	background-image:url(img/mp10.png);
	width: 40px;
}
.mpa {
	background-image:url(img/mpa.png);
	width: 63px;
}
.mpds {
	background-image:url(img/mpds.png);
	width: 50px;
}
.mpit {
	background-image:url(img/mpit.png);
	width: 35px;
}
.mpsr {
	background-image:url(img/mpsr.png);
	width: 46px;
}
.mptt100 {
	background-image:url(img/mptt100.png);
	width: 47px;
}
.smp {
	background-image:url(img/smp.png);
	width: 51px;
}

@media screen and (max-width: 800px) {
	#settingsSelectionSpan { display: none; }
	#settingsSelectionSpanBreak { display: block; }
	#gameSelectorDiv { font-size: 2.3vw; }
	#gameSelectorDiv .inputContainer { visibility: hidden; /*height: 1.7vw; width: 1.7vw;*/ }
	/*.settingsSelection { font-size: 3.4vw; }*/
	.gameLabel { font-size: 2.3vw; height: 3.2vw; width: 3.2vw }
	#mp1 { margin-left: 3vw; }
	.mp1 { width: 2.3vw; margin-left: 3vw; }
	.mp10 { width: 5.3vw; }
	.mpa { width: 7.8vw; }
	.mpds { width: 6.4vw; }
	.mpit { width: 4vw; }
	.mpsr { width: 6.2vw; }
	.mptt100 { width: 6.2vw; }
	.smp { width: 6.6vw; }
}

/* == Themes == (Previews are 40x19px) */
.themeButtons {
	width: 44px;
	height: 23px;
	background-repeat: no-repeat;
    background-size: cover;
	margin-right: 5px;
}

#themeDefault {
	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAATCAIAAABtIdhUAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4ggZDDAKvLBldAAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAABmJLR0QA/wD/AP+gvaeTAAAEB0lEQVQYGZXB23Jc1RUF0DnX2vuc0ze6JV+EVdgQVyU8UBRv+aF8AN/JMwWVIlwMhWUbYrlb6tu57DVpGQMywUSMwX99/Mw9ETzATQm/ISCAbbfv+v1kNAVIpoj2/p3h3benhK3W7WffdsKIVN93m93leDRLOVUQQFwnCABB/AEBLFHMnDgQAEldt9tsL9p2m1OeTW+Z5cf/LUfTkjhs9gWQKII51/NcEUw4IF6nvtuZBW3sZrgivEIAQylNve7buitMKZO22a62uxWAMvRVrgCQHEr66my7byFmIRMAcUAQQML/CGFU67176Zuz3RAjkgBxQBAIIdT+451pdGW1G87OJTR1Xbdd1fedEKUMQADmKW87NyNBUgBxTcLv6cATTo5GHvsvzvYRnkzm0fY0axDt/Vsxr5s0ofn27LyQyqmZjBfr9UUzapJnwAAQoBleIV6XcJ0AQlGyCWG3FxN6C2KUfNMO/3ncCwfpYlPa0sNTlCAkQFCVm6NFZe4EcQMJv5KC7Puusu3JfLzet1Wu+6E/WUxEfPl0Pahxg5lf7vLjH3abPlaXQW9MOKAZYLixJIkkhBIwrh/eS6fHt+rsn3757PT2bLnez2fjXTcs1/TkBEB6yt+fC7CcG0mQQOLGIgJAKkMbdHMaiSjOqu9LXaXjxRiwv50eJWffEbpCEgDJnGocKAiCxI0IgECoS6b091Nft+XHZQTGstmjZ/Hoyeadu/sHdyakm+FgNs73jv3pMmSJxDXEX0AAJYZRGj54OLX7d0enx3VXBAPNaClssryE0UidX+x/WO7arpwc1WYt/iJJw9CFigQICiVuH9zN4zqlIgYBBQECAgj0JUD/cbn+/NtdKOXUVS7JaAKIm5NWl8/dc5WbKtfulbMyS6Slrx5fblqBhpcIGDkUPXl+8fWTztM00wT0EWYEiDeQ0A9tImA1KQARsdtfDkPX923bbuZv3XWvuqi+fralFTt7kS52TU5jSPgZuR/SF9/3sKmZgSBBM4B4M0FN3T14W26rGNaCBbTbbyWRIOHJgHDzfVd9/l0YLIGv4CVCTWpyNcWbSSgxCMJLkhDtyTy/dzL95/uLxRQKuefF/La7kWaWogwAgcheuTXJ8AdEHJDEFQHEzySQuKL1elnlkaecPEsxqsrxvJGQzPoCsyBAr8ajuXuVU2VmuEIQBAx/TgigRBkiBIkQBKDrd/t2e7F+/uLFk6G0Zr7tm0dnO4WePt8HiyTISI1Hs7oauTsJUvhFwp8SJdC1qRvbtC7RvC79brU6lwTIjG4JkNOXW37y7+W2dU8jd+IKD/AKcY3hNQIEEL+QBAx33uJHDxcfvptnTRsFyZvZ9AgvSYjoSYLyNNnHpKrHyWri//gJ90IreaZRs+wAAAAASUVORK5CYII=');
}
#themeCastle {
	background-image: url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wgARCAATACgDAREAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAABQQGB//EABgBAQEBAQEAAAAAAAAAAAAAAAMCBAEF/9oADAMBAAIQAxAAAAHmx6syhOVBc92XKEFimJJBimnxc7Lsj3+cdNK0VmL0f//EACAQAAMAAQIHAAAAAAAAAAAAAAECAwQTFAAFERIVIiP/2gAIAQEAAQUCRGvAEvXx/owMq5OJoYWF1KUO0y0tfg13GbzH5yQkVmBWfYNBgEhkuWt//8QAIBEAAgECBwEAAAAAAAAAAAAAAAECESEDBBASIjFBYf/aAAgBAwEBPwGF1cf0qj2w7jjtO1UodIjHcY65slZ6emXXJH//xAAfEQABAwMFAAAAAAAAAAAAAAAAAQIxAxEhEiAyQWH/2gAIAQIBAT8BfODrBYX0YI65GC5Iq6SlxTZVhT//xAAiEAABAwQBBQEAAAAAAAAAAAABAAIRAxIhMUETIiMyUUL/2gAIAQEABj8CcGC/pj4o9TcrjX8moTmON2VQJtvedINO3vRLhiTBQDawsjcpka1KqUwctescPVW7ug8o4/SbbififJmXL//EAB4QAQEAAwACAwEAAAAAAAAAAAERACExQVFhcZHR/9oACAEBAAE/IaAYb2v3kXbRrhh1wHlq+s0uQEl3mg5ij1lHSFmvRifpsiozEnAwxz+5LGhGvIeXDRud/TDdTYY4HYTBWi5BAdmJc5ZG/Of/2gAMAwEAAgADAAAAEDc5czul/wD/xAAbEQEAAgMBAQAAAAAAAAAAAAABABEhMUFRgf/aAAgBAwEBPxBCYXyYLFTVQyGH9E2Hlxux2I8hvmKhuoAZBonIZgKp/8QAGREBAQEBAQEAAAAAAAAAAAAAAREAIUEx/9oACAECAQE/EBB1PcSMHLvhMoW/HUgezEUeYXy57m7h8yaYWa9y8ybb/8QAIRABAQACAgEEAwAAAAAAAAAAAREAITFBUWFxgaGxwdH/2gAIAQEAAT8Q7ZwpJL8PfAi5ACK8nx+8o+Zht+J8euNjC4w9IdXjxnXVhEAM1q83AuSX1Af0cUi+iAQXkb9ZSoOnG0XvTDenuXhW9y4VpOzdNJ45MNoAh00cEWlG0Vr95wGAD8YLtJESNmzKIVr7S/nP/9k=');
}
#themeNsmbw {
	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAATCAMAAADVnb8xAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4ggZDDUcNRMkYAAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAilBMVEXcrADdrQDerwDhswDluQDmuQDnuwDovADpvQDqvwDrvwDrwADswQDswgDtwgDtwwDuwwDuxADuxQDwxADwxQDwxgDxxgDxxwDyxwDyyADzyADzyQDzygD0ygD0ywD1ywD1zAD2zAD2zQD3zQD3zgD30AD40AD40QD50QD50gD50wD60gD60wD////wsOl1AAAAAWJLR0QtzdpBPQAAAXhJREFUGBmNwd1C3CAQgFH6Y1uNRqlImCAbdqSwo9/7P18Te9Xe1HPcZRyMv5jxL5dk8ZIKYCfJnUOJoRg7K3NUDuZS19TPBSzOYREFdLq+vTsB9vTFTdkAq+7xMUYfBNp8lvBz6ZBvp+CzgYYf19vUQZ+yS1K7lIItkyT/be6Q5in5ZLDJt+/rVYfxnJ1fFh8XwfKdn/1UDMrNzcN9foU6ffrsvQFanHRNvRawp9t7Lxdg+OnmQQFLX6+SstPgSs4pZwXeWm3GodfSOJjq4DDUYQf+y/FBjj9svPFucHjVd8bOLgY4Y2fPEgoHk8KuzUEkzhvQlhAVXAFMUlMZYC3nrB1azCnlWGGkPMoycKuBrrX+ig2qzyUVGTTJQUQqnKMOjRUnBjXri4YOVnIu6wlaseelbGfYUpZVNlwBWtQXEQN00yYGLVu4t1OFkeY4y8ANdjn4dbCrUXIY0OYcQ5k3oK0iDRzvLt04WDdrBlZ1V42dDQMcH/Qb7m9pTezABlQAAAAASUVORK5CYII=');
}
#themeToadroad {
	background-image: url('data:image/png;base64,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');
}

/* == mobile version == */
#textOutput {
	position: absolute;
	left: -9999px;
}
#mobileTypeDiv {
	margin-top: 5px;
}
.mobileType {
	height: 20px;
	width: 20px;
	margin-left: 20px;
}
#mobileTypeMinus {
	height: 20px;
	width: 20px;
}
.mobileTypeLabel {
	font-size: 28px;
	color: #F4F4F4;
}
.grayBG {
	background-color: rgba(100, 100, 100, 0.3);
	border-radius: 5px;
}
#mobileTypeSpan {
	border-radius: 12px;
	margin-top: 10px;
	margin-left: 190px;
	padding-left: 3px;
	width: 325px;
	font-size: 10px;
}
#toGenerateSpan {
	display: inline-block;
	margin-left: 23px;
	padding-top: 5px;
	padding-left: 5px;
	height: 32px;
	width: 380px;
}
#saveReloadSpanContainer {
	display: inline-block;
	margin-left: 30px;
	padding-top: 5px;
	padding-left: 5px;
	height: 32px;
	width: 228px;
}
#saveReloadText {
	position: absolute;
	width: 228px;
	text-align: center;
	pointer-events: none;
	text-shadow: 1px 1px 2px #262626;
	z-index: 97;
	opacity: 0;
	font-size: 25px;
}

/* === ASSIST === */
#assistColumnWrapper {
	column-count: 2;
	column-fill: balance;
}

.assistModule {
	margin-bottom: 10px;
	border-radius: 20px;
	background: linear-gradient(#f0f8ff6b, #f0f8ff21);
}
.assistModule > div {
	display: inline-block;
	position: relative;
	width: 100%;
	height: 100%;

	overflow: hidden;
    vertical-align: top;
}
.assistModule > div > div:first-child {
	position: relative;
	font-size: 27px;
	color: #111;

	padding-left: 20px;
	border-radius: 20px 20px 0px 0px;
	background: linear-gradient(#0000003b, #00000026);

-webkit-transition: border-radius .2s;
   -moz-transition: border-radius .2s;
		transition: border-radius .2s;
}
.assistModule > div[customhidden="true"] > div:first-child { /* change border radius when hidden */
	border-radius: 20px;
}

.assistModule > div > div:first-child > .assistArrowIcon { /* arrow icon */
	display: inline-block;
	position: absolute;
	cursor: pointer;

	width: 25px;
	height: 25px;
	top: 3px;
	right: 13px;

	background: url(img/next.svg);
	transform: rotate(90deg);

-webkit-transition: transform .2s;
   -moz-transition: transform .2s;
		transition: transform .2s;
}
.assistModule > div[customhidden="true"] > div:first-child > .assistArrowIcon { /* flip arrow icon when hidden */
	transform: rotate(90deg) rotateY(180deg);
}

.assistModule > div > div:first-child > .assistDragIcon { /* drag icon */
	display: inline-block;
	position: absolute;
	cursor: move;

	width: 25px;
	height: 25px;
	top: 3px;
	right: 45px;

	background: url(img/drag.png);
	background-size: cover;
}

/*.assistModule > div > div:first-child:before { /* hover color since linear-gradient can't be transitioned normally *
	content: '';
	display: block;
	position: absolute;
	user-select: none;
	opacity: 0;

	width: 100%;
	height: 100%;
	left: 0px;
	border-radius: 20px 20px 0px 0px;
	background: linear-gradient(#2dff3838, #2dff380f);

-webkit-transition: opacity .2s, border-radius .2s;
   -moz-transition: opacity .2s, border-radius .2s;
		transition: opacity .2s, border-radius .2s;
}
.assistModule > div[customhidden="true"] > div:first-child:before { /* change border radius when hidden *
	border-radius: 20px;
}
.assistModule > div > div:first-child:hover:before { /* on hover *
	opacity: 1;
}
.assistModule > div > div:first-child:active:before { /* on click - no animation because screw this *
	background: linear-gradient(#2dff384a, #2dff3815);
}*/

.assistModuleWrapper {
	overflow: hidden;
-webkit-transition: height .2s;
   -moz-transition: height .2s;
		transition: height .2s;
}

.assistModuleWrapper > span {
	height: 300px;
	padding: 10px;
	display: block;
}

#assistMisc {
	height: initial; /* temporary */
	display: flex;
	justify-content: space-evenly;
}


#assistPlayerList {
	text-align: center;
	margin-bottom: 10px;
}
.assistCurrentPlayerText {
	position: relative;
	font-family: 'Mario';
	font-size: 25px;
}
.assistCurrentPlayerImg {
	height: 65px;
}
#assistPlayerList > span {
	display: inline-block;
	position: relative;
	height: 65px;
	padding: 6px;
	border-radius: 30px;
}

.counterAnimation {
	animation: bounce .19s ease-out 0s 1 both;
}
#assistPlayerList > span> span:first-child {
	display: inline-block;
	position: absolute;

	height: calc(65px + 14px); /* recreate padding but without using padding so width: 0px; can be used for animations - padding-right is supposed to be 0px for some reason */
	width: calc(100% + 7px);
	top: 0px;
	left: 0px;

	z-index: -1;
	border-radius: 30px;
	background: #00a6b7;

-webkit-transition: width .5s;
   -moz-transition: width .5s;
		transition: width .5s;
}
.assistCurrentPlayerTextWrapper {
	display: inline-block;
	overflow: hidden;

-webkit-transition: width .5s;
   -moz-transition: width .5s;
		transition: width .5s;
}

.chooseImg {
	cursor: pointer;

-webkit-filter: grayscale(.4) opacity(.7);
   -moz-filter: grayscale(.4) opacity(.7);
		filter: grayscale(.4) opacity(.7);

-webkit-transition: filter .15s;
   -moz-transition: filter .15s;
		transition: filter .15s;
}
.chooseImg:hover {
-webkit-filter: grayscale(.2) opacity(.9);
   -moz-filter: grayscale(.2) opacity(.9);
		filter: grayscale(.2) opacity(.9);
}
.chooseImg:active {
-webkit-filter: grayscale(0) opacity(1);
   -moz-filter: grayscale(0) opacity(1);
		filter: grayscale(0) opacity(1);
}

.chooseImgSelected {
	cursor: default;
-webkit-filter: grayscale(.7) opacity(1) !important;
   -moz-filter: grayscale(.7) opacity(1) !important;
		filter: grayscale(.7) opacity(1) !important;
}
.chooseImgNoOpacity {
	cursor: default;
-webkit-filter: opacity(1) !important;
   -moz-filter: opacity(1) !important;
		filter: opacity(1) !important;
}

/* Buy multiple stars */
.assistMultipleStarWrapper {
	position: relative;
}
.assistMultipleStarSelectionWrapper {
	position: absolute;
	left: -9px;
	bottom: -4px;
}
.assistMultipleStarSelectionWrapper > img {
	height: 20px;
}
.assistMultipleStarSelectionWrapper > img:first-child {
	transform: rotate(180deg);
}
.assistMultipleStarSelectionWrapper > span {
	display: inline-block;
	position: relative;

	font-family: 'Mario';
	font-size: 17px;

	width: 30px;
	left: -5px;
}
.assistMultipleStarSelectionWrapper > span > span {
	display: inline-block;
	text-align: center;
	width: 37px;
}

/* Assist Navbar */
#navbarAssist {
	width: 300px !important;
	white-space: nowrap;
	z-index: 98;
}

/* Titlebar */
#nvAssistTitlebar {
	height: 25px;
	background-color: #00005221;
	user-select: none;
}
#nvAssistTitlebarIcons {
	float: right;
	position: relative;
}
#nvAssistTitlebarIcons img, #nvAssistTitlebarIcons svg {
	position: relative;
	user-select: none;
	top: 3px;
	left: 2px;

	width: 20px;
	height: 20px;
}
#nvAssistTitlebarIcons > span {
	display: inline-block;
	cursor: pointer;
	height: 25px;
	width: 25px;
	margin-left: -5px;

-webkit-transition: background-color .3s;
   -moz-transition: background-color .3s;
		transition: background-color .3s;
}
.nvAssistTitlebarIcons_selected {
	background-color: #aff4ff7a;
}
.nvAssistTitlebarIconsButtons:hover {
	background-color: #aff4ff4a;
}
.nvAssistTitlebarIconsButtons:active {
	background-color: #aff4ff7a;
}

/* State indicator */
#nvAssistStateIndicator {
	overflow: hidden;
	height: 45px;
	height: 5px;

-webkit-transition: height .3s;
   -moz-transition: height .3s;
		transition: height .3s;
}
#nvAssistStateIndicator > div {
	display: flex;
	justify-content: space-evenly;
	background-color: #0000526e;
	padding: 5px 10px;
}

#nvAssistStateIndicator img:first-child {
	transform: scaleX(-1);

	margin: 0;
	margin-right: 7px;
}
#nvAssistStateIndicator img:last-child {
	margin: 0;
	margin-left: 7px;
}
#nvAssistStateIndicator img:first-child, #nvAssistStateIndicator img:last-child {
	width: 35px;
	height: 35px;

	cursor: pointer;
	filter: opacity(0.7);

-webkit-transition: filter .15s;
   -moz-transition: filter .15s;
		transition: filter .15s;
}
#nvAssistStateIndicator img:first-child:hover, #nvAssistStateIndicator img:last-child:hover {
	filter: opacity(0.9);
}
#nvAssistStateIndicator img:first-child:active, #nvAssistStateIndicator img:last-child:active {
	filter: opacity(1);
}

#nvAssistStateIndicator img {
	width: 30px;
	height: 30px;
	margin-top: 2px;
}

/* Turn indicator */
#nvAssistTurnIndicator {
	overflow: hidden;
	height: 35px;
	height: 5px;

-webkit-transition: height .3s;
   -moz-transition: height .3s;
		transition: height .3s;
}
#nvAssistTurnIndicator > div {
	display: flex;
	justify-content: space-evenly;
	background-color: #00005221;
	padding: 5px 20px;
}
#nvAssistTurnIndicator img {
	width: 25px;
}

#nvAssistMain {
	padding: 10px;
}
#nvAssistTurn_Misc {
	display: flex;
	justify-content: space-around;
}
#nv_chooseWrapper {
	margin-top: 10px;
	margin-bottom: 10px;
}
#nv_chooseWrapper > span {
	position: relative;
}
#nv_assistChooseOrder {
	white-space: normal;
}
#nv_assistChooseOrder img {
	height: 65px;
}

#nv_choose2 > img:nth-of-type(2), #nv_choose3 > img:nth-of-type(2), #nv_choose4 > img:nth-of-type(2) { /* arrows */
	position: absolute;
	height: 35px;
	left: -20px;
	top: -30px;
	z-index: 980;
}

/* Choose Order */
#assistChooseOrder img {
	width: 60px;
}

#choose1 {
	margin-top: 15px;
}

#choose1, #choose2, #choose3, #choose4 {
	/*visibility: hidden;
	opacity: 0;*/

}