/* Contenedor principal para posicionamiento relativo */
.menu-wrapper {
    position: relative;
    display: inline-block;
    font-family: Arial, sans-serif;
    /* No necesita fondo oscuro aquí a menos que envuelva un área más grande */
}

/* Estilo del Botón (Ajustado a colores oscuros) */
.toggle-button {
    color: white;
    padding: 10px 15px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s;
}



/* Estilo del Menú (contenido desplegable - ¡Modo Oscuro!) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #333; /* Fondo oscuro del menú */
    min-width: 300px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.8); /* Sombra más oscura y visible */
    z-index: 1;
    border-radius: 5px;
    margin-top: 5px;
    border: 1px solid #555; /* Borde suave */
}

/* Estilo de los enlaces dentro del menú */
.dropdown-content a {
	font-size: 1rem;
    color: #f0f0f0; /* Texto claro */
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    border-bottom: 1px solid #444; /* Separador sutilmente más oscuro */
}

.dropdown-content a:hover {
    background-color: #4a4a4a; /* Resaltado al pasar el ratón */
}

/* Clase que se añade/quita con JavaScript para MOSTRAR el menú */
.show {
    display: block;
}
/* Nuevo Contenedor para el Scroll */
.schedules-scroll-container {
    max-height: 440px; /* La altura máxima que querés que ocupe */
    overflow-y: scroll; /* ¡Esto crea la barra de desplazamiento vertical! */
    overflow-x: hidden; /* Oculta el scroll horizontal si no es necesario */
    padding-right: 5px; /* Pequeño espacio para la barra de desplazamiento */
    /* Mantén el fondo oscuro del modo oscuro para un look uniforme */
    background-color: #1e1e1e;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

/* Opcional: Estilo para la barra de desplazamiento (solo navegadores Webkit) */
.schedules-scroll-container::-webkit-scrollbar {
    width: 8px;
}

.schedules-scroll-container::-webkit-scrollbar-thumb {
    background-color: #555; /* Color del "pulgar" de la barra */
    border-radius: 4px;
}

.schedules-scroll-container::-webkit-scrollbar-track {
    background-color: #333; /* Color del fondo de la barra */
}

/* Estilos generales de la tabla de horarios (Modo Oscuro) */
.schedules {
    width: 100%;
    border-collapse: collapse;
    font-family: Arial, sans-serif;
    color: #f0f0f0; /* Texto claro por defecto */
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); /* Sombra más pronunciada */
    overflow: hidden;
}

/* Estilos para cada fila de la tabla */
.schedules tr {
    border-bottom: 1px solid #333; /* Separador oscuro */
}

/* Estilo para la celda (td) que contiene toda la información del evento */
.schedules td {
    padding: 5px 8px;
    line-height: 1.2;
    display: block;
}

/* Efecto de hover en las filas */
.schedules tr:hover {
    background-color: #2a2a2a; /* Fondo más claro al pasar el ratón */
    transition: background-color 0.3s ease;
}

