/*!
 =========================================================
 WebEngine CMS - Custom MU Region Theme
 =========================================================
*/

:root {

	/* =====================================================
	   IDENTIDAD VISUAL
	===================================================== */

	--webenginebg1: #050505;
	--webenginebg2: #111111;
	--webenginebg3: #090909;

	--webenginecolor1: #d11f1f;
	--webenginecolor2: #e7e7e7;

	--webenginecolor3: #b7b7b7;
	--webenginecolor4: #ffffff;

	--webenginecolor5: #181818;
	--webenginecolor6: #f1f1f1;
	--webenginecolor7: #d11f1f;

	--webenginecolor8: #222222;
	--webenginecolor9: #ffffff;
	--webenginecolor10: #444444;

	--webenginecolor11: #d11f1f;
	--webenginecolor12: #ffffff;
	--webenginecolor13: #ff5757;

	--webenginecolor14: #8d8d8d;
	--webenginecolor63: #282828;

	--webenginecolor15: #161616;
	--webenginecolor16: #303030;
	--webenginecolor17: #e5e5e5;
	--webenginecolor18: #d11f1f;

	--webenginecolor19: #c8c8c8;
	--webenginecolor20: #ffffff;

	--webenginecolor21: #2d2d2d;
	--webenginecolor22: #151515;
	--webenginecolor23: #888888;

	--webenginecolor24: #171717;
	--webenginecolor25: #a8a8a8;
	--webenginecolor26: #ffffff;

	--webenginecolor27: #151515;
	--webenginecolor28: #1b1b1b;

	--webenginecolor29: #221a0f;
	--webenginecolor30: #f79433;
	--webenginecolor31: #2b2113;
	--webenginecolor32: #f79433;

	--webenginecolor33: #d2d2d2;

	--webenginecolor34: #080808;
	--webenginecolor35: #888888;
	--webenginecolor36: #ff4141;
	--webenginecolor37: #aaaaaa;
	--webenginecolor38: #ffffff;

	--webenginecolor39: #1b1b1b;
	--webenginecolor40: #aaaaaa;
	--webenginecolor41: #ffffff;

	--webenginecolor42: rgba(0, 0, 0, 0.65);
	--webenginecolor43: rgba(255, 255, 255, 0.10);
	--webenginecolor44: #bdbdbd;
	--webenginecolor45: rgba(0, 0, 0, 0.85);
	--webenginecolor46: #000000;
	--webenginecolor47: #ffffff;
	--webenginecolor48: #b8b8b8;
	--webenginecolor49: #4dff8a;
	--webenginecolor50: #050505;
	--webenginecolor51: #303030;
	--webenginecolor52: #26c76f;
	--webenginecolor53: #000000;

	--webenginecolor54: #161616;
	--webenginecolor55: rgba(0, 0, 0, 0.70);
	--webenginecolor56: #000000;
	--webenginecolor57: #b5b5b5;
	--webenginecolor58: rgba(0, 0, 0, 0.80);
	--webenginecolor59: #ffffff;
	--webenginecolor60: #ffffff;

	--webenginecolor61: #d8d8d8;
	--webenginecolor62: rgba(0, 0, 0, 0.80);

	/* Nuevas variables del diseño */

	--theme-red: #d11f1f;
	--theme-red-light: #f13d3d;
	--theme-red-dark: #851010;

	--theme-black: #070707;
	--theme-black-soft: #101010;
	--theme-panel: #151515;
	--theme-panel-light: #1c1c1c;

	--theme-border: rgba(255, 255, 255, 0.08);
	--theme-border-strong: rgba(209, 31, 31, 0.55);

	--theme-text: #eeeeee;
	--theme-muted: #898989;

	--theme-shadow:
		0 15px 45px rgba(0, 0, 0, 0.50);

	--theme-transition: all 0.25s ease;
}


/* =========================================================
   BASE
========================================================= */

html {
	min-width: 1040px;
}

body {
	background:
		linear-gradient(
			to bottom,
			rgba(0, 0, 0, 0.15) 0px,
			rgba(0, 0, 0, 0.45) 550px,
			#050505 1100px
		),
		var(--webenginebg1) url('../img/background.jpg') no-repeat top center;

	background-color: var(--webenginebg1);
	background-size: auto, auto;
	background-attachment: fixed;

	color: var(--theme-text);

	font-family:
		'PT Sans',
		'Segoe UI',
		Arial,
		sans-serif;

	font-size: 14px;

	margin: 0;
	padding: 0;
}

