:root {
	--background: #fff;
	--textColor: #222;
	--textLinkHover: #9f9f9f;
	--textLinkAltHover: #e5b156;
	--inputBackground: rgba(255, 255, 255, 0.25);
	--inputTextColor: #222;
	--inputPlaceholder: #666;
	--inputBorder: rgba(96, 96, 96, 0.875);
	--boxBorder: rgba(96, 96, 96, 0.875);
	--boxColor: rgba(233, 233, 233, 0.75);
	--animDur: 0.25s;
}

html {
	scroll-behavior: smooth;
	position: relative;
	min-height: 100%;
	overflow-x: hidden;
}

body {
	scroll-behavior: smooth;
	font-size: 0.9rem;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
	background-color: var(--background);
	background-image: linear-gradient(0deg, var(--background) 8%, transparent 72%), url('../img/bg_header.webp');
	background-position: top center;
	background-repeat: no-repeat;
	background-size: cover;
	width: 100%;
	position: relative;
	color: var(--textColor);
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Sporty Pro', Arial, Helvetica, sans-serif;
	color: var(--primary);
}

a {
	color: var(--primary);
	transition: color 0.2s ease-in-out, filter 0.2s ease-in-out;
}

a:hover:not(.btn) {
	color: var(--primary) !important;
}

@media screen and (max-width: 767px) {
	#acc-panel-wrap {
		margin-top: 4rem !important;
	}

	#acc-panel-wrap.logged-in {
		margin-top: 4rem !important;
		padding: 0 !important;
		position: relative;
	}

	#social-wrap {
		gap: 1rem 0 !important;
	}
}

@media screen and (min-width: 0px) and (max-width: 960px) {
	#header-panel {
		margin-top: 4rem !important;
	}

	#acc-panel-wrap {
		margin-top: 8rem !important;
		padding-top: 4rem !important;
	}

	#acc-panel-wrap > a#acc-panel-logo {
		top: -9.5rem !important;
	}

	#acc-panel-wrap.logged-in {
		margin-top: rem !important;
		padding: 0 !important;
		position: relative;
	}

	#char-render > .char-render {
		inset: 2rem 0 0 0 !important;
		background-size: contain;
	}

	#social-wrap {
		gap: 1rem 0 !important;
	}
}

@media screen and (min-width: 961px) and (max-width: 1140px) {
	#header-panel {
		margin-top: 8rem !important;
	}

	#acc-panel-wrap > a#acc-panel-logo {
		top: -6rem !important;
	}

	#char-render > .char-render {
		inset: 2rem 0 0 0 !important;
		background-size: contain;
	}
}

@media screen and (min-width: 1920px) {
	div.modal[id^="modal-"] > .modal-dialog {
		max-width: 33% !important;
		margin: auto !important;
	}
}

#notif-wrap {
	z-index: 1030;
	position: absolute;
	top: 4rem;
	animation: pop-out-msg .5s 1.5s;
	-webkit-animation: pop-out-msg .5s 1.5s;
	animation-fill-mode: forwards;
	animation-delay: 3s;
	-webkit-animation-delay: 3s;
	-webkit-animation-fill-mode: forwards;
}

#char-render {
	position: absolute;
	inset: 0;
	height: auto;
	mask-image: linear-gradient(0deg, transparent 0%, #fff 30%, #fff 100%);
}

#char-render > div[id^="render-"] {
	position: absolute;
	background-repeat: no-repeat;
	background-position: top right;
	max-width: 72rem !important;
	top: 8rem;
	right: -8rem;
	transition: all var(--animDur) ease-in-out;
}

#char-render > #render-0 {
	background-image: url('../img/char/render_0.webp');
}

#char-render > #render-1 {
	background-image: url('../img/char/render_0.webp');
}

#char-render > #render-2 {
	background-image: url('../img/char/render_0.webp');
}

#char-render > #render-3 {
	background-image: url('../img/char/render_0.webp');
}

#char-render > #render-4 {
	background-image: url('../img/char/render_0.webp');
}

#char-render > #render-5 {
	background-image: url('../img/char/render_0.webp');
}

#char-render > .char-render {
	inset: 2rem 0 0 15rem;
}

#header-panel {
	margin-top: calc(50% - 20rem);
	min-height: 40rem;
	z-index: 1;
}

#acc-panel-wrap,
#info-wrap {
	position: relative;
	color: var(--textColor);
	background-color: var(--boxColor);
	border: 0.0625rem solid var(--boxBorder);
}

