/*!
    
 =========================================================
 * WebEngine CMS
 * https://webenginecms.org/
 =========================================================
 
 * Author Lautaro Angelico (https://lautaroangelico.com/)
 * Copyright (c) 2013-2022 Lautaro Angelico, All Rights Reserved
 
 * Licensed under the MIT license
 * http://opensource.org/licenses/MIT
 
 =========================================================
 
*/
html {
	min-width: 1040px;
	height: 100%;
}

body {
    background: #000 url('../img/background.jpg') no-repeat center top;
    background-size: cover;
    background-attachment: fixed;

    color: #333;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 14px;
    margin: 0;
    min-height: 100vh;
}

@media only screen and (min-width: 2000px) {
	body {
		background: #000000 url('../img/background-2600.jpg') no-repeat top center !important;
	}
}

a {
	color: var(--ColorTemplate);
	text-decoration: none;
	-moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
}

a:hover {
	color: #ffda8a;
}

img {
	border: 0px;
}

input[type=text], input[type=password], input[type=number] {
	background: #fafafa;
	border: 1px solid #e3e3e3;
	color: #666;
}
input[type=text]:focus, input[type=password]:focus, input[type=number]:focus {
	border: 1px solid #ccc;
}


/* =========================
   HEADER (SOLO LOGO LIMPIO)
========================= */
#header {
	width: 100%;
	margin: 0 auto;
	padding: 12px 0;

	text-align: center;
	color: #d7e6ec;

	/* IMPORTANTE: sin fondo */
	background: transparent;

	/* solo separación visual sutil */
	border-bottom: 1px solid rgba(0, 200, 255, 0.10);

	box-shadow:
		0 5px 18px rgba(0,0,0,0.35);
}



/* =========================
   CONTENEDOR PRINCIPAL
========================= */
#container {
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 20px 0;

	position: relative;
	box-sizing: border-box;

	border-radius: 10px;

	background: linear-gradient(
		180deg,
		#0a1620 0%,
		#070f16 50%,
		#050a0f 100%
	);

	box-shadow:
		0 20px 40px rgba(0,0,0,0.65),
		inset 0 1px 0 rgba(255,255,255,0.04),
		inset 0 -1px 0 rgba(0,0,0,0.8);

	overflow: hidden;
}

/* BORDE LIMPIO */
#container::before {
	content: "";
	position: absolute;
	inset: 0;

	border-radius: 10px;
	pointer-events: none;

	box-shadow:
		inset 0 0 0 1px rgba(0, 200, 255, 0.18);
}


/* =========================
   CONTENIDO
========================= */
#content {
	width: 100%;
	max-width: 100%;
	min-height: 500px;

	padding: 10px 20px;

	box-sizing: border-box;
	overflow-x: hidden;
}

.footer {
	background: #f7f7f7;
	font-family: 'Segoe UI', 'Lucida Sans Unicode', 'Lucida Grande', 'Tahoma', 'Arial', 'sans-serif';
	width: 1040px;
	font-size: 12px;
	color: #666666;
	overflow: auto;
	margin: 0px auto 100px auto;
	border-top: 3px solid var(--ColorTemplate);
	-webkit-border-radius: 0px 0px 5px 5px;
	-moz-border-radius: 0px 0px 5px 5px;
	border-radius: 0px 0px 5px 5px;
	-khtml-border-radius: 0px 0px 5px 5px;
}
	.footer > .footer-container {
		width: 100%;
		margin: 0px auto;
	}
		.footer > .footer-container a:hover {
			text-decoration: underline !important;
		}
	.footer .footer-social-link {
		filter: grayscale(100%);
		transition: all .3s ease;
	}
	.footer .footer-social-link:hover {
		filter: grayscale(0%);
	}

#navbar {
	width: 100%;
	backdrop-filter: blur(5px);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

#navbar ul{
	text-align: center;
	margin: 0px;
	-webkit-padding-start: 0px;
}

#navbar ul li {
	list-style-type: none;
	display: inline-block;
	font-size: 16px;
}

#navbar ul li a {
	display: inline-block;
	color: #cccccc !important;
	text-decoration: none;
	padding: 20px 30px;
	transition: all .3s ease;
	text-transform: uppercase;
}

#navbar ul li a:active, #navbar ul li a:focus, #navbar ul li a:hover {
	color: #ffffff !important;
	text-decoration: none;
}

.admincp-button {
	position: absolute;
	top: 0px;
	right: 10px;
	font-size: 10px;
	background: var(--ColorTemplate) !important;
	border: 2px solid #000000 !important;
	color: var(--bs-light) !important;
	font-weight: bold !important;
}

.page-title {
	color: var(--ColorTemplate);
	font-family: 'Roboto', sans-serif;
	font-size: 32px;
	margin-bottom: 10px;
	font-weight: 500;
}

/* NEWS MODULE */
.panel-news {
	margin-bottom: 30px;
	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: 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: #000000;
    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 1rem;
    background: #fff;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: 0.25rem;
}

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

.rankings-class-image {
	width: 40px;
	height: auto;
	-moz-box-shadow: 0 0 5px #666;
	-webkit-box-shadow: 0 0 5px #666;
	box-shadow: 0 0 5px #666;
	-moz-border-radius: 0px;
	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;
	/*font-size: 24px;*/
	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;
	-moz-border-radius: 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: var(--bs-light) !important;
    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;
	-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;
}

/* 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;
}

/* GENERAL TABLE UI */
.general-table-ui {
	width: 100%;
	table-layout: fixed;
	background: #f1f1f1;
	border: 1px solid #e3e3e3;
	padding: 10px;
	margin: 10px 0px;
}
.general-table-ui tr td {
	padding: 5px;
	vertical-align: middle !important;
}
.general-table-ui tr:first-child td {
	color: var(--ColorTemplate);;
}
.general-table-ui tr:nth-child(2n+2) td {
	background: #fafafa;
}
.general-table-ui tr td {
	text-align: center;
}
.general-table-ui img {
	width: 50px;
	height: auto;
	-moz-box-shadow: 0 0 5px #666;
	-webkit-box-shadow: 0 0 5px #666;
	box-shadow: 0 0 5px #666;
	-moz-border-radius: 0px;
	border-radius: 0px;
}