@media only screen and (min-width: 2000px) {

	body {
		background:
			linear-gradient(
				to bottom,
				rgba(0, 0, 0, 0.15) 0px,
				rgba(0, 0, 0, 0.45) 550px,
				#050505 1100px
			),
			var(--webenginebg1) url('../img/background-2600.jpg') no-repeat top center !important;
	}

}

* {
	box-sizing: border-box;
}

a {
	color: var(--webenginecolor3);
	text-decoration: none;
	transition: var(--theme-transition);
}

a:hover {
	color: var(--webenginecolor4);
	text-decoration: none;
}

img {
	border: 0;
	max-width: 100%;
}

input[type=text],
input[type=password],
input[type=number],
textarea,
select {

	background: var(--webenginecolor15);

	border: 1px solid var(--webenginecolor16);

	color: var(--webenginecolor17);

	border-radius: 3px;

	transition: var(--theme-transition);
}

input[type=text]:focus,
input[type=password]:focus,
input[type=number]:focus,
textarea:focus,
select:focus {

	background: #1b1b1b;

	border-color: var(--webenginecolor18);

	box-shadow:
		0 0 0 2px rgba(209, 31, 31, 0.10);

	outline: none;
}


/* =========================================================
   BOTONES
========================================================= */

.btn {
	border-radius: 2px;
	text-transform: uppercase;
	font-size: 12px;
	font-weight: bold;
	letter-spacing: 0.5px;
	transition: var(--theme-transition);
}

.btn-primary {

	background:
		linear-gradient(
			135deg,
			var(--theme-red-light),
			var(--theme-red-dark)
		);

	border: 1px solid rgba(255, 255, 255, 0.12);

	color: #ffffff !important;

	box-shadow:
		0 4px 12px rgba(209, 31, 31, 0.18);
}

.btn-primary:hover,
.btn-primary:focus {

	background:
		linear-gradient(
			135deg,
			#ff4b4b,
			#9f1111
		);

	color: #ffffff !important;

	transform: translateY(-1px);

	box-shadow:
		0 7px 20px rgba(209, 31, 31, 0.30);
}


/* =========================================================
   HEADER
========================================================= */

#header {

	width: 100%;

	margin: 0 auto;

	padding: 75px 0 20px 0;

	min-height: 240px;

	text-align: center;

	position: relative;
}

.webengine-mu-logo {

	transition: var(--theme-transition);

	filter:
		drop-shadow(0 10px 25px rgba(0, 0, 0, 0.70));
}

.webengine-mu-logo:hover {

	filter:
		brightness(115%)
		drop-shadow(0 12px 30px rgba(209, 31, 31, 0.18));

	transform: scale(1.02);
}


/* =========================================================
   CONTENEDOR PRINCIPAL
========================================================= */

#container {

	width: 1040px;

	height: auto;

	margin: 0 auto;

	padding: 20px 0 30px 0;

	background:
		linear-gradient(
			to bottom,
			rgba(255, 255, 255, 0.015),
			rgba(0, 0, 0, 0)
		),
		var(--theme-black-soft);

	border:

		1px solid var(--theme-border);

	border-top:
		2px solid rgba(209, 31, 31, 0.45);

	border-radius: 4px 4px 0 0;

	box-shadow:
		var(--theme-shadow);

	position: relative;
}

#content {

	width: 100%;

	overflow: auto;

	min-height: 500px;

	padding: 15px 25px 0 25px;
}


/* =========================================================
   FOOTER
========================================================= */

.footer {

	background:
		linear-gradient(
			to bottom,
			#111111,
			#090909
		);

	font-family:
		'Segoe UI',
		'Lucida Sans Unicode',
		'Lucida Grande',
		'Tahoma',
		'Arial',
		sans-serif;

	width: 1040px;

	font-size: 12px;

	color: var(--webenginecolor14);

	padding: 35px 40px;

	overflow: auto;

	margin: 0 auto 100px auto;

	border:
		1px solid var(--theme-border);

	border-top:
		1px solid rgba(209, 31, 31, 0.25);

	border-radius: 0 0 4px 4px;
}

.footer > .footer-container {

	width: 100%;

	margin: 0 auto;
}

.footer > .footer-container a:hover {
	text-decoration: underline !important;
}

.footer hr {

	border: 0;

	border-top:
		1px solid var(--webenginecolor63);
}

.footer .footer-social-link {

	filter: grayscale(100%);

	transition: var(--theme-transition);
}

.footer .footer-social-link:hover {

	filter: grayscale(0%);

	transform: translateY(-2px);
}


/* =========================================================
   NAVBAR
========================================================= */

