*=========================================================
 * WebEngine CMS
 * @version V1.0
 * @copyright (c) 2024-2030 OBBY EMU, All Rights Reserved
*=========================================================
**/
:root {
  --amethyst-glow: #9b5de5;
}

/* Estilos base y configuración de fuentes */
html,
body {
	height: 100%;
	margin: 0;
	padding: 0;
}

html {
	min-width: 320px;
	height: 100%;
}

body {
	background: #060517 url('../img/background.jpg') no-repeat center -0px;
	background-size: cover;
	background-attachment: fixed;
	font-family: 'Roboto', sans-serif;
	font-weight: 500;
	font-size: 14px;
	color: #fff;
}


/* Enlaces */
a {
	color: var(--ColorTemplate);
	text-decoration: none;
	transition: all .2s ease-in;
}

a:hover {
	color: #ffda8a;
}


/* Imágenes */


/* Inputs */
input[type="text"],
input[type="password"],
input[type="number"] {
	background: #fafafa;
	border: 1px solid #e3e3e3;
	color: #666;
	padding: 8px;
	border-radius: 4px;
	width: 100%;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="number"]:focus {
	border-color: #ccc;
}


/* Encabezado */
#header {
	width: 100%;
	margin: 0 auto;
	padding: 50px 0 30px;
	text-align: center;
}


/* Logo del sitio */
#header-logo,
.webengine-mu-logo {
	width: 100%;
	max-width: 500px;
	margin: 0 auto;
	padding: 40px 0 20px;
}

.webengine-mu-logo {
	transition: all .3s ease;
}

.webengine-mu-logo:hover {
	filter: brightness(150%);
}
#content {
	width: 100%;
	overflow: auto;
	min-height: 500px;
	padding: 20px;
}


/* Estilos del Logo */
.webengine-mu-logo {
	transition: all .3s ease;
}

.webengine-mu-logo:hover {
	filter: brightness(150%);
}

.webengine-powered {
	color: red;
	text-transform: uppercase;
}

#header-logo {
	width: 100%;
	margin: 0 auto;
	padding: 60px 0 30px;
	text-align: center;
}

.webengine-mu-logo {
	width: 100%;
	max-width: 500px;
	height: auto;
}
#container {
	background: rgba(255, 255, 255, 0.1); /* semitransparente */
	backdrop-filter: blur(10px);
	width: 90%;
	max-width: 1140px;
	height: auto;
	margin: 0 auto;
	padding: 20px 15px;
	border-radius: 20px;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
	border: 1px solid rgba(255, 255, 255, 0.1);
}

#content {
	width: 100%;
	overflow: auto;
	min-height: 500px;
	padding: 20px;
	background-color: transparent;
	color: #fff;
	border-radius: 15px;
}


/* Barra Superior Global */
.global-top-bar {
	width: 100%;
	background: #101010;
	color: #777777;
	padding: 7px 0 2px;
	text-transform: uppercase;
	font-size: 12px;
}

.global-top-bar .global-top-bar-content {
	width: 90%;
	max-width: 1140px;
	margin: 0 auto;
}

.global-top-bar .global-top-bar-content .row {
	margin: 0;
	padding: 0;
}

.global-top-bar a.logout {
	color: red;
}

.global-top-bar a {
	color: #999999 !important;
}

.global-top-bar a:hover {
	color: #ffffff !important;
}

.global-top-bar-nopadding {
	padding: 0 !important;
}

.global-top-bar-separator {
	padding: 0 5px;
}


/* Selector de Idioma */
.webengine-language-switcher {
	display: inline-block;
	list-style: none;
	padding: 0 !important;
	margin: 0 !important;
	width: 46px;
	height: 19px;
	overflow: hidden;
	transition: all .3s ease;
}

.webengine-language-switcher:hover {
	width: 300px;
}

.webengine-language-switcher li {
	display: inline-block;
	list-style-type: none;
	background: #333333;
	padding: 2px 5px;
	border-radius: 3px;
	transition: all .3s ease;
}

.webengine-language-switcher li:hover {
	filter: brightness(120%);
}

.webengine-language-switcher li a {
	color: #999999;
}

.webengine-language-switcher li a:hover {
	color: #ffffff !important;
}


/* Información del Encabezado */
.header-info-container {
	width: 90%;
	max-width: 1140px;
	margin: 0 auto;
	text-align: right;
}

.header-info-container .header-info {
	display: inline-block;
	width: 100%;
	background: rgba(0, 0, 0, 0.3);
	backdrop-filter: blur(5px);
	padding: 20px;
	overflow: auto;
	box-shadow: 0 0 15px rgba(0, 0, 0, 0.7);
	border-radius: 5px;
	text-shadow: 1px 1px 3px #e61515;
	color: #ffffff;
	border: 1px solid rgba(255, 255, 255, 0.1);
	font-size: 12px;
}

.header-info-container .header-info .header-info-block {
	padding: 0;
	color: #e61515;
}

.header-info-container .header-info .header-info-block #tServerTime,
.header-info-container .header-info .header-info-block #tLocalTime {
	color: #ffffff;
}

.header-info-container .header-info .header-info-block #tServerDate,
.header-info-container .header-info .header-info-block #tLocalDate {
	color: #cccccc;
}

.header-info-container .header-info .header-info-block .online-count {
	color: #00ff00;
}

.header-info ul {
	text-align: center;
	margin: 0;
	padding: 0;
}

.header-info ul li {
	list-style-type: none;
	display: inline-block;
	font-size: 16px;
}

.header-info ul li a {
	display: inline-block;
	color: #fff;
	text-decoration: none;
	padding: 1px 20px;

	transition: all .3s ease;
	text-transform: uppercase;
}


/* Botón de Administración */
.admincp-button {
	position: absolute;
	top: 5px;
	right: 1px;
	font-size: 10px;
	background: var(--ColorTemplate) !important;
	border: 1px solid #000000 !important;
	color: var(--bs-light) !important;
	font-weight: bold !important;
}


/* NEWS MODULE */
.panel-news {
	margin-bottom: 30px;
	color: #e61515;
	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: 0.5rem 1rem;
	background-color: var(--ColorTemplate);
	border: 1px solid rgba(0, 0, 0, .125);
	border-radius: 0.25rem;
	border-bottom-left-radius: unset;
	border-bottom-right-radius: unset;
}

.panel-news .panel-heading a {
	color: #f1f1f1;
}

.panel-news .panel-heading a:hover {
	color: #f1f1f1cc;
}

.panel-news .panel-title {
	color: #e61515;
	font-size: 17px;
	font-weight: bold;
	padding-top: 5px;
}

