* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	/* border: 1px solid red !important; */
	/* console.log() of CSS for debugging purposes */
}

:root {
	--mtop: 58px;
	--fs-tnm: 16px;
}

::selection {
	background-color: #413254c2;
}

#sandwich .fadeOut {
	filter: sepia(0.6) brightness(0.6);
}

#sandwich .unavailable {
	filter: sepia(1) brightness(0.4) opacity(0.6) !important;
	-webkit-tap-highlight-color: transparent !important;
	cursor: not-allowed !important;
	user-select: none !important;
}

/* #region Alert, Emoji & Modal box */

div.alert-bx {
	--albx-b1: #468100eb;
	--albx-clr: #062700;
	--albx-b2: #53f9ff;
	
	z-index: 10;
	display: flex;
	position: fixed;
	text-align: center;
	align-items: center;
	color: var(--albx-clr);
	padding: 2px 2px 2px 6px;
	border-radius: 0 50px 50px 0;
	transform: translateX(-100%);
	transition: transform 0.4s cubic-bezier(0.68, -.40, 0.4, 1.25);
	background: linear-gradient(45deg, var(--albx-b1), var(--albx-b2));
}

div.alert-bx.active { transform: translateX(0) }
div.alert-bx.w {
	--albx-clr: #270000;
	--albx-b1: #813a00eb;
	--albx-b2: #ffba53;
}

div.emojis {
	padding-bottom: 4px;
	position: relative;
	display: flex;
	margin: 4px 0;
}

div.emoji {
	--l: -1;
	opacity: 1;
	margin: 2px;
	cursor: pointer;
	user-select: none;
	transform: scale(1);
	visibility: visible;
	width: clamp(16px, 5vw, 22px);
	height: clamp(16px, 5vw, 22px);
	background-size: contain !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	transition: transform 0.2s ease, visibility 0s linear, opacity 0.2s ease;
}

.left div.emoji {
	--l: 1;
}

div.emoji.msg {
	transform: translate(calc(var(--l) * 10px), 0) scale(1.4);
	position: absolute;
}

div.emoji.hide {
	opacity: 0;
	animation: none;
	visibility: hidden;
}

div.emoji.anim {
	z-index: 10;
	animation: msgAnim 3s ease-out 1 forwards;
}

@keyframes msgAnim {
	0% { transform: translate(calc(var(--l) * 10px), 0) scale(1.4) }
	20% { transform: translate(calc(var(--l) * 10px), calc(var(--dir) * 80px)) scale(1) }
	30% { transform: translate(calc(var(--l) * 10px), calc(var(--dir) * 80px)) scale(2.2) }
	40% { transform: translate(calc(var(--l) * 10px), calc(var(--dir) * 80px)) scale(1) }
	50% { transform: translate(calc(var(--l) * 10px), calc(var(--dir) * 80px)) scale(2) }
	60% { transform: translate(calc(var(--l) * 10px), calc(var(--dir) * 80px)) scale(1) }
	70% { transform: translate(calc(var(--l) * 10px), calc(var(--dir) * 80px)) scale(1.8) }
	80% { transform: translate(calc(var(--l) * 10px), calc(var(--dir) * 80px)) scale(1) }
	90% { transform: translate(calc(var(--l) * 10px), calc(var(--dir) * 80px)) scale(1.6) }
	100% { transform: translate(calc(var(--l) * 10px), calc(var(--dir) * 0px)) scale(0) }
}

div.emoji[data-eid="1"] { background: url('/media/emoji/halo-smiling-face.png') }
div.emoji[data-eid="3"] { background: url('/media/emoji/tears-of-joy.png') }
div.emoji[data-eid="4"] { background: url('/media/emoji/very-angry.png') }
div.emoji[data-eid="5"] { background: url('/media/emoji/blow-kiss.png') }
div.emoji[data-eid="6"] { background: url('/media/emoji/very-mad.png') }
div.emoji[data-eid="2"] { background: url('/media/emoji/poop.png') }
div.emoji[data-eid="1"]:active { transform: scale(1.15) }
div.emoji[data-eid="2"]:active { transform: scale(1.15) }
div.emoji[data-eid="3"]:active { transform: scale(1.15) }
div.emoji[data-eid="4"]:active { transform: scale(1.15) }
div.emoji[data-eid="5"]:active { transform: scale(1.15) }
div.emoji[data-eid="6"]:active { transform: scale(1.15) }


.modal-bx {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	position: fixed;
	align-items: flex-end;
	justify-content: center;
	background-color: #1c032769;
	transition: visibility 0.6s, opacity 0.2s 0.2s;
	perspective: 1000px;
	visibility: hidden;
	overflow: hidden;
	z-index: 1000;
	opacity: 0;
}