/* Estilos para el nombre del evento (clase .ename) */
.schedules .ename {
    font-weight: bold;
    font-size: 1.1em;
    color: #e0e0e0; /* Color claro para el nombre */
    display: inline-block;
    max-width: 60%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Estilos para "Left Time" y "Server Time" (clase .other) */
.schedules .other {
    font-size: 0.9em;
    color: #a0a0a0; /* Color gris suave */
    margin-right: 10px;
}

/* Ajuste para el texto que flota a la derecha ("Left Time") */
.schedules .other[style="float:right"] {
    font-weight: 600;
    color: #c0c0c0; /* Color más visible */
    margin-right: 0;
}

/* Estilos para el tiempo restante (clase .sortTable .timepro) */
.schedules .sortTable.timepro {
    font-weight: bold;
    font-size: .8em;
    padding: 2px 6px;
    border-radius: 4px;
    float: right;
    clear: right;
    margin-top: 5px;
    /* Ajustado para el modo oscuro, el texto del contador debe ser oscuro */
    color: #1e1e1e;
}

/* Estilo específico para eventos que están a punto de comenzar (clase .ontime) */
.schedules .timepro.ontime {
    background: #2e3825;
    border: 1px solid #7a8540;
    border-radius: 6px;
    color: #d6d1b1;
    box-shadow: 0 1px 3px rgba(76, 175, 80, 0.4);
}

/* Estilo específico para eventos que están en el futuro (clase .outtime) */
.schedules .timepro.outtime {
background: rgb(255 159 34 / .2);
    border: 1px solid #ff9f00;
    border-radius: 6px;
	color: aliceblue;
}

/* Limpieza de floats */
.schedules td:after {
    content: "";
    display: table;
    clear: both;
}

/* Media query para pantallas pequeñas (móviles) */
@media (max-width: 600px) {
    .schedules td {
        padding: 12px 15px;
    }

    .schedules .ename,
    .schedules .other {
        font-size: 1em;
    }
}

/* Nuevas reglas para la funcionalidad de expansión */
.schedules-container {
    /* El contenedor es esencial para limitar la altura */
    max-height: 400px;
    overflow: hidden;
    position: relative; /* Necesario para posicionar el gradiente y el botón */
    transition: max-height 0.5s ease-out; /* Animación de expansión */
}

/* Clase para expandir el contenedor */
.schedules-container.expanded {
    max-height: 3000px; /* Un valor grande para que se muestre todo */
    overflow: visible;
}

/* Gradiente de desvanecimiento para indicar que el contenido está oculto */
.schedules-container::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px; /* Altura del desvanecimiento */
    background: linear-gradient(to top, #1e1e1e, transparent); /* Gradiente del modo oscuro */
    pointer-events: none; /* Permite hacer clic a través del gradiente */
    opacity: 1;
    transition: opacity 0.5s;
}

/* Ocultar el gradiente cuando se expande */
.schedules-container.expanded::after {
    opacity: 0;
    height: 0;
}

/* Estilo para el botón de expansión */
#expand-button {
    display: block;
    width: 100%;
    padding: 10px;
    margin-top: -10px; /* Solapa ligeramente con el contenedor */
    text-align: center;
    cursor: pointer;
    background-color: #383838; /* Fondo del botón */
    color: #fff;
    border: none;
    border-top: 2px solid #555;
    border-radius: 0 0 8px 8px; /* Solo esquinas inferiores */
    font-weight: bold;
    transition: background-color 0.3s;
}

#expand-button:hover {
    background-color: #505050;
}



/* Estilos para el Contenedor Principal */
.castle-siege-banner {
    display: grid;
    /* Define 4 columnas: 
       - La primera (logo) ocupa 2 partes (similar a col-2)
       - La segunda y tercera ocupan 3 partes (similar a col-3)
       - La última (contador) ocupa 4 partes (similar a col-4)
       La suma es 2+3+3+4 = 12, imitando el sistema de 12 columnas de Bootstrap.
    */
    grid-template-columns: 2fr 3fr 3fr 4fr;
    /* Para centrar los elementos verticalmente en la fila */
    align-items: center; 
    /* Estilo opcional para que se vea como un banner */
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc; /* Ejemplo de borde */
    background-color: #f9f9f9; /* Ejemplo de fondo */
}

/* Estilos para las Celdas/Columnas */

/* Aplicar 'text-align: center' a todas las celdas */
.castle-siege-banner > div {
    text-align: center;
    /* Puedes añadir padding si lo necesitas */
    /* padding: 5px; */
}

/* Clases de Bootstrap simuladas para mayor claridad */
/* Aunque grid-template-columns ya lo define, si quisieras usar clases específicas: */
.col-sm-2 {
    /* Ocupa la primera columna de 2fr */
    grid-column: 1 / 2;
}