#acc-panel-wrap {
	padding: 4rem 1rem 1rem 1rem;
}

#info-wrap {
	padding: 1rem;
}

#acc-panel-wrap.logged-in {
	padding: 0 !important;
	position: relative;
}

#acc-panel-wrap > a#acc-panel-logo {
	position: absolute;
	top: -7rem;
	width: 85%;
}

#acc-panel-wrap > a#acc-panel-logo > img {
	filter: drop-shadow(0 0 0.25rem var(--background)) drop-shadow(0 0 0.5rem var(--background)) drop-shadow(0 0 1rem var(--background));
}

#acc-panel-wrap > p#create-link {
	font-size: 1.125rem !important;
}

#acc-panel-wrap > h5 {
	letter-spacing: 0.125rem !important;
	text-transform: uppercase;
	color: var(--textColor) !important;
}

#login-wrap > input[type="text"],
#login-wrap > input[type="password"],
#login-wrap > select,
#login-wrap > select > option {
	width: 100%;
	text-align: center;
	letter-spacing: 0.125rem;
	color: var(--inputTextColor);
	background-color: var(--inputBackground);
	border: 0.0625rem solid var(--inputBorder);
	border-radius: 0.25rem;
	padding: 0.25rem 0;
}

#login-wrap > input[type="text"]::placeholder,
#login-wrap > input[type="password"]::placeholder {
	color: var(--inputPlaceholder);
}

#acc-panel-wrap input[type=text],
#acc-panel-wrap input[type=password], 
#acc-panel-wrap select {
	font-size: 1.025rem !important;
	letter-spacing: 0.1rem !important;
}

#acc-panel-wrap button {
	font-family: 'Sporty Pro', Arial, Helvetica, sans-serif;
	padding: 0.5rem 0.25rem !important;
	font-size: 1.25rem !important;
	letter-spacing: 0.5rem;
	border: none;
	transition: all var(--animDur) ease-in-out;
}

.modal-backdrop {
	background-color: rgba(0, 0, 0, 0.75);
}

.modal-backdrop.show {
	opacity: 1;
}

.modal-content {
	background-color: var(--boxColor) !important;
	border: 0.0625rem solid var(--boxBorder);
	border-radius: 0;
}

.modal.show {
	opacity: 1;
	transition: all var(--animDur) ease-in-out;
}

.modal-zoom {
	transform: scale(0);
	opacity: 0;
	transition: all var(--animDur) ease-in-out;
}

.modal-zoom.show {
	transform: scale(1);
	opacity: 1;
}

.slick-arrow {
	transition: all 0.5s ease-in-out;
}

.slick-arrow.slick-disabled {
	opacity: 0;
	visibility: 0;
	z-index: -1 !important;
}

#char-select-wrap {
	margin-top: 3rem;
	max-width: 100%;
}

#char-select-wrap > #char-select-cont {
	position: relative;
	text-align: center;
	min-height: 20rem;
}

#char-select-wrap > #char-button {
	position: relative;
	width: 100%;
	top: 1rem;
}

#char-button > a#char-prev,
#char-button > a#char-next {
	position: absolute;
	z-index: 1001;
	font-size: 1.5rem;
	text-decoration: none;
}

#char-button > a#char-prev {
	left: 2rem;
}

#char-button > a#char-next {
	right: 2rem;
}

.char-info-wrap > .char-equip  {
	position: relative;
	overflow: hidden;
}

.char-info-wrap > .char-equip > h6,
.char-info-wrap > .char-stats > h6 {
	font-family: Arial, Helvetica, sans-serif;
	padding: 0.25rem 0.5rem;
	margin: 0;
	background-color: var(--boxBorder);
	color: var(--textAltColor) !important;
	font-weight: 700 !important;
	text-shadow: none !important;
	font-size: 0.875rem;
}

.char-equip .equip-left,
.char-equip .equip-right {
	font-family: Arial, Helvetica, sans-serif;
	padding: 0;
	width: 40% !important;
	min-height: 2rem !important;
	display: flex;
	align-items: center;
	gap: 0 0.125rem;
	line-height: 1;
	background-color: var(--backgroundTrans);
	position: relative;
}

.char-equip .equip-left {
	justify-content: flex-start;
	border-right: 0.0675rem solid var(--boxBorder);
	border-bottom: 0.0675rem solid var(--boxBorder);
	text-align: left;
}