.modal-bx > .modal-data {
	width: 100%;
	display: flex;
	padding: 20px 8px;
	position: relative;
	text-align: center;
	align-items: center;
	flex-direction: column;
	transform-origin: 50% 100%;
	border-radius: 80px 80px 0 0;
	border-top: 5px solid #61008324;
	transform: rotateX(80deg) scale(0.85) translateY(0%);
	background: radial-gradient(#3c1138cc, #000000cf);
	transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
	box-shadow: inset 0px 20px 80px -32px #03032494, 0px 0px 50px -10px #22003cad;
}

.modal-bx > .modal-data .modal-img	{
	margin-bottom: 25px;
	width: 60px;
}

.modal-bx > .modal-data .modal-btn {
	border: none;
	margin: 0 4px;
	outline: none;
	color: #f2e3ff;
	padding: 12px 18px;
	border-radius: 40px;
	will-change: background-color;
	border-bottom: 1px solid #b76bffab;
	transition: background-color 0.2s ease;
	background-color: hsl(264deg 74% 8% / 80%);
}

.modal-bx > .modal-data .modal-btn:hover { background-color: hsl(274deg 30% 12% / 70%) }

.modal-bx > .modal-data .modal-title{
	color: hsl(279.69deg 100% 87.97%);
	margin-bottom: 8px;
	font-size: 24px;
}

.modal-bx > .modal-data .modal-desc {
	margin-bottom: 25px;
	text-align: center;
	color: #b3a3bea6;
	line-height: 1.25;
	font-size: 16px;
	width: 70%;
}

.modal-bx.show {
	transition: visibility 0.6s, opacity 0.1s 0s;
	backdrop-filter: blur(2px);
	visibility: visible;
	opacity: 1;
}

.modal-bx.show > .modal-data { transform: rotateX(0) scale(1) translateY(0) }

@media screen and (min-width: 400px) {
	.modal-bx > .modal-data {
		border-radius: 10px;
		margin: auto;
		width: 360px;
		border: none;
	}
}

/* #endregion */

/* #region Basic Body */

body
{
	width: 100%;
	display: flex;
	height: 100dvh;
	color: #fffadb;
	overflow-x: hidden;
	flex-direction: column;
	scroll-behavior: smooth;
	background-color: #1f2029;
	font-family: 'Poppins', sans-serif;
}

body > #sandwich > div:not(.utility) {
	height: 100% !important;
	backdrop-filter: blur(4px);
	transition: opacity 0.4s ease-in-out, transform 0.5s ease-in-out;
}

body > div#sandwich {
	height: 100dvh;
	position: relative;
	background: url('../media/bg.jpg');
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center;
	background-size: cover;
	margin-top: var(--mtop);
	padding-bottom: 30px;
	height: max-content;
	flex-grow: 1;
}

#ghostery-tracker-tally { display: none; }

/* #endregion */

/* #region Scenes Transition */

#sandwich > div.out-stage {
	opacity: 0;
	transform: scale(0.2) translateY(-200px);
}

#sandwich > div.in-stage {
	opacity: 1;
	transform: scale(1) translateY(0);
}

/* #endregion */

/* #region Loader */

body.loading { overflow: hidden; }
body.loading #if-loader .inner { animation: rotate 0.8s linear infinite; }

body.loading #if-loader {
	opacity: 1;
	transform: translateX(0);
	transition: opacity 0.5s 0.15s ease-in-out;
}

body.loading #loader-fpg {
	opacity: 1;
	backdrop-filter: blur(2px);
	transform: translateX(0vw);
	transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
}

#loader-fpg {
	opacity: 0;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100dvh;
	position: fixed;
	overflow: hidden;
	z-index: 100;
	background: #000000a5;
	transform: translateX(-120vw);
	transition: opacity 0.2s 0.4s ease-in-out, transform 0.2s 0.4s ease-in-out;
}

#if-loader {
	opacity: 0;
	display: block;
	width: 100px;
	height: 80px;
	position: fixed;
	top: 50%;
	left: 50%;
	margin-top: -40px;
	margin-left: -50px;
	z-index: 100;
	transform: translateX(-120vw);
	transition: opacity 0.4s 0s ease-in-out;
}

#if-loader .inner {
	animation: none;
	margin-top: 20px;
	border-radius: 50%;
	width: 50px;
	height: 50px;
	position: absolute;
}

#if-loader .rotate-one {
	left: 50%;
	margin-left: -25px;
	border-top: 3px solid #1f6d8f;
}

#if-loader .rotate-two {
	top: -10px;
	left: 30px;
	border-left: 3px solid #1f6d8f;
}

#if-loader .rotate-three {
	top: -10px;
	right: 30px;
	border-right: 3px solid #1f6d8f;
}

@keyframes rotate {
	0% { transform: rotateZ(0deg); }
	100% { transform: rotateZ(360deg); }
}

/* #endregion */

/* #region Header Style */

body > header
{
	box-shadow: #000000e7 1px 2px 25px -5px;
	background: #000000ad;
	position: fixed;
	height: auto;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 30;
	display: flex;
	padding: 10px 12px;
	--clrH-l: #ffffff;
	--clrH-a: #b0cdc7;
	transition: padding 0.2s;
	justify-content: space-between;
}

body > header.sticky
{
	padding: 6px;
}

body > header .logo
{
	align-items: center;
	position: relative;
	user-select: none;
	font-weight: 600;
	cursor: pointer;
	display: flex;
	font-size: 1.2em;
	margin-top: -2px;
	margin-left: -8px;
	letter-spacing: 1px;
	color: var(--clrH-l);
	text-decoration: none;
	justify-content: center;
	text-transform: uppercase;
	transition: transform 0.2s;
	-webkit-tap-highlight-color: transparent;
}

body > header .logo img
{
	width: 30px;
	height: 30px;
	padding: 0px;
	margin: 0 5px;
	border-radius: 50%;
	background: #b6d8f547;
	transition: transform 0.2s ease;
}

