@import url(normalize.css);
@import url(animation.css);

:root {
	--kamisama-border: 1px solid #2d2254;
	--bg-purple-100: #786ba9;
	--bg-purple-200: #2d2254;
	--bg-purple-500: #211845;
	--bg-purple-900: #19103a;
	--bg-purple-1000: #120a30;
	--purple-highlight: #e32486;
	--blue-highlight: #556cff;
	--blue-100: #6F78B7;
	--blue-200: #3B4276;
	--blue-500: #1E213B;
	--blue-700: #16192C;
	--blue-900: #131525;
	--green-500: #4acda1;
	--violet-500: #8972ca;
	--black-highlight: #0cc5f9;
	--black-100: #7C8496;
	--black-200: #3C414B;
	--black-500: #22252A;
	--black-700: #15161A;
	--black-900: #0F1013;
	--red-500: #e95053;
	--white-100: #fff;
	--white-200: #f4f4f7;
	--white-300: 231, 231, 237;
	--white-500: #CECEDC;
	--white-700: #A9A9C1;
	--white-900: #8484A6;
	--white-1000: #484863;
	--highlight-low: #ceaf77;
	--highlight-medium: #dbdb7f;
	--highlight-high: #30A530;
	--highlight-highest: #e32486;
	/* Sizes */
	--size: 36px;
	--size-0\.5: calc(var(--size) / 2); /* 18px */
	--size-0\.33: calc(var(--size) / 3); /* 12px */
	--size-0\.25: calc(var(--size) / 4); /* 9px */
	--size-0\.20: calc(var(--size) / 5); /* 7.2px */
	--size-1\.5: calc(var(--size) * 1.5); /* 54px */
	--size-2\.0: calc(var(--size) * 2); /* 72px */

	--font-icons: "Material Symbols Rounded", sans-serif;
	--font-main: "Inter", system-ui, sans-serif;
}

::-webkit-scrollbar {
	background-color: var(--black-700);
	height: 8px;
	width: 8px;
}

::-webkit-scrollbar-thumb {
	background: var(--black-700);
	border-radius: 4px;
}

::-webkit-scrollbar-thumb:active,
::-webkit-scrollbar-thumb {
	background: var(--black-200);
}

* {
	font-family: var(--font-main);
}

body {
	background: linear-gradient(38deg, #19103a 60%, #2d2254);
	min-height: 100vh;
	height: 100%;
}

html body * {
	color: white;
}

main#main-page {
	width: 100%;
	margin: 0 auto 2.25rem;
}

/** Login template ---- */

.login-header {
	align-items: center;
	display: flex;
	height: 140px;
	margin-bottom: 120px;
	padding: 0 100px;
}

.login-header .login-logo img {
	height: 40px;
}

#main-login {
	align-content: center;
	background: linear-gradient(38deg, var(--black-700) 60%, var(--black-500));
	display: block;
	flex-direction: column;
	height: 100vh;
	justify-content: center;
	position: relative;
	width: 100vw;
}

.login-animation {
	align-content: center;
	display: block;
	height: 100vh;
	justify-content: center;
	position: relative;
	width: 100vw;
}

.login-logo {
	margin: 0 auto;
	width: 120px;
}

#login-form {
	background-color: var(--black-500);
	margin: 0 auto;
	max-height: 650px;
	padding-left: 100px;
	width: 600px;
	padding: 80px;
	border: 1px solid #FFFFFF55;
	border-radius: 10px;
}

#login-form h2 {
	color: white;
	font-size: 60px;
	margin-bottom: 40px;
}

#login-form p {
	color: #8972ca;
	font-size: 14px;
	margin-bottom: 40px;
}

#login-form p a {
	color: #e32486;
	text-decoration: none;
}

#login-form .input-template {
	background-color: var(--black-700);
	border: 1px solid #FFFFFF55;
}

/** Input template ---- */

.input-template {
	background-color: #2d2254;
	border-radius: 16px;
	box-sizing: border-box;
	display: flex;
	min-height: 64px;
	padding: 10px 25px;
}

.input-template-margin {
	margin-bottom: 20px;
}

.input-template .field-section {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column-reverse;
}

.input-template label {
	color: #8972ca;
	font-size: 10px;
	height: 14px;
}

.input-template textarea:focus+label,
.input-template select:focus+label,
.input-template input:focus+label {
	color: #e32486;
}

.input-template textarea,
.input-template select,
.input-template input {
	background-color: transparent;
	border: 0;
	font-size: 14px;
	color: white;
	font-weight: bold;
	height: 30px;
}

.input-template select>option {
	background: #323645;
	border-radius: 0;
	border-top: none;
}

.input-template select:focus,
.input-template input:focus {
	border: 0;
	outline: 0;
}

.input-template .icon-section {
	align-items: center;
	color: #8972ca;
	display: flex;
}

.input-template textarea {
	padding-top: 20px;
	min-height: 250px;
	font-weight: normal;
}

.input-template textarea:focus {
	outline: 0;
	border: 0;
}

.button-template {
	margin-top: 50px;
}

/* Default elements
   ========================================================================== */