.char-equip .equip-right {
	justify-content: flex-end;
	border-left: 0.0675rem solid var(--boxBorder);
	border-bottom: 0.0675rem solid var(--boxBorder);
	text-align: right;
}

.equip-left > p, 
.equip-right > p {
	color: var(--textColor) !important;
	font-size: 0.75rem !important;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;  
	overflow: hidden;
}

div.equip-left.unequipped p,
div.equip-right.unequipped p {
	color: var(--textAltColor) !important;
}

.item-icon {
	position: relative;
	height: 2rem;
	width: 2rem;
}

.item-icon:after {
	content: '';
	position: absolute;
	height: 1rem;
	width: 1.75rem;
	background-image: radial-gradient(ellipse at center, var(--boxBorder) 12.5%, transparent 75%);
	left: calc(50% - (1.75rem / 2));
	bottom: 0.125rem;
	z-index: -1;
}

.item-icon > img {
	margin: 0.25rem;
}

.char-equip > .char-sprite {
	position: absolute;
	z-index: -1;
	bottom: 0;
	height: 12.5rem;
	height: 12.5rem;
	left: calc(50% - 6.25rem);
}

.char-stats > table {
	border-collapse: collapse;
	font-size: 0.75rem !important;
}

.char-stats > table th {
	font-family: Arial,  Helvetica, sans-serif;
	background-color: var(--textAltColor);
	color: var(--textColor) !important;
	font-weight: 700;
	text-align: left;
	width: 16.666666%;
	padding: 0.25rem;
	border: 0.0625rem solid var(--boxBorder);
}

.char-stats > table td {
	font-family: Arial,  Helvetica, sans-serif;
	text-align: right;
	width: 16.666666%;
	padding: 0.25rem;
	border: 0.0625rem solid var(--boxBorder);
}

.char-stats > table tr:last-child > th,
.char-stats > table tr:last-child > td {
	border-bottom: none !important;
}

div.item-collection {
	width: 18.5rem;
	min-height: 8rem;
	position: absolute;
	visibility: hidden;
	opacity: 0;
}

div.item-collection.active {
	z-index: 1030;
	visibility: visible;
	opacity: 1;
}

div.item-collection > .collection-group {
	background-color: #fff;
	width: 18.5rem;
	min-height: 8rem;
	border-radius: 0.375rem;
	box-shadow: inset 0 0 0 0.15rem #fff, inset 0 0 0 0.2rem #c6c6c6;
	display: flex;
	padding: 0.25rem;
}

div.item-collection > .collection-group > img {
	border: 0.0625rem solid #c6c6c6;
	box-shadow: 0.25rem 0.25rem 0 0 #c6c6c6;
	max-height: 6.25rem;
	margin: 0.625rem 0 0 0.5rem;
}

div.item-collection > .collection-group > .item-group {
	width: 100%;
}

div.item-collection > .collection-group > .item-group > p {
	font-size: 0.75rem !important;
	line-height: 1.25;
	margin-bottom: 0 !important;
	color: #333;
}

div.item-collection > .collection-group > .item-group > p.item-name {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	border-bottom: 0.0625rem solid #c6c6c6;
	padding: 0.25rem 0.375rem 0.25rem 0.5rem;
	text-shadow: 0.125rem 0.125rem 0 #e9e9e9;
}

div.item-collection > .collection-group > .item-group > p.item-desc {
	padding: 0.375rem 0.375rem 0.375rem 0.5rem;
}

div.item-collection > .card-group {
	background-color: #fff;
	border-radius: 0.375rem;
	box-shadow: inset 0 0 0 0.15rem #fff, inset 0 0 0 0.2rem #c6c6c6;
	display: flex;
	flex-direction: row;
	padding: 0.25rem;
	gap: 0 0.125rem;
	margin-top: 0.25rem;
}

div.item-collection > .card-group > img {
	height: 1.5rem;
	width: 1.5rem;
}

span.tooltip-item-name {
	font-size: 0.75rem !important;
}

.char-create {
	min-height: 16rem;
	position: relative;
}

.char-create > #char-create {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	inset: 0;
}

#char-create > a {
	text-decoration: none;
}

#char-create > a > i {
	font-size: 4em;
}

#char-gender-group > button {
	background-color: var(--boxColor);
	border: 0.0625rem solid var(--boxBorder);
}

#char-gender-group > button:not(.active) {
	filter: saturate(0) brightness(2);
}