.panel-news .panel-body {
	padding: 1rem 1rem;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, .125);
	border-radius: 0.25rem;
	border-top-left-radius: unset;
	border-top-right-radius: unset;
}

.panel-news .panel-footer {
	background: #f7f7f7;
	padding: 1rem 1rem;
	font-style: italic;
	font-size: 16px;
	color: #212529;
	border: 1px solid rgba(0, 0, 0, .125);
	border-top: 3px solid var(--ColorTemplate);
	border-radius: 0.25rem;
	border-top-left-radius: unset;
	border-top-right-radius: unset;
}


/* RANKINGS MODULE */
.rankings-table {
	width: 100%;
	border-spacing: 0;
	border-collapse: collapse;
	padding: 1rem;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, .125);
	border-radius: 0.25rem;
}

.rankings-class-image-sidebar,
.rankings-class-image {
	width: 100%;
	height: auto;
	max-width: 40px;
	-moz-box-shadow: 0 0 5px #666;
	-webkit-box-shadow: 0 0 5px #666;
	box-shadow: 0 0 5px #666;
	border-radius: 0px;
}

.rankings-table tr td {
	border-bottom: 1px solid #e3e3e3;
	padding: 10px;
	font-size: 18px;
	vertical-align: middle !important;
	text-align: center;
}

.rankings-table-place {
	color: var(--ColorTemplate);
	font-weight: bold;
	text-align: center;
}

.default-char-offline {
	border: 3px solid #D0D0D0;
	vertical-align: middle;
}

.default-char-online {
	border: 3px solid #a5d72c;
	vertical-align: middle;
}

.page-item.active .page-link {
	z-index: 3;
	color: var(--bs-light) !important;
	background-color: var(--ColorTemplate);
	border-color: var(--ColorTemplate);
}

.rankings-table tr:first-child td {
	color: var(--bs-light);
	border-bottom: 3px solid var(--ColorTemplate);
	background: var(--ColorTemplate);
}

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

.rankings_menu {
	width: 100%;
	overflow: auto;
	text-align: center;
	margin-bottom: 10px;
}

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

.rankings_menu a {
	display: inline-block;
	width: 160px;
	border: 1px solid var(--ColorTemplate);
	border-left: 7px solid var(--ColorTemplate);
	text-align: center;
	padding: 2px 0px;
	margin: 2px;
	border-radius: 2px;
	color: var(--ColorTemplate);
	background: linear-gradient(to left, transparent 50%, var(--ColorTemplate) 50%);
	background-size: 200%;
	background-position: right;
	transition: background-position 0.5s;
}

.rankings_menu a.active {
	color: #f1f1f1;
	border: 1px solid var(--ColorTemplate);
	border-left: 7px solid var(--ColorTemplate);
	background: var(--ColorTemplate);
}

.rankings_menu a:hover {
	color: red;
	text-decoration: none !important;
	background-position: left;
}

.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;
	box-shadow: 0 0 0px #000 !important;
	border-radius: 0px !important;
}


/* MY ACCOUNT MODULE */
.myaccount-table {
	width: 100%;
	background: #f1f1f1;
	border: 1px solid #e3e3e3;
}

.myaccount-table tr td:first-child {
	color: #666;
	font-weight: bold;
}

.myaccount-table tr td {
	border-bottom: 1px solid #e3e3e3;
	padding: 15px !important;
}

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


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

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

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

.myaccount-character-block-location {
	font-size: 12px;
	color: #000;
	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;
	border-radius: 3px;
	color: #fff;
	font-size: 10px;
}

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

.img-fluid {
	position: relative;
	width: 100px;
	height: auto;
}


/* GENERAL TABLE UI */
.general-table-ui {
	width: 100%;
	table-layout: fixed;
	background: #f1f1f1;
	border: 1px solid #e61515;
	padding: 10px;
	margin: 10px 0px;
}

.general-table-ui tr td {
	padding: 5px;
	vertical-align: middle;
	text-align: center;
}

.general-table-ui tr:first-child td {
	color: red;
}

.general-table-ui tr:nth-child(2n+2) td {
	background: #fafafa;
}

.general-table-ui img {
	width: 50px;
	height: auto;
	box-shadow: 0 0 5px #666;
	border-radius: 0px;
}


/* TERMS OF SERVICE PAGE */
.tos_list li {
	color: red;
	font-weight: bold;
	font-size: 18px;
	margin-bottom: 40px;
}

.tos_list li p {
	color: #444;
	text-align: justify;
	text-justify: inter-word;
	text-transform: none;
	padding-right: 35px;
	font-size: 14px;
	font-weight: normal;
}


/* PAYPAL */
.paypal-gateway-container {
	width: 100%;
}

.paypal-gateway-content {
	background: #fef2da;
	border: 3px solid #565656;
	padding: 15px;
	overflow: auto;
	border-radius: 5px;
	font-weight: bold;
}

.paypal-gateway-logo {
	width: 100%;
	height: 100px;
	background: #fff9ec url('../img/paypal-logo-200-68.png') no-repeat center;
	background-size: contain;
	margin-bottom: 15px;
	border-radius: 5px;
}

.paypal-gateway-conversion-rate {
	margin: 0px auto;
	text-align: center;
	color: #000;
	font-size: 18px;
	padding: 10px 0px;
}

.paypal-gateway-form {
	width: 100%;
	margin: 20px auto;
	text-align: center;
}

.paypal-gateway-form div {
	display: inline-block;
	padding: 0px 10px;
	color: #000;
	font-size: 24px;
}

.paypal-gateway-form input[type=text] {
	width: 60px;
	font-size: 24px;
	border: 3px solid #f79433;
	border-radius: 5px;
	color: #f79433;
}

.paypal-gateway-continue {
	margin: 0px auto;
	text-align: center;
}

.paypal-gateway-continue input[type=submit] {
	background: url('../img/paypal-submit.jpg') no-repeat;
	width: 200px;
	height: 40px;
	border: 0px;
}

.module-requirements {
	font-size: 12px;
	margin-top: 20px;
}


/* SIDEBAR */
.panel-usercp ul {
	list-style-type: none;
	padding: 0px;
	margin: 0px;
}

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

.panel-usercp ul li a {
	color: red;
	font-weight: bold;
}

.panel-usercp ul li a:active,
.panel-usercp ul li a:hover {
	color: red;
}

.panel-usercp ul li img {
	position: relative;
	top: -2px;
	padding-right: 10px;
}

.sidebar-banner {
	margin: 20px 0px;
	border: 0px;
}