button {
	background-color: var(--purple-highlight);
	height: var(--size);
	border: 0;
	border-radius: 5px;
	color: white;
	cursor: pointer;
	padding: 0 20px;
	font-size: 14px;
	font-weight: normal;
}

button[name="loggin"] {
	height: 64px;
	border-radius: 32px;
	cursor: pointer;
	padding: 0 55px;
}

input[type="text"],
input[type="email"] {
	background-color: var(--bg-purple-500);
	height: var(--size);
	border: 1px solid var(--bg-purple-200);
	border-radius: 5px;
	padding: 0 10px;
	color: white;
}

input[type="text"]:focus,
input[type="email"]:focus {
	outline: 2px solid var(--bg-purple-200);
	outline-offset: 4px;
}

input:checked+label.checkbox-square {
	outline: 2px solid var(--bg-purple-200);
	outline-offset: 4px;
}

label.checkbox-square {
	text-indent: -9999px;
	display: inline-block;
	width: 40px;
	height: 40px;
	background-color: white;
	border-radius: 5px;
	cursor: pointer;
	margin-right: 10px;
	border: 1px solid var(--bg-purple-100);
	overflow: hidden;
}

label.checkbox-square:before {
	content: "";
	width: 350%;
	background: #ffffff12;
	height: 350%;
	display: block;
	transform: rotate(45deg);
}

label.checkbox-square[for="default_theme"] {
	background-color: var(--bg-purple-200);
}

label.checkbox-square[for="black_theme"] {
	background-color: #111;
}

label.checkbox-square[for="blue_theme"] {
	background-color: var(--blue-500);
}

label.checkbox-square[for="white_theme"] {
	background-color: #eee;
}

label.checkbox-square[for="green_theme"] {
	background-color: var(--bg-purple-200);
}

/* Header
   ========================================================================== */

.header {
	align-items: center;
	box-sizing: border-box;
	display: flex;
	height: 140px;
	justify-content: space-between;
	margin: 0 auto;
	padding: 0 100px;
	width: 100%;
}

/* Logo
   ========================================================================== */

.header .logo img {
	height: 40px;
}

/* Nav
   ========================================================================== */

nav a {
	color: white;
	text-decoration: none;
	text-transform: uppercase;
	vertical-align: middle;
	line-height: 16px;
	font-size: 12px;
	margin-left: 5px;
	padding: 10px 20px;
	border-radius: 5px;
}

nav a:hover {
	background-color: var(--bg-purple-200);
}

nav a span.material-symbols-rounded {
	font-size: 16px;
	vertical-align: sub;
	margin-right: 10px;
}

.menu-mobile {
	display: none;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	padding: 5px 10px;
	background-color: var(--bg-purple-900);
	border-radius: 5px;
	height: var(--size);
	box-sizing: border-box;
}

.menu-mobile:focus {
	outline: 3px solid var(--bg-purple-200);
}

.menu-mobile span.material-symbols-rounded {
	font-size: 18px;
}

.menu-mobile span.menu-mobile-text {
	font-size: 12px;
	font-weight: bold;
	margin-left: 10px;
}

@media (max-width: 1200px) {
	.menu-mobile {
		display: flex;
	}

	.nav-menu {
		display: none;
	}

	.nav-menu.active {
		display: flex;
		flex-direction: column;
		background-color: var(--bg-purple-900);
		padding: 20px 0;
		border-radius: 10px;
		z-index: 1000;
	}

	.nav-menu.active a {
		padding: 16px 40px;
		margin-left: 0;
		border-radius: 0;
	}
}

/* Table
   ========================================================================== */

nav#filter ul,
nav#filter_bet ul {
	display: flex;

	& li {
		align-items: center;
		background-color: var(--black-500);
		border: 1px solid var(--black-200);
		border-left: 0;
		display: flex;
		font-size: 11px;
		height: var(--size);
		list-style: none;
		text-transform: uppercase;

		&:first-child {
			border-left: 1px solid var(--black-200);
			border-top-left-radius: 5px;
			border-bottom-left-radius: 5px;
		}

		&:last-child {
			border-top-right-radius: 5px;
			border-bottom-right-radius: 5px;
		}

		&:not(:has(label)) {
			color: var(--black-100);
			padding: 0 10px;
		}

		&:is(:focus, :has(:checked)) {
			background-color: var(--purple-highlight)
		}

		& span {
			color: var(--black-100);
			font-size: 13px;
			line-height: 1;
			height: 15px;
			margin-right: 5px;
		}

		& label {
			cursor: pointer;
			height: var(--size);
			line-height: var(--size);
			padding: 0 10px;
		}

		& input {
			display: none;
		}
	}
}

/* Table
   ========================================================================== */

table.kamisama-table {
	border: 1px solid #2d2254;
	border-radius: 10px;
	border-spacing: 0;
	width: 100%;
}

table.kamisama-table thead tr th {
	color: #8972ca;
	font-size: 12px;
}

table.kamisama-table thead tr th,
table.kamisama-table tbody tr td {
	padding: 10px;
}