#navbar {

	width: 100%;

	background:
		linear-gradient(
			to right,
			rgba(8, 8, 8, 0.92),
			rgba(20, 20, 20, 0.92),
			rgba(8, 8, 8, 0.92)
		);

	backdrop-filter: blur(10px);

	border-top:
		1px solid rgba(255, 255, 255, 0.05);

	border-bottom:
		1px solid rgba(255, 255, 255, 0.10);

	box-shadow:
		0 5px 20px rgba(0, 0, 0, 0.30);
}

#navbar ul {

	text-align: center;

	margin: 0;

	padding: 0;
}

#navbar ul li {

	list-style-type: none;

	display: inline-block;

	font-size: 14px;
}

#navbar ul li a {

	display: inline-block;

	color: var(--webenginecolor19) !important;

	text-decoration: none;

	padding: 18px 24px;

	font-weight: bold;

	letter-spacing: 0.6px;

	text-transform: uppercase;

	position: relative;

	transition: var(--theme-transition);
}

#navbar ul li a:before {

	content: "";

	position: absolute;

	left: 50%;

	bottom: 0;

	width: 0;

	height: 2px;

	background: var(--theme-red);

	transition: var(--theme-transition);

	transform: translateX(-50%);
}

#navbar ul li a:hover:before,
#navbar ul li a:active:before,
#navbar ul li a:focus:before {

	width: 65%;
}

#navbar ul li a:active,
#navbar ul li a:focus,
#navbar ul li a:hover {

	color: var(--webenginecolor20) !important;

	text-decoration: none;

	background:
		rgba(255, 255, 255, 0.025);
}


/* =========================================================
   ADMIN
========================================================= */

.admincp-button {

	position: absolute;

	top: 10px;

	right: 10px;

	background: var(--theme-red) !important;

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

	color: #ffffff !important;

	font-weight: bold !important;

	border-radius: 2px !important;
}


/* =========================================================
   TÍTULOS
========================================================= */

.page-title {

	color: #ffffff;

	font-family: 'PT Sans', sans-serif;

	font-size: 30px;

	margin-bottom: 25px;

	padding-bottom: 12px;

	font-weight: bold;

	text-align: left;

	text-transform: uppercase;

	letter-spacing: 0.5px;

	border-bottom:
		1px solid var(--theme-border);

	position: relative;
}

.page-title:after {

	content: "";

	position: absolute;

	bottom: -1px;

	left: 0;

	width: 90px;

	height: 3px;

	background:
		linear-gradient(
			to right,
			var(--theme-red),
			transparent
		);
}


/* =========================================================
   NEWS MODULE
========================================================= */

.panel-news {

	margin-bottom: 22px;

	background: var(--theme-panel);

	color: var(--theme-text);

	border:
		1px solid var(--theme-border);

	border-radius: 3px;

	box-shadow:
		0 8px 25px rgba(0, 0, 0, 0.25);

	overflow: hidden;

	transition: var(--theme-transition);
}

.panel-news:hover {

	border-color:
		rgba(255, 255, 255, 0.13);

	box-shadow:
		0 12px 35px rgba(0, 0, 0, 0.35);
}

.panel-news .panel-heading {

	background:
		linear-gradient(
			to right,
			rgba(209, 31, 31, 0.10),
			rgba(255, 255, 255, 0.015)
		);

	padding: 15px 18px;

	border-bottom:
		1px solid var(--theme-border);
}

.panel-news .panel-title {

	color: #ffffff;

	font-size: 21px;

	font-weight: bold;

	margin: 0;
}

.panel-news .panel-title a {

	color: #ffffff;
}

.panel-news .panel-title a:hover {

	color: var(--theme-red-light);
}

.panel-news .panel-body {

	padding: 18px;

	line-height: 1.7;

	color: #c7c7c7;
}

.panel-news .panel-body img {

	max-width: 100%;

	height: auto;
}

.panel-news .panel-footer {

	border-top:
		1px solid var(--webenginecolor21);

	background:
		#111111;

	font-style: normal;

	font-size: 11px;

	min-height: 40px;

	padding: 10px 15px;

	color: var(--webenginecolor23);
}


/* =========================================================
   HOME - BLOQUE DE NOTICIAS
========================================================= */

.home-news-block {

	padding-right: 12px;
}

.home-news-block .home-news-block-header {

	margin: 0 0 15px 0;

	padding-bottom: 12px;

	border-bottom:
		1px solid var(--theme-border);
}

