/* ---------------- CHANGE THEME COLOR SETTINGS ---------------- */
:root {
	/* Fonts */
	--font-family: "Poppins", sans-serif;
	/* --font-weight: 600; */

	/* Backgrounds */
	--bg: #080b0f;
	--bg-dark: #15181d;
	--bg-darker: #0e1016;
	--bg-light: #9c9eb4;
	--bg-primary: #ffc107;
	--bg-secondary: #eaeaea;

	/* Borders */
	--border: #1c202b;
	--border-bottom: #222633;
	--border-dark: #15181d;
	--border-darker: #0e1016;
	--border-light: #323649;
	--border-primary: #ffc107;
	--border-secondary: #eaeaea;
	--primary-border-bottom: #dd8500;

	/* Social Borders */
	--discord-border: #404eed;
	--kick-border: #53fc19;
	--twitch-border: #6034b2;
	--youtube-border: #ff0000;
	--youtube-border-bottom: #861f1f;

	/* General Buttons */
	--btn-cancel: #cf2222;
	--btn-cancel-border-bottom: #631616;
	--btn-hover: #eaeaea;
	--btn-primary: #ffc107;
	--btn-primary-border-bottom: #dd8500;
	--btn-secondary: #eaeaea;
	--btn-secondary-border-bottom: #858585;
	--btn-txt-dark: #0d0d0d;
	--btn-txt-light: #eaeaea;

	/* Social Buttons */
	--btn-discord: #404eed;
	--btn-discord-border-bottom: #0000ee;
	--btn-kick: #53fc19;
	--btn-kick-border-bottom: #30a30a;
	--btn-twitch: #6034b2;
	--btn-twitch-border-bottom: #36196d;
	--btn-youtube: #ff0000;

	/* Button Hovers */
	--btn-hover-border: #c0c0c0;
	--btn-hover-border-bottom: #858585;

	/* General Text */
	--txt-code: #ffcf87;
	--txt-dark: #0d0d0d;
	--txt-muted: #929eaf;
	--txt-placeholder: #3a3f46;
	--txt-primary: #ffc107;
	--txt-secondary: #eaeaea;
	--txt-selection: #080b0f;

	/* Social Text */
	--txt-discord: #404eed;
	--txt-kick: #53fc19;
	--txt-twitch: #6034b2;
	--txt-youtube: #ff0000;

	/* Staff Roles */
	--txt-beta-tester: #ffff88;
	--txt-community-manager: #ff4cff;
	--txt-content-creator: #992dff;
	--txt-designer: #17ff77;
	--txt-developer: #ff2e2e;
	--txt-events-coordinator: #ff952b;
	--txt-gm: #508dff;
	--txt-manager: #74ff3d;
	--txt-senior-gm: #00ffff;
	--txt-support: #2bffca;

	/* WoW Classes */
	--txt-deathknight: #c41f3b;
	--txt-druid: #ff7d0a;
	--txt-hunter: #abd473;
	--txt-mage: #69ccf0;
	--txt-paladin: #f58cba;
	--txt-priest: #ffffff;
	--txt-rogue: #fff569;
	--txt-shaman: #0070de;
	--txt-warlock: #9482c9;
	--txt-warrior: #c79c6e;
	--txt-monk: #00ff96;
	--txt-demonhunter: #a330c9;

	/* WoW Item Qualities */
	--txt-item-poor: #9d9d9d;
	--txt-item-common: #ffffff;
	--txt-item-uncommon: #1eff00;
	--txt-item-rare: #0070dd;
	--txt-item-epic: #a335ee;
	--txt-item-legendary: #ff8000;
	--txt-item-artifact: #e6cc80;
	--txt-item-heirloom: #00ccff;
}
/* ---------------- END OF CHANGE THEME COLOR SETTINGS ---------------- */

/* Global Styles */
* {
	font-family: var(--font-family);
	font-weight: var(--font-weight);
}

body {
	background-color: var(--bg);
	background-image: none;
}

::selection {
	background-color: var(--bg-primary);
	color: var(--txt-dark);
}

::-moz-selection {
	background-color: var(--bg-primary);
	color: var(--txt-dark);
}

/* Navbar Styles */
.header::before,
.nav-active::before,
.dropdown-toggle::after {
	display: none;
}

/* Navbar - Main Styles */
.header {
	width: 100%;
	height: auto;
	z-index: 98;
	background-color: var(--bg-darker);
	background-image: none;
	-webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5); /* For Safari and Chrome */
	-moz-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5); /* For Firefox */
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5); /* Standard Syntax */
}

.nav-item.dropdown {
	position: relative;
}

.dropdown-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 99;
}

/* Navbar - Main Styles - Dividers */
.header .navbar .navbar-nav .nav-item::after {
	background-color: none;
}

/* Navbar - Link Dividers */
.header .navbar .navbar-nav .nav-item::after {
	display: none;
}

.header .navbar .navbar-nav .nav-item .nav-link {
	color: var(--txt-primary);
	text-transform: uppercase;
}

.nav-link {
	font-family: "Poppins", sans-serif;
	font-weight: 500;
	color: var(--txt-primary);
	text-transform: uppercase;
	transition: color 0.15s ease-in-out !important; /* Faster transition */
	font-size: 1.1rem;
}

.nav-link:hover,
.nav-link:focus,
.nav-item:hover {
	font-family: "Poppins", sans-serif;
	color: var(--txt-secondary) !important;
	background-color: var(--bg-darker);
}

.nav-link.active {
	font-family: "Poppins", sans-serif;
	color: var(--txt-secondary) !important;
	border-radius: 0rem;
}

.nav-link:focus-visible {
	font-family: "Poppins", sans-serif;
	box-shadow: none;
}

/* Navbar - Default State */
.header .navbar .navbar-nav .nav-item .nav-link {
	font-family: "Poppins", sans-serif;
	font-weight: 500;
	font-size: 1.1rem;
	border: 0.1rem solid transparent;
}

/* Navbar - Hover Block */
.header .navbar .navbar-nav .nav-item:hover .nav-link,
.header .navbar .navbar-nav .nav-item .nav-link:hover,
.header .navbar .navbar-nav .nav-item .nav-link:active,
.header .navbar .navbar-nav .nav-item .nav-link.nav-active {
	font-family: "Poppins", sans-serif;
	background-color: var(--bg-dark);
	border-color: var(--border);
}

/* Navbar Logo */
.navbar-logo {
	width: 15rem;
	min-width: 5rem;
	height: auto;
	display: block;
	margin: auto;
	transition: all 0.3s ease-in-out;
}

.navbar-logo:hover {
	filter: saturate(0) brightness(1.2);
}

/* UCP - Nav */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
	box-shadow: none;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	background-color: var(--bg-primary) !important;
	color: var(--txt-dark) !important;
	font-weight: 600;
}

/* Account Info Text */
.section-topbar .membership-bar .membership-bar-info,
.info-welcome {
	color: var(--txt-secondary);
	font-size: 1rem;
	font-style: normal;
	text-shadow: none;
}

.section-topbar {
	background-color: transparent;
}

/* Currency Text */
.gold-points {
	color: var(--txt-primary) !important;
	font-weight: 500 !important;
	text-transform: uppercase;
}
.silver-points {
	color: var(--txt-secondary) !important;
	font-weight: 500 !important;
	text-transform: uppercase;
}