/* TERMS OF SERVICE PAGE */
.tos_list li {
	color: var(--ColorTemplate);;
	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 #f79433;
	padding: 15px;
	overflow: auto;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	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;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	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;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	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-sidebar {
	background: #f1f1f1;
    border: 1px solid;
    border-color: rgba(0,0,0,0.125);
    -moz-border-radius: 0.375rem;
    border-radius: 0.375rem;
    -moz-box-shadow: 0 7px 14px 0 rgb(65 69 88 / 10%), 0 3px 6px 0 rgb(0 0 0 / 7%);
    -webkit-box-shadow: 0 7px 14px 0 rgb(65 69 88 / 10%), 0 3px 6px 0 rgb(0 0 0 / 7%);
    box-shadow: 0 7px 14px 0 rgb(65 69 88 / 10%), 0 3px 6px 0 rgb(0 0 0 / 7%);
}

.panel-sidebar > .panel-heading {
	background: #fff;
	color: var(--ColorTemplate);;
	font-family: 'Roboto', sans-serif;
	font-weight: 500;
	border: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;
	border-bottom: 3px solid var(--ColorTemplate);;
	padding: 15px;
    font-size: 22px;
    text-align: center;
}
.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: #444 !important;
	font-weight: bold;
}
.panel-usercp ul li a:active, .panel-usercp ul li a:hover {
	color: var(--ColorTemplate) !important;
}

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

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

.sidebar-banner img {
	-moz-box-shadow: 0 0 10px #e3e3e3;
	-webkit-box-shadow: 0 0 10px #e3e3e3;
	box-shadow: 0 0 10px #e3e3e3;
	border: 0px;
	-moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -khtml-border-radius: 5px;
	border: 2px solid var(--ColorTemplate);
	border-left: 7px solid var(--ColorTemplate);
}

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

.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 !important;
	font-weight: 500;
}

/* ADD STATS MODULE */
.panel-addstats {
	margin-bottom: 30px;
	background: #f1f1f1;
	border: 1px solid #e3e3e3;
	-moz-border-radius: 0px;
	border-radius: 0px;
	color: #333;
}
.panel-addstats .character-avatar img {
	width: 100px;
	height: auto;
	-moz-box-shadow: 0 0 5px #666;
	-webkit-box-shadow: 0 0 5px #666;
	box-shadow: 0 0 5px #666;
	-moz-border-radius: 0px;
	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 !important;
	font-weight: 500;
}

/* DOWNLOADS */
.panel-downloads {
	margin-bottom: 30px;
	background: #f1f1f1;
	border: 1px solid #e3e3e3;
	-moz-border-radius: 0px;
	border-radius: 0px;
	color: #333;
}
	.download-description {
		font-size: 11px;
		position: relative;
		top: -7px;
		color: #777;
	}

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

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

/* 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: 1040px;
		margin: 0px auto;
	}
		.global-top-bar .global-top-bar-content .row {
			margin: 0px;
			padding: 0px;
		}
	.global-top-bar a.logout {
		color: var(--ColorTemplate) !important;
	}
	.global-top-bar a {
		color: #999999 !important;
	}
	.global-top-bar a:hover {
		color: #ffffff !important;
	}
.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;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		border-radius: 3px;
		-khtml-border-radius: 3px;
		transition: all .3s ease;
	}
	.webengine-language-switcher li:hover {
		-webkit-filter: brightness(120%);
		filter: brightness(120%);
	}
	.webengine-language-switcher li a {
		color: #999999;
	}
	.webengine-language-switcher li a:hover {
		color: #ffffff !important;
	}

/* LOGO */
.webengine-mu-logo{
    display:block;
    width:280px;
    height:auto;
    margin:30px auto;
    position:relative;

    /* Brillo permanente */
    filter:
        drop-shadow(0 0 10px rgba(0,180,255,.75))
        drop-shadow(0 0 25px rgba(0,120,255,.55))
        drop-shadow(0 0 45px rgba(0,80,255,.35));

    animation:LogoGlow 3s ease-in-out infinite;

    transition:all .3s ease;
}

.webengine-mu-logo:hover{

    transform:scale(1.03);

    filter:
        brightness(1.15)
        drop-shadow(0 0 15px #6fd8ff)
        drop-shadow(0 0 35px #00bfff)
        drop-shadow(0 0 70px #007bff);
}

@keyframes LogoGlow{

    0%,100%{

        filter:
        drop-shadow(0 0 10px rgba(0,180,255,.75))
        drop-shadow(0 0 25px rgba(0,120,255,.55))
        drop-shadow(0 0 45px rgba(0,80,255,.35));

    }

    50%{

        filter:
        drop-shadow(0 0 18px rgba(120,220,255,1))
        drop-shadow(0 0 40px rgba(0,180,255,.8))
        drop-shadow(0 0 75px rgba(0,120,255,.55));

    }

}

/* =========================
   WRAPPER
========================= */
.header-info-container {
	width: 1040px;
	margin: 0 auto;
	text-align: right;
}

/* =========================
   CONTENEDOR PRINCIPAL (METAL OSCURO / PANEL TECH)
========================= */
.header-info-container .header-info {
	position: relative;
	display: inline-block;
	width: 100%;

	padding: 12px 18px;

	/* fondo sólido (NO TRANSPARENTE) */
	background: linear-gradient(180deg,
		#0b121a 0%,
		#070d13 50%,
		#05090d 100%
	);

	border-radius: 10px;

	color: #d7e6ec;
	font-size: 11px;

	overflow: hidden;

	/* profundidad real */
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,0.05),
		inset 0 -2px 10px rgba(0,0,0,0.6),
		0 15px 35px rgba(0,0,0,0.6);

	border: 1px solid rgba(0, 180, 255, 0.18);
}

/* =========================
   BORDE ENERGÍA CONTROLADA (NO NEÓN EXCESIVO)
========================= */
.header-info-container .header-info::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 10px;
	pointer-events: none;

	box-shadow:
		inset 0 0 0 1px rgba(0, 200, 255, 0.20),
		inset 0 0 12px rgba(0, 200, 255, 0.08);
}

/* =========================
   RAYO AL HOVER (SE MANTIENE PERO MEJOR INTEGRADO)
========================= */
.header-info ul li a::before {
	content: "";
	position: absolute;
	top: -60%;
	left: -70%;
	width: 45%;
	height: 220%;

	background: linear-gradient(
		120deg,
		transparent 0%,
		rgba(0, 240, 255, 0.9) 45%,
		transparent 100%
	);

	transform: rotate(20deg);
	opacity: 0;
	transition: all .35s ease;
}

.header-info ul li a:hover::before {
	left: 130%;
	opacity: 1;
}

/* =========================
   TEXTO
========================= */
.header-info .header-info-block {
	color: #b6c2cc;
}

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

.header-info .online-count {
	color: #00eaff;
	font-weight: bold;
}

/* =========================
   MENU
========================= */
.header-info ul {
	text-align: center;
	margin: 0;
	padding: 0;
}

.header-info ul li {
	display: inline-block;
	margin: 0 5px;
}

/* =========================
   BOTONES NUEVOS (SHARD / PLASMA STYLE)
========================= */
.header-info ul li a {
	position: relative;
	display: inline-block;

	padding: 7px 18px;

	text-transform: uppercase;
	letter-spacing: 1.2px;
	text-decoration: none;

	color: #d8eefc !important;

	/* forma nueva: angular / tech */
	background: linear-gradient(145deg,
		#0f2a38 0%,
		#0a1a24 50%,
		#08131a 100%
	);

	/* forma más agresiva */
	border-radius: 4px 14px 4px 14px;

	/* borde rojo técnico */
	border: 1px solid rgba(255, 0, 60, 0.85);

	overflow: hidden;

	transition: all .2s ease;

	/* relieve */
	box-shadow:
		inset 0 0 10px rgba(0,0,0,0.6),
		0 0 10px rgba(0,0,0,0.4);
}

/* hover fuerte */
.header-info ul li a:hover {
	background: linear-gradient(145deg,
		#123f55 0%,
		#0a2533 50%,
		#081a22 100%
	);

	color: #00f5ff !important;

	border: 1px solid rgba(255, 60, 90, 1);

	box-shadow:
		inset 0 0 12px rgba(0,0,0,0.5),
		0 0 12px rgba(0, 220, 255, 0.25),
		0 0 10px rgba(255, 0, 60, 0.15);

	transform: translateY(-2px);
}

/* click */
.header-info ul li a:active {
	transform: scale(0.96);
}
/* ONLINE BAR */
.webengine-online-bar {
	width: 100%;
	background: #000000;
	border: 1px solid #555555;
	height: 8px;
	margin-top: 10px;
	margin-bottom: 10px;
	padding: 0px;
	-webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -khtml-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;
		-webkit-border-radius: 0px 1px 1px 0px;
		-moz-border-radius: 0px 1px 1px 0px;
		-khtml-border-radius: 0px 1px 1px 0px;
		border-radius: 0px 1px 1px 0px;
	}
	.webengine-online-bar:hover {
		-webkit-filter: brightness(120%);
		filter: brightness(120%);
	}

/* 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: #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;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	color: #fff;
	font-size: 10px;
}
.myaccount-character-name a {
	font-weight: bold;
	color: #000;
	font-size: 16px;
}

/* RANKINGS FILTER BY CLASS */

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

	.rankings-class-filter li {
		display: inline-block;
		-moz-transition: all 0.3s ease;
		-o-transition: all 0.3s ease;
		-webkit-transition: all 0.3s ease;
		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: #000000 !important;
	}

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

.rankings-class-filter-selection img {
	width: 80px;
	height: auto;
	-moz-border-radius: 5%;
	-webkit-border-radius: 5%;
	border-radius: 5%;
	-khtml-border-radius: 5%;
	margin-bottom: 5px;
	-moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
	-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.45);
	-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.45);
	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;
}

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;
  }