body > header.sticky .logo img { transform: scale(0.92); }

body > header .subhead
{
	flex-direction: column;
	font-weight: bolder;
	color: silver;
	display: flex;
	user-select: none;
	margin-right: -5px;
	transition: transform 0.2s;
}

body > header.sticky .subhead
{
	font-weight: bold;
	transform: translateX(-4px);
}

body > header .subhead .author
{
	font-weight: bolder;
	user-select: none;
	font-size: 0.72em;
	margin-top: 4px;
	margin-right: 2px;
	color: var(--clrH-a);
	align-self: flex-end;
	letter-spacing: 1.8px;
	transition: transform 0.2s;
}

body > header.sticky .logo
{
	margin-left: -1px;
	letter-spacing: 0px;
	text-transform: none;
	transform: translateX(-7px);
}

body > header.sticky .subhead .author
{
	font-weight: bold;
	margin-right: 12px;
	letter-spacing: 3.2px;
	transform: scaleX(1.25);
}

@media screen and (max-width: 500px)
{
	:root {
		--mtop: 48px;
		--fs-tnm: 14px;
	}

	body > header .logo
	{
		margin-top: -2px;
		font-size: 0.7em;
		margin-left: -12px;
		letter-spacing: 1px;
	}

	body > header .subhead
	{
		transform: scaleX(1.08);
		font-weight: normal;
		font-size: 0.66em;
	}
		
	body > header.sticky .subhead .author
	{
		letter-spacing: 1.2px;
		font-weight: normal;
		font-size: 0.66em;
	}
}

/* -- Required -- */

::-webkit-scrollbar
{
  width: 10px;
  background: #888;
  border: 1px dotted #444;
}

::-webkit-scrollbar-thumb
{
  border-radius: 0.8vw;
  background: #455;
  border: 1px dashed #566;
}

::-webkit-scrollbar-thumb:hover
{
  border-radius: 0;
  background: #344;
}

/* #endregion Header Style */

/* #region Auth form design */

#authform {
	display: flex;
	align-items: center;
	justify-content: center;
}

#authform .container {
	position: relative;
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
	text-align: center;
	max-width: 420px;
	width: 100%;
}

#authform .card-wrapper h4 {
	font-size: 24px;
	margin-bottom: 20px;
	padding: 2px;
}

#authform .card-wrapper > div > * {
	transform: translate3d(0, -20%, 20px) perspective(100px);
}

#authform [type="checkbox"]:checked,
#authform [type="checkbox"]:not(:checked) {
	position: absolute;
	left: -9999px;
}

#authform h6 > span {
	margin: 10px;
	font-size: 18px;
	cursor: pointer;
	font-weight: 700;
	color: #f9ffe057;
	user-select: none;
	display: inline-block;
	transform: scale(0.95);
	transition: all 0.32s ease;
	text-transform: uppercase;
	font-family: monospace;
}

#authform .checkbox:checked ~ h6 .s {
	color: #fff7c7;
	transform: scale(1.1);
}

#authform .checkbox:not(:checked) ~ h6 .l {
	color: #fff7c7;
	transform: scale(1.1);
}

#authform .checkbox:checked + label,
#authform .checkbox:not(:checked) + label {
	position: relative;
	display: block;
	padding: 0;
	width: 60px;
	height: 16px;
	cursor: pointer;
	text-align: center;
	border-radius: 8px;
	margin-bottom: 20px;
	background-color: #ffeba7;
}

#authform .checkbox:checked+label:before,
#authform .checkbox:not(:checked)+label:before {
	font-family: 'unicons';
	position: absolute;
	border-radius: 50%;
	color: #ffeba7;
	content: '\eb4f';
	display: block;
	width: 36px;
	z-index: 20;
	top: -10px;
	left: -10px;
	height: 36px;
	font-size: 24px;
	line-height: 36px;
	text-align: center;
	transition: all 0.5s ease;
	background-color: #102770;
	transform: translateX(0) rotate(-90deg);
}

#authform .checkbox:checked + label:before { transform: translateX(44px) rotate(180deg) }

#authform .card-container {
	width: 92%;
	height: 400px;
	margin-top: 15px;
	position: relative;
	perspective: 800px;
}

#authform .card-wrapper {
	width: 100%;
	height: 400px;
	display: flex;
	position: relative;
	justify-content: center;
	transform-style: preserve-3d;
	transition: transform 0.5s ease-out;
}

#authform .card-front,
#authform .card-back {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
	background-color: #2a2b38;
	background-image: url('../media/pat.svg');
	background-position: bottom;
	background-repeat: no-repeat;
	transform-style: preserve-3d;
	backface-visibility: hidden;
	background-size: 300%;
	position: absolute;
	border-radius: 15px;
}

#authform .card-back { transform: rotateY(180deg) }
#authform .checkbox:checked ~ .card-container > .card-wrapper { transform: rotateY(180deg) }

#authform .card-front p {
	font-size: 12px;
	line-height: 1.8;
	word-spacing: 1px;
	letter-spacing: 1px;
}

#authform .card-front p > a {
	cursor: pointer;
	color: #c4c3ca;
	text-underline-offset: 2px;
}

#authform .card-front p > a:hover {
	text-decoration: none;
	color: #ffeba7;
}

#authform .form-group {
	position: relative;
	margin-bottom: 5px;
	display: block;
	padding: 0;
	width: 86%;
}

