/*
 * MuCMS
 * Here you can add your custom CSS styles
 * This file is excluded from updates so your custom styles won't be replaced
 */

/* Aplica solo a las noticias, para no afectar otros paneles del sitio */
/* solo las noticias de este bloque */
.page-title {
	color: #e84c6b;
	font-family: 'PT Sans', sans-serif;
	font-size: 32px;
	margin-bottom: 10px;
	font-weight: bold;
}

/* SIDEBAR */
.panel-sidebar {
    background: #1e1a2b;                     /* fondo oscuro tipo panel */
    border: 0;
    border-radius: 0;
    box-shadow: 0 0 18px rgba(0,0,0,0.7);    /* sombra más acorde al tema oscuro */
}

.panel-sidebar > .panel-heading {
    background: #221e32;                     /* barra superior del panel */
    color: #ff2e6d;                          /* color tipo "My Account" */
    font-family: 'Oswald', sans-serif;
    border: 0;
    border-radius: 0;
    border-bottom: 3px solid #ff2e6d;        /* línea fucsia abajo */
}

/* PANEL MENÚ USERCP (lista de links) */
.panel-usercp {
    background: #221e32;                     /* mismo fondo que el contenido */
    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: 32px;
    border-bottom: 1px solid rgba(255,255,255,0.04); /* líneas suaves entre filas */
}

.panel-usercp ul li:last-child {
    border-bottom: 0;
}

.panel-usercp ul li a {
    color: #f5f5f5 !important;               /* texto claro como en el panel */
    font-weight: 400;
    font-family: 'Oswald', sans-serif;
    font-size: 13px;
}

.panel-usercp ul li a:hover,
.panel-usercp ul li a:active {
    color: #ff2e6d !important;               /* hover fucsia */
}

/* iconos del menú */
.panel-usercp ul li img {
    position: relative;
    top: -2px;
    width: 22px;
    height: 22px;
    margin-right: 6px;
}

/* BANNERS LATERALES */
.sidebar-banner {
    margin: 20px 0;
    border: 0;
}

.sidebar-banner img {
    box-shadow: 0 0 18px rgba(0,0,0,0.8);    /* sombra más fuerte en tema oscuro */
    border: 0;
    border-radius: 5px;
}

/* GENERAL TABLE UI */
.general-table-ui {
    width: 100%;
    table-layout: fixed;
    background: #1e1a2b;                    /* Fondo oscuro para la tabla */
    border: 1px solid #ff2e6d;;             /* Borde suave color fucsia */
    padding: 10px;
    margin: 10px 0px;
}

/* Fila por defecto */
.general-table-ui tr td {
    padding: 5px;
    vertical-align: middle !important;
    color: #f5f5f5;                        /* Texto blanco en la tabla */
}

/* Primer fila de la tabla (encabezado o primera línea) */
.general-table-ui tr:first-child td {
    color: #ff2e6d;                        /* Fucsia para la primera fila */
    font-weight: bold;
}

/* Filas alternas (2, 4, 6...) con fondo más oscuro */
.general-table-ui tr:nth-child(2n+2) td {
    background: #2a2437;                   /* Fondo más oscuro para filas pares */
}

/* Centrado de texto en todas las celdas */
.general-table-ui tr td {
    text-align: center;
}

/* Imágenes dentro de la tabla (mantén el tamaño de 50px) */
.general-table-ui img {
    width: 50px;
    height: auto;
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.2); /* Sombra suave con color blanco para contrastar */
    border-radius: 5px;                      /* Borde redondeado de las imágenes */
}

/* Estilo en hover para las filas (si quieres agregar efecto hover) */
.general-table-ui tr:hover td {
    background: #2a2437;                     /* Fondo oscuro con hover */
    cursor: pointer;
}

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