#FBSlideLikeBox_left {background: url(../img/iconds.png) 365px 0 no-repeat; float: left; height: 42px; position: fixed; left: -365px; padding-right: 63px; top: 15%; width: 428px; z-index: 2000;}
#FBSlideLikeBox_left #FBSlideLikeBox3_left {height: 690px; right: 0; position: absolute; border: 3px solid #597bca; width: 400px; background: #f8f8f8;}
#FBSlideLikeBox_right {background: url(../img/iconds.png) 0 0 no-repeat; float: right; height: 42px; position: fixed; right: -400px; padding-left: 42px; top: 15%; width: 400px; z-index: 2000;}
#FBSlideLikeBox_right #FBSlideLikeBox3_right {height: 690px; left: 0; position: absolute; border: 3px solid #3B5998; width: 400px; background: #f8f8f8;}
#FBSlideLikeBox_left #FBSlideLikeBox2_left {position: relative; clear: both; width: auto;}

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

.banners-sidebar img{
	border: 1px solid var(--ColorTemplate);
}

.btn-primary {
	color: #fff;
	background-color: var(--ColorTemplate);
	border-color: var(--ColorTemplate);
  }
  .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: var(--ColorTemplate);
	border-color: var(--ColorTemplate);
	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);
  }
  .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;
  }

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

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

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

  .table-guild{
	color: #f1f1f1;
  }
  
  
  
  
/*
    Intro MU Online Premium – Hoja de Estilos
    Autor: AlmaFuerte - AfDevStudio
    Web: https://afdevstudio.com.ar
    Tel: +54 11 2521-5915
    Prohibida su venta sin autorización y quitar copyright.
*/

:root {
    --bg-1: #040407;
    --bg-2: #081018;
    --accent1: #6a00ff;
    --accent2: #ff4d9b;
    --accent3: #00e5ff;
    --glass: rgba(255, 255, 255, 0.04);
    --muted: #98b6da;
    --text: #eaf2ff;
    --glass-strong: rgba(255, 255, 255, 0.06);
}

/* reset */
* {
    box-sizing: border-box
}

html,
body {
    height: 100%;
    margin: 0
}

body {
    font-family: "Inter", "Oxanium", system-ui, -apple-system, "Segoe UI", Roboto, Arial;
    background: linear-gradient(180deg, var(--bg-1), var(--bg-2));
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* container */
.wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 22px
}

/* NAV */
.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2200;
    background: linear-gradient(180deg, rgba(6, 6, 8, 0.12), rgba(6, 6, 8, 0.06));
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.02);
}

.nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1180px;
    margin: 0 auto;
    padding: 12px 22px;
    gap: 12px
}

.brand-img {
    height: 44px
}

/* nav links */
.nav-links {
    display: flex;
    gap: 16px;
    align-items: center
}

.nav-link {
    color: var(--muted);
    text-decoration: none;
    font-weight: 600;
    padding: 8px 10px;
    border-radius: 8px;
    transition: all .18s
}

.nav-link:hover {
    color: var(--text);
    transform: translateY(-3px)
}

.nav-cta {
    background: linear-gradient(90deg, var(--accent1), var(--accent2));
    color: #fff;
    padding: 9px 14px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 800
}

/* scrolled nav */
.nav.scrolled {
    background: rgba(6, 6, 8, 0.9);
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6)
}

/* HERO */
.hero {
    position: relative;
    min-height: 92vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 70px;
    overflow: hidden
}

.bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: contrast(110%) saturate(115%) brightness(.6);
    z-index: 0
}

/* vignette & scanlines */
.vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(60% 60% at 50% 30%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 70%);
    z-index: 2;
    pointer-events: none
}

.cinematic-scan {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(transparent 96%, rgba(255, 255, 255, 0.01) 100%);
    opacity: 0.06;
    z-index: 3;
    pointer-events: none
}

/* particles canvas */
.particles {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none
}

