@font-face {
	font-family: FaceYourFears;
	src: url('../fonts/FaceYourFears.ttf');
}

@font-face {
	font-family: GeosansLight;
	src: url('../fonts/GeosansLight.ttf');
}

@font-face {
	font-family: Quantify;
	src: url('../fonts/Quantify.ttf');
}

/* latin-ext */
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 400;
  src: local('Cinzel Regular'), local('Cinzel-Regular'), url(https://fonts.gstatic.com/s/cinzel/v7/8vIJ7ww63mVu7gt7-GT7LEc.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 400;
  src: local('Cinzel Regular'), local('Cinzel-Regular'), url(https://fonts.gstatic.com/s/cinzel/v7/8vIJ7ww63mVu7gt79mT7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

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

body {
	background: #121212;
	background-image:url('../img/background.jpg');
	color: #595959;
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 14px;
	margin: 0;
	height: 100%;
}

a {
	color: #777;
	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 {
	width: 100%;
	min-width: 1000px;
	height: 450px;
	margin: 5px auto;
	text-align: center;
	overflow: hidden;
	color: #fff;
	background-image:url('../img/header1.jpg');
	background-repeat: no-repeat;
    position: relative; /* asegura que los elementos absolutos del header no se superpongan con el contenedor */
	border-bottom: 2px solid #ff471a;
	border-top: 2px solid #ff471a; 
}

/* subtle overlay for text contrast */
#header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.20), rgba(0,0,0,0.45));
    pointer-events: none;
}
	
    #header > .header-content-container {
        z-index: 2;
        position: absolute;
        top: 0;
        width: 100%;
        height: 450px;
    }
        #header > .header-content-container > .header-content {
            width: 100%;
            height: 450px;
            margin: 0px auto;
        }
	
	#header > .header-front {
		z-index: 2;
	}
	
	.site-logo {
		display: block;
		position: absolute;
		top: 370px;
		left: 155px;
	}

/* Hero CTA */
.hero-cta {
    display: inline-block;
    margin-top: 40px;
    padding: 20px 24px;
    background: rgba(0,0,0,0.60);
    border: 1px solid rgba(255,71,26,0.55);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.45);
    backdrop-filter: blur(2px);
    max-width: 560px;
    margin-right: 10px; /* pegado al borde derecho */
}
.hero-cta h1 {
    margin: 0 0 8px 0;
    font-family: 'Quantify', Arial, sans-serif;
    font-size: 44px;
    line-height: 1.2;
    color: #ffffff;
    letter-spacing: 0.5px;
    text-shadow: 0 3px 10px rgba(0,0,0,0.75);
}
.hero-cta p {
    margin: 0 0 16px 0;
    color: #ffda8a;
    font-size: 18px;
    line-height: 1.5;
    text-shadow: 0 2px 6px rgba(0,0,0,0.6);
}
.hero-cta__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.btn { display:inline-block; text-decoration:none; border-radius:8px; padding:10px 16px; font-weight:600; transition: all .2s ease-in-out; }
.btn-cta { border: 2px solid transparent; }
.btn-primary-cta { background:#ff471a; color:#fff !important; border-color:#ff471a; }
.btn-primary-cta:hover { background:#ff5c33; border-color:#ff5c33; transform: translateY(-1px); }
.btn-secondary-cta { background:transparent; color:#ffda8a !important; border-color:#ffda8a; }
.btn-secondary-cta:hover { background: rgba(255,218,138,0.12); transform: translateY(-1px); }

#headerLogo {
  display: block;
  position: absolute;
  top: 230px;
  left: 510px;
}

#container {
	width: 1000px;
	height: auto;
    margin: 10px auto 0; /* añade separación desde el header para evitar solapamiento visual */
	padding: 20px 0px;
	background: #111111;
	border: 1px solid #1e1e1e;
	-moz-box-shadow: 0 0 10px #000;
	-webkit-box-shadow: 0 0 10px #000;
	box-shadow: 0 0 10px #000;
    border-radius: 8px;
}

#registrov2 {
width:70%; 
                padding: 150px;
				padding-top: 50px;
				padding-bottom: 50px;
				background: url('https://old.muinfraworld.net/templates/redzone/img/elf2.png') no-repeat;
				-moz-box-shadow: 0 0 10px #000;
				-webkit-box-shadow: 0 0 10px #000;
				box-shadow: 0 0 10px #000;
				margin: 0px auto;
}