.text-gold {
	color: var(--txt-primary) !important;
}

.text-silver,
.ampersand {
	color: var(--txt-secondary) !important;
}

.text-gold,
.text-silver,
.ampersand {
	font-size: 1rem;
	font-weight: 500;
}

/* Anchor Tag */
a {
	color: var(--txt-primary);
	font-family: "Poppins", sans-serif;
	font-weight: 500;
	text-decoration: none;
	text-shadow: none;
}

a:hover {
	color: var(--txt-secondary);
}

/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--txt-primary);
	font-family: "Poppins", sans-serif;
	font-weight: 600;
	text-transform: uppercase;
}

/* Paragraphs */
p {
	color: var(--txt-secondary);
	font-weight: 500;
	text-shadow: none;
}

/* Code Blocks */
body code {
	color: var(--txt-code);
	font-size: 0.875em;
	word-wrap: break-word;
}

.text-warning {
	color: var(--txt-primary) !important;
}

/* Dropdown Menus */
.dropdown .dropdown-menu,
.dropdown .dropdown-menu li .dropdown-item {
	background-color: var(--bg-darker);
	font-size: 1rem;
	font-weight: 600;
	text-transform: uppercase;
}

.dropdown .dropdown-menu {
	border: 0.1rem solid var(--border);
	border-radius: 0;
	padding: 0;
	position: absolute;
	margin-top: 0.5rem;
	min-width: 200px;
}

.dropdown .dropdown-menu li {
	width: 100%;
}

.dropdown .dropdown-menu li .dropdown-item {
	background-color: var(--bg-darker);
	color: var(--txt-secondary);
	padding: 0.6em 1em;
	z-index: 100;
	font-family: "Poppins", sans-serif;
	font-weight: 500;
	font-size: 1rem;
	text-transform: uppercase;
	width: 100%;
	display: block;
}

.dropdown-item {
	background-color: transparent;
	color: var(--txt-secondary);
	padding: 0.6em 1em;
	text-transform: uppercase;
	font-weight: 600;
	transition: color 0.15s ease-in-out !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
	color: var(--txt-primary);
	background-color: var(--bg-dark);
}

.dropdown .dropdown-menu li .dropdown-item::after {
	border: 0.1rem solid var(--border);
	width: auto;
}

.dropdown .dropdown-menu li:hover .dropdown-item,
.dropdown .dropdown-menu li .dropdown-item:hover,
.dropdown .dropdown-menu li .dropdown-item:active,
.dropdown .dropdown-menu li .dropdown-item.nav-active {
	background-color: var(--bg);
	color: var(--txt-primary);
	text-transform: uppercase;
}

.header .navbar .navbar-nav .nav-item .dropdown-menu {
	margin-top: 0;
}

.navbar .nav-item.dropdown:hover .dropdown-menu {
	display: block;
}

/* Dropdown Menu Styles */
.navbar-nav .nav-item.dropdown {
	position: relative !important;
}

.navbar-nav .dropdown-menu {
	position: absolute !important;
	top: 100% !important;
	left: 0 !important;
	margin-top: 0 !important;
	z-index: 1000;
	display: none;
}

.navbar-nav .nav-item.dropdown:hover > .dropdown-menu {
	display: block;
}

.dropdown-menu {
	background-color: var(--bg-darker);
	border: 0.1rem solid var(--border);
	border-radius: 0;
	min-width: 200px;
	padding: 0.5rem 0;
	display: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease-in-out !important; /* Faster transition */
	margin-top: 0 !important;
}

.dropdown-menu.show,
.dropdown:hover > .dropdown-menu {
	display: block;
	opacity: 1;
	visibility: visible;
}

/* Mobile Menu */
.offcanvas {
	background-color: var(--bg-darker);
	border-right: 0.1rem solid var(--border) !important;
	transition: transform 0.3s ease-in-out !important;
}

.offcanvas-header {
	background-color: var(--bg-darker);
	border-bottom: 0.1rem solid var(--border);
	padding: 1rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

/* Mobile Logo */
.mobile-logo {
	width: auto;
	height: 2rem;
}

/* Mobile Menu Close Button */
.btn-close {
	padding: 0.5rem;
	margin: 0;
	opacity: 1;
	background-color: transparent;
}

.offcanvas-title {
	margin: 0;
	font-size: 1.25rem;
}

.offcanvas-body {
	padding: 1rem;
}

/* Text and Backgrounds */
.text-light {
	color: var(--txt-secondary);
}

.bg-dark {
	background-color: var(--bg-dark) !important;
}

.bg-darker::before {
	background-color: var(--bg-darker) !important;
}

.border {
	border-color: var(--border) !important;
}

.border-bottom {
	border-bottom: 0.1rem solid var(--border) !important;
}

/* Section Padding */
.section-padding {
	overflow: hidden;
	padding-top: 5rem;
	padding-bottom: 5rem;
}

/* Button - Default */
.btn,
.btn-warning,
.nice_button,
.btn-close,
.btn-primary,
.btn-secondary,
.accordion-button,
.btn-check,
.btn.active,
.btn.show {
	background-color: var(--btn-primary) !important;
	border-bottom: 0.3rem solid var(--btn-primary-border-bottom) !important;
	border-radius: 0;
	font-family: "Poppins", sans-serif;
	color: var(--btn-txt-dark);
	font-size: 1rem;
	font-weight: 600;
	text-shadow: none;
	font-style: normal;
	text-transform: uppercase;
	box-shadow: none !important;
	transition: all 0.3s ease-in-out;
	border-radius: 0.15rem !important;
}

/* Button - Default - Hover States */
.btn:hover,
.btn-warning:hover,
.nice_button:hover,
.btn-close:hover,
.btn-primary:hover,
.btn-secondary:hover,
.accordion-button:hover,
.btn-check:hover,
.btn.active:hover,
.btn.show:hover {
	background-color: var(--btn-secondary) !important;
	border-bottom: 0.3rem solid var(--btn-secondary-border-bottom) !important;
	border-radius: 0;
	color: var(--btn-txt-dark) !important;
	font-size: 1rem;
	font-weight: 600;
	text-shadow: none;
	font-style: normal;
	text-transform: uppercase;
	transition: all 0.3s ease-in-out !important;
	border-radius: 0.15rem !important;
}

/* Button - Default - Active States */
.btn:active,
.btn-warning:active,
.nice_button:active,
.btn-close:active,
.btn-primary:active,
.btn-secondary:active,
.accordion-button:active,
.btn:focus,
.btn-warning:focus,
.nice_button:focus,
.btn-close:focus,
.btn-primary:focus,
.btn-secondary:focus,
.accordion-button:focus,
.btn-check:active,
.btn-check:focus,
.btn.active:active,
.btn.active:focus,
.btn.show:active,
.btn.show:focus {
	background-color: var(--btn-primary);
	border-bottom: 0.3rem solid var(--btn-primary-border-bottom);
	border-radius: 0;
	color: var(--btn-txt-dark);
	font-size: 1rem;
	font-weight: 600;
	text-shadow: none;
	font-style: normal;
	text-transform: uppercase;
	box-shadow: none;
	transition: all 0.3s ease-in-out !important;
}

.btn.active,
.nice_active {
	color: var(--btn-txt-dark);
	background-color: var(--btn-secondary) !important;
	border-bottom: 0.3rem solid var(--btn-secondary-border-bottom) !important;
	transition: all 0.3s ease-in-out !important;
}

/* Button - Disabled */
.btn.disabled,
.btn:disabled {
	color: var(--btn-txt-dark);
	background-color: var(--btn-secondary);
	border-bottom: var(--btn-secondary-border-bottom);
	transition: all 0.3s ease-in-out !important;
}

/* Button - Others */
button,
.nice_button,
input[type="reset"],
input[type="button"],
input[type="submit"] {
	background-color: var(--btn-primary);
	border-bottom: 0.3rem solid var(--btn-primary-border-bottom);
	border-radius: 0 !important;
	color: var(--btn-txt-dark);
	font-family: "Poppins", sans-serif;
	font-size: 1rem;
	font-weight: 600;
	text-shadow: none;
	font-style: normal;
	text-transform: uppercase;
	box-shadow: none;
	transition: all 0.3s ease-in-out !important;
}

/* STORE - VP BUTTONS */
/* Targets the first button only if there are exactly two buttons */
.store_buttons .btn:first-child:nth-last-child(2),
.store_buttons .btn:nth-last-child(2):nth-child(1) {
	filter: saturate(0) brightness(1.1);
}

.store_buttons .btn:first-child:nth-last-child(2):hover,
.store_buttons .btn:nth-last-child(2):nth-child(1):hover {
	filter: saturate(0) brightness(1);
}

/* Target only the "VP" button based on its position */
.col-md-2 .btn:first-child {
	filter: saturate(0) brightness(1.1);
}

.col-md-2 .btn:first-child:hover {
	filter: saturate(0) brightness(1);
}

/* ---------------- HOMEPAGE HERO BANNERS ---------------- */

/* Hero Section */
.hero {
	position: relative;
	/* height: 40vh; */
	overflow: hidden;
	z-index: 0;
}

/* Hero - Video */
.hero .hero-video {
	position: absolute;
	top: 0;
	left: 0;
	width: 105%;
	height: 100%;
	object-fit: cover;
	background-color: var(--bg);
	opacity: 1;
	z-index: -2;
	/* transform: scaleX(-1); */
}

/* Hero - Heading Vertical Spacing Adjustment */
body h2.tighten-up {
	margin-bottom: -0.3rem;
}

/* Hero - Video - Grid Overlay */
.video-overlay {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: linear-gradient(to right, hsla(0, 0%, 5%, 0.3) 1px, transparent 1px), linear-gradient(to bottom, hsla(0, 0%, 5%, 0.3) 1px, transparent 1px);
	background-size: 2px 2px; /* Increase the spacing between the dots */
	opacity: 0.3;
}
/* ---------------- END OF HOMEPAGE HERO BANNERS ---------------- */

/* ---------------- BANNERS ---------------- */

/* Banner Border */
.banner {
	border-top: 0.1rem solid var(--border);
	border-bottom: 0.1rem solid var(--border);
}

/* Banner Grid Overlay Effect */
.banner::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: linear-gradient(to right, hsla(0, 0%, 5%, 0.3) 1px, transparent 1px), linear-gradient(to bottom, hsla(0, 0%, 5%, 0.3) 1px, transparent 1px);
	background-size: 2px 2px; /* Increase the spacing between the dots */
	opacity: 0.5;
}