.home-news-block .home-news-block-header h2 {

	padding: 0 !important;

	margin: 0 !important;

	color: #ffffff;

	font-size: 26px;

	font-weight: bold;

	text-transform: uppercase;

	letter-spacing: 0.5px;
}

.home-news-block .home-news-block-header h2:before {

	content: "";

	display: inline-block;

	width: 4px;

	height: 25px;

	margin-right: 10px;

	background: var(--theme-red);

	vertical-align: -4px;
}

.home-news-block .home-news-block-header a {

	display: inline-block;

	padding: 7px 0 0 0;

	color: var(--theme-muted);

	font-size: 12px;

	font-weight: bold;

	text-transform: uppercase;

	letter-spacing: 0.7px;
}

.home-news-block .home-news-block-header a:hover {

	color: var(--theme-red-light);
}


/* NOTICIA DESTACADA */

.home-news-featured {

	position: relative;

	border-top:
		2px solid var(--theme-red);
}

.home-news-featured .panel-title {

	font-size: 25px;
}

.home-news-featured .panel-body {

	font-size: 14px;

	line-height: 1.8;
}

.home-news-featured .panel-footer {

	padding: 12px 18px;
}


/* NOTICIAS SECUNDARIAS */

.home-news-secondary {

	background:
		linear-gradient(
			to right,
			#161616,
			#121212
		);
}

.home-news-secondary .panel-heading {

	padding: 12px 15px;
}

.home-news-secondary .panel-title {

	font-size: 16px;
}

.home-news-secondary-preview {

	padding: 14px 16px;

	font-size: 13px;

	line-height: 1.6;

	color: #9f9f9f;

	border-bottom:
		1px solid var(--theme-border);
}


/* =========================================================
   TOP 10 POR RESETS - HOME
========================================================= */

.panel-top-players {

	margin-top: 15px;

	background:
		linear-gradient(
			135deg,
			#151515,
			#0e0e0e
		);

	border:
		1px solid var(--theme-border);

	border-top:
		2px solid var(--theme-red);

	box-shadow:
		0 15px 40px rgba(0, 0, 0, 0.35);

	overflow: hidden;
}

.panel-top-players > .panel-heading {

	background:
		linear-gradient(
			to right,
			rgba(209, 31, 31, 0.16),
			rgba(0, 0, 0, 0.10)
		);

	border-bottom:
		1px solid var(--theme-border) !important;

	padding: 18px;
}

.panel-top-players > .panel-heading .panel-title {

	color: #ffffff;

	font-size: 22px;

	font-weight: bold;

	text-transform: uppercase;

	letter-spacing: 0.8px;
}

.panel-top-players .panel-body {

	padding: 0;

	background: transparent;
}

.panel-top-players .table-responsive {

	border: 0;

	margin: 0;
}

.panel-top-players .table {

	margin: 0;

	background: transparent;

	color: #dddddd;
}

.panel-top-players .table thead {

	background: #0b0b0b;
}

.panel-top-players .table thead th {

	color: #8f8f8f;

	border-bottom:
		1px solid var(--theme-border);

	padding: 14px 12px;

	font-size: 11px;

	text-transform: uppercase;

	letter-spacing: 1px;
}

.panel-top-players .table tbody tr {

	background: transparent;

	transition: var(--theme-transition);
}

.panel-top-players .table tbody tr:nth-child(even) {

	background:
		rgba(255, 255, 255, 0.018);
}

.panel-top-players .table tbody tr:hover {

	background:
		rgba(209, 31, 31, 0.07);
}

.panel-top-players .table tbody td {

	padding: 14px 12px;

	border-top:
		1px solid rgba(255, 255, 255, 0.045);

	vertical-align: middle;
}

.panel-top-players .table tbody tr:nth-child(1) td {

	background:
		linear-gradient(
			to right,
			rgba(209, 31, 31, 0.12),
			transparent
		);
}

.panel-top-players .table tbody td:first-child strong {

	color: var(--theme-red-light);

	font-size: 15px;
}

.panel-top-players .table tbody td:last-child strong {

	color: #ffffff;

	font-size: 15px;
}

.panel-top-players .panel-footer {

	background: #0c0c0c;

	border-top:
		1px solid var(--theme-border);

	padding: 16px;
}


/* =========================================================
   RANKINGS MODULE
========================================================= */

.rankings-table {

	width: 100%;

	border-spacing: 0;

	border-collapse: collapse;

	background: var(--theme-panel);

	border:
		1px solid var(--theme-border);
}

.rankings-class-image {

	width: 34px;

	height: auto;

	box-shadow:
		0 0 10px rgba(0, 0, 0, 0.60);

	border-radius: 50%;
}

