html {
	min-width: 1040px;
	height: 100%;
	scrollbar-gutter: stable;
}

body {
  	position: relative;
  	min-height: 100%;
  	background: #000 url('../img/background.jpg') no-repeat center top / cover;
  	margin: 0;
  	z-index: 0;
}

body::after {
  	content: "";
  	position: absolute;
  	bottom: 0;
  	left: 0;
  	right: 0;
  	min-height: 100%;
  	background: url('../img/background-footer.png') no-repeat center bottom / contain;
  	pointer-events: none;
  	z-index: -1;
}

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

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

a:hover {
	color: #00f562;
}

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%;
	height: 100vh;
	padding: 70px 0px 50px 0px;
	text-align: center;
	color: #fff;
	position: relative;
}

#container {
	background: #eeeeee;
	width: 1040px;
	height: auto;
	margin: 0px auto;
	padding: 20px 0px;
	-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;
}

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

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



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

.global-top-bar .col-6.col-md-3.d-flex {
  	gap: 8px;     
}

.reg-btp        { order: 1; }
.logreg-buttom  { order: 2; }
.navbar-toggler { order: 3; }

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

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

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

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

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

.page-title {
	color: var(--ColorTemplate);
	font-family: 'Cinzel', serif;
    font-weight: 600;
	font-size: 32px;
	margin-bottom: 10px;
	font-weight: 500;
	text-align: center;
	text-shadow: 0 0 10px;
}


.panel-news {
	margin-bottom: 30px;
	color: #333;
	border: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;
	-moz-box-shadow: 0 0 0px #e3e3e3;
	-webkit-box-shadow: 0 0 0px #e3e3e3;
	box-shadow: 0 0 0px #e3e3e3;
}
.panel-news .panel-heading {
	padding: 0.5rem 1rem;
	background-color: var(--ColorTemplate);
	border: 1px solid rgba(0,0,0,.125);
    border-radius: 0.25rem;
	border-bottom-left-radius: unset;
	border-bottom-right-radius: unset;
}

.panel-news .panel-heading a{
	color: #f1f1f1;
}
.panel-news .panel-heading a:hover{
	color: #f1f1f1cc;
}

.panel-news .panel-title {
	color: #000000;
    font-size: 17px;
    font-weight: bold;
    transform: translateY(-60px);
	padding-left: 10px;
}

.news-meta .news-date {
	transform: translateY(-65px);
	padding-left: 10px;
	color: #67a200;
}

.panel-news .panel-body {
	padding: 1rem 1rem;
	background: #fff;
	border: 1px solid rgba(0,0,0,.125);
    border-radius: 0.25rem;
	border-top-left-radius: unset;
	border-top-right-radius: unset;
}
.panel-news .panel-footer {
    background: #f7f7f7;
	padding: 1rem 1rem;
    font-style: italic;
    font-size: 16px;
    color: #212529;
	border: 1px solid rgba(0,0,0,.125);
	border-top: 3px solid var(--ColorTemplate);
    border-radius: 0.25rem;
	border-top-left-radius: unset;
	border-top-right-radius: unset;
}

.rankings-table {
	width: 100%;
	border-spacing: 0;
	border-collapse: collapse;
	padding: 1rem 1rem;
    background: #fff;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: 0.25rem;
}

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

.rankings-class-image {
	width: 40px;
	height: auto;
	-moz-box-shadow: 0 0 5px #666;
	-webkit-box-shadow: 0 0 5px #666;
	box-shadow: 0 0 5px #666;
	-moz-border-radius: 0px;
	border-radius: 0px;
}
.rankings-table tr td {
	border-bottom: 1px solid #e3e3e3;
	padding: 10px;
	font-size: 18px;
	vertical-align: middle !important;
	text-align: center;
}
.rankings-table-place {
	color: var(--ColorTemplate);
	font-weight: bold;
	text-align: center;
}

.default-char-offline {
    border: 3px solid #D0D0D0;
    vertical-align: middle;
}

.default-char-online {
    border: 3px solid #a5d72c;
    vertical-align: middle;
}

.page-item.active .page-link {
    z-index: 3;
    color: var(--bs-light) !important;
    background-color: var(--ColorTemplate);
    border-color: var(--ColorTemplate);
}

.rankings-table tr:first-child td {
	color: var(--bs-light);
	border-bottom: 3px solid var(--ColorTemplate);
	background: var(--ColorTemplate);
}
.rankings-update-time {
	text-align: right;
	font-size: 11px;
	color: #ccc;
	padding: 10px 0px;
}

.rankings_menu {
  width: 100%;
  text-align: center;
  margin: 0 0 14px 0 !important;
  overflow: visible;
}

.rankings_menu span {
  display: block;
  color: #e0e0e0;
  font-size: 20px;
  padding: 6px 0;
}

.rankings_menu a {
  display: inline-block;
  min-width: 160px;
  padding: 8px 14px;
  margin: 4px;
  color: #fff !important;
  text-decoration: none !important;
  font-weight: 700;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.12) !important;
  background: rgba(20,10,10,.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: filter .2s ease, transform .2s ease, background .2s ease, border-color .2s ease;
}

.rankings_menu a:hover {
  filter: brightness(1.08);
  border-color: rgba(22,166,28,.35) !important;
  background: linear-gradient(119deg, rgba(22,108,18,.5), rgba(4,72,7,.5));
}