/* hero inner layout */
.hero-inner {
    position: relative;
    z-index: 10;
    display: flex;
    gap: 48px;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 1180px;
    padding: 50px 22px
}

.hero-left {
    flex: 1;
    max-width: 60%
}

.hero-right {
    width: 420px;
    display: flex;
    align-items: center;
    justify-content: center
}

/* texts */
.kicker {
    color: var(--accent3);
    font-weight: 700;
    letter-spacing: 1px;
    font-size: 12px;
    margin-bottom: 12px
}

.hero-title {
    font-size: 64px;
    line-height: 0.9;
    margin: 0 0 12px;
    font-weight: 800;
    letter-spacing: 1px
}

.hero-title .g {
    background: linear-gradient(90deg, var(--accent1), var(--accent2));
    -webkit-background-clip: text;
    color: transparent
}

.hero-title .blend {
    color: var(--text);
    text-shadow: 0 12px 60px rgba(106, 0, 255, 0.12)
}

.hero-lead {
    color: var(--muted);
    font-size: 17px;
    margin-bottom: 18px;
    max-width: 700px
}

/* actions */
.hero-actions {
    display: flex;
    gap: 12px;
    margin-bottom: 16px
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 700;
    cursor: pointer;
    transition: transform .16s, box-shadow .16s
}

.btn-primary {
    background: linear-gradient(90deg, var(--accent1), var(--accent2));
    color: #fff;
    box-shadow: 0 12px 40px rgba(106, 0, 255, 0.12)
}

.btn-secondary {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: var(--text)
}

/* hero features list */
.hero-features {
    list-style: none;
    display: flex;
    gap: 18px;
    margin-top: 12px;
    padding: 0;
    color: var(--muted);
    font-size: 14px
}

/* ============================
   SERVER LAYER (integrated)
   ============================ */
.server-layer {
    width: 100%;
    max-width: 420px;
    border-radius: 18px;
    padding: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(255, 255, 255, 0.04);
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.6), 0 0 30px rgba(106, 0, 255, 0.08);
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
}

/* holographic ring */
.server-layer .ring {
    position: absolute;
    right: -24px;
    top: -28px;
    width: 160px;
    height: 160px;
    opacity: 0.14;
    filter: blur(2px);
    pointer-events: none
}

/* server body layout */
.server-body {
    display: flex;
    gap: 12px;
    align-items: center
}

.sb-left {
    flex: 1;
    padding-right: 6px
}

.sb-right {
    width: 150px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center
}

/* status / name */
.sb-status {
    color: #7cffb6;
    font-weight: 700;
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 6px
}

.sb-status .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: linear-gradient(90deg, #6fff99, #00e5ff);
    display: inline-block
}

.sb-name {
    font-size: 20px;
    font-weight: 800;
    margin: 0;
    color: var(--text)
}

.sb-tag {
    color: var(--muted);
    margin-top: 4px;
    font-size: 13px
}

/* stats row */
.sb-stats {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 12px
}

.stat {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 14px
}

.stat .ic {
    font-size: 18px;
    display: inline-block;
    width: 26px
}

/* vertical separator inside layer */
.separator-vert {
    width: 1px;
    height: 42px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.05));
    margin: 0 8px;
}

/* meta & footer */
.sb-meta {
    margin-top: 10px;
    color: var(--muted);
    font-size: 13px
}

/* progress */
.progress-wrap {
    width: 100%;
    margin-bottom: 12px
}

.progress-label {
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 6px
}

.progress-bar {
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    overflow: hidden
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent3), var(--accent1));
    width: 0%
}

/* actions */
.sb-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%
}

.btn.small {
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 14px
}

.btn.outline {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: var(--text)
}

.btn.neon {
    background: transparent;
    border: 1px solid var(--accent3);
    color: var(--accent3);
    box-shadow: 0 8px 30px rgba(0, 229, 255, 0.06)
}

/* sb-footer */
.sb-footer {
    margin-top: 12px;
    font-size: 12px;
    color: var(--muted);
    text-align: center
}

/* hero bottom deco */
.hero-bottom-deco {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 120px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(3, 3, 6, 0.95));
    z-index: 6
}

/* =================================
   FEATURES / ABILITIES
   ================================= */
.section {
    padding: 72px 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.01), transparent)
}

.section-title {
    text-align: center;
    font-size: 32px;
    margin-bottom: 8px
}

.section-sub {
    text-align: center;
    color: var(--muted);
    margin-bottom: 26px
}

.abilities {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
    margin-top: 18px
}

.ability {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(0, 0, 0, 0.02));
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.03);
    box-shadow: 0 16px 40px rgba(10, 8, 20, 0.45);
    transition: transform .24s, box-shadow .24s
}

.ability:hover {
    transform: translateY(-8px);
    box-shadow: 0 30px 80px rgba(106, 0, 255, 0.12)
}

.ab-icon {
    font-size: 36px;
    margin-bottom: 12px
}

/* footer */
.footer {
    padding: 28px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.02);
    margin-top: 40px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.04), transparent)
}

.footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px
}

/* responsive */
@media (max-width:980px) {
    .hero-inner {
        flex-direction: column-reverse;
        gap: 22px;
        padding: 30px 18px
    }

    .hero-left {
        max-width: 100%
    }

    .hero-right {
        width: 100%
    }

    .server-layer {
        max-width: 720px;
        width: 100%
    }
}

@media (max-width:560px) {
    .hero-title {
        font-size: 34px
    }

    .hero-left {
        order: 2
    }

    .hero-right {
        order: 1
    }

    .sb-right {
        width: 100%;
        flex-direction: row;
        justify-content: center;
        gap: 8px
    }
}

/* ====== FORCE & INTEGRATION RULES (important) ====== */

.server-layer {
    z-index: 30 !important;
    pointer-events: auto !important;
}

.hero-inner {
    z-index: 12 !important;
}

.bg-video {
    z-index: 0 !important;
}

/* ensure panel visible and centered on all screens */
.server-layer,
.server-panel,
.center-card {
    transform: translateZ(0) !important;
}

/* nav priority */
.nav {
    z-index: 9999 !important;
}

/* mobile fixes */
@media (max-width:760px) {
    .server-layer {
        padding: 14px !important;
        border-radius: 12px !important;
    }

    .hero-inner {
        padding: 18px !important;
    }
}

/* subtle pulsing border for server layer */
@keyframes neonPulse {
    0% {
        box-shadow: 0 18px 60px rgba(106, 0, 255, 0.06), 0 0 12px rgba(0, 229, 255, 0.02);
    }

    50% {
        box-shadow: 0 28px 90px rgba(106, 0, 255, 0.12), 0 0 30px rgba(0, 229, 255, 0.08);
    }

    100% {
        box-shadow: 0 18px 60px rgba(106, 0, 255, 0.06), 0 0 12px rgba(0, 229, 255, 0.02);
    }
}