#content {
	width: 100%;
	overflow: auto;
	min-height: 500px;
	padding-top: 20px;
	padding-bottom: 20px;
}

.footer {
	font-family: 'Segoe UI', 'Lucida Sans Unicode', 'Lucida Grande', 'Tahoma', 'Arial', 'sans-serif';
	width: 100%;
	font-size: 14px;
	color: #ffeb99;
	padding: 60px 0px;
	background: url('../img/footer.jpg') no-repeat center center fixed;
	background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
	overflow: auto;
	border-top: 3px solid #ff471a;
	
}
	.footer > .footer-container {
		width: 1000px;
		margin: 0px auto;
	}
	.footer-time {
		font-size: 45px;
		color: #f1f1f1;
		font-weight: bold;
		position: relative;
		top: -10px;
		text-shadow: 2px 2px #000;
	}

.loader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url('img/pageloader.gif') 50% 50% no-repeat;
    opacity: .8;
}

#navbar {
    background: #171717;
	width: 100%;
	height: 50px;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 4px 14px rgba(0,0,0,0.35);
}

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

#navbar ul li {
	font-family: 'Source Sans Pro', sans-serif;
	list-style-type: none;
	display: inline-block;
	font-size: 16px;
	margin: 0px 15px;
}

#navbar ul li a {
	display: inline-block;
	color: #ffffff !important;
	text-decoration: none;
	padding: 15px 15px;
}

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

/* subtle hover/active states */
.nav-link {
    position: relative;
}
.nav-link::after {
    content: "";
    position: absolute;
    left: 15px;
    right: 15px;
    bottom: 8px;
    height: 2px;
    background: linear-gradient(90deg, rgba(255,71,26,0) 0%, rgba(255,71,26,0.9) 50%, rgba(255,71,26,0) 100%);
    opacity: 0;
    transform: translateY(4px);
    transition: all .2s ease-in-out;
}
.nav-link:hover::after, .nav-link:focus::after { opacity: 1; transform: translateY(0); }
.nav-link.is-active { background: rgba(255,71,26,0.2); }
.nav-link.is-active::after { opacity: 1; transform: translateY(0); }

/*.col-xs-8 {
    width: 66.66666667%;
}

.col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
    float: left;
}

.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.col-xs-4 {
    width: 33.33333333%;
}

.panel {
    margin-bottom: 20px;
    background-color: #fff;
    border: 1px solid transparent;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
    box-shadow: 0 1px 1px rgba(0,0,0,.05);
}*/

/* CASTLE SIEGE BANNER */
.castle-siege-banner {
	width: 970px;
	background: #000 url('../img/castle_siege_banner_bg.jpg') no-repeat center center;
	margin: 0px auto;
	padding: 30px;
	border: 1px solid #1e1e1e;
	-moz-box-shadow: 0 0 10px #000;
	-webkit-box-shadow: 0 0 10px #000;
	box-shadow: 0 0 10px #000;
	overflow: auto;
	font-family: FaceYourFears;
	color: #fff;
	-moz-border-radius: 10px;
	border-radius: 10px;
}
.cs-guild-title {
	color: #ff3333;
	font-size: 50px;
}
.cs-guild-guildowner {
	color: #ff471a;
	font-weight: bold;
	font-size: 16px;
	position: relative;
	top: -15px;
}
.cs-timeleft {
	font-family: Quantify;
	font-size: 62px;
	color: #fff;
}
.cs-timeleft span {
	color: #ff471a;
}
/* <-- CASTLE SIEGE BANNER END */


.admincp-button {
    position: fixed;
    right: 16px;
    bottom: 16px;
    top: auto;
    z-index: 1100;
}