#authform .input-tb {
	width: 100%;
	height: 48px;
	border: none;
	outline: none;
	font-size: 14px;
	font-weight: 500;
	color: #c4c3ca;
	line-height: 22px;
	border-radius: 8px;
	padding: 13px 20px;
	padding-left: 42px;
	letter-spacing: 0.5px;
	background-color: #1f2029;
}

#authform .input-icon {
	top: 0;
	left: 5px;
	height: 48px;
	font-size: 24px;
	text-align: left;
	color: #ffeba7;
	line-height: 48px;
	position: absolute;
}

#authform .btn {
	border: none;
	height: 44px;
	padding: 0 30px;
	font-size: 13px;
	margin-top: 15px;
	color: #102770;
	font-weight: 600;
	text-align: center;
	border-radius: 8px;
	letter-spacing: 1px;
	cursor: pointer;
	align-items: center;
	display: inline-flex;
	justify-content: center;
	text-transform: uppercase;
	transition: all 0.2s linear;
	background-color: #ffeba7;
	box-shadow: 0 8px 24px 0 rgba(255, 235, 167, .2);
}

#authform .btn:active,
#authform .btn:focus, #authform .btn:hover {
	box-shadow: 0 8px 24px 0 rgba(16, 39, 112, .2);
	background-color: #102770;
	color: #ffeba7;
	outline: none;
}

/* #endregion */

/* #region Dashboard */

#dash {
	width: 100%;
	display: none;
	height: max-content;
	align-items: center;
	flex-direction: column;
	justify-content: flex-start;
}

#dash .input-icon {
	font-size: 20px;
}

#dash > div {
	display: flex;
	flex-direction: column;
	max-width: 720px;
}

#dash .top-bar {
	z-index: 5;
	height: 25px;
	display: flex;
	margin-top: 10px;
	margin-bottom: 0px;
	max-width: 420px;
	position: sticky;
	color: #ffcf23f3;
	align-items: center;
	flex-direction: row;
	top: calc(var(--mtop) + 5px);
	justify-content: space-between;
	background: linear-gradient(45deg, #341c38fa, #00406bcc);
	box-shadow: 0px 4px 12px 2px #000000bf;
	width: calc(100vw - 10px);
	border-radius: 20px;
	filter: blur(0.4px);
}

#dash .top-bar .name {
	color: #89ffe39a;
	font-size: var(--fs-tnm);
}
#dash .top-bar .logout, #dash .top-bar .settings {
	cursor: pointer;
}

#dash .games {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	margin: 25px 0px;
	user-select: none;
	flex-direction: row;
	justify-content: space-evenly;
}

#dash .gcard {
	display: flex;
	cursor: pointer;
	justify-content: center;
	align-items: flex-start;
	position: relative;
	max-width: 280px;
	height: 300px;
	margin: 15px;
	overflow: hidden;
	width: calc(100% - 60px);
	background: #49adff;
	border-radius: 10px;
	transform: skew(2deg, 2deg);
	border-bottom-left-radius: 160px;
	border-bottom-right-radius: 160px;
	transition: transform 0.2s ease-in-out;
	background: linear-gradient(to bottom, var(--gc-clrA), var(--gc-clrB));
	box-shadow: 0 5px 1px #fffc, inset 0 -5px 5px rgb(196 59 255 / 25%), 0 10px 0 rgb(0 0 0 / 15%), -6px -4px 10px -2px var(--gc-bs);
}

#dash .gcard.disabled {
	cursor: not-allowed !important;
	transform: skew(0) scale(0.92) !important;
	filter: grayscale(0.82) brightness(0.4) opacity(0.8) !important;	
}

#dash .gcard::before {
	content: '';
	position: absolute;
	top:  -80px;
	left: -40px;
	width: 72%;
	height: 120%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2));
	transform: rotate(35deg);
	pointer-events: none;
	filter: blur(5px);
}

#dash .gcard .icon {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #000000a5;
	border-bottom-left-radius: 80px;
	border-bottom-right-radius: 80px;
	box-shadow: 0 2px 1px #fff8b7cc, inset 0 -2px 5px rgb(196 59 255 / 25%);
}

#dash .gcard .icon img {
	top: -4px;
	width: 80px;
	height: 80px;
	position: relative;
	border-bottom-left-radius: 50%;
	border-bottom-right-radius: 50%;
}

#dash .gcard:not(.disabled):hover{
	transform: skew(0deg, 0deg);
}

#dash .gcard .data {
	top: 100px;
	color: #fff;
	text-align: center;
	position: absolute;
	width: calc(100% - 40px);
}

/* #region Stats Table */

#dash main.table {
    width: calc(100vw - 10px);
	padding: 10px;
	display: none;
    background-color: #fff5;
    backdrop-filter: blur(7px);
    box-shadow: 0 .4rem .8rem #0005;
    border-radius: .8rem;
	max-width: 680px;
    overflow: hidden;
}

#dash .table__header {
    width: 100%;
    height: 36px;
	border-radius: 20px;
    background-color: #fff4;
    padding: 18px 7px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#dash .table__header .input-group {
    width: 180px;
    height: 25px;
    background-color: #fff5;
    padding: 0 .8rem;
    border-radius: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;

    transition: .2s;
}

#dash .table__header .input-group:hover {
    width: 200px;
    background-color: #fff8;
    box-shadow: 0 .1rem .4rem #0002;
}