table.kamisama-table tbody tr td {
	border-top: 1px solid #2d2254;
	text-align: center;
	color: white;
	font-size: 13px;
}

table.kamisama-table tbody tr:nth-child(odd) td {
	background-color: #ffffff12;
}

table.kamisama-table tbody tr:last-child td:first-child {
	border-bottom-left-radius: 9px;
}

table.kamisama-table tbody tr:last-child td:last-child {
	border-bottom-right-radius: 9px;
}

/** Kamisama Mimic template ---- */

.kamisama-mimic-holder {
	display: flex;
	flex-wrap: wrap;
	gap: var(--size);
	padding: 0 30px 30px;
}

section.kamisama-mimic {
	border: 1px solid #2d2254;
	border-radius: 10px;
	box-sizing: border-box;
	padding: var(--size) 0;
	position: relative;
	width: calc(100% * (1/6) - var(--size));
}

section.kamisama-mimic:has(.player-advantage-0\.5),
section.kamisama-mimic:has(.player-advantage-0\.7) {
	box-sizing: border-box;
	border-radius: 12px;
	background: conic-gradient(at top center, rgba(31, 235, 166, 0.8), #4acda1);
	/**background-color: rgba(31, 235, 166, 0.8);*/
}

section.kamisama-mimic:has(.player-advantage-0\.7) .table-name,
section.kamisama-mimic:has(.player-advantage-0\.7) .technical-data,
section.kamisama-mimic:has(.player-advantage-0\.7) .number-players,
section.kamisama-mimic:has(.player-advantage-0\.7) .session-start {
	background-color: #4acda1 !important;
}

section.kamisama-mimic:has(.player-advantage-0\.5) .table-name .table-name-text,
section.kamisama-mimic:has(.player-advantage-0\.5) .table-name .table-limits-text,
section.kamisama-mimic:has(.player-advantage-0\.5) .secondary-table tbody tr td,
section.kamisama-mimic:has(.player-advantage-0\.5) .primary-table tbody tr td {
	color: white !important;
}

section.kamisama-mimic:has(.player-advantage-0\.7) .table-name .table-name-text,
section.kamisama-mimic:has(.player-advantage-0\.7) .table-name .table-limits-text,
section.kamisama-mimic:has(.player-advantage-0\.7) .secondary-table thead tr th,
section.kamisama-mimic:has(.player-advantage-0\.7) .secondary-table tbody tr td,
section.kamisama-mimic:has(.player-advantage-0\.7) .primary-table thead tr th,
section.kamisama-mimic:has(.player-advantage-0\.7) .primary-table tbody tr td {
	color: black !important;
}

section.kamisama-mimic:has(.player-advantage-0\.5) {
	background: color-mix(in srgb, var(--black-500) 50%, yellow 10%) !important;
}


section.kamisama-mimic:has(.player-advantage-0\.5) .table-name,
section.kamisama-mimic:has(.player-advantage-0\.5) .technical-data,
section.kamisama-mimic:has(.player-advantage-0\.5) .number-players,
section.kamisama-mimic:has(.player-advantage-0\.5) .session-start
{
	background-color: #292a19 !important;
	color: white !important;
}

section.kamisama-mimic.running-count-dead:before {
	content: '\f89a';
	font-family: "Material Symbols Rounded";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	color: white;
	font-size: 80px;
	z-index: 100;
	background: #19103aab;
	vertical-align: middle;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
}

section.kamisama-mimic header {
	position: relative;
	height: 60px;
	margin-bottom: 20px;
	z-index: 100;
}

section.kamisama-mimic header .table-name {
	align-items: center;
	background-color: #2d2254;
	border-radius: 4px;
	bottom: -10px;
	color: white;
	display: flex;
	font-size: 12px;
	font-weight: bold;
	flex-direction: column;
	left: var(--size);
	margin: auto;
	position: absolute;
	padding: 10px 0px;
	right: var(--size);
	text-align: center;
	text-transform: uppercase;
}

section.kamisama-mimic header .table-name .table-limits-text {
	font-size: 11px;
}

section.kamisama-mimic header .table-name {
	font-size: 16px
}

section.kamisama-mimic.min-bet-50 {
	box-shadow: none !important;
}

section.kamisama-mimic.min-bet-100 {
	border: 2px solid #8972ca !important;
	box-shadow: none !important;
}

section.kamisama-mimic.min-bet-250,
section.kamisama-mimic.min-bet-500,
section.kamisama-mimic.min-bet-1000 {
	border: 2px solid #1feba6 !important;
	box-shadow: none !important;
}

section.kamisama-mimic header .user-name {
	position: absolute;
	top: -16px;
	left: var(--size);
	color: #ffffff57;
	font-size: 12px;
	text-transform: uppercase;
	font-weight: bold;
}

section.kamisama-mimic header .user-name.user-marc {
	color: #ffa500;
}

section.kamisama-mimic header .user-name.user-onezpc2 {
color: #FFC455;
}

section.kamisama-mimic header .user-name.user-onezpc3 {
	color: #FFE1AA;
}

section.kamisama-mimic header .user-name.user-girona {
	color: #eea890;
}

section.kamisama-mimic header .user-name.user-hanah {
	color: #A2D72C;
}

section.kamisama-mimic header .user-name.user-nicolas {
	color: skyblue;
}

section.kamisama-mimic header .user-name.user-nicolas:before {
	content: "👻";
	margin-right: 5px
}

section.kamisama-mimic header .user-name.user-lluis {
	color: #dbdb7f;
}

section.kamisama-mimic header .user-name.user-luxios {
	color: #E7E7AA;
}

section.kamisama-mimic header .user-name.user-oscar {
	color: #6d6dff;
}

section.kamisama-mimic header .user-name.user-oscar2 {
	color: #588fb2;
}

section.kamisama-mimic header .user-name.user-katia {
	color: #30a530;
}
section.kamisama-mimic header .user-name.user-topgerard88 {
	color: #b23ed5;
}

section.kamisama-mimic header .time-ago {
	color: #8972ca;
	font-size: 10px;
	position: absolute;
	right: var(--size);
	top: -2px;
}

section.kamisama-mimic header .casino-name {
	position: absolute;
	left: var(--size);
	top: -2px;
	font-size: 10px;
	text-transform: uppercase;
	color: #8972ca;
}

section.kamisama-mimic article {
	position: relative;
	padding-top: 20px;
	padding-bottom: 10px;
	padding: 5px var(--size) 5px var(--size)
}

section.kamisama-mimic article:nth-child(odd) {
	background-color: #140c30;
}

section.kamisama-mimic article:last-child {
	margin-bottom: 20px;
}

section.kamisama-mimic article .counting-name {
	position: absolute;
	text-align: center;
	height: 10px;
	bottom: 0;
	left: 0;
	top: 0;
	margin: auto;
	font-size: 10px;
	color: white;
	transform: rotate(-90deg);
	padding: 5px 10px;
	background-color: #2d2254;
	border-radius: 5px;
}

section.kamisama-mimic table {
	margin: 0 auto;
	width: 100%;
}

section.kamisama-mimic table thead tr th {
	color: #8972ca;
	font-size: 10px;
	font-weight: bold;
}

section.kamisama-mimic table.primary-table thead tr th {
	height: 20px;
}

section.kamisama-mimic.true-count-loss table.primary-table tbody tr td {
	color: #ffffff5c;
}

section.kamisama-mimic.true-count-low {
	/*border-color: var(--highlight-low);
    box-shadow: 0px 0px 11px 0px var(--highlight-low);*/
}

section.kamisama-mimic.true-count-low table.primary-table tbody tr td {
	color: var(--highlight-low);
}

section.kamisama-mimic.true-count-medium {
	/*border-color: var(--highlight-medium);
    box-shadow: 0px 0px 11px 0px var(--highlight-medium);*/
}

section.kamisama-mimic.true-count-medium table.primary-table tbody tr td {
	color: var(--highlight-medium);
}

section.kamisama-mimic.true-count-high header .table-name {
	/**border-color: var(--highlight-high);
    box-shadow: 0px 0px 11px 0px var(--highlight-high);*/
}

section.kamisama-mimic.true-count-high table.primary-table tbody tr td {
	color: var(--highlight-high);
}

section.kamisama-mimic.true-count-highest {
	/*border-color: var(--highlight-highest);
    box-shadow: 0px 0px 11px 0px var(--highlight-highest);*/
}

section.kamisama-mimic.true-count-highest table.primary-table tbody tr td {
	color: var(--highlight-highest);
}

section.kamisama-mimic table tbody tr td {
	text-align: center;
	color: white;
	font-size: 13px;
}

section.kamisama-mimic table.primary-table tbody tr td {
	height: 40px;
	width: 33.3%;
	font-size: 24px;
	font-weight: bold;
}

section.kamisama-mimic footer {
	position: relative;
	margin-top: 5px;
	padding: 0 var(--size);
}

section.kamisama-mimic .technical-data {
	background-color: #0c062263;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 20px;
	border-radius: 0 0 9px 9px;
	display: flex;
	align-items: center;
	justify-content: center;
}

section.kamisama-mimic .machine-name {
	color: #8972ca;
	font-size: 10px;
	padding: 0 10px;
	border-right: 1px solid #8972ca;
	display: flex;
	align-items: center;
}

section.kamisama-mimic .machine-name span {
	color: #8972ca;
	font-size: 12px;
	margin-right: 5px;
}

section.kamisama-mimic .machine-name:last-child {
	border-right: none;
}

section.kamisama-mimic tbody tr td[data-role="insurance"] {
	font-weight: bold;
}

span.red-card {
	border-radius: 2px;
	bottom: 0;
	display: block;
	height: 20px;
	margin: auto;
	position: absolute;
	top: 0;
	width: 15px;
}

span.red-card.card-on {
	background-color: var(--red-500);
}

span.red-card.card-off {
	border: 1px solid #2d2254;
}

.session-container {
	position: absolute;
	top: -45px;
	right: var(--size);
	z-index: 101;
	display: flex;
	align-items: center;
	gap: 10px;
}

.session-start {
	background-color: var(--bg-purple-200);
	color: #8972ca;
	padding: 5px 8px;
	border-radius: 3px;
	font-size: 10px;
	text-transform: uppercase;
	display: flex;
	align-items: center;
	justify-content: center;
}

.number-players {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: bold;
	padding: 3px 8px;
	border-radius: 3px;
	background-color: var(--bg-purple-200);
}

.number-players span {
	font-size: 12px;
	margin-right: 5px;
}

.session-start strong {
	margin-left: 3px;
}

.session-start.minute-1,
.session-start.minute-2,
.session-start.minute-3,
.session-start.minute-4,
.session-start.minute-5 {
	background-color: orange;
	color: white;
}

.session-start.session-expired {
	background-color: var(--red-500);
	color: white;
}

.session-start.session-expired:before,
.session-start.minute-1:before,
.session-start.minute-2:before,
.session-start.minute-3:before,
.session-start.minute-4:before,
.session-start.minute-5:before {
	content: '\e88e';
	font-family: "Material Symbols Rounded";
	line-height: 10px;
	height: 10px;
	margin-right: 5px;
	padding: 0;
	font-size: 10px;
}

.session-start.session-expired:before {
	content: '\f89a'
}

.no-results {
	border-radius: 10px;
	border: 1px solid #2d2254;
	width: 80%;
	padding: 100px;
	margin: 0 auto;
	text-align: center;
}

.no-results .empty-state img {
	width: 100%;
	max-width: 400px;
	height: auto;
	margin: 0 auto;
}

.no-results h1 {
	color: #8972ca;
	margin-top: 0;
}

.no-results p {
	color: white;
	max-width: 600px;
	margin: 0 auto;
}

div#kamisama-notice {
	background: #e95053;
	text-align: center;
	padding: 5px 0;
	color: white;
	font-size: 13px;
}