.rankings-table tr {

	transition: var(--theme-transition);
}

.rankings-table tr:hover {

	background:
		rgba(209, 31, 31, 0.06);
}

.rankings-table tr td {

	border-bottom:
		1px solid var(--webenginecolor16);

	padding: 12px;

	font-size: 16px;

	vertical-align: middle !important;

	text-align: center;
}

.rankings-table-place {

	color: var(--theme-muted);

	font-weight: bold;

	font-size: 22px;

	text-align: center;
}

.rankings-table tr:first-child td {

	color: var(--theme-red-light);

	border-bottom:
		2px solid var(--theme-red);
}

.rankings-update-time {

	text-align: right;

	font-size: 11px;

	color: var(--theme-muted);

	padding: 10px 0;
}

.rankings_menu {

	width: 100%;

	overflow: auto;

	text-align: center;

	margin-bottom: 20px;
}

.rankings_menu span {

	width: 100%;

	display: inline-block;

	padding: 10px 0;

	font-size: 24px;
}

.rankings_menu a {

	display: inline-block;

	width: 150px;

	border:
		1px solid var(--theme-border);

	text-align: center;

	padding: 8px 0;

	margin: 3px;

	background: var(--theme-panel);

	border-radius: 2px;

	color: var(--webenginecolor25);

	text-transform: uppercase;

	font-size: 11px;

	font-weight: bold;
}

.rankings_menu a:hover {

	background: #202020;

	color: #ffffff;
}

.rankings_menu a.active {

	color: #ffffff;

	border-color: var(--theme-red);

	background:
		rgba(209, 31, 31, 0.15);
}

.rankings_guild_logo tr td {

	border: 0 !important;

	padding: 0 !important;

	margin: 0 !important;
}

.rankings-gens-img {

	width: auto !important;

	height: 30px !important;

	border: 0 !important;

	box-shadow: none !important;

	border-radius: 0 !important;
}


/* =========================================================
   MY ACCOUNT
========================================================= */

.myaccount-table {

	width: 100%;

	background: var(--theme-panel);

	border:
		1px solid var(--theme-border);
}

.myaccount-table tr {

	border-bottom:
		1px solid var(--theme-border);
}

.myaccount-table tr td:first-child {

	color: var(--theme-muted);

	font-weight: bold;
}

.myaccount-table tr td {

	padding: 15px !important;
}

.myaccount-table tr:last-child td {

	border: 0;
}


/* =========================================================
   GENERAL TABLE UI
========================================================= */

.general-table-ui {

	width: 100%;

	table-layout: fixed;

	background: var(--theme-panel);

	border:
		1px solid var(--theme-border);

	padding: 10px;

	margin: 10px 0;

	color: #d5d5d5;
}

.general-table-ui tr td {

	padding: 9px;

	vertical-align: middle !important;

	text-align: center;
}

.general-table-ui tr:first-child td {

	color: var(--theme-red-light);

	font-weight: bold;
}

.general-table-ui tr:nth-child(2n+2) td {

	background:
		rgba(255, 255, 255, 0.025);
}

.general-table-ui img {

	width: 50px;

	height: auto;

	box-shadow:
		0 0 8px rgba(0, 0, 0, 0.60);

	border-radius: 2px;
}


/* =========================================================
   PAYPAL
========================================================= */

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

.paypal-gateway-content {

	background: var(--webenginecolor29);

	border:
		2px solid var(--webenginecolor30);

	padding: 15px;

	overflow: auto;

	border-radius: 3px;

	font-weight: bold;
}

.paypal-gateway-logo {

	width: 100%;

	height: 100px;

	background:
		var(--webenginecolor31)
		url('../img/paypal-logo-200-68.png')
		no-repeat center;

	background-size: contain;

	margin-bottom: 15px;

	border-radius: 3px;
}

.paypal-gateway-conversion-rate {

	margin: 0 auto;

	text-align: center;

	color: var(--theme-text);

	font-size: 18px;

	padding: 10px 0;
}

.paypal-gateway-form {

	width: 100%;

	margin: 20px auto;

	text-align: center;
}

.paypal-gateway-form div {

	display: inline-block;

	padding: 0 10px;

	color: var(--theme-text);

	font-size: 24px;
}

.paypal-gateway-form input[type=text] {

	width: 60px;

	font-size: 24px;

	border:
		2px solid var(--webenginecolor32);

	border-radius: 3px;

	color: var(--webenginecolor32);
}