#dash .table__header .input-group input {
    width: 100%;
    height: 25px;
    padding: 0 .5rem 0 .3rem;
    background-color: transparent;
    border: none;
    outline: none;
}

#dash .table__body {
    width: 98%;
    max-height: 500px;
    background-color: #fffb;
    margin: .8rem auto;
    border-radius: .6rem;
    overflow: auto;
    overflow: overlay;
}

#dash .table__body::-webkit-scrollbar{
    width: 5px;
    height: 5px;
	border: hidden;
	border-radius: 20px;
	background-color: transparent;
}

#dash .table__body::-webkit-scrollbar-thumb{
    border-radius: 50px;
	border: 0;
    background-color: #00000079;
    visibility: hidden;
}

#dash .table__body:hover::-webkit-scrollbar-thumb{ 
    visibility: visible;
}

#dash table {
    width: 100%;
}

#dash td img {
    width: 36px;
    height: 36px;
    margin-right: .5rem;
    border-radius: 50%;

    vertical-align: middle;
}

#dash table, #dash th, #dash td {
    border-collapse: collapse;
    padding: 5px 10px;
    text-align: left;
	color: #fff;
}

#dash thead th {
    position: sticky;
    top: 0;
    left: 0;
	min-width: 80px;
    background: linear-gradient(45deg, #070028e8, #000000de);
    cursor: pointer;
    text-transform: capitalize;
}

#dash tbody tr:nth-child(even) {
    background: linear-gradient(0deg, #000000e9, #3d1c3aeb);
}

#dash tbody tr:nth-child(odd) {
    background: linear-gradient(180deg, #000000e9, #3d2b0eeb);
}

#dash tbody tr:nth-child(even):hover {
    background: linear-gradient(0deg, #000, #3d1c3a);
}

#dash tbody tr:nth-child(odd):hover {
    background: linear-gradient(180deg, #000, #3d2b0e);
}

#dash tbody tr {
	top: 36px;
    --delay: .1s;
	position: sticky;
    transition: .5s ease-in-out var(--delay);
}

#dash tbody tr.hide {
    opacity: 0;
    transform: translateX(100%);
}

#dash tbody tr td,
#dash tbody tr td p,
#dash tbody tr td img {
    transition: .2s ease-in-out;
}

#dash tbody tr.hide td,
#dash tbody tr.hide td p {
    padding: 0;
    font: 0 / 0 sans-serif;
    transition: .2s ease-in-out .5s;
}

#dash tbody tr.hide td img {
    width: 0;
    height: 0;
    transition: .2s ease-in-out .5s;
}

#dash .status {
    padding: .4rem 0;
    border-radius: 2rem;
    text-align: center;
}

#dash .status.won {
    background-color: transparent;
    color: #09ff00;
}

#dash .status.lost {
    background-color: transparent;
    color: #ff2200;
}

#dash .status.tie {
    background-color: transparent;
	color: #f6ff00;
}

@media (max-width: 1000px) {
    #dash td:not(:first-of-type) {
        min-width: 7.8rem;
    }
}

#dash thead th span.icon-arrow {
    display: inline-block;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 50%;
    border: 1.4px solid transparent;
    
    text-align: center;
    font-size: 1rem;
    
    margin-left: .5rem;
    transition: .2s ease-in-out;
}

#dash thead th:hover span.icon-arrow{
    border: 1.4px solid #6c00bd;
}

#dash thead th:hover {
    color: #6c00bd;
}

#dash thead th.active span.icon-arrow{
    background-color: #6c00bd;
    color: #fff;
}

#dash thead th.asc span.icon-arrow{
    transform: rotate(180deg);
}

#dash thead th.active, #dash tbody td.active {
    color: #d091ff;
}

#dash .export__file {
    position: relative;
}

#dash .export__file .export__file-btn {
    display: inline-block;
    width: 25px;
    height: 25px;
	margin: 0;
	margin-top: 5px;
    background: #fff6 url(../media/export.png) center / 80% no-repeat;
    border-radius: 50%;
    transition: .2s ease-in-out;
}

#dash .export__file .export__file-btn:hover { 
    background-color: #fff;
    transform: scale(1.15);
    cursor: pointer;
}

#dash .export__file input {
    display: none;
}

#dash .export__file .export__file-options {
    position: absolute;
    right: 0;
    width: 12rem;
    border-radius: .5rem;
    overflow: hidden;
    text-align: center;
    opacity: 0;
	visibility: hidden;
    transform: scale(.8);
    transform-origin: top right;
    box-shadow: 0 .2rem .5rem #0004;
    transition: all .2s, visibility 0s .2s;
}

#dash .export__file input:checked + .export__file-options {
    opacity: 1;
	visibility: visible;
    transition: all .2s, visibility 0s 0s;
    transform: scale(1);
    z-index: 100;
}

#dash .export__file .export__file-options label{
    display: block;
    width: 100%;
    padding: .6rem 0;
	margin-bottom: 0;
    background-color: #f2f2f2;
    
    display: flex;
    justify-content: space-around;
    align-items: center;

    transition: .2s ease-in-out;
}

#dash .export__file .export__file-options label:first-of-type{
    padding: 1rem 0;
    background-color: #86e49d !important;
}

#dash .export__file .export__file-options label:hover{
    transform: scale(1.05);
    background-color: #fff;
    cursor: pointer;
}