div#kamisama-notice span.material-symbols-rounded {
	font-size: 13px;
	vertical-align: middle;
}

/* Duplicated Items
   ========================================================================== */

.kamisama-mimic.duplicated-item:before {
	content: "Duplicado";
	padding: 5px 8px;
	border-radius: 3px;
	font-size: 10px;
	text-transform: uppercase;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--red-500);
	position: absolute;
	top: -12px;
	left: var(--size);
	z-index: 100;
	color: var(--white-100);
}

/* Running Count Dead & Waiting Reset
   ========================================================================== */

.running-count-dead,
.waiting-reset {
	position: absolute;
	background: #2c21539c;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	margin: auto;
	bottom: 0;
	border-radius: 9px;
	display: flex;
	justify-content: center;
	align-items: center;
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	flex-direction: column;
}

.running-count-dead {
	backdrop-filter: none;
}

.waiting-reset:after {
	content: 'Esperando por Reset';
	color: orange;
	text-transform: uppercase;
	font-size: 12px;
}

.running-count-dead:before,
.waiting-reset:before {
	margin-top: 80px;
	content: '\e425';
	font-family: "Material Symbols Rounded";
	color: white;
	font-size: 80px;
}

.running-count-dead::before {
	content: '\f89a';
}

/* Insurance
   ========================================================================== */