.paypal-gateway-continue {

	margin: 0 auto;

	text-align: center;
}

.paypal-gateway-continue input[type=submit] {

	background:
		url('../img/paypal-submit.jpg')
		no-repeat;

	width: 200px;

	height: 40px;

	border: 0;
}

.module-requirements {

	font-size: 12px;

	margin-top: 20px;
}


/* =========================================================
   SIDEBAR
========================================================= */

.panel-sidebar {

	background:
		linear-gradient(
			135deg,
			#181818,
			#111111
		);

	border:
		1px solid var(--theme-border);

	border-radius: 3px;

	box-shadow:
		0 10px 30px rgba(0, 0, 0, 0.30);

	overflow: hidden;
}

.panel-sidebar > .panel-heading {

	background:
		linear-gradient(
			to right,
			#1d1d1d,
			#151515
		) !important;

	color: var(--webenginecolor6) !important;

	font-family: 'PT Sans', sans-serif;

	border: 0;

	border-radius: 0;

	border-bottom:
		2px solid var(--theme-red) !important;

	padding: 13px 15px;
}

.panel-sidebar > .panel-heading .panel-title {

	font-size: 14px;

	font-weight: bold;

	text-transform: uppercase;

	letter-spacing: 0.5px;
}

.panel-sidebar > .panel-body {

	padding: 18px;

	background: transparent;
}


/* LOGIN */

.panel-sidebar .form-control {

	background: #101010;

	border-color:
		rgba(255, 255, 255, 0.10);

	color: #ffffff;

	height: 38px;
}

.panel-sidebar .form-control:focus {

	border-color: var(--theme-red);

	box-shadow:
		0 0 0 2px rgba(209, 31, 31, 0.10);
}


/* USER CONTROL PANEL */

.panel-usercp {

	background:
		linear-gradient(
			rgba(10, 10, 10, 0.75),
			rgba(10, 10, 10, 0.90)
		),
		url('../img/usercp_bg.jpg')
		no-repeat top center;

	background-size: cover;
}

.panel-usercp ul {

	list-style-type: none;

	padding: 0;

	margin: 0;
}

.panel-usercp ul li {

	display: table;

	width: 100%;

	vertical-align: middle;

	line-height: 34px;

	border-bottom:
		1px solid rgba(255, 255, 255, 0.05);
}

.panel-usercp ul li:last-child {

	border-bottom: 0;
}

.panel-usercp ul li a {

	color: var(--webenginecolor33) !important;

	font-weight: bold;
}

.panel-usercp ul li a:active,
.panel-usercp ul li a:hover {

	color: var(--theme-red-light) !important;

	padding-left: 4px;
}

.panel-usercp ul li img {

	position: relative;

	top: -2px;

	width: 25px;

	height: 25px;

	margin-right: 8px;
}


/* BANNER */

.sidebar-banner {

	margin: 20px 0;

	border: 0;
}

.sidebar-banner img {

	width: 100%;

	box-shadow:
		0 10px 30px rgba(0, 0, 0, 0.40);

	border:
		1px solid var(--theme-border);

	border-radius: 3px;

	transition: var(--theme-transition);
}

.sidebar-banner img:hover {

	transform: translateY(-2px);

	border-color:
		rgba(209, 31, 31, 0.45);
}


/* =========================================================
   GENERAL PANEL
========================================================= */

.panel-general {

	margin-bottom: 25px;

	background: var(--theme-panel);

	border:
		1px solid var(--theme-border);

	border-radius: 3px;

	color: var(--theme-text);

	box-shadow:
		0 8px 25px rgba(0, 0, 0, 0.25);
}

.panel-body .panel-title {

	color: #ffffff;

	font-family: 'PT Sans', sans-serif;

	font-size: 14px;

	border-bottom:
		1px solid var(--theme-border);

	margin-bottom: 20px !important;

	padding-bottom: 10px;

	font-weight: bold;

	text-transform: uppercase;
}


/* =========================================================
   ADD STATS
========================================================= */

.panel-addstats {

	margin-bottom: 25px;

	background: var(--theme-panel);

	border:
		1px solid var(--theme-border);

	border-radius: 3px;

	color: var(--theme-text);
}

.panel-addstats .character-avatar img {

	width: 100px;

	height: auto;

	box-shadow:
		0 0 12px rgba(0, 0, 0, 0.70);

	border-radius: 3px;
}

.panel-addstats .character-name {

	color: #ffffff;

	font-family: 'PT Sans', sans-serif;

	font-size: 18px;

	border-bottom:
		1px solid var(--theme-border);

	padding: 20px 0;

	margin-bottom: 20px !important;

	font-weight: bold;
}