.panel-body .panel-title {
	color: #e84c6b;
	font-family: 'PT Sans', sans-serif;
	font-size: 14px;
	border-bottom: 1px solid #e84c6b75;
	margin-bottom: 20px !important;
	font-weight: bold;
}

/* 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: #e84c6b;
	margin-bottom: 20px;
	margin-top: 2px;
	line-height: 1.2;
}
.myaccount-character-block-level {
	position: relative;
	top: -77px;
	display: inline-block;
	background: rgba(0,0,0,0.5);
	padding: 0px 5px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	color: #fff;
	font-size: 10px;
}
.myaccount-character-name a {
	font-weight: bold;
	color: #ffffff;
	font-size: 16px;
}


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

/* DOWNLOADS */
.panel-downloads {
	margin-bottom: 30px;
	background: #1d1b28;
	border: 1px solid #e84c6b2b;
	-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;
}
/* LANGUAGE PICKER */
.webengine-language-switcher {
	display: flex;
	flex-wrap: wrap; /* CLAVE para que salte de fila */
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 8px 12px !important;
	/*background: #312e42;
	border: 1px solid rgba(14, 128, 210, 0.4);
	border-radius: 12px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.4);*/
	max-width: 320px; /* controla cuándo baja */
}

/* cada item */
.webengine-language-switcher li {
	flex: 0 0 calc(20% - 8px); /* 5 por fila */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 6px 8px;
	background: rgba(255,255,255,0.05);
	border-radius: 8px;
	transition: all .25s ease;
}

/* hover */
.webengine-language-switcher li:hover {
	background: #0e80d2;
	transform: translateY(-2px);
	box-shadow: 0 0 8px rgba(14, 128, 210, 0.6);
}

/* links */
.webengine-language-switcher li a {
	display: flex;
	align-items: center;
	gap: 5px;
	color: #ffffff;
	text-decoration: none;
	font-size: 13px;
	font-weight: 600;
}

/* hover texto */
.webengine-language-switcher li:hover a {
	color: #ffffff;
}

/* banderas */
.webengine-language-switcher img {
	width: 18px;
	height: 12px;
	border-radius: 2px;
}

/* RANKINGS MODULE */
.rankings-table2 {
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
    background: #2a2437; 
	border-bottom: 1px solid #282637;
    /*border: 1px solid #3f6588; */
}

.rankings-class-image {
    width: 30px;
    height: auto;
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
    border-radius: 0;
}

.rankings-table tr td {
    border-bottom: 1px solid #282637; /* Borde fucsia */
    padding: 12px;
    font-size: 18px;
    vertical-align: middle !important;
    text-align: center;
    color: #f5f5f5; /* Texto claro */
}

/* Títulos de columnas */
.rankings-table tr:first-child td {
    border-top: 0;
    background-color: #4a475f;
    border: #504d65 solid 1px;
    border-top: #1e1a2b solid 2px;
    color: #fff;
    font-size: 12px;
    text-transform: uppercase;
}
.table>thead>tr>th {
    vertical-align: middle;
    /* background: #ffffff; */
    padding: 11px;
    font-weight: 100;
}

/* Los títulos de las columnas deben resaltar más, por lo que les damos un fondo claro */
.rankings-table tr:first-child td {
    background-color: #4a475f;  /* Fondo oscuro pero distinto al del contenido */
    padding: 10px;
}

/* Estilo de la tabla */
.rankings-table-place {
    color: #ff2e6d; /* Color fucsia para el lugar (ranking) */
    font-weight: bold;
    font-size: 24px;
    text-align: center;
}

.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: 12px 0px;
    color: #ccc;
    font-size: 24px;
}

.rankings_menu a {
    display: inline-block;
    width: 150px;
    border: 1px solid #282637; /* Borde fucsia */
    text-align: center;
    padding: 10px 0px;
    margin: 2px;
    background: #1e1a2b; /* Fondo oscuro para los botones */
    border-radius: 2px;
    color: #ccc;
    transition: background-color 0.3s ease;
}