.rankings_menu a.active {
  background: linear-gradient(119deg, #16a61c, #0b6e0f) !important;
  border-color: rgba(22,166,28,.45) !important;
  color: #fff !important;
}


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

.myaccount-table {
	width: 100%;
	background: #f1f1f1;
	border: 1px solid #e3e3e3;
}
.myaccount-table tr td:first-child {
	color: #666;
	font-weight: bold;
}
.myaccount-table tr td {
	border-bottom: 1px solid #e3e3e3;
	padding: 15px !important;
}
.myaccount-table tr:last-child td {
	border: 0px;
}

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

.tos_list li {
	color: var(--ColorTemplate);;
	font-weight: bold;
	font-size: 18px;
	margin-bottom: 40px;
}
.tos_list li p {
	color: #444;
	text-align: justify;
	text-justify: inter-word;
	text-transform: none;
	padding-right: 35px;
	font-size: 14px;
	font-weight: normal;
}

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

.panel-sidebar {
	background: #f1f1f1;
    border: 1px solid;
    border-color: rgba(0,0,0,0.125);
    -moz-border-radius: 0.375rem;
    border-radius: 0.375rem;
    -moz-box-shadow: 0 7px 14px 0 rgb(65 69 88 / 10%), 0 3px 6px 0 rgb(0 0 0 / 7%);
    -webkit-box-shadow: 0 7px 14px 0 rgb(65 69 88 / 10%), 0 3px 6px 0 rgb(0 0 0 / 7%);
    box-shadow: 0 7px 14px 0 rgb(65 69 88 / 10%), 0 3px 6px 0 rgb(0 0 0 / 7%);
}

.panel-sidebar > .panel-heading {
	background: #fff;
	color: var(--ColorTemplate);;
	font-family: 'Roboto', sans-serif;
	font-weight: 500;
	border: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;
	border-bottom: 3px solid var(--ColorTemplate);;
	padding: 15px;
    font-size: 22px;
    text-align: center;
}
.panel-usercp ul {
	list-style-type: none;
	padding: 0px;
	margin: 0px;
}

.panel-usercp ul li {
	display: table;
	width: 100%;
	vertical-align: middle;
	line-height: 30px;
}

.panel-usercp ul li a {
	color: #444 !important;
	font-weight: bold;
}
.panel-usercp ul li a:active, .panel-usercp ul li a:hover {
	color: var(--ColorTemplate) !important;
}

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

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

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

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

.panel-body{
	padding: 10px;
}

.panel-body .panel-title {
	color: #666;
	font-family: 'Roboto', sans-serif;
	font-size: 14px;
	border-bottom: 1px solid #e3e3e3;
	margin-bottom: 20px !important;
	font-weight: 500;
}

.panel-addstats {
	margin-bottom: 30px;
	background: #f1f1f1;
	border: 1px solid #e3e3e3;
	-moz-border-radius: 0px;
	border-radius: 0px;
	color: #333;
}
.panel-addstats .character-avatar img {
	width: 100px;
	height: auto;
	-moz-box-shadow: 0 0 5px #666;
	-webkit-box-shadow: 0 0 5px #666;
	box-shadow: 0 0 5px #666;
	-moz-border-radius: 0px;
	border-radius: 0px;
}

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

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

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

.global-top-bar {
	position: fixed;
	top: 0;        
	left: 0;         
	width: 100%;    
	z-index: 9999;   
	background: rgb(4 50 0 / 32%);
	backdrop-filter: blur(5px);
	margin: 0;
	padding: 8px 0;
	overflow: auto;
	-moz-box-shadow: 0 0 15px rgb(0 0 0 / 70%);
	-webkit-box-shadow: 0 0 15px rgba(0,0,0,0.7);
	box-shadow: 0 0 15px rgba(0,0,0,0.7);
	text-shadow: 1px 1px 3px #000000;
	color: #ffffff;
	border-bottom: 1px solid rgb(0 62 0 / 58%);
	font-size: 12px;
}

.global-top-bar a,
.header-info ul li a {
    padding-top: 4px;
    padding-bottom: 4px;
    line-height: 1.2;
}

.global-top-bar .row {
    margin: 0;
    padding: 0;
}
	.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-nopadding {
	padding: 0px !important;
}

.logreg-buttom {
    display: inline-block;
    margin-left: 10px;
    padding: 6px 14px;
    font-size: 14px;
    font-weight: 500;
    color: #fff !important;
    background-color: #174c0d;
    border: 1px solid #0d4c16;
    border-radius: 8px;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

.logreg-buttom:hover {
    background-color: #16a61a;
    color: #FFF !important;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
}

.reg-btp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 10px;
    height: 34.6px;
    padding: 0 20px;
    font-size: 14px;
    font-weight: 500;
    color: #fff !important;
    background-color: transparent;
    border: 1px solid #2da715;
    border-radius: 8px;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}


.reg-btp:hover {
    background-color: #28a616;
    color: #FFF !important;
    box-shadow: 0 0 7px #1ea616, 0 0 15px #45a616, 0 0 22px #1fa616;
}

.webengine-language-switcher {
	display: inline-block;
	list-style: none;
	padding: 0px !important;
	margin: 0px !important;
	width: 46px;
	height: 19px;
	overflow: hidden;
	transition: all .3s ease;
}
.webengine-language-switcher:hover {
	width: 400px;
}
	.webengine-language-switcher li {
		display: inline-block;
		list-style-type: none;
		background: #333333;
		padding: 0px 4px 2px;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		border-radius: 3px;
		-khtml-border-radius: 3px;
		transition: all .3s ease;
	}
	.webengine-language-switcher li:hover {
		-webkit-filter: brightness(120%);
		filter: brightness(120%);
	}
	.webengine-language-switcher li a {
		color: #999999;
	}
	.webengine-language-switcher li a:hover {
		color: #ffffff !important;
	}

.webengine-mu-logo {
	transition: all .3s ease;
	position:relative; z-index:1;
  width: 400px;
  height: 400px;
	cursor: pointer;
}
	.webengine-mu-logo:hover {
		-webkit-filter: brightness(120%);
		filter: brightness(120%);
	}

.header-info ul {
  	display:flex;
	justify-content:center; 
	align-items:center;
  	gap:28px; 
	margin:0; 
	padding-left:0; 
	list-style:none; 
	flex-wrap:nowrap;
}

.header-info ul li{ 
	display:block; 
}
.header-info ul li a{
	display: inline-block;
    color:#ccc !important; 
	text-decoration:none; 
	padding:6px 0;
    text-transform:uppercase; 
	transition:all .3s ease;
	font-size: 16px;
	font-family: 'Cinzel', serif;
    font-weight: 600;
}

.global-top-bar,
.global-top-bar-content,
.header-info ul,
.header-info ul li {
  	overflow: visible;
}

.header-info ul li a{
  	position: relative;
  	display: inline-block;
  	padding: 6px 12px;            
  	border-top-left-radius: 6px;
  	border-top-right-radius: 6px;
  	border-bottom-left-radius: 0;
  	border-bottom-right-radius: 0;
  	transition: color .3s ease;
  	z-index: 0;
}
.header-info ul li a::before{
  	content:"";
  	position:absolute;
  	left:50%;
  	transform: translateX(-50%);
  	bottom: 2px;                    
  	width: calc(100% + 16px);       
  	height: calc(100% - 16px);         
  	background: rgba(255,255,255,0.10);
  	border-top-left-radius: 6px;
  	border-top-right-radius: 6px;
  	border-bottom-left-radius: 0;
  	border-bottom-right-radius: 0;
  	opacity: 0;                     
  	transition: opacity .25s ease, width .3s ease;
  	z-index: -1;                
}

:root {
	--ColorTemplate: #37b000 !important;
}

.header-info ul li a::after{
  	content:"";
  	position:absolute;
  	left:50%;
  	bottom: 0;                 
  	transform: translateX(-50%);
  	width: 0%;
  	height: 2px;
  	background-color: var(--ColorTemplate);
  	transition: width .3s ease;
}

.header-info ul li a:hover{
  	color: var(--ColorTemplate) !important;
}
.header-info ul li a:hover::before{
  	opacity: 1;
  	width: calc(100% + 24px);        
}
.header-info ul li a:hover::after{
  	width: 100%;
}

@media (max-width: 767.98px){
  .offcanvas .header-info ul{
    flex-direction:column;
    align-items:flex-start; 
    gap:14px;
  }
}

.navbar-toggler{
  	border:0;
  	background:transparent;
  	padding:4px;
}
.navbar-toggler svg rect{ fill: currentColor; }

.offcanvas-top{
  	background: rgba(20, 10, 10, 0.92);  
  	backdrop-filter: blur(6px);
  	border-bottom: 1px solid rgba(22,166,28,0.4);
  	box-shadow: 0 10px 25px rgba(0,0,0,0.6);
}


.webengine-online-bar {
	width: 100%;
	background: #000000;
	border: 1px solid #555555;
	height: 8px;
	margin-top: 10px;
	margin-bottom: 10px;
	padding: 0px;
	-webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -khtml-border-radius: 4px;
	overflow: hidden;
	transition: all .3s ease;
}

.webengine-online-bar .webengine-online-bar-progress {
	height: 8px;
	background: #00ff00 url('../img/online_progress_bar.jpg') no-repeat left center;
	-webkit-border-radius: 0px 1px 1px 0px;
	-moz-border-radius: 0px 1px 1px 0px;
	-khtml-border-radius: 0px 1px 1px 0px;
	border-radius: 0px 1px 1px 0px;
}

.webengine-online-bar:hover {
	-webkit-filter: brightness(120%);
	filter: brightness(120%);
}

.myaccount-character-block {
	background: #333;
	border: 1px solid #666;
	padding: 5px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	display: inline-block;
	margin: 0px auto;
	-moz-box-shadow: 0 0 10px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5);
	box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
	.myaccount-character-block img {
		width: 100px;
		height: auto;
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
		border-radius: 3px;
		-moz-box-shadow: 0 0 5px #000;
		-webkit-box-shadow: 0 0 5px #000;
		box-shadow: 0 0 5px #000;
		-moz-transition: all 0.3s ease;
		-o-transition: all 0.3s ease;
		-webkit-transition: all 0.3s ease;
		transition: all 0.3s ease;
	}
		.myaccount-character-block img:hover {
			-webkit-filter: brightness(120%);
			filter: brightness(120%);
		}
.myaccount-character-block-location {
	font-size: 12px;
	color: #000;
	margin-bottom: 20px;
	margin-top: 2px;
	line-height: 1.2;
}
.myaccount-character-block-level {
	position: relative;
	top: -77px;
	display: inline-block;
	background: rgba(0,0,0,0.5);
	padding: 0px 5px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	color: #fff;
	font-size: 10px;
}
.myaccount-character-name a {
	font-weight: bold;
	color: #000;
	font-size: 16px;
}


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

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

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

	.rankings-class-filter-selection:hover {
		color: #000000 !important;
	}

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

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

.RazaSM{
	background-color: rgba(47, 125, 204, 0.1);
	border: 1px solid #2f7dcc;
}
.RazaDK{
	background-color: rgba(47, 204, 47, 0.1);
	border: 1px solid #2fcc2f;
}
.RazaELF{
	background-color: rgba(51, 204, 47, 0.1);
	border: 1px solid #33cc2f;
}
.RazaMG{
	background-color: rgba(113, 47, 204, 0.1);
	border: 1px solid #712fcc;
}
.RazaDL{
	background-color: rgba(204, 158, 47, 0.1);
	border: 1px solid #cc9e2f;
}
.RazaSUM{
	background-color: rgba(191, 47, 204, 0.1);
	border: 1px solid #bf2fcc;
}
.RazaRF{
	background-color: rgba(47, 204, 84, 0.1);
	border: 1px solid #2fcc54;
}

.BtnSM{
	background-color: #2f7dcc;
	color: #f1f1f1;
	border: 1px solid #2f7dcc;
}
.BtnSM:hover{
	background-color: rgba(47, 125, 204, 0.1);
	color: #2f7dcc;
	border: 1px solid #2f7dcc;
}

.BtnDK{
	background-color: #2fcc2f;
	color: #f1f1f1;
	border: 1px solid #2fcc2f;
}
.BtnDK:hover{
	background-color: rgba(47, 204, 47, 0.1);
	color: #2fcc2f;
	border: 1px solid #2fcc2f;
}

.BtnELF{
	background-color: #33cc2f;
	color: #f1f1f1;
	border: 1px solid #33cc2f;
}
.BtnELF:hover{
	background-color: rgba(51, 204, 47, 0.1);
	color: #33cc2f;
	border: 1px solid #33cc2f;
}

.BtnMG{
	background-color: #712fcc;
	color: #f1f1f1;
	border: 1px solid #712fcc;
}
.BtnMG:hover{
	background-color: rgba(113, 47, 204, 0.1);
	color: #712fcc;
	border: 1px solid #712fcc;
}

.BtnDL{
	background-color: #cc9e2f;
	color: #f1f1f1;
	border: 1px solid #cc9e2f;
}
.BtnDL:hover{
	background-color: rgba(204, 158, 47, 0.1);
	color: #cc9e2f;
	border: 1px solid #cc9e2f;
}

.BtnSUM{
	background-color: #bf2fcc;
	color: #f1f1f1;
	border: 1px solid #bf2fcc;
}
.BtnSUM:hover{
	background-color: rgba(191, 47, 204, 0.1);
	color: #bf2fcc;
	border: 1px solid #bf2fcc;
}

.BtnRF{
	background-color: #cc542f;
	color: #f1f1f1;
	border: 1px solid #cc542f;
}
.BtnRF:hover{
	background-color: rgba(204, 84, 47, 0.1);
	color: #cc542f;
	border: 1px solid #cc542f;
}

div.dataTables_wrapper div.dataTables_filter label {
	display: block;
}
   
div.dataTables_wrapper div.dataTables_filter input {
	width: 100%;
	margin: 0;
}

div.dataTables_wrapper div.dataTables_paginate ul.pagination .page-link {
	color: var(--ColorTemplate) !important;
}

div.dataTables_wrapper div.dataTables_paginate ul.pagination .page-item.active .page-link {
	color: var(--bs-light) !important;
}

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

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

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

.btn-primary {
	color: #fff;
	background-color: var(--ColorTemplate);
	border-color: var(--ColorTemplate);
}

.btn-primary:hover {
	color: #fff;
	background-color: var(--ColorTemplate);
	border-color: var(--ColorTemplate);
}

.btn-check:focus + .btn-primary, .btn-primary:focus {
	color: #fff;
	background-color: var(--ColorTemplate);
	border-color: var(--ColorTemplate);
	box-shadow: 0 0 0 0.25rem var(--ColorTemplateAlpha);
}

.btn-check:checked + .btn-primary, .btn-check:active + .btn-primary, .btn-primary:active, .btn-primary.active, .show > .btn-primary.dropdown-toggle {
	color: #fff;
	background-color: var(--ColorTemplate);
	border-color: var(--ColorTemplate);
}

.btn-check:checked + .btn-primary:focus, .btn-check:active + .btn-primary:focus, .btn-primary:active:focus, .btn-primary.active:focus, .show > .btn-primary.dropdown-toggle:focus {
	box-shadow: 0 0 0 0.25rem var(--ColorTemplateAlpha);
}

.btn-primary:disabled, .btn-primary.disabled {
	color: #fff;
	background-color: var(--ColorTemplate);
	border-color: var(--ColorTemplate);
}

.btn-outline-primary {
	color: var(--ColorTemplate);
	border-color: var(--ColorTemplate);
}

.btn-outline-primary:hover {
	color: #fff;
	background-color: var(--ColorTemplate);
	border-color: var(--ColorTemplate);
}

.btn-check:focus + .btn-outline-primary, .btn-outline-primary:focus {
	box-shadow: 0 0 0 0.25rem var(--ColorTemplateAlpha);
}

.btn-check:checked + .btn-outline-primary, .btn-check:active + .btn-outline-primary, .btn-outline-primary:active, .btn-outline-primary.active, .btn-outline-primary.dropdown-toggle.show {
	color: #fff;
	background-color: var(--ColorTemplate);
	border-color: var(--ColorTemplate);
}

.btn-check:checked + .btn-outline-primary:focus, .btn-check:active + .btn-outline-primary:focus, .btn-outline-primary:active:focus, .btn-outline-primary.active:focus, .btn-outline-primary.dropdown-toggle.show:focus {
	box-shadow: 0 0 0 0.25rem var(--ColorTemplateAlpha);
}

.btn-outline-primary:disabled, .btn-outline-primary.disabled {
	color: var(--ColorTemplate);
	background-color: transparent;
}


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

.rounded-3 {
    border-radius: 0 !important;
}

.text-primary {
    --bs-text-opacity: 0 !important;
    color: none, none !important;
}

.p-1 {
    padding: none !important;
}

.me-1 {
  	margin-right: none !important;
}

.border-primary {
   --bs-border-opacity: none !important;
    border-color: none !important;
}

.border {
    border:  none !important;
}

.table-guild{
	color: #f1f1f1;
}

:root{ --topbar-h: 64px; } 

.global-top-bar{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1100; 
}

body { 
	padding-top: var(--topbar-h); 
}

.offcanvas.offcanvas-top{
  	top: calc(var(--topbar-h) + 6px);
  	left: auto;
  	right: 8px;
  	width: min(360px, 92vw);
  	max-height: calc(100vh - var(--topbar-h) - 12px);
  	border-radius: 8px;
  	background: rgba(20,10,10,0.95);
  	backdrop-filter: blur(6px);
  	border: 1px solid rgba(22,166,28,0.35);
  	box-shadow: 0 10px 25px rgba(0,0,0,.6);
  	z-index: 1055;
}

.offcanvas-backdrop{
  	top: var(--topbar-h);
  	height: calc(100vh - var(--topbar-h));
}

.header-info ul{
  	display:flex; justify-content:center; align-items:center;
  	gap:28px; margin:0; padding-left:0; list-style:none; flex-wrap:nowrap;
}
.header-info ul li{ display:block; }
.header-info ul li a{
  	color:#ccc !important; text-decoration:none; padding:6px 0;
  	text-transform:uppercase; transition:all .3s ease;
}

@media (max-width: 767.98px){
  .offcanvas .header-info ul{
    flex-direction:column; align-items:flex-start; gap:14px;
  }
}

.navbar-toggler{ border:0; background:transparent; padding:4px; }
.navbar-toggler svg rect{ fill: currentColor; }
/* HUMITO */
.smog {
    position: absolute;
    top: 450px;
    left: 100px;
    width: 100%;
    height: 100%;
    z-index: 1;
}
.smog .num1 {
    -webkit-animation: spreadSmog 7s infinite linear;
    animation: spreadSmog 7s infinite linear;
}
.smog .num2 {
    -webkit-animation: spreadSmog 15s infinite linear;
    animation: spreadSmog 15s infinite linear;
}
.smog .num3 {
    -webkit-animation: spreadSmog 40s infinite linear;
    animation: spreadSmog 40s infinite linear;
}
.smog .num1 {
    bottom: 0;
    left: -677px;
    width: 2354px;
    height: 1300px;
    opacity: 0;
}
.smog i {
    position: absolute;
    display: block;
    background: url(../img/sp_smog.png) no-repeat;
    transform-origin: 50% 100%;
}
.smog .num2 {
    bottom: 0;
    left: -677px;
    width: 2354px;
    height: 1300px;
    opacity: 0;
}
.smog .num3 {
    bottom: 0;
    left: -677px;
    width: 2354px;
    height: 1300px;
    opacity: 0;
}
@keyframes spreadSmog {
    0% {
        transform: scale(0.5);
        -webkit-transform: scale(0.5);
        opacity: 0;
    }
    45% {
        transform: scale(0.75);
        -webkit-transform: scale(0.75);
        opacity: 1;
    }
    90% {
        transform: scale(1);
        -webkit-transform: scale(1);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        -webkit-transform: scale(1);
        opacity: 0;
    }
}
/* FIN HUMITO */
.spark-layer{
  	position:absolute; inset:0;
  	pointer-events:none;
  	z-index: 0; 
}

.LandingCardsBlock_sparks__7hJ1e [class*="LandingCardsBlock_spark_"] {
    filter: hue-rotate(90deg) saturate(200%) brightness(1.1);
}

.LandingCardsBlock_sparks__7hJ1e{
  	position:absolute;
  	top:50%; left:50%;
  	transform: translate(-50%,-50%);
  	width: min(90%, 900px);
  	height: min(70%, 420px);
}

.LandingCardsBlock_sparks__7hJ1e .LandingCardsBlock_spark_1__baLhH{
  	position:absolute;
  	background: url('../img/sparks/spark_1.webp') no-repeat center / contain;
  	width: clamp(220px, 45%, 764px);
  	height: clamp(90px, 20%, 313px);
  	right: 0; bottom: -12%;
  	transform: scale(.9);
  	animation: LandingCardsBlock_spark-1 4s linear infinite 1s;
  	opacity:.95;
}

.LandingCardsBlock_sparks__7hJ1e .LandingCardsBlock_spark_2__lhUNT{
  	position:absolute;
  	background: url('../img/sparks/spark_2.webp') no-repeat center / contain;
  	width: 149px; height: 335px;
  	right: 22%; bottom: -32%;
  	transform: scale(.7);
  	animation: LandingCardsBlock_spark-1 4s linear infinite 2s;
}

.LandingCardsBlock_sparks__7hJ1e .LandingCardsBlock_spark_3__fj9xO{
  	position:absolute;
  	background: url('../img/sparks/spark_3.webp') no-repeat center / contain;
  	width: 128px; height:165px;
  	right: 28%; bottom: -14%;
  	transform: scale(.85);
  	animation: LandingCardsBlock_spark-3 4s linear infinite 2s;
}

.LandingCardsBlock_sparks__7hJ1e .LandingCardsBlock_spark_4__xzMAQ{
  	position:absolute;
  	background: url('../img/sparks/spark_4.webp') no-repeat center / contain;
  	width: clamp(260px, 48%, 794px);
  	height: clamp(60px, 14%, 176px);
  	right: 0; bottom: -18%;
  	transform: scale(.9);
  	animation: LandingCardsBlock_spark-5 4s linear infinite;
}

.LandingCardsBlock_sparks-right__OSsUH{
  	transform: translate(-50%,-50%) scaleX(-1);
  	opacity:.9;
}

@keyframes LandingCardsBlock_spark-1{
  0%   { transform: translateY(0)   scale(.9); opacity:1; }
  25%  { transform: translateY(-8%) scale(1);  opacity:.95; }
  50%  { transform: translateY(-16%) scale(1.05); opacity:.8; }
  75%  { transform: translateY(-24%) scale(1.08); opacity:.5; }
  100% { transform: translateY(-32%) scale(1.1); opacity:0; }
}
@keyframes LandingCardsBlock_spark-3{
  0%   { transform: translateY(0) scale(.85); opacity:1; }
  50%  { transform: translateY(-24%) scale(.95); opacity:.7; }
  100% { transform: translateY(-40%) scale(1.05); opacity:0; }
}
@keyframes LandingCardsBlock_spark-5{
  0%   { transform: translateY(0)   scale(.9); opacity:1; }
  50%  { transform: translateY(-18%) scale(1.0); opacity:.75; }
  100% { transform: translateY(-32%) scale(1.08); opacity:0; }
}

@media (max-width: 768px){
  	.LandingCardsBlock_sparks__7hJ1e{ width: 100%; height: 60%; }
  	.LandingCardsBlock_sparks-right__OSsUH{ opacity:.7; }
}

.srvcard{
  	position: relative;
  	border-radius: 12px;
  	background: rgba(20,10,10,0.55); 
  	backdrop-filter: blur(6px);
  	border: 1px solid rgba(22,166,28,0.35); 
  	box-shadow: 0 8px 22px rgba(0,0,0,.45);
  	overflow: hidden;
	max-width: 500px;
	width: 100%;
	height: 70px;
	margin: 0 auto;
}

.srvcard__header i{ 
	color: var(--ColorTemplate); 
}

.srvcard__body{ 
	padding: 8px 12px; 
}

.srvcard__row{
  	display: grid;
  	grid-template-columns: 28px 1fr auto;     
  	align-items: center;
  	gap: 10px;
  	padding: 8px 4px;
}
.srvcard__row:first-child{ border-top: 0; }

.srvcard__icon{
  	display:grid; place-items:center;
  	color: #cfcfcf;
  	opacity:.9;
}

.srvcard__label {
  	color: var(--ColorTemplate);
  	font-weight: 500;
    justify-self: start; 
  	text-align: left;
	font-family: 'Roboto', sans-serif;

}

.srvcard__value {
  	color: #17c964;
  	font-weight: 700;
  	text-align: left;
  	min-width: 88px;            
}

.srvcard__badge{
  	display:inline-flex; align-items:center; gap:8px;
  	padding: 4px 10px;
  	font-weight: 600;
  	border-radius: 999px;
  	background: rgba(255,255,255,0.06);
  	border: 1px solid rgba(255,255,255,0.08);
  	color:#e6e6e6;
}
.srvcard__badge .srvcard__dot{
  	width:8px; height:8px; border-radius:50%;
  	box-shadow: 0 0 10px currentColor;
}
.srvcard__badge.is-online   { color:#17c964; border-color: rgba(23,201,100,.25); }
.srvcard__badge.is-online .srvcard__dot{ background:#17c964; }

.srvcard__badge.is-offline  { color:#e5484d; border-color: rgba(229,72,77,.25); }
.srvcard__badge.is-offline .srvcard__dot{ background:#e5484d; }

@media (max-width:576px){
  .srvcard__value{ min-width:auto; }
}

.srvcard__ecg {
  	width: 90%;
  	height: 2px;
  	background-color: currentColor;
  	border-radius: 10px;
}

.srvcard__ecg.is-online {
  	color: #17c964;
}

.srvcard__ecg.is-offline {
  	color: #e5484d;
}


/* Contenedor */
.srvcard-buttons {
  display: flex;
  flex-wrap: wrap;          /* permite que bajen de línea si no entran */
  justify-content: center;  /* centro horizontal */
  gap: 12px;                /* separación entre botones */
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

/* Botón base */
.srvcard-buttons .srv-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  margin-top: 20px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;

  text-align: center;
  padding: 10px 0;
  border-radius: 6px;
  font-size: 24px;
  font-family: 'Cinzel', serif;
  text-shadow:
    0 0 5px rgba(0, 255, 69, 0.8),
    0 0 10px rgba(0, 255, 140, 0.6),
    0 0 15px rgba(0, 255, 215, 0.4);
  font-weight: 500;
  text-decoration: none;
  box-shadow: 3px 4px 10px #000;
  white-space: normal;
  word-break: break-word;
}

/* Variante: register */
.srv-btn-register {
  background: linear-gradient(119deg, #16a61c, #0b6e0f, #15c81e);
  background-size: 400% 400%;
  color: #000000;
  border-radius: 6px;
  font-weight: 600;
  text-decoration: none;
  padding: 10px 0;
  transition: background 0.3s ease;
}

.srv-btn-register:hover {
  animation: glowMove 3s ease-in-out infinite;
  color: #000 !important;
}

/* Variante: downloads */
.srv-btn-downloads {
  background: linear-gradient(119deg, #08e655, #0b6e0f, #08f25a);
  background-size: 400% 400%;
  color: #000000;
  border-radius: 6px;
  text-decoration: none;
  padding: 10px 0;
  transition: background 0.3s ease;
}

.srv-btn-downloads:hover {
  color: #000 !important;
  animation: glowMove 3s ease-in-out infinite;
}

.srv-btn-downloads .btn-icon {
  width: 24px;
  height: auto;
  flex: 0 0 auto;
}

/* ====== Responsive ====== */
/* Móvil: apilados y con respiración lateral */
@media (max-width: 600px) {
  .srvcard-buttons {
    flex-direction: column;
    align-items: center;
    padding-inline: 12px;     /* evita pegar al borde del viewport */
  }
  .srvcard-buttons .srv-btn {
    width: 100%;
    max-width: 320px;         /* límite visual */
    margin: 10px 0;
  }
}

/* Escritorio: lado a lado (y centrados). 
   Si tenés 2 botones, quedan uno al lado del otro.
   Si hay más, se acomodan en filas centradas. */
@media (min-width: 601px) {
  .srvcard-buttons {
    flex-direction: row;
    padding-inline: 0;
  }
  .srvcard-buttons .srv-btn {
    flex: 0 1 360px;          /* ancho “ideal” por botón */
    max-width: 420px;         /* evita que se estire demasiado en monitores muy grandes */
    width: auto;              /* lo maneja flex-basis */
    margin: 10px 0;
  }
}




@keyframes glowMove {
  0%, 100% {
    background-position: 0% 50%;
  }
  25% {
    background-position: 100% 50%;
  }
  50% {
    background-position: 100% 100%;
  }
  75% {
    background-position: 0% 100%;
  }
}

.modal-title-login,
.btn-close-login {
  	color: #16a61c; 
  	font-family: 'Cinzel', serif;
  	font-weight: 600;
}

body.modal-open {
  	overflow-y: auto !important;
  	padding-right: 0 !important;
}

#loginModal .modal-dialog {
  	max-width: 380px;             
  	width: calc(100% - 32px);      
  	margin: 200px auto 1rem !important; 
}


@media (min-width: 576px) {
  	#loginModal .modal-dialog { max-width: 420px; }
}


#loginModal.modal { 
	--bs-modal-margin: 0; 
}

#loginModal.show .modal-dialog { 
	margin-top: 200px !important; 
}

.modal-backdrop {
  	display: none !important;
  	background: transparent !important;
}

#loginModal .login-modal-wrap {
  	background: transparent;
  	border: 0;
  	box-shadow: none;
  	position: relative;
}

#loginModal .login-modal {
  	position: relative;
  	border-radius: 16px;
  	padding: 20px 18px;
  	background: rgba(20,10,10,0.65);
  	backdrop-filter: blur(8px);
  	-webkit-backdrop-filter: blur(8px);
  	overflow: hidden;
}

#loginModal .login-modal::before {
  	content: "";
  	position: absolute;
  	inset: 0;
  	padding: 1px;               
  	border-radius: 16px;
  	background: linear-gradient(135deg, #16a61c, rgba(22,166,28,0.2), #0b6e0f);
  	-webkit-mask: 
  	  linear-gradient(#000 0 0) content-box, 
  	  linear-gradient(#000 0 0);
  	-webkit-mask-composite: xor;
  	        mask-composite: exclude;
  	pointer-events: none;
}

#loginModal .login-modal__head {
  	text-align: center;
  	margin-bottom: 10px;
}
#loginModal .login-modal__title {
  	font-family: 'Cinzel', serif;
  	margin: 0;
	color:#0f920f;
  	font-weight: 700;
  	letter-spacing: .3px;
}
#loginModal .login-modal__subtitle {
  	margin: 2px 0 0;
  	color: #cfcfcf;
  	font-size: 0.9rem;
  	opacity: .8;
}

#loginModal .login-label {
  	display: block;
  	font-size: .85rem;
  	color: #bdbdbd;
  	margin-bottom: 6px;
}