.use-insurance,
.is-reloading-page {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 26px;
	border-radius: 0 0 9px 9px;
	animation-name: color_change;
	animation-duration: 1s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	color: white;
	text-transform: uppercase;
	font-weight: bold;
}

.is-reloading-page {
	z-index: 1;
}

.use-insurance {
	z-index: 100;
}

.use-insurance span,
.is-reloading-page span {
	font-size: 14px;
	margin-right: 5px;
}

.is-reloading-page {
	background-color: #30A530;
	animation: none;
}

/* Unwatched
   ========================================================================== */

.unwatched-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--size);
	margin-top: 50px;
	border-top: 1px solid var(--bg-purple-100);
	padding-top: 50px;
	position: relative;
	width: 100%;
}

.unwatched-list:before {
	content: "Unwatched";
	position: absolute;
	height: 50px;
	top: -25px;
	right: 0;
	left: 0;
	margin: auto;
	width: 200px;
	text-align: center;
	background-color: var(--bg-purple-1000);
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.unwatched {
	border-radius: 5px;
	border: 1px solid var(--bg-purple-100);
	color: var(--bg-purple-100);
	font-size: 13px;
	font-weight: bold;
	padding: 10px 20px;
	position: relative;
	display: flex;
}

.unwatched span.min-bet {
	padding: 3px 5px;
	background-color: var(--bg-purple-200);
	text-align: center;
	border-radius: 3px;
	font-size: 10px;
	margin-left: 10px;
	font-weight: bold;

    &:is(.min-bet-100) {
		background-color: var(--violet-500) !important;
	}

	&:is(.min-bet-250) {
		background-color: var(--green-500) !important;
	}

	&:is(.min-bet-500) {
		background-color: var(--black-highlight) !important;
	}

	&:is(.min-bet-1000) {
		background-color: var(--highlight-highest) !important;
	}
}

.unwatched span.min-bet:before {
	content: "$";
}

/* Search Filter
   ========================================================================== */

input#search-filter {
	background-color: var(--bg-purple-500);
	height: var(--size);
	border: 1px solid var(--bg-purple-200);
	border-radius: 5px;
	padding: 0 10px;
	color: white;
	padding-left: var(--size);
}