/* =========================================================
   DOWNLOADS
========================================================= */

.panel-downloads {

	margin-bottom: 25px;

	background: var(--theme-panel);

	border:
		1px solid var(--theme-border);

	border-radius: 3px;

	color: var(--theme-text);
}

.download-description {

	font-size: 11px;

	position: relative;

	top: -7px;

	color: var(--theme-muted);
}

.online-status-indicator {

	margin-left: 5px;
}


/* =========================================================
   WEBENGINE
========================================================= */

.webengine-powered {

	color: var(--theme-muted) !important;
}

.webengine-powered:active,
.webengine-powered:hover {

	color: var(--theme-red-light) !important;
}


/* =========================================================
   GLOBAL TOP BAR
========================================================= */

.global-top-bar {

	width: 100%;

	background:
		linear-gradient(
			to right,
			#050505,
			#101010,
			#050505
		);

	color: var(--webenginecolor35);

	padding: 8px 0 5px 0;

	text-transform: uppercase;

	font-size: 11px;

	border-bottom:
		1px solid rgba(255, 255, 255, 0.05);
}

.global-top-bar .global-top-bar-content {

	width: 1040px;

	margin: 0 auto;
}

.global-top-bar .global-top-bar-content .row {

	margin: 0;

	padding: 0;
}

.global-top-bar a.logout {

	color: var(--webenginecolor36) !important;
}

.global-top-bar a {

	color: var(--webenginecolor37) !important;
}

.global-top-bar a:hover {

	color: var(--webenginecolor38) !important;
}

.global-top-bar-nopadding {

	padding: 0 !important;
}

.global-top-bar-separator {

	padding: 0 5px;
}


/* =========================================================
   LANGUAGE PICKER
========================================================= */

.webengine-language-switcher {

	display: inline-block;

	list-style: none;

	padding: 0 !important;

	margin: 0 !important;

	width: 46px;

	height: 19px;

	overflow: hidden;

	transition: var(--theme-transition);
}

.webengine-language-switcher:hover {

	width: 400px;
}

.webengine-language-switcher li {

	display: inline-block;

	list-style-type: none;

	background: var(--webenginecolor39);

	padding: 0 5px 2px 5px;

	border-radius: 2px;

	transition: var(--theme-transition);
}

.webengine-language-switcher li:hover {

	filter: brightness(130%);
}

.webengine-language-switcher li a {

	color: var(--webenginecolor40);
}

.webengine-language-switcher li a:hover {

	color: var(--webenginecolor41) !important;
}


/* =========================================================
   HEADER INFO
========================================================= */

.header-info-container {

	width: 1040px;

	margin: 0 auto;

	text-align: right;
}

.header-info-container .header-info {

	display: inline-block;

	width: 350px;

	background:
		var(--webenginecolor42);

	backdrop-filter: blur(10px);

	margin: 0;

	padding: 18px 20px;

	overflow: auto;

	box-shadow:
		0 10px 30px var(--webenginecolor45);

	border-radius: 3px;

	text-shadow:
		1px 1px 3px var(--webenginecolor46);

	color: var(--webenginecolor44);

	border:
		1px solid var(--webenginecolor43);

	font-size: 12px;
}

.header-info-container .header-info .header-info-block {

	padding: 0;

	color: var(--webenginecolor44);
}

.header-info-container .header-info .header-info-block #tServerTime,
.header-info-container .header-info .header-info-block #tLocalTime {

	color: var(--webenginecolor47);
}

.header-info-container .header-info .header-info-block #tServerDate,
.header-info-container .header-info .header-info-block #tLocalDate {

	color: var(--webenginecolor48);
}

.header-info-container .header-info .header-info-block .online-count {

	color: var(--webenginecolor49);
}


/* =========================================================
   ONLINE BAR
========================================================= */

.webengine-online-bar {

	width: 100%;

	background: var(--webenginecolor50);

	border:
		1px solid var(--webenginecolor51);

	height: 8px;

	margin-top: 10px;

	margin-bottom: 10px;

	padding: 0;

	border-radius: 4px;

	overflow: hidden;

	transition: var(--theme-transition);
}

.webengine-online-bar .webengine-online-bar-progress {

	height: 8px;

	background:
		linear-gradient(
			to right,
			#169b51,
			#4dff8a
		);

	border-radius: 0 2px 2px 0;
}

.webengine-online-bar:hover {

	filter: brightness(120%);
}


