/* Sidebar Left and Right
-----------------------------------------------------------------------------*/

.light-fon {
	background: rgba(0, 0, 0, 0);
	margin-bottom: 1px;
	box-shadow: inset 0 0 40px rgba(0, 0, 0, 0);

}

.widget {
	padding: 25px;
	padding-top: 37px;
	min-height: 230px;
}

.panel-body {
	padding: 0px 0px;
	color: #FFFFFF;
	line-height: 18px;
	margin-bottom: 20px;
}

.panel-body2 {
	padding: 0px 0px;
	color: #FFFFFF;
	line-height: 18px;
	margin-bottom: 20px;
}

.panel-body3 {
	padding: 0px 0px;
	color: #FFFFFF;
	line-height: 14px;
	margin-bottom: 20px;
	text-shadow: 3px 3px 7px #000;
	font-size: 14px;
}



.login {
	background-color: #fff;
	border: 1px solid #f2e6e9;
	color: #2a292e;
}

.login-block p {
	margin-bottom: 10px;
}

/* GENERAL PANEL STYLING */
.panel-general {
	margin-bottom: 30px;
	background: rgba(10, 20, 35, 0.8);
	border: 1px solid rgba(200, 221, 241, 0.2);
	-moz-border-radius: 6px;
	border-radius: 6px;
	color: #ffffff;
	padding: 20px;
}



.lk-form ul {
	list-style-type: none;
	padding: 15px;
	margin: 0px;
}

.lk-form ul li {
	display: table;
	width: 100%;
	vertical-align: middle;
	line-height: 30px;
}

.lk-form ul li a {
	color: #ffffff !important;
	font-weight: bold;
}

.lk-form ul li a:active,
.panel-usercp ul li a:hover {
	color: #ffffff !important;
}

.lk-form ul li a:hover {
	padding: 0px 10px;
}

.lk-form ul li img {
	position: relative;
	top: -2px;
	padding-right: 10px;
	transition: all 0.3s ease;
}