input#search-filter::placeholder {
	color: var(--bg-purple-100);
	font-size: 12px;
}

input#search-filter:focus {
	outline: 2px solid var(--bg-purple-200);
	outline-offset: 4px;
}

.search-holder span.material-symbols-rounded {
	font-size: 20px;
	height: var(--size);
	width: var(--size);
	display: flex;
	align-items: center;
	justify-content: center;
}

.search-holder span.keyboard-alt {
	position: absolute;
	right: 5px;
}

/* Keyboard
   ========================================================================== */

span.keyboard:before {
	position: absolute;
	border: 1px solid var(--bg-purple-200);
	content: "";
	left: 1px;
	top: 0.5px;
	width: 100%;
	height: 100%;
	border-radius: 4px;
}

span.keyboard {
	background-color: var(--bg-purple-200);
	padding: 3px 6px;
	border-radius: 3px;
	position: relative;
	font-size: 9px;
	font-weight: bold;
	margin-right: 5px;
	text-transform: uppercase;
}

span.keyboard-alt {
	border: 1px solid var(--bg-purple-100);
	padding: 3px 6px;
	border-radius: 3px;
	font-size: 9px;
	font-weight: bold;
	margin-right: 5px;
	text-transform: uppercase;
}

.shoe-change-notice:before {
	position: absolute;
	left: -4px;
	background-color: var(--red-500);
	content: '';
	width: 100%;
	height: calc(100% - 2px);
	z-index: -1;
	border-radius: 2px;
	border: 1px solid white;
}

.shoe-change-notice span {
	color: var(--red-500);
	font-size: 10px;
}

.shoe-change-notice {
	position: relative;
	width: 16px;
	height: 20px;
	background-color: white;
	border-radius: 2px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Issues
   ========================================================================== */

#issues img {
	display: block;
}

#issues ul li {
	margin-bottom: 10px;
}

/* Issues
   ========================================================================== */

.inner-container {
	background-color: #120a30;
	border-radius: 10px;
	padding: 2.25rem 5rem;
	box-sizing: border-box;
}


table.profile-table tbody tr td {
	padding: 0 var(--size) var(--size);
}

table.profile-table tbody tr td:first-child {
	vertical-align: baseline;
	padding-top: 10px;
}

/* BLUE THEME
   ========================================================================== */

html.blue_theme body {
	background: linear-gradient(38deg, var(--blue-700) 60%, var(--blue-500));
}

html.blue_theme input#search-filter,
html.blue_theme input[type="text"],
html.blue_theme input[type="email"] {
	background-color: var(--blue-500);
	border: 1px solid var(--blue-200);
}

html.blue_theme input#search-filter:focus,
html.blue_theme input[type="text"]:focus,
html.blue_theme input[type="email"]:focus,
html.blue_theme input:checked+label.checkbox-square {
	outline-color: var(--blue-200);
}

html.blue_theme button {
	background-color: var(--blue-highlight);
}

html.blue_theme .inner-container {
	background-color: var(--blue-900);
}

html.blue_theme section.kamisama-mimic header .table-name {
	background-color: var(--blue-500)
}

html.blue_theme section.kamisama-mimic header .time-ago {
	color: var(--blue-100)
}

html.blue_theme section.kamisama-mimic header .casino-name {
	color: var(--blue-100)
}

html.blue_theme section.kamisama-mimic article .counting-name {
	background-color: var(--blue-500)
}

html.blue_theme section.kamisama-mimic table thead tr th {
	color: var(--blue-100)
}

html.blue_theme section.kamisama-mimic .machine-name {
	color: var(--blue-100);
	border-right-color: var(--blue-100);
}

html.blue_theme section.kamisama-mimic .machine-name span {
	color: var(--blue-100)
}

html.blue_theme .number-players,
html.blue_theme .session-start {
	background-color: var(--blue-500);
	color: var(--blue-100)
}

html.blue_theme .running-count-dead,
html.blue_theme .waiting-reset {
	background: #2a2f5463;
}

/* BLACK THEME
   ========================================================================== */

html.black_theme body {
	background: linear-gradient(38deg, var(--black-700) 60%, var(--black-500));
}

html.black_theme nav a:hover {
	background-color: var(--black-200)
}

html.black_theme input#search-filter,
html.black_theme input[type="text"],
html.black_theme input[type="email"] {
	background-color: var(--black-500);
	border: 1px solid var(--black-200);
}

html.black_theme input#search-filter::placeholder {
	color: var(--black-100)
}

html.black_theme input#search-filter:focus,
html.black_theme input[type="text"]:focus,
html.black_theme input[type="email"]:focus,
html.black_theme input:checked+label.checkbox-square {
	outline-color: var(--black-200);
}

html.black_theme button {
	background-color: var(--black-highlight);
}

html.black_theme .inner-container {
	background-color: var(--black-900);
}

html.black_theme section.kamisama-mimic header .table-name {
	background-color: var(--black-500)
}