#char-gender-group > button.active {
	filter: saturate(1.5);
}

#char-gender-group > button:hover,
#char-gender-group > button:focus,
#char-gender-group > button:focus-within {
	filter: saturate(1.5);
}

#char-gender-group i {
	font-size: 1.5rem;
}

#char-gender-group i.fa-mars {
	color: var(--primary);
}

#char-gender-group i.fa-venus {
	color: var(--danger);
}

#char-sprite-wrap {
	padding: 1.5rem 0 0.5rem 0;
	min-height: 7.5rem;
}

#char-sprite-wrap > #char-sprite-btn {
	position: relative;
	width: 100%;
	height: 100%;
}

#char-sprite-btn > a {
	position: absolute;
	font-size: 2.5rem;
	padding: 0.5rem;
}

#char-sprite-btn > a#char-hair-prev {
	left: 2.5rem;
	top: 5rem;
}

#char-sprite-btn > a#char-hair-next {
	right: 2.5rem;
	top: 5rem;
}

#char-sprite-btn > a#char-dye-next {
	inset: 0;
}

#char-hair-group {
	display: flex;
	gap: 0.25rem;
}

#char-hair-group > .char-hair {
	border-radius: 0.25rem;
	border: 0.0625rem solid var(--boxBorder);
	transition: all var(--animDur) ease-in-out;
}

#char-hair-group > .char-hair.active {
	background-color: var(--backgroundAltTrans);
}

#char-dye-group {
	margin-top: 1rem;
	display: flex;
	gap: 0.25rem;
}

#char-dye-group > a.char-dye {
	height: 1.25rem;
	width: 1.25rem;
	border-radius: 0.0625rem;
	border: 0.0625rem solid var(--boxBorder);
	box-shadow: inset 0 0 0 0.0625rem var(--boxColor);
	transition: all var(--animDur) ease-in-out;
}

#char-dye-group > a.char-dye.active {
	border: 0.0625rem solid var(--headerAltColor);
}

#char-dye-group > a#dye-0 {
	background-color: transparent !important;
}

#char-dye-group > a#dye-1 {
	background-color: #efd6ff !important;
}

#char-dye-group > a#dye-2 {
	background-color: #ffdeb5 !important;
}

#char-dye-group > a#dye-3 {
	background-color: #d6f7bd !important;
}

#char-dye-group > a#dye-4 {
	background-color: #ceceef !important;
}

#char-dye-group > a#dye-5 {
	background-color: #ffffff !important;
}

#char-dye-group > a#dye-6 {
	background-color: #efb5a5 !important;
}

#char-dye-group > a#dye-7 {
	background-color: #ef8484 !important;
}

#char-dye-group > a#dye-8 {
	background-color: #ffe7ad !important;
}

#social-wrap {
	gap: 0 0.5rem;
}

#social-wrap a.btn {
	letter-spacing: 0.25rem;
	font-weight: 700;
}

@-webkit-keyframes arrow-jump {
  0% { opacity: 1; 
        -webkit-transform: translateY(0rem);
        -moz-transform: translateY(0rem);
        -0-transform: translateY(0rem);
        transform: translateY(0rem);
    }
  50% { opacity: 0.5; 
        -webkit-transform: translateY(0.75rem);
        -moz-transform: translateY(0.75rem);
        -0-transform: translateY(0.75rem);
        transform: translateY(0.75rem);
    }
  100% { opacity: 1; 
        -webkit-transform: translateY(0rem);
        -moz-transform: translateY(0rem);
        -0-transform: translateY(0rem);
        transform: translateY(0rem);
    }
}

#password-note, #email-note {
	position: absolute;
	top: calc(50% - 2.75rem);
	opacity: 0;
	z-index: -1;
	visibility: hidden;
	padding: 1rem;
	font-size: 0.75rem !important;
	transition: all var(--animDur) ease-in-out;
	width: calc(100% - 2rem);
}

#password-note.active,
#email-note.active {
	opacity: 1;
	visibility: visible;
	z-index: 1;
}

@keyframes pop-out-msg {
    from {opacity: 1; visibility: visible; z-index: 1030;}
    to {opacity: 0; visibility: hidden; z-index: -1;}
}

@-webkit-keyframes pop-out-msg {
    from {opacity: 1; visibility: visible; z-index: 1030;}
    to {opacity: 0; visibility: hidden; z-index: -1;}
}