#dash .export__file .export__file-options img{
    width: 2rem;
    height: auto;
}

/* #endregion */

/* #endregion */

/* #region Lobby */

#lobby {
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

#lobby .text {
	height: 36px;
	font-size: 22px;
	font-weight: 900;
	margin-top: -50px;
	text-align: center;
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	background: linear-gradient(to right, #ffb23aeb, #bb67ffe8);
}

#lobby > i {
	margin-top: -5px;
	font-size: 14px;
	color: #828889;
	margin-bottom: 40px;
	font-style: normal;
}

#lobby .spinner-box {
	height: 120px;
	display: flex;
	min-width: 120px;
	margin-bottom: 20px;
	justify-content: center;
	align-items: center;
	background-color: transparent;
}

#lobby .spinner-box .configure-border-1 {
	width: 80px;
	height: 80px;
	padding: 3px;
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	background: radial-gradient(#00efffcc, transparent);
	animation: configure-clockwise 3s ease-in-out 0s infinite alternate;
}

#lobby .spinner-box .configure-border-2 {
	width: 80px;
	height: 80px;
	padding: 3px;
	left: -115px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: radial-gradient(#ffb200cc, transparent);
	transform: rotate(45deg);
	animation: configure-xclockwise 3s ease-in-out 0s infinite alternate;
}

#lobby .spinner-box .configure-core {
	width: 100%;
	height: 100%;
	background-color: transparent;
}

@keyframes configure-clockwise {
	0% {
	  transform: rotate(0);
	}
	25% {
	  transform: rotate(90deg);
	}
	50% {
	  transform: rotate(180deg);
	}
	75% {
	  transform: rotate(270deg);
	}
	100% {
	  transform: rotate(360deg);
	}
}

@keyframes configure-xclockwise {
	0% {
	  transform: rotate(45deg);
	}
	25% {
	  transform: rotate(-45deg);
	}
	50% {
	  transform: rotate(-135deg);
	}
	75% {
	  transform: rotate(-225deg);
	}
	100% {
	  transform: rotate(-315deg);
	}
}

#lobby button {
	padding: 4px;
	outline: none;
	cursor: pointer;
	padding-right: 8px;
	margin-bottom: 20px;
	border: 2px dashed #ffffff47;
	border-radius: 20px;
	background: transparent;
	backdrop-filter: blur(1px);
	color: #ffffff;
}

#lobby button:hover {
	border: 2px dashed #ffffffcb;
}

#lobby .players {
	max-width: 280px;
	color: #ffcece;
	font-size: 15px;
	font-weight: 100;
	font-family: monospace;
	display: flex;
	flex-direction: column;
	text-align: center;
}

#lobby .players .me {
	color: #7aff7a;
	font-weight: bold;
}

#lobby .players b {
	transform: translateY(50px);
	transition: transform 0.32s ease, opacity 0.2s ease;
	margin-bottom: 2px;
	position: relative;
	opacity: 0;
}

#lobby .players b.show {
	opacity: 1;
	transform: translateY(0);
}

/* #endregion */

/* #region Raja Mantri Chor Sipahi */

#rmcs {
	display: none;
	align-items: center;
	justify-content: space-between;
	flex-direction: column;
}

#rmcs > .plrs {
	display: flex;
	justify-content: space-between;
	width: clamp(290px, 96%, 540px);
}

#rmcs > .plrs .plr {
	display: flex;
	min-width: 162px;
	position: relative;
	align-items: flex-end;
	flex-direction: column;
	justify-content: space-between;
	background: radial-gradient(circle, #231c248a, #100412ba);
	border-left: 1px dashed #ff9595b3;
	border-right: 2px solid #ffd4a033;
	border-radius: 40px 0 0 40px;
	padding: 4px 4px 4px 8px;
	width: max-content;
}
#rmcs > .plrs .plr > .disc-banner {
	visibility: hidden;
	animation: none;
	z-index: -1;
}

#rmcs > .plrs .plr.disconnected > .disc-banner {
	background-position: calc(50% - (var(--dir) * 10px)) calc(50% - 5px) !important;
	animation: discAnim 0.4s ease-out infinite alternate-reverse;
	background: url('/media/unavailable.png');
	transform: translate(-50%, -50%);
	backdrop-filter: brightness(0.2);
	background-repeat: no-repeat;
	height: calc(100% + 5px);
	width: calc(100% + 5px);
	border-radius: inherit;
	background-size: 50px;
	visibility: visible;
	position: absolute;
	margin: auto;
	opacity: 0.92;
	z-index: 5;
	left: 50%;
	top: 50%;
}

@keyframes discAnim {
	from { transform: scale(1) translate(-50%, -50%); }
	to { transform: scale(1.08) translate(-50%, -50%); }
}

#rmcs > .plrs .plr.right .tool,
#rmcs > .plrs .plr.right .score,
#rmcs > .plrs .plr.right .emojis {
	padding-right: 0;
	flex-direction: row-reverse;
}

#rmcs > .plrs .plr.right .prog-bar {
	transform: rotate(180deg);
	justify-content: flex-start;
}

#rmcs > .plrs .plr .score {
	width: 98%;
	display: flex;
	justify-content: space-between;
}

#rmcs > .plrs .plr .score b.plus {
	display: none;
	color: #d1ff7585;
}