html.black_theme section.kamisama-mimic header .time-ago {
	color: var(--black-100)
}

html.black_theme section.kamisama-mimic header .casino-name {
	color: var(--black-100)
}

html.black_theme section.kamisama-mimic article .counting-name {
	background-color: var(--black-500)
}

html.black_theme section.kamisama-mimic table thead tr th {
	color: var(--black-100)
}

html.black_theme section.kamisama-mimic .machine-name {
	color: var(--black-100);
	border-right-color: var(--black-100);
}

html.black_theme section.kamisama-mimic .machine-name span {
	color: var(--black-100)
}

html.black_theme .number-players,
html.black_theme .session-start {
	background-color: var(--black-500);
	color: var(--black-100)
}

html.black_theme section.kamisama-mimic .technical-data,
html.black_theme .running-count-dead,
html.black_theme .waiting-reset {
	background: #3C414B63;
}

html.black_theme section.kamisama-mimic,
html.black_theme span.red-card.card-off {
	border-color: var(--black-200);
}

html.black_theme table.table-border tbody tr:hover td {
	background-color: var(--black-500);
}

html.black_theme .unwatched-list {
	border-color: var(--black-200);
}

html.black_theme .unwatched-list:before {
	background-color: var(--black-500);
}

html.black_theme .unwatched {
	border-color: var(--black-200);
	color: var(--black-100);
}

html.black_theme .unwatched span.min-bet {
	background-color: var(--black-200);
}

html.black_theme span.keyboard {
	background-color: var(--black-200);
	color: var(--white-100);
}

html.black_theme span.keyboard-alt,
html.black_theme span.keyboard:before {
	border-color: var(--black-200)
}

/* WHITE THEME
   ========================================================================== */

html.white_theme body {
	background: linear-gradient(38deg, rgba(var(--white-300), 0.1) 60%, var(--white-100));
	color: var(--white-1000)
}

html.white_theme body * {
	color: var(--white-1000);
}

html.white_theme nav a:hover {
	background-color: rgba(var(--white-300))
}

html.white_theme input#search-filter,
html.white_theme input[type="text"],
html.white_theme input[type="email"] {
	background-color: var(--white-100);
	border: 1px solid var(--white-500);
	color: var(--white-1000);
}

html.white_theme input#search-filter::placeholder {
	color: var(--white-900)
}

html.white_theme input#search-filter:focus,
html.white_theme input[type="text"]:focus,
html.white_theme input[type="email"]:focus,
html.white_theme input:checked+label.checkbox-square {
	outline-color: var(--white-500);
}

html.white_theme button {
	background-color: var(--purple-highlight);
	color: var(--white-100)
}

html.white_theme .inner-container {
	background-color: rgba(var(--white-300), 0.3);
}

html.white_theme section.kamisama-mimic {
	background-color: var(--white-100);
}

html.white_theme section.kamisama-mimic header .table-name {
	background-color: rgba(var(--white-300))
}

/*html.white_theme .kamisama-mimic.true-count-highest header .table-name {background-color: var(--highlight-highest); }
html.white_theme .kamisama-mimic.true-count-high header .table-name {background-color: var(--highlight-high); }
html.white_theme .kamisama-mimic.true-count-medium header .table-name {background-color: var(--highlight-medium); }
html.white_theme .kamisama-mimic.true-count-low header .table-name {background-color: var(--highlight-low); }
html.white_theme .kamisama-mimic.true-count-highest header .table-name span,
html.white_theme .kamisama-mimic.true-count-high header .table-name span,
html.white_theme .kamisama-mimic.true-count-medium header .table-name span,
html.white_theme .kamisama-mimic.true-count-low header .table-name span {color: var(--white-100);}*/
html.white_theme section.kamisama-mimic header .time-ago {
	color: var(--white-900)
}

html.white_theme section.kamisama-mimic header .casino-name {
	color: var(--white-900)
}

html.white_theme section.kamisama-mimic article .counting-name {
	background-color: var(--white-500)
}

html.white_theme section.kamisama-mimic table thead tr th {
	color: var(--white-900)
}

html.white_theme section.kamisama-mimic .machine-name {
	color: var(--white-900);
	border-right-color: var(--white-900);
}

html.white_theme section.kamisama-mimic.true-count-loss table.primary-table tbody tr td {
	color: var(--white-700)
}

html.white_theme section.kamisama-mimic table tbody tr td {
	color: var(--white-1000)
}

html.white_theme section.kamisama-mimic .machine-name span {
	color: var(--white-900)
}

html.white_theme .number-players,
html.white_theme .session-start {
	background-color: rgba(var(--white-300));
	color: var(--white-900);
}

html.white_theme section.kamisama-mimic .technical-data {
	background: rgba(var(--white-300));
}

html.white_theme .running-count-dead,
html.white_theme .waiting-reset {
	background: rgba(var(--white-300), 0.5);
}

html.white_theme section.kamisama-mimic,
html.white_theme span.red-card.card-off {
	border-color: rgba(var(--white-300));
}

