/*-------------------------------------------------------*/
/*  Paginacion
/*-------------------------------------------------------*/
.tooltip-inner {
	max-width: 300px !important; /* aumenta el ancho */
	padding: 10px 14px;          /* más espacio interno */
	font-size: 14px;             /* texto más grande */
}

.pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 6px;
	margin: 20px 0;
	flex-wrap: wrap;
}

.pagination button {
	background-color: #6f4e37; /* marrón café */
	color: #fff;
	border: none; 
	padding: 6px 12px;
	border-radius: 4px; 
	font-size: 14px;
	cursor: pointer; 
	transition: background 0.3s;
}

.pagination button:hover:not(:disabled) { 
	background-color: #5a3e2d;
}

.pagination button:disabled {
	background-color: #ccc;
	cursor: not-allowed;
}

.pagination button.active,
.pagination .page-btn.active {
	background-color: #3e2723; /* marrón más oscuro para el activo */
	font-weight: bold;
}

/* Botones numéricos */
.pagination .page-btn {
	min-width:40px;
	text-align: center;
}

/* Puntos suspensivos */
.pagination .dots {
	padding: 6px 10px;
	color: #6f4e37;
	font-weight: bold; 
	user-select: none;
}


.pagination button:focus {
	outline: none;
	box-shadow: 0 0 0 2px #a1887f; /* borde suave marrón claro */
}


.fade-row {
	opacity: 0;
	transition: opacity 1s ease;
}

.pending{
	color: #d7ff64;
}

.obtained{
	color: #ff6518;
}


/*-------------------------------------------------------*/
/*  Register
/*-------------------------------------------------------*/

hr.separate{
	background:#160d08;
	height: 3px;
	border-bottom: 1px solid #3b281f;
	padding: 0;
}

main .content-wraper-register{
	width: 100%;
	min-height: 950px;
	background-image: 
	linear-gradient(0deg, rgb(28 15 5 / 55%) 0%, rgba(30, 18, 12, 1) 100%), url(../img/texture.jpg);
	background-repeat: repeat;
	padding-top: 35px;
	padding-bottom: 35px; 
} 


main .content-register{  
	padding: 0 15px 15px 15px;
} 

main .register-form{
	max-width: 720px;
	margin: 60px auto 20px auto; 
	
}

main .group-input{
	display: flex;
	flex-wrap: wrap;
	gap: 0 70px;
	margin-bottom: 20px;
} 


main .register-form label{
	color: #ffe7bd;
	margin-top: 10px;
	font-family: "popins-light";
	flex:2;
	min-width: 40px;
}

main .group-input input.input-form{
	width: 100%;
	height: 40px;
	background: #2a1d14;
	border:1px solid #4e2d06;
	color: #c3a692;
	padding: 15px;
	transition: 800ms all;
}

/*main .group-input input.input-form:-webkit-autofill,
main .group-input input.input-form:-webkit-autofill:focus,
main .group-input input.input-form:-webkit-autofill:hover,
main .group-input input.input-form:-webkit-autofill:active {
	-webkit-box-shadow: 0 0 0 1000px #2a1d14 inset !important;
	-webkit-text-fill-color: #c3a692 !important;
	transition: background-color 5000s ease-in-out 0s !important;
	border:1px solid #4e2d06 !important;
	outline: 1px solid #613e2d !important;
}
*/

main .group-input input.input-form:-webkit-autofill,
main .group-input input.input-form:-webkit-autofill:hover,
main .group-input input.input-form:-webkit-autofill:focus {
	-webkit-box-shadow: 0 0 0 1000px #2a1d14 inset !important;
	-webkit-text-fill-color: #c3a692 !important;
	caret-color: #c3a692 !important;
	border:1px solid #4e2d06 !important;
	outline: 1px solid #613e2d !important;
	transition: background-color 5000s ease-in-out 0s !important;
}


main .group-input input.input-form:focus{
	outline: none;
	border: none;
	color: #c3a692;
	border:1px solid #4e2d06;
	outline: 1px solid #613e2d;
	transition: 800ms all;
}

main .group-input .icon-form{
}

main .wraper-icon-form{
	flex:1 1 500px;

}

main .wraper-icon-form .icon-form{
	width: 50px;
	height: 40px;
	background: #664632;
	border-left: 1px solid #4e2d06 ;
	border-top: 1px solid #4e2d06;
	border-bottom: 1px solid #4e2d06;
	display: flex;
	align-items: center;
	justify-content: center;
}


main .wraper-icon-form .icon-form i{
	color: #cfa66c;
}

main .input-content{
	width: 100%;
	position: relative;
}

main .input-content span{
	position: absolute;
	right: 12px;
	top:10px;
	cursor: pointer;
	color: #9c9169;
}


main .input-content span i{
	color: #a7875a;
}


main .input-content p{
	color:#90755c;
	margin-top: 5px;
}





main .term-service{
	flex:1 1 500px;

}

main .term-service p{
	color: #777777;
}


main .term-service a:hover,
main .term-service a:visited,
main .term-service a:link

{
	color: #ffa33a

}



main .group-input label.check{
	color: #ffe7bd;
	margin-top: 10px;
	font-family: "popins-light";
	flex:2;
	min-width: 2px;
}


main .group-input-check{
	gap:0 70px;
} 


main .group-input-check input[type=checkbox]{
	display:none;
} 


main .group-input-check span{
	width: 25px;
	height: 25px;
	display: block;
	border: 2px solid #555;
	border-radius: 4px;
	margin-left: 10px;
	position: relative;
	transition: background 0.2s, border-color 0.2s;
}


main .group-input-check span::after{
	content : "";
	position: absolute;
	width: 12px;
	height: 12px;
	background: #b46f3f;
	left:56%;
	top:50%;
	transform: translate(-50%,-50%);
	opacity: 0;
	transition: opacity 0.2s;
	border-radius: 1px;

}


main .group-input-check input[type=checkbox]:checked + span::after{
	opacity: 1;
}


main .error_text_form{
	color:#d72828 !important;
}

body .error_input{
	border:1px solid #7d1515!important;
}



main .submit-button {
	width: 100%;
	position: relative; /* Asegura que el "loading" se posicione dentro del botón */

}



main .register-button{
	font-family: "popins-regular";
	display: block;
	width: 200px;
	height: 40px;
	margin: 45px auto 30px auto;
	border: 1px solid #b46f3f ;
	background: linear-gradient(360deg, rgba(171, 121, 94, 1),transparent) rgba(255, 234, 188, 1);
	color: #1c1203;
	border: none;
	transition: all 500ms;
}


main .register-button:hover	{
	background-color: #e7c375;

}

main .waitingWhite{
	display: inline-block;
	width: 20px;
	height: 20px;
	border: 3px solid var(--white);
	border-top: 3px solid transparent;
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

main .waitingBlack{
	display: inline-block;
	width: 20px;
	height: 20px;
	border: 3px solid black;
	border-top: 3px solid transparent;
	border-radius: 50%;
	animation: spin 1s linear infinite;
}


main #loading{
	display: none;
	position: absolute;
	left: 50%;
	top: -30px;
	width: 20px;
	height: 20px;
	border: 3px solid #fff;
	border-top: 3px solid transparent;
	border-radius: 50%;
	animation: spin 1s linear infinite;
	transform: translateX(-50%);
}


main #loading2{
	display: block;
	float: left;
	margin-left: 15px;
	margin-top: 4px;
	width: 20px;
	height: 20px;
	border: 3px solid black;
	border-top: 3px solid transparent;
	border-radius: 50%;
	animation: spin 1s linear infinite;
	transform: translateX(-50%);
}

@keyframes spin {
	0% { transform: translateX(-50%) rotate(0deg); }
	100% { transform: translateX(-50%) rotate(360deg); }
}




/*-------------------------------------------------------*/
/*  INFORMACION
/*-------------------------------------------------------*/

.section-wraper-pages table.data-info{
	
	border-collapse: collapse;
/*	border-spacing: 1px 2px;*/
text-align: center;
margin:24px auto;
border: 1px solid #5e4132;

}

.section-wraper-pages table.data-info thead{	
	background:#582a10;
	color: #fbd28b;
}

.section-wraper-pages table.data-info thead th{
	text-align: center;
	padding: 14px;
	font-family: "popins-light";
	font-weight: 400;


}

.section-wraper-pages table.data-info tbody td{
	padding: 14px;
	font-family: "popins-light";
	font-size: 15px;
	color:#d1d1d1;
	border: 1px solid #412b1f;
}


.section-wraper-pages table.data-info tbody td a{
	color: #afa08f;
	text-decoration: none;
}

.section-wraper-pages table.data-info tbody tr:nth-child(even) {
	background-color: #352317;
}


.section-wraper-pages table.data-info tbody tr:nth-child(odd) {
	background-color: #2d1d13;
}


.section-wraper-pages .table-infor{
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	gap: 0 30px;
	padding: 30px 50px;
}


.section-wraper-pages .data-info{
	flex:1 1 calc(50% - 30px);
}



/*-------------------------------------------------------*/
/*  DOWNLOAD
/*-------------------------------------------------------*/

main .section-wraper-pages{
	width: 100%;
	min-height: 500px;
	background-image: 
	linear-gradient(0deg, rgb(28 15 5 / 55%) 0%, rgba(30, 18, 12, 1) 100%), url(../img/texture.jpg);
	background-repeat: repeat;
	padding-top: 25px;
	padding-bottom: 40px;

}



main .table-download{
	padding: 20px 20px 80px 20px;
	width: 90%;
	margin: 0 auto;
}


.section-wraper-pages table.data-table{
    width: 100%;
    border-collapse: separate;
    text-align: center;
    margin: 24px auto;
    /* border: 1px solid #473a2b; */
    border-spacing: 1px 2px;
    box-shadow: 1px 0px 6px rgba(0, 0, 0, 0.25);
}

.section-wraper-pages table.data-table thead{
    font-family: "popins-light";
    background: #44240f;
    color: #fbd28b;

}

.section-wraper-pages table.data-table thead th{
/*	border: 1px solid #473a2b;*/
text-align: center;
padding: 14px;
font-weight: 400;
}

.section-wraper-pages table.data-table tbody td{
    padding: 14px;
    font-family: "popins-light";
    color: #bebebe;
    /* border: 1px solid #473a2b; */
    font-size: 15px;
}

.section-wraper-pages table.data-table tbody td .kbd-download{
	background: #c34b00;
}


.section-wraper-pages table.data-table tbody td a{
	color: #bebebe;
	text-decoration: none; 
	display: flex;
	justify-content: center;
	gap: 15px;
}

.section-wraper-pages table.data-table tbody td a i{
	color: #ffdcad;
	margin-right: ;
}

.section-wraper-pages table.data-table tbody tr:nth-child(even) {
	background-color: #221812;
}

.section-wraper-pages table.data-table tbody tr:nth-child(odd) {
	background-color: #382515;
}



.section-wraper-pages .table-download h2{
	font-family: 'Montserrat-regular';
	font-size: 19px;
	color: #d0c8a7;
	margin-top: 40px;
	margin-bottom: 40px;
	text-align: center;
	background: linear-gradient(90deg, rgb(39 29 19) 0%, transparent 100%);
	padding: 15px 20px 15px 30px;
	

}

.section-wraper-pages .table-download h2 span{
	color:#ff6301;
}




/*-------------------------------------------------------*/
/*  Chaos Machine
/*-------------------------------------------------------*/



main .section-wraper-stadistic{
	width: 100%;
	min-height: 500px;
	padding-block: 40px;
	background-image: linear-gradient(0deg, rgb(34 55 21 / 11%) 0%, rgb(115 112 35 / 10%) 100%), url(../img/texture1.jpg);
	background-repeat: repeat;
}


.section-wraper-stadistic table.data-info{
	width: 100%;
	border-collapse: collapse;
	text-align: center;
	margin:24px auto;
}

.section-wraper-stadistic table.data-info thead{
	
	background: #14150e;
	color: #fbd28b;
}

.section-wraper-stadistic table.data-info thead th{
	border: 1px solid #4140336b; 
	text-align: center;
	padding: 14px;
	font-family: "popins-light";
	font-weight: 400;

}

.section-wraper-stadistic table.data-info tbody td{
	border: 1px solid #3b3a34;
	padding: 14px;
	font-family: "popins-light";
	color: #c7c6c0;
	font-size: 15px;
}


.section-wraper-stadistic table.data-info tbody td a{
	color: #afa08f;
	text-decoration: none;
}

.section-wraper-stadistic table.data-info tbody tr:nth-child(even) {
	background-color: #1b1e16;
}

.section-wraper-stadistic table.data-info tbody tr:nth-child(ODD) {
	background-color: #21251b;
}



.section-wraper-stadistic .table-stadistic{
	padding: 30px 50px;
}


.section-wraper-stadistic .data-info{
	flex:1 1 calc(50% - 30px);
}


/*-------------------------------------------------------*/
/*  Bonnus Party
/*-------------------------------------------------------*/


main .section-wraper-party{
	width: 100%;
	min-height: 500px;
	padding-block: 40px;
	background-image: 
	linear-gradient(0deg,rgba(0, 0, 0, 0.11) 0%, rgba(136, 102, 187, 0.1) 100%), 
	url('../img/texture1.jpg');
	background-repeat: repeat;
}

.section-wraper-party table.data-info{

	border-collapse: collapse;
	text-align: center;
	margin:24px auto;
}

.section-wraper-party table.data-info thead{
	
	background: #191721;
	color: #fbd28b;
}

.section-wraper-party table.data-info thead th{
	border: 1px solid #443b4c;
	text-align: center;
	padding: 14px;
	font-family: "popins-light";
	font-weight: 400;

}

.section-wraper-party table.data-info tbody td{
	border: 1px solid #443b4c;
	padding: 14px;
	font-family: "popins-light";
	color: #c8ced7;
}


.section-wraper-party table.data-info tbody td a{
	color: #afa08f;
	text-decoration: none;
}

.section-wraper-party table.data-info tbody tr:nth-child(even) {
	background-color: #251f2a;
}


.section-wraper-party .table-party{
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	gap: 0 30px;
	padding: 30px 50px;
}


.section-wraper-party .data-info{
	flex:1 1 calc(50% - 30px);
}


/*-------------------------------------------------------*/
/*  Commmands
/*-------------------------------------------------------*/