.sidebar-banner img {
	box-shadow: 0 0 10px #e3e3e3;
	border: 2px solid red;
	border-left: 7px solid red;
	border-radius: 5px;
}


/* GENERAL PANEL STYLING */
.panel-general {
	margin-bottom: 30px;
	background: #f1f1f1;
	border: 1px solid #e3e3e3;
	border-radius: 0px;
	color: #e61515;
}

.panel-body {
	padding: 10px;
}

.panel-body .panel-title {
	color: #666;
	font-family: 'Roboto', sans-serif;
	font-size: 14px;
	border-bottom: 1px solid #e3e3e3;
	margin-bottom: 20px;
	font-weight: 500;
}


/* ADD STATS MODULE */
.panel-addstats {
	margin-bottom: 30px;
	background: #f1f1f1;
	border: 1px solid #e3e3e3;
	border-radius: 0px;
	color: #333;
}

.panel-addstats .character-avatar img {
	width: 100px;
	height: auto;
	box-shadow: 0 0 5px #666;
	border-radius: 0px;
}

.panel-addstats .character-name {
	color: #666;
	font-family: 'Roboto', sans-serif;
	font-size: 18px;
	border-bottom: 1px solid #e3e3e3;
	padding: 20px 0px;
	margin-bottom: 20px;
	font-weight: 500;
}


/* DOWNLOADS */
.panel-downloads {
	margin-bottom: 30px;
	background: #f1f1f1;
	border: 1px solid #e3e3e3;
	border-radius: 0px;
	color: #333;
}

.download-description {
	font-size: 11px;
	position: relative;
	top: -7px;
	color: #777;
}

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


/* GLOBAL TOP BAR */
.global-top-bar {
	width: 100%;
	background: #101010;
	color: #777777;
	padding: 7px 0px 2px 0px;
	text-transform: uppercase;
	font-size: 12px;
}

.global-top-bar .global-top-bar-content {
	width: 1140px;
	margin: 0px auto;
}

.global-top-bar .global-top-bar-content .row {
	margin: 0px;
	padding: 0px;
}

.global-top-bar a.logout {
	color: red;
}

.global-top-bar a {
	color: #ff3826;
}

.global-top-bar a:hover {
	color: #ff3826;
}

.global-top-bar-nopadding {
	padding: 0px !important;
}

.global-top-bar-separator {
	padding: 0px 5px;
}


/* LANGUAGE PICKER */
.webengine-language-switcher {
	display: inline-block;
	list-style: none;
	padding: 0px !important;
	margin: 0px !important;
	width: 46px;
	height: 19px;
	overflow: hidden;
	transition: all .3s ease;
}

.webengine-language-switcher:hover {
	width: 400px;
}

.webengine-language-switcher li {
	display: inline-block;
	list-style-type: none;
	background: #333333;
	padding: 0px 5px 2px 5px;
	border-radius: 3px;
	transition: all .3s ease;
}

.webengine-language-switcher li:hover {
	filter: brightness(120%);
}

.webengine-language-switcher li a {
	color: #999999;
}

.webengine-language-switcher li a:hover {
	color: #ff3826;
}


/* HEADER INFO */
.header-info-container {
	width: 1140px;
	margin: 0px auto;
	text-align: right;
}

.header-info-container .header-info {
	display: inline-block;
	width: 100%;
	background: rgba(0, 0, 0, 0.3);
	backdrop-filter: blur(5px);
	margin: 0px;
	padding: 20px;
	overflow: auto;
	box-shadow: 0 0 15px rgba(0, 0, 0, 0.7);
	border-radius: 5px;
	text-shadow: 1px 1px 3px #ff3826;
	color: #ff3826;
	border: 1px solid rgba(255, 255, 255, 0.1);
	font-size: 12px;
}

.header-info-container .header-info .header-info-block {
	padding: 0px;
	color: #aaaaaa;
}

.header-info-container .header-info .header-info-block #tServerTime,
.header-info-container .header-info .header-info-block #tLocalTime {
	color: #ff3826;
}

.header-info-container .header-info .header-info-block #tServerDate,
.header-info-container .header-info .header-info-block #tLocalDate {
	color: #cccccc;
}

.header-info-container .header-info .header-info-block .online-count {
	color: #00ff00;
}

.header-info ul {
	text-align: center;
	margin: 0px;
	-webkit-padding-start: 0px;
}

.header-info ul li {
	list-style-type: none;
	display: inline-block;
	font-size: 16px;
}

.header-info ul li a {
	display: inline-block;
	color: #ff3826;
	text-decoration: none;
	padding: 1px 30px;
	transition: all .3s ease;
	text-transform: uppercase;
}


/* ONLINE BAR */
.webengine-online-bar {
	width: 100%;
	background: #000000;
	border: 1px solid #ff3826;
	height: 8px;
	margin-top: 10px;
	margin-bottom: 10px;
	padding: 0px;
	border-radius: 4px;
	overflow: hidden;
	transition: all .3s ease;
}

.webengine-online-bar .webengine-online-bar-progress {
	height: 8px;
	background: #00ff00 url('../img/online_progress_bar.jpg') no-repeat left center;
	border-radius: 0px 1px 1px 0px;
}

.webengine-online-bar:hover {
	filter: brightness(120%);
}


/* Rankings */
.rankings-class-filter {
	display: inline-block;
	list-style-type: none;
	margin: 20px auto;
	padding: 10px 20px;
	border-radius: 10px;
}

.rankings-class-filter li {
	display: inline-block;
	transition: all 0.3s ease;
	margin-bottom: 10px;
}

.rankings-class-filter-selection {
	display: inline-block;
	text-align: center;
	color: #000000;
	font-size: 11px;
	cursor: pointer;
}

.rankings-class-filter-selection:hover {
	color: #ff3826;
}

.rankings-class-filter-selection:hover img {
	filter: brightness(120%);
}

.rankings-class-filter-selection img {
	width: 80px;
	height: auto;
	border-radius: 5%;
	margin-bottom: 5px;
	transition: all 0.3s ease;
	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.45);
}


/* Colores Market Char */
.RazaSM {
	background-color: rgba(47, 125, 204, 0.1);
	border: 1px solid #2f7dcc;
}

.RazaDK {
	background-color: rgba(204, 47, 47, 0.1);
	border: 1px solid #cc2f2f;
}

.RazaELF {
	background-color: rgba(51, 204, 47, 0.1);
	border: 1px solid #33cc2f;
}

.RazaMG {
	background-color: rgba(113, 47, 204, 0.1);
	border: 1px solid #712fcc;
}

.RazaDL {
	background-color: rgba(204, 158, 47, 0.1);
	border: 1px solid #cc9e2f;
}