.server-layer {
    animation: neonPulse 4.8s infinite ease-in-out !important;
}

/* force progress fill visibility */
.progress-fill {
    background: linear-gradient(90deg, var(--accent3), var(--accent1)) !important;
}

/* keep hero bottom deco above background */
.hero-bottom-deco {
    z-index: 6 !important;
}

/* ----------------------------------------------------------
   BASE
---------------------------------------------------------- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    background: #0a0a0f;
    color: #fff;
    font-family: 'Inter', sans-serif;
    scroll-behavior: smooth;
    overflow-x: hidden;
}

img,
video {
    max-width: 100%;
    display: block;
}

a {
    text-decoration: none;
    color: inherit;
}

/* ----------------------------------------------------------
   NAVBAR
---------------------------------------------------------- */
.nav {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 2000;
    padding: 18px 0;
    background: rgba(10, 10, 15, 0.35);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.nav-inner {
    width: 92%;
    max-width: 1350px;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.brand-img {
    width: 100%;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.35));
}

.nav-links {
    display: flex;
    gap: 30px;
    align-items: center;
}

.nav-links .link {
    font-size: 15px;
    opacity: 0.85;
    transition: .2s ease;
}

.nav-links .link:hover {
    opacity: 1;
    transform: translateY(-2px);
}