main .section-wraper-command{
	width: 100%;
	min-height: 700px;
	padding-block: 40px;
	background-image: 
	linear-gradient(0deg, rgb(27 55 99 / 14%) 0%, rgba(46, 90, 187, 0.1) 100%), url(../img/texture1.jpg);
	background-repeat: repeat;
}


.section-wraper-command table.data-info{
	border-collapse: collapse;
	text-align: center;
	margin:24px auto;
}

.section-wraper-command table.data-info thead{
	
	background: #0f1a23;
	color: #fbd28b;
}

.section-wraper-command table.data-info thead th{
	border: 1px solid #303e4f;
	text-align: center;
	padding: 14px;
	font-family: "popins-light";
	font-weight: 400;

}

.section-wraper-command table.data-info tbody td{
	border: 1px solid #303e4f;
	padding: 14px;
	font-family: "popins-light";
	color:  #c7c6c0;
	font-size: 15px;
}


.section-wraper-command table.data-info tbody td a{
	color: #afa08f;
	text-decoration: none;
}

.section-wraper-command table.data-info tbody tr:nth-child(even) {
	background-color: #0f1a23;
}

.section-wraper-command table.data-info tbody tr:nth-child(odd) {
	background-color: #1a2533;
}


.section-wraper-command .table-command{
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	gap: 0 30px;
	padding: 30px 50px;
}

.section-wraper-command .data-info{
	flex:1 1 calc(50% - 30px);
}


/*-------------------------------------------------------*/
/*  Ranking List
/*-------------------------------------------------------*/
/*main .tittle-section-page{
	text-align: center;
}*/
/*main .tittle-section-page h1{
	font-size: 60px;
	color: #ffdba1;
	font-family: 'Platypi-700';
}

main .tittle-section-page p{
	font-size: 22px;
	color: var(--white);
	font-family: 'Montserrat-regular';
	text-transform: uppercase;
}
*/

main .tittle-rank h2.text-rank-title{
	font-size: clamp(1.8rem, 2.0vw, 2.1rem);
}
main .ranking-page{
	width: 100%;
	min-height: 500px;
	padding-top: 25px;
	background-image: 
	linear-gradient(0deg, rgb(28 15 5 / 55%) 0%, rgba(30, 18, 12, 1) 100%), url(../img/texture.jpg);
	background-repeat: repeat;
}

main .ranking-page .aside-rank{
	max-width: 300px;
	padding: 10px;
	width: 100%;
	background: #211710;
	height: 100%;
}

main .wraper-ranks-contents{
	margin-top: 28px;
	position: relative;
	width: 100%;
	padding-bottom: 90px;
}

main .ranking-page .aside-rank .aside-nav-rank,
main .ranking-page .aside-rank .aside-main-sublist
{
	list-style: none;
	margin:0; 
	padding: 0;
}

main .content-item-main{
	width: 100%;
}

main .content-item-main .aside-main-title img{
	margin-right: 20px;
	margin-left: 8px;
}


main button.aside-main-title{
	width: 100%;
/*	border: 1px solid #ff5400;*/
/*	background: #a74b00;*/
height: 60px;
color: var(--white);
font-family: "Montserrat-SemiBold";
text-align: left;
padding-left: 35px;
background: #7d542b;
border: 1px solid #ac7138;
margin-bottom: 3px;
}


main button.aside-main-title.title-active{
	border:1px solid #cb3b00;
	background: #9f3d06;
}


main button.aside-main-title.title-active:focus{
	border: 1px solid #7f4205;
}


main button.aside-main-title:focus{
/*	border: 1px solid #ff5400;*/
border: 1px solid #ac7138;
outline: none;
}

main button.aside-main-title i.icon-toggle{
	float: right;
	margin-top: 4px;
	margin-right: 6px;
	font-weight: 100;
}



main .ranking-page .aside-rank ul.aside-main-sublist{
	padding: 0 0 0 0px;
}


main .aside-main-sublist li.aside-main-item{
	width:100%;
	background: #2b1e12;
	border: solid #1b110a;
	border-width: 1px 1px 0px 1px;
	color: #c1c1c1;
	transition: 200ms ease;
}

main .aside-main-sublist li.aside-main-item:last-child{
	
}

main .aside-main-sublist li.aside-main-item:hover{
	background: #573b24;
	color: #ffdba1;
}


main .aside-main-sublist li.aside-main-item:last-child{
	margin-bottom:3px;
}


main .aside-main-sublist li.aside-main-item a{
	display: block;
	padding: 12px 40px;
	color: inherit;
	text-decoration: none;
}

main .aside-main-sublist li.aside-main-item i{
	margin-right: 20px;
}

main .aside-main-sublist li.active-select-item {
	background:#573b24;
	color: #ffdba1;
}



main .aside-main-sublist {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.4s ease;
}


main .wraper-ranks{
	padding: 10px 0px 10px 10px;
	width: 100%;
	flex: 1;
}

main .wraper-date-rank{
	width: 100%;
}


main .wraper-ranks .button-date-rank{
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	gap:5px 2px;
}


main .wraper-ranks .button-date-rank a.item-rank{
	min-width: 120px;
	height: 45px;
	display: flex;
	align-items: center;
	justify-content: center;
	background:#694629;
	color: var(--white);
	text-decoration: none;
	font-family: "popins-light";
	font-size: 16px;
	transition: all 500ms ease;
	border:1px solid #7f5725;
/*	box-shadow: inset 1px 1px 2px #00000063;*/


}


main .wraper-ranks .button-date-rank a.item-rank:hover{
	background: #815a39;
}

main .wraper-ranks .button-date-rank a.item-rank.active-date-rank{
	background: #a33d00;
	border: 1px solid #df4d00;
	color: var(--white); 
}


main .wraper-ranks .button-date-rank a.item-rank.active-date-rank:hover{

}

main .filter-rank{
	width: 100%;
	min-height: 70px;
	background: #34251b;
	padding-inline: 20px;
	margin-top: 5px;
}

main .filter-rank .info-rank{
	text-align: center;
	max-width: 400px;
	width: 100%;

}

main .filter-rank .info-rank p{
	font-family: "Montserrat-Light";
	line-height: 10px;
	color: var(--white);
}

main .filter-rank .info-rank h3{
	color: #ffedc1;
	font-family: "Platypi-700";
	line-height: 35px;
	text-transform: uppercase;
}

main .input-rank{
	flex: 1;
	min-width: 200px;
}

.content-search{
	flex:1;
	width: 100%;
	position: relative;
}

.content-search ul.search-results{
	position: absolute;
	top: 44px;
	left: 0;
	width: 100%;
	background-color: white;
	max-height: 200px;
	overflow-y: auto;
	list-style: none;
	padding: 0;
	margin: 5px 0 0 0;
	color: #717171;
	z-index: 1000;
}


.content-search .search-results li {
	padding: 8px 15px;
	cursor: pointer;
	border-bottom: 1px solid #dfdfdf;

}

.content-search .search-results li:hover {
	background-color: #fff8f8;
}



.search-wrapper {
	display: flex;
	align-items: center;
	width: 100%;
	background-color: #2a1d14;
	border: 1px solid #4e2d06;
	border-radius: 8px;
	overflow: hidden;
}

.search-wrapper input {
	flex: 1;
	padding: 10px 15px; 
	font-size: 16px;
	border: none;
	background-color: transparent;
	color: #c3a692;
	outline: none;
}

.search-wrapper .icon {
	padding: 0 15px;
	background-color: #2a1d14;
	color: #c3a692;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.search-wrapper .icon:hover {
	color: #fff;
}