.col-xs-3:nth-of-type(1) {
    /* Ocupa la segunda columna de 3fr */
    grid-column: 2 / 3;
}

.col-xs-3:nth-of-type(2) {
    /* Ocupa la tercera columna de 3fr */
    grid-column: 3 / 4;
}

.col-xs-4 {
    /* Ocupa la cuarta columna de 4fr */
    grid-column: 4 / 5;
}

/* Estilo para simular 'vcenter' (centrado vertical) */
/* Con 'align-items: center;' en el contenedor principal, esto ya está cubierto. */
/* Si tuvieras contenido muy grande, podrías añadir: */
.vcenter {
    /* La propiedad align-self: center; en el elemento hijo aseguraría el centrado vertical */
    align-self: center; 
}


/* CASTLE SIEGE BANNER */
.castle-siege-banner {
	width: 1040px;
	background: #000 url('../img/castle_siege_banner_bg.jpg') no-repeat center center;
	background-size: cover;
	margin: 0px auto;
	padding: 20px;
	-moz-box-shadow: 0 0 10px #000;
	-webkit-box-shadow: 0 0 10px #000;
	box-shadow: 0 0 10px #000;
	overflow: auto;
	font-family: 'Fredoka One', cursive;
	color: #74beff;
	-webkit-border-radius: 5px 5px 0px 0px;
    -moz-border-radius: 5px 5px 0px 0px;
    border-radius: 5px 5px 0px 0px;
    -khtml-border-radius: 5px 5px 0px 0px;
	text-shadow: 1px 1px 3px #000000;
}
	.castle-siege-banner img {
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		-khtml-border-radius: 5px;
		-moz-box-shadow: 0 0 10px #000;
		-webkit-box-shadow: 0 0 10px #000;
		box-shadow: 0 0 10px #000;
	}
	.castle-siege-banner .guild_owner, .castle-siege-banner .guild_owner a {
		color: #ffffff;
		font-size: 45px;
	}
	.castle-siege-banner .guild_master, .castle-siege-banner .guild_master a {
		color: #ffffff;
		font-size: 45px;
	}
	.castle-siege-banner .guild_countdown {
		color: #ffffff;
		font-size: 45px;
	}
		.castle-siege-banner .guild_countdown span {
			color: #ffcc00;
			font-size: 24px;
		}


/* Estilos para la tabla de información en modo oscuro */
.info-deidad {
    width: 100%;
    /* Estilos de la tabla general */
    border-collapse: collapse; 
    margin: 20px 0; 
    font-family: 'PT Sans', sans-serif; /* Usando una fuente similar a tu CSS anterior */
    color: #e0e0e0; /* Color del texto claro */
    background-color: #1e1e1e; /* Fondo muy oscuro de la tabla, similar a tu body */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6); /* Sombra marcada para profundidad */
    border: 1px solid #3a3a3a; /* Borde sutil y oscuro */
    border-radius: 4px; /* Bordes ligeramente redondeados */
}

/* Estilos de la cabecera (Header) o filas de título */
.info-deidad th {
    background-color: #2c2c2c; /* Fondo oscuro para la cabecera */
    color: #ff6666; /* Rojo claro para destacar los títulos, similar al de tus enlaces activos */
    text-align: left;
    padding: 12px 15px;
    font-size: 16px;
    border-bottom: 2px solid #ff4444; /* Borde de acento rojo */
    text-transform: uppercase;
}

/* Estilos de las celdas de datos (filas normales) */
.info-deidad td {
    padding: 10px 15px;
    border-bottom: 1px solid #333333; /* Separador de fila oscuro */
    vertical-align: top;
    line-height: 1.4;
}

/* Color de texto para la primera columna (etiquetas/nombres) */
.info-deidad td:first-child {
    font-weight: bold;
    color: #aaaaaa; /* Gris claro para las etiquetas */
    width: 30%; /* Asumiendo que es una tabla de clave-valor */
}