#loginModal .login-input {
  	position: relative;
}
#loginModal .login-input__icon {
  	position: absolute;
  	left: 12px; top: 50%;
  	transform: translateY(-50%);
  	color: #c9c9c9;
  	opacity: .9;
  	pointer-events: none;
}

#loginModal .login-input__field {
  	padding-left: 38px;
  	background: rgba(255,255,255,0.06);
  	border: 1px solid rgba(255,255,255,0.12);
  	color: #fff;
  	border-radius: 10px;
  	height: 42px;
}
#loginModal .login-input__field::placeholder { color: #b7b7b7; }
#loginModal .login-input__field:focus {
  	background: rgba(255,255,255,0.08);
  	border-color: var(--ColorTemplate, #16a61c);
  	box-shadow: 0 0 0 0.15rem rgba(22,166,28,0.25);
  	color: #fff;
}

#loginModal .btn-login-primary,
#loginModal .btn-login-secondary {
  	border-radius: 10px;
  	padding: 10px 0;
  	font-weight: 700;
  	text-transform: none;
  	letter-spacing: .2px;
}

#loginModal .btn-login-primary {
  	background: linear-gradient(119deg, #16a61c, #0b6e0f);
  	color: #fff;
  	border: 1px solid rgba(22,166,28,0.35);
}