/* Positions the heading and description text above the overlays */
.section-heading,
.section-description {
	position: relative;
	z-index: 10;
}

/* Responsive - General - For large screens */
.bg-responsive {
	background-position: right 30%;
	background-size: cover;
	background-repeat: no-repeat;
	/* background-size: 2600px; */
	background-color: #101218;
}

/* Responsive - Socials - For large screens */
.bg-responsive-socials {
	background-position: left top;
	background-size: cover;
	background-repeat: no-repeat;
	margin-bottom: 0.1rem;
}

/* Headers - Reduce Opacity on Mobile */
@media (max-width: 765px) {
	.bg-responsive::before {
		content: "";
		display: block;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background: rgba(0, 0, 0, 1);
		opacity: 0.6;
		z-index: 1;
	}

	.bg-responsive > div {
		position: relative;
		z-index: 2;
	}
}

/* Responsive - More Sections - For large screens */
.more-section {
	background-position: right top;
	background-size: cover;
	background-repeat: no-repeat;
}

/* Responsive - General - For small screens */
@media (max-width: 765px) {
	.bg-responsive {
		background-position: right center;
		text-align: center;
	}
}

/* Responsive - Socials - For large screens */
@media (max-width: 765px) {
	.bg-responsive-socials {
		background-position: left center;
		text-align: center;
	}
}

.banner .section-heading,
.banner .section-description {
	text-shadow: #080b0f 0px 1px 1px !important;
}

/* ---------------- END OF BANNERS ---------------- */

/* Dim Images - On Hover */
.dim-image {
	opacity: 1;
	transition: opacity 0.3s ease-in-out;
}

.dim-image:hover {
	opacity: 0.6;
}

/* ---------------- SOCIAL BANNERS ---------------- */

/* Discord Banner - Animated Background Color */
.discord-banner {
	border: solid var(--discord-border);
	border-width: 0.1rem 0;
	position: relative;
	overflow: hidden;
}