html.white_theme .is-reloading-page,
html.white_theme .is-reloading-page span,
html.white_theme .use-insurance,
html.white_theme .use-insurance span {
	color: var(--white-100)
}

html.white_theme table.table-border tbody tr:hover td {
	background-color: rgba(var(--white-300));
}

html.white_theme .unwatched-list {
	border-color: var(--white-500);
}

html.white_theme .unwatched-list:before {
	background-color: rgba(var(--white-300));
}

html.white_theme .unwatched {
	border-color: var(--white-500);
	color: var(--white-900);
}

html.white_theme .unwatched span.min-bet {
	background-color: rgba(var(--white-300));
	color: var(--white-900);
}

html.white_theme span.keyboard {
	background-color: var(--white-700);
	color: var(--white-100);
}

html.white_theme span.keyboard-alt,
html.white_theme span.keyboard:before {
	border-color: var(--white-700)
}

#available-table-list {
	background-color: var(--black-500);
	border: 1px solid var(--black-200);
	border-radius: 5px;
	cursor: pointer;
	display: grid;
	font-size: 12px;
	height: var(--size);
	margin-left: var(--size);
	place-content: center;
	padding: 0 10px;
	position: relative;
	
	& span {
		&:is([data-count="0"]) {
			color: var(--black-100)
		}

		&:after {
			content: '\e5cf';
				display: inline-grid;
			font-family: var(--font-icons);
			margin-left: 5px;
			height: 20px;
			place-content: center;
				transition: all .1s linear;
		}
	}

	& ul {
		border-radius: inherit;
		cursor:default;
		display: none;
		max-height: 500px;
		list-style: none;
		margin: 0;
		overflow-y: auto;
		padding: 0;
		position: absolute;
		top: var(--size);
		z-index: 10000;

		& li {
			align-items: center;
			border-bottom: inherit;
			justify-content: space-between;
			display: flex;
			padding-left: 10px;
			width: 200px;

			&:is([data-min-bet="50"])::after {
				background-color: var(--black-200);
			}

			&:is([data-min-bet="100"])::after {
				background-color: #8972ca;
			}

			&:is([data-min-bet="250"])::after,
			&:is([data-min-bet="500"])::after,
			&:is([data-min-bet="1000"])::after {
				background-color: #4acda1;
			}

			&::after {
				content: '$' attr(data-min-bet);
				height: var(--size);
				width: var(--size);
				display: grid;
				place-content: center;
			}
		}
	}

	&:hover {
		& ul {
			background-color: inherit;
			border: inherit;
			display: block;
	
			&:empty {
				display: none;
			}
		}

		& span {
			&::after {
				transform: rotate(180deg);
			}
		}
	}
}

@keyframes color_change {
	from {
		background-color: #e32486;
	}

	to {
		background-color: #ffa500;
	}
}

@media (max-width: 1940px) {
	section.kamisama-mimic {
		width: calc(100% * (1/5) - var(--size));
	}
}

@media (max-width: 1600px) {
	section.kamisama-mimic {
		width: calc(100% * (1/4) - var(--size));
	}
}

@media (max-width: 1400px) {
	body {
		height: 100%;
	}

	section.kamisama-mimic {
		width: calc(100% * (1/3) - var(--size));
	}
}

@media (max-width: 1200px) {
	section.kamisama-mimic {
		width: calc(100% * (1/2) - var(--size));
	}

	.no-results {
		padding: 30px;
	}
}

@media (max-width: 750px) {

	.login-header,
	.header {
		margin-bottom: 0;
		padding: 0 var(--size);
	}

	input#search-filter {
		width: 150px;
	}

	section.kamisama-mimic {
		width: 100%;
	}

	#login-form {
		padding: 0 var(--size);
		width: 100%;
		box-sizing: border-box;
	}

	#login-form h2 {
		font-size: 48px;
	}

	.button-template {
		text-align: center;
	}

	.menu-mobile-text {
		display: none;
	}
}


input:-internal-autofill-previewed,
input:-internal-autofill-selected,
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
	-webkit-box-shadow: 0 0 0 30px #2d2254 inset !important;
	background-color: white !important;
	/* border: 1px solid green; */
	appearance: none;
	color: fieldtext;
	-webkit-text-fill-color: white;
}

@keyframes shake {
	0% {
		transform: translate(1px, 1px) rotate(0deg);
	}

	10% {
		transform: translate(-1px, -2px) rotate(-1deg);
	}

	20% {
		transform: translate(-3px, 0px) rotate(1deg);
	}

	30% {
		transform: translate(3px, 2px) rotate(0deg);
	}

	40% {
		transform: translate(1px, -1px) rotate(1deg);
	}

	50% {
		transform: translate(-1px, 2px) rotate(-1deg);
	}

	60% {
		transform: translate(-3px, 1px) rotate(0deg);
	}

	70% {
		transform: translate(3px, 1px) rotate(-1deg);
	}

	80% {
		transform: translate(-1px, -1px) rotate(1deg);
	}

	90% {
		transform: translate(1px, 2px) rotate(0deg);
	}

	100% {
		transform: translate(1px, -2px) rotate(-1deg);
	}
}