.RazaSUM {
	background-color: rgba(191, 47, 204, 0.1);
	border: 1px solid #bf2fcc;
}

.RazaRF {
	background-color: rgba(204, 84, 47, 0.1);
	border: 1px solid #cc542f;
}

.BtnSM {
	background-color: #2f7dcc;
	color: #f1f1f1;
	border: 1px solid #2f7dcc;
}

.BtnSM:hover {
	background-color: rgba(47, 125, 204, 0.1);
	color: #2f7dcc;
	border: 1px solid #2f7dcc;
}

.BtnDK {
	background-color: #cc2f2f;
	color: #f1f1f1;
	border: 1px solid #cc2f2f;
}

.BtnDK:hover {
	background-color: rgba(204, 47, 47, 0.1);
	color: #cc2f2f;
	border: 1px solid #cc2f2f;
}

.BtnELF {
	background-color: #33cc2f;
	color: #f1f1f1;
	border: 1px solid #33cc2f;
}

.BtnELF:hover {
	background-color: rgba(51, 204, 47, 0.1);
	color: #33cc2f;
	border: 1px solid #33cc2f;
}

.BtnMG {
	background-color: #712fcc;
	color: #f1f1f1;
	border: 1px solid #712fcc;
}

.BtnMG:hover {
	background-color: rgba(113, 47, 204, 0.1);
	color: #712fcc;
	border: 1px solid #712fcc;
}

.BtnDL {
	background-color: #cc9e2f;
	color: #f1f1f1;
	border: 1px solid #cc9e2f;
}

.BtnDL:hover {
	background-color: rgba(204, 158, 47, 0.1);
	color: #cc9e2f;
	border: 1px solid #cc9e2f;
}

.BtnSUM {
	background-color: #bf2fcc;
	color: #f1f1f1;
	border: 1px solid #bf2fcc;
}

.BtnSUM:hover {
	background-color: rgba(191, 47, 204, 0.1);
	color: #bf2fcc;
	border: 1px solid #bf2fcc;
}

.BtnRF {
	background-color: #cc542f;
	color: #f1f1f1;
	border: 1px solid #cc542f;
}

.BtnRF:hover {
	background-color: rgba(204, 84, 47, 0.1);
	color: #cc542f;
	border: 1px solid #cc542f;
}


/* TABLES DATA */
div.dataTables_wrapper div.dataTables_filter label {
	display: block;
}

div.dataTables_wrapper div.dataTables_filter input {
	width: 100%;
	margin: 0;
}

div.dataTables_wrapper div.dataTables_paginate ul.pagination .page-link {
	color: var(--ColorTemplate) !important;
}

div.dataTables_wrapper div.dataTables_paginate ul.pagination .page-item.active .page-link {
	color: var(--bs-light) !important;
}

/* FACEBOOK SLIDE LIKE BOXES */
#FBSlideLikeBox_left,
#FBSlideLikeBox_right {
	background: url(../img/iconds.png) no-repeat;
	height: 42px;
	position: fixed;
	top: 15%;
	z-index: 2000;
	transition: all 0.3s ease;
}

/* Left Slide */
#FBSlideLikeBox_left {
	left: -365px;
	padding-right: 63px;
	width: 428px;
}

#FBSlideLikeBox_left #FBSlideLikeBox3_left {
	height: 690px;
	position: absolute;
	border: 3px solid #597bca;
	width: 400px;
	background: #f8f8f8;
}

#FBSlideLikeBox_left #FBSlideLikeBox2_left {
	position: relative;
	clear: both;
	width: auto;
}


/* Right Slide */
#FBSlideLikeBox_right {
	right: -400px;
	padding-left: 42px;
	width: 400px;
}

#FBSlideLikeBox_right #FBSlideLikeBox3_right {
	height: 690px;
	position: absolute;
	border: 3px solid #3B5998;
	width: 400px;
	background: #f8f8f8;
}


/* Estilos btn */
.btn-primary {
	color: #fff;
	background-color: var(--ColorTemplate);
	border-color: var(--ColorTemplate);
	padding: 10px 20px;
}

.btn-primary:hover {
	color: #fff;
	background-color: var(--ColorTemplate);
	border-color: var(--ColorTemplate);
}

.btn-check:focus+.btn-primary,
.btn-primary:focus {
	color: #fff;
	background-color: black;
	border-color: red;
	box-shadow: 0 0 0 0.25rem var(--ColorTemplateAlpha);
}

.btn-check:checked+.btn-primary,
.btn-check:active+.btn-primary,
.btn-primary:active,
.btn-primary.active,
.show>.btn-primary.dropdown-toggle {
	color: #fff;
	background-color: var(--ColorTemplate);
	border-color: var(--ColorTemplate);
}

.btn-check:checked+.btn-primary:focus,
.btn-check:active+.btn-primary:focus,
.btn-primary:active:focus,
.btn-primary.active:focus,
.show>.btn-primary.dropdown-toggle:focus {
	box-shadow: 0 0 0 0.25rem var(--ColorTemplateAlpha);
}

.btn-primary:disabled,
.btn-primary.disabled {
	color: #fff;
	background-color: var(--ColorTemplate);
	border-color: var(--ColorTemplate);
}

.btn-outline-primary {
	color: var(--ColorTemplate);
	border-color: var(--ColorTemplate);
	padding: 10px 20px;
}

.btn-outline-primary:hover {
	color: #fff;
	background-color: var(--ColorTemplate);
	border-color: var(--ColorTemplate);
}

.btn-check:focus+.btn-outline-primary,
.btn-outline-primary:focus {
	box-shadow: 0 0 0 0.25rem var(--ColorTemplateAlpha);
}

.btn-check:checked+.btn-outline-primary,
.btn-check:active+.btn-outline-primary,
.btn-outline-primary:active,
.btn-outline-primary.active,
.btn-outline-primary.dropdown-toggle.show {
	color: #fff;
	background-color: var(--ColorTemplate);
	border-color: var(--ColorTemplate);
}

.btn-check:checked+.btn-outline-primary:focus,
.btn-check:active+.btn-outline-primary:focus,
.btn-outline-primary:active:focus,
.btn-outline-primary.active:focus,
.btn-outline-primary.dropdown-toggle.show:focus {
	box-shadow: 0 0 0 0.25rem var(--ColorTemplateAlpha);
}

.btn-outline-primary:disabled,
.btn-outline-primary.disabled {
	color: var(--ColorTemplate);
	background-color: transparent;
}

/* WEBSITE LOGO */
.webengine-mu-logo {
	transition: all .3s ease;
	max-width: 100%;
	height: auto;
}