.discord-banner::before {
	content: "";
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(to right, transparent, #404eed, transparent);
	animation: backgroundShine 4s linear infinite;
	transform: rotate(-45deg);
	opacity: 0.5;
	filter: blur(100px);
}

@keyframes backgroundShine {
	0% {
		left: -100%;
	}
	100% {
		left: 100%;
	}
}

/* Discord Button */
.btn-discord {
	background-color: var(--btn-discord) !important;
	border-bottom: 0.3rem solid var(--btn-discord-border-bottom) !important;
	color: var(--btn-txt-light);
	overflow: hidden;
}

/* Discord Button Hover */
.btn-discord:hover {
	background-color: var(--btn-secondary);
	border-bottom-color: var(--btn-hover-border-bottom);
	color: var(--btn-txt-dark);
}

.btn-discord-footer {
	background-color: var(--btn-discord) !important;
	border-bottom: 0.3rem solid var(--btn-discord-border-bottom) !important;
	color: var(--btn-txt-light);
	overflow: hidden;
	border-radius: 0;
}

/* Discord Button Hover */
.btn-discord-footer:hover {
	background-color: var(--btn-secondary) !important;
	border-bottom-color: var(--btn-hover-border-bottom) !important;
	color: var(--btn-txt-dark);
	border-radius: 0;
}

/* Discord Text */
.text-discord {
	color: var(--txt-discord);
	font-weight: 600;
}

/* Discord Banner Paragraph */
.discord-banner p {
	margin: 0;
}

/* YouTube Section */
.youtube-section {
	border: solid var(--youtube-border);
	border-width: 0.1rem 0;
}

/* YouTube - Button */
.btn-youtube {
	background-color: var(--btn-youtube) !important;
	border-bottom: 0.3rem solid var(--youtube-border-bottom) !important;
	color: var(--btn-txt-light);
	transition: all 0.3s ease-in-out;
}

/* YouTube - Button Hover */
.btn-youtube:hover {
	background-color: var(--btn-secondary);
	border-bottom-color: var(--btn-hover-border-bottom);
	color: var (--btn-txt-dark);
}

/* YouTube - Text Color */
.text-youtube {
	color: var(--txt-youtube);
}

/* YouTube - Video Embed Responsive */
.embed-responsive {
	position: relative;
	width: 100%;
	overflow: hidden;
	padding: 0;
}

/* YouTube - Video Embed Responsive Item */
.embed-responsive-item {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* YouTube - Video Embed Responsive Pseudo-element */
.embed-responsive::before {
	content: "";
	display: block;
	padding-top: 55%;
}

/* Twitch Section */
.twitch-section {
	border: solid var(--twitch-border);
	border-width: 0.1rem 0;
}

/* Twitch - Button */
.btn-twitch {
	background-color: var(--btn-twitch) !important;
	border-bottom: 0.3rem solid var(--btn-twitch-border-bottom) !important;
	color: var(--btn-txt-light);
}

/* Twitch - Button Hover */
.btn-twitch:hover {
	background-color: var(--btn-secondary);
	border-bottom: 0.3rem solid var(--btn-hover-border-bottom);
	color: var(--btn-txt-dark);
}

/* Twitch - Text Color */
.text-twitch {
	color: var(--txt-twitch);
}

/* Kick Section */
.kick-section {
	border: solid var(--kick-border);
	border-width: 0.1rem 0;
}

/* Kick - Button */
.btn-kick {
	background-color: var(--btn-kick) !important;
	border-bottom: 0.3rem solid var(--btn-kick-border-bottom) !important;
	color: var(--btn-txt-dark);
}

/* Kick - Button Hover */
.btn-kick:hover {
	background-color: var(--btn-secondary);
	border-bottom: 0.3rem solid var(--btn-secondary-border);
	color: var(--btn-txt-dark);
}

/* Kick - Text Color */
.text-kick {
	color: var(--txt-kick);
}

/* ---------------- END - SOCIAL BANNERS ---------------- */

/* Server Features Section */
#card-features .cards {
	background-color: var(--bg-darker);
	border: 0.1rem solid var(--border);
	font-size: 1rem;
}

/* Card Images - Hide Overflow */
#card-features .cards .image-box {
	overflow: hidden;
}

/* Card Images - Set Size */
#card-features .cards .image-box img {
	height: 100%;
	width: 100%;
	transition: transform 0.3s;
	transform: scale(1.01);
}

/* Card Images - Hover Effect */
#card-features .cards:hover .image-box img {
	opacity: 0.5;
	transform: scale(1.1);
	transition: all 0.3s ease-in-out;
}

/* Card Image Zoom Properties and Hover State */
.card .card-img-zoom {
	overflow: hidden;
	opacity: 1;
	transition: all 0.3s;
}

.card .card-img-zoom img {
	transition: transform 0.3s;
	transform: scale(1.01);
}

.card:hover .card-img-zoom img {
	opacity: 0.7;
	transform: scale(1.1);
}

.card-header {
	color: var(--txt-dark);
	background-color: var(--bg-primary);
	border-bottom: 1px solid var(--border-light);
	font-weight: 600;
	text-transform: uppercase;
}

.card:not(.card-disabled).card-hover:hover {
	filter: saturate(0) brightness(1.2);
	transition: filter 0.3s;
	border: 0.1rem solid var(--border-primary);
}

.card-img,
.card-img-top {
	border-radius: 0;
	border: 0.1rem solid var(--border);
	border-bottom: 0;
}

#vote-cards,
#donate-cards {
	border: 0.1rem solid var(--border-light);
}

.card-header:first-child {
	border-radius: 0;
}

/* Server Team Members - Card Background Images */
.small-screen-bg {
	display: none;
}

@media (max-width: 768px) {
	.card {
		position: relative;
	}
	.small-screen-bg {
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-repeat: no-repeat;
		background-position: 50% 30%;
		background-size: cover;
		opacity: 0.1;
		filter: saturate(0.5);
	}
	.card::before {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}
}

/* Server Team Members - Profile Link - Hover State */
.profile-link:hover h6 {
	color: var(--txt-secondary) !important;
}

/* Testimonial Section */
.quote_ {
	opacity: 0.1 !important;
}

/* Testimonial Section - Avatar Images */
.testimonial-avatar {
	border: 0.1rem solid var(--border);
	transition: opacity 0.3s ease-in-out;
}

.testimonial-avatar:hover {
	border: 0.1rem solid var(--border);
	opacity: 0.7;
	transition: opacity 0.3s ease-in-out;
}

/* Class & Rank Text Colors */
.text-designer {
	color: var(--txt-designer);
}

.text-developer {
	color: var(--txt-developer);
}

.text-gm {
	color: var(--txt-gm);
}

.text-senior-gm {
	color: var(--txt-senior-gm);
}

.text-support {
	color: var(--txt-support);
}

.text-deathknight {
	color: var(--txt-deathknight);
}

.text-druid {
	color: var(--txt-druid);
}

.text-hunter {
	color: var(--txt-hunter);
}

.text-mage {
	color: var(--txt-mage);
}

.text-paladin {
	color: var(--txt-paladin);
}

.text-priest {
	color: var(--txt-priest);
}

.text-rogue {
	color: var(--txt-rogue);
}

.text-shaman {
	color: var(--txt-shaman);
}

.text-warlock {
	color: var(--txt-warlock);
}

.text-warrior {
	color: var(--txt-warrior);
}

/* WoW Item Qualities */
.item-poor {
	color: var(--txt-item-poor);
}

.item-common {
	color: var(--txt-item-common);
}

.item-uncommon {
	color: var(--txt-item-uncommon);
}

.item-rare {
	color: var(--txt-item-rare);
}

.item-epic {
	color: var(--txt-item-epic);
}

.item-legendary {
	color: var(--txt-item-legendary);
}

.item-artifact {
	color: var(--txt-item-artifact);
}

.item-heirloom {
	color: var(--txt-item-heirloom);
}

/* Store - Cart */
#cart_item_count {
	color: var(--txt-secondary);
}

/* Store - Price Color DP & VP */
#cart_price #dp_price_full span,
#cart_price #vp_price_full span {
	color: var(--txt-primary);
}

/* Store - Override VP price color */
#cart_price #vp_price_full span {
	color: var(--txt-secondary);
}

/* Store - Checkout Info */
#checkout_info {
	padding-bottom: 1rem;
}

/* Store - Margin */
#checkout_info .mb-3 {
	margin-top: 20px;
}

/* Store - Checkout Info Font */
#checkout_info b {
	color: var(--txt-primary);
	font-weight: 500;
}

/* Store - Hide Images Checkout */
#checkout_info img {
	display: none;
}

/* Store - Padding Paragraphs Checkout Info */
#checkout_info p {
	padding-bottom: 5rem;
}

/* Store - Item Quality Font */
#item_quality {
	font-family: "Poppins", sans-serif;
	font-size: 1rem;
	font-style: normal;
	font-weight: 500;
	text-transform: uppercase;
}

/* Store - Background Color Card Body */
#item_space .card-body {
	background-color: var(--bg);
}

/* Store - Filter - Button Focus & Active States */
.btn-check:checked + .btn,
.btn.show,
.btn:first-child:active,
:not(.btn-check) + {
	color: var(--txt-dark);
	background-color: var(--btn-secondary);
	border-color: var(--btn-secondary-border);
}