.lk-form ul li a:hover img {
	filter: drop-shadow(0 0 8px #00ff00) brightness(1.2);
	transform: scale(1.1);
}

.lk-form ul li a:hover {
	text-shadow: 0 0 10px rgba(0, 255, 0, 0.5);
	color: #00ff00 !important;
}

.panel-heading {
	padding: 10px 0px 0px 10px;

}

.page-title {
	color: #ffffff;
	font-size: 32px;
	margin-bottom: 15px;
	font-weight: bold;
	font-family: 'Cinzel', serif;
	text-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
	text-transform: uppercase;
}

.panel-title {
	color: #ffffff;
	font-size: 18px;
	font-weight: 800;
	text-transform: uppercase;
	margin-bottom: 15px;
	font-family: 'Montserrat', sans-serif;
	letter-spacing: 1px;
}

/** **/
/* MY ACCOUNT MODULE */
.myaccount-table {
	width: 100%;
	background: rgba(0, 0, 0, 0.3);
	border: 1px solid rgba(255, 255, 255, 0.1);
}

.myaccount-table tr td:first-child {
	color: #ffffff;
	font-weight: 800;
	text-transform: uppercase;
	font-size: 11px;
}

.myaccount-table tr td {
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	padding: 15px !important;
	color: #c8ddf1;
}

.myaccount-table tr td span,
.myaccount-table tr td b {
	color: #ffcc00;
	font-weight: bold;
}

.myaccount-table tr:last-child td {
	border: 0px;
}

/* NEWS MODULE */
.panel-news {
	margin-bottom: 20px;
	color: #333;
	border: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;
	-moz-box-shadow: 0 0 0px #e3e3e3;
	-webkit-box-shadow: 0 0 0px #e3e3e3;
	box-shadow: 0 0 0px #e3e3e3;
}

.panel-news .panel-heading {
	padding-top: 10px;
	padding-bottom: 10px;
}

.panel-news .panel-title {
	color: #ffffff;
	background: rgba(0, 0, 0, 0);
	font-size: 24px;
	font-weight: bold;
	border-bottom: 1px solid #e7e7e7;
}

.panel-news .panel-body {
	padding: 10px 0px 0px 15px;
}

.panel-news .panel-footer {
	padding: 10px 10px 0px 15px;
	border-top: 1px solid #e7e7e7;
	background: rgba(0, 0, 0, 0.3);
	font-size: 12px;
	font-weight: bold;
	height: 30px;
	color: #ffffff;
}

/* DOWNLOADS */
.panel-downloads {
	margin-bottom: 30px;
	background: rgba(0, 0, 0, 0);
	border: 0px solid #e3e3e3;
	-moz-border-radius: 0px;
	border-radius: 0px;
	color: #ffffff;
}

.download-description {
	font-size: 12px;
	position: relative;
	top: 0px;
	color: #ffffff;
}

.online-status-indicator {
	margin-left: 5px;
}

/* MY ACCOUNT CHARACTER LIST */
.myaccount-character-block {
	background: #333;
	border: 1px solid #666;
	padding: 5px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	display: inline-block;
	margin: 0px auto;
	-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
	-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.myaccount-character-block img {
	width: 100px;
	height: auto;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	-moz-box-shadow: 0 0 5px #000;
	-webkit-box-shadow: 0 0 5px #000;
	box-shadow: 0 0 5px #000;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

.myaccount-character-block img:hover {
	-webkit-filter: brightness(120%);
	filter: brightness(120%);
}

.myaccount-character-block-location {
	font-size: 12px;
	color: #ffffff;
	margin-bottom: 20px;
	margin-top: 2px;
	line-height: 1.2;
}

.myaccount-character-block-level {
	position: relative;
	top: -77px;
	display: inline-block;
	background: rgba(0, 0, 0, 0.5);
	padding: 0px 5px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	color: #fff;
	font-size: 10px;
}

.myaccount-character-name a {
	font-weight: bold;
	color: #ffffff;
	font-size: 16px;
}

/* RANKINGS MODULE */
.page-rankings .rankings-table {
	display: table !important;
	width: 100% !important;
	max-width: 100% !important;
	table-layout: fixed !important;
	/* Force cells to stay within 100% width */
	border-spacing: 0 !important;
	border-collapse: collapse !important;
	margin-left: auto !important;
	margin-right: auto !important;
	text-align: center !important;
	word-wrap: break-word !important;
}

.page-rankings .rankings-table * {
	text-align: center !important;
}

.page-rankings .rankings-class-image {
	width: 24px !important;
	/* Slightly smaller to save space */
	height: auto !important;
	-moz-box-shadow: 0 0 5px #666;
	-webkit-box-shadow: 0 0 5px #666;
	box-shadow: 0 0 5px #666;
	border-radius: 0px !important;
	display: block !important;
	margin: 0 auto !important;
}

.page-rankings .rankings-table tr td,
.page-rankings .rankings-table tr th {
	border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
	padding: 8px 2px !important;
	/* Minimal padding to prevent overflow */
	font-size: 13px !important;
	/* Smaller base font */
	vertical-align: middle !important;
	text-align: center !important;
	color: #fff !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}

/* Specific mobile adjustment to prevent "cutting" */
@media (max-width: 768px) {

	.page-rankings .rankings-table tr td,
	.page-rankings .rankings-table tr th {
		font-size: 10px !important;
		/* Even smaller on mobile */
		padding: 4px 1px !important;
	}

	.page-rankings .rankings-class-image {
		width: 18px !important;
	}
}

@media (max-width: 991px) {

	/* Global reset for mobile active modules to ensure symmetry */
	.module-active .container,
	.module-active .wrapper,
	.module-active .content,
	.page-usercp .container,
	.page-usercp .wrapper,
	.page-usercp .content {
		width: 100% !important;
		max-width: 100vw !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		box-sizing: border-box !important;
		overflow-x: hidden !important;
	}

	.module-active .content,
	.page-usercp .content {
		padding: 5px 10px !important;
		/* Balanced padding for the usable area */
	}

	.module-active .tabs,
	.page-usercp .tabs,
	.user-guide-container {
		margin: 0 !important;
		padding: 5px !important;
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
		background-size: cover !important;
	}

	/* Force bootstrap rows to be symmetric on mobile inside modules */
	.module-active .row,
	.page-usercp .row {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	/* Allow Left Sidebar and User Panel to be visible on mobile, even if a module is active */
	.module-active .left-sidebar {
		display: block !important;
		margin-bottom: 10px !important;
	}

	/* Hide specific non-essential elements inside sidebars for a cleaner mobile view */
	.module-active .kng-side-banners,
	.module-active .top-players-block,
	.module-active .right-sidebar {
		display: none !important;
	}

	.module-active .login-block {
		display: block !important;
		margin-bottom: 20px !important;
	}

	.page-rankings .rankings-table {
		margin: 0 auto !important;
		width: 100% !important;
		padding: 0 !important;
		table-layout: fixed !important;
	}
}

/* Optimized column distribution for Rankings (No blank spaces) */
.page-rankings .rankings-table {
	table-layout: auto !important;
	/* Allow browser to fit content logically */
}

/* Ranking Number # */
.page-rankings .rankings-table .rankings-table-place,
.page-rankings .rankings-table tr th:first-child {
	width: 30px !important;
	white-space: nowrap !important;
}

/* Icon columns containing Flag or Class Images */
.page-rankings .rankings-table td img {
	max-width: 24px !important;
	display: inline-block !important;
	vertical-align: middle !important;
}

/* Ensure image columns are as narrow as the images themselves */
.page-rankings .rankings-table td:has(img) {
	width: 35px !important;
	padding: 8px 2px !important;
}

/* Character Name & Location - Prevent wrapping (saltado) and use ellipsis if too long */
.page-rankings .rankings-table tr td:nth-child(n+3) {
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}

/* Specifically target Name and Location for breathing room */
.page-rankings .rankings-table tr td {
	padding: 8px 5px !important;
	/* More breathing room on desktop */
}

/* Numerical columns (Level/Resets/Grand Resets) */
.page-rankings .rankings-table tr td:nth-last-child(2),
.page-rankings .rankings-table tr th:nth-last-child(2),
.page-rankings .rankings-table tr td:nth-last-child(3),
.page-rankings .rankings-table tr th:nth-last-child(3),
.page-rankings .rankings-table tr td:nth-last-child(4),
.page-rankings .rankings-table tr th:nth-last-child(4) {
	width: 1% !important;
	white-space: nowrap !important;
	font-weight: bold !important;
}

/* Mobile adjustments to keep everything in view without cutting */
@media (max-width: 768px) {
	.page-rankings .rankings-table tr td {
		padding: 6px 2px !important;
		/* Compact padding for small screens */
	}

	.page-rankings .rankings-table tr td,
	.page-rankings .rankings-table tr th {
		font-size: 11px !important;
	}
}

/* Ensure the Name column (usually 4th or 3rd) takes all possible remaining space */
.page-rankings .rankings-table tr td:not(:first-child):not(:last-child) {
	text-align: center;
}

.page-rankings .rankings-table-place {
	color: #ff9d00 !important;
	font-weight: bold !important;
	font-size: 13px !important;
	text-align: center !important;
}

.rankings-table tr:first-child td,
.rankings-table tr:first-child th {
	color: #ff9d00 !important;
	border-bottom: 2px solid #ff9d00 !important;
	text-align: center !important;
	font-weight: bold !important;
	background: rgba(0, 0, 0, 0.2) !important;
}

.rankings-update-time {
	text-align: right;
	font-size: 11px;
	color: #ccc;
	padding: 10px 0px;
}

.rankings_menu {
	width: 100% !important;
	overflow: hidden !important;
	text-align: center !important;
	margin-bottom: 20px !important;
	display: flex !important;
	flex-wrap: nowrap !important;
	/* Forces single row */
	justify-content: center !important;
	gap: 2px !important;
	padding: 0 !important;
	container-type: inline-size !important;
	/* Enables container-based units */
}

.rankings_menu span {
	width: 100%;
	display: inline-block;
	padding: 10px 0px;
	color: #ccc;
	font-size: 24px;
}

.rankings_menu a {
	flex: 1 !important;
	/* Each button takes equal space */
	min-width: 0 !important;
	/* Allow them to shrink to fit */
	height: 36px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	border: 0px !important;
	text-align: center !important;
	padding: 2px !important;
	background: linear-gradient(to top, #6f9cdd, #4b5789) !important;
	border-radius: 4px !important;
	color: #FFFFFF !important;
	text-decoration: none !important;
	font-weight: 700 !important;
	/* Fluid font size: adjusted ~10% smaller to fit perfectly */
	font-size: clamp(6px, 2.3cqw, 10px) !important;
	text-transform: uppercase !important;
	transition: all 0.2s ease !important;
	white-space: nowrap !important;
	box-sizing: border-box !important;
}

.rankings_menu a:hover {
	filter: brightness(1.3) !important;
	box-shadow: 0 0 10px rgba(111, 156, 221, 0.6) !important;
	transform: translateY(-1px) !important;
}

.rankings_menu a.active {
	background: linear-gradient(to top, #b100f6, #6f9cdd) !important;
	box-shadow: 0 0 15px rgba(177, 0, 246, 0.5) !important;
	transform: scale(1.02) !important;
}

.rankings_guild_logo tr td {
	border: 0px !important;
	padding: 0px !important;
	margin: 0px !important;
}

.rankings-gens-img {
	width: auto !important;
	height: 30px !important;
	border: 0 !important;
	-moz-box-shadow: 0 0 0px #000 !important;
	-webkit-box-shadow: 0 0 0px #000 !important;
	box-shadow: 0 0 0px #000 !important;
	-moz-border-radius: 0px !important;
	border-radius: 0px !important;
}

/* Centering the Entire Rankings Layout (Scoped to Rankings Page) */
.page-rankings .page-title {
	width: 100% !important;
	text-align: center !important;
	margin-bottom: 25px !important;
}

.page-rankings .page-title span {
	display: inline-block !important;
	margin: 0 auto !important;
}

.page-rankings .rankings-class-filter {
	text-align: center !important;
	width: 100% !important;
	display: flex !important;
	justify-content: center !important;
	gap: 15px !important;
	padding: 20px 0 !important;
}

.page-rankings .rankings-class-filter-selection {
	display: block !important;
	text-align: center !important;
}