.webengine-mu-logo:hover {
	-webkit-filter: brightness(160%);
	filter: brightness(160%);
}


/* WEBENGINE CMS */
.webengine-powered {
	color: var(--ColorTemplate) !important;
	text-transform: uppercase;
}

.webengine-powered:active,
.webengine-powered:hover {
	color: var(--ColorTemplate) !important;
}

.castle-siege-buttons a {
	color: unset !important;
}

.banners-sidebar img {
	border: 1px solid var(--ColorTemplate);
	max-width: 100%;
	height: auto;
}

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

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

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

.table-guild {
	color: #f1f1f1;
}

.card {
	border-radius: 15px;
	box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
	overflow: hidden;
	border: none;
	width: 100%;
}

.card-header {
	padding: 15px;
	font-weight: bold;
	display: flex;
	align-items: center;
}

.card-header i {
	margin-right: 10px;
}

.card-body {
	padding: 20px;
}

.input-group-text {
	background-color: #f0f0f0;
	border: none;
	color: #6c757d;
}

.form-control {
	border: none;
	box-shadow: none;
	border-radius: 0;
}

.btn-outline-primary {
	border-radius: 20px;
	transition: all 0.3s ease;
}

.sidebar-banner img {
	max-width: 100%;
	border-radius: 15px;
	box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
	transition: transform 0.3s ease;
}

.sidebar-banner img:hover {
	transform: scale(1.05);
}

.panel-usercp .btn-primary {
	border-radius: 20px;
	transition: all 0.3s ease;
}


/* Estilo del status del servidor Online y Offline */
.custom-card {
	background-color: #f8f9fa;
	border: 1px solid #ddd;
	border-radius: 10px;
	padding: 10px;
	max-width: 500px;
	margin: -2px auto 20px auto;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	width: 100%;
}

.server-status-header {
	padding: 10px;
	border-radius: 8px;
	text-align: center;
	font-weight: bold;
	color: #fff;
	margin-bottom: 15px;
}

.server-status-header.online {
	background-color: #28a745;
	box-shadow: 0 2px 8px rgba(40, 167, 69, 0.5);
}

.server-status-header.offline {
	background-color: #dc3545;
	box-shadow: 0 2px 8px rgba(220, 53, 69, 0.5);
}

.custom-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0 10px;
}

.custom-table td {
	padding: 10px;
	vertical-align: middle;
}

.text-success {
	color: #fff;
}

.text-danger {
	color: #dc3545 !important;
}

.icon-cell {
	width: 1%;
	text-align: center;
}


/* Server Informacion */
.server-info-container {
	background-color: #f8f9fa;
	border-radius: 10px;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
	margin: 20px auto;
	width: 100%;
	max-width: 500px;
}

.server-info-header {
	background-color: var(--ColorTemplate);
	color: #fff;
	padding: 15px;
	font-weight: bold;
	text-align: center;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}

.server-info-content {
	display: flex;
	flex-wrap: wrap;
	padding: 10px;
	gap: 10px;
}

.info-box {
	background-color: #ffffff;
	border: 1px solid var(--ColorTemplate);
	border-radius: 8px;
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
	width: calc(50% - 5px);
	padding: 15px;
	position: relative;
	text-align: center;
}

.info-value {
	font-size: 1.4em;
	font-weight: bold;
	color: #fff;
}

.info-text {
	margin-top: 5px;
	font-weight: bold;
	color: #fff;
}

.ranking-cards {
	display: flex;
	justify-content: space-between;
	gap: 30px;
	margin-top: 30px;
	flex-wrap: wrap;
}

.ranking-card {
	background-color: #ffffff;
	border-radius: 10px;
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
	overflow: hidden;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	padding: 15px;
	flex: 1;
	min-width: 250px;
	max-width: 350px;
	margin-bottom: 20px;
}

.ranking-card:hover {
	transform: translateY(-10px);
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
}

.ranking-card-header {
	color: #fff;
	font-size: 18px;
	font-weight: 100;
	padding: 12px 15px;
	border-radius: 10px;
	margin-bottom: 15px;
	text-align: center;
}

.table-striped {
	width: 100%;
	margin-top: 10px;
	border-collapse: collapse;
}

.table-striped tbody tr:nth-child(odd) {
	background-color: #f2f2f2;
}

.table-striped tbody tr:nth-child(even) {
	background-color: #ffffff;
}

.table th,
.table td {
	text-align: center;
	padding: 10px;
	font-size: 14px;
	border-bottom: 1px solid #ddd;
}

.table th {
	color: #fff;
	font-weight: bold;
}

.btn {
	font-size: 14px;
	padding: 8px 16px;
	border-radius: 25px;
	transition: background-color 0.3s ease;
}

.server-statistics-container {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: space-between;
}

.stat-box {
	background-color: #f3f3f3;
	border: 1px solid #ddd;
	border-radius: 8px;
	padding: 20px;
	width: 45%;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	transition: transform 0.3s ease-in-out;
	color: var(--ColorTemplate);
}

.stat-box h3 {
	color: #333;
	font-size: 20px;
	margin-bottom: 10px;
	text-align: center;
	font-weight: 600;
	color: var(--ColorTemplate);
}

.stat-box p {
	color: #555;
	font-size: 16px;
	text-align: center;
}

.stat-box:hover {
	transform: translateY(-5px);
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}


/* Estilos generales del body */
body {
	font-family: 'Helvetica', sans-serif;
	background-color: #f4f7fa;
	color: #fff;
}


/* Encabezado */
.new-chaos-header {
	color: #003366;
	font-size: 2rem;
	text-align: center;
	margin-bottom: 25px;
}