/* Store - Filter - Button Active State When Filter Is Enabled */
.nice_active {
	color: var(--txt-dark);
	background-color: var(--btn-secondary);
	border-color: var(--btn-secondary-border);
}

/* Store - Filter - Box and Dropdown Menu - Remove Browser Styes */
select.filter-menu {
	background-color: var(--bg-dark);
	color: var(--txt-muted);
	text-transform: uppercase;
	border: 1px solid var(--border);
	padding: 0.375rem 0.75rem;

	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}

/* Store - Filter - Dropdown Menu - Items */
select.filter-menu option {
	background-color: var(--bg-dark);
	color: var(--txt-secondary);
	text-transform: uppercase;
	border: 1px solid var(--border);
	padding: 0.375rem 0.75rem;
}

/* Store - Filter - Search Box */
input.filter-menu {
	background-color: var(--bg-dark);
	font-family: "Poppins", sans-serif;
	font-weight: 600;
	color: var(--txt-primary);
	text-transform: uppercase;
	border: 1px solid var(--border);
	padding: 0.375rem 0.75rem;
}

/* Store - Filter - Search Box */
input.filter-menu:active,
input.filter-menu:focus {
	background-color: transparent;
	box-shadow: none;
}

/* Store - Filter - Search Box - Remove Browser Styles */
input.filter-menu:-webkit-autofill,
input.filter-menu:-webkit-autofill:hover,
input.filter-menu:-webkit-autofill:focus,
input.filter-menu:-webkit-autofill:active {
	-webkit-box-shadow: none !important;
}

/* Store - Filter - Search Placeholder Text */
#filter_name::placeholder {
	color: var(--txt-placeholder);
	opacity: 1; /* Firefox */
	text-transform: uppercase;
	font-size: 1rem;
}

.store-groups {
	padding: 0.55rem;
}

body .store_item {
	margin: 0.3rem;
	padding: 1rem;
	border: 0.1rem solid var(--border-light) !important;
	border-radius: 0rem;
}

/* Tables */
.table {
	--bs-table-bg: var(--bg-darker);
	--bs-table-striped-color: var(--txt-secondary);
	--bs-table-striped-bg: var(--bg-dark);
	--bs-table-active-color: var(--txt-secondary);
	--bs-table-active-bg: var(--bg-dark);
	--bs-table-hover-color: var(--txt-primary);
	--bs-table-hover-bg: var(--bg);
	--bs-table-color: var(--txt-secondary);
	cursor: pointer;
	color: var(--txt-secondary);
}

/* Table Header */
.table thead th {
	background-color: var(--bg-light);
	color: var(--txt-dark);
	text-transform: uppercase;
	font-family: "Poppins", sans-serif;
	font-weight: 500;
	font-size: 1rem;
}

.table thead th:hover {
	background-color: var(--bg-primary);
	color: var(--txt-dark);
}

/* Table - Items - Vertically Align Center */
.table td,
.table th {
	vertical-align: middle;
}

#dungeons,
#raids,
#mythics,
#search_results_items {
	border-color: var(--border);
	border-style: solid;
	border-width: 0.1rem;
}

#dungeons td,
#dungeons th,
#raids td,
#raids th,
#mythics td,
#mythics th,
#search_results_items td,
#search_results_items th {
	/* text-align: start; */
	vertical-align: middle;
}

/* Table - Armory - Character - Border Color */
.armory-table th,
.armory-table td,
.armory-table tbody,
thead,
tbody,
tfoot,
tr,
td,
th,
table.dataTable thead th,
table.dataTable thead td {
	border: 0.1rem solid var(--border) !important;
}

table.dataTable thead th,
table.dataTable thead td {
	padding: 10px 18px;
	border: 0.1rem solid var(--border);
}

table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting {
	background-image: none !important;
}

div.dt-container div.dt-length select {
	width: 100% !important;
	display: inline-block;
	margin-right: 0.5em;
	padding: 0.3em !important;
}

.dataTables_wrapper {
	position: relative;
	padding-bottom: 5%;
}

body .dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_processing,
.dataTables_wrapper .dataTables_paginate {
	color: var(--txt-secondary) !important;
}

body .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
	color: var(--txt-dark) !important;
}

table.table.dataTable th {
	background-color: var(--bg-primary) !important;
}

/* .armory-table th:hover,
.armory-table td:hover,
.armory-table tbody:hover,
thead:hover,
tbody:hover,
tfoot:hover,
tr:hover,
td:hover,
th:hover,
table.dataTable thead th:hover,
table.dataTable thead td:hover {
	color: #fff;
} */

table.dataTable th.dt-type-numeric,
table.dataTable th.dt-type-date,
table.dataTable td.dt-type-numeric,
table.dataTable td.dt-type-date {
	text-align: left !important;
}

div.dt-container div.dt-search input {
	margin-left: 0 !important;
	display: inline-block;
	width: auto;
	height: 1em;
}

/* Datatables - Processing */
.dataTables_wrapper .dataTables_processing {
	top: 60% !important;
	padding: none !important;
	font-size: 0.8em !important;
	background-color: transparent !important;
	background: none !important;
	text-transform: uppercase !important;
}

#changelogTable td {
	font-family: monospace;
	font-weight: 100;
	font-size: 0.9rem;
	text-transform: capitalize;
}

#changelogTable th {
	font-weight: 600;
	font-size: 0.9rem;
}

#changelogTable tbody tr:hover td,
#changelogTable tbody tr:hover th {
	color: var(--txt-primary) !important;
}

/* Table - Sorting & Searching */
body .dataTables_wrapper .dataTables_paginate .paginate_button {
	background-color: var(--bg-light) !important;
	border: 0.1rem solid var(--border) !important;
	border-radius: 0.25rem;
}

body .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
	color: var(--txt-muted) !important;
	border: 0.1rem solid var(--border);
	background-color: var(--bg-dark);
	background: none !important;
	background: none !important;
	background: none !important;
	background: none !important;
	background: none !important;
	background: none !important;
}

body .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
	color: var(--txt-dark) !important;
	border: 0.1rem solid var(--border);
	background-color: var(--bg-darker);
	background: var(--bg-primary) !important;
}

body .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
	cursor: default;
	color: var(--txt-dark) !important;
	border: 1px solid var(--border);
	background: transparent;
	box-shadow: none;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
	border: 1px solid var(--border-light) !important;
	border-radius: 0 !important;
	padding: 0.3rem !important;
	background-color: transparent;
	color: var(--txt-secondary) !important;
}

table.dataTable.no-footer {
	margin-bottom: 1rem !important;
}

.dataTables_filter label {
	margin-bottom: 1rem !important;
}

label {
	color: var(--txt-muted) !important;
	font-family: "Poppins", sans-serif !important;
	font-size: 0.8rem !important;
	text-shadow: none !important;
	text-transform: uppercase;
	display: flex;
	align-items: center; /* Add this line */
	gap: 1rem !important;
}

/* Table Borders */
.table-bordered {
	border: 0.1rem solid var(--border);
}

/* Accordion button properties */
.accordion .accordion-item .accordion-header .accordion-button {
	color: var(--txt-dark);
	font-style: normal;
	box-shadow: none;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	font-family: "Poppins", sans-serif;
	font-weight: 600;
	font-size: 1rem;
	text-shadow: none;
	border-radius: 0;
	padding: 0.8rem;
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
}