/* Estilos para filas alternas (striped rows) */
.info-deidad tr:nth-child(even) {
    background-color: #242424; /* Un tono un poco más oscuro que el fondo para distinción */
}

/* Estilo al pasar el ratón (hover) */
.info-deidad tr:hover {
    background-color: #383838; /* Resaltado sutil en hover */
}

/* Estilos para la última fila */
.info-deidad tr:last-child td {
    border-bottom: none;
}

/* Estilo específico para resaltar valores importantes (ej: stats, precios) */
.info-deidad .highlight-value {
    color: #00cc00; /* Verde brillante para valores positivos */
    font-weight: bold;
    font-size: 1.1em;
}

/* Estilo para los pies de página de la tabla (si existieran) */
.info-deidad tfoot td {
    background-color: #2c2c2c;
    font-size: 0.9em;
    color: #999999;
}
.admincp-button {
	position: absolute;
	top: 150px;
	left: 10px;
	background: #333333 !important; /* Oscuro */
	border: 2px solid #e0e0e0 !important; /* Claro */
	color: #e0e0e0 !important; /* Claro */
	font-weight: bold !important;
	z-index: 1000;
}
/* RANKINGS MODULE - VERSIÓN NOVVEDOSA DARK MODE */
.rankings-table {
	width: 100%;
	border-spacing: 0;
	border-collapse: collapse;
	background-color: #1a1a1a; /* Fondo muy oscuro para el contraste */
	border-radius: 8px; /* Bordes suaves para el contenedor */
	overflow: hidden; /* Asegura que el contenido respete el border-radius */
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); /* Sombra intensa para "levantar" la tabla */
}

/* Estilos de las imágenes de clase (Se mantiene el sombreado oscuro) */
.rankings-class-image {
	width: 30px;
	height: auto;
	box-shadow: 0 0 8px rgba(255, 255, 255, 0.1); /* Sombra blanca sutil */
	border-radius: 4px; 
	transition: transform 0.3s ease; /* Efecto suave al interactuar */
}
.rankings-table tr td {
	padding: 15px 10px; /* Más padding para que respire */
	font-size: 16px;
	vertical-align: middle !important;
	text-align: center;
	color: #cccccc; /* Gris claro para el texto principal */
	border-bottom: 1px solid #2d2d2d; /* Separador de línea más fino y oscuro */
	transition: background-color 0.3s ease;
}

/* Efecto Hover: Resplandor sutil al pasar el ratón */
.rankings-table tr:not(:first-child):hover td {
    background-color: #242424; /* Un ligero cambio de tono */
    color: #ffffff; /* Texto blanco puro */
    /* Resplandor sutil en la línea inferior al hacer hover */
    border-bottom: 1px solid #4a4a4a;
}

/* Estilo para la columna de la Posición (Place) */
.rankings-table-place {
	color: #777777; /* Gris medio para el texto del lugar */
	font-weight: bold;
	font-size: 26px; /* Aumenta el tamaño */
	letter-spacing: 1px;
	text-shadow: 0 0 5px rgba(255, 255, 255, 0.05); /* Sombra de texto sutil */
}