#rmcs > .plrs .plr .score b.minus {
	display: block;
	color: #ffbc7885;
}

#rmcs > .plrs .plr .score.ld b.plus {
	display: block;
}

#rmcs > .plrs .plr .score.ld b.minus {
	display: none;
}

#rmcs > .plrs .plr .score .pts {
	color: #8f8f8f;
	text-shadow: 0px 0px 20px #ffffff87;
}

#rmcs > .plrs .plr b.name {
	text-shadow:
		0px 1px #ffc1c188,
		0px 1px #ffc1c175;
	font-size: clamp(12.6px, 2vw, 15px);
	letter-spacing: 0.6px;
}

#rmcs > .plrs .plr b, #rmcs > .plrs .plr i {
	font-size: clamp(12px, 2vw, 14px);
}

#rmcs > .plrs .plr b.timer {
	color: #7cfc00;
}

#rmcs > .plrs .plr.left {
	border-right: 1px dashed #ff9595b3;
	border-left: 2px solid #ffd4a033;
	border-radius: 0 40px 40px 0;
	padding: 4px 8px 4px 4px;
	align-items: flex-start;
}

#rmcs > .plrs .plr .tool {
	width: 95%;
	display: flex;
	padding-right: 6px;
	align-items: center;
	justify-content: space-between;
}

#rmcs > .plrs .plr .tool a {
	transition: all 0.2s ease;
	text-decoration: line-through;
	font-weight: lighter;
	cursor: not-allowed;
	color: #aeaeaeb3;
	user-select: none;
	display: flex;
	height: auto;
}

#rmcs > .plrs .plr .tool a b {
	display: none;
}

#rmcs > .plrs .plr .tool a i {
	display: block;
	font-style: normal;
}

#rmcs > .plrs .plr .tool a.active {
	cursor: pointer;
	color: #e7c3ff;
	font-weight: bolder;
	text-decoration: overline;
	text-shadow: 0px 0px 2px #ff009ecf;
}

#rmcs > .plrs .plr .tool a.active:hover {
	color: #cda6fff4;
}

#rmcs > .plrs .plr .tool a.active:active {
	transform: scale(0.9);
	color: #b7b7b7e6;
}

#rmcs > .plrs .plr .tool a.active b {
	display: block;
}

#rmcs > .plrs .plr .tool a.active i {
	display: none;
}

#rmcs > .plrs .plr .prog-bar {
	width: 100%;
	height: 10px;
	display: flex;
	margin-bottom: 5px;
	align-items: center;
}

#rmcs > .plrs .plr .prog-bar > svg {
	position: relative;
	border-radius: 10px;
	height: 5px;
	width: 90%;
}

#rmcs > .status, #rmcs > .settings {
	width: 94%;
	display: flex;
	color: #afafaf;
	max-width: 400px;
	align-items: center;
	padding: 2px 6px 6px 6px;
	border-radius: 0 0 20px 20px;
	justify-content: space-between;
	font-size: clamp(13px, 4vw, 16px);
	box-shadow: 0px 1px 4px -2px #e282ff;
	background: linear-gradient(0deg, #150027, #871e8424);
}

#rmcs > .status .game-ping.r { color: #ff7676; }
#rmcs > .status .game-ping.o { color: #ffcb86; }
#rmcs > .status .game-ping.y { color: #ffffa4; }
#rmcs > .status .game-ping {
	font-family: monospace;
	color: #b8ff94;
}

#rmcs > .status b.label { animation: none; }
#rmcs > .status b.label.anim {
	letter-spacing: 1px;
	animation: statusHighlighter 0.4s ease-in-out infinite alternate-reverse;
}

@keyframes statusHighlighter {
	from { color: #766d66; transform: scaleX(0.98); }
	to { color: #ffebdc; transform: scaleX(1); }
}

/* #region Chit Box */

#rmcs .chit-box {
	display: flex;
	width: 100%;
	margin: 10px 0;
	flex-wrap: wrap;
	max-width: 800px;
	text-align: center;
	align-items: center;
	justify-content: center;
}

#rmcs .chit-box .chit {
	width: 22%;
	margin: 5px;
	--vrad: 15px;
	display: flex;
	height: 140px;
	--ppve: 500px;
	--fclr: #e8b3ff;
	position: relative;
	align-items: center;
	--bglg: #2b0f43f5;
	--bxshdo: #f68efffa;
	--bdrclr: #bd00adbd;
	flex-direction: column;
	justify-content: center;
	border-radius: var(--vrad);
	perspective: var(--ppve);
	-ms-perspective: var(--ppve);
	-moz-perspective: var(--ppve);
	-webkit-perspective: var(--ppve);
	transition: scale 0.2s ease-in-out;
	-webkit-tap-highlight-color: transparent;
}

#rmcs .chit-box .chit:active {scale: 0.92;}

#rmcs .chit-box .chit.me {
	--fclr: #b3dfff;
	--bglg: #0f2843f5;
	--bxshdo: #8ea8fffa;
	--bdrclr: #0052bdbd;
	--txtclr: #a8efff;
}

#rmcs .chit-box .chit:nth-child(odd) {
	margin-top: -60px;
}

#rmcs .chit-box .chit:nth-child(even) {
	margin-top: 60px;
}

#rmcs .chit-box .chit > div > * {
	transform: scale(1) translateZ(20px);
}