.page-title {
    position: relative;
    color: #ffda8a;
    font-family: 'Cinzel', Arial, serif;
    font-size: 32px;
    letter-spacing: 0.5px;
    text-align:center;
    padding: 10px 12px;
    margin: 6px auto 12px auto;
    background: linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)), url('../img/news_head_bg.jpg');
    background-size: cover;
    background-position: center;
    border: 1px solid #2a2a2a;
    border-radius: 10px;
    -moz-box-shadow: 0 10px 30px rgba(0,0,0,0.35);
    -webkit-box-shadow: 0 10px 30px rgba(0,0,0,0.35);
    box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}
.page-title::after {
    content: "";
    display: block;
    width: 120px;
    height: 3px;
    margin: 8px auto 0 auto;
    background: linear-gradient(90deg, rgba(255,71,26,0) 0%, rgba(255,71,26,1) 50%, rgba(255,71,26,0) 100%);
    border-radius: 2px;
}

/* Register title variant: slightly smaller and tighter */
.page-title--register {
    font-size: 28px;
    margin-bottom: 8px;
}

@media (max-width: 767px) {
  .page-title { font-size: 24px; padding: 8px 10px; }
  .page-title::after { width: 90px; }
}

/* NEWS MODULE */
.panel-news {
	margin-bottom: 30px;
	color: #333;
	-moz-border-radius: 0px;
	border-radius: 0px;
	border: 1px solid #1e1e1e;
	-moz-box-shadow: 0 0 10px #000;
	-webkit-box-shadow: 0 0 10px #000;
	box-shadow: 0 0 10px #000;
    /* Extiende el fondo gris también bajo el heading para evitar el corte visual */
  /*  background: #141414 url('img/bglogin.png') repeat top center;*/
}
.panel-news .panel-heading {
    padding-top: 14px;
    padding-bottom: 14px;
    font-family: 'Cinzel', Arial, serif;
    background: linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)), url('../img/news_head_bg.jpg');
    background-size: cover;
    background-position: center;
    border-bottom: 4px solid #ff471a;
    /* Asegura continuidad con el body del panel */
    margin-bottom: 0;
}
.panel-news .panel-title {
    color: #ffda8a;
    font-family: 'Cinzel', Arial, serif;
    font-size: 22px;
    text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
.panel-news .panel-footer {
	border-top: 2px solid #ff471a;
	background: #141414;
	font-style: italic;
	font-size: 11px;
	height: 40px;
	color: #ff471a;
}

/* Ajuste de padding para que el fondo no se vea cortado al inicio del contenido */
.panel-news .panel-body { padding-top: 12px; }

/* Generic background for module panels */
#content .panel .panel-body {
	background: rgba(0,0,0,0.35) url('../img/bglogin.png') repeat top center;
}