/* Estilos de la tabla */
.new-chaos-table {
	width: 100%;
	margin: 20px 0;
	border-collapse: collapse;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.new-chaos-table th,
.new-chaos-table td {
	padding: 14px 18px;
	text-align: center;
	border: 1px solid #bbb;
}

.new-chaos-table th {
	background-color: #003366;
	color: #ffffff;
	font-size: 1.15rem;
	font-weight: bold;
}

.new-chaos-table tbody tr:nth-child(even) {
	background-color: #f9f9f9;
}

.new-chaos-table tbody tr:nth-child(odd) {
	background-color: #ffffff;
}

.new-chaos-table tbody tr:hover {
	background-color: #d9f2f5;
}

.new-chaos-table td:first-child {
	font-weight: bold;
	background-color: #f4f4f4;
	color: #006699;
}

.new-chaos-table .new-chaos-rate {
	font-size: 1rem;
	font-weight: normal;
	color: #28a745;
}


/* FOOTER CUSTOM */
.footer-wrapper {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 8vh;
	flex-wrap: wrap;
	padding: 10px;
}

.footer-badge {
	background-color: #484848;
	padding: 5px 15px;
	border-radius: 8px;
	text-align: center;
	color: #fff;
}


/* TIME */
.time-row {
    display: flex;
    align-items: center;  
    justify-content: center; 
    gap: 60px; 
    width: 100%; 
    position: relative;
    top: -20px; 
    font-family: 'Roboto Mono', monospace;
}

.time-container {
    display: flex;
    align-items: center;
}

.time-label {
    font-weight: bold;
    margin-right: 5px; 
    font-family: 'Roboto Mono', monospace;
}

.time-value {
    font-weight: normal;
    color: var(--ColorTemplate);
    font-family: 'Roboto Mono', monospace; 
}


/* REDES SOCIALES */
.social-icons {
    position: fixed;
    left: 20px;
    top: 50%; 
    transform: translateY(-50%); 
    z-index: 999;
}

.social-icon {
    display: block;
    margin: 10px 0; 
    font-size: 30px;
    color: #fff; 
}

.social-icon.facebook {
    color: #3b5998; 
}

.social-icon.whatsapp {
    color: #25d366; 
}

.social-icon.youtube {
    color: #ff0000; 
}

.social-icon.discord {
    color: #284bca; 
}







@media (max-width: 1200px) {
	.footer-wrapper {
		height: 10vh;
		/* Aumentamos la altura para pantallas más grandes */
	}

	.footer-badge {
		font-size: 1rem;
	}
}

@media (max-width: 768px) {
	.footer-wrapper {
		height: 12vh;
	}

	.footer-badge {
		font-size: 1.2rem;
		padding: 8px 20px;
	}

	.time-row {
        flex-direction: column;  
        gap: 20px;  
        top: 0;  
    }

    .time-container {
        justify-content: center;
    }

	.social-icons {
        left: 10px;  
        bottom: 20px;  
        top: auto;
    }
}

@media (max-width: 576px) {
	.footer-wrapper {
		height: 15vh;
		padding: 20px 10px;

		.footer-badge {
			font-size: 1.5rem;
			padding: 10px 25px;
		}
	}


	@media (max-width: 1200px) {
		.stat-box {
			width: 48%;
		}
	}


	@media (max-width: 768px) {
		.stat-box {
			width: 100%;
			margin-bottom: 20px;
		}

		.new-chaos-table th,
		.new-chaos-table td {
			padding: 12px;
			font-size: 0.9rem;
		}

		.new-chaos-table th {
			font-size: 1rem;
		}

		.new-chaos-header {
			font-size: 1.5rem;
		}
	}

	@media (max-width: 576px) {
		.stat-box {
			width: 100%;
			margin-bottom: 15px;
			padding: 15px;
		}

		.new-chaos-table th,
		.new-chaos-table td {
			padding: 10px;
			font-size: 0.85rem;
		}

		.new-chaos-header {
			font-size: 1.2rem;
		}
	}

	@media (max-width: 1200px) {
		.ranking-card {
			max-width: 400px;
		}

		.ranking-cards {
			gap: 20px;
		}
	}


	@media (max-width: 768px) {
		.ranking-cards {
			justify-content: center;
		}

		.ranking-card {
			max-width: 300px;
		}

		.table th,
		.table td {
			font-size: 12px;
		}

		.btn {
			font-size: 12px;
			padding: 6px 12px;
		}
	}


	@media (max-width: 576px) {
		.ranking-cards {
			gap: 15px;
		}

		.ranking-card {
			width: 100%;
			margin-bottom: 15px;
		}

		.ranking-card-header {
			font-size: 16px;
			padding: 10px 12px;
		}

		.table th,
		.table td {
			font-size: 12px;
			padding: 8px;
		}

		.btn {
			font-size: 12px;
			padding: 6px 12px;
		}
	}

	@media (max-width: 1200px) {
		.custom-card {
			max-width: 450px;
		}

		.server-info-container {
			max-width: 450px;
		}
	}

	@media (max-width: 768px) {
		.custom-card {
			max-width: 100%;
			padding: 20px;
		}

		.server-info-container {
			max-width: 100%;
			padding: 20px;
		}

		.server-info-content {
			flex-direction: column;
		}

		.info-box {
			width: 100%;
		}
	}

	@media (max-width: 576px) {
		.custom-card {
			max-width: 100%;
			padding: 15px;
		}

		.server-info-header {
			padding: 12px;
		}

		.info-value {
			font-size: 1.2em;
		}

		.info-text {
			font-size: 0.9em;
		}
	}

	@media (max-width: 1200px) {
		.card {
			width: 48%;
			margin-bottom: 20px;
		}

		.sidebar-banner img {
			max-width: 90%;
		}
	}

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

		.webengine-mu-logo {
			max-width: 80%;
		}

		.sidebar-banner img {
			max-width: 100%;
		}
	}


	@media (max-width: 576px) {
		.webengine-mu-logo {
			max-width: 60%;
		}

		.card-header {
			font-size: 14px;
		}

		.card-body {
			padding: 15px;
		}

		.sidebar-banner img {
			max-width: 100%;
		}

		.panel-usercp .btn-primary {
			font-size: 14px;
		}
	}


	@media (max-width: 1200px) {

		.btn-primary,
		.btn-outline-primary {
			padding: 8px 16px;
		}
	}

	@media (max-width: 768px) {

		.btn-primary,
		.btn-outline-primary {
			padding: 6px 12px;
			font-size: 14px;
		}
	}

	@media (max-width: 576px) {

		.btn-primary,
		.btn-outline-primary {
			padding: 4px 10px;
			font-size: 12px;
		}
	}

	@media (max-width: 1200px) {
		#FBSlideLikeBox_left {
			left: -300px;
			width: 350px;
		}

		#FBSlideLikeBox_right {
			right: -350px;
			width: 350px;
		}
	}

	@media (max-width: 768px) {

		div.dataTables_wrapper div.dataTables_filter input {
			width: 100%;
			margin: 5px 0;
		}

		div.dataTables_wrapper div.dataTables_paginate ul.pagination {
			text-align: center;
		}

		#FBSlideLikeBox_left,
		#FBSlideLikeBox_right {
			width: 100%;
			left: 0;
			right: 0;
			padding-right: 20px;
			padding-left: 20px;
		}

		#FBSlideLikeBox_left #FBSlideLikeBox3_left,
		#FBSlideLikeBox_right #FBSlideLikeBox3_right {
			width: 100%;
			height: 100%;
			position: static;
			border: none;
			background: #fff;
		}
	}

	@media (max-width: 480px) {

		div.dataTables_wrapper div.dataTables_filter input {
			padding: 8px;
		}

		div.dataTables_wrapper div.dataTables_paginate ul.pagination {
			flex-wrap: wrap;
		}

		#FBSlideLikeBox_left,
		#FBSlideLikeBox_right {
			position: static;
			width: 100%;
			padding-right: 10px;
			padding-left: 10px;
		}

		#FBSlideLikeBox_left #FBSlideLikeBox3_left,
		#FBSlideLikeBox_right #FBSlideLikeBox3_right {
			width: 100%;
			height: auto;
			border: none;
		}
	}



	@media (max-width: 768px) {


		.BtnSM,
		.BtnDK,
		.BtnELF,
		.BtnMG,
		.BtnDL,
		.BtnSUM,
		.BtnRF {
			width: 100%;
			padding: 10px 20px;
			font-size: 14px;
			margin-bottom: 10px;
		}


		.RazaSM,
		.RazaDK,
		.RazaELF,
		.RazaMG,
		.RazaDL,
		.RazaSUM,
		.RazaRF {
			width: 100%;
			padding: 15px;
			font-size: 14px;
		}


		.RazaSM,
		.RazaDK,
		.RazaELF,
		.RazaMG,
		.RazaDL,
		.RazaSUM,
		.RazaRF {
			margin-bottom: 10px;
		}
	}


	@media (max-width: 480px) {


		.BtnSM,
		.BtnDK,
		.BtnELF,
		.BtnMG,
		.BtnDL,
		.BtnSUM,
		.BtnRF {
			width: 100%;
			padding: 8px 16px;
			font-size: 12px;
		}

		.RazaSM,
		.RazaDK,
		.RazaELF,
		.RazaMG,
		.RazaDL,
		.RazaSUM,
		.RazaRF {
			width: 100%;
			padding: 10px;
			font-size: 12px;
		}


		.RazaSM,
		.RazaDK,
		.RazaELF,
		.RazaMG,
		.RazaDL,
		.RazaSUM,
		.RazaRF {
			margin-bottom: 8px;
		}
	}

	@media (max-width: 768px) {


		.webengine-online-bar {
			height: 6px;
			margin-top: 8px;
			margin-bottom: 8px;
		}

		.rankings-class-filter {
			width: 90%;
			padding: 8px 15px;
		}

		.rankings-class-filter li {
			width: 30%;
			margin-right: 5%;
		}

		.rankings-class-filter-selection {
			font-size: 14px;
		}

		.rankings-class-filter-selection img {
			width: 70px;
		}
	}


	@media (max-width: 480px) {


		.webengine-online-bar {
			height: 5px;
			margin-top: 6px;
			margin-bottom: 6px;
		}

		.rankings-class-filter {
			width: 100%;
			padding: 5px 10px;
		}

		.rankings-class-filter li {
			width: 45%;
			margin-right: 5%;
			margin-bottom: 10px;
		}

		.rankings-class-filter-selection {
			font-size: 12px;
		}

		.rankings-class-filter-selection img {
			width: 60px;
		}
	}


	@media (max-width: 768px) {


		.webengine-language-switcher {
			width: 80px;
			height: 30px;
		}

		.webengine-language-switcher:hover {
			width: 300px;
		}

		.header-info-container {
			width: 100%;
			padding: 10px;
			text-align: center;
		}

		.header-info-container .header-info {
			font-size: 14px;
			padding: 15px;
		}

		.header-info ul li {
			font-size: 14px;
		}

		.header-info ul li a {
			padding: 1px 15px;
			font-size: 14px;
		}
	}


	@media (max-width: 480px) {

		.webengine-language-switcher {
			width: 60px;
			height: 25px;
		}

		.webengine-language-switcher:hover {
			width: 250px;
		}

		.header-info-container {
			width: 100%;
			padding: 8px;
			text-align: center;
		}

		.header-info-container .header-info {
			font-size: 12px;
			padding: 10px;
		}

		.header-info ul li {
			font-size: 12px;
		}

		.header-info ul li a {
			padding: 1px 10px;
			font-size: 12px;
		}
	}


	@media (max-width: 768px) {
		.panel-addstats .character-avatar img {
			width: 80px;
		}

		.panel-addstats .character-name {
			font-size: 16px;
			padding: 15px 0px;
		}

		.global-top-bar .global-top-bar-content {
			width: 100%;
			padding: 0 15px;
		}

		.global-top-bar {
			font-size: 10px;
			padding: 5px 0;
		}
	}

	@media (max-width: 480px) {
		.panel-addstats .character-avatar img {
			width: 70px;
		}

		.panel-addstats .character-name {
			font-size: 14px;
			padding: 10px 0px;
		}

		.global-top-bar {
			font-size: 8px;
			padding: 3px 0;
		}

		.global-top-bar .global-top-bar-content {
			width: 100%;
			padding: 0 10px;
		}

		.download-description {
			font-size: 9px;
		}
	}

	@media (max-width: 768px) {
		.panel-usercp ul li {
			line-height: 25px;
		}

		.panel-usercp ul li img {
			width: 20px;
			top: -1px;
			padding-right: 5px;
		}

		.sidebar-banner img {
			width: 100%;
			height: auto;
			box-shadow: 0 0 8px #e3e3e3;
		}

		.panel-body .panel-title {
			font-size: 13px;
		}
	}

	@media (max-width: 480px) {
		.panel-usercp ul li {
			line-height: 22px;
		}

		.panel-usercp ul li a {
			font-size: 14px;
		}

		.sidebar-banner img {
			box-shadow: 0 0 5px #e3e3e3;
			border-left: 4px solid var(--ColorTemplate);
		}

		.panel-general {
			margin-bottom: 20px;
		}

		.panel-body {
			padding: 8px;
		}

		.panel-body .panel-title {
			font-size: 12px;
			margin-bottom: 15px !important;
		}
	}

	@media (max-width: 768px) {
		.general-table-ui tr td {
			padding: 10px;
			font-size: 14px;
		}

		.general-table-ui img {
			width: 40px;
		}

		.tos_list li {
			font-size: 16px;
			margin-bottom: 30px;
		}

		.tos_list li p {
			font-size: 13px;
			padding-right: 20px;
		}

		.paypal-gateway-form div {
			font-size: 20px;
		}

		.paypal-gateway-form input[type=text] {
			width: 50px;
			font-size: 20px;
		}

		.paypal-gateway-conversion-rate {
			font-size: 16px;
		}
	}

	@media (max-width: 480px) {
		.general-table-ui {
			padding: 5px;
			margin: 5px 0px;
		}

		.general-table-ui img {
			width: 30px;
		}

		.tos_list li {
			font-size: 14px;
			margin-bottom: 20px;
		}

		.tos_list li p {
			font-size: 12px;
			padding-right: 10px;
		}

		.paypal-gateway-content {
			padding: 10px;
		}

		.paypal-gateway-form div {
			font-size: 18px;
		}

		.paypal-gateway-form input[type=text] {
			width: 40px;
			font-size: 18px;
		}

		.paypal-gateway-conversion-rate {
			font-size: 14px;
		}

		.paypal-gateway-continue input[type=submit] {
			width: 150px;
			height: 35px;
		}
	}

	@media (max-width: 768px) {
		.myaccount-table tr td {
			padding: 10px !important;
			font-size: 14px;
		}

		.myaccount-character-block {
			width: 100%;
			margin-bottom: 15px;
		}

		.myaccount-character-block img {
			width: 80px;
		}

		.myaccount-character-block-level {
			top: -62px;
			font-size: 9px;
		}

		.myaccount-character-block-location {
			font-size: 11px;
		}

		.myaccount-character-name a {
			font-size: 14px;
		}
	}

	@media (max-width: 480px) {
		.myaccount-character-block {
			width: 100%;
			padding: 3px;
		}

		.myaccount-character-block img {
			width: 70px;
		}

		.myaccount-character-block-level {
			top: -55px;
			font-size: 8px;
		}

		.myaccount-character-block-location {
			font-size: 10px;
		}

		.myaccount-character-name a {
			font-size: 12px;
		}
	}

	@media (max-width: 768px) {
		.panel-news .panel-title {
			font-size: 15px;
		}

		.panel-news .panel-body,
		.panel-news .panel-footer {
			padding: 0.5rem;
			font-size: 14px;
		}

		.rankings-table tr td {
			padding: 5px;
			font-size: 14px;
		}

		.rankings_menu span {
			font-size: 20px;
		}

		.rankings_menu a {
			width: 100%;
			font-size: 16px;
			padding: 5px 0px;
		}

		.rankings-update-time {
			font-size: 10px;
			padding: 5px 0px;
		}
	}

	@media (max-width: 576px) {

		.rankings-table tr td,
		.rankings-menu span,
		.rankings_menu a {
			font-size: 12px;
			padding: 5px;
		}

		.rankings_menu span {
			font-size: 18px;
		}
	}

	@media (max-width: 768px) {
		.header-info-container {
			width: 95%;
			text-align: center;
		}

		.header-info-container .header-info {
			font-size: 11px;
			padding: 15px;
		}

		.webengine-language-switcher:hover {
			width: 200px;
		}

		.header-info ul li {
			font-size: 14px;
		}
	}

	@media (max-width: 480px) {
		.header-info-container {
			width: 100%;
			text-align: center;
		}

		.header-info-container .header-info {
			font-size: 10px;
			padding: 10px;
		}

		.webengine-language-switcher:hover {
			width: 150px;
		}

		.header-info ul li {
			font-size: 12px;
		}

		.admincp-button {
			top: 5px;
			right: 5px;
			font-size: 9px;
		}
	}


	@media (max-width: 768px) {
		body {
			font-size: 13px;
		}

		#header {
			padding: 30px 0 20px;
		}

		#container {
			width: 95%;
			padding: 15px;
		}

		#header-logo {
			padding: 20px 0;
		}

		.webengine-mu-logo {
			width: 80%;
			max-width: 300px;
		}

		#header-logo {
			padding: 40px 0 20px;
		}

		.webengine-mu-logo {
			width: 80%;
			max-width: 300px;
		}

		#container {
			width: 95%;
			padding: 15px;
		}

		.global-top-bar {
			font-size: 11px;
			padding: 5px 0;
		}
	}
}