#loginModal .btn-login-primary:hover {
  	filter: brightness(1.05);
}

#loginModal .btn-login-secondary {
  	background: rgba(255,255,255,0.06);
  	color: #eaeaea;
  	border: 1px solid rgba(255,255,255,0.15);
}

#loginModal .btn-login-secondary:hover {
  	background: rgba(255,255,255,0.1);
  	color: #16a61c !important;
}

.btn-close-login {
  	filter: none;
}

#loginModal .modal-dialog {
  	max-width: 380px;
  	width: calc(100% - 32px);
  	margin: 200px auto 1rem !important;
}
@media (min-width: 576px) {
  #loginModal .modal-dialog { max-width: 420px; }
}

#loginModal.modal { --bs-modal-margin: 0; }

.modal-backdrop {
  	display: none !important;
  	background: transparent !important;
}

.btn-close {
	position: absolute;
	top: 10px;
	right: 10px;
}

.rank-carousel {
  	position: relative;
  	width: min(1100px, 95vw);
  	margin: 2rem auto;
}

.rank-carousel .rc-track {
  	position: relative;
  	display: block;
  	height: 420px;                
  	overflow: visible;
  	padding: 0 48px;            
}

.rank-carousel .rc-item {
  	position: absolute;
  	top: 50%;
  	left: 50%;
  	width: clamp(280px, 50vw, 360px);
  	transform: translate(-50%,-50%) scale(.85);
  	transition: transform .4s ease, filter .4s ease, opacity .4s ease, z-index .3s;
  	opacity: .5;
  	filter: blur(3px);
  	z-index: 1;
  	pointer-events: none;
}

.rank-carousel .rc-item.is-active {
  	transform: translate(-50%,-50%) scale(1);
  	opacity: 1;
  	filter: none;
  	z-index: 3;
  	pointer-events: auto;
}


.rank-carousel .rc-item.is-prev{
  	transform: translate(calc(-50% - 60px), -50%) scale(.92);
  	opacity: .75;
  	filter: blur(2px);
  	z-index: 2;
}
.rank-carousel .rc-item.is-next {
  	transform: translate(calc(-50% + 60px), -50%) scale(.92);
  	opacity: .75;
  	filter: blur(2px);
  	z-index: 2;
}

.rank-carousel .rc-arrow {
  	position: absolute;
  	top: 50%;
  	transform: translateY(-50%);
  	width: 38px; height: 38px;
  	border-radius: 50%;
  	border: 1px solid rgba(255,255,255,.2);
  	background: rgba(20,10,10,.55);
  	color: #fff;
  	display: grid; place-items: center;
  	cursor: pointer;
  	user-select: none;
  	transition: background .2s ease, transform .2s ease;
  	z-index: 5;
}

.rank-carousel .rc-prev{ left: 4px; }
.rank-carousel .rc-next{ right: 4px; }
.rank-carousel .rc-arrow:hover {
  	background: rgba(22,166,28,.65);
  	transform: translateY(-50%) scale(1.06);
}

.rank-carousel .rc-item > .card{
  height: 100%;
}

@media (max-width: 576px){
  .rank-carousel .rc-track{ padding: 0 40px; height: 420px; }
  .rank-carousel .rc-item.is-prev{
    transform: translate(calc(-50% - 40px), -50%) scale(.94);
  }
  .rank-carousel .rc-item.is-next{
    transform: translate(calc(-50% + 40px), -50%) scale(.94);
  }
}