.rankings_menu a.active {
    color: #fff;
    background: #ff2e6d; /* Fondo fucsia cuando está activo */
    border-color: #ff2e6d; /* Borde fucsia cuando está activo */
}

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

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

.rankings-class-filter li:hover {
    filter: grayscale(0%);
}

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

.rankings-class-filter-selection:hover {
    color: #ff2e6d !important; /* Hover en selección */
}

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

.rankings-class-filter-selection img {
    width: 40px;
    height: auto;
    border-radius: 50%;
    margin-bottom: 5px;
    transition: all 0.3s ease;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.45); /* Sombra en las imágenes */
}

.rankings-class-filter-grayscale {
    filter: grayscale(100%);
}


/*******************/

/* CONTENEDOR DE LOS 3 TOPS */
.mainHomeBlock{
    display:flex;
    justify-content:center;
    align-items:flex-start;
    gap:12px;
    margin-bottom:30px;
}

.mainHomeBlock > div{
    height:580px !important;
    position:relative;
    flex:0 0 352px;
}

/* BLOQUE ORIGINAL, SOLO AJUSTADO */
.blockHome{
    background:
        url(../img/block-top-bg.png) center top no-repeat,
        url(../img/block-bottom-bg.png) center bottom no-repeat,
        url(../img/block-mid-bg.png) center top repeat-y;
    box-shadow:0 10px 15px 4px rgba(0,0,0,.3);
    padding:28px 18px 20px;
    width:352px;
    min-height:340px;
    overflow:hidden;
}

/* TITULO */
.h2-title{
    align-items:flex-end;
    margin-bottom:18px;
}

.h2-title-table{
    position:relative;
    border-bottom:1px solid rgba(255,255,255,.05);
    padding-bottom:18px;
}

.h2-title span{
    position:relative;
    font-size:18px;
    font-family:'Geomanist', sans-serif;
    text-transform:uppercase;
    color:#fbac3f;
    display:block;
    padding-left:25px;
}

/* CABECERA TABLA */
.tableBlock-title{
    background:url(../img/top-table-bg.png) repeat-x;
    height:36px;
    padding:0 14px;
    display:flex;
    align-items:center;
    box-shadow:0 5px 10px 2px rgba(0,0,0,.2);
    margin-bottom:8px;
    width:100%;
}

.tableBlock-title_player{
    width:60%;
}

.tableBlock-title_level{
    width:18%;
    text-align:center;
}

.tableBlock-title_score{
    width:22%;
    text-align:right;
}

/* FILAS */
.tableBlock-content{
    display:flex;
    align-items:center;
    padding:0 16px;
    position:relative;
    background-repeat:no-repeat;
    background-position:center;
    background-size:100% 100%;
    width:100%;
    margin-left:0;
}

.tableBlock-content:nth-child(odd){
    background-color:rgba(0,0,0,.1);
}

.tableBlock-content:hover{
    background-image:url(../img/hover-table.png);
}

.tableBlock-content > div{
    font-size:12px;
    font-weight:600;
    display:flex;
    align-items:center;
    position:relative;
    height:34px;
    padding-bottom:1px;
}

.tableBlock-conten_number{
    width:10%;
    color:#696868;
}

.tableBlock-conten_name{
    width:50%;
    display:flex !important;
    align-items:center;
    color:#fff;
    line-height:1.2;
    gap:6px;
}

.tableBlock-conten_name a{
    color:#fff;
    position:relative;
    text-decoration:none;
}

.tableBlock-conten_lvl{
    width:18%;
    justify-content:center;
    color:#fbac3f;
}

.tableBlock-conten_scr{
    width:22%;
    justify-content:flex-end;
    color:gray;
}

/* IMAGENES DE CLASE */
.rankings-class-image{
    width:24px;
    height:24px;
    object-fit:cover;
    flex:0 0 24px;
}