/* Estilos para el PODIO (Fila del Puesto 1) */
.rankings-table tr:first-child td {
	/* Degradado que da un efecto de energía o élite */
	background: linear-gradient(90deg, #301414 0%, #1e1e1e 50%, #301414 100%);
	color: #ff8888; /* Rojo más brillante para la élite */
	border-bottom: 3px solid #ff4444; /* Borde inferior de acento */
	font-weight: bold;
	box-shadow: inset 0 -5px 10px rgba(255, 68, 68, 0.2); /* Sombra interna roja */
}
.rankings-table tr:first-child .rankings-table-place {
	color: #ffff00; /* Oro para el Puesto 1 */
	text-shadow: 0 0 10px #ffc300;
}

/* Estilo para las Filas 2 y 3 (Se puede aplicar en HTML con clases si es posible, si no, se deja así) */
/* Este es un ejemplo de cómo podrías estilizar el Puesto 2 y 3 con clases CSS */
.rankings-table .rank-2 td {
    background-color: #262626;
    border-left: 3px solid #b3b3b3; /* Plata para el 2do puesto */
}
.rankings-table .rank-3 td {
    background-color: #262626;
    border-left: 3px solid #cd7f32; /* Bronce para el 3er puesto */
}
.rankings-update-time {
	text-align: right;
	font-size: 11px;
	color: #666666; /* Gris oscuro para texto secundario */
	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: #aaaaaa; /* Gris claro */
	font-size: 24px;
}
.rankings_menu a {
	display: inline-block;
	width: 150px;
	border: 1px solid #444444; /* Borde oscuro */
	text-align: center;
	padding: 2px 0px;
	margin: 2px;
	background: #3a3a3a; /* Fondo oscuro del botón */
	-moz-border-radius: 2px;
	border-radius: 2px;
	color: #aaaaaa; /* Texto gris claro */
}
.rankings_menu a.active {
	color: #f1f1f1; /* Texto blanco en activo */
	border-color: #f1f1f1; /* Borde blanco en activo */
}
.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: #2c2c2c; /* Fondo oscuro */
	border: 1px solid #444444; /* Borde oscuro */
}
.myaccount-table tr td:first-child {
	color: #aaaaaa; /* Gris claro */
	font-weight: bold;
}
.myaccount-table tr td {
	border-bottom: 1px solid #444444; /* Borde oscuro */
	padding: 15px !important;
	color: #e0e0e0; /* Texto claro */
}
.myaccount-table tr:last-child td {
	border: 0px;
}

/* GENERAL TABLE UI */
.general-table-ui {
	width: 100%;
	table-layout: fixed;
	background: #2c2c2c; /* Fondo oscuro */
	border: 1px solid #444444; /* Borde oscuro */
	padding: 10px;
	margin: 10px 0px;
}
.general-table-ui tr td {
	padding: 5px;
	vertical-align: middle !important;
	color: #e0e0e0; /* Texto claro */
}
.general-table-ui tr:first-child td {
	color: #ff4444; /* Rojo brillante */
}
.general-table-ui tr:nth-child(2n+2) td {
	background: #333333; /* Color de fila alterno oscuro */
}
.general-table-ui tr td {
	text-align: center;
}
.general-table-ui img {
	width: 50px;
	height: auto;
	-moz-box-shadow: 0 0 5px #000; /* Sombra más oscura */
	-webkit-box-shadow: 0 0 5px #000;
	box-shadow: 0 0 5px #000;
	-moz-border-radius: 0px;
	border-radius: 0px;
}

/* TERMS OF SERVICE PAGE */
.tos_list li {
	color: #ff6666; /* Rojo claro para el título de la lista */
	font-weight: bold;
	font-size: 18px;
	margin-bottom: 40px;
}
.tos_list li p {
	color: #c0c0c0; /* Gris claro para el párrafo */
	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: #333333; /* Fondo oscuro para el contenido de pasarela */
	border: 3px solid #f79433; /* Borde naranja mantenido */
	padding: 15px;
	overflow: auto;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	font-weight: bold;
	color: #e0e0e0; /* Texto claro */
}

.paypal-gateway-logo {
	width: 100%;
	height: 100px;
	background: #444444 url('../img/paypal-logo-200-68.png') no-repeat center; /* Fondo más oscuro para el logo, manteniendo la imagen */
	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: #e0e0e0; /* Texto claro */
	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: #e0e0e0; /* Texto claro */
	font-size: 24px;
}

.paypal-gateway-form input[type=text] {
	width: 60px;
	font-size: 24px;
	border: 3px solid #f79433; /* Borde naranja mantenido */
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	color: #f79433; /* Texto naranja mantenido */
	background-color: #333333; /* Fondo oscuro para el input */
}

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

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