/* RANKINGS MODULE */
.rankings-table {
	width: 100%;
	border-spacing: 0;
	border-collapse: collapse;
	table-layout: fixed;
	text-align:center;
	border: 1px solid #1e1e1e;
    -moz-box-shadow: 0 0 10px #000;
    -webkit-box-shadow: 0 0 10px #000;
    box-shadow: 0 0 10px #000;
	border-radius: 8px;
	overflow: hidden;
}
.rankings-table img {
	width: 30px;
	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-place {
	color: #ffcc00;
	font-weight: bold;
	font-size: 25px;
	text-align: center;
}

.rankings-table tr:nth-child(2) {
	background: #181818;
}
.rankings-table tr:nth-child(2) .rankings-table-place {
	font-size: 38px;
}

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

.rankings-table tr:first-child td {
    color: #ffda8a;
    border-bottom: 3px solid #ff471a;
    font-family: 'Cinzel', Arial, serif;
    background: linear-gradient(rgba(0,0,0,0.65), rgba(0,0,0,0.65)), #151515;
    position: sticky;
    top: 0;
    z-index: 2;
}
.rankings-update-time {
	text-align: right;
	font-size: 11px;
	color: #ccc;
	padding: 10px 0px;
}
.rankings_menu {
	width: 100%;
	overflow-x: auto;
	text-align: center;
	background: url(../img/news_head_bg.jpg);
	border: 1px solid #1e1e1e;
    -moz-box-shadow: 0 0 10px #000;
    -webkit-box-shadow: 0 0 10px #000;
    box-shadow: 0 0 10px #000;
	white-space: nowrap;
	position: sticky;
	top: 0;
	z-index: 3;
}
.rankings_menu span {
	width: 100%;
	display: inline-block;
	padding: 10px 0px;
	color: #ccc;
	font-size: 24px;
}
.rankings_menu a {
	display: inline-block;
	min-width: 120px;
	border: 1px solid #e3e3e3;
	text-align: center;
	padding: 8px 12px;
	margin: 2px;
	background: #1b1b1b;
	-moz-border-radius: 2px;
	border-radius: 2px;
	color: #ccc;
	transition: all .15s ease-in-out;
}
.rankings_menu a.active {
	color: #ff471a;
    border-color: #ff471a;
    box-shadow: inset 0 0 0 1px #ff471a;
}

/* Indicador de estado online/offline junto al nombre */
.online-status-indicator {
    width: 10px;
    height: 10px;
    margin-left: 6px;
    vertical-align: middle;
    border-radius: 50%;
    box-shadow: 0 0 4px rgba(0,0,0,0.5);
}

/* Destacar Top 1/2/3 */
.rankings-table tr:nth-child(2) { /* 1er puesto */
    background: linear-gradient(90deg, rgba(255,199,0,0.10), rgba(0,0,0,0));
}
.rankings-table tr:nth-child(3) { /* 2do puesto */
    background: linear-gradient(90deg, rgba(192,192,192,0.10), rgba(0,0,0,0));
}
.rankings-table tr:nth-child(4) { /* 3er puesto */
    background: linear-gradient(90deg, rgba(205,127,50,0.10), rgba(0,0,0,0));
}
.rankings-table tr:nth-child(2) .rankings-table-place:before { content: "🥇"; margin-right: 6px; }
.rankings-table tr:nth-child(3) .rankings-table-place:before { content: "🥈"; margin-right: 6px; }
.rankings-table tr:nth-child(4) .rankings-table-place:before { content: "🥉"; margin-right: 6px; }

/* Mejora de legibilidad en celdas y wrap de texto en nombres largos */
.rankings-table tr td {
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

/* Responsivo: scroll horizontal suave en móviles para tablas anchas */
@media (max-width: 767px) {
  .rankings-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  .rankings_menu {
    top: 0; /* se mantiene fija al inicio del contenido */
  }
}

/* Partículas doradas para banner de registro */
.sidebar-banner { position: relative; }
.sidebar-banner a { position: relative; display: inline-block; }
.sidebar-banner img { display: block; width: 100%; height: auto; }
.sidebar-banner .particle {
  position: absolute;
  width: 3px; height: 3px;
  background: radial-gradient(circle, #ffd46b 0%, #ffb400 60%, rgba(255,180,0,0) 70%);
  border-radius: 50%;
  filter: drop-shadow(0 0 4px rgba(255,200,0,0.8));
  opacity: 0;
  animation: gpFloat 1.8s linear infinite;
}
@keyframes gpFloat {
  0% { transform: translateY(10px) scale(0.7); opacity: 0; }
  15% { opacity: 0.95; }
  70% { opacity: 0.8; }
  100% { transform: translateY(-16px) scale(1.15); opacity: 0; }
}
.sidebar-banner { margin-bottom: 10px; }
.rankings_guild_logo tr td {
	border: 0px !important;
	padding: 0px !important;
	margin: 0px !important;
}
.rankings-gens-img {
	width: 50px !important;
	height: auto !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: #1b1b1b;
	border: 1px solid #1e1e1e;
    -moz-box-shadow: 0 0 10px #000;
    -webkit-box-shadow: 0 0 10px #000;
    box-shadow: 0 0 10px #000;
}
.myaccount-table tr td:first-child {
	color: #f1f1f1;
	font-weight: bold;
}
.myaccount-table tr td {
	color: #ff471a;
	border-bottom: 1px solid #0f0f0f;
	padding: 15px !important;
}
.myaccount-table tr:last-child td {
	border: 0px;
}

/* GENERAL TABLE UI */
.general-table-ui {
	width: 100%;
	table-layout: fixed;
	background: #1b1b1b;
	padding: 10px;
	margin: 10px 0px;
	border: 1px solid #1e1e1e;
    -moz-box-shadow: 0 0 10px #000;
    -webkit-box-shadow: 0 0 10px #000;
    box-shadow: 0 0 10px #000;
}
.general-table-ui tr td {
	padding: 5px;
	vertical-align: middle !important;
}
.general-table-ui tr:first-child td {
	color: #ff471a;
	font-family: 'Cinzel', Arial, serif;
}
.general-table-ui tr:nth-child(2n+2) td {
	background: #121212;
}
.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;
}

/* Footer */
.footer { padding: 0 10px 20px; }
.footer-container {
  background: linear-gradient(rgba(0,0,0,0.65), rgba(0,0,0,0.65));
  border: 1px solid #1e1e1e;
  border-radius: 10px;
  color: #ddd;
  box-shadow: 0 0 10px #000;
}
.footer-main {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 20px;
}
.footer-col { flex: 1 1 220px; min-width: 200px; }
.footer-title { color: #ffda8a; font-size: 16px; margin: 0 0 10px; }
.footer-text { color: #bbb; margin: 0; line-height: 1.5; }
.footer-list { list-style: none; padding: 0; margin: 0; }
.footer-list li { margin: 6px 0; }
.footer-list a { color: #ccc; text-decoration: none; transition: color .15s; }
.footer-list a:hover { color: #ff471a; }
.footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: 10px;
  border-top: 1px solid #1e1e1e;
  padding: 12px 20px;
  background: rgba(0,0,0,0.35);
  border-radius: 0 0 10px 10px;
}
.footer-copy { color: #aaa; font-size: 12px; }
.footer-legal { color: #777; font-size: 12px; }
@media (max-width: 767px) {
  .footer-main { padding: 16px; }
  .footer-bottom { padding: 10px 16px; }
}
/* Server Info (Sidebar) */
.panel-server-info .panel-heading .panel-title {
  color: #ffda8a;
}
.server-info-table {
  width: 100%;
  border: 1px solid #1e1e1e;
  border-collapse: collapse;
  background: #141414;
  box-shadow: 0 0 10px #000;
}
.server-info-table tr:nth-child(2n) td {
  background: rgba(255,255,255,0.02);
}
.server-info-table td {
  padding: 10px;
  border-bottom: 1px solid #0f0f0f;
  vertical-align: middle;
}
.server-info-table tr:last-child td { border-bottom: 0; }
.server-info-table .srv-label {
  color: #cccccc;
  text-align: left;
}
.server-info-table .srv-label img { 
  margin-bottom: -3px; 
  margin-right: 6px; 
  width: 18px; height: 18px; 
}
.server-info-table .srv-label span { font-weight: 600; }
.server-info-table .srv-value {
  color: #ff471a;
  text-align: right;
  font-weight: 700;
}
.server-info-table .srv-online .srv-value,
.server-info-table .srv-active-today .srv-value {
  color: #00cc66;
}
.panel-server-info .panel-body { padding: 0; }

/* TERMS OF SERVICE PAGE */
.tos_list li {
	color: #ff471a;
	margin-bottom: 40px;
}
.tos_list li p {
	color: #ccc;
	text-align: justify;
	text-justify: inter-word;
	text-transform: none;
}


/* Legacy PAYPAL styles commented out to allow override.css to control PayPal layout
   If you need to restore the old look, uncomment the block below.

/* 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=number] {
	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: 350px;
	height: 100px;
	border: 0px;
}

*/

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

/* CASTLE SIEGE CSS */
.csinfo_container {
	background: url('../img/castle_siege.jpg') no-repeat top right;
	width: 100%;
	height: 200px;
	margin-bottom: 20px;
}
.csinfo_content {
	width: 100%;
	height: 180px;
	margin: 10px 0px 0px 10px;
	display: inline-block;
}
	.csinfo_glogo {
		float: left;
		width: 30%;
		height: 180px;
		text-align: center;
	}
	.csinfo_ginfo {
		float: left;
		width: 70%;
		padding: 0px 10px;
	}
	
		.csinfo_ginfo table {
			table-layout: fixed;
			width: 400px;
		}
			.csinfo_ginfo table tr td {
				padding: 3px 0px;
				font-size: 20px;
			}
			.csinfo_ginfo table tr td:first-child {
				color: #9a7e46;
			}
			
.csinfo_glist {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}
	.csinfo_glist li {
		float: left;
		width: 30%;
		padding: 8px 10px;
	}
	.csinfo_glist li:hover {
		background: #0d0c0b;
	}
	
/* PAGSEGURO */
.pagseguro-gateway-container {
	width: 100%;
	background: #1a3322;
	border: 1px solid #2a533c;
}

.pagseguro-gateway-content {
	margin: 10px;
	background: #ffffff;
	border: 2px solid #bfbfbf;
	padding: 10px;
	overflow: auto;
}

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

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

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

.pagseguro-gateway-form input[type=text] {
	width: 60px;
	background: #ffffff;
	border: 0px;
	border-bottom: 1px dotted #000;
	color: #1c713a;
	font-weight: bold;
	font-size: 24px;
}

.pagseguro-gateway-continue {
	margin: 0px auto;
	text-align: center;
	padding: 10px;
}

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

/* SIDEBAR */
.panel-sidebar {
	-moz-border-radius: 0px;
	border-radius: 0px;
	border: 1px solid #1e1e1e;
	-moz-box-shadow: 0 0 10px #000;
	-webkit-box-shadow: 0 0 10px #000;
	box-shadow: 0 0 10px #000;
}

.panel-sidebar > .panel-heading {
	background: url('../img/panel_head_bg.jpg');
	color: #ff471a;
    font-size:16px;
	font-family: 'Cinzel', Arial, serif;
	border: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;
	border-bottom: 3px solid #ff471a;
}

.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: #f1f1f1 !important;
	font-weight: bold;
}
.panel-usercp ul li a:active, .panel-usercp ul li a:hover {
	color: #ff471a !important;
}

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

.sidebar-banner {
	text-align: center;
	margin: 20px 0px;
	border: 1px solid #1e1e1e;
	-moz-box-shadow: 0 0 10px #000;
	-webkit-box-shadow: 0 0 10px #000;
	box-shadow: 0 0 10px #000;
}

.sidebar-banner img {
	border: 0px;
	-moz-border-radius: 2px;
	border-radius: 2px;
}

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

.panel-body {
  /*	background: url('img/bglogin.png') repeat top center; */
	color: #f1f1f1;
	-moz-box-shadow: 0 0 10px #000;
	-webkit-box-shadow: 0 0 10px #000;
	box-shadow: 0 0 10px #000;
}
.panel-body .panel-title {
	color: #ff5c33;
	font-family: 'Cinzel', Arial, serif;
	font-size: 18px;
	text-align:center;
	border-bottom: 1px solid #527e8c;
	margin-bottom: 20px !important;
	font-weight: bold;
}

/* ADD STATS MODULE */
.panel-addstats {
	margin-bottom: 30px;
	background: #f1f1f1;
	border: 1px solid #527e8c;
	-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: #527e8c;
	font-family: 'Cinzel', Arial, serif;
	font-size: 18px;
	border-bottom: 1px solid #527e8c;
	padding: 20px 0px;
	margin-bottom: 20px !important;
	font-weight: bold;
}

#events{
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}
#events li span{
    float:right;
}
#events li em{    
    color: #777;
}
#events li{
    float:right;
    display: table;
    width: 100%;
    vertical-align: middle;
    line-height: 30px;
    padding-bottom: 10px;
}
.rankings-table tr:nth-child(1n+2):hover {
    background: #343434 !important;
	color:#f1f1f1;
    cursor: pointer;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    appearance: textfield;
    -moz-appearance: textfield;
}

#publicidad {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 300px; /* ajusta el ancho de acuerdo a tus necesidades */
  height: 250px; /* ajusta el alto de acuerdo a tus necesidades */
  z-index: 9999; /* para asegurarse de que la imagen aparezca por encima de otros elementos */
}

html, body {
  margin: 0;
  padding: 0;
}
body {
  background: #000;
  background: rgba(0, 0, 0, 1);
  overflow-x: hidden; 
}

/* ---------- Fog ---------- */
.fogwrapper {
  height: 113%; /* Aumenta la altura para estirar verticalmente el efecto */
  position: absolute;
  top: 0%; /* Ajusta la posición superior para centrar verticalmente el efecto */
  width: 100%;
  -webkit-filter: blur(1px) grayscale(0.2) saturate(1.2) sepia(0.2);
  filter: blur(1px) grayscale(0.2) saturate(1.2) sepia(0.2);
}
#foglayer_01, #foglayer_02, #foglayer_03 {
  height: 120%; /* más alto para evitar corte superior */
  position: absolute;
  width: 200%;
  top: -10%; /* sube un poco para cubrir arriba */
}
#foglayer_01 .image01, #foglayer_01 .image02,
#foglayer_02 .image01, #foglayer_02 .image02,
#foglayer_03 .image01, #foglayer_03 .image02 {
  float: left;
  height: 100%;
  width: 50%;
}
#foglayer_01 {
  -webkit-animation: foglayer_01_opacity 10s linear infinite, foglayer_moveme 15s linear infinite;
  -moz-animation: foglayer_01_opacity 10s linear infinite, foglayer_moveme 15s linear infinite;
  animation: foglayer_01_opacity 10s linear infinite, foglayer_moveme 15s linear infinite;
}
#foglayer_02, #foglayer_03 {
  -webkit-animation: foglayer_02_opacity 21s linear infinite, foglayer_moveme 13s linear infinite;
  -moz-animation: foglayer_02_opacity 21s linear infinite, foglayer_moveme 13s linear infinite;
  animation: foglayer_02_opacity 21s linear infinite, foglayer_moveme 13s linear infinite;
}