.rank-card{
  position:relative;
  border:0; border-radius:8px;
  background:rgba(20,10,10,.55);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  overflow:hidden;
  box-shadow:0 10px 26px rgba(0,0,0,.45);
}
.rank-card::before{
  content:"";
  position:absolute; inset:0;
  padding:1px; border-radius:8px;
  background:linear-gradient(135deg,#2aa616,rgb(22 166 98 / 20%),#396e0b);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none;
}

.rank-card__header i{ color:var(--ColorTemplate,#16a61c); }
.rank-card__title{
  margin:0; font-weight:700; letter-spacing:.2px; color:#fff;
  font-family:'Cinzel',serif;
}

.rank-table {
  --row-sep: rgba(255,255,255,.06);
  --row-hover: rgba(22,166,28,.12);
  margin: 0;
  color: #e7e7e7;
  background: url('../img/ranking-bg.png') no-repeat center center;
}

.rank-table thead th {
  	background:rgba(0,0,0,.55);
  	color:#21e04a; font-weight:700;
  	border-bottom:1px solid var(--row-sep);
  	padding:.55rem .6rem; white-space:nowrap;
  	font-family:'Cinzel',serif;
}

.rank-table tbody tr {
  	min-height: 40px;             
  	line-height: 40px;        
}

.rank-table td {
  	vertical-align: middle;   
  	padding: .55rem .6rem;     
}

.rank-table td:first-child span {
  color: #e0e0e0;         
  font-weight: 700;
}

.rank-table td:first-child .rank-medal {
  	color: #fff !important;
}

.rank-table td:nth-child(3) {
  color: #6e6e6e;          
  font-weight: 600;
  font-family: 'Cinzel', serif; 
}

.rank-table a {
	font-family: 'Cinzel', serif;
	font-weight: 600;
	color: #6e6e6e;
}

.rank-table { --bs-table-bg:transparent; --bs-table-striped-bg:transparent; --bs-table-striped-color:inherit; }
.rank-table.table tbody tr { border-bottom:1px solid var(--row-sep); }
.rank-table.table tbody tr:hover > *{ background-color:rgba(22,166,28,0.15) !important; }

.rank-table td { padding:.55rem .6rem; vertical-align:middle; }
.rank-table .text-accent { color:var(--ColorTemplate,#16a61c); font-weight:700; }

.rank-card__footer {
  	padding:.65rem .9rem; border-top:1px solid rgba(255,255,255,.06);
  	display:flex; justify-content:center;
}
.rank-btn {
  	display:inline-flex; align-items:center; gap:.5rem;
  	padding:.45rem .9rem; border-radius:10px;
  	border:1px solid rgba(22,166,28,.35);
  	color:#fff; text-decoration:none; font-weight:700;
  	background:linear-gradient(119deg,#16a61c,#0b6e0f);
  	transition:filter .2s ease;
}
.rank-btn:hover{ filter:brightness(1.06); }

.rank-class-img{
  width:28px; height:28px; border-radius:8px;
  box-shadow:0 2px 8px rgba(0,0,0,.35);
  margin-right:.4rem;
}

@media (max-width:576px){
  .rank-table thead th{ font-size:.88rem; }
  .rank-table td{ font-size:.9rem; }
}

.rank-area{
  width:min(980px,96vw);
  margin:32px auto;
}

.rank-tabs {
  	display: flex;
  	justify-content: center;
  	gap: 40px; 
	margin-bottom: 40px;
	font-family: 'Cinzel', serif;
    font-weight: 600;
}

.rank-tabs .rank-tab {
  	background: rgba(20,10,10,.55);
  	color: #fff;
  	border: 1px solid rgba(255,255,255,.12);
  	padding: 8px 14px;
  	font-weight: 700;
  	border-radius: 6px;
}

.rank-tabs .rank-tab:hover {
	border-color: rgb(22 166 72 / 35%);
	background:linear-gradient(119deg,rgb(29 108 18 / 50%),rgb(4 72 9 / 50%));
}

.rank-panel-wrap.fixed {
  	position:relative;
  	width:100%;
  	min-height:343px;      
  	overflow:hidden;
}

.rank-panel {
  	position:absolute; inset:0;
  	display:none; opacity:0;
  	transform:translateY(4px);
  	transition:opacity .18s ease, transform .18s ease;
}

.rank-panel.is-active {
  	display:block; 
  	opacity:1; 
	transform:none;
}

.rank-tabs .rank-tab {
	background:rgba(20,10,10,.55);
  	color:#fff;
  	border:1px solid rgba(255,255,255,.12);
  	padding:8px 14px; font-weight:700;
}

.rank-tabs .rank-tab:not(.active):hover{ filter:brightness(1.05); }
.rank-tabs .rank-tab.active{
  	border-color: rgb(36 166 22 / 35%);
  	background: linear-gradient(119deg, rgb(40 108 18 / 50%), rgb(34 72 4 / 50%));
}

.rank-medal {
  	display:inline-flex; align-items:center; justify-content:center;
  	width:26px; height:26px; border-radius:50%;
  	font-size:.85rem; font-weight:700; color:#fff;
  	box-shadow:0 2px 6px rgba(0,0,0,.35);
}
.rank-medal.gold   { background:linear-gradient(145deg,#fe9800,#e9bb04); }
.rank-medal.silver { background:linear-gradient(145deg,#c0c0c0,#8d8d8d); }
.rank-medal.bronze { background:linear-gradient(145deg,#cd7f32,#7a4a1f); }


/* faqsss */

.faq-wrap {
  	width: min(980px, 96vw);
  	margin: 36px auto 0;
}

.faq-head {
  	display: flex;
  	align-items: center;
  	justify-content: center;
  	gap: .8rem;
  	margin-bottom: 2rem;
}
.faq-head h2 {
  	margin: 0;
  	color: #fff;
  	font-weight: 700;
  	font-family: 'Cinzel', serif;
  	font-size: 1.8rem; 
}

.faq-list {
  	display: flex;
  	flex-direction: column;
  	gap: 1rem;
}

.faq-item {
  	position: relative;
  	border-radius: 10px;
  	background: rgba(20, 10, 10, .55);
  	backdrop-filter: blur(8px);
  	-webkit-backdrop-filter: blur(8px);
  	box-shadow: 0 10px 26px rgba(0, 0, 0, .45);
  	overflow: hidden;
  	border: 0;
}

.faq-item::before {
  	content: "";
  	position: absolute; inset: 0; padding: 1px; border-radius: 10px;
  	background: linear-gradient(135deg, var(--ColorTemplate, #16a625), rgb(101 166 22 / 20%), #6e630b);
  	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  	-webkit-mask-composite: xor; mask-composite: exclude;
  	pointer-events: none;
}

.faq-toggle {
  	width: 100%;
  	background: transparent;
  	border: 0;
  	padding: .9rem 1rem;
  	display: flex;
  	align-items: center;
  	justify-content: space-between;
  	gap: 1rem;
  	color: #fff;
  	text-align: left;
  	font-weight: 700;
  	cursor: pointer;
  	transition: background .2s ease;
}

.faq-item.is-open .faq-toggle,
.faq-toggle:hover {
  	background: rgba(255, 255, 255, .05);
}

.faq-title {
  	display: flex;
  	align-items: center;
  	gap: .6rem;
}

.faq-title i {
  	color: var(--ColorTemplate, #16a61c);
}

.faq-chevron {
  	transition: transform .18s ease;
  	opacity: .9;
}

.faq-item.is-open .faq-chevron {
  	transform: rotate(180deg);
}

.faq-content {
  	max-height: 0;
  	overflow: hidden;
  	transition: max-height .22s ease;
  	padding: 0 1rem;
}
.faq-content > div {
  	padding: .4rem 0 1rem 1.7rem;
  	border-top: 1px solid rgba(255,255,255, .08);
  	margin-top: -.5rem; 
  	color: #dcdcdc;
}

.faq-content p {
  	margin: 0 0 .6rem 0;
}
.faq-content p:first-child {
  	margin-top: .6rem;
}
.faq-content a {
  	color: var(--ColorTemplate, #16a61c);
  	text-decoration: none;
}
.faq-content a:hover {
  	text-decoration: underline;
}
.info-card {
  position: relative;
  border-radius: 10px;
  background: rgba(20, 10, 10, .55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .45);
  overflow: hidden;
  border: 0;
  margin-bottom: 30px;
}

.info-card::before {
  content: "";
  position: absolute; inset: 0; padding: 1px; border-radius: 10px;
  background: linear-gradient(135deg, var(--ColorTemplate, #16a61c), rgba(22, 166, 28, .2), #0b6e0f);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}

.info-card__header {
  padding: 1rem 1.2rem;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.info-card__header h2 {
  margin: 0;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  color: #fff;
  font-size: 1.5rem;
  text-align: left;
}

.info-card__body {
  padding: 1.2rem;
}

.info-general-list {
  display: grid;
  gap: 1rem;
  color: #e7e7e7;
}

.info-general-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.info-general-item:last-child {
  border-bottom: 0;
}

.info-general-label {
  font-weight: 500;
  color: #cccccc;
}

.info-general-value {
  font-weight: 700;
  color: var(--ColorTemplate, #16a61c);
  font-size: 1.1rem;
}

.info-table {
  width: 100%;
  --row-sep: rgba(255, 255, 255, .08);
  --row-hover: rgba(22, 166, 28, .15);
  margin: 0;
  color: #e7e7e7;
  border-collapse: collapse;
}

.info-table thead th {
  background: rgba(0, 0, 0, .55);
  color: var(--ColorTemplate, #16a61c);
  font-weight: 700;
  border-bottom: 2px solid var(--row-sep);
  padding: .75rem .8rem;
  white-space: nowrap;
  font-family: 'Cinzel', serif;
  text-align: center;
}

.info-table tbody td {
  border-bottom: 1px solid var(--row-sep);
  padding: .75rem .8rem;
  vertical-align: middle;
  transition: background-color 0.2s ease;
}

.info-table tbody tr:last-child td {
  border-bottom: 0;
}

.info-table tbody tr:hover > * {
  background-color: var(--row-hover);
}

.info-video-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%;
  border-radius: 8px;
}

.info-video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

:root{
  --rank-text:#e7e9ee;
  --rank-muted:#9aa4b2;
  --rank-border:rgba(255,255,255,.12);
  --rank-surface:rgba(20,10,10,.55);
  --rank-sep:rgba(255,255,255,.06);
  --rank-hover:rgba(22,166,28,.15);
  --rank-accent:#16a61c;
  --rank-accent-2:#0b6e0f;
}

#RankingGeneral_wrapper .col-sm-12{ overflow-x:auto !important; }

#RankingGeneral_wrapper .general-rank{
  width:100% !important;
  background: var(--rank-surface) !important;
  border:0 !important;
  border-radius:10px !important;
  box-shadow:0 10px 26px rgba(0,0,0,.45) !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  table-layout:auto !important;
  white-space:nowrap !important;
  position: relative;
}

#RankingGeneral_wrapper{
  position:relative;
  margin-top:18px;
  margin-bottom: 25px;
}
#RankingGeneral_wrapper::before{
  content:"";
  position:absolute; inset:0;
  border-radius:10px;
  padding:1px;
  background:linear-gradient(135deg,var(--rank-accent),rgba(22,166,28,.2),var(--rank-accent-2));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none;
}

#RankingGeneral thead,
#RankingGeneral thead.bg-primary,
#RankingGeneral thead .bg-primary{
  background:rgba(0,0,0,.55) !important;
  color:#21e021 !important;
}
#RankingGeneral thead th,
#RankingGeneral thead td{
  border-bottom:1px solid var(--rank-sep) !important;
  color:#21e021 !important;
  font-weight:700 !important;
  letter-spacing:.2px !important;
  padding:.55rem .6rem !important;
  white-space:nowrap !important;
}
#RankingGeneral thead i{ color:var(--rank-accent) !important; margin-right:.35rem !important; }

#RankingGeneral > :not(caption) > * > *{
  background-color:transparent !important;
  border-bottom:1px solid var(--rank-sep) !important;
  color:var(--rank-text) !important;
  padding:.55rem .6rem !important;
  vertical-align:middle !important;
}
#RankingGeneral tbody tr:hover > *{
  background-color:var(--rank-hover) !important;
}
#RankingGeneral tbody tr{ line-height:20px !important; }

#RankingGeneral td.rankings-table-place{
  width:84px !important;
  font-weight:700 !important;
}
#RankingGeneral .rankings-table-place i.fa-medal{
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  width:26px !important; height:26px !important;
  border-radius:50% !important; font-size:.85rem !important; color:#fff !important;
  margin-right:.45rem !important;
  box-shadow:0 2px 6px rgba(0,0,0,.35) !important;
  background:linear-gradient(145deg,#6b6b6b,#3d3d3d) !important;
}

#RankingGeneral tbody tr:nth-child(1) .rankings-table-place i.fa-medal{
  background:linear-gradient(145deg,#fe9800,#e9bb04) !important;
}
#RankingGeneral tbody tr:nth-child(2) .rankings-table-place i.fa-medal{
  background:linear-gradient(145deg,#c0c0c0,#8d8d8d) !important;
}
#RankingGeneral tbody tr:nth-child(3) .rankings-table-place i.fa-medal{
  background:linear-gradient(145deg,#cd7f32,#7a4a1f) !important;
}
#RankingGeneral .rankings-table-place{
  color:#e0e0e0 !important;
}

#RankingGeneral tbody td:nth-child(2){ min-width:360px !important; max-width:520px !important; }
#RankingGeneral .rankings-class-image{
  width:28px !important; height:28px !important; border-radius:8px !important;
  object-fit:cover !important; margin-right:.4rem !important;
  box-shadow:0 2px 8px rgba(0,0,0,.35) !important;
  border:1px solid rgba(255,255,255,.18) !important;
}
#RankingGeneral a[target="_blank"]{
  font-weight:600 !important;
  color:#6e6e6e !important;
  text-decoration:none !important;
  display:inline-block !important;
  max-width:220px !important; overflow:hidden !important; text-overflow:ellipsis !important;
}
#RankingGeneral a[target="_blank"]:hover{ color:#9a9a9a !important; }
#RankingGeneral span.text-muted{
  color:#6e6e6e !important; font-size:.9rem !important;
}

#RankingGeneral tbody td:nth-child(3){
  color:#6e6e6e !important; font-weight:600 !important;
}
#RankingGeneral tbody td:nth-child(4){ color:var(--rank-muted) !important; }
#RankingGeneral tbody td:nth-child(5) img{
  width:20px !important; height:14px !important; object-fit:cover !important;
  border:1px solid rgba(255,255,255,.2) !important; border-radius:3px !important;
}

#RankingGeneral_wrapper .dataTables_filter{
  margin: 12px 0 14px !important; display:flex !important; justify-content:center !important;
}
#RankingGeneral_wrapper .dataTables_filter label{ width:100% !important; max-width:320px !important; }
#RankingGeneral_wrapper .dataTables_filter input.form-control{
  background:rgba(20,10,10,.55) !important; color:var(--rank-text) !important;
  border:1px solid var(--rank-border) !important; border-radius:10px !important;
  padding:10px 12px !important; box-shadow: inset 0 0 0 1px rgba(0,0,0,.2) !important;
}
#RankingGeneral_wrapper .dataTables_filter input.form-control:focus{
  border-color:var(--rank-accent) !important; outline:none !important;
  box-shadow:0 0 0 3px rgba(22,166,28,.25), 0 10px 24px rgba(0,0,0,.35) !important;
}

/* ====== Responsive ====== */
@media (max-width: 768px){
  #RankingGeneral thead th:nth-child(4),
  #RankingGeneral thead td:nth-child(4),
  #RankingGeneral tbody td:nth-child(4),
  #RankingGeneral thead th:nth-child(5),
  #RankingGeneral thead td:nth-child(5),
  #RankingGeneral tbody td:nth-child(5){
    display:none !important;
  }
  #RankingGeneral_wrapper .dataTables_filter{ justify-content:stretch !important; }
}

:root{
  --acc-text:#e7e9ee;
  --acc-muted:#9aa4b2;
  --acc-surface:rgba(20,10,10,.55);
  --acc-border:rgba(255,255,255,.12);
  --acc-sep:rgba(255,255,255,.06);
  --acc-hover:rgba(22,166,28,.15);
  --acc-accent:#16a61c;
  --acc-accent-2:#0b6e0f;
}

.news-row-fix .col-12{
  position: relative;
  color: var(--acc-text);
}

.news-row-fix .page-title{
  margin: 18px 0 10px;
  display:flex; align-items:center; gap:.6rem;
}
.news-row-fix .page-title span{
  display:inline-block;
  padding:.45rem .9rem;
  font-weight:700;
  letter-spacing:.2px;
  color:#fff;
  background: linear-gradient(119deg, rgba(22,166,28,.18), rgba(11,110,15,.18));
  border:1px solid var(--acc-border);
  border-radius:10px;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}

.news-row-fix .myaccount-table{
  width:100% !important;
  background: var(--acc-surface) !important;
  border: 0 !important;
  border-radius: 10px !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.45) !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  table-layout: fixed;
  overflow: hidden;
  margin-bottom: 16px;
  color: var(--acc-text) !important;
}
.news-row-fix .myaccount-table:before{
  content:"";
  position:absolute; inset:0;
  border-radius:10px;
  padding:1px;
  background:linear-gradient(135deg,var(--acc-accent),rgba(22,166,28,.2),var(--acc-accent-2));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none;
}

.news-row-fix .myaccount-table > :not(caption) > * > *{
  background: transparent !important;
  border-bottom: 1px solid var(--acc-sep) !important;
  padding: .75rem 1rem !important;
  vertical-align: middle !important;
  color: var(--acc-text) !important;
}
.news-row-fix .myaccount-table tbody tr:hover > *{
  background-color: var(--acc-hover) !important;
}
.news-row-fix .myaccount-table td:first-child{
  width: 38%;
  color: var(--acc-muted) !important;
  font-weight: 600;
}
.news-row-fix .myaccount-table td:last-child{
  width: 62%;
  font-weight: 700;
  color: #e3e6ec;
}

.news-row-fix .label{
  display:inline-block;
  padding:.25rem .55rem;
  border-radius: .5rem;
  font-size: .85rem;
  font-weight: 700;
  line-height: 1;
  border:1px solid rgba(255,255,255,.18);
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.news-row-fix .label-default{
  color:#fff; background: rgba(11,110,15,.55);
  border-color: rgba(255,255,255,.22);
}
.news-row-fix .label-danger{
  color:#fff; background: linear-gradient(119deg,#16a61c,#0b6e0f);
  border-color: rgba(255,255,255,.22);
}

.news-row-fix .btn.btn-xs{
  --btn-pad-y: .3rem;
  --btn-pad-x: .7rem;
  padding: var(--btn-pad-y) var(--btn-pad-x) !important;
  font-size: .85rem !important;
  line-height: 1.1 !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color:#fff !important;
  background: linear-gradient(119deg,#16a61c,#0b6e0f) !important;
  box-shadow: 0 6px 14px rgba(0,0,0,.35) !important;
  text-decoration: none !important;
  transition: filter .2s ease, transform .15s ease !important;
}
.news-row-fix .btn.btn-xs:hover{
  filter: brightness(1.06);
  transform: translateY(-1px);
}
.news-row-fix .pull-right{ float:right !important; } 

.news-row-fix .alert{
  background: rgba(255,193,7,.08) !important;
  border:1px solid rgba(255,193,7,.25) !important;
  color:#ffd875 !important;
  border-radius:10px !important;
  padding:.8rem 1rem !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.35) !important;
}

.news-row-fix .myaccount-table a{
  color:#cfd3db; text-decoration:none;
  border-bottom:1px dashed rgba(255,255,255,.25);
  transition: color .15s ease, border-color .15s ease;
}
.news-row-fix .myaccount-table a:hover{
  color:#ffffff; border-color: rgba(255,255,255,.5);
}

@media (max-width: 576px){
  .news-row-fix .myaccount-table{
    table-layout: auto;
  }
  .news-row-fix .myaccount-table tr{
    display: grid; grid-template-columns: 1fr; row-gap:.25rem;
    padding:.35rem .25rem;
  }
  .news-row-fix .myaccount-table td{
    display:block; width:100% !important;
    border-bottom: none !important;
  }
  .news-row-fix .myaccount-table td:first-child{
    color:#b6becb !important; margin-bottom:.15rem;
  }
  .news-row-fix .myaccount-table tr + tr > td:first-child{
    border-top:1px solid var(--acc-sep) !important;
    padding-top:.8rem !important; margin-top:.3rem;
  }
}

.panel-usercp{
  background: rgba(20,10,10,.55) !important;
  border: 0 !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.45) !important;
  overflow: hidden;
  color: #e7e9ee;
  position: relative;
  margin: 20px 0;
}

.panel-usercp::before{
  content:"";
  position:absolute; inset:0;
  border-radius:12px;
  padding:1px;
  background:linear-gradient(135deg,#16a61c,rgba(22,166,28,.2),#0b6e0f);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none;
}

.panel-usercp .card-header{
  background: linear-gradient(119deg, rgba(22,166,28,.85), rgba(11,110,15,.85)) !important;
  border: 0 !important;
  color: #fff !important;
  font-weight: 700;
  letter-spacing: .3px;
  padding: .8rem 1rem;
  font-size: 1rem;
  display:flex; align-items:center; gap:.6rem;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.1);
}
.panel-usercp .card-header i{ color:#fff; opacity:.9; }

.panel-usercp .card-body{
  padding: 1.2rem 1rem;
  background: rgba(0,0,0,.25);
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.panel-usercp .card-footer{
  background: rgba(0,0,0,.3);
  padding:.75rem 1rem;
  border-top: 1px solid rgba(255,255,255,.08);
  display:flex;
  justify-content:center;
}

.panel-usercp .btn.btn-primary.btn-sm{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.45rem 1rem !important;
  font-size:.9rem !important;
  font-weight:700;
  color:#fff !important;
  border: 1px solid rgba(255,255,255,.15) !important;
  border-radius: 8px !important;
  background: linear-gradient(119deg,#16a61c,#0b6e0f) !important;
  box-shadow: 0 6px 14px rgba(0,0,0,.35) !important;
  text-decoration: none !important;
  transition: filter .2s ease, transform .15s ease;
}
.panel-usercp .btn.btn-primary.btn-sm:hover{
  filter:brightness(1.06);
  transform: translateY(-1px);
}

.panel.panel-addstats{
  position: relative;
  background: rgba(20,10,10,.55) !important;
  border: 0 !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.45) !important;
  color: #e7e9ee;
  overflow: hidden;
  margin: 18px 0 24px;
}

.panel.panel-addstats::before{
  content: "";
  position: absolute; inset: 0;
  border-radius: 12px;
  padding: 1px;
  background: linear-gradient(135deg, var(--ColorTemplate,#16a61c), rgba(22,166,28,.2), #0b6e0f);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}

.panel-addstats .panel-body{
  background: rgba(0,0,0,.25);
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
  padding: 14px 14px 6px;
}

.panel-addstats .character-avatar img{
  width: 110px; height: auto; border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.18);
}

.panel-addstats .character-name{
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .65rem .8rem;
  margin: 0 0 16px !important;
  color: #fff;
  font-weight: 700;
  letter-spacing: .3px;border-radius: 8px;
  font-family: 'Cinzel', serif;
	font-size: 24px;
}
.panel-addstats .form-horizontal .form-group{
  margin-left: 0; margin-right: 0;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.panel-addstats .form-horizontal .form-group:last-child{
  border-bottom: 0;
}

.panel-addstats .control-label{
  color: #bfc6d2;
  font-weight: 600;
  padding-top: 8px;
  text-align: right;
}

.panel-addstats .form-control{
  height: 40px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  color: #fff;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.15);
}
.panel-addstats .form-control::placeholder{ color:#b7b7b7; }
.panel-addstats .form-control:focus{
  border-color: var(--ColorTemplate,#16a61c);
  box-shadow: 0 0 0 .15rem rgba(22,166,28,.25), 0 10px 24px rgba(0,0,0,.35);
  background: rgba(255,255,255,.08);
  color:#fff;
  outline: none;
}

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

.panel-addstats .form-group:first-of-type .col-sm-7{
  color: #e3e6ec; font-weight: 700;
}

.panel-addstats .btn.btn-primary{
  border-radius: 10px !important;
  padding: .55rem 1.1rem !important;
  font-weight: 700;
  background: linear-gradient(119deg, var(--ColorTemplate,#16a61c), #0b6e0f) !important;
  border: 1px solid rgba(255,255,255,.15) !important;
  box-shadow: 0 6px 14px rgba(0,0,0,.35) !important;
  transition: filter .2s ease, transform .15s ease;
}
.panel-addstats .btn.btn-primary:hover{
  filter: brightness(1.06); transform: translateY(-1px);
}

.module-requirements{
  margin-top: 10px;
  padding: .8rem 1rem;
  border-radius: 10px;
  background: rgba(255,193,7,.08);
  border: 1px solid rgba(255,193,7,.25);
  color: #ffd875;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
.module-requirements p{ margin: .25rem 0; }

@media (max-width: 768px){
  .panel-addstats .control-label{ text-align: left; padding-bottom: 6px; }
  .panel-addstats .character-avatar{ margin-bottom: 10px; }
}

.panel.panel-addstats + .panel.panel-addstats{ margin-top: 14px; }

.table.general-table-ui{
  position: relative;
  width: 100%;
  background: rgba(20,10,10,.55) !important;
  border: 0 !important;
  border-radius: 10px !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.45) !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  overflow: hidden;
  color: #e7e9ee !important;
  table-layout: auto;
}

.table.general-table-ui::before{
  content:"";
  position:absolute; inset:0;
  border-radius:10px;
  padding:1px;
  background:linear-gradient(135deg, var(--ColorTemplate,#16a61c), rgba(22,166,28,.2), #0b6e0f);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none;
}

.table.general-table-ui tr:first-child td{
  background: rgba(0,0,0,.55) !important;
  color: #21e021 !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
  font-weight: 700 !important;
  letter-spacing: .2px;
  padding: .65rem .8rem !important;
  white-space: nowrap;
}

.table.general-table-ui > :not(caption) > * > *{
  background: transparent !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
  padding: .65rem .8rem !important;
  vertical-align: middle !important;
  color: #e7e9ee !important;
}
.table.general-table-ui tbody tr:hover > *{
  background-color: rgba(22,166,28,.15) !important;
}

.table.general-table-ui tbody td:first-child{
  width: 80px; 
}
.table.general-table-ui tbody td:first-child img{
  width: 46px; height: 46px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
}

.table.general-table-ui tbody td:nth-child(2){
  min-width: 180px;
  font-weight: 700;
  color: #e3e6ec !important;
}

.table.general-table-ui tbody td:nth-child(3){
  color: #9aa4b2 !important; font-weight: 700;
}
.table.general-table-ui tbody td:nth-child(4),
.table.general-table-ui tbody td:nth-child(5){
  color: #cfd3db !important;
  font-weight: 600;
}

.table.general-table-ui .btn.btn-primary{
  border-radius: 10px !important;
  padding: .45rem .9rem !important;
  font-weight: 700;
  background: linear-gradient(119deg, var(--ColorTemplate,#16a61c), #0b6e0f) !important;
  border: 1px solid rgba(255,255,255,.15) !important;
  box-shadow: 0 6px 14px rgba(0,0,0,.35) !important;
  transition: filter .2s ease, transform .15s ease;
}
.table.general-table-ui .btn.btn-primary:hover{
  filter: brightness(1.06); transform: translateY(-1px);
}

.module-requirements{
  margin-top: 10px;
  padding: .8rem 1rem;
  border-radius: 10px;
  background: rgba(255,193,7,.08);
  border: 1px solid rgba(255,193,7,.25);
  color: #ffd875;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
.module-requirements p{ margin:.25rem 0; }

@media (max-width: 576px){
  .table.general-table-ui tr:first-child td:nth-child(4),
  .table.general-table-ui tr:first-child td:nth-child(5),
  .table.general-table-ui tbody td:nth-child(4),
  .table.general-table-ui tbody td:nth-child(5){
    display: none !important;
  }
}

.panel.panel-general{
  position: relative;
  background: rgba(20,10,10,.55) !important;
  border: 0 !important;
  border-radius: 10px !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.45) !important;
  color: #e7e9ee;
  overflow: hidden;
}

.panel.panel-general::before{
  content:"";
  position:absolute; inset:0;
  border-radius:10px;
  padding:1px;
  background: linear-gradient(135deg, var(--ColorTemplate,#16a61c), rgba(22,166,28,.2), #0b6e0f);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events:none;
}

.panel.panel-general .panel-body{
  background: rgba(0,0,0,.25);
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
  padding: 14px 12px;
}

.panel.panel-general .row:first-of-type .col-xs-4{
  color:#cfd3db; font-weight:700; letter-spacing:.2px;
  padding: 6px 0 10px;
}

.panel.panel-general .form-control{
  height: 42px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  color: #fff;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.15);
}
.panel.panel-general .form-control:focus{
  border-color: var(--ColorTemplate,#16a61c);
  box-shadow: 0 0 0 .15rem rgba(22,166,28,.25), 0 10px 24px rgba(0,0,0,.35);
  background: rgba(255,255,255,.08);
  color:#fff;
  outline: none;
}

.panel.panel-general .btn.btn-primary{
  border-radius: 10px !important;
  padding: .55rem 1rem !important;
  font-weight: 700;
  background: linear-gradient(119deg, var(--ColorTemplate,#16a61c), #0b6e0f) !important;
  border: 1px solid rgba(255,255,255,.15) !important;
  box-shadow: 0 6px 14px rgba(0,0,0,.35) !important;
  transition: filter .2s ease, transform .15s ease;
}
.panel.panel-general .btn.btn-primary:hover{
  filter: brightness(1.06); transform: translateY(-1px);
}

.panel.panel-general .row + .row{ margin-top: 8px; }
.panel.panel-general .col-xs-4{ padding: 6px; }

@media (max-width: 576px){
  .panel.panel-general .row .col-xs-4{
    width:100%; float:none; text-align:left !important;
  }
  .panel.panel-general .row:first-of-type .col-xs-4{
    padding-top:0;
  }
}

.needs-validation{
  position: relative;
  display: block;
  background: rgba(20,10,10,.55);
  border: 0;
  border-radius: 12px;
  box-shadow: 0 10px 26px rgba(0,0,0,.45);
  color: #e7e9ee;
  padding: 16px 14px;
  overflow: hidden;
}

.needs-validation::before{
  content:"";
  position:absolute; inset:0;
  border-radius:12px;
  padding:1px;
  background: linear-gradient(135deg, var(--ColorTemplate,#16a61c), rgba(22,166,28,.2), #0b6e0f);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}

.needs-validation .input-group{
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  overflow: hidden;
}

.needs-validation .input-group-text{
  background: rgba(255,255,255,.06);
  border: 0;
  color: #cfcfcf;
  font-weight: 700;
  padding: 0 12px;
}

.needs-validation .form-control{
  height: 42px;
  background: rgba(255,255,255,.06);
  border: 0;
  border-left: 1px solid rgba(255,255,255,.08);
  color: #fff;
  border-radius: 0;                
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
}
.needs-validation .form-control::placeholder{ color:#b7b7b7; }
.needs-validation .form-control:focus{
  border-color: var(--ColorTemplate,#16a61c);
  box-shadow: 0 0 0 .15rem rgba(22,166,28,.25), 0 10px 24px rgba(0,0,0,.35);
  background: rgba(255,255,255,.08);
  color:#fff;
  outline: none;
}

.needs-validation small{
  display:block;
  margin-top:6px;
  color:#cfd3db;
}
.needs-validation .invalid-feedback{
  color:#b8ffb4;
}

.needs-validation .row > .col hr{
  margin: 0;
  border-color: rgba(255,255,255,.12);
}
.needs-validation .row > .col-auto{
  color:#fff;
  font-weight:700;
  letter-spacing:.2px;
  background: linear-gradient(119deg, rgba(22,166,28,.18), rgba(11,110,15,.18));
  border:1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  padding: .15rem .65rem;
  margin: 0 .4rem;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}

.needs-validation .form-check-input{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.25);
}
.needs-validation .form-check-input:checked{
  background-color: var(--ColorTemplate,#16a61c);
  border-color: var(--ColorTemplate,#16a61c);
  box-shadow: 0 0 0 .15rem rgba(22,166,28,.25);
}
.needs-validation .form-check-label{
  color:#e7e9ee;
}

.needs-validation .g-recaptcha{
  display:inline-block;
  filter: drop-shadow(0 8px 22px rgba(0,0,0,.35));
}

.needs-validation .btn.btn-primary{
  border-radius: 10px !important;
  padding: .55rem 1rem !important;
  font-weight: 700;
  background: linear-gradient(119deg, var(--ColorTemplate,#16a61c), #0b6e0f) !important;
  border: 1px solid rgba(255,255,255,.15) !important;
  box-shadow: 0 6px 14px rgba(0,0,0,.35) !important;
  transition: filter .2s ease, transform .15s ease;
}
.needs-validation .btn.btn-primary:hover{
  filter: brightness(1.06); transform: translateY(-1px);
}

.needs-validation .form-row,
.needs-validation .form-group{ margin-bottom: 12px; }

@media (max-width:576px){
  .needs-validation{ padding: 14px 12px; }
  .needs-validation .row > .col-auto{ margin: 0 .25rem; }
}

html { min-width: 0 !important; }
html, body { overflow-x: hidden; }

#container { 
  width: 100% !important; 
  max-width: 1040px; 
  margin-inline: auto;
  padding-left: 16px;
  padding-right: 16px;
}

.global-top-bar .global-top-bar-content {
  width: 100% !important;
  max-width: 1040px;
  padding-left: 12px;
  padding-right: 12px;
}

img, video, iframe { max-width: 100%; height: auto; }

.table-responsive, 
#RankingGeneral_wrapper .col-sm-12 {
  overflow-x: auto !important;
}

@media (max-height: 700px) {
  #loginModal .modal-dialog { margin-top: 80px !important; }
}



/* PANEL DE DESCARGAS FIXEADO */

.panel.panel-downloads{
  position: relative;
  background: rgba(20,10,10,.55);
  border: 0;
  border-radius: 12px;
  box-shadow: 0 10px 26px rgba(0,0,0,.45);
  color: #e7e9ee;
  overflow: hidden;
  margin: 18px 0 24px;
}

.panel.panel-downloads::before{
  content: "";
  position: absolute; inset: 0;
  border-radius: 12px;
  padding: 1px;
  background: linear-gradient(135deg, var(--ColorTemplate,#16a61c), rgba(22,166,28,.2), #0b6e0f);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}

.panel-downloads .panel-body{
  background: rgba(0,0,0,.25);
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
  padding: 16px 14px;
}

.panel-downloads .panel-title{
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: 1.05rem; font-weight: 800; letter-spacing: .3px;
  color: #fff; margin-bottom: 12px; padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.panel-downloads .panel-title::before{
  content:""; width: 12px; height: 12px; border-radius: 3px;
  background: linear-gradient(119deg, var(--ColorTemplate,#16a61c), #0b6e0f);
  box-shadow: 0 0 18px rgba(22,166,28,.35);
}

.panel-downloads .table{
  width: 100%;
  margin: 0;
  color: #e7e9ee;
  background: transparent;
  table-layout: auto;
}
.panel-downloads .table tr{
  transition: background-color .15s ease;
}
.panel-downloads .table tr:hover{
  background-color: rgba(22,166,28,.12);
}
.panel-downloads .table td{
  border-top: 1px solid rgba(255,255,255,.06);
  vertical-align: middle;
  padding: 10px 8px;
}

.panel-downloads .table td:first-child{
  font-weight: 700;
}
.panel-downloads .download-description{
  display: inline-block;
  margin-top: 2px;
  font-size: .82rem;
  font-weight: 600;
  color: #cfd3db;
  opacity: .9;
}
.panel-downloads .download-description::before{
  content: "⭳ ";
  opacity: .9;
}

.panel-downloads .table td:nth-child(2){
  color: #ffd875; font-weight: 700;
}

.panel-downloads .btn{
  font-size: .86rem;
  padding: 7px 14px;
  border-radius: 10px;
  box-shadow: 0 6px 14px rgba(0,0,0,.35);
  transition: filter .2s ease, transform .15s ease;
}
.panel-downloads .btn:hover{ filter: brightness(1.06); transform: translateY(-1px); }

.panel-downloads .btn-xs{ padding: 6px 12px; font-size: .82rem; }

@media (max-width: 680px){
  .panel-downloads .table tr{
    display: grid;
    grid-template-columns: 1fr 110px 120px;
    gap: 8px;
    align-items: center;
    padding: 6px 0;
  }
  .panel-downloads .table td{
    border-top: none;
    padding: 6px 4px;
  }
  .panel-downloads .table td:first-child{
    order: 1;
  }
  .panel-downloads .table td:nth-child(2){
    order: 2; text-align: center;
  }
  .panel-downloads .table td:nth-child(3){
    order: 3; text-align: right;
  }
}

@media (max-width: 460px){
  .panel-downloads .table tr{
    grid-template-columns: 1fr 100px;
  }
  .panel-downloads .table td:nth-child(3){
    grid-column: 1 / -1;
    text-align: left;
    padding-top: 2px;
  }
}

.panel-downloads .table{
  --bs-table-color: #e7e9ee;
  --bs-table-bg: transparent;            
  --bs-table-border-color: rgba(255,255,255,.06);
  --bs-table-accent-bg: transparent;           
  --bs-table-hover-bg: rgba(22,166,28,.12);     
  --bs-table-hover-color: #e7e9ee;
  --bs-table-active-bg: rgba(22,166,28,.18);
  --bs-table-active-color: #fff;
}

.panel-downloads .table > :not(caption) > * > *{
  padding: 10px 8px !important;                  
  background-color: transparent !important;       
  border-bottom-width: 0 !important;             
  box-shadow: none !important;                 
  color: var(--bs-table-color) !important;
}

.panel-downloads .table > tbody > tr + tr > *{
  border-top: 1px solid var(--bs-table-border-color) !important;
}

.panel-downloads .table tbody tr:hover > *{
  background-color: var(--bs-table-hover-bg) !important;
  color: var(--bs-table-hover-color) !important;
}

.panel-downloads .table > thead > tr > *{
  font-weight: 700;
  border-bottom: 1px solid rgba(255,255,255,.12) !important;
}

.panel-downloads .table{
  margin-bottom: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* ==== TABS ==== */

:root {
    --box-bg: #0a1e02;
    --text-secondary-color: #879a87; 
    --active-tab-bg: 
        linear-gradient(360deg, #00f18d, rgba(0, 255, 144, 0) 8.57%),
        radial-gradient(307.71% 364.11% at 43.77% -252.14%, #003c00 0%, #006f00 100%),
        #18181d;
    --white: #fff; 
    --light-gray: #9fa99f;
    --border-color: rgba(255, 255, 255, 0.1);
}

.tabs-container-wrapper {
    width: calc(100% - 50px);
    max-width: none;
    margin: 50px auto;
}

.tabs-bordered-wrap {
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, .12);
    overflow: hidden;
}

/* --- Barra de solapas --- */
.tabs-bar {
    display: flex;
    background: transparent;
    height: 69px; 
}

/* --- Estilo base para cada solapa --- */
.tab-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    flex-grow: 1;
    height: 100%;
    padding: 18px 15px;
    white-space: normal;
    text-align: left;
    font-weight: 700;
    font-size: 1em;
    cursor: pointer !important;
    background: var(--box-bg);
    color: var(--text-secondary-color);
    border: none;
    transition: color 0.3s ease, border-radius 0.3s ease;
    user-select: none;
    z-index: 2;
}

/* --- Pseudo-elemento para el fondo de la solapa activa --- */
.tab-link:before {
    content: "";
    position: absolute;
    top: 0;
    left: -20px;
    height: 100%;
    width: calc(100% + 40px);
    background: var(--active-tab-bg);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
}

/* --- Línea separadora entre solapas inactivas --- */
.tab-link:not(.active) + .tab-link:not(.active):after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    height: 30px;
    width: 1px;
    transform: translateY(-50%);
    background: var(--border-color);
}

/* --- Efecto Hover --- */
.tab-link:hover {
    color: var(--white);
}

/* --- Estilos para la solapa activa --- */
.tab-link.active {
    color: var(--white);
}

.tab-link.active:before {
    opacity: 1;
}

/* --- Borde redondeado para la solapa a la derecha de la activa --- */
.tab-link.active + .tab-link:not(.active) {
    border-top-left-radius: 20px;
}

/* --- Estilos para el contenido (sin cambios, pero se incluye por contexto) --- */
.tabs-content {
    background: rgba(33, 33, 33, .35);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}

.tab-content-panel {
    padding: 40px;
    animation: fadeIn 0.5s;
    display: none;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
}

.tab-content-panel.active {
    display: flex;
    align-items: flex-start;
}

.panel-content-text { width: 50%; color: var(--light-gray); }
.panel-content-text h3 { position: relative; margin: 0 0 36px; font-size: 32px; font-weight: 700; color: var(--white); text-align: left; text-transform: uppercase; line-height: 1.2;}
.panel-content-text h3:after { content: ""; position: absolute; bottom: -18px; left: 0; width: 100%; height: 1px; background-color: rgba(255, 255, 255, .2); }
.panel-content-text p { line-height: 1.5; font-size: 1em; }
.panel-content-media { width: 50%; text-align: center; }
.panel-content-media img { max-width: 100%; height: auto; border-radius: 20px; max-height: 412px; }

@media(max-width: 780px) {
    .tab-content-panel { flex-direction: column; padding: 20px; }
    .panel-content-text, .panel-content-media { width: 100%; }
    .panel-content-text h3 { font-size: 22px; }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.tab-icon {
    width: 32px;      /* Ancho del icono, puedes ajustarlo */
    height: 32px;     /* Alto del icono, puedes ajustarlo */
    margin-right: 10px; /* Espacio entre el icono y el texto */
}




/* ==== SECCION STREAMINGS ===== */

#stream-fab {
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgb(61 0 100 / 35%);
  color: #ffeaff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 22px;
  box-shadow: 0 8px 24px rgb(138 0 255 / 35%), inset 0 0 10px rgb(113 0 255 / 40%);
  backdrop-filter: blur(8px);
  border: 1px solid rgb(220 0 255 / 35%);
  cursor: pointer;
  z-index: 10000;
  transition: transform 0.2s ease, box-shadow 0.3s ease;
}
#stream-fab:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 8px 28px rgb(182 0 255 / 55%),
              inset 0 0 14px rgb(128 0 255 / 50%);
}
#stream-fab .dot {
  position:absolute; top:-4px; right:-4px;
  min-width: 22px; height: 22px; border-radius: 999px;
  background:#8422c5;
  color:#fff; display:flex; align-items:center; justify-content:center;
  font: 700 12px/1 system-ui, sans-serif;
  box-shadow: 0 0 0 2px rgb(22 0 40 / 90%);
}

#stream-panel {
  position: fixed;
  right:16px;
  bottom:84px;
  width: min(92vw, 420px);
  max-height: min(70vh, 560px);
  background: rgb(17 0 40 / 45%);
  color:#f3eafa;
  border: 1px solid rgb(163 0 255 / 25%);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgb(134 0 255 / 25%);
  z-index: 10000;
  backdrop-filter: blur(12px) saturate(140%);
}
#stream-panel .sp-header {
  display:flex; align-items:center; justify-content:space-between;
  padding: 10px 12px;
  border-bottom: 1px solid rgb(149 0 255 / 15%);
}
#stream-panel .sp-body {
  padding: 8px;
  overflow:auto;
  max-height: calc(70vh - 90px);
}
#stream-panel .sp-footer {
  padding:8px 12px;
  border-top:1px solid rgb(114 0 255 / 15%);
  color:#c39fdf;
}

/* Cards */
.sp-card {
  display:flex; gap:10px; padding:8px;
  border-radius:10px; text-decoration:none;
  color:inherit; border:1px solid rgb(166 0 255 / 10%);
  background: rgb(49 0 80 / 15%);
  transition: all 0.2s ease;
}
.sp-card:hover {
  background: rgb(143 0 255 / 15%);
  border-color: rgb(136 0 255 / 35%);
}
.sp-card .thumb {
  width:120px; height:68px;
  background:#6600aa; border-radius:8px; overflow:hidden; flex:0 0 auto;
  box-shadow: 0 0 12px rgb(139 0 255 / 25%);
}
.sp-card .thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.sp-card .meta { display:flex; flex-direction:column; gap:6px; min-width:0; }
.sp-card .title {
  font: 600 13px/1.2 system-ui, sans-serif;
  color:#f5eaff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.sp-card .ch {
  display:flex; align-items:center; gap:8px;
  color:#ddb9f5; font: 500 12px/1 system-ui, sans-serif;
}
.badge {
  padding:2px 6px; border-radius:999px;
  font: 700 10px/1 system-ui, sans-serif;
  text-transform:uppercase; letter-spacing:.4px;
}
.badge.twitch {
  background:#9422c533; color:#daa6f5; border:1px solid #8622c555;
}
.badge.youtube {
  background:#7916a333; color:#cc86ef; border:1px solid #8816a355;
}
.viewers { margin-left:auto; color:#f4e3ff; }
.sp-empty,.sp-loading,.sp-error { padding:12px; color:#cb9fdf; text-align:center; }

#stream-fab .fab-icon {
  width: 28px;
  height: 28px;
  display: block;
}

#sp-close {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#sp-close .close-icon {
  width: 20px;
  height: 20px;
  display: block;
  pointer-events: none; /* hace que el click siempre sea del botón, no del SVG */
}


/* ==== BOTON DE DISCORD ==== */

/* Discord FAB */
#discord-fab {
  position: fixed; right: 84px; bottom: 16px; /* se coloca arriba del de Twitch */
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(0, 60, 120, 0.35); /* azul translúcido */
  color: #fff;
  display:flex; align-items:center; justify-content:center;
  font-size: 22px;
  box-shadow: 0 8px 24px rgba(88, 101, 242, 0.45),
              inset 0 0 10px rgba(88, 101, 242, 0.5);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(88, 101, 242, 0.4);
  cursor: pointer; z-index: 10000;
  transition: transform 0.2s ease, box-shadow 0.3s ease;
}
#discord-fab:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 8px 28px rgba(88, 101, 242, 0.65),
              inset 0 0 14px rgba(88, 101, 242, 0.6);
}

#discord-fab .fab-icon {
  width: 32px;
  height: 32px;
  display: block;
  pointer-events: none;
}