.module-requirements {
	font-size: 12px;
	margin-top: 20px;
	color: #aaaaaa; /* Texto gris claro */
}

/* SIDEBAR */
.panel-sidebar {
	background: #2c2c2c; /* Fondo oscuro del panel */
	border: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;
	-moz-box-shadow: 0 0 10px #111111; /* Sombra más oscura */
	-webkit-box-shadow: 0 0 10px #111111;
	box-shadow: 0 0 10px #111111;
}

.panel-sidebar > .panel-heading {
	background: #333333; /* Fondo oscuro para el encabezado */
	color: #ff4444; /* Rojo brillante */
	font-family: 'PT Sans', sans-serif;
	border: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;
	border-bottom: 3px solid #ff4444;
}

.panel-usercp {
	background: url('../img/usercp_bg.jpg') no-repeat top center;
	background-size: cover;
}

.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: #3f6588 !important;
}

.panel-usercp ul li img {
	position: relative;
	top: -2px;
	width: 25px;
	height: 25px;
	margin-right: 5px;
}
.sidebar-banner {
	margin: 20px 0px;
	border: 0px;
}

.sidebar-banner img {
	-moz-box-shadow: 0 0 10px #111111; /* Sombra más oscura */
	-webkit-box-shadow: 0 0 10px #111111;
	box-shadow: 0 0 10px #111111;
	border: 0px;
	-moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -khtml-border-radius: 5px;
}

/* GENERAL PANEL STYLING */
.panel-general {
	margin-bottom: 30px;
	background: #2c2c2c; /* Fondo oscuro */
	border: 1px solid #444444; /* Borde oscuro */
	-moz-border-radius: 0px;
	border-radius: 0px;
	color: #e0e0e0; /* Texto claro */
}

.panel-body .panel-title {
	color: #aaaaaa; /* Gris claro */
	font-family: 'PT Sans', sans-serif;
	font-size: 14px;
	border-bottom: 1px solid #444444; /* Borde oscuro */
	margin-bottom: 20px !important;
	font-weight: bold;
}

/* ADD STATS MODULE */
.panel-addstats {
	margin-bottom: 30px;
	background: #2c2c2c; /* Fondo oscuro */
	border: 1px solid #444444; /* Borde oscuro */
	-moz-border-radius: 0px;
	border-radius: 0px;
	color: #e0e0e0; /* Texto claro */
}
.panel-addstats .character-avatar img {
	width: 100px;
	height: auto;
	-moz-box-shadow: 0 0 5px #000; /* Sombra más oscura */
	-webkit-box-shadow: 0 0 5px #000;
	box-shadow: 0 0 5px #000;
	-moz-border-radius: 0px;
	border-radius: 0px;
}
.panel-addstats .character-name {
	color: #aaaaaa; /* Gris claro */
	font-family: 'PT Sans', sans-serif;
	font-size: 18px;
	border-bottom: 1px solid #444444; /* Borde oscuro */
	padding: 20px 0px;
	margin-bottom: 20px !important;
	font-weight: bold;
}

/* DOWNLOADS */
.panel-downloads {
	margin-bottom: 30px;
	background: #2c2c2c; /* Fondo oscuro */
	border: 1px solid #444444; /* Borde oscuro */
	-moz-border-radius: 0px;
	border-radius: 0px;
	color: #e0e0e0; /* Texto claro */
}
	.download-description {
		font-size: 11px;
		position: relative;
		top: -7px;
		color: #999999; /* Gris medio */
	}

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