@media (max-width: 480px) {
	#header {
		padding: 20px 0;
	}

	#container {
		padding: 10px;
	}

	#header-logo,
	.webengine-mu-logo {
		width: 70%;
		max-width: 250px;
	}

	input[type="text"],
	input[type="password"],
	input[type="number"] {
		padding: 6px;
		font-size: 13px;
	}

	#header-logo {
		padding: 20px 0;
	}

	.webengine-mu-logo {
		width: 70%;
		max-width: 250px;
	}

	#container {
		width: 100%;
		padding: 10px;
	}

	.global-top-bar {
		font-size: 10px;
		padding: 4px 0;
	}

	.global-top-bar-separator {
		padding: 0 3px;
	}

	.time-row {
        gap: 10px;  
    }

    .time-label {
        font-size: 14px;  
    }

    .time-value {
        font-size: 16px; 
    }

	.social-icons {
        bottom: 10px; 
        left: 10px;
    }

    .social-icon {
        font-size: 25px;
    }
    .red-glow-container .container,
.red-glow-container .card,
.red-glow-container .panel,
.red-glow-container .panel-news,
.red-glow-container .panel-general,
.red-glow-container .panel-body {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}
.red-glow-container.pulse {
    animation: pulseGlow 2s infinite ease-in-out;
}