#rmcs .chit-box .chit .back,
#rmcs .chit-box .chit .front {
	width: 100%;
	display: flex;
	flex: 0 0 100%;
	position: relative;
	user-select: none;
	align-items: center;
	flex-direction: column;
	justify-content: center;
	border-radius: var(--vrad);
	background-position: center;
	transform-style: preserve-3d;
	border: 1px solid var(--bdrclr);
	box-shadow: -1px -1px 6px -2px var(--bxshdo);
	background: radial-gradient(circle, var(--bglg), #00010eed);
	transition: all 1s cubic-bezier(0.68, -0.55, 0.27, 1.55);
	background-size: cover;
}

#rmcs .chit-box .chit .back {
    top: 0;
    left: 0;
    bottom: 0;
    z-index: -1;
    padding: 12px 8px;
    position: absolute;
    transform: rotateY(-180deg);
}

#rmcs .chit-box .chit .back:after {
    position: absolute;
    content: "";
    bottom: 0;
    left: 0;
    width: 30px;
    height: 30px;
}

#rmcs .chit-box .chit .front {
	z-index: 10;
	background-image: url('/media/rmcs/front.jpg');
}

#rmcs .chit-box .chit .front:after {
    position: absolute;
    content: "";
    bottom: 0;
    right: 0;
    width: 30px;
    height: 30px;
}

#rmcs .chit-box .chit.active .back {
	z-index: 10;
	transform: rotateY(0deg);
}

#rmcs .chit-box .chit .back > div {
	width: 98%;
	display: flex;
	flex: 1 0 50%;
	align-items: center;
	justify-content: space-evenly;
}

#rmcs .chit-box .chit .back > div b.private {
	font-weight: 100;
	font-style: oblique;
	font-family: monospace;
	text-decoration: line-through;
}

#rmcs .chit-box .chit .back b {
	font-size: clamp(12px, 2vw, 14px);
	flex: 0 0 auto;
}

#rmcs .chit-box .chit .back b.player {
	transform: scale(1.05) translateZ(20px);
	font-weight: 800;
	color: var(--fclr);
}

#rmcs .chit-box .chit .back b.label {
	font-family: monospace;
	font-weight: 100;
	font-size: 11px;
	height: 22.2px;
	color: #ffefb3d1;
}

#rmcs .chit-box .chit .back > div img {
	width: 32px;
} 

#rmcs .chit-box .chit .back > b.hide {
	display: none;
}

#rmcs .chit-box .chit.active .front {
	z-index: -1;
	transform: rotateY(180deg);
}

#rmcs .chit-box .chit .front > b {
	display: flex;
	height: 100%;
	width: 100%;
	cursor: pointer;
	font-size: 1.2rem;
	align-items: center;
	justify-content: center;
	border-radius: var(--vrad);
	backdrop-filter: blur(1px);
	color: var(--txtclr, #e8ffc3);
	text-shadow: 0px 0px 10px #fff6ca61;
}

/* #endregion */

#rmcs > .settings {
	width: fit-content;
	padding: 0;
	max-width: 340px;
	background: none;
	box-shadow: none;
	justify-content: center;
	border-radius: 20px;
	box-shadow: 0px 10px 20px -15px #1c9bff;
}

#rmcs > .settings > div {
	height: 100%;
	display: flex;
	padding: 0 8px;
	text-align: center;
	align-items: center;
	justify-content: center;
	border-top: 1px solid rgb(255 219 111 / 25%);
	background: radial-gradient(circle, #212117ee, #000000e6);
}

#rmcs > .settings > a {
	height: 100%;
	display: flex;
	font-size: 14px;
	cursor: pointer;
	color: #94f6ff;
	align-items: center;
	justify-content: space-between;
	padding: 6px 10px;
	border-radius: 15px 0 0 0;
	transition: filter 0.25s ease-in-out;
	border: 1px solid rgb(50 205 202 / 25%);
	background: radial-gradient(circle, #102126ee, #000000e6);
	border-bottom: none;
	border-right: none;
}

#rmcs > .settings > a img {
	width: 20px;
	margin: 0 2px;
}

#rmcs > .settings > a.end {
	background: radial-gradient(circle, #301212ee, #000000e6);
	border: 1px solid rgb(205 111 50 / 25%);
	border-radius: 0 15px 0 0;
	border-bottom: none;
	border-left: none;
	color: #ffa890;
}

#rmcs > .settings > a:hover {
	filter: hue-rotate(-32deg);
}

@media (max-width: 612px) {
	#rmcs .chit-box .chit {
		width: 46%;
		height: 100px;
		margin-top: 0px !important;
	}

	#rmcs > .plrs .plr { min-width: 132px }
	#rmcs > .plrs { width: clamp(280px, 100%, 540px) }
}

/* #endregion */

/* #region Footer */

body > footer
{
	z-index: 30;
	display: flex;
	font-size: 18px;
	padding-bottom: 2px;
	background: #00000078;
	letter-spacing: 3.2px;
	font-family: monospace;
	word-spacing: 4px;
	user-select: none;
	width: 100%;
	bottom: 0;
	height: 30px;
	position: fixed;
	color: #ffffff;
	text-align: center;
	align-items: center;
	align-self: baseline;
	justify-content: center;
	backdrop-filter: blur(1px);
	box-shadow: inset #eaedf196 0px 0px 50px -25px;
}

/* #endregion */