/* WEBENGINE CMS */
.webengine-powered { color: #aaaaaa !important; } /* Gris claro */
.webengine-powered:active, .webengine-powered:hover { color: #ff6666 !important; } /* Rojo claro en hover */

/* GLOBAL TOP BAR */
.global-top-bar {
	width: 100%;
	background: #000000; /* Fondo negro puro */
	color: #999999; /* Gris medio */
	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: #ff6666 !important; /* Rojo claro para logout */
	}
	.global-top-bar a {
		color: #aaaaaa !important; /* Gris claro para enlaces */
	}
	.global-top-bar a:hover {
		color: #ffffff !important; /* Blanco en hover */
	}
.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: #555555; /* Fondo oscuro */
		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: #aaaaaa; /* Gris claro */
	}
	.webengine-language-switcher li a:hover {
		color: #ffffff !important; /* Blanco en hover */
	}

/* WEBSITE LOGO */
.webengine-mu-logo {
	transition: all .3s ease;
}
	.webengine-mu-logo:hover {
		-webkit-filter: brightness(120%);
		filter: brightness(120%);
	}

/* HEADER INFO */
.header-info-container {
	width: 1040px;
	margin: 0px auto;
	text-align: right;
}
	.header-info-container .header-info {
		display: inline-block;
		width: 350px;
		background: rgba(0, 0, 0, 0.5); /* Fondo semitransparente oscuro */
		backdrop-filter: blur(5px);
		margin: 0px;
		padding: 20px;
		overflow: auto;
		-moz-box-shadow: 0 0 15px rgba(0,0,0,0.9); /* Sombra más oscura */
		-webkit-box-shadow: 0 0 15px rgba(0,0,0,0.9);
		box-shadow: 0 0 15px rgba(0,0,0,0.9);
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		-khtml-border-radius: 5px;
		text-shadow: 1px 1px 3px #000000;
		color: #ffffff;
		border: 1px solid rgba(255,255,255,0.2); /* Borde blanco con más opacidad */
		font-size: 12px;
	}
		.header-info-container .header-info .header-info-block {
			padding: 0px;
			color: #cccccc; /* Gris claro */
		}
		.header-info-container .header-info .header-info-block #tServerTime, .header-info-container .header-info .header-info-block #tLocalTime {
			color: #ffffff;
		}
		.header-info-container .header-info .header-info-block #tServerDate, .header-info-container .header-info .header-info-block #tLocalDate {
			color: #dddddd; /* Blanco grisáceo */
		}
		.header-info-container .header-info .header-info-block .online-count {
			color: #00ff00; /* Verde brillante (mantenido) */
		}
	
/* ONLINE BAR */
.webengine-online-bar {
	width: 100%;
	background: #333333; /* Fondo oscuro */
	border: 1px solid #777777; /* Borde gris oscuro */
	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: #00cc00 url('../img/online_progress_bar.jpg') no-repeat left center; /* Verde ligeramente ajustado */
		-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: #444; /* Fondo oscuro */
	border: 1px solid #777; /* Borde gris oscuro */
	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.7); /* Sombra más oscura */
	-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.7);
	box-shadow: 0 0 10px rgba(0,0,0,0.7);
}
	.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: #e0e0e0; /* Texto claro */
	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.7); /* Fondo más opaco */
	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: #e0e0e0; /* Texto claro */
	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;
	background: #333333; /* Fondo oscuro para el filtro */
}

	.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 li:hover {
		-webkit-filter: grayscale(0%) brightness(120%); /* Efecto hover mejorado */
		filter: grayscale(0%) brightness(120%);
	}

.rankings-class-filter-selection {
	display: inline-block;
	width: 75px;
	text-align: center;
	color: #e0e0e0; /* Texto claro */
	font-size: 11px;
	cursor: pointer;
}

	.rankings-class-filter-selection:hover {
		color: #ffffff !important; /* Blanco en hover */
	}

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

.rankings-class-filter-selection img {
	width: 40px;
	height: auto;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	-khtml-border-radius: 50%;
	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.6); /* Sombra más oscura */
	-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.6);
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.6);
}

.rankings-class-filter-grayscale {
	-webkit-filter: grayscale(80%) brightness(70%); /* Grises más profundos en modo oscuro */
	filter: grayscale(80%) brightness(70%);
}