.nav-links .special {
    padding: 9px 18px;
    background: linear-gradient(45deg, #ff008c, #7a00ff);
    border-radius: 8px;
    font-weight: 700;
}

/* 🔥 FIX: El botón hamburguesa solo aparece en móvil */
.nav-toggle {
    display: none;
}

/* ----------------------------------------------------------
   HERO
---------------------------------------------------------- */
.hero {
    position: relative;
    width: 100%;
    height: 100vh;
    padding-top: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.bg-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -3;
    filter: brightness(0.55) contrast(1.1);
}

.hero-mask {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 35vh;
    opacity: 0.45;
    z-index: -2;
}

.particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.hero-content {
    text-align: center;
    max-width: 950px;
    padding: 0 20px;
}

.kicker {
    font-size: 14px;
    opacity: 0.7;
    letter-spacing: 4px;
    margin-bottom: 12px;
    text-transform: uppercase;
}

.hero-title {
    font-size: 80px;
    font-weight: 800;
    letter-spacing: -3px;
    display: flex;
    justify-content: center;
    gap: 12px;
}

.hero-title .g {
    color: #00e5ff;
    text-shadow: 0 0 12px #00e5ff;
}

.hero-title .bold {
    background: linear-gradient(90deg, #ff00aa, #7b00ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-sub {
    margin-top: 14px;
    opacity: 0.85;
    font-size: 20px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.hero-ctas {
    margin-top: 28px;
    display: flex;
    justify-content: center;
    gap: 22px;
}

.btn {
    padding: 12px 26px;
    border-radius: 10px;
    font-weight: 600;
    border: none;
    display: inline-block;
    transition: .2s ease-in-out;
}

.btn-primary {
    background: linear-gradient(45deg, #ff008c, #7a00ff);
}

.btn-ghost {
    border: 2px solid rgba(255, 255, 255, 0.45);
}

.btn:hover {
    transform: scale(1.05);
}

/* ----------------------------------------------------------
   SERVER RIBBON BLOCK
---------------------------------------------------------- */
.server-block {
    width: 100%;
    padding: 80px 0;
    background: linear-gradient(to bottom,
            rgba(20, 0, 40, 0.9),
            rgba(10, 10, 15, 1));
    display: flex;
    justify-content: center;
}

.server-inner {
    width: 92%;
    max-width: 1200px;
    background: rgba(255, 255, 255, 0.06);
    padding: 35px 45px;
    border-radius: 18px;
    backdrop-filter: blur(15px);
    box-shadow: 0 0 18px rgba(0, 0, 0, 0.4);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.server-info h3 {
    font-size: 34px;
    font-weight: 800;
    margin-bottom: 10px;
}

.server-tags {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.server-tag {
    padding: 6px 12px;
    background: #7a00ff;
    border-radius: 8px;
    font-size: 13px;
}

.server-stats-inline {
    display: flex;
    gap: 20px;
    font-size: 15px;
    opacity: .85;
}

.server-actions {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.server-actions .btn {
    width: 170px;
}

/* ----------------------------------------------------------
   FEATURES
---------------------------------------------------------- */
.section {
    padding: 100px 0;
}

.section-title {
    text-align: center;
    font-size: 44px;
    margin-bottom: 14px;
    font-weight: 800;
}

.lede {
    text-align: center;
    font-size: 18px;
    opacity: .75;
    margin-bottom: 60px;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 35px;
    width: 92%;
    max-width: 1350px;
    margin: auto;
}

.feature.card {
    background: rgba(255, 255, 255, 0.05);
    padding: 30px;
    border-radius: 14px;
    backdrop-filter: blur(8px);
    transition: .25s ease;
}

.feature.card:hover {
    transform: translateY(-6px);
    background: rgba(255, 255, 255, 0.09);
}

.icon {
    font-size: 36px;
    margin-bottom: 14px;
}

/* ----------------------------------------------------------
   FOOTER
---------------------------------------------------------- */
.footer {
    padding: 45px 0;
    background: #0c0c12;
}

.footer-inner {
    width: 92%;
    max-width: 1350px;
    margin: auto;
    display: flex;
    justify-content: space-between;
}

.footer-links a {
    opacity: .7;
}

.footer-links a:hover {
    opacity: 1;
}

/* ----------------------------------------------------------
   RESPONSIVE
---------------------------------------------------------- */
@media (max-width: 1200px) {
    .hero-title {
        font-size: 66px;
    }

    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 850px) {
    .server-inner {
        flex-direction: column;
        text-align: center;
        gap: 25px;
    }
}

@media (max-width: 768px) {

    /* mostrar hamburguesa solo en móvil */
    .nav-toggle {
        display: block;
        background: none;
        font-size: 26px;
        border: none;
        color: white;
    }

    .nav-links {
        position: absolute;
        top: 75px;
        right: 20px;
        flex-direction: column;
        gap: 15px;
        background: rgba(0, 0, 0, 0.8);
        padding: 22px;
        border-radius: 14px;
        opacity: 0;
        pointer-events: none;
        transform: translateY(-20px);
        transition: .25s ease;
    }

    .nav-links.open {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }

    .features-grid {
        grid-template-columns: 1fr;
    }

    .hero-title {
        font-size: 50px;
    }
}

/* ------------------------------------------------ */
/*     SERVER PANEL – GLASS NEON HOLOGRAPHIC        */
/* ------------------------------------------------ */

.server-layer {
    position: relative;
    padding: 32px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border-radius: 18px !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.45) !important;
    width: 100% !important;
}

/* Holographic Ring */
.ring {
    position: absolute !important;
    top: -15px !important;
    right: -15px !important;
    width: 90px !important;
    opacity: 0.55 !important;
    animation: spin 6s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* BODY GRID */
.server-body {
    display: grid !important;
    grid-template-columns: 1.1fr 0.9fr !important;
    gap: 40px !important;
    align-items: center !important;
}

/* LEFT SIDE */
.sb-left .sb-status {
    color: #00ffbb !important;
    margin-bottom: 6px !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
}

.sb-left .dot.online {
    width: 10px !important;
    height: 10px !important;
    background: #00ff88 !important;
    border-radius: 50% !important;
    margin-right: 6px !important;
}

.sb-name {
    color: #fff !important;
    font-size: 1.9rem !important;
    margin-bottom: 3px !important;
    font-weight: 700 !important;
}

.sb-tag {
    color: #aaa !important;
    font-size: 1rem !important;
    margin-bottom: 20px !important;
}

/* STATS */
.sb-stats {
    display: flex !important;
    align-items: center !important;
    gap: 22px !important;
}

.stat {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.stat strong {
    font-size: 1.1rem !important;
    color: #fff !important;
}

.stat small {
    display: block !important;
    color: #aaa !important;
    font-size: 0.75rem !important;
    margin-top: -3px !important;
}

.separator-vert {
    width: 1px !important;
    height: 28px !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

/* RIGHT SIDE */
.progress-wrap {
    margin-bottom: 22px !important;
}

.progress-label {
    color: #ccc !important;
    margin-bottom: 6px !important;
}

.progress-bar {
    width: 100% !important;
    height: 10px !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
}

.progress-fill {
    height: 100% !important;
    background: linear-gradient(90deg, #6a00ff, #00e5ff) !important;
    border-radius: 10px !important;
}

.progress-text {
    margin-top: 6px !important;
    color: #ccc !important;
    font-size: 0.9rem !important;
}

/* BUTTONS */
.sb-actions {
    display: flex !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

.btn.small {
    padding: 8px 14px !important;
    font-size: 0.85rem !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
}

/* Glow Button */
.btn-glow {
    background: #6a00ff !important;
    color: #fff !important;
    box-shadow: 0 0 12px rgba(106, 0, 255, 0.6) !important;
}

.btn-glow:hover {
    background: #5800d1 !important;
}

/* Outline */
.btn.outline {
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: #fff !important;
}

.btn.outline:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

/* Neon Button */
.btn.neon {
    background: linear-gradient(90deg, #00e5ff, #00ffa6) !important;
    color: #000 !important;
    font-weight: 700 !important;
}

/* RESPONSIVE */
@media (max-width: 900px) {
    .server-body {
        grid-template-columns: 1fr !important;
        text-align: center !important;
        gap: 28px !important;
    }

    .sb-stats {
        justify-content: center !important;
    }

    .sb-actions {
        justify-content: center !important;
    }
}



/* VIDEO DEBAJO DEL LOGO */

.mu-video-area {

	width:100%;
	height:500px;

	position:relative;
	overflow:hidden;

	background:#000;

}


/* VIDEO */

.mu-video-area video {

	position:absolute;

	top:50%;
	left:50%;

	width:100%;
	height:100%;

	transform:translate(-50%,-50%);

	object-fit:cover;

}



/* LOGO ENCIMA DEL VIDEO */

.mu-video-area #header {

	position:absolute;

	z-index:3;

	width:100%;

	top:50%;
	left:0;

	transform:translateY(-50%);

	text-align:center;

}


/* TAMAÑO LOGO */

.mu-video-area .webengine-mu-logo {

	max-width:350px;

}









/*====================================================
    CONTADOR ONLINE ULTRA COMPACTO
====================================================*/

.mu-online-counter{

    width:390px;
    max-width:90%;

    margin:14px auto 0;

    padding:7px 10px;

    position:relative;

    border-radius:8px;

    background:#0c131c;

    border:1px solid rgba(80,180,255,.20);

    overflow:hidden;

    backdrop-filter:blur(4px);

}


/* Línea LED superior */

.mu-online-counter:before{

    content:"";

    position:absolute;

    top:0;
    left:-80px;

    width:80px;
    height:1px;

    background:linear-gradient(
        90deg,
        transparent,
        #00e5ff,
        #ffffff,
        #00e5ff,
        transparent
    );

    animation:borderLight 2.5s linear infinite;

}


/* Línea LED inferior */

.mu-online-counter:after{

    content:"";

    position:absolute;

    bottom:0;
    right:-80px;

    width:80px;
    height:1px;

    background:linear-gradient(
        90deg,
        transparent,
        #00e5ff,
        #ffffff,
        #00e5ff,
        transparent
    );

    animation:borderLightBottom 2.5s linear infinite;

}


/* Título */

.online-title{

    color:#7fdcff;

    font-size:9px;

    letter-spacing:3px;

    text-transform:uppercase;

    text-align:center;

    margin-bottom:4px;

}


/* Contador */

#onlineCounter{

    text-align:center;

    color:#fff;

    font-size:12px;

    font-weight:600;

}


/* Números */

#onlineCounter span{

    display:inline-block;

    min-width:38px;

    padding:4px 0;

    margin:0 2px;

    background:#131d29;

    border-radius:4px;

    color:#fff;

    font-size:22px;

    font-weight:700;

    border:1px solid rgba(255,255,255,.04);

    text-shadow:0 0 4px rgba(255,255,255,.8);

}


/* Animaciones */

@keyframes borderLight{

    from{

        left:-80px;

    }

    to{

        left:470px;

    }

}

@keyframes borderLightBottom{

    from{

        right:-80px;

    }

    to{

        right:470px;

    }

}











/*=========================================
       REGISTER WEBENGINE PRO DARK
=========================================*/


.page-title{
    margin:15px 0 20px;
    text-align:center;
    color:#fff;
    font-size:32px;
    font-weight:800;
    letter-spacing:.5px;
    text-shadow:0 0 18px rgba(0,200,255,.5);
}


/* CONTENEDOR REGISTRO */

.col-12.col-sm-6.col-md-6.mx-auto{

    max-width:390px;

    padding:22px;

    background:
    linear-gradient(180deg,
    rgba(20,35,50,.95),
    rgba(10,18,28,.95));

    border:1px solid rgba(0,200,255,.25);

    border-radius:16px;

    box-shadow:
    0 0 35px rgba(0,0,0,.6),
    inset 0 0 20px rgba(0,180,255,.05);

}


/* OCULTAR LOS PALITOS AZULES */

.input-group-prepend{
    display:none !important;
}


/* INPUT COMPLETO */

.input-group>.form-control{

    width:100% !important;

    border-radius:8px !important;

}


/* CAMPOS */

.form-control{

    height:42px;

    padding:0 14px;

    background:#07121c !important;

    color:#fff !important;

    border:1px solid rgba(0,190,255,.25);

    border-radius:8px;

    font-size:14px;

    transition:.25s;

}


/* QUITAR BLANCO DEL AUTOFILL CHROME */

.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus{

    -webkit-text-fill-color:#fff;

    box-shadow:0 0 0px 1000px #07121c inset !important;

}


/* PLACEHOLDER */

.form-control::placeholder{

    color:#8195a8;

}


/* FOCUS */

.form-control:focus{

    background:#0b1c2b !important;

    border-color:#00d4ff;

    box-shadow:
    0 0 12px rgba(0,210,255,.35);

}


/* TEXTO DE AYUDA */

small{

    color:#8095a8;

    font-size:11px;

    margin-top:4px;

}


/* TITULOS SEGURIDAD / REGLAMENTO */

.row{

    margin-top:12px;
    margin-bottom:12px;

}


.row>.col-auto{

    color:#00d9ff;

    font-size:12px;

    font-weight:800;

    letter-spacing:2px;

}


/* CHECKBOX */

.form-check{

    margin-top:10px;

}


.form-check-label{

    color:#cbd7e2;

    font-size:13px;

}


.form-check-label a{

    color:#00cfff;

}


/* BOTON */

.btn-primary{

    width:100%;

    height:44px;

    margin-top:10px;

    border:0;

    border-radius:8px;

    font-weight:800;

    font-size:15px;

    background:
    linear-gradient(135deg,#00c6ff,#006cff);

    box-shadow:
    0 0 20px rgba(0,180,255,.35);

    transition:.25s;

}


.btn-primary:hover{

    transform:translateY(-2px);

    box-shadow:
    0 0 30px rgba(0,210,255,.55);

}


/* VALIDACION */

.invalid-feedback{

    font-size:11px;

}


/* RECAPTCHA */

.g-recaptcha{

    transform:scale(.85);

    transform-origin:center;

}



/* QUITAR ESPACIO EXCESIVO DEL PHP */

.col-12.col-sm-6.col-md-6.mx-auto br{

    display:none;

}



/* RESPONSIVE */

@media(max-width:768px){

    .col-12.col-sm-6.col-md-6.mx-auto{

        width:92%;

        padding:18px;

    }

}























/*====================================================
 WEBENGINE CMS - ULTRA COMPACT DARK RANKING
====================================================*/


/* TITULO */

.page-title span{

    color:#fff;

    font-size:26px;

    font-weight:800;

    text-align:center;

    margin-bottom:12px;

    display:block;

    text-shadow:
    0 0 10px rgba(0,200,255,.5);

}




/* TABLA */

.general-rank{

    width:100%;

    border-collapse:separate!important;

    border-spacing:0 2px!important;

}



/* HEADER */

.general-rank thead tr{

background:

linear-gradient(
90deg,
#08131f,
#10283c
);

}



.general-rank thead th{

padding:7px 8px!important;

font-size:11px;

color:#00d9ff!important;

font-weight:800;

letter-spacing:.8px;

border:0!important;

}





/* FILAS NORMALES */

.general-rank tbody tr{


background:

linear-gradient(
90deg,
rgba(8,18,30,.98),
rgba(5,12,20,.98)
);


height:28px;


transition:.2s;


}



.general-rank tbody tr:hover{


background:

linear-gradient(
90deg,
rgba(0,120,220,.25),
rgba(5,12,20,.98)
);


}




/* CELDAS */

.general-rank tbody td{


padding:3px 8px!important;


height:25px;


font-size:12px;


color:#c9d7e3;


border-top:

1px solid rgba(255,255,255,.03);


border-bottom:

1px solid rgba(255,255,255,.03);


}



.general-rank tbody td:first-child{

border-radius:5px 0 0 5px;

}


.general-rank tbody td:last-child{

border-radius:0 5px 5px 0;

}




/* NUMERO */

.rankings-table-place{


font-size:14px!important;

font-weight:900;

color:#00d9ff!important;


}



.rankings-table-place .fa-medal{


font-size:15px;

}




/*====================================
 TOP 1 - GOLD PREMIUM
====================================*/


.general-rank tbody tr:first-child{


background:


linear-gradient(
90deg,
rgba(255,200,0,.35),
rgba(50,35,5,.75)
);


box-shadow:

inset 3px 0 0 #ffd700,

0 0 12px rgba(255,215,0,.25);



}



.general-rank tbody tr:first-child 
.rankings-table-place{


color:#ffe27a!important;


text-shadow:

0 0 8px gold;


}





/*====================================
 TOP 2 - SILVER
====================================*/


.general-rank tbody tr:nth-child(2){


background:


linear-gradient(
90deg,
rgba(210,220,230,.25),
rgba(30,35,45,.85)
);


box-shadow:

inset 3px 0 0 #d8d8d8;


}



.general-rank tbody tr:nth-child(2)
.rankings-table-place{


color:#ffffff!important;


}





/*====================================
 TOP 3 - BRONCE
====================================*/


.general-rank tbody tr:nth-child(3){


background:


linear-gradient(
90deg,
rgba(210,130,50,.35),
rgba(45,25,10,.80)
);


box-shadow:

inset 3px 0 0 #cd7f32;


}



.general-rank tbody tr:nth-child(3)
.rankings-table-place{


color:#ffb46b!important;


}






/* NOMBRE */


.general-rank a{


font-size:13px;

font-weight:700;

color:#fff;

text-decoration:none;


}



.general-rank a:hover{


color:#00d9ff;


}





/* AVATAR */


.rankings-class-image{


width:28px!important;

height:28px!important;


padding:1px;


border-radius:4px;


border:

1px solid rgba(0,200,255,.35);


background:#02070c;


box-shadow:

0 0 6px rgba(0,200,255,.3);


}




/* ONLINE */

.default-char-online{


border-color:#00ff66!important;


box-shadow:

0 0 8px #00ff66!important;


}



.default-char-offline{

opacity:.55;

}





/* SELECT */

.ranking-filter,
.form-select,
select{


background:#050c14!important;

color:white!important;

border:

1px solid rgba(0,180,255,.3)!important;


border-radius:5px;


padding:5px 8px!important;


font-size:12px;


}




/* ALERT */

.alert-primary{


background:

rgba(0,120,200,.15)!important;


border:

1px solid rgba(0,200,255,.25)!important;


border-radius:6px;


padding:7px!important;


font-size:12px;


}



/* BUSCADOR */


.dataTables_filter input{


background:#050c14!important;


color:#fff!important;


border:

1px solid rgba(0,200,255,.25)!important;


border-radius:5px;


padding:5px 8px!important;


}





/* PAGINACION */


.dataTables_paginate a{


background:#07121d!important;

color:white!important;


padding:4px 8px!important;


border-radius:4px!important;


font-size:12px;


}




/* MOBILE */

@media(max-width:768px){


.general-rank tbody td{

padding:2px 5px!important;

font-size:11px;


}


.rankings-class-image{


width:24px!important;

height:24px!important;


}


}

























/*====================================================
 WEBENGINE USERCP PREMIUM CLEAN DARK
====================================================*/


/*====================================================
 TITULOS MINI RANK
====================================================*/

.miniranks{

    background:
    linear-gradient(
    90deg,
    #071522,
    #102b40
    )!important;

    border:
    1px solid rgba(0,200,255,.35)!important;

    border-radius:8px!important;

    padding:8px!important;

    color:#00d9ff!important;

    font-size:16px!important;

    font-weight:800;

    text-align:center;

    box-shadow:
    0 0 15px rgba(0,200,255,.15);

}



/*====================================================
 CARDS GENERALES
====================================================*/


.usercp .card,
.card{

    background:
    linear-gradient(
    145deg,
    #08131f,
    #030912
    )!important;


    border:
    1px solid rgba(0,200,255,.18)!important;


    border-radius:10px!important;


    box-shadow:
    0 8px 25px rgba(0,0,0,.35)!important;


    overflow:hidden;

}



.card-header{

    background:
    rgba(0,150,255,.12)!important;


    color:#00d9ff!important;


    padding:9px!important;


    font-size:13px!important;


    font-weight:800;


    border-bottom:
    1px solid rgba(0,200,255,.15)!important;

}



.card-body{

    padding:14px!important;

}



/*====================================================
 BIENVENIDA
====================================================*/


.card .img-fluid.rounded-start{

    display:none!important;

}


.card .col-md-2{

    display:none!important;

}


.card .col-md-10{

    width:100%!important;

    flex:0 0 100%!important;

}



.card-title{

    color:white!important;

    font-size:22px!important;

    font-weight:800;

}



.card-text{

    color:#9fb5c5!important;

    font-size:14px!important;

}



/*====================================================
 CREDITOS / VIP
====================================================*/


.card-body h3{

    font-size:24px!important;

    font-weight:900;

    color:#00d9ff!important;

}



/*====================================================
 DATOS CUENTA
====================================================*/


.input-group{

    margin-bottom:8px!important;

    display:flex!important;

    align-items:center!important;

    flex-wrap:nowrap!important;

}



.input-group-text{

    background:#071522!important;


    border:
    1px solid rgba(0,200,255,.18)!important;


    color:#00d9ff!important;


    font-size:12px!important;


    padding:8px 12px!important;


}



.input-group .form-control{


    background:#050b12!important;


    border:
    1px solid rgba(255,255,255,.08)!important;


    color:white!important;


    height:36px!important;


    font-size:13px!important;


    flex:1!important;


}





/*====================================================
 BOTONES CAMBIAR EMAIL / PASSWORD
====================================================*/


.input-group a.btn-primary{


    display:inline-flex!important;


    width:auto!important;


    min-width:90px!important;


    max-width:110px!important;


    height:28px!important;


    padding:0 12px!important;


    margin-left:8px!important;


    margin-top:0!important;


    align-items:center!important;


    justify-content:center!important;


    white-space:nowrap!important;


    font-size:11px!important;


    font-weight:700!important;


    border-radius:6px!important;


    background:
    linear-gradient(
    135deg,
    #008cff,
    #00d9ff
    )!important;


    color:white!important;


    border:0!important;


    box-shadow:
    0 0 8px rgba(0,200,255,.35);


}



.input-group a.btn-primary:hover{


    box-shadow:

    0 0 15px rgba(0,220,255,.8)!important;


    transform:translateY(-1px);

}



/*====================================================
 PERSONAJES
====================================================*/


.mini-ranks-hard{


    background:
    linear-gradient(
    145deg,
    #08131f,
    #030912
    )!important;


    border:
    1px solid rgba(0,200,255,.2)!important;


    border-radius:10px!important;


    padding:10px!important;


}



.mini-ranks-hard-text{


    color:#00d9ff!important;


    font-size:16px!important;


    font-weight:800;


}



.mini-ranks-hard img{


    width:95px!important;


    height:auto!important;


    border-radius:8px!important;


    border:
    2px solid rgba(0,200,255,.35)!important;


    box-shadow:

    0 0 15px rgba(0,200,255,.3);


}





/*====================================================
 BARRAS STATS
====================================================*/


.progress{


    height:14px!important;


    background:#02060b!important;


    border-radius:20px!important;


    overflow:hidden;


}



.progress-bar{


    background:

    linear-gradient(
    90deg,
    #008cff,
    #00ffff
    )!important;


    font-size:10px!important;


    font-weight:800;


}




/*====================================================
 BOTONES RESET / LEVEL
====================================================*/


.mini-ranks-hard .btn-outline-dark{


    display:inline-flex!important;


    align-items:center!important;


    justify-content:center!important;


    background:
    rgba(0,150,255,.15)!important;


    border:
    1px solid rgba(0,200,255,.35)!important;


    color:white!important;


    font-size:11px!important;


    padding:5px 10px!important;


    height:28px!important;


    border-radius:6px!important;


    margin:2px!important;


}



.mini-ranks-hard .btn-outline-dark:hover{


    background:#008cff!important;


    box-shadow:

    0 0 12px #008cff;


}




/*====================================================
 TABLAS DONACIONES
====================================================*/


.table{


    background:#050b12!important;


    color:white!important;


    border-radius:8px!important;


}



.table thead th{


    background:#071522!important;


    color:#00d9ff!important;


    font-size:12px!important;


    border:0!important;


}



.table tbody td{


    font-size:12px!important;


    border-color:

    rgba(255,255,255,.05)!important;


}



.badge{


    padding:4px 8px!important;


    border-radius:15px!important;


}





/*====================================================
 LIMPIEZA
====================================================*/


.card br{

    display:none!important;

}



/*====================================================
 MOBILE
====================================================*/


@media(max-width:768px){


    .mini-ranks-hard img{

        width:70px!important;

    }



    .card-body{

        padding:10px!important;

    }



    .input-group a.btn-primary{

        min-width:75px!important;

        font-size:10px!important;

    }


}