:root {
  --amethyst-glow: #9b5de5;
}

@keyframes pulseGlow {
    0% { box-shadow: 0 0 10px var(--amethyst-glow); }
    50% { box-shadow: 0 0 20px var(--amethyst-glow); }
    100% { box-shadow: 0 0 10px var(--amethyst-glow); }
}

#sidebar-left, #sidebar-right {
    border: 1px solid var(--amethyst-glow);
    box-shadow: 0 0 15px var(--amethyst-glow);
    animation: pulseGlow 2s infinite;
}
#sidebar-users, #sidebar-server {
    position: fixed;
    width: 240px;
    max-height: 60vh;
    overflow-y: auto;
    background-color: rgba(0, 0, 0, 0.85);
    border-radius: 20px;
    padding: 15px;
    color: white;
    z-index: 1050;
    border: 1px solid #9b59b6;
    box-shadow: 0 0 15px #a55fff, 0 0 30px #9b59b6;
    backdrop-filter: blur(6px);
    font-size: 14px;
    line-height: 1.4;
}

/* Posición lateral */
#sidebar-users {
    left: 20px;
    top: 300px;
}

#sidebar-server {
    right: 20px;
    top: 300px;
}

/* Asegurar que el contenido interno no se desborde */
#sidebar-users *,
#sidebar-server * {
    box-sizing: border-box;
    max-width: 100%;
    word-wrap: break-word;
}
.button-discord::before {
  font-family: inherit !important;
  content: none !important; /* si se solapa con ícono */
}