/* =========================================================
   MY ACCOUNT - CHARACTER LIST
========================================================= */

.myaccount-character-block {

	background:
		linear-gradient(
			135deg,
			#1d1d1d,
			#111111
		);

	border:
		1px solid var(--theme-border);

	padding: 6px;

	border-radius: 3px;

	display: inline-block;

	margin: 0 auto;

	box-shadow:
		0 10px 25px var(--webenginecolor55);
}

.myaccount-character-block img {

	width: 100px;

	height: auto;

	border-radius: 2px;

	box-shadow:
		0 0 8px var(--webenginecolor56);

	transition: var(--theme-transition);
}

.myaccount-character-block img:hover {

	filter: brightness(120%);
}

.myaccount-character-block-location {

	font-size: 12px;

	color: var(--webenginecolor57);

	margin-bottom: 20px;

	margin-top: 4px;

	line-height: 1.2;
}

.myaccount-character-block-level {

	position: relative;

	top: -77px;

	display: inline-block;

	background: var(--webenginecolor58);

	padding: 2px 6px;

	border-radius: 2px;

	color: var(--webenginecolor59);

	font-size: 10px;
}

.myaccount-character-name a {

	font-weight: bold;

	color: var(--webenginecolor60);

	font-size: 16px;
}

.myaccount-character-name a:hover {

	color: var(--theme-red-light);
}


/* =========================================================
   RANKINGS FILTER BY CLASS
========================================================= */

.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: var(--theme-transition);

	margin-bottom: 10px;
}

.rankings-class-filter li:hover {

	filter: grayscale(0%);
}

.rankings-class-filter-selection {

	display: inline-block;

	width: 75px;

	text-align: center;

	color: var(--webenginecolor61);

	font-size: 11px;

	cursor: pointer;
}

.rankings-class-filter-selection:hover {

	color: #ffffff !important;
}

.rankings-class-filter-selection:hover img {

	filter: brightness(125%);
}

.rankings-class-filter-selection img {

	width: 42px;

	height: auto;

	border-radius: 50%;

	margin-bottom: 5px;

	transition: var(--theme-transition);

	box-shadow:
		0 0 12px var(--webenginecolor62);
}

.rankings-class-filter-grayscale {

	filter: grayscale(100%);
}


/* =========================================================
   EVENT TIMER BLOCK
========================================================= */

.event-schedule-open {

	color: #42e883;
}

.event-schedule-inprogress {

	color: #ffb020;
}

.panel-sidebar-events .smalltext {

	font-size: 11px;

	position: relative;

	top: -5px;
}


/* =========================================================
   BOOTSTRAP OVERRIDES
========================================================= */

.panel {

	color: var(--theme-text);
}

.panel-default {

	background: var(--theme-panel);

	border-color: var(--theme-border);
}

.panel-default > .panel-heading {

	background: #1a1a1a;

	color: #ffffff;

	border-color: var(--theme-border);
}

.alert {

	border-radius: 3px;
}

.alert-info {

	background: #15232c;

	border-color: #23485b;

	color: #b9e5ff;
}

.table {

	color: #d4d4d4;
}

.table > thead > tr > th {

	border-bottom:
		1px solid var(--theme-border);
}

.table > tbody > tr > td {

	border-top:
		1px solid rgba(255, 255, 255, 0.06);
}

.table-striped > tbody > tr:nth-of-type(odd) {

	background:
		rgba(255, 255, 255, 0.025);
}

.table-hover > tbody > tr:hover {

	background:
		rgba(209, 31, 31, 0.06);
}


/* =========================================================
   SCROLLBAR
========================================================= */

::-webkit-scrollbar {

	width: 10px;
}

::-webkit-scrollbar-track {

	background: #090909;
}

::-webkit-scrollbar-thumb {

	background: #2d2d2d;

	border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {

	background: var(--theme-red-dark);
}


/* =========================================================
   UTILIDADES VISUALES
========================================================= */

.text-muted {

	color: var(--theme-muted) !important;
}

hr {

	border: 0;

	border-top:
		1px solid var(--theme-border);
}

code {

	background: #0d0d0d;

	color: #ff7a7a;

	border:
		1px solid rgba(255, 255, 255, 0.06);
}


/* =========================================================
   RESPONSIVE DEL TEMPLATE BASE
   (NO AFECTA EL MÍNIMO DE 1040PX DEL CMS)
========================================================= */

@media only screen and (max-width: 1100px) {

	#container,
	.footer,
	.global-top-bar .global-top-bar-content,
	.header-info-container {

		width: 1040px;
	}

}