main .custom-selects {
	background-color: #f5e5d3; /* marrón claro */
	border: 1px solid #ff8b00; /* borde más oscuro */
	padding: 9.5px 12px;
	font-size: 16px;
	color: #5a3e2b; /* texto marrón oscuro */
	appearance: none; /* elimina estilo por defecto */
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url('data:image/svg+xml;utf8,<svg fill="%235a3e2b" height="20" viewBox="0 0 24 24" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 16px;
	cursor: pointer;
	transition: border 0.3s ease;
	width: 100%;
}

main .custom-selects:focus {
	border-color: #b58c6b;
	outline: none;
} 

main .table-rank{
	width: 100%;
	border-spacing: 0 3px; /* horizontal 0, vertical 10px */
	border-collapse: separate;
}

main .wraper-table-rank{
	margin-top: 3px;
}

main .table-rank th{ 
	padding: 20px 10px;
	font-weight: 400;
	font-family: "Popins-medium";
	text-align: center;
	background: #231b14;
	color: #fbd28b;
	position: relative;

}

main .table-rank th span.ml-rank{
	font-size: 12px;
	margin-bottom: 40px;
	position: relative;
	font-family: "Popins-bold" ;
	bottom:5px; 
	color:#ff6e00;

}

main .table-rank td span.ml-rank{
	font-size: 12px;
	margin-bottom: 40px;
	position: relative;
	font-family: "Popins-regular" ;
	bottom:5px;
	color:#ff6e00;

}


main .table-rank tbody td{
	padding: 12px 25px;
	font-family: "Popins-light";
	font-size: 15px ;
	text-align: center;
	color:#d2d2d2;
	
}

main .table-rank tbody td span{
	font-weight: 400 !important;
	font-size: 13px;
	
}


main .table-rank tbody tr:nth-child(even){
	background-color: #221812;
}
main .table-rank tbody tr:nth-child(odd){
	background: #36281e;
}


main .content-last-update{
	font-family: 'popins-light';
	font-size: 14px;
	margin-top: 12px;
	color: var(--white);
	color: #dcd6c9;
}


main .responsive-menu-rank{
	display: flex;
	justify-content: center;
	align-items: center;
	background: var(--white);
	width: 50px;
	height: 50px;
}

/*-------------------------------------------------------*/
/*  Login Design
/*-------------------------------------------------------*/

body .login-bg{
	width: 100%;
	min-height:400px  ;
	background-image: linear-gradient(0deg,rgba(0,0,0,0.11)0%, rgba(30, 18, 12, 1)100%),
	url('../img/texture.jpg');
	background-repeat: repeat;
	border: 1px solid #1d150c;
}

body .login-header{
	background: #f3bf87f2;
	border-bottom: none;
}

body .title-login h1{
	font-family: Platypi-500;
	color: #c8b697 ;
	font-size: 60px;
	margin: 0;
	margin-top: -13px;
	padding: 0;
	text-align: center;
}
body .login-wrap{
	max-width:520px;
	margin: 40px auto 20px auto;
	
}
body .group-input{
	display: flex;
	flex-wrap: wrap;
	gap: 0 70px;
	margin-bottom: 20px;
}

body .login-wrap label{
	color: #ffe7bd;
	margin-top: 10px;
	font-family: "popins-light";
	flex:2;
	min-width: 40px;
}
body .group-input input.input-form{
	width: 100%;
	height: 45px;
	background: #2a1d14;
	border:1px solid #4e2d06;
	color: #c3a692;
	padding: 15px;
	transition: 800ms all;
}

body .group-input input.input-form:focus{
	outline: none;
	border: none;
	color: #c3a692;
	border:1px solid #4e2d06;
	outline: 1px solid #613e2d;
	transition: 800ms all;
}

/* Autofill Chrome */
input.input-form:-webkit-autofill,
input.input-form:-webkit-autofill:hover,
input.input-form:-webkit-autofill:focus{
    -webkit-box-shadow: 0 0 0px 1000px #2a1d14 inset; /* fondo deseado */
    -webkit-text-fill-color: #c3a692; /* color del texto */
    transition: background-color 5000s ease-in-out 0s !important; /* evita parpadeo */
}

body .wraper-icon-form{
	flex:1 1 500px;

}



main .group-input input.input-form:-webkit-autofill,
main .group-input input.input-form:-webkit-autofill:hover,
main .group-input input.input-form:-webkit-autofill:focus {
	-webkit-box-shadow: 0 0 0 1000px #2a1d14 inset !important;
	-webkit-text-fill-color: #c3a692 !important;
	caret-color: #c3a692 !important;
	border:1px solid #4e2d06 !important;
	outline: 1px solid #613e2d !important;
	transition: background-color 5000s ease-in-out 0s !important;
}


body .wraper-icon-form .icon-form{
	width: 50px;
	height: 45px;
	background: #664632;
	border-left: 1px solid #4e2d06 ;
	border-top: 1px solid #4e2d06;
	border-bottom: 1px solid #4e2d06;
	display: flex;
	align-items: center;
	justify-content: center;
}


body .wraper-icon-form .icon-form i{
	color: #cfa66c;
}

body .input-content{
	width: 100%;
	position: relative;
}

body .input-content span{
	position: absolute;
	right: 12px;
	top:10px;
	cursor: pointer;
	color: #9c9169;
}


body .input-content span i{
	color: #a7875a;
}


body .input-content p{
	color:#90755c;
	margin-top: 5px;
}

body .login-button{
	font-family: "popins-regular";
	display: block;
	width: 200px;
	height: 40px;
	margin: 40px auto;
	border: 1px solid #b46f3f ;
	background: linear-gradient(360deg, rgba(171, 121, 94, 1),transparent) rgba(255, 234, 188, 1);
	color: #1c1203;
	border: none;
	transition: 500ms;

}

body .submit-button{
	width: 100%;
}

body .login-button:hover	{
	background-color: #e7c375;

}

body .forget-password a{
	color: #d0d0d0;
	text-decoration: none;
	display: block;
	font-size: 17px;
	font-family: "montserrat-regular";
}


body .forget-password a:last-child{
	font-size: 30px;
	text-transform: uppercase;
	font-family: "montserrat-semibold";
}

body .forget-password a span{
	color: var(--orange-760);
}


/*-------------------------------------------------------*/
/*  Changelog
/*-------------------------------------------------------*/

main .section-changelog{
	width: 100%;
	min-height: 1000px;
	padding-top: 25px;
	padding-bottom: 45px;
	background-image: 
	linear-gradient(0deg, rgb(28 15 5 / 55%) 0%, rgba(30, 18, 12, 1) 100%), url(../img/texture.jpg);
	background-repeat: repeat;
	padding-inline: 15px;
}


main .wraper-changelog{
	margin-top: 40px;
	width: 100%;
	padding: 0 30px;
	border-left: 1px solid #d3ac74;
}



main .header-changelog{
	display: flex;
	justify-content: center;
	flex-wrap:wrap;
	align-items: center;
	background: #7a3314;
	border: 1px solid #902f00;
	min-height:60px;
	font-family: 'popins-light';
	position: relative;
	margin-bottom: 10px;
}

main .header-changelog p{
	margin: 0;
	padding:10px;
	text-align: center;
	flex:1;
	color: var(--white);
	border-right: 1px solid #56220c;
}

main .header-changelog p:last-child{
	flex:2;
	border-right: none;
}


main .content-changelog{
	display: flex;
	justify-content: center;
	flex-wrap:wrap;
	align-items: center;
	background: #361f18;
	min-height:60px;
	font-family: 'popins-light';
	position: relative;
	margin-bottom: 3px;
	border:1px solid #492a11;
}

main .content-changelog:before{
	content: "";
	position: absolute;
	top: 50%;
	transform: translateY();
	left: -32px;
	width: 15px;
	height: 2px;
	background: #d3ac74;

}



main .content-changelog div{
	margin: 0;
	padding:20px;
	text-align: center;
	flex:1;
	color: #b7b7b7;
	font-size: 14px;

}


main .content-changelog div:first-child{
	display: none;

}




main .content-changelog div:nth-child(4){
	color: #ff7a32;

}


main .content-changelog div:last-child{
	flex:2;
	border-right: none;
	text-align: left;
	position: relative;

}

main .content-changelog div:last-child .plus-btn {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%; 
	bottom: 12px;	
	right: 8px;
	background-color: #5c382a;;
	color: #ffc278;
	width: 25px;
	height: 25px;
	padding: 0px;
	cursor: pointer;

}

main .content-changelog div:last-child  .description {
	position: absolute;
	bottom: 0;	
	left: 0;

}


/*-------------------------------------------------------*/
/*  User
/*-------------------------------------------------------*/
main .section-login{
	width: 100%;
	min-height: 1000px;
	padding-top: 25px;
	padding-bottom: 45px;
	background-image: 
	linear-gradient(0deg, rgb(28 15 5 / 55%) 0%, rgba(30, 18, 12, 1) 100%), url(../img/texture.jpg);
	background-repeat: repeat;
}


main .wraper-content-login{
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	gap:0 14px;
	padding-block: 40px;


}


main .panel-events{
	width: 75%;
	background: gray;
	min-height: 900px;
	background:#211611;
	box-shadow: 1px 3px 2px #141008;
}




main .info-data-login{
	width: 100%;
	background:#261a14;
	min-height: 200px ;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	box-shadow: 1px 3px 2px #181109;
	padding-block: 15px;
	padding-inline: 20px;
}


main .avatar-user{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	max-width: 165px ;
	width: 100%;
}

main .content-img-user{
	width: 130px;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

main .content-img-user img{
	width: 100%;
	height: 100%;
	display: block; 
	object-fit: cover;
}

main .title-config{
	width: 100% ;
	max-width: 130px ;
}

main .title-config p{
	color:#ea6300;
	padding: 0;
	font-family: "popins-regular";
	font-size: 14px;
	margin: 14px 0;

}

main .wraper-data-user{
	flex: 2;
}

main .data-config {
	margin-right: 25px;
}


main .data-config p{
	color:var(--white);
	padding: 0;
	font-family: "popins-light";
	font-size: 14px;
	margin: 14px 0;
}

main .data-config a{
	color:var(--white);
	text-decoration: none;
	color:#ffbf8c;
}

main .panel-control{
	flex: 1;
	background: #2d1a14;
	height: 650px;
}


main .info-user-data{
	margin: 0;
	padding: 0;
	list-style: none;

}

main .info-user-data  li{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 50px;
	margin: 0px;
	padding: 0;
	background: #3d2c20;
	border-top:1px solid #2a1813;
}

main .info-user-data li:first-child{
	background:#1f1510;
	border-top: none;
	color:#ff8800fa;
	font-family: "popins-medium";
	font-size: 16px;
}

main .info-user-data .item-title-user{
	color:#ffd3aa;
	font-family: "popins-light";
	font-size: 15px;
	padding: 0;
	margin: 0;
	width: 100%;
	max-width: 140px;
	padding-left: 35px;
}

main .info-user-data .item-result-user{
	color: var(--white);
	font-family: "popins-light";
	font-size: 15px;
	flex:1;
	padding-left: 10px;
	padding-right: 10px;

}

main .info-user-data .date-last-login{
	font-size: 15px;
}



main .panel-control ul:last-child > li a{
	color: var(--white);
	text-decoration: none;
	font-family: "popins-light";
	font-size: 15px;
	flex: 1;
	text-align: center;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 500ms ease;
} 

main .panel-control ul:last-child > li:not(:first-child):hover{
	background: #483324;
}

main .panel-control ul:last-child > li a:hover{
	transform: translateX(-15px);
}

main .user-description{
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
}

main .user-description{
	flex: 1;
	min-width: 250px;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 10px;
}

main .user-description p{
	font-family: "popins-light";
	color: #ff7a00;
}


main .user-description form{
	width: 100%;
}

main .user-description textarea{
	max-width: 250px;
	width: 100%;
	margin: 0 auto;
	display: block;
	max-height: 120px;
	min-height: 120px;
	background: #2d1f18;
	border: none;
	color: #8c7f71;
	font-family: "worksans-300";
	font-size: 14px;
	padding: 10px;
}

main .user-description textarea:focus{
	border: 1px solid #3e3123;
	outline: none;

}


main .user-description input[type="submit"]{
	display: block;
	margin: 0 auto;
	margin-top: 15px;
	max-width: 250px;
	height: 40px;
	width: 100%;
	border-radius: 0 !important;
	background:#a94e0b;
	border: none;
	color: var(--white);
	transition: 500ms all ease;
}

main .user-description input[type="submit"]:hover{

	background : #d6752e;
}



/*-------------------------------------------------------*/
/*  Character
/*-------------------------------------------------------*/


main .section-character-1{
	width: 100%;
	min-height: 1100px;
	padding-top: 25px;
	padding-bottom: 45px;
	background-image: 
	linear-gradient(0deg, rgb(28 15 5 / 55%) 0%, rgba(30, 18, 12, 1) 100%), url(../img/texture.jpg);
	background-repeat: repeat;
}



main .content-wraper-character{
	display: flex;
	gap:0 10px;
	flex-wrap: wrap;
}

main .content-wraper-character .info-character-1{
	max-width: 320px;
	width: 100%;
	min-height: 400px;
	background: linear-gradient(to top, #261a13, rgba(255, 0, 0, 0));
	padding-bottom: 30px;
}


main .content-wraper-character .lvl-text{
	font-family: "worksans-700";
	font-size: 16px;
	color: #b1835b;

}

main .content-wraper-character .lvl-character{
	position: relative;
	font-family: "Platypi-500";
	font-size: 25px;
	color: #ffddb2;
	line-height: 15px;

}

main .content-wraper-character .lvl-character:before{
	content: url(../img/ornamentRight.png);;
	position: absolute;
	top: 0;
	left: 30px;

}

main .content-wraper-character .lvl-character:after{
	content: url(../img/ornamentLeft.png);;
	position: absolute;
	top: 0;
	right: 30px;

}

main .content-wraper-character .nick-character{
	font-family: "Platypi-700" ;
	color: #f5cbac;
	text-align: center;

}


main .content-wraper-character .pj-info{
	background: #482919;
	color: #ce9766;
	width: 140px;
	height:20px;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: "worksans-400";
	font-size: 13px;
}


main .content-wraper-character .date-character{
	font-family: "worksans-400";
	font-size: 14px;
	margin: 0 auto;
	text-align: center;
	color: #8f8f8f;
	margin-top: 8px;
}


main .content-wraper-character button.info-status{
	background: #4a4139;
	outline: none;
	border: none;
	color: #bbbbbb;
	border-radius: 6px;
	padding: 5px 16px;
	margin: 12px auto;
	display: block;
}

main .content-wraper-character button.info-status.Online{
	background: #366b55;
	color: var(--white);
}



main .info-character-2{
	display: flex;
	flex-direction: column;
	flex:1;
	width: 100%;
	min-height: 800px;
	background: linear-gradient(to top, #261a13, rgba(255, 0, 0, 0));
	padding: 0 20px 30px 20px;
	gap:18px 0px;
	flex-wrap: wrap;

}


main .info-character-2 table.character-info-pj{
	border: 1px solid #4d3527;
	border-collapse: collapse;
	width: 100%;
	background: #221813;
	max-height: 100px;
}

main .info-character-2 table.character-info-pj thead{
	background: #592f19;
	font-family: "Montserrat-semibold";
	color:#ffeaca;
	font-weight: 400;
	
}

main .info-character-2 table.character-info-pj thead th{
	padding: 15px;
	text-align: center;
}

main .info-character-2  table.character-info-pj td{
	padding: 12px 0px;
	font-family: "popins-light";
	border-bottom: 1px solid #4d3527;
}

main .info-character-2  table.character-info-pj tr:nth-child(even){
	background: #281c15;
}

main .info-character-2  table.character-info-pj tr td:first-child{
	width: 300px;
	color: #d3ae8d;
	padding: 0 30px;
}

main .info-character-2  table.character-info-pj tr td:last-child{
	padding-right: 20px;
	color: #e1e1e1;
	font-size: 15px;
}


main .info-character-2 .account-info{
	flex:1;
}

main .border-ornament{
	width: 200px;
	height: 2px;
	background: #856F52;
	background: radial-gradient(circle, rgba(133, 111, 82, 1) 0%, rgba(35, 23, 16, 1) 100%);
	margin: 0 auto;
}


main .content-wraper-character .info-character-1 h3{
	font-family: Platypi-700;
	color: #ffe3b2;
	font-size: 22px;
	text-align: center;
	margin:0;

}


main .content-wraper-character .info-character-1 .img-character-owner{
	width: 100px;
	height: 100px;
	overflow: hidden;
	margin: 18px auto;
	border: 1px solid #98836f;
}

main .content-wraper-character .info-character-1 .img-character-owner img{
	width: 100%;
	height: 100%;
	object-fit: cover; /* recorta pero mantiene proporción */
}

main .content-wraper-character .info-character-1 .description-user {
	max-width: 260px;
	width: 100%;
	min-height: 70px;
	border: 1px solid #2a221d;
	margin: 12px auto;
	padding: 10px;
	background: #221a16;

}

main .content-wraper-character .info-character-1 .description-user p {
	font-family: "popins-light";
	font-size: 13px;
	color: #8c877e;
}


main .title-owner{
	width: 260px;
	height: 45px;
	background: #5e422e;
	margin: 25px auto 25px auto;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 4px;
}

main .info-avatar-onwer{
	font-family: "worksans-700";
	font-zize: 12px;
	text-align: center;
	width: 100%;
	margin: 6px;
	color: #ccbe9e;
}




/*-------------------------------------------------------*/
/*  Verify
/*-------------------------------------------------------*/

main .section-verify{
	width: 100%;
	min-height: 500px;
	padding-top: 25px;
	padding-bottom: 45px;
	background-image: 
	linear-gradient(0deg, rgb(28 15 5 / 55%) 0%, rgba(30, 18, 12, 1) 100%), url(../img/texture.jpg);
	background-repeat: repeat;
}

main .wraper-verify{
	padding: 25px;
}


main .wraper-verify .padlock{
	width: 95px;
	height: 146px;
	margin: 0 auto 25px auto;
}


main .wraper-verify .padlock img{
	width: 100%;
	display: block;
}


main .wraper-verify h2{
	font-family: 'Platypi-400';
	color: var(--white);
	text-align: center;
	font-size: clamp(1.3rem, 1.5vw, 1.8rem);
	margin-bottom: 18px;

}



main .active_text{
	color: #b2d786;
}

main .desactive_text{
	color: #e31000;
}


main .focus_text{
	color: #ff8a00;
}



main .wraper-verify h1{
	font-family: 'Platypi-800';
	color: #fcf6e1;
	text-align: center;
	font-size: clamp(1.8rem, 2.5vw, 4.0rem);
	margin-bottom: 20px;
}


main .wraper-verify h5{
	font-family: 'Platypi-700';
	color: #fcf6e1;
	text-align: center;
	font-size: clamp(1.3rem, 1.5vw, 1.4rem);
	margin-bottom: 45px;
}


main .wraper-verify a.return{
	color: #ffedbd; 
	background: #744c29;
	width: 180px;
	height: 50px;
	border-radius: 8px;
	display: block;
	margin: 0 auto;
	border: 1px solid #ac6a43;
	text-decoration: none;
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: 'Platypi-400';
	font-size: 22px;
	text-transform: uppercase;
	padding: 0;
	line-height: 50px;
	transition: all 500ms;

}


main .wraper-verify a.return:hover{
	background: #5b4129;
}

main .wraper-verify p{
	color: #666666;
	font-family: 'Platypi-400';
	text-align: center;
	margin-top: 40px;
}



/*-------------------------------------------------------*/
/*  Modulos userpanel
/*-------------------------------------------------------*/

main .wraper--user{
}
main .title-user_event{
	position: relative;
	width: 100%;
	min-height: 70px;
	background: #3C271C;
	background: linear-gradient(90deg, rgba(60, 39, 28, 1) 0%, rgba(48, 48, 21, 0) 100%);
	margin-block: 25px;
	padding-inline: 10px;
	display: flex;
	flex-direction: column;
	justify-content: center;

	
}

main .title-user_event::before{
	content:'';
	position: absolute;
	background: #ff9100;
	top: 0; 
	left:0 ;
	width: 15px;
	height: 100%;

}

main .title-user_event h3{
	padding: 0;
	margin: 0 0 2px 0;
	font-family: "Platypi-700";
	text-transform: uppercase;
	color: var(--white);
	margin-left: 40px;
	font-size: 22px;
}

main .title-user_event h3 span{ 
	color: #ff9100;
}

main .title-user_event p{
	margin: 0;
	padding: 0;
	color: #dddddd;
	font-size: 14px	;
}


main .modules-userpanel-wraper{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;	
	gap: 10px 20px;
}


main .modules-userpanel-wraper .modulo-1{
	flex: 1 1 calc(50% - 20px);
	min-height: 90px;
	min-width: 300px;
	background: #342419;
	display: flex;
	overflow: hidden;

}

main .modules-userpanel-wraper .modulo-1 .icon-event{
	width: 100%;
	max-width: 100px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #944005;
}

main .modules-userpanel-wraper .modulo-1 .icon-event img{
	width: 100%;
	max-width: 45px;
	display: block;

}

main .modules-userpanel-wraper .modulo-1 .content-user-event{
	width: 100%;
	padding: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
	padding-inline: 20px;
	padding-block: 20px;
}


main .modules-userpanel-wraper .modulo-1 .content-user-event h4{
	margin: 1px 0px;
	padding: 0px;
	font-size: 20px;
	font-family: 'popins-regular';
	color: #f69147;
}

main .modules-userpanel-wraper .modulo-1 .content-user-event p{
	margin: 0px;
	padding: 0px;
	color: #dddddd;
	font-family: 'popins-light';
	font-size: 13.5px;
}


/*-------------------------------------------------------*/
/*  Modulos userpanel Reset
/*-------------------------------------------------------*/
main .section-reset{
	width: 100%;
	min-height: 900px;
	padding-top: 25px;
	padding-bottom: 90px;
	background-image: 
	linear-gradient(0deg, rgb(28 15 5 / 55%) 0%, rgba(30, 18, 12, 1) 100%), url(../img/texture.jpg);
	background-repeat: repeat;
}

main .content-wraper-reset{
	margin-top: 45px;
	padding-inline:10px;
}

main .header-reset{
	width: 100%;
	display: flex;
	min-height: 50px;
	flex-wrap: wrap;

}


main .basic-title{
	flex:1;
	flex-basis: 200px;
	width: 100%;
	font-family: "popins-light";
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff1e0;
	font-size: 15px;
	padding: 14px;


}

main .required-reset{
	clip-path: polygon(8% 0, 100% 0, 100% 100%, 0 100%);
	background: #752c12;
	width: 100%;
	min-width: 500px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex: 1;
}

main .required-reset p{
	padding: 0;
	margin: 0;
	color: #fff1e0;
	font-family: "popins-light";
	font-size: 15px;
}


main .required-reset span{
	font-family: "popins-medium";
	color: #ffd4a2;
}


main .boxes-content-reset{
	width: 100%;

	display: flex;
	flex-wrap: wrap;
}

main .boxes-content-reset .boxes-reset:not(:last-child){
	min-width: 200px;
	padding-block: 15px;
	flex:1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	flex:1;
}

main .boxes-content-reset .boxes-reset:not(:last-child) h1{
	font-family:'popins-semibold';
	font-size: 50px;
}



main .boxes-content-reset .content-box-1{
	background: #ff740e;
	flex-basis: 18px;
}

main .boxes-content-reset .content-box-2{
	color: #fff1e0;
	background:#160c09;
}

main .boxes-content-reset .content-box-3{
	background: #382e18;
	color: #fff1e0;
}

main .boxes-content-reset .content-box-4{
	background: #251613;
	color: #fff1e0;
}
main .boxes-content-reset .content-box-5{
	background: #311b16;
	color: #fff1e0;
}

main .boxes-content-reset .content-box-5 h1{
	background: #311b16;
	color: #ff740e;
}

main .boxes-content-reset .content-box-6{
	background: #160c09;
	min-width: 200px;
	flex: 1;
	flex-basis:120px;
	display: flex;
	flex-direction: column;
	gap:1px 0;

}

main .boxes-content-reset .content-box-6 .sub-box-reset{
	background: #211816;
	width: 100%;
	flex: 1;
	display: flex;
	justify-content: start;
	align-items: center;
}


main .boxes-content-reset .content-box-6 .sub-box-reset p{
	margin:0;
	padding: 0;
	color: #fff1e0;
	font-family: 'popins-light';
	font-size: 14px;
	margin-left: 30px;
}

main .boxes-content-reset .content-box-6 .sub-box-reset p span{
	font-family: 'popins-medium';
}



main .table-character-wraper{
	width: 100%;
	overflow-x: auto;
}



main .table-character-wraper table.table-reset-character{
	width: 100%;
	min-width:1000px;
	border-collapse: separate;
	text-align: center;
	border-spacing: 0px 3px;

}


main .table-character-wraper table.table-reset-character thead{
	background: #1f1714;
}


main .table-character-wraper table.table-reset-character thead th{
	padding-block: 25px;
	padding-inline: 8px;
	color: #ea4800;
	font-family: 'popins-light';

}


main .table-character-wraper table.table-reset-character tbody{
	color: var(--white);
	font-family: 'popins-light';
	
}


main .table-character-wraper table.table-reset-character tbody tr{
	background: #3e2b25;
}

main .table-character-wraper table.table-reset-character tbody tr:nth-child(odd){
	background: #2f221c;
}



main .table-character-wraper table.table-reset-character tbody td{
	padding-block: 12px;
	padding-inline: 8px;
}


main .table-character-wraper table.table-reset-character tbody td img{
	width: 50px;
	border-radius: 50%;
}


main .table-character-wraper table.table-reset-character tbody td button{
	border: 1px solid #4b342c;
	background: #2e1f1a;
	color: #fff1e0;
	outline: none;
	padding: 8px 16px;
	font-family: 'popins-light';
	transition: 200ms;
	font-size:15px;

	&:hover{
		background: #271d1a;
		color: #ffb052;
	}
	
}


main .prices-reset-wraper{
	max-width: 540px;
	width: 100%;
	display: flex;
	flex-wrap: wrap;

}


main .prices-reset-wraper .box-prices{
	flex:1;
	width: 100%;
	padding: 4px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	color: #fff1e0;
	font-family: 'popins-light';
	font-size: 15px;
	min-width: 150px ;
	min-height: 40px;
}

main .prices-reset-wraper .box-prices span{
	font-family: 'popins-regular';
	color: #ffde84;
}


main .prices-reset-wraper .price-reset_0{
	color:#fff1e0; 
	font-size: 19px;
	font-family: popins-medium;
}

main .prices-reset-wraper .price-reset_0 p{
	color:#fff1e0; 
	font-size: 14px;
	font-family: popins-light;
	
}

main .prices-reset-wraper .price-reset_1{background: #25211f;}
main .prices-reset-wraper .price-reset_2{background: #683921;}
main .prices-reset-wraper .price-reset_3{background: #372d19;}


/*-------------------------------------------------------*/
/*  Modulos userpanel AddStats
/*-------------------------------------------------------*/
main .section-addstats{
	width: 100%;
	min-height: 900px;
	padding-top: 25px;
	padding-bottom: 90px;
	background-image: 
	linear-gradient(0deg, rgb(28 15 5 / 55%) 0%, rgba(30, 18, 12, 1) 100%), url(../img/texture.jpg);
	background-repeat: repeat;
}


main .content-wraper-addstats{
	width: 100%;
	display: flex;
	gap: 15px;
	flex-wrap: wrap;
	margin-inline: auto;
	padding-inline: 10px;
	margin-block: 50px;
}


main .info-main-addstats{
	flex:1;
	height: 500px;
	display: flex;
	flex-direction: column;
}

main .info-main-addstats .box-info{
	flex:1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	color: var(--white);
	font-family: 'popins-light';
	font-size: 15px;
	line-height: 1.2;
	padding: 15px;
}



main .info-main-addstats .box-info > .title-2{
	color: var(--white);
	font-family: 'popins-semibold';
	font-size: 3.0rem;
}


main .info-main-addstats .info-item1{
	background: #311b16;

}

main .info-main-addstats .info-item2{
	background: #382e18;

	& .title-2{
		color: #ffd579;
	}
}
main .info-main-addstats .info-item3{
	background: #513222;
}
main .info-main-addstats .info-item4{
	background: #34221b;

	& .title-2{
		color: #ff9d46;
		font-size: 2.8rem;
	}
}



main .info-addstats{
	flex:4;
	& p{
		color:#c5c5c5;
		font-family: 'popins-light';
		font-size: 13.5px;
		margin-top: 15px;
		text-align: right;
	}
	
}
main .wraper-table-addstat{
	overflow: auto;
}

main .info-addstats table{
	width: 100%;
	min-width: 600px;
	border-collapse: separate;
	border-spacing: 0 3px;
}

main .info-addstats table thead{
	background: #221815;
}

main .info-addstats table thead th{
	padding: 20px 15px;
	color: #ea4802;
	text-transform: uppercase;
	font-family: 'popins-medium';
	font-weight: 300;
	font-size: 15px;
	text-align: center;
}

main .info-addstats table tbody tr{
	width: 100%;
	text-align: center;
	color: var(--white);
	font-family: 'popins-light';
	font-size: 0.95rem;
}

main .info-addstats table tbody tr:nth-child(odd){
	background: #2f221c;
}

main .info-addstats table tbody tr:nth-child(even){
	background: #3e2b25;
}

main .info-addstats table tbody td{
	padding: 15px 15px;
}

main .info-addstats table tbody td button{
	background: #2a1d18;
	border:1px solid #684330;;
	padding: 8px 15px;
	color: var(--white);
	font-family: 'popins-light';
	font-size: 13px;
	font-weight: 500;
	transition: 500ms all;

	&:hover{
		background: #3b2920;
	}

	&:focus{
		border: none;
		outline: none;
		border:1px solid #684330;
	}
}


main .info-addstats .container-verification{
	min-height: 200px;
	background: #271c16;
	padding:30px 0px 25px 40px;
	background: ;
}

main .form-stats{
	display: flex;
	flex-wrap: wrap;
	& label{
		color: #ffba82;
		font-family: 'popins-light';
		font-size: 15px;	
	}
}


main .form-stats .form-character{
	flex:3;
	min-width: 400px;
}


main .form-stats .form-character .total-stats{
	color: #a3a3a3;
	font-size: 13px;
	text-align: center;
}


main .info-stats-character{
	flex:1;
	flex-basis: 120px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-family: 'Montserrat-medium';
	font-size: 18px;
	color: var(--white);

	& h1{
		font-family: 'Montserrat-Semibold';
		font-size: 2.9rem;
		color: #ffd5b6;
	}
}


main .info-stats-character button{
	background: #2a1d18;
	border:1px solid #684330;;
	padding: 8px 10px;
	color: var(--white);
	font-family: 'popins-light';
	font-size: 13px;
	font-weight: 500;
	transition: 500ms all;
	width:110px;
	text-align:center;
	margin-top:2px;

	&:hover{
		background: #3b2920;
	}

	&:focus{
		border: none;
		outline: none;
		border:1px solid #684330;
	}
}


/*-------------------------------------------------------*/
/*  Modulos userpanel ResetStats
/*-------------------------------------------------------*/
main .section-resetstats{
	width: 100%;
	min-height: 120px;
	padding-top: 25px;
	padding-bottom: 90px;
	background-image: 
	linear-gradient(0deg, rgb(28 15 5 / 55%) 0%, rgba(30, 18, 12, 1) 100%), url(../img/texture.jpg);
	background-repeat: repeat;
}

main .content-wraper-resetstats{
	max-width: 1100px;
	width: 100%;
	margin: 0 auto;
	padding-inline: 10px;
	font-family: 'popins-light';
	font-size: 15px;
	margin-top: 40px;
}


main .container-resetstats{
	margin-bottom: 35px;
}
main .wraper-resetstats{
	width: 100%;
	display: flex;
	height: 55px;
	background: linear-gradient(90deg, rgb(52 38 27) 60%, rgba(57, 31, 18, 0) 100%);

	& .number-count{
		flex-basis: 40px;
		background: #221815;
		color: #ea4802;
		font-family: 'popins-semibold';
		font-size: 20px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	& .name-character{
		display: flex;
		align-items: center;
		color: #ffd6b8;
		font-family: 'popins-regular';
		font-size: 15px;
		padding-inline:15px;

		& span{
			font-family: 'popins-light';
			margin-left: 3px;
			color: var(--white);
		}
	}

}
main .data-resetstats{
	width: 100%;
	min-height: 150px;
	display: flex;
	flex-wrap: wrap;
	gap:1px;
	font-family:'popins-light';
	color: var(--white);
	margin-top: 4px;
	padding: 2px;
/*	background: #150f0b;*/

}

main .item--data{
	display: flex;
}

main .data-resetstats .wraper-img{
	flex-basis: 122px;
	justify-content: center;
	align-items: center;
} 

main .data-resetstats .wraper-img img{
}

main .data-resetstats .wraper-data{
	flex: 1;
	flex-direction: column;
	gap: 1px 0;
	min-width:150px;

	& div{
		flex: 1;
		display: flex;
		align-items: center;
		background: #271d1d;
		padding: 8px 12px;
		font-size: 14px;

		& span{
			font-family: 'popins-regular';
			font-weight: 200;
			color: var(--white);
		}
	}

	& div:first-child{
		background: #38241e;
		color: #ffc98f;
	}

}

main .data-resetstats .wraper-stats{
	flex: 2;
	display: flex;
	flex-wrap: wrap;
	min-width: 300px;
	gap:1px;

	& div{
		flex:1 1 calc(50% - 1px);
		background: blue;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 15px;
	}

	& div:nth-child(-n+2){
		background: #2f221c;
	}

	& div:nth-child(n+3):nth-child(-n+4){
		background: #3e2b25;
	}
} 

main .data-resetstats .wraper-money-required{
	flex:1;
	flex-basis: 25px;
	background: #251916;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	min-width: 200px;

	& div:first-child{
		font-family: 'Montserrat-Semibold';
		font-size: 2.5rem;
		text-transform: uppercase;
	}

	& div:last-child{
		color: #ff7e00;
		font-size: 16px;
	}
} 

main .data-resetstats .wraper-lvl-required{
	flex:1;
	display: flex;
	flex-direction: column;
	gap:1px;
	min-width:150px;
	
	& div:first-child{
		flex:2;
		background: #351a14;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 6px;
		line-height: 1.1;

		& span{
			font-size: 14px;
			margin-top: 5px;
		}

		& h1{
			font-family:'Montserrat-Semibold' ;
			color: #ffc67b;
		}
	}

	& button{
		flex:1;
		border: none;
		background: #2a1d18;
		color: var(--white);
		padding:8px;

		&:focus{
			outline: none;
		}

		&:hover{
			background: #412f27;
		}
	}
} 



/*-------------------------------------------------------*/
/*  Modulos userpanel pkclear
/*-------------------------------------------------------*/

main .section-pkclear{
	width: 100%;
	min-height: 120px;
	padding-top: 25px;
	padding-bottom: 90px;
	background-image: 
	linear-gradient(0deg, rgb(28 15 5 / 55%) 0%, rgba(30, 18, 12, 1) 100%), url(../img/texture.jpg);
	background-repeat: repeat;
}


main .content-wraper-pkclear{
	max-width: 1200px;
	width: 100%;
	margin: 0 auto;
	padding-inline: 10px;
	font-family: 'popins-light';
	font-size: 14px;
	margin-top: 40px;
	display: flex;
	gap: 40px 30px;
	flex-wrap: wrap;


}

main .wraper-pkclear{
	display: flex;
	width: 100%;
	min-height: 140px;
	background: black;
	box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.5);
}

main .wraper-count{
	display: flex;
	align-items: center;
	justify-content: center;
	flex-basis: 5px;
	background: #c14900;
	color: var(--white);
	font-family: 'popins-semibold';
	font-size: 25px;
} 

main .wraper-count-unstick{
	background: #ca770d;
}

main .container-pkclear{
	display: flex;
	flex: 1;
	background: #201309;
	padding: 8px;
	color: var(--white);
	min-height: 170px;
}


main .container-pkclear .content-pkclear{
	flex: 1;
	display: flex;
	flex-wrap: wrap;
	gap: 1px;
	padding: 1px;
	background: #160f03;
}

main:has(.wraper-pkclear:only-child) .wraper-pkclear{
	flex: 1 1 100%;
	max-width: none;
}

main .container-pkclear .box-flex{
	display: flex;
}

main .container-pkclear .box-1{
	flex:1;
	flex-basis: 100px;
	flex-direction: column;
	gap:1px;
	min-width:170px;

	
	& div{
		flex:1;
		display: flex;
		align-items:center;
		background: #271d1d;
		padding: 10px 10px;
		font-size: 14px;
	}

	& div.nick-info{
		background: #8f350b;

		& span{
			color: #ffda99;
		}
	}
}
main .container-pkclear .box-2{
	align-items: center;
	flex-basis: 140px;
	display: flex;
	justify-content: center;

}


main .container-pkclear .box-2 img{

} 
main .container-pkclear .box-3{
	flex:1;
	flex-basis: 200px;
	gap:1px;
	flex-direction: column;
	min-width:340px;

	.content-pk-info{
		flex:1;
		display: flex;
		flex-wrap:wrap ;
		gap: 1px;

		& div{
			flex: 1;
			background: #3e2b25;
			display: flex;
			justify-content: center;
			align-items: center;
			padding:15px 10px;

			& span{
				color: #ffd579;
			}
		}	

	} 
	.time-pk{
		flex:1;	
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 15px 10px;
		background: #2f221c;
		padding: ;

		& span{
			color:#ffd579;
		}
	}

}


main .container-pkclear .box-4{
	flex:1;
	background: #382a1f;
	min-width: 140px;


	& .info-zen{
		display: flex;
		width: 100%;
		justify-content: center;
		align-items: center;
		flex-direction: column;	
		padding: 10px;
		& .title-zen{
			font-family: "Montserrat-semibold";
			font-size: 38px;
			text-transform: uppercase;
		}

		& .count-zen{
			color: #ff5a00;
		}	

	}
	
}
main .container-pkclear .box-5{
	flex:1;
	display: flex;
	justify-content: center;
	flex-direction: column;
	gap:1px;
	min-width: 140px;

	& .required-lvl{
		flex: 2.29;
		display: flex;
		flex-direction: column;
		background:#2f221c;
		justify-content:center;
		align-items:center;
		line-height:0.9;
		padding: 10px 10px;

		& .title-required-lvl{
			font-size: 14px;
			margin-top: 8px;
		}

		& .required-lvl{
			font-size: 35px;
			font-family: 'Popins-semibold';
			color: #e37600;
		}
	}

	& button{
		flex:1;
		border: none;
		background: #271f1b;
		color: var(--white);
		padding:10px;

		&:focus{
			outline: none;
		}

		&:hover{
			background: #342822;
		}
	}
}

.pk-normal {
	color: #22c55e !important; /* verde */
}

.pk-hero {
	color: #29dfff !important; /* azul */
}

.pk-commoner {
	color: #eaffab !important; /* gris */
}

.pk-warning {
	color: #ff8800 !important; /* amarillo */
}

.pk-murder {
	color: #ff2d2d !important; /* rojo */
}

.pk-outlaw {
	color: #ff2d2d !important; /* rojo oscuro */
}


/*-------------------------------------------------------*/
/*  Modulos userpanel webshop oficial
/*-------------------------------------------------------*/

main .section-webshop{
	width: 100%;
	padding-top: 25px;
	padding-bottom: 50px;
	background-image: 
	linear-gradient(0deg, rgb(28 15 5 / 55%) 0%, rgba(30, 18, 12, 1) 100%), url(../img/texture.jpg);
	background-repeat: repeat;
}


main .content-wraper-webshop{
	width: 100%;
	padding-inline: 10px;
	font-family: 'popins-light';
	font-size: 15px;
	margin-top: 40px;
	display: flex;
	align-items: flex-start;
	gap: 6px;
	flex-wrap: wrap;

}

main .aside-wraper{
	flex: 1;
	flex-basis: 50px;
	background: #180e09;
	min-height: 120px;
	color: var(--white);
	padding: 8px;
	min-width: 300px;

}

main .aside-wraper :is(.menu-webshop, .menu-credits){
	list-style: none;
	padding: 0;
	margin: 0;
}

main .aside-wraper ul li{
	background: #221711;
	margin-top: 2px;
	height: 50px;
	display: flex;
	align-items: center;
	transition: 300ms ease;

	&:hover{
		background: #402613;
	}

}

main .aside-wraper ul li.active{
	background: #402613;
}

main .aside-wraper ul li a{
	text-decoration: none;
	color: var(--white);
	display: block;
	height: 100%;
	width: 100%;
	display: flex;
	align-items: center;
	padding-inline: 35px;
}

main .aside-wraper ul li a i,
main .aside-wraper ul li.list-credits i{
	color: #ff6c00;
}

main .aside-wraper ul li:first-child{
	background: #322719;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #ffe097;	
	font-family: 'popins-regular';
}

main .aside-wraper ul li.list-credits{
	padding-inline: 35px;
}

main .aside-wraper ul li.list-credits span{
	color:#ffe097;
}

main .webshop-wraper{
	flex:4;
	background: #180e09;
	min-height: 200px;
	color:var(--white);
	min-width: 800px;
	padding: 8px 8px 40px 8px;

}

main .webshop-wraper .category-list-wraper{
	display: flex;
	flex-wrap: wrap;
	min-height: 60px;
}

main .webshop-wraper .category-list-wraper .decorate{
	width: 20px;
	background: #402e24;
}

main .webshop-wraper .category-list-wraper .name-category{
	flex:1;
	flex-basis: 140px;
	background: #291d16;
	display: flex;
	justify-content: center;
	align-items: center;
	padding-inline:10px;
	padding-block: 20px;


	& h4{
		font-family: 'popins-regular';
		font-size: 17px;
		color: #ffe097;
		margin: 0;

		& span{
			color: var(--white);
		}
	}
}

main .webshop-wraper .category-list-wraper .select-category{
	flex:2;
	background: #402e24;
	display: flex;
	justify-content: center;
	align-items: center;
	padding-inline: 40px;

	
	
}

main .webshop-wraper .item-list-wraper{
	width: 100%;
	margin-top: 30px;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); 
	padding-inline: 30px;
	padding-bottom: 30px;
	gap:40px;

}

main .webshop-wraper .item-list-wraper .box-main-item{
	min-height: 240px;
	padding-bottom:20px ;
	background: radial-gradient(circle,rgba(59, 43, 37, 1.0) 0%, rgba(29, 21, 18, 1.0) 100%);
	transition: 500ms ease;

}

main .webshop-wraper .item-list-wraper .box-main-item .header-title-item{
	height: 40px;
	background: #994200;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	padding-inline:15px;

	& p{
		font-size: 14px;
		margin: 0;
		padding: 0;
		text-overflow: ellipsis;
		text-wrap:nowrap;
		overflow: hidden;
	}

	&:before{
		content: '';
		position: absolute;
		width: 60px;
		height: 60px;
		top: 0;
		right: 0;
		clip-path: polygon(100% 0, 78% 0, 100% 22%);
		background: #ff9c00;
	}
}

main .webshop-wraper .item-list-wraper .box-main-item .body-content-item{
	width: 80%;
	height: 130px;
	margin: 16px auto 15px auto;
	display: flex;
	justify-content: center;
	align-items: center;

	& img{
		transition: 500ms ease;
		object-fit: contain;
		max-width: 100%;
		max-height: 100%;

	}
}




main .webshop-wraper .item-list-wraper .box-main-item:hover img{
	filter: drop-shadow(0px 0px 8px red);
}

main .webshop-wraper .item-list-wraper .box-main-item .add-item-wraper a{
	width: 90px;
	padding: 4px 12px;
	background: linear-gradient(360deg, rgba(255, 96, 0, 1.0),transparent), rgba(255, 186, 0, 1.0);
	border-radius: 3px;
	margin: 0 auto;
	display: block;
	display: flex;
	justify-content: center;
	text-decoration: none;
	color: var(--black);
	transition: 500ms;
/*	border:1px solid #ffa200;*/

&:hover{
	background-color: #ffde00;
}
}

main .webshop-wraper .category-list-wraper .allowClass{
	flex:2;
	background: #402e24;
	padding-inline: 40px;
	padding-block: 20px;
	font-size:13px;
	display:flex;
	overflow:hidden;

	& p {
		text-overflow:ellipsis;
		text-wrap:nowrap;
		overflow:hidden;
		color:var(--white);
		cursor:default;

		& span{
			color:#ffe097;
			font-family: 'popins-light';
			font-size: 14px;
		}	
	}


}


main .webshop-wraper .item-info-wraper{
	display: flex;
	padding: 30px;
	gap: 20px;
	justify-content: center;
}


main .webshop-wraper .item-info-wraper .prev-img{
	background: #ac7f59;
	flex: 1;
	padding:8px;
	display: flex; 
	flex-direction:column;
	max-width: 280px;

	& .content-img{;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 10px 20px;
		height: 150px;
		background:radial-gradient(circle, rgb(79 53 29) 10%, rgb(51 30 15) 80%);

		& img{
			filter: drop-shadow(1px 1px 4px rgba(0, 0, 0, 0.4));
			max-width: 100%;
			max-height: 100%;
			object-fit: contain;
		}
	}
}

main .webshop-wraper .item-info-wraper .name-item{
	height: 40px;
	background: #5c3a21;
	position:relative;
	display: flex;
	justify-content: center;
	align-items:center;
	padding-inline:20px;


	& p{
		text-overflow: ellipsis;
		text-wrap:nowrap;
		overflow: hidden;
		margin: 0;
		padding: 0;
	}
	& span{
		color: #ffe2b4;
		font-family: 'popins-regular';
	}
}

main .webshop-wraper .item-info-wraper .cost-item{
	background: #e1c49d;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex:1;
	padding:15px;

	
	& h4{
		font-family: 'popins-semibold';	
		color: #ac4a00;
	}

	& h1{
		font-family: 'popins-medium';
		font-size: 42px;			
	}

	p{
		color: #291c14;
		font-family: 'popins-regular';

	}

}


main #total-price{
	color:#332727;
	font-family: 'popins-semibold';
}



main .webshop-wraper .item-info-wraper .specifications{
	flex: 2;
	padding: 10px 10px 0 10px ;
	min-height: 360px;
	color: #c0c0c0;
}
main .webshop-wraper .item-info-wraper .specifications .group-option{
	display: flex;
	justify-content:start;
	align-item:center;
	padding: 1px 0px;
	flex-wrap:wrap;


	& label.title-option{
		flex:1;
		flex-basis: 120px;
		display: flex;
		align-items:center;
		margin: 0;
	}

	& .select-option{
		flex: 2;
		flex-basis: 50px;
		display:flex;
		align-items:center;

		select{
			width: 100%;
			height: 28px;
			background: var(--white);
			border: 1px solid #ff9b00;
			font-size:14px;
			font-family:'popins-light';
			padding-inline:8px;
			color:#484848;

			&:focus{
				outline: none;
				box-shadow: none;
				border: 1px solid #ff9b00;
			};
		}

		select.active{
			border:1px solid yellow;
			box-shadow: 1px 1px 6px yellow;
		}
	}

	& .point_price{
		flex:2;
		display: flex;
		justify-content: end;
		align-items: center;
		color: #84695e;
	}
}
main hr.decorate{
	background:#110b08;
	height: 2px;
	border-bottom: 1px solid #2a1810;
	padding: 0;
	margin: 12px 0 ;
}

main .wraper-content-item .item-info-exelent{
	width: 100%;
	color: #c0c0c0;
}

main .wraper-content-item .item-info-exelent .title-option-exe{
	background: #1d140d;
	padding: 8px;
	display: flex;
	position: relative; /* necesario para posicionar h5 dentro */
	align-items: center;
	min-height: 45px;
	margin-bottom: 5px;
}

main .wraper-content-item .item-info-exelent .title-option-exe h5{
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	margin: 0;
	text-align: center;
	white-space: nowrap; /* evita que se parta en dos líneas */
	color: #ffe6b5;
	font-family: 'popins-regular';
}


main .wraper-content-item .item-info-exelent .title-option-exe span{
	margin-left: auto;
	margin-right: 52px;
	color: #8c7a72;
}

main .wraper-content-item .containt-options {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
	gap:10px 10px;
	padding: 25px 10px;

}

main .wraper-content-item .containt-options .element-exe{
	
	display: flex;
	justify-content: space-between;
	align-items:center;
	padding:0px 10px;
	flex-wrap:wrap;
	min-width:140px;

	& p{
		margin: 0;
		padding: 0;
	}

	select{
		width: 100%;
		max-width: 330px;
		height: 28px;
		background: var(--white);
		border: 1px solid #ff9b00;
		font-size:14px;
		font-family:'popins-light';
		padding-inline:8px;
		color:#484848;

		&:focus{
			outline: none;
			box-shadow: none;
			border: 1px solid #ff9b00;
		};
	}

	select.active{
		border:1px solid yellow;
		box-shadow: 1px 1px 6px yellow;
	}

	& .point_prices{
		color: #84695e;
		display: flex;
		justify-content: end;
		margin-top: 2px;
	}
}


main .btn-addCars{
	width: 100%;
	margin-top: 10px;
}

main .btn-addCars button.addCars{
	padding: 8px 12px;
	border: none;
	background: linear-gradient(to top, rgb(216 103 0)0%, transparent), rgb(251 179 0);
	margin: 0 auto;
	display: block;
	outline: 1px solid  #8f4a28;
	color:var(--white);
	text-shadow:1px 1px 3px rgba(0, 0, 0, 0.7);
	transition: outline 0ms ease, background-color 500ms ease, box-shadow 500ms ease;

	&:hover{
		background-color: rgb(255, 182, 0 ,1 );
		box-shadow: 1px 1px 8px 4px #ab3c00;
	}
	&:focus{
		border: none;
		outline: none;

	}
}

/* =================== Switch =========================*/

main .webshop-wraper .switch{
	position: relative;
	display: block;
	width: 70px ;
	height: 30px;
	margin: 0;

}

main .webshop-wraper .switch input{
	opacity: 0;
	width: 0;
	height: 0;

}

/* button swtich radio */
main .webshop-wraper .slider{
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #d9534f; /* Rojo (OFF) */
	transition: 0.3s;
	border-radius: 6px;

	&:before{
		position: absolute;
		content: "";
		height: 24px;
		width: 24px;
		left: 3px;
		bottom: 3px;
		background-color: #fff;
		transition: 0.3s;
		border-radius: 4px;
	}

	&:after{
		content: "OFF";
		position: absolute;
		color: white;
		right: 8px;
		top: 5px;
		font-size: 13px;
		font-weight: 600;
		transition: 0.3s;
	}
}


main .webshop-wraper .switch input:checked + .slider{
	background-color: #5cb85c;
}	

main .webshop-wraper .switch input:checked + .slider:before{
	transform: translateX(40px);
}
main .webshop-wraper .switch input:checked + .slider:after{
	content: "ON";
	left: 10px;
	right: auto;

}


/* Modulo warehouse userpanel*/

main .content-wraper-warehouse{
	display: flex;
	padding: 20px 10px;

}


main .content-wraper-sellItems{
	padding-block: 20px;
	padding-inline: 30px 20px;
	width: 100%;
}

main .content-wraper-sellItems h2{
	font-family: 'Platypi-700';
	text-align: center;
}
main .content-wraper-sellItems p{
	font-size: 14px;
	text-align:center;
	& span{
		color: #ff5a00;
	}
}

main .content-wraper-warehouse table{
	border-collapse: collapse;
	border: 1px solid #593d2d;
	width: 100%;
	font-size: 14px;
}

main .content-wraper-warehouse thead{
	background: #2c2011 ;

}

main .content-wraper-warehouse th{
	color: #c6c6c6;
	font-weight:400;
	padding: 13px;
	span{
		color: #ffd8a1;
	}
}

main .content-wraper-warehouse td{
	border: 1px solid #593d2d;
	padding: 13px;

}


main .content-wraper-warehouse table :is(select, input){
	padding: 6px;
	font-size: 14px;
	color: gray;
	width: 100%;
}

main .content-wraper-warehouse table select{
	&:focus{
		outline: none;
	}
}

main .content-wraper-warehouse table input{
	&:focus{
		outline: none;
	}
}

main .content-wraper-warehouse .contain-button{
	margin-top: 15px;
}

main .content-wraper-warehouse button{
	background:#602f1b;
	border:1px solid #985831;
	padding:10px 8px;
	width:100%;
	color: white;
	transition:400ms ease;
	&:focus{
		outline: none;
	}
	&:hover{
		background: #9c4624;
	}
}

main .content-wraper-warehouse p:last-child{
	margin-top: 8px;
	font-size: 13px;
	color:#bebebe;
	a{
		color: #ffb761;
		text-decoration: none;
	}
}

#warehouse-container {
	width: fit-content;
	padding: 8px;
	box-shadow: 0 0 15px rgba(0,0,0,0.8);
/*	background: #562208;*/
}

.mu-grid {
	display: grid;
	grid-template-columns: repeat(8, 39px); 
	grid-template-rows: repeat(15, 39px);
	gap: 0px;
	padding: 4px;
	background: #0e0e0e;
	border: 2px solid #5a4630;
}

.mu-grid .slot {
	width: 38px;
	height: 38px;
	background: #151515;
	border: 1px solid #2f2f2f;
	box-shadow: inset 0 0 4px #000;
	position: relative;
	
}

.mu-grid .slot.occupied {
	background-color: #262626;
}

.warehouse-item {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.warehouse-item .item-icon {
	filter: contrast(110%) brightness(1.2) saturate(100%);
	object-fit: contain; /* evita deformaciones */
	transition: filter 400ms ease;

}

/* toltip items*/
#tooltip {
	display: none;
	position: absolute;
	background: rgba(0,0,0,1);
	padding: 10px 10px;
	pointer-events: none;
	z-index: 500;
	max-width: 320px;
	font-family: 'popins-light';
	font-size: 12px;
	display: none;
	text-align: center;
}

/* toltip accion*/
#item-popup{
	display: none;
	position: absolute;
	background: #222;
	color:#fff;
	padding: 8px;
	border: 1px solid #c9b36a;
	border-radius: 4px;
	z-index: 600;	
}

#sell-item{
	cursor: pointer;
}

.t-acc-name{
	color:#1dff96;
	font-family: 'popins-regular';
	background: #3434c5;
	margin-bottom: 5px;
}

.t-exe-name{
	color:#1dff96;
	font-family: 'popins-regular';
	margin-bottom: 5px;
}

.t-sock-name{
	color:#dc71ff;
	font-family: 'popins-regular';
	margin-bottom: 5px;
}

.t-item-name-7{
	color:#ffcc19;
	font-family: 'popins-regular';
	margin-bottom: 5px;
}

.t-item-name{
	color:var(--white);
	font-family: 'popins-regular';
	margin-bottom: 5px;
}


.t_durability, .t_level_required{
	color:var(--white);
	font-size: 11px;
}

.content-char-mix{
	margin-block: 6px;
}

.char-name-mix{
	background:#a00000;
	color:var(--white);
	font-size: 11px;
	margin-top: 2px;

}

.t_op380{
	font-size: 11px;
	color:#ffaef3;
}

.t_harmony{
	color:#edca19;
	margin-top: 5px;
	margin-bottom: 6px;
	font-family: 'popins-regular';
}

.t-line{
	color:#86c4fd;
	font-size: 11px;
}

.t-socket-title{
	color: #ff2eff;
	margin-top: 6px;
	margin-bottom: 5px;
}

.t-ancient{
	font-size: 11px;
	color: #6b6b6b;	
}


.cart-badge {
	background: #e63946;
	color: white;
	width: 20px;
	height: 20px;
	padding:;
	border-radius: 50%;
	font-size: 0.8rem;
	margin-left: 6px;
	text-align: center;
}



/*-------------------------------------------------------*/
/*  Modulo Addcart
/*-------------------------------------------------------*/
.addcart-wraper-table{
	padding: 10px;
	width: 100%;
}

.addcart-wraper{
	overflow-x: auto;

}

.addcart-wraper table{
	width: 100%;
	min-width: 600px;
	color: var(--white);
	border-collapse: separate;
	border-spacing:0 2px;
	font-size: 14px;
	margin-top: 10px;

}

.addcart-wraper table thead{
	background: #3f2112;
	text-align:center;
	
	& th{
		color:#eadb9d;
		font-size: 15px;
		padding: 18px 8px;
		font-weight: 400;
	}	
}	
.addcart-wraper tbody tr{
	text-align: center;
}

.addcart-wraper tbody td{
	padding: 4px;
	height: 80px;
	

}

.addcart-wraper tbody td img{
	max-width: 100%;
	max-height: 100%;
}

.addcart-wraper tbody td i{
	color: #ffa200;
}

.addcart-wraper tbody tr:nth-child(odd){
	background: #33231b;
}

.addcart-wraper tbody tr:nth-child(even){
	background: #402c22;
}

.wraper-total{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.wraper-total .coupon{
	flex:6;
}

.wraper-total .total{
	flex:3;
	display: flex;
	flex-direction: column;
	border: solid #402c22;
	border-width: 1px 1px 0px 1px;
	font-size: 14px;
	margin-top: 15px;

}

.wraper-total .content-sum{
	background:#251913 ;
	display: flex;
	justify-content:start;
	align-items: center;
	height: 45px;
	padding: 6px;
	border-bottom: 1px solid #402c22;
}



.wraper-total .content-sum .calc-name-sum{
	flex:1;
	padding-inline: 10px;

}

.wraper-total .content-sum .calc-sum{
	flex:1;
	padding-left: 40px;
}

.wraper-total .total button{
	width: 100%;
	border: none;
	background: #fba207;
	padding: 10px 6px;
	margin-top: 6px;
	font-family:'popins-regular';
	outline: none;
	transition: 800ms ease;
	position:relative;
	display:flex;
	align-items:center;
	justify-content:center;

	&:hover{
		background: #ffb400;
	}
}

.wraper-total .total button:focus{
	outline: 1px solid #ffd429;
}


.wraper-total .content-promo{
	display: flex;
	max-width: 400px;
	width: 100%;
}

.wraper-total .content-promo .input-code{
	flex: 2;

	& input{
		width: 100%;
		height: 30px;
		border: none;
		font-size: 13px;
		padding: 6px 8px;

		&:focus{
			outline: 1px solid #ffd429;
		}
		&:disabled{
			background: #dae5ea;
			color: var(--black);
		}
		&:-webkit-autofill:disabled {
			box-shadow: 0 0 0px 1000px #dae5ea inset !important;
			-webkit-text-fill-color: var(--black) !important;
		}
	}
}

.wraper-total .content-promo .verify-code{
	flex: 1;

	& button{
		width: 100%;
		height: 30px;
		outline: none;
		border: none;
		background: #723f1d;
		color: var(--white);
		display:flex;
		justify-content:center;
		align-items:center;

		&:focus{
			outline: 1px solid #ab6337;
		}
	}
}


.wraper-total .info-coupon{
	font-size: 12px;
	color: #b3b3b3;
}


main .webshop-wraper .category-list-wraper .decorate-1{
	background: #ff8c0d;
}


/*-------------------------------------------------------*/
/*  Module Storage
/*-------------------------------------------------------*/
main .content-storage-wraper{
	padding: 10px;
	width: 100%;
}


main .storage-overflow{
	overflow-x: auto; 
}


main .content-table-storage{
	width: 100%;
	min-width: 600px;
	color: var(--white);
	border-collapse: separate;
	border-spacing:0 2px;
	font-size: 14px;
	margin-top: 10px;

}

main .content-table-storage thead{
	background: #2c2011;
	text-align:center;
	
	main & th{
		color:#eadb9d;
		font-size: 15px;
		padding: 22px 8px;
		font-weight: 400;
	}	
}	
main .content-table-storage tbody tr{
	text-align: center;
}

main .content-table-storage tbody td{
	padding: 4px;
	height: 80px;
	

}

main .content-table-storage tbody td img{
	max-width: 100%;
	max-height: 100%;
}

main .content-table-storage tbody td i{
	color: #ffa200;
}

main .btnStorage{
	background: #602f1b;
	border: 1px solid #985831;
	padding: 8px 25px;
	color: var(--white);
	display: inline-flex; 
	justify-content: center; /* centra horizontal */
	align-items: center;     /* centra vertical */


	&:hover{
		background: #6b341f;
	}
	&:focus{
		outline: none;
	}
}


main .content-table-storage tbody tr:nth-child(odd){
	background: #2c1d14;
}

main .content-table-storage tbody tr:nth-child(even){
	background: #241911;
}


/*-------------------------------------------------------*/
/*  Modulos userpanel My characters
/*-------------------------------------------------------*/
main .section-events{
	width: 100%;
	min-height: 120px;
	padding-top: 25px;
	padding-bottom: 90px;
	background-image: 
	linear-gradient(0deg, rgb(28 15 5 / 55%) 0%, rgba(30, 18, 12, 1) 100%), url(../img/texture.jpg);
	background-repeat: repeat;
}

main .content-wraper-event{
	max-width: 1200px;
	width: 100%;
	margin: 0 auto;
	padding-inline: 10px;
	font-family: 'popins-light';
	font-size: 15px;
	margin-top: 40px;	
}


main .wraper-event{
	background:#1d140f ;
	padding: 8px;
	display:flex;
	flex-wrap: wrap;
	min-height: 200px;
	gap:2px;
	box-shadow: 1px 3px 9px rgba(0, 0, 0, 0.4);
	margin-bottom: 30px;
}

main .wraper-event .line-decoration{
	background: #d15500;
	flex-basis: 8px ;
}

main .wraper-event .info-mycharacter {
	flex: 2.8;
	display: flex;
	flex-wrap: wrap;
	gap:2px;
	color: var(--white);
	font-size: 15px;
}

main .wraper-event .info-mycharacter > div {flex: 1 1 calc(50% - 2px)}

main .wraper-event .info-mycharacter .char-info{
	display: flex;
	background: #2e1f15;
	align-items: center;
	padding: 10px;
}


main .wraper-event :is(.y-color, .o-color) {
	margin-right: 6px;
}

main .wraper-event .y-color { color: #fbbf77; }
main .wraper-event .o-color { color: #f06d00; }
main .wraper-event .info-mycharacter .nickname{
	flex-basis: 100%;
	background: #502b14;
	font-size: 16px;;
	justify-content:center;

	& span{
		font-family: 'popins-regular';
	}
}

main .wraper-event .info-mycharacter .info-lvl{
	display: flex;
	gap:2px;
}

main .wraper-event .info-mycharacter .info-lvl :is(.level,.reset){
	display: flex;
	align-items: center;
	flex: 1;
	padding: 10px;
}


main .wraper-event .info-mycharacter .info-lvl .reset{ background: #3b2515}
main .wraper-event .info-mycharacter .info-lvl .level{ background: #2e1f15 }
main .wraper-event .info-mycharacter .map{background: #3d2716} 



main .wraper-event .info-character-img{ 
	background:#2e1d14;
	flex:1.05;
	min-width: 210px;
	padding: 8px;
}

main .wraper-event .info-character-img .content-img{
	background:#46291d;
	height:100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

main .wraper-event .info-character-stats{ 
	flex: 2.1;
	display: flex;
	flex-wrap: wrap;
	color: var(--white);
	gap: 2px;
}

main .wraper-event .info-character-stats > div{ 
	flex: 1 1 calc(50% - 3px)
}

main .wraper-event .info-character-stats .k-w-content{
	flex-basis: 100%;
	gap: 2px;
	display: flex;
	

}


main .wraper-event .info-character-stats > .k-w-content :is(.kills, .deads){
	display: flex;
	align-items: center;
	justify-content: center;
	flex:1;
	background: #453621;
	padding: 10px;
}

main .wraper-event .info-character-stats > div:nth-child(n+2){
	background: #2e2113;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding:10px;
	.title{
		color: #f06d00;
	}

	.stats{
		font-size: 16px;
	}

}


/*-------------------------------------------------------*/
/*  Modulo VIP
/*-------------------------------------------------------*/

main .section-events .vip-title{
	text-wrap: nowrap;
}

main .section-events .content-wraper-vip{
	background: #201712;
	margin-top: 25px;
	box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.5);
	padding: 35px 70px 60px 70px;
	font-family: 'Montserrat-Regular';
	font-size: 14px;
	color: var(--white);
}

main .content-header-vip{
	background: #1e1611;
	box-shadow: 0px 4px 10px  rgba(0, 0, 0, 0.45);
	padding-inline: 30px;
	padding-block: 8px 25px;
	display: flex;
	flex-wrap: wrap;
	gap: 2px;

}


main .content-header-vip > *:not(:first-child) {
	flex: 1;
	height: 120px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 10px;
	min-width:180px ;
}

main .content-header-vip > * span{
	color: #ff8400;
	font-family: 'Montserrat-medium';
}

main .content-header-vip > * span.currency{
	font-size: 17px;
}


main .content-header-vip > * h2{
	font-family: 'Montserrat-semibold';
	margin: 0;
	padding: 0;
}

main .content-header-vip > * h2.count-vip{
	font-family: 'Popins-regular';
	font-size: 33px;
}



main .content-header-vip .decorate{
	background: #b24100;
	flex-basis: 15px;
}

main .content-header-vip .info-1{
	background:#722f06 ;
	text-transform:uppercase;


	span{
		color:#ffd74a;
	}

}
main .content-header-vip .info-2{
	background:#261c15 ;
	border-left: 3px solid #2f2117;
	flex-basis: 50px;

	span{
		color:var(--white);
		
	}
	.date-expired{
		font-family: 'Montserrat-light';
		font-size: 13px;
	}

	h2{
		color: #ff7800;
	}

}
main .content-header-vip .info-3{
	background:#2b1f16 ;
	border-left: 3px solid #36271c;
}
main .content-header-vip .info-4{
	background:#332013 ;
	border-left: 3px solid #3a2516;
}
main .content-header-vip .info-5{
	background:#3a250f ;
	border-left: 3px solid #3f2c18;
}



main .content-wraper-vip .plans-vip{
	width: 95%;
	margin: 0 auto;
	min-height: 70px;
	background: linear-gradient(#2f221b 45%, #211712 60%);
	border-radius: 20px;
	margin-top: 35px;
	box-shadow: 1px 2px 8px rgba(0, 0, 0, 0.4);
	display: flex;
	justify-content: center;
	align-items: center;
	color: var(--white);
	font-family: 'Montserrat-medium';
	padding: 15px;

}

main .content-wraper-vip .plans-vip i{
	font-size: 28px;

}

main .content-wraper-vip .plans-vip p{
	margin: 0;
	padding: 0;
	font-size: 20px;
	text-transform:uppercase;


	span{
		color: #ff7200;
		font-size: 26px;
		font-family: 'Montserrat-semibold';
		
	}
}


main .content-wraper-vip .description-vip{
	background: radial-gradient(circle, rgba(47, 33, 25, 1.0) 50%, transparent);
	min-height: 60px;
	margin-top: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px;
	margin-inline: auto;
	font-family: 'popins-light';
}


main .content-wraper-vip .description-vip p{
	text-align: center;
	line-height: 25px;
	margin: 0;
	padding: 0;
	font-size:15px;
	span{
		font-family: 'Montserrat-semibold';
	}
}


main .content-wraper-vip .container-packs{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(273px, 1fr));
	grid-gap: 30px 60px;
	padding: 25px 60px;
	margin-top: 15px;
}

main .content-wraper-vip .content-wraper-pack{
	background: #2f2119;
	padding: 10px;
	text-align: center;
	box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.5);
	border: 1px solid #36281a;
	transition: 0.5s ease;
}

main .content-wraper-vip .img-vip-status {
	position: relative;
	background: #d7ba91; /* color de fondo */
	min-height: 170px;
	overflow: hidden; /* evita que el pseudo-elemento se desborde */
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Pseudo-elemento para la imagen radial con opacidad y mezcla suave */
main .content-wraper-vip .img-vip-status::before {
	content: '';
	position: absolute;
	width: 160%;
	height: 160%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(0deg);
	background: url('../img/radial.webp') center center no-repeat;
	background-size: cover;
	opacity: 0.5;
	mix-blend-mode: soft-light;
	pointer-events: none;
	z-index: 0;
	transform-origin: center;
	animation: none;
}

main .content-wraper-vip .img-vip-status img{
	position: relative;   
	z-index: 2;
	filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.5)); 
}

main .content-wraper-vip .content-wraper-pack:hover{
	box-shadow: 1px 1px 30px 5px rgba(255, 126, 0, 1.0);
}

main .content-wraper-vip .content-wraper-pack:hover .img-vip-status::before {
	animation: spinRadial 6s linear infinite;
}

@keyframes spinRadial {
	from {
		transform: translate(-50%, -50%) rotate(0deg);
	}
	to {
		transform: translate(-50%, -50%) rotate(360deg);
	}
}


main .content-wraper-pack hr{
	margin: 10px 0 20px 0;
	padding: 0;
	height: 1px;
	background: #271b14;
	border-bottom: 2px solid #3b2a20;
}


main .content-wraper-pack .vip-status{
	font-family: 'montserrat-medium';
}

main .content-wraper-pack h2{
	margin: 0 0 5px 0;
	padding: 0;
	font-family: 'montserrat-semibold';
	font-size: 30px;
	background: linear-gradient(0deg, #ffd16d 30%, rgba(255,255,255,1) 80%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	text-transform: uppercase;

}

main .content-wraper-pack .vip-duration{

}

main .content-wraper-pack .price-vip{
	background: #482d1e;
	width: 180px;
	height: 40px;
	margin: 13px auto 18px auto;
	display: flex;
	justify-content: center;
	align-items: center;
	border: solid #583725;
	border-width: 0px 0px 2px 2px;
	box-sizing: border-box;
	padding:13px 10px 10px 10px;
	i{
		color: #ff8a00;
	}

	span{
		font-size: 16px;
		font-family: 'Montserrat-medium';
		margin-inline: 6px 3px;
	}

}


main .content-wraper-pack button{
	background: red;
	border:1px solid #dd7529;
	padding: 7px 19px;
	outline: none;
	transition: 0.5s;
	background: linear-gradient(360deg, rgba(180,76,0,1), transparent) rgba(255,138,0,1);
	color: var(--white);
	margin-bottom: 20px;
	margin-top: 10px;
	margin-inline: auto;
	display: flex;
	justify-content: center;  /* centra horizontalmente */
	align-items: center;      /* centra verticalmente */

}


main .content-wraper-pack button:hover{
	background-color: #ffa200;
}


main .information-load{
	padding: 25px 60px;
}

main .information-load p{
	padding: 0;
	margin: 0;
}
main .information-load p:first-child{
	margin-top: 15px;
	margin-bottom: 6px;
	color: #ff7800;
	font-size: 18px;
	font-family: 'Popins-Medium';
}

main .information-load a{
	color: #ffe4ba;
	text-decoration: none;
}

/*-------------------------------------------------------*/
/*  Modulo BuyCoins
/*-------------------------------------------------------*/


main .content-wraper-vip .plans-coins{
	width: 100%;
	margin: 0 auto;
	min-height: 80px;
	background: linear-gradient(#2f221b 50%, #211712 60%);
	border-radius: 20px;
	box-shadow: 1px 2px 8px rgba(0, 0, 0, 0.6);
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: var(--white);
	font-family: 'Montserrat-regular';
	padding: 15px 38px;
	text-transform: uppercase;
	flex-wrap: wrap;
	gap: 10px;

}

main .content-wraper-vip .plans-coins i{
	font-size: 24px;
	color: #ff6600;

}

main .content-wraper-vip .plans-coins p{
	margin: 0;
	padding: 0;
	font-size: 19px;
	

	span{
		color: #ff6600;
		font-family: 'Montserrat-semibold';
		
	}
}


main .content-wraper-vip .plans-coins .btn-back{
	background:#31251e ;
	height: 40px;
	width: 180px;
	outline: 2px solid #28201c;
	box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.2);
	border-top: 2px solid #382e27;
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: 'popins-regular';
	font-size: 18px;
	color: #9f897c;
	border-radius: 8px;

}

main .content-wraper-vip .plans-coins .btn-back i{
	color: #b3a79f;
}

main .content-wraper-vip .content-payment{
	width: 95%;
	display: flex;
	flex-direction: column;
	margin: 0 auto;
	
}


main .content-wraper-vip .description-buy-coins{
	background: #271b15;
	min-height: 60px;
	margin-block: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	padding:15px;

}


main .content-wraper-vip .description-buy-coins p{
	margin: 0;
	padding: 0;
	text-transform: uppercase;
	color:#988b7e;
	font-family: 'Montserrat-medium';

	span{
		color: #ff6600;
	}

	.text-b{
		font-family:'Montserrat-semibold';
		color:#988b7e;
	}
}


main .content-wraper-vip .payment-type{
	display: flex;
	min-height: 75px;
}


main .content-wraper-vip .payment-type{
	display: flex;
	width: 100%;
	gap: 2px;
	flex-wrap: wrap;
}

main .content-wraper-vip .payment-type .method-payment{
	flex: 1;
	background: #342015;
	border-left: 2px solid #3f2616;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	padding: 10px;
}

main .content-wraper-vip .payment-type .method-payment.active{
	background: #8c380a;
	border-left: 2px solid #a23d06;
}

main .content-wraper-vip .payment-type .select-payment{
	flex:2;
	background: #2f231d;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 14px;
	color:#988b7e;
	font-family:'Montserrat-medium';
	border-left: 2px solid #3a2c25;
	padding:10px;

	i{
		font-size: 25px;
		color: #b3a79f;
	}
	span{
		color:#b9b3ab;
	}
}

main .content-packs-wcoin{
	margin-top: 60px;
}


main .content-packs-wcoin{
	display:grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 300px));
	grid-gap: 50px 15px;
	justify-content: space-around;
}

main .content-packs-wcoin p{
	margin: 0;
	padding: 0;
}

main .content-packs-wcoin .wraper-payment{
	background: #412d1c;
/*	border: 1px solid #3c2314;*/
	height: 450px;
	position: relative;
	box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.2);
	padding: 6px 10px 10px 10px;
	transition: transform 500ms ease;
}

main .content-packs-wcoin .wraper-payment:before{
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 200px;
	background: linear-gradient(180deg, rgba(183, 69, 0, 1.0) 10%, rgba(96, 27, 0, 1.0) 100%);
	clip-path: polygon(49% 0, 100% 19%, 100% 100%, 0 100%, 0 20%);
	z-index: 0;

}

main .content-packs-wcoin .wraper-payment:hover{
	transform: scale(1.03) ;
}

main .content-packs-wcoin .wraper-payment-info{
	position: relative;
	z-index: 2;
}


main .content-packs-wcoin .header-price{
	height: 70px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: 'Platypi-700';
	font-size:32px;
	padding: 10px;
}

main .content-packs-wcoin .header-price .price-payment{
	background: linear-gradient(360deg, rgb(255 207 101) 20%, rgba(255, 255, 255, 1.0) 60%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
 }

main .content-packs-wcoin hr{
	margin: 0 auto;
	padding: 0;
	height: 2px;
	background: #3f2a18;
	border-bottom: 2.5px solid #4b3420;
	width: 70%;
}

main .wraper-payment .content-bonus{
	margin-top: 10px;
	text-align: center;
}

main .wraper-payment .content-bonus .bonus-percent{
	font-size: 17px;
	font-family: 'montserrat-medium';
}

main .wraper-payment .content-bonus .type-money{
	font-size:21px;
	font-family: 'montserrat-medium';
	margin: 0;
}

main .wraper-payment .content-bonus .bonus-extra{
	font-size: 13px;
	font-family: 'montserrat-regular';
	margin-top: 5px;

	& span{
		color: #ffb400;
	}

}

main .wraper-payment .img-pack{
	margin-top: 18px;
	height: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
}

main .wraper-payment .footer-price{
	margin-top: 13px;
	text-align: center;
}

main .wraper-payment .footer-price .price-text{
	text-transform: uppercase;
	font-size: 17px;
	font-family: 'popins-medium';

}

main .wraper-payment .footer-price .total-price{
	font-size: 25px;
	font-family: 'Platypi-700';
	line-height: 28px;
}


main .wraper-payment .send-btn{
	margin-top: 22px;
	display: flex;
	justify-content: center;
}

main .wraper-payment .send-btn a{
	text-decoration: none;
	color: var(--black);
	outline: none;
	border: none;
	padding: 7px 20px;
	border-radius: 12px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: linear-gradient(360deg, rgba(204, 106, 0, 1.0),transparent) rgba(250,188, 0, 1.0);
	font-family: 'Popins-regular';
	transition: 500ms ease;
	border:1px solid #ff9e00;


	&:hover{
		background-color: #fae500;	
	}
}

main .content-payment .info-stats h3{
	font-family: 'montserrat-semibold';
	color: #ff6000;
}

main .content-payment .info-stats p{
	color: #bbbbbb;
	line-height: 25px;
}

main .content-payment hr.important-info{
	background: #1c140a;
	height: 3px;
	border-bottom: 1px solid #2f231c;

}


/*-------------------------------------------------------*/
/* Vistas de notifciaciones de pago
/*-------------------------------------------------------*/

main .content-wraper-notification{
	background: #201712;
    margin-top: 25px;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.5);
    padding: 35px 70px;
    font-family: 'Popins-regular';
    font-size: 14px;
    color: var(--white);			
}


main .content-wraper-notification :is(h2, p.confirm_message){
	text-align: center;
}

main .content-wraper-notification h2{
	font-family: 'Popins-semibold';
	margin-bottom: 15px;

	span{
		color: #00ffae;
	}
}

main .content-wraper-notification p{
	font-size: 16px;
}


main .content-wraper-notification .icon-success {
    font-size: 80px;
    color: #00ffae;
    text-align: center;
}


main .content-wraper-notification :is(.info-box){
	margin: 0 auto;
	width: 100%;
	max-width: 900px;
	min-height: 100px;
	margin-top: 40px;
	margin-bottom: 40px;

	ul{
		color: #dcd9d5;
		li{
			margin-top: 8px;
		}		
	}


}

main .content-wraper-notification .info-box {
	background: #302618;
	display:flex;
/*	box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3);*/
}



main .content-wraper-notification .info-box p{
	font-size: 14px;
	color: #dcd9d5;
	line-height: 25px;
}


main .content-wraper-notification .info-box .info-hr{
	height: 3px;
	background: #362d21;
	border-top: 3px solid #292115 ;
}

main .content-wraper-notification .info-box .warning-hr{
	height: 3px;
	background: #4c2d16;
	border-top: 3px solid #36220c ;
}

main .content-wraper-notification .info-box .support-hr{
	height: 3px;
	background: #202c3b;
	border-top: 3px solid #131a22;
}



main .content-wraper-notification .info-box.warning{
	background: #442717;
}

main .content-wraper-notification .info-box.support{
	background: #212131;
}

main .content-wraper-notification .info-box .decorate{
	width: 15px;;
	background: #ec7300;
}

main .content-wraper-notification .info-box .info-text{
	padding: 30px;
	width: 100%;
}

main .content-wraper-notification .info-box h5{
	font-family: 'Popins-semibold';
	margin: 0 0 10px 0 ;
	color: #ffda89;
}

main .content-wraper-notification .btn-support{
	display: flex;
	justify-content: center;
}


main .content-wraper-notification .button {
    display: inline-block;
    padding: 15px 30px;
    margin-top: 0 auto;
    font-size: 16px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    background: #00ffae;
    color: #000;
    transition: 0.3s;
}

.button:hover {
    background: #00d696;
    transform: scale(1.05);
}


main .content-wraper-notification .footer{
	margin: 20px auto;
	padding: 15px;
	text-align: center;
}

main .content-wraper-notification span.failure{
	color: red;
}

/*-------------------------------------------------------*/
/*  Checkou vista
/*-------------------------------------------------------*/

main .content-wraper-checkout{
	display: grid;
	grid-template-columns: 1.5fr 2fr;
	padding: 20px;
	grid-gap: 0px 30px;

}

main .content-wraper-checkout .security-detail{
	grid-column: 1 / -1;
}

main .content-wraper-checkout .security-detail .wraper-details{		
	max-width: 1000px;
	width: 100%;
	margin: 35px auto;
	font-size: 13px;
	color: #b2b2b2;
	text-align: center;
}

main .content-wraper-checkout h5{
	font-family: 'Platypi-400';
	color: #e6deb6;
	margin-block: 20px 30px;
}


main .content-wraper-checkout table{
	width:100%;
	border-collapse: separate;
	border-spacing: 2px 2px;
	text-align: center;
}


main .content-wraper-checkout table thead{
	background: #3a2b1c;
	
}

main .content-wraper-checkout table th{
	padding: 15px 10px;
	color: #ff7800;
}

main .content-wraper-checkout table tbody td{
	padding: 20px 10px;
	width: 50%;

}

main .content-wraper-checkout table tbody tr > td:first-child{
	color:#e7e1b5;
}

main .content-wraper-checkout table tbody tr:nth-child(even){
	background: #291d18;
}

main .content-wraper-checkout table tbody tr:nth-child(odd){
	background: #32241e;
}

main .content-wraper-checkout .buyed{
	margin-top: 30px;
}


main .content-wraper-checkout .buyed .price-info{
	display: flex;
	justify-content: center;
	gap: 30px;
	flex-wrap: wrap;
}


main .content-wraper-checkout .img-price{
	display: flex;
	align-items:end;
}

main .content-wraper-checkout .img-price img{

}


main .content-wraper-checkout .price-amount{

	text-align: center;
	font-family: 'platypi-300';

}

main .content-wraper-checkout .price-amount span:first-child{
	display: block;
	margin-bottom: -8px;
}

main .content-wraper-checkout .price-amount h1{
	font-size: 60px;
	font-family: 'platypi-700';
	color: #e7e1b5;
}

main .content-wraper-checkout .price-amount span{
	font-size: 16px;
}


main .content-wraper-checkout  .line-checkout{
	margin-top: 20px;
	background: #19110d;
	height: 5px;
	border-bottom: 2px solid #29231f;
}

main .content-wraper-checkout .buttons-payments{
	margin: 0 auto;
	width: 60%;
	margin-top: 30px;
}

main .content-wraper-checkout .buttons-payments p{
	color: #b6b6b6;
	font-size: 13px;
}

main .content-wraper-checkout .info-details-security{
	grid-column: 1 / -1;
}

main .content-wraper-checkout .security-info p {
	font-size: 12px;
	line-height: px;
}

main .content-wraper-checkout .security-info p span{
	color:#ff6500;

}

.buy-coins-btn {
    display: inline-flex;       
    align-items: center;        
    justify-content: center;     
    gap: 10px;                   

    width: 100%;
    max-width: 420px;

    background: #009ee3;
    color: #ffffff;

    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.3px;

    padding: 14px 20px;

    border: none;
    border-radius: 10px;

    cursor: pointer;
    transition: all 0.25s ease;

    box-shadow: 0 4px 14px rgba(0, 158, 227, 0.25);
}

.mp-logo {
    width: 40px;

}

.buy-coins-btn:hover {
    background: #0084c7;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 158, 227, 0.35);
}


.buy-coins-btn:focus{
	border: none;
	outline: none;
}


/*-------------------------------------------------------*/
/*  Media Queries Pages
/*-------------------------------------------------------*/
@media screen and (max-width: 1200px){
	main .user-description{
		max-width: none;
		width: 100%;
		flex: none;
	}

	main .panel-events{
		width: 100%;
	}


	main .user-description textarea{
		width: 100%;
		max-width: none;
	}

	main .ranking-page .aside-rank{
		max-width: none;
		width: 100%;
	}


	main .boxes-content-reset .content-box-6 .sub-box-reset{
		height: 50px;
		flex: none;
	}

	main .wraper-pkclear{
		flex: 1 1 100%;
		max-width: none;
	}

}


@media screen and (max-width: 991px){
	main .ranking-page .aside-rank{
		max-width: 100%;
		padding: 0px;
	}

	main .table-rank{
		width: 920px;

	}

	main .wraper-table-rank{
		overflow-x: auto;
	}

	main .content-changelog div:last-child .plus-btn {
		display: none;

	}

	main .content-changelog div{
		min-width: 100%;
		display: block;
	}


	main .content-changelog div:last-child{
		flex:2;
		border-right: none;
		text-align: center;
		position: relative;

	}


	main .content-changelog div:last-child  .description {
		position: relative;
		bottom: 0;	
		left: 0;
		padding: 0;

	}

	main .panel-events{
		width: 100%;
		background: transparent;
		box-shadow: none;

	}

	main .content-wraper-character .info-character-1{
		max-width: none;
		margin-bottom: 20px;

	}

	main .info-character-2{
		padding: 0 0px 30px 0px;
	}

	body .login-wrap{
		padding: 0 20px;
	}

	.wraper-ranks-contents{
		padding-inline: 15px;
	}

	main .panel-control{
		padding-inline: 15px;
		background: none;
	}


	main .section-reset{
		padding-top: 0px;
	}


	main .header-reset{
		display: block;
	}

	main .boxes-content-reset .content-box-1{
		display: none;
	}

	main .required-reset{
		clip-path: none;
		padding: 15px;
		min-width: auto;
	}

	main .basic-title{
		padding-bottom: 10px;
		padding-inline: 10px;
	}


	main .info-addstats .container-verification{
		padding-right: 40px;
	}


	main .content-wraper-addstats{
		display: block;
	}

	main .form-stats{
		display: block;
		width:100%;	
	}

	main .form-stats .form-character{
		flex:none;
		min-width: auto;
	}

	main .data-resetstats{
		background: transparent;
		padding: 0;
		margin-top: 4px;
	}

	main .content-wraper-webshop{
		display: block;
	}

	main .webshop-wraper{
		min-width: auto;
	}

	main .webshop-wraper .item-info-wraper .specifications{
		padding: 15px 0px 0 0px;
		margin-top: 10px;
	}

	main .wraper-content-item .containt-options{display: block;}

	main .wraper-content-item .containt-options .element-exe{
		max-width: none;

		& select{
			max-width: none;
		}
	}

	main .wraper-event .info-mycharacter {
		flex-basis: 100%;
	}

	main .content-wraper-vip .container-packs{	
		grid-template-columns: repeat(auto-fill, minmax(270px, 300px));
		justify-content: center;
		padding: 10px;

	}


	@media screen and (max-width: 768px){
		main .ranking-page{
			padding:0 ;
		}

		main .filter-rank{
			width:100%;
		}


		main .section-changelog{
			padding-top: 0px;

		}

		main .section-addstats{
			padding-top:0px;
		}


		main .header-changelog{
			display: none;
		}

		main .section-character-1{
			padding-top: 0px;
		}


		main .wraper-changelog{
			width: 100%;
			padding: 0;
			border-left:none;
		}

		main .section-wraper-pages,
		main .section-webshop{
			padding-top: 0;
		}

		main .section-wraper-stadistic, main .section-wraper-command{padding-top: 10px;}
		main .content-changelog:before{width: 0px;}

		main .content-changelog{margin-bottom: 15px;}

		main .content-changelog div{position: relative;}

		main .section-login{padding-top: 0px;}

		main .table-download{padding: 20px 0px 80px 0px;}

		main .content-changelog div:first-child{
			display: block;
			background: #7a3314;
			text-align: center;
			font-size: 20px;
			color: var(--white);
		}

		main .webshop-wraper .category-list-wraper .decorate{ display:none}
		main .webshop-wraper .category-list-wraper{display: block;}
		main .webshop-wraper .category-list-wraper .select-category{padding-inline: 0px;}
		main .webshop-wraper .item-info-wraper {display: block; padding: 15px 10px}
		main .webshop-wraper .item-info-wraper .prev-img {max-width: none; min-width: 200px}
		main .wraper-total{display: block;}
		main .section-events .content-wraper-vip{padding:10px 10px 20px 10px;}
		main .information-load{padding: 15px; text-align: center;}
		main .content-wraper-vip .content-wraper-pack:hover{box-shadow: none;}
		main .content-header-vip .decorate{display: none;}


	}






}

@media screen and (max-width: 670px){
	main .group-input-check{gap:0px 10px;} 

	main .wraper-count{flex-basis: 6px} 
	main .wraper-count .count-number{display: none;}

	main .container-pkclear .box-3,
	main .container-pkclear .box-4,
	main .container-pkclear .box-5{
		width: 100%;
		flex: none;
		min-width: auto;

		& .content-pk-info{
			flex-direction: column;
		}

		& .time-pk{
			padding-block: 10px;
		}
	}


}


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

	.section-wraper-stadistic table.data-info{
		width: 800px;

	}
	.section-wraper-party .table-party{
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		gap: 0 30px;
		padding: 30px 50px;
	}

	main .section-wraper-stadistic .table-stadistic,
	main .section-wraper-party .table-party,
	main .section-wraper-command .table-command,
	main .section-wraper-pages .table-infor
	{
		padding: 0;
		overflow-x: auto;

	}


	main .filter-rank{
		padding: 10px;
		flex-wrap: wrap;
		justify-content: center;
	}

	main .wraper-ranks .button-date-rank a.item-rank{
		flex:1;
		max-width: none;
	}

	main .wraper-ranks{
		padding: 14px 0;
	}


	main .info-character-2  table.character-info-pj tr td:first-child{
		width: 200px;

	}

	main .content-wraper-notification{
		padding: 25px;
	}

}



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


	.table-download tbody td::before{
		content: attr(data-label);
		position: absolute;
		left: 20px;
		top:15px;
		color:#fbd28b;
		font-size: 14px;

	}

	.table-download table,
	.table-download thead,
	.table-download tbody,
	.table-download th,
	.table-download td,
	.table-download tr{

		display: block;
		width: 100%;
	}


	.table-download thead{
		display: none;
	}


	.table-download tbody td {
		position: relative;
		padding-left: 50% !important;
		padding-right:8px !important;
		border-top: none !important ;
	}


	.table-download tbody td::before{
		content: attr(data-label);
		position: absolute;
		left: 20px;
		top:15px;
		font-weight: bold;
		color:#fbd28b;
		white-space: nowrap;
	}


	.table-download tbody tr {
		margin-top: 18px;
		border-top: 1px solid #4e3827;
	}

	.section-wraper-pages table.data-table{
		border: none;

	}

	main .data-config P {
		font-size: 14px;
		margin-right: 0
	}

	main .data-config{
		margin-right: 0;

	}

	main .title-config p {
		font-size: 14px;
		width: 100%;

	}

	main .prices-reset-wraper .box-prices{
		width: 100%;
		flex: none;
	}

	main .webshop-wraper .item-info-wraper .specifications .group-option {display: block;}

	main .wraper-content-item .containt-options .element-exe{
		display: block; 
		padding: 0;
		& p{
			margin-bottom: 4px;
		}
	}

	main .wraper-content-item .item-info-exelent .title-option-exe{display: block;}
	main .wraper-content-item .item-info-exelent .title-option-exe h5{position: relative;}
	main .wraper-content-item .item-info-exelent .title-option-exe span{
		margin: 0;
		text-align: center;
		display: block;
	}

	#tooltip {
		position: fixed !important; ;
		width: 100%;
		top: 50% !important; ;
		left: 50% !important; ;
		transform: translate(-50%, -50%) !important; /* centra exacto */
	}

	main .wraper-event .info-character-stats{
		flex-basis: 100%;
	}

	main .content-wraper-vip .payment-type{
		flex-direction: column;
		width: 100%;
		gap: 2px;
		flex-wrap: wrap;
	}

	main .content-wraper-vip .select-payment i{
		display: none;
	}
} 


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

	main .data-resetstats .wraper-money-required{ min-width: auto; flex:none; width:100%; padding:10px }
	main .data-resetstats .wraper-lvl-required{
		& div:first-child{
			padding: 10px;
		}
	}

	main .wraper-event .info-mycharacter > div {flex: 1 1 100%}

	main .container-pkclear .box-2{flex-basis: 100%; background: }

	main .content-header-vip{padding-inline: 20px}


	main .content-wraper-vip .plans-vip p{
		font-size: 16px;
		span{
			font-size: 16px;
		}
	}

}


@media screen and (max-width: 360px){
	main .data-resetstats .wraper-stats{ min-width:auto}
}