/* Accordion chevron arrow dark */
.accordion-button:not(.collapsed)::after {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='txt-dark'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
	transform: rotate(-180deg);
}

/* Accordion body properties */
.accordion .accordion-item .accordion-body {
	background-color: var(--bg-dark);
	border: 0.1rem solid var(--border-light);
	font-weight: 500;
	text-transform: capitalize;
	color: var(--txt-secondary);
	text-shadow: none;
}

/* Accordion button after properties */
.accordion .accordion-item .accordion-header .accordion-button::after {
	background-image: none;
	font-family: "FontAwesome";
	content: "\f107";
	font-weight: 900;
}

/* Card properties in timeline cards */
#timeline-cards .card {
	background-color: #080b0f;
	box-shadow: 0 3px 4px rgba(0, 0, 0, 0.4);
	margin-top: 50px;
}

/* Image zoom properties in card */
#timeline-cards .card .card-img-zoom {
	overflow: hidden;
}

/* Image properties in image zoom */
#timeline-cards .card .card-img-zoom img {
	height: 100%;
	width: 100%;
}

/* Card hover properties in timeline cards */
#timeline-cards .card:hover {
	box-shadow: 0 15px 26px rgba(0, 0, 0, 0.5);
}

/* Image properties in image zoom on card hover */
#timeline-cards .card:hover .card-img-zoom img {
	opacity: 0.7;
	transform: scale(1.15);
}

.card-bg {
	background-color: var(--bg-darker);
}

/* Common Tooltip Styles */
.tooltip,
.tooltip-inner,
#fusion_tooltip,
.fusion_tooltip {
	border-radius: 0.25rem;
	box-shadow: none;
	text-transform: capitalize;
}

/* Bootstrap Tooltip */
.tooltip {
	background-color: var(--bg-darker);
	border: 0.1rem solid var(--border-dark);
	color: var(--txt-secondary) !important;
	font-size: 0.85rem;
}

.tooltip-inner {
	/* padding: 0.5rem; */
	color: var(--txt-secondary);
	background-color: var(--bg-darker);
}

/* FusionGEN Tooltip */
#fusion_tooltip,
.fusion_tooltip {
	background-color: var(--bg-dark);
	border: 0.1rem solid var(--border-light);
	color: var(--txt-secondary);
	padding: 1rem;
	font-size: 0.8rem;
}

/* Tooltip - Hide Arrow */
.bs-tooltip-start .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before {
	display: none !important;
}

/* Affix-icon padding */
.affix-icon {
	padding: 0.2rem;
}

/* Avatar link setup */
.avatar-link {
	display: inline-block;
	position: relative;
	cursor: pointer;
}

/* Avatar image and text transitions */
.avatar-img,
.avatar-text {
	transition: opacity 0.3s ease-in-out;
}

/* Avatar image opacity on hover */
.avatar-link:hover .avatar-img {
	opacity: 0.3;
}

/* Avatar text visibility on hover */
.avatar-link:hover .avatar-text {
	opacity: 1;
}

/* Avatar text positioning and color */
.avatar-text {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	opacity: 0;
	color: var(--txt-primary);
}

.avatar {
	float: left;
	margin-right: 10px;
	margin-left: 0;
	margin-top: 3px;
}

/* Avatar box shadow and border */
body .my_avatar {
	box-shadow: none;
	border: 0.1rem solid var(--border-light);
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
}

/* Avatar image desaturation on hover */
body .my_avatar:hover img {
	filter: saturate(0);
}

/* Avatar box shadow and border on hover */
body .my_avatar:hover {
	box-shadow: none;
	border: 0.1rem solid var(--border-primary);
}

/* Current avatar border */
body .avatar_current {
	border: 0.1rem solid var(--border-primary);
}

/* Badge border radius and font size */
.badge {
	border-radius: 0;
	font-size: 0.75em;
}

/* Character - Fit Image */
.character-avatar {
	object-fit: cover;
}

/* Alliance background image */
body .bg-faction.alliance {
	background-image: url(/application/images/misc/bg_alliance_complete.png);
}

/* Dark border color */
.border-dark {
	border-color: var(--border-dark);
}

/* Default card setup */
.card {
	background-color: var(--bg-darker);
	border: 0.1rem solid var(--border);
	border-radius: 0rem;
	box-shadow: none;
}

/* Card title color */
.card-title {
	color: var(--txt-primary);
}

/* Card footer border */
.card-footer {
	border-top: 0.1rem solid var(--border);
}

/* Footer - Discord Widget Header */
.discord-header {
	background-color: var(--btn-discord);
}

/* Disabled card appearance */
.card-disabled {
	opacity: 50%;
	filter: saturate(0);
}

/* Character select block text */
.character-select .d-block {
	color: var(--txt-secondary);
	font-weight: 500;
	text-transform: uppercase;
}

/* Character select image setup */
.character-select img {
	background-color: transparent;
	border: 0.1rem solid #323649;
	border-radius: 0 !important;
}

/* Copper points text setup */
.copper-points,
.copper-points:before {
	color: #ffb45e;
	font-weight: 500;
	text-transform: uppercase;
}

/* Copper points icon */
.copper-points:before {
	content: "\f51e";
	font-family: "FontAwesome";
}

/* Hide icon within copper points */
.copper-points i {
	display: none;
}

/* dp_price_value customization */
.dp_price_value {
	color: #141a21 !important;
	font-family: "Poppins", sans-serif;
	font-weight: 600;
	text-shadow: none;
}

/* Error feedback customization */
.error-feedback {
	background-color: #13141a;
	border: 0.1rem solid #323649;
	border-radius: 0;
	color: #df2929 !important;
	text-transform: uppercase;
}

/* Icon color settings */
.fa-arrow-alt-circle-left:before,
.fa-circle-left:before,
.fa-arrow-alt-circle-right:before,
.fa-circle-right:before,
.fa-shopping-cart {
	color: #080b0f;
}

/* Specific icon color override */
.fa-circle-arrow-right:before {
	color: var(--txt-secondary) !important;
	content: "\e1d9" !important;
}

/* Font weight for all children of fa-ul */
.fa-ul > * {
	font-weight: 400 !important;
}

/* Positioning for fixed-arrow */
.fixed-arrow {
	bottom: 20px;
	position: fixed;
	right: 20px;
	z-index: 999;
}

/* Page link color and background settings */
.page-item .page-link,
.page-item.disabled .page-link,
#search_results_items_next {
	color: var(--txt-secondary);
	background-color: var(--primary-color);
	border-radius: 0.25rem;
}