/* BOTON VER MAS, MANTENIENDO IMAGEN ORIGINAL */
.all-button{
    text-align:center;
    margin-top:20px;
}

.button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    line-height:1;
    text-decoration:none;
}

.buttonsub{
    transition:all .3s ease;
    cursor:pointer;
    background:url(../img/button.png) center center no-repeat;
    background-size:100% 100%;
    height:40px;
    width:147px;
    border:none;
    color:#fff !important;
    font-family:philosopher, sans-serif;
    font-size:12px;
    position:relative;
    z-index:1;
    text-align:center;
    text-transform:uppercase;
    letter-spacing:2px;
    box-shadow:0 0 22px 5px rgba(65,25,21,.5), 0 10px 15px 4px rgba(0,0,0,.3);
    padding:0 12px 2px;
    overflow:hidden;
    white-space:nowrap;
}

.buttonsub:hover{
    filter:brightness(1.08);
}
/*.container, .h2-title span, .h2-title-table, .h7-title span, .mainInfo, .mainsub, .wrapper, body, html, main, select:not(.form-control), ul.list li {
    position: relative;
}
.h2-title span, .h7-title span, .sub-title-ranking {
    font-size: 18px;
    font-family: 'Geomanist', sans-serif;
    text-transform: uppercase;
}
.h2-title span, .h7-title span {
    color: #fbac3f;
    display: block;
    padding-left: 25px;
}*/
.h10-title span:before, .h2-title span:before, .h7-title span:before {
    position: absolute;
    background: url(../img/title-icon.png) no-repeat;
    width: 26px;
    height: 26px;
    margin-top: -18px;
    content: "";
    top: 80%;
    filter: drop-shadow(0px 0px 10px #ff2a00);
}
.h2-title span:before {
    left: -3px;
}


/**eventos**/
    #events dt.event {
        padding: 10px;
        margin-bottom: 8px;
        border-radius: 6px;
        background: #1d1d1d;
        border: 1px solid #333;
    }

    #events dt.eventActive {
        border-color: #28a745;
        background: rgba(40, 167, 69, 0.15);
    }

    #events dt.eventOpen {
        border-color: #ffc107;
        background: rgba(255, 193, 7, 0.15);
    }

    #events .rightfloat {
        float: right;
    }

    #events .title {
        display: block;
        margin-bottom: 4px;
    }

    #events span {
        display: block;
        overflow: hidden;
    }

	/*****bosses***/
	    #bossTimer dt.boss {
        padding: 10px;
        margin-bottom: 8px;
        border-radius: 6px;
        background: #1d1d1d;
        border: 1px solid #333;
        overflow: hidden;
    }

    #bossTimer .rightfloat {
        float: right;
    }

    #bossTimer .title {
        display: block;
        margin-bottom: 4px;
    }

    #bossTimer span {
        display: block;
        font-size: 12px;
        line-height: 18px;
        overflow: hidden;
}

/**********medallacstyle**********/
.rank-medal{
    display:inline-block;
    font-size:14px;
    margin-right:3px;
    vertical-align:middle;
    filter:drop-shadow(0 0 4px rgba(0,0,0,.45));
}
.rank-medal.gold{
    text-shadow:0 0 8px rgba(255,196,0,.35);
}
.rank-medal.silver{
    text-shadow:0 0 8px rgba(210,220,235,.30);
}
.rank-medal.bronze{
    text-shadow:0 0 8px rgba(205,127,50,.30);
}

.tableBlock-conten_number{
    display:flex;
    align-items:center;
    gap:3px;
    font-weight:600;
}

/**********marquee***/
.marquee-container {
    width: 100%;
    height: 20px; /* ajusta al alto que ya tienes */
    overflow: hidden;
    display: flex;
    align-items: center;
}

.marquee {
    white-space: nowrap;
    display: inline-block;
    animation: marquee 12s linear infinite;
}

@keyframes marquee {
    0%   { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}