/* ---------- Moving Fog ---------- */
/*
  'size: cover' || 'size: 100%'; results remain the same
  'attachment: scroll' can be added or removed; results remain the same
  'attachment: fixed' causing unexpected results in Chrome
  'repeat-x' || 'no-repeat'; results remain the same
*/ 
#foglayer_01 .image01, #foglayer_01 .image02 {
  background: url("https://raw.githubusercontent.com/danielstuart14/CSS_FOG_ANIMATION/master/fog1.png") center center/cover no-repeat transparent;
}
#foglayer_02 .image01, #foglayer_02 .image02,
#foglayer_03 .image01, #foglayer_03 .image02{
  background: url("https://raw.githubusercontent.com/danielstuart14/CSS_FOG_ANIMATION/master/fog2.png") center center/cover no-repeat transparent;
}

/* ---------- Keyframe Layer 1 ---------- */
@-webkit-keyframes foglayer_01_opacity {
  0% { opacity: .1; }
  22% { opacity: .5; }
  40% { opacity: .28; }
  58% { opacity: .4; }
  80% { opacity: .16; }
  100% { opacity: .1; }
}
@-moz-keyframes foglayer_01_opacity {
  0% { opacity: .1; }
  22% { opacity: .5; }
  40% { opacity: .28; }
  58% { opacity: .4; }
  80% { opacity: .16; }
  100% { opacity: .1; }
}
@-o-keyframes foglayer_01_opacity {
  0% { opacity: .1; }
  22% { opacity: .5; }
  40% { opacity: .28; }
  58% { opacity: .4; }
  80% { opacity: .16; }
  100% { opacity: .1; }
}
@keyframes foglayer_01_opacity {
  0% { opacity: .1; }
  22% { opacity: .5; }
  40% { opacity: .28; }
  58% { opacity: .4; }
  80% { opacity: .16; }
  100% { opacity: .1; }
}
/* ---------- Keyframe Layer 2 ---------- */
@-webkit-keyframes foglayer_02_opacity {
  0% { opacity: .5; }
  25% { opacity: .2; }
  50% { opacity: .1; }
  80% { opacity: .3; }
  100% { opacity: .5; }
}
@-moz-keyframes foglayer_02_opacity {
  0% { opacity: .5; }
  25% { opacity: .2; }
  50% { opacity: .1; }
  80% { opacity: .3; }
  100% { opacity: .5; }
}
@-o-keyframes foglayer_02_opacity {
  0% { opacity: .5; }
  25% { opacity: .2; }
  50% { opacity: .1; }
  80% { opacity: .3; }
  100% { opacity: .5; }
}
@keyframes foglayer_02_opacity {
  0% { opacity: .5; }
  25% { opacity: .2; }
  50% { opacity: .1; }
  80% { opacity: .3; }
  100% { opacity: .5; }
}
/* ---------- Keyframe Layer 3 ---------- */
@-webkit-keyframes foglayer_03_opacity {
  0% { opacity: .8 }
  27% { opacity: .2; }
  52% { opacity: .6; }
  68% { opacity: .3; }
  100% { opacity: .8; }
}
@-moz-keyframes foglayer_03_opacity {
  0% { opacity: .8 }
  27% { opacity: .2; }
  52% { opacity: .6; }
  68% { opacity: .3; }
  100% { opacity: .8; }
}
@-o-keyframes foglayer_03_opacity {
  0% { opacity: .8 }
  27% { opacity: .2; }
  52% { opacity: .6; }
  68% { opacity: .3; }
  100% { opacity: .8; }
}
@keyframes foglayer_03_opacity {
  0% { opacity: .8; }
  27% { opacity: .2; }
  52% { opacity: .6; }
  68% { opacity: .3; }
  100% { opacity: .8; }
}
/* ---------- Keyframe moveMe ---------- */
@-webkit-keyframes foglayer_moveme {
  0% { left: 0; }
  100% { left: -100%; }
}
@-moz-keyframes foglayer_moveme {
  0% { left: 0; }
  100% { left: -100%; }
}
@-o-keyframes foglayer_moveme {
  0% { left: 0; }
  100% { left: -100%; }
}
@keyframes foglayer_moveme {
  0% { left: 0; }
  100% { left: -100%; }
}