/* Border radius for last page-item */
.page-item:last-child .page-link {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

/* Background color for active page-item and on hover */
.page-item.active .page-link,
.pagination li a:hover {
	background-color: var(--txt-primary);
}

.page-item.active .page-link {
	color: var(--txt-dark);
}

.page-item.active .page-link,
.pagination li a:hover {
	color: var(--txt-dark);
	background-color: var(--txt-secondary);
}

/* Add gaps to pagination buttons */
div.dt-container div.dt-paging ul.pagination {
	gap: 0.2em;
}

/* Margin for pagination button */
ul.pagination li.paginate_button {
	margin-right: 0.2rem;
}

/* Box shadow for select on focus and active, and page-link on focus */
select:focus,
select:active,
.page-link:focus {
	box-shadow: none !important;
}

/* Customization for item, item a, and item img */
.item,
.item a,
.item img {
	border-radius: 0 !important;
}

/* Customization for item a */
.item a {
	background-image: none !important;
}

/* Customization for item img */
.item img {
	border: #181b25 0.1rem solid;
	border-radius: 4px !important;
}

/* Customization for item_price img */
.item_price img {
	display: none;
}

/* Customization for list-group, list-group-item, list-group-item active, list-group-item + .list-group-item */
.list-group,
.list-group-item,
.list-group-item.active,
.list-group-item + .list-group-item {
	border-radius: 0;
	background-color: var(--bg-darker);
	border-color: var(--border);
	font-family: "Poppins", sans-serif;
	color: var(--txt-secondary);
	box-shadow: none;
	text-transform: uppercase;
}

/* Customization for list-group-item:focus, list-group-item.active */
.list-group-item:focus,
.list-group-item.active {
	background-color: var(--bg-primary);
	color: var(--txt-dark);
	cursor: pointer;
}

/* Customization for list-group-item:hover */
.list-group-item:hover {
	background-color: var(--bg-secondary);
	color: var(--txt-dark);
	cursor: pointer;
}

/* Customization for location-select .d-block */
.location-select .d-block {
	color: var(--primary-color) !important;
	font-weight: 500;
	text-transform: uppercase;
}

/* Customization for nice_active::after, nice_active::before, nice_button img */
.nice_active::after,
.nice_active::before,
.nice_button img {
	display: none;
}

/* Customization for page-subbody */
.page-subbody {
	background: none;
	margin: 0rem;
	padding: 0rem;
}

/* Customization for page_form label */
.page_form label {
	color: var(--txt-muted);
	font-family: "Poppins", sans-serif;
	font-size: 1rem !important;
	font-weight: 500;
}

/* Customization for pagebody */
.pagebody {
	background: none;
	box-shadow: none;
	color: var(--txt-muted);
	padding: 1rem;
}

/* Customization for realm_bar and poll_bar */
.realm_bar,
.poll_bar {
	border-radius: 0;
	margin: 0;
}

/* Hide span inside realm_bar_fill */
.realm_bar_fill span {
	visibility: hidden;
}

/* Customization for realm_bar_fill.alliance and realm_bar_fill.horde */
.realm_bar_fill.alliance,
.realm_bar_fill.horde {
	border: 2px solid #141a21;
	border-radius: 0;
	padding: 0.4rem;
}

/* Background color for realm_bar_fill.alliance */
.realm_bar_fill.alliance {
	background-color: #0070dd;
}

/* Background color for realm_bar_fill.horde */
.realm_bar_fill.horde {
	background-color: #c41e3b;
}

/* Customization for profile-avatar */
.section-topbar .membership-bar .membership-bar-profile .profile-avatar {
	border: 0.1rem solid var(--border-primary);
	box-shadow: none;
}

/* Border color change on hover and active for profile-avatar */
.section-topbar .membership-bar .membership-bar-profile:hover,
.section-topbar .membership-bar .membership-bar-profile:active {
	border-color: var(--border-secondary);
}

/* Customization for sidebox */
.sidebox {
	background-color: var(--bg-darker);
	background-image: none;
	border: 0.1rem solid var(--border);
	border-radius: 0;
	box-shadow: none;
}

/* Padding for card-body inside sidebox */
.sidebox .card-body {
	padding: 0;
}

/* Customization for sidebox-body */
.sidebox .sidebox-body {
	color: var(--txt-secondary);
	height: auto;
	padding: 0.5rem;
	text-transform: uppercase;
	width: 100%;
	font-family: "Poppins", sans-serif;
	font-weight: 500;
	font-size: 1rem;
}

/* Customization for silver-points and its pseudo-element */
.silver-points,
.silver-points:before {
	color: #d4d4d4;
	font-weight: 500;
	text-transform: uppercase;
}

/* Content for silver-points:before */
.silver-points:before {
	content: "\f51e";
	font-family: "FontAwesome";
}

/* Hide i inside silver-points */
.silver-points i {
	display: none;
}

/* Customization for sort */
.sort {
	display: none;
	font-family: "Poppins", sans-serif;
	font-size: 1rem;
	font-weight: 500;
	text-transform: uppercase;
}

/* Customization for popup messages */
.swal2-container.swal2-center > .swal2-popup {
	color: var(--txt-secondary);
	text-transform: uppercase;
	border: 0.1rem solid var(--border-light);
	border-radius: 0;
	box-shadow: none;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	background-color: var(--bg-dark);
	background-image: none;
}

.swal2-title {
	color: var(--txt-primary);
	font-size: 2em;
	font-weight: 600;
	text-align: center;
	text-transform: uppercase;
	word-wrap: break-word;
}

/* Customization for confirm button in popup messages */
.swal2-styled.swal2-confirm {
	background-color: var(--btn-primary) !important;
	border-bottom: 0.3rem solid var(--btn-primary-border-bottom) !important;
	color: var(--btn-txt-dark);
	font-size: 1rem;
	font-weight: 600;
	text-shadow: none;
	font-style: normal;
	text-transform: uppercase;
	box-shadow: none !important;
}

/* Customization for cancel button in popup messages */
.swal2-deny {
	background-color: var(--btn-cancel) !important;
	border-bottom: 0.3rem solid var(--btn-cancel-border-bottom) !important;
	color: var(--btn-txt-dark);
	font-size: 1rem;
	font-weight: 600;
	text-shadow: none;
	font-style: normal;
	text-transform: uppercase;
	box-shadow: none !important;
	transition: all 3s ease;
}

/* Customization for user-avatar */
.user-avatar {
	display: inline-block;
	height: 150px;
	position: relative;
	width: 150px;
}

/* Customization for avatar-change-text inside user-avatar */
.user-avatar .avatar-change-text {
	background-color: rgba(19, 21, 30, 0.8);
	border-radius: 0 !important;
	color: var(--primary-color) !important;
	display: none;
	height: calc(100% + 2px);
	left: -0.1rem;
	position: absolute;
	text-transform: uppercase !important;
	top: -0.1rem;
	width: calc(100% + 2px);
}

/* Customization for img inside user-avatar */
.user-avatar img {
	border: 0.1rem solid var(--primary-color);
	height: 150px;
	width: 100%;
}

/* Customization for avatar-change-text inside user-avatar on hover */
.user-avatar:hover .avatar-change-text {
	display: flex;
}

/* Customization for vp_price_value */
.vp_price_value {
	color: var(--txt-dark) !important;
	font-family: "Poppins", sans-serif;
	text-shadow: none;
}

/* Customization for invalid form controls on focus */
.was-validated .form-control:invalid:focus,
.form-control.is-invalid:focus {
	border-color: var(--border);
	box-shadow: none;
}

.form-check-input:checked {
	background-color: var(--bg-light);
	border-color: var(--border);
}

.form-check-input:focus {
	border-color: var(--border);
	box-shadow: none;
}

/* Customization for hr */
hr {
	border-top: 0.1rem solid var(--border-light);
	color: var(--border-light);
	height: 0.1rem;
}

/* Customization for img.item_icon */
body .store_item img.item_icon {
	border: 0.1rem solid var(--border-light);
	margin-right: 0.1rem;
}

/* Customization for select and its options */
select,
select option,
select optgroup {
	font-family: "Poppins", sans-serif;
	font-size: 1rem;
	font-style: normal;
	font-weight: 500;
	text-transform: uppercase;
	background-color: var(--bg-dark);
	color: var(--txt-muted);
}

/* Additional customization for select */
select {
	background-position: 90% 50%;
	background-repeat: no-repeat;
	background-size: 1rem;
}

/* Customization for list items */
ul.list-unstyled li:not(:last-child) {
	border-bottom: 0.1rem solid var(--border-bottom);
	padding: 1rem;
}

/* Additional customization for list items with no-custom-style class */
ul.list-unstyled li:not(:last-child).no-custom-style {
	border-bottom: none;
	padding: 0;
}

/* Customization for form controls */
select,
textarea,
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="file"],
input[type="text"],
input[type="time"],
input[type="week"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="search"],
input[type="password"],
input[type="datetime-local"] {
	color: var(--txt-dark);
	font-size: 0.9rem;
	font-family: var(--font-family);
	font-weight: 500;
	border-radius: 0;
	background-color: var(--bg-light);
	border-color: var(--border-light);
	text-shadow: none;
}