@media only screen
  and (min-width: 280px)
  and (max-width: 767px) {
    /* Layout base responsive */
    html { min-width: 0; }
    body { font-size: 15px; }
    #header { min-width: 0; height: 320px; background-size: cover; }
    #header > .header-content-container { height: 320px; }
    #header > .header-content-container > .header-content { height: 320px; }

    /* Hero CTA responsive */
    .hero-cta { max-width: 92%; margin: 20px 8px 0 8px; padding: 16px; }
    .hero-cta h1 { font-size: 26px; }
    .hero-cta p { font-size: 14px; }

    /* Container full width */
    #container { width: 100%; border-radius: 0; margin: 6px auto 0; }

    /* Navbar vertical stack */
    #navbar { height: auto; }
    #navbar ul { text-align: left; }
    #navbar ul li { display: block; margin: 0; }
    #navbar ul li a { display: block; padding: 12px 16px; }

    /* Simplify/disable fog for performance and evitar cortes */
    #foglayer_01, #foglayer_02, #foglayer_03 { display: none; }

    /* Stacking layout: contenido y sidebar a 100% */
    #content { padding: 10px; }
    .col-xs-8, .col-xs-4 { width: 100% !important; float: none !important; }
    .panel-sidebar { margin-top: 14px; }
    .page-title { font-size: 24px; }

    /* Ajustes tablas grandes */
    .rankings-table tr td { font-size: 16px; padding: 8px; }
    .rankings_menu a { width: auto; padding: 6px 10px; }
  }