/* Customization for form-select */
.form-select {
	cursor: pointer;
	padding: 0.8rem;
	font-size: 0.9rem;
	background-color: var(--bg-light);
	border: transparent;
	text-shadow: none;
	font-family: "Poppins", sans-serif;
	font-weight: 500;
	border-radius: 0;
}

/* Form - Search Box - Focus */
textarea:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="date"]:focus,
input[type="file"]:focus,
input[type="text"]:focus,
input[type="text"]:active,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="email"]:focus,
input[type="month"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="password"]:focus,
input[type="datetime-local"]:focus {
	color: var(--txt-dark);
	background-color: var(--bg-light);
	box-shadow: none;
}

/* Customization for form controls on focus */
select:focus,
textarea:focus,
input:focus {
	border: transparent;
	box-shadow: none !important;
}

/* Customization for input-group */
.input-group {
	gap: 1rem;
	display: flex;
	flex-direction: row;
	border: transparent;
}

/* Font size for countdown label */
.countdown-label {
	font-size: 1rem;
}

.footer-logo {
	width: 100%;
	max-width: 80%;
	margin: auto;
}

@media (max-width: 768px) {
	.footer-logo {
		max-width: 100%;
	}
}

/* Footer - Logo - Hover */
.footer-logo {
	transition: filter 0.3s;
}

.footer-logo:hover {
	filter: saturate(0) brightness(1.2);
}

/* Textures */
.texture::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' viewBox='0 0 700 700' width='700' height='700' opacity='0.2'%3E%3Cdefs%3E%3Cfilter id='nnnoise-filter' x='-20%25' y='-20%25' width='140%25' height='140%25' filterUnits='objectBoundingBox' primitiveUnits='userSpaceOnUse' color-interpolation-filters='linearRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' seed='3' stitchTiles='stitch' x='0%25' y='0%25' width='100%25' height='100%25' result='turbulence'%3E%3C/feTurbulence%3E%3CfeSpecularLighting surfaceScale='18' specularConstant='0.2' specularExponent='20' lighting-color='%23eaeaea' x='0%25' y='0%25' width='100%25' height='100%25' in='turbulence' result='specularLighting'%3E%3CfeDistantLight azimuth='3' elevation='95'%3E%3C/feDistantLight%3E%3C/feSpecularLighting%3E%3C/filter%3E%3C/defs%3E%3Crect width='700' height='700' fill='%230e1016'%3E%3C/rect%3E%3Crect width='700' height='700' fill='%23eaeaea' filter='url(%23nnnoise-filter)'%3E%3C/rect%3E%3C/svg%3E");
	background-size: 350px 350px;
	background-repeat: repeat;
	z-index: -1;
	opacity: 1;
}

/* Button - Return To Top Button */
#return-to-top {
	opacity: 0;
	transition: opacity 0.3s ease-in-out;
}

#return-to-top.show {
	opacity: 1;
}

/* Notice Bar */
.notice-bar {
	overflow: hidden;
	border-bottom: 0.1rem solid var(--border-light);
}

/* Notice Bar - Animation */
.notice-bar::before,
.notice-bar::after {
	content: "";
	position: absolute;
	top: 49%;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(to right, transparent, #ff0019, transparent);
	animation: backgroundShine 3s linear infinite;
	opacity: 1;
}

.notice-bar::before {
	transform: scaleY(3%);
}

.notice-bar::after {
	filter: blur(6px);
	opacity: 0.1;
}

@keyframes backgroundShine {
	0% {
		left: -100%;
	}
	100% {
		left: 100%;
	}
}

/* News Article Image */
.img-height {
	height: 25vh;
	object-fit: cover;
}

.img-height-news {
	height: 15vh;
	object-fit: cover;
}

/* Player & Guild of the month Image */
.img-height-month {
	height: 25vh;
	object-fit: cover;
}

/* Maintenance Page */
.maintenance-margin {
	margin-top: 10rem;
}

.maintenance-logo {
	width: 400px;
	margin: auto;
}

.flex-fill {
	flex: 1 0 auto;
}

/* CHARACTER PROFILE LINK */
.profile-header {
	font-size: 1em;
	font-weight: 800;
	color: var(--txt-dark);
	background-color: var(--bg-primary);
	border: 1px solid var(--border);
	text-transform: uppercase;
	padding: 0.5em;

	a {
		color: var(--txt-dark);
		text-decoration: none;
		font-family: "Poppins", sans-serif;
		font-weight: 600;
	}
}

.breadcrumb {
	display: flex;
	flex-wrap: wrap;
	padding: 0 0;
	margin-bottom: 0;
	list-style: none;
}

.breadcrumb-item {
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--txt-dark);
}

.fa-duotone.fa-swap-opacity:before,
.fa-duotone:after,
.fa-swap-opacity .fa-duotone:before,
.fa-swap-opacity .fad:before,
.fad.fa-swap-opacity:before,
.fad:after {
	opacity: var(--fa-secondary-opacity, 1) !important;
}

.breadcrumb-item + .breadcrumb-item::before {
	padding-right: 0;
}

/* Navbar and Dropdown Styles */
.navbar-nav {
	position: relative;
	z-index: 1020;
}

.navbar-nav .dropdown {
	position: relative !important;
}

.navbar-nav .dropdown-menu {
	position: absolute !important;
	top: 100% !important;
	left: 0 !important;
	float: none;
	min-width: 200px;
	margin: 0.125rem 0 0;
	display: none;
	z-index: 1021;
}

.navbar-nav .dropdown:hover > .dropdown-menu,
.navbar-nav .dropdown:focus-within > .dropdown-menu {
	display: block;
}

.dropdown-menu {
	background-color: var(--bg-darker);
	border: 0.1rem solid var(--border);
	border-radius: 0;
	padding: 0.5rem 0;
	display: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease-in-out !important; /* Faster transition */
	margin-top: 0 !important;
}

.dropdown-menu.show,
.dropdown:hover > .dropdown-menu {
	display: block;
	opacity: 1;
	visibility: visible;
}