/* Theme Color Variables */
:root {
	/* --primary-color: #5a7fd8; */
	--primary-color: transparent;
	--primary-light: #7a9ff8;
	--primary-dark: #3a5fb8;
}

@font-face {
	font-family: 'Apercu Pro';
	src: url('../font/apercu/ApercuPro.eot?#iefix');
	src: url('../font/apercu/ApercuPro.eot?#iefix') format('embedded-opentype'), url('../font/apercu/ApercuPro.woff2') format('woff2'), url('../font/apercu/ApercuPro.woff') format('woff'), url('../font/apercu/ApercuPro.ttf') format('truetype');
	font-weight: 400;
	font-style: normal
}

@font-face {
	font-family: 'PSLOmyimPro_gdi';
	src: url('../font/pslo/PSLOmyimPro_gdi.eot?#iefix');
	src: url('../font/pslo/PSLOmyimPro_gdi.eot?#iefix') format('embedded-opentype'),
		url('../font/pslo/PSLOmyimPro_gdi.woff') format('woff'),
		url('../font/pslo/PSLOmyimPro_gdi.ttf') format('truetype'),
		url('../font/pslo/PSLOmyimPro_gdi.svg#PSLOmyimPro_gdi') format('svg');
	font-weight: 400;
	font-style: normal;
}

html {
	height: 100%;
	margin: 0;
	overflow-x: hidden;
	position: relative;
}

body {
	/* font-family: 'Apercu Pro' !important; */
	font-family: 'PSLOmyimPro_gdi' !important;
	font-size: 20px;
	width: 100%;
	min-height: 100vh;
	color: #fff !important;
	background-color: #0a0f1c;
	padding-right: 0 !important;
    position: relative;
    overflow-x: hidden;
	padding-bottom: 0px;
	margin: 0;
}

body::before {
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url("../img/full_bg.webp");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	z-index: 0;
	pointer-events: none;
}

/* Fallback untuk browser yang tidak support WebP */
@supports not (background-image: url("test.webp")) {
	body::after {
		background: url("../img/bottom_bg_dark.png");
	}
}

main { 
	width: 100%;
	padding: 0;
	min-height: 50vh;
	position: relative;
	z-index: 1;
}

p {
	margin: 0 !important;
	padding: 0 !important
}

.h1,
h1 {
	font-size: 1.4rem !important;
}

.h3,
h3 {
	font-size: 1.9rem !important;
}

div {
	font-size: 1.2rem;
}

small {
	font-size: 100% !important;
}

a:hover,
a:visited {
	text-decoration: none !important
}

.main_content {
	background-color: rgba(243, 228, 253, 0.65);
	box-shadow: 0 0.150rem 0.50rem rgba(0,0,0,.2) !important;
	position: relative;
    z-index: 2;
}

.cover_loading {
	display: none;
}

.cover_loading {
	content: '';
	display: inline-flex;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #444;
	z-index: 999;
	display: flex;
	justify-content: center;
	align-items: center;
}

/* -- preloader -- */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@800&display=swap');

#preloader {
    position: fixed;
    background: #fff;
    display: grid;
    place-content: center;
    min-height: 100vh;
    width: 100%;
    margin: 0;
    padding: 2px;
    box-sizing: border-box;
    overflow: hidden;
    z-index: 9999999;
}

#preloader h1 {
    font-family: 'Open Sans', -apple-system, 'Segoe UI', sans-serif !important;
    font-size: 50px !important;
    font-weight: bold !important;
    /* color: #2a88ed; */
    color: #5a9938;
    text-shadow: 2px 2px 4px #464343;
    box-sizing: border-box;
}

#preloader .dots {
    display: inline-flex;
}

#preloader .dots--animate .dot.z {
    -webkit-animation: loaderScale 0.8s 0.2s forwards;
    animation: loaderScale 0.8s 0.2s forwards;
}

#preloader .dots--animate .dot.f,
.dots--animate .dot.s {
    animation: loaderRight 0.5s forwards;
}

#preloader .dots--animate .dot.l {
    animation: loaderRightDown 0.4s 0.1s forwards linear, loaderDrop 2s 0.4s forwards linear;
}

#preloader .dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    /* background: #2a88ed; */
    background: #5a9938;
    text-shadow: 2px 2px 4px #464343;
    border-radius: 10px;
    position: relative;
    margin-left: 6px;
}

#preloader .dot.z {
    position: absolute;
    transform: scale(0);
}

@keyframes loaderScale {
    100% {
        transform: scale(1);
    }
}

#preloader .dot.f,
.dot.s {
    transform: translateX(0px);
}

@keyframes loaderRight {
    100% {
        transform: translateX(16px);
    }
}

#preloader .dot.t {
    background: transparent;
}

#preloader .dot .l {
    margin-left: 0;
    position: absolute;
    top: 0;
    left: 0;
}

@keyframes loaderRightDown {
    50% {
        top: 4px;
        left: 16px;
    }

    100% {
        top: 12px;
        left: 24px;
    }
}

@keyframes loaderDrop {
    100% {
        transform: translate(70px, calc(35px + (100vh/2)));
    }
}

.parent_main_navbar {
	display: flex !important;
	/* position: absolute; */
	z-index: 1000;
	width: 100%;
	transition: padding 0.3s ease, top 0.3s ease;
	top: 0;
	padding-top: 10px;
	/* background: linear-gradient(rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 100%); */
}

.parent_right_main_content {
	height: 100%;
}

.img_fly_city {
    position: absolute;
    width: 100%;
    display: flex;
    align-content: center;
    justify-content: end;
}

.img_fly_city:not(.loader_fly_city) {
    -webkit-animation: loaderMoveUpDown 2s infinite alternate;
    animation: loaderMoveUpDown 2s infinite alternate;

}

.img_fly_city.loader_fly_city {
    -webkit-animation: loaderMoveUpDown 1s infinite alternate;
    animation: loaderMoveUpDown 1s infinite alternate;
}

.logo_circle {
	position: relative;
	width: 313px;
	height: 300px;
	overflow: hidden;
	margin: auto;
	
    -webkit-animation: loaderMoveUpDown 2s infinite alternate;
    animation: loaderMoveUpDown 2s infinite alternate;
}

.logo_circle .circle_img {
	position: relative;
	width: 313px;
	height: 300px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.logo_circle .circle_img:after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 313px;
	height: 300px;
	background: url("../img/glow_circle/light_circle.webp") no-repeat center center;
	background-size: contain;
	transform: translate(-50%, -50%);
	-webkit-animation: runCircle 20s infinite linear;
	animation: runCircle 20s infinite linear;
	z-index: 1;
}

.logo_circle .circle_bg {
	width: 626px;
	height: 333px;
	background: url("../img/glow_circle/bg_circle.webp") no-repeat;
	position: absolute;
	top: 72%;
	left: 49.5%;
	transform: translate(-50%, -50%) scale(0.5);
	transform-origin: center center;
	z-index: 2;
	-webkit-animation: light 3s steps(45) infinite;
	animation: light 3s steps(45) infinite;
}

.logo_circle .circle_name {
	position: absolute;
	top: 45%;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	z-index: 1;
}

.logo_circle .circle_name img{
	width: 185px;
}

@-webkit-keyframes light {
	to {
		background-position: 0 -14985px;
	}
}

@keyframes light {
	to {
		background-position: 0 -14985px;
	}
}

@-webkit-keyframes runCircle {
	from {
		transform: translate(-50%, -50%) rotate(0deg);
	}

	to {
		transform: translate(-50%, -50%) rotate(360deg);
	}
}

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

	to {
		transform: translate(-50%, -50%) rotate(360deg);
	}
}

@-webkit-keyframes zoomIn {
	from {
		opacity: 0;
		-webkit-transform: scale3d(.3, .3, .3);
		transform: scale3d(.3, .3, .3);
	}

	50% {
		opacity: 1;
	}
}

@keyframes zoomIn {
	from {
		opacity: 0;
		-webkit-transform: scale3d(.3, .3, .3);
		transform: scale3d(.3, .3, .3);
	}

	50% {
		opacity: 1;
	}
}

@-webkit-keyframes loaderMoveUpDown {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-12px);
    }
}

@keyframes loaderMoveUpDown {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-12px);
    }
}
/* -- preloader -- */

/* -- preloader2 -- */
#preloader2 {
	position: fixed;
	margin: 0px;
	background: url("../img/bg_full_loading.webp") no-repeat center center;
	background-size: cover;
	display: flex;
	justify-content: center;
	align-items: center;
    min-height: 100vh;
    width: 100%;
	z-index: 9999999;
	overflow: visible; /* Allow image to show fully without clipping */
}

.preloader2_left_wing { }
.preloader2_left_wing img {
	transform: scaleX(-1);
}
.preloader2_right_wing { }
.preloader2_right_wing img {

}

.preloader2_circle {
	width: 350px;
	height: 350px;
	border-radius: 100%;
	background: linear-gradient(165deg, #a8c5f0 0%, #7a9dd9 40%, #5a7fb8 98%, #3a5f8f 100%);
	position: relative;
	/* Instant render optimization - removed 'contain' to prevent image clipping */
	will-change: auto;
}

.preloader2_image {
	width: 350px;
	height: 350px;
	display: flex;
	justify-content: center;
	align-items: center;
	/* Allow image to overflow if needed */
	overflow: visible;
	/* GPU acceleration for instant paint */
	transform: translateZ(0);
	backface-visibility: hidden;
}

.preloader2_image img {
	/* Instant display - no fade in, no progressive loading */
	opacity: 1 !important;
	visibility: visible !important;
	display: block !important;
	animation: none !important;
	transition: none !important;
	/* Force immediate render */
	will-change: auto;
	image-rendering: -webkit-optimize-contrast;
	image-rendering: crisp-edges;
	/* Ensure full image is visible - no clipping */
	max-width: none;
	max-height: none;
	width: 410px;
	height: auto;
}

.preloader2_image:before {
	position: absolute;
	content: '';
	width: 100%;
	height: 100%;
	border-radius: 100%;
	border-bottom: 0 solid #764ba205;

	box-shadow:
		0 -10px 20px 20px #764ba240 inset,
		0 -5px 15px 10px #667eea50 inset,
		0 -2px 5px #5fb3e880 inset,
		0 -3px 2px #00e6f6BB inset,
		0 2px 0px #00e6f6,
		0 2px 3px #00e6f6,
		0 5px 5px #667eea90,
		0 10px 15px #764ba260,
		0 10px 20px 20px #764ba240;
	filter: blur(3px);
	animation: 2s preloader2Rotate linear infinite;
}

@keyframes preloader2Rotate {
	100% {
		transform: rotate(360deg)
	}
}
/* -- preloader2 -- */

/* loading2 */
.modal_waiting {
	display: none;
	position: fixed;
	z-index: 10000;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%; 
}

body.ajax_waiting {
	overflow: hidden;
}

body.ajax_waiting .modal_waiting {
	display: block;
}
/* loading2 */

/* img {
    visibility: hidden;
} */
/* ============================================================================
   SweetAlert Modern Dark Space Theme
   ============================================================================ */

/* SweetAlert Overlay - Dark cosmic background */
.swal-overlay {
    background: rgba(13, 25, 51, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* SweetAlert Modal - Glass morphism with dark space theme */
.swal-modal {
    background: linear-gradient(145deg, 
        rgba(20, 35, 70, 0.95), 
        rgba(30, 45, 80, 0.98)
    );
    border: 2px solid rgba(255, 215, 0, 0.3);
    border-radius: 20px;
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(255, 215, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    color: #ffffff;
}

/* SweetAlert Title */
.swal-title {
    color: #ffd700;
    font-weight: 600;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
    margin-bottom: 20px;
    font-size: 24px;
}

/* SweetAlert Text Content */
.swal-text {
    color: #e8e8e8;
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 20px;
}

/* SweetAlert Buttons */
.swal-button {
    background: linear-gradient(145deg, #4a6cf7, #3a5ce8);
    border: 2px solid rgba(255, 215, 0, 0.3);
    border-radius: 25px;
    color: #ffffff;
    font-weight: 600;
    padding: 12px 24px;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    box-shadow: 
        0 4px 15px rgba(74, 108, 247, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.swal-button:hover {
    background: linear-gradient(145deg, #5a7cf8, #4a6cf7);
    border-color: rgba(255, 215, 0, 0.5);
    box-shadow: 
        0 6px 20px rgba(74, 108, 247, 0.4),
        0 0 15px rgba(255, 215, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

.swal-button:active {
    transform: translateY(0);
}

.swal-button--confirm {
    background: linear-gradient(145deg, #28a745, #218838);
    box-shadow: 
        0 4px 15px rgba(40, 167, 69, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.swal-button--confirm:hover {
    background: linear-gradient(145deg, #34ce57, #28a745);
    box-shadow: 
        0 6px 20px rgba(40, 167, 69, 0.4),
        0 0 15px rgba(255, 215, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.swal-button--cancel {
    background: linear-gradient(145deg, #6c757d, #5a6268);
    box-shadow: 
        0 4px 15px rgba(108, 117, 125, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.swal-button--cancel:hover {
    background: linear-gradient(145deg, #7d868e, #6c757d);
    box-shadow: 
        0 6px 20px rgba(108, 117, 125, 0.4),
        0 0 15px rgba(255, 215, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.swal-button--danger {
    background: linear-gradient(145deg, #dc3545, #c82333);
    box-shadow: 
        0 4px 15px rgba(220, 53, 69, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.swal-button--danger:hover {
    background: linear-gradient(145deg, #e4606d, #dc3545);
    box-shadow: 
        0 6px 20px rgba(220, 53, 69, 0.4),
        0 0 15px rgba(255, 215, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Success Icon Styling */
.swal-icon--success__hide-corners,
.swal-icon--success::after,
.swal-icon--success::before {
    background: transparent;
}

.swal-icon--success__line {
    background-color: #28a745;
    box-shadow: 0 0 10px rgba(40, 167, 69, 0.5);
}

.swal-icon--success__ring {
    border-color: #28a745;
    box-shadow: 0 0 15px rgba(40, 167, 69, 0.3);
}

/* Error Icon Styling */
.swal-icon--error__x-mark {
    position: relative;
}

.swal-icon--error__line {
    background-color: #dc3545;
    box-shadow: 0 0 10px rgba(220, 53, 69, 0.5);
}

/* Warning Icon Styling */
.swal-icon--warning {
    border-color: #ffc107;
    color: #212529;
}

.swal-icon--warning__body {
    background-color: #ffc107;
    box-shadow: 0 0 10px rgba(255, 193, 7, 0.5);
}

.swal-icon--warning__dot {
    background-color: #212529;
}

/* Info Icon Styling */
.swal-icon--info {
    border-color: #17a2b8;
}

.swal-icon--info__body {
    background-color: #17a2b8;
    box-shadow: 0 0 10px rgba(23, 162, 184, 0.5);
}

/* Input Field Styling */
.swal-content__input {
    background: rgba(30, 45, 80, 0.8);
    border: 2px solid rgba(255, 215, 0, 0.3);
    border-radius: 10px;
    color: #ffffff;
    padding: 12px 16px;
    font-size: 14px;
    transition: all 0.3s ease;
}

.swal-content__input:focus {
    border-color: rgba(255, 215, 0, 0.6);
    box-shadow: 
        0 0 15px rgba(255, 215, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    outline: none;
}

.swal-content__input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

/* Loading Animation */
.swal-icon--loading {
    border-color: rgba(255, 215, 0, 0.3);
    border-top-color: #ffd700;
}

/* Close Button */
.swal-modal__close {
    color: rgba(255, 255, 255, 0.7);
    transition: all 0.3s ease;
}

.swal-modal__close:hover {
    color: #ffd700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

/* ============================================================================
   SweetAlert2 Modern Dark Space Theme (for newer versions)
   ============================================================================ */

/* SweetAlert2 Container */
.swal2-container {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* SweetAlert2 Popup */
.swal2-popup {
    background: linear-gradient(145deg, 
        rgba(20, 35, 70, 0.95), 
        rgba(30, 45, 80, 0.98)
    ) !important;
    border: 2px solid rgba(255, 215, 0, 0.3) !important;
    border-radius: 20px !important;
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(255, 215, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    color: #ffffff !important;
}

/* SweetAlert2 Title */
.swal2-title {
    color: #ffd700 !important;
    font-weight: 600 !important;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.3) !important;
    margin-bottom: 20px !important;
}

/* SweetAlert2 HTML Container */
.swal2-html-container {
    color: #e8e8e8 !important;
    line-height: 1.5 !important;
}

/* SweetAlert2 Buttons */
.swal2-styled {
    background: linear-gradient(145deg, #4a6cf7, #3a5ce8) !important;
    border: 2px solid rgba(255, 215, 0, 0.3) !important;
    border-radius: 25px !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    transition: all 0.3s ease !important;
    box-shadow: 
        0 4px 15px rgba(74, 108, 247, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

.swal2-styled:hover {
    background: linear-gradient(145deg, #5a7cf8, #4a6cf7) !important;
    border-color: rgba(255, 215, 0, 0.5) !important;
    box-shadow: 
        0 6px 20px rgba(74, 108, 247, 0.4),
        0 0 15px rgba(255, 215, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    transform: translateY(-2px) !important;
}

.swal2-confirm {
    background: linear-gradient(145deg, #28a745, #218838) !important;
}

.swal2-confirm:hover {
    background: linear-gradient(145deg, #34ce57, #28a745) !important;
}

.swal2-cancel {
    background: linear-gradient(145deg, #6c757d, #5a6268) !important;
}

.swal2-cancel:hover {
    background: linear-gradient(145deg, #7d868e, #6c757d) !important;
}

.swal2-deny {
    background: linear-gradient(145deg, #dc3545, #c82333) !important;
}

.swal2-deny:hover {
    background: linear-gradient(145deg, #e4606d, #dc3545) !important;
}

/* SweetAlert2 Input */
.swal2-input {
    background: rgba(30, 45, 80, 0.8) !important;
    border: 2px solid rgba(255, 215, 0, 0.3) !important;
    border-radius: 10px !important;
    color: #ffffff !important;
    transition: all 0.3s ease !important;
}

.swal2-input:focus {
    border-color: rgba(255, 215, 0, 0.6) !important;
    box-shadow: 
        0 0 15px rgba(255, 215, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    outline: none !important;
}

.swal2-input::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* SweetAlert2 Icons */
.swal2-success-circular-line-left,
.swal2-success-circular-line-right,
.swal2-success-fix {
    background: rgba(30, 45, 80, 0.98) !important;
}

.swal2-success-line-tip,
.swal2-success-line-long {
    background-color: #28a745 !important;
    box-shadow: 0 0 10px rgba(40, 167, 69, 0.5) !important;
}

.swal2-success-ring {
    border-color: #28a745 !important;
    box-shadow: 0 0 15px rgba(40, 167, 69, 0.3) !important;
}

.swal2-error .swal2-x-mark-line-left,
.swal2-error .swal2-x-mark-line-right {
    background-color: #dc3545 !important;
    box-shadow: 0 0 10px rgba(220, 53, 69, 0.5) !important;
}

.swal2-warning {
    border-color: #ffc107 !important;
    color: #212529 !important;
}

.swal2-info {
    border-color: #17a2b8 !important;
    color: #ffffff !important;
}

/* SweetAlert2 Progress Bar */
.swal2-progress-bar {
    background: linear-gradient(90deg, #ffd700, #ffed4a) !important;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.5) !important;
}

/* SweetAlert2 Timer Progress Bar */
.swal2-timer-progress-bar {
    background: linear-gradient(90deg, #ffd700, #ffed4a) !important;
}

/* SweetAlert2 Close Button */
.swal2-close {
    color: rgba(255, 255, 255, 0.7) !important;
    transition: all 0.3s ease !important;
}

.swal2-close:hover {
    color: #ffd700 !important;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5) !important;
    background: transparent !important;
}

/* start tabs */
.project-tab {
	/* padding-top: 15px; */
}
.project-tab #tabs{
    background: #007b5e;
    color: #eee;
}
.project-tab #tabs h6.section-title{
    color: #eee;
}

#tbl_media_ss_table .gallery {
	margin: 3px;
}

#tbl_media_ss_table .gallery-image{
	border-top: 1px dashed #fff;
	border-bottom: 1px dashed #fff;
	border-right: 1px dashed #fff;
	border-left: 1px dashed #fff;
}

.parent_nav nav.navbar.navbar-dark{
	padding: 1.1rem 2rem;
} 
.parent_nav nav.navbar li.nav-item{
	/* padding: 0px !important; */
	margin-left: 15px;
	margin-right: 15px;

	padding: 5px 10px !important;
	/* background-color: #049fe9; */
	background-color: transparent;
	/* border: 1.5px solid #70add9; */
	/* color: #fdc54f; */
	/* color: #814813; */
	color: #fff;
	text-shadow: 1px 1px 2px #7d5200;
	font-size: 20px;
	cursor: pointer;
	transition: all 0.2s ease;
	/* transform: skew(-20deg); */
	border-radius: 3px;
	text-align: center;
	position: relative; 
}
.parent_nav nav.navbar li.nav-item:hover, 
.parent_nav nav.navbar li.nav-item.current {
	/* background-color: #100e26 !important; */
	/* box-shadow: 0 0.150rem 0.50rem rgba(0, 0, 0, .2) !important; */
}
.parent_nav .navbar-nav .nav-link {
	color: rgb(39, 100, 139) !important;
	display: block;
	/* transform: skew(20deg); */
}
.parent_nav nav.navbar li.nav-item:hover .nav-link,
.parent_nav nav.navbar li.nav-item.current .nav-link {
	color: #fff !important;;
}
.parent_im_list .child_im_list,
#im_list .child_im_list {
	border: 1px dashed #fff;
}

.item-set-image{
	width: 100%;
	text-align: center;
	display: flex;
	padding: 10px;
	text-align: center;
	background: #e8e8e8;
	border: 2px solid #f2ede7;
	box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2);
} 

.form_blue_input_group .input-group,
#parent_im_btn_checkout .input-group,
#form_register .input-group,
#parent_form_login .input-group{
	box-shadow: 0 0.150rem 0.50rem rgba(0,0,0,.2);
}

.form_blue_input_group .input-group .input-group-text,
#parent_im_btn_checkout .input-group .input-group-text,
#form_register .input-group .input-group-text,
#parent_form_login .input-group .input-group-text{
	background-color: #00254a;
	color: #fff;
}

#parent_form_login .input-group input 
{
	text-align: right;
}

.parent_nav nav.navbar li.nav-item img.nav-img{
	width: 55px;
  	margin-top: -5px;
}
.parent_nav nav.navbar li.nav-item-center{
	width:290px;
	margin-left:20px;
	margin-right:20px;
	/* margin-top:-15px; */
}
.parent_nav nav.navbar li.nav-item-center div.nav-center-text{
	position: absolute;
	height: 100px;
	width: 100%;
	text-align: center;
	/* background-image: radial-gradient(circle, #9ce61a 15%, #587d15 90%);
	border-top-left-radius: 30px;
	border-top-right-radius: 30px;
	border-bottom-left-radius: 60px;
	border-bottom-right-radius: 60px;
	border: 2px solid #221D07;
	box-shadow: 0 0.150rem 0.50rem rgba(0,0,0,.4) !important; */
}
.parent_nav nav.navbar li.nav-item-center div.nav-center-text h5{
	color: #fff;
	margin-top: 25px;
	font-weight: bold;
	font-size: 1.3rem;
	text-shadow: 2px 2px 4px #464343;
}
.parent_nav nav.navbar li.nav-item-center div.nav-center-text div.nav-center-count{
	color:#fff;
	background: black;
	width: 80px;
	margin:auto;
	border-radius:4px;
	box-shadow: 0 0.150rem 0.50rem rgba(0,0,0,.2) !important;
}

.parent_nav ul.submenu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	/* background-color: rgba(239, 239, 239, 0.6); */
	background-color: rgba(97, 95, 95, 0.6);
	list-style: none;
	padding: 0;
	margin: 0;
	min-width: 200px;
}

.parent_nav ul.submenu li a {
	display: flex;
	align-items: center;
	justify-content: left;
	padding: 10px 15px;
	/* color: #814813; */
	color: #fff;
	text-shadow: 1px 1px 2px #7d5200;
	text-decoration: none;
	text-align: left;
}

.parent_nav ul.submenu li a img{
	width: 30px !important;
	margin-right: 5px;
}

.parent_nav ul.submenu li a:hover {
	background-color: rgba(252, 216, 162, 0.6);
}

.parent_nav ul.navbar-nav li:hover ul.submenu {
	display: block;
}


.project-tab #tabs .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: #0062cc;
    background-color: transparent;
    border-color: transparent transparent #f3f3f3;
    border-bottom: 3px solid !important;
    font-size: 20px;
    font-weight: bold;
}
.project-tab .nav-link {
    border: 1px solid transparent;
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;
    color: #fff;
    font-size: 20px;
    font-weight: 600;
}
.project-tab .nav-link {
	background: #0000001a;
}
.project-tab .nav-link:hover {
    border: none;
}
.project-tab thead{
    background: #8ee5ff;
    color: #333;
}
.project-tab a{
    text-decoration: none;
    color: #333;
    font-weight: 600;
}
.table-scroll{
	padding-top: 10px;
	height: 720px;
	overflow-y: auto;
}
/* end tabs */

.parent_btn_play {
	position: relative;
	width: 290px;
	height: 85px;
	overflow: hidden;
}

.btn_play {
	width: 450px;
	height: 160px;
	/* background: url('../img/button_play/play.webp') no-repeat; */
	position: absolute;
	transform: translate(-50%, -50%) scale(0.6);
	transform-origin: center center;
	cursor: pointer;
	-webkit-animation: play 2s steps(25) infinite;
	animation: play 2s steps(25) infinite;
	top: 50%;
	left: 50%;
}

.btn_play:hover {
	/* background: url('../img/button_play/play2.webp') no-repeat; */
}

@-webkit-keyframes play{
	to{
		background-position: 0 -8000px;
	}
}
@keyframes play{
	to{
		background-position: 0 -8000px;
	}
}

.carousel-indicators li {
    width: 10px !important;
	height: 10px !important;
	background-color: #007bff !important;
	border-radius: 100%;
}

#level_rank_table tbody tr td,
#guild_rank_table tbody tr td,
#cs_rank_table tbody tr td,
#topup_history_table tbody tr td{
	color: #fff !important;
}

.animate_scale{ 
    -webkit-animation: a_scale 1.2s infinite alternate;
	animation: a_scale 1.2s infinite alternate;
}

@keyframes a_scale {
    0% { 
		transform: scale(0.7); 
		opacity: 0.7;
	}
	100% {
		transform: scale(1);
		opacity: 1;
	}
}

/* start clock */
.clock-day:before {
	content: var(--timer-day);
}
.clock-hours:before {
	content: var(--timer-hours);
}
.clock-minutes:before {
	content: var(--timer-minutes);
}
.clock-seconds:before {
	content: var(--timer-seconds);
} 
.parent_nav_clock_top {
	margin: auto;
	left: 0;
	right: 0;
	top: 12%;
	z-index: 4;
	max-width: 170px;
	/* background: rgba(102, 155, 237, 0.70);
	box-shadow: 0 4px 15px 2px rgba(87, 147, 239, 0.70); */
}

.parent_nav_clock_bottom {
	margin: auto;
	left: 0;
	right: 0;
	bottom: 7%;
	z-index: 4;
	max-width: 170px;
	/* background: rgba(102, 155, 237, 0.70);
	box-shadow: 0 4px 15px 2px rgba(87, 147, 239, 0.70); */
}
.parent_nav_clock_top h5{
	margin-bottom: 0px;
	margin-top: 4px;
	text-align: center;
	/* background: -webkit-linear-gradient(#f7f7f7, #dc8f2c);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent; */
	color: #fff;
	text-shadow: 1px 1px 2px #442e02;
	font-size: 22px;
	padding-bottom: 5px;
}
.clock-container {
	border-radius: 5px;
	display: flex;
	padding-left: 5px;
	padding-right: 5px;
}

.clock-col {
	text-align: center;
	min-width: 20px;
	margin:auto;
	position: relative;
}

.clock-connector p{
	font-size: 20px; 
	margin: auto !important;
	position: relative;
	top: -2px;
	text-transform: uppercase;
	margin-top: -2px;
	color: #fff;
}

.clock-timer:before {
	color: #fff;
	text-shadow: 1px 1px 2px #442e02;
	font-size: 23px;
	text-decoration: underline;
	text-transform: uppercase;
}

.clock-label {
	color: #fff;
	text-transform: uppercase;
	font-size: 18px;
	margin-top: 10px;
}

#btn_download {
	color: #dbff59;
	border-bottom: 1px solid #dbff59;
	padding-bottom: 2px;
}

.span_server_status{
	/* background: #f5f5f5; */
	background: rgba(16, 68, 148, 0.7);
	padding: 1px;
	border-radius: 3px;
	text-align: center;
	display: block;
}
/* end clock */

.parent_gold_circle {
	position: relative;
	width: 65px;
	height: 64px;
	overflow: hidden;
}

.parent_gold_circle .child_gold_circle {
	position: absolute;
	width: 65px;
	height: 64px;
	z-index: 6;
}

.parent_gold_circle .child_gold_circle .img_gold_circle {
	position: absolute;
	width: 64px;
	height: 64px;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%) scale(0.75);
	display: flex;
	align-items: center;
	justify-content: center;
}

.parent_gold_circle .child_gold_circle .img_gold_circle:hover:after,
.parent_gold_circle .child_gold_circle .img_gold_circle.on:after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 92px;
	height: 85px; 
	transform: translate(-50%, -50%) scale(0.5);
	-webkit-animation: runCircle 5s infinite linear reverse;
	animation: runCircle 5s infinite linear reverse;
} 


.white-text{
	color: #fff !important;
}
.page-footer{
	position: absolute;
	bottom: 0;
	width:100%;
	display: block !important;
	z-index: 2;
	background-color: rgba(243, 228, 253, 0.65);
	box-shadow: 0 1px 5px rgba(0,0,0,0.2) !important;
	padding: 7px;
}
.parent_discord{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: end;
	position: fixed;
	bottom: 15px;
	right: 15px;
	z-index: 1;
	moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
	z-index: 100;
}

.btn_open_discord{
	outline:0;   
	border:none;  
	background-color:black;
	padding:2px;
	border-radius:5px;
	box-shadow: -3px 3px #7289da, -2px 2px #7289da, -1px 1px #7289da;
	border: 1px solid #7289da;
	moz-transition: all .2s ease-out;
	-o-transition: all .2s ease-out;
	-webkit-transition: all .2s ease-out;
	transition: all .2s ease-out;
}
.btn_open_discord:active{
	box-shadow:-1px 1px #7289da, -1px 1px #7289da, -1px 1px #7289da;
	margin-right: 2px;
	margin-bottom: -2px;
}
.bottom_background{
    display: none;
}

/*** Social Icons ***/
.social-icons {
    padding: 0;
    margin: 0;
}

.social-icons:before,
.social-icons:after {
    content: " ";
    display: table;
}
.social-icons:after {
    clear: both;
}

.social-icons li {
    float: left;
    display: inline;
    list-style: none;
    margin-right: 5px;
    margin-bottom: 5px;
    text-indent: -9999px;
}
.social-icons li > a {
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px;
    width: 28px;
    height: 28px;
    display: block;
    background-position: 0 0;
    background-repeat: no-repeat;
    transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
}
.social-icons li:hover > a {
    background-position: 0 -38px;
}
.social-icons li .amazon {
    background: url(../img/social/amazon.png) no-repeat;
}
.social-icons li .behance {
    background: url(../img/social/behance.png) no-repeat;
}
.social-icons li .blogger {
    background: url(../img/social/blogger.png) no-repeat;
}
.social-icons li .deviantart {
    background: url(../img/social/deviantart.png) no-repeat;
}
.social-icons li .dribbble {
    background: url(../img/social/dribbble.png) no-repeat;
}
.social-icons li .dropbox {
    background: url(../img/social/dropbox.png) no-repeat;
}
.social-icons li .evernote {
    background: url(../img/social/evernote.png) no-repeat;
}
.social-icons li .facebook {
    background: url(../img/social/facebook.png) no-repeat;
}
.social-icons li .forrst {
    background: url(../img/social/forrst.png) no-repeat;
}
.social-icons li .github {
    background: url(../img/social/github.png) no-repeat;
}
.social-icons li .googleplus {
    background: url(../img/social/googleplus.png) no-repeat;
}
.social-icons li .jolicloud {
    background: url(../img/social/jolicloud.png) no-repeat;
}
.social-icons li .last-fm {
    background: url(../img/social/last-fm.png) no-repeat;
}
.social-icons li .linkedin {
    background: url(../img/social/linkedin.png) no-repeat;
}
.social-icons li .picasa {
    background: url(../img/social/picasa.png) no-repeat;
}
.social-icons li .pintrest {
    background: url(../img/social/pintrest.png) no-repeat;
}
.social-icons li .rss {
    background: url(../img/social/rss.png) no-repeat;
}
.social-icons li .skype {
    background: url(../img/social/skype.png) no-repeat;
}
.social-icons li .spotify {
    background: url(../img/social/spotify.png) no-repeat;
}
.social-icons li .stumbleupon {
    background: url(../img/social/stumbleupon.png) no-repeat;
}
.social-icons li .tumblr {
    background: url(../img/social/tumblr.png) no-repeat;
}
.social-icons li .twitter {
    background: url(../img/social/twitter.png) no-repeat;
}
.social-icons li .vimeo {
    background: url(../img/social/vimeo.png) no-repeat;
}
.social-icons li .wordpress {
    background: url(../img/social/wordpress.png) no-repeat;
}
.social-icons li .xing {
    background: url(../img/social/xing.png) no-repeat;
}
.social-icons li .yahoo {
    background: url(../img/social/yahoo.png) no-repeat;
}
.social-icons li .youtube {
    background: url(../img/social/youtube.png) no-repeat;
}
.social-icons li .vk {
    background: url(../img/social/vk.png) no-repeat;
}
.social-icons li .instagram {
    background: url(../img/social/instagram.png) no-repeat;
}
.social-icons li .reddit {
    background: url(../img/social/reddit.png) no-repeat;
}
.social-icons li .aboutme {
    background: url(../img/social/aboutme.png) no-repeat;
}
.social-icons li .flickr {
    background: url(../img/social/flickr.png) no-repeat;
}
.social-icons li .foursquare {
    background: url(../img/social/foursquare.png) no-repeat;
}
.social-icons li .gravatar {
    background: url(../img/social/gravatar.png) no-repeat;
}
.social-icons li .klout {
    background: url(../img/social/klout.png) no-repeat;
}
.social-icons li .myspace {
    background: url(../img/social/myspace.png) no-repeat;
}
.social-icons li .quora {
    background: url(../img/social/quora.png) no-repeat;
}
.social-icons.social-icons-color > li > a {
    opacity: 0.7;
    background-position: 0 -38px !important;
}
.social-icons.social-icons-color > li > a:hover {
    opacity: 1;
}
.social-icons.social-icons-circle > li > a {
    border-radius: 25px !important;
}

/***
Inline Social Icons
***/
.social-icon {
    display: inline-block !important;
    width: 28px;
    height: 28px;
    background-position: 0 0;
    background-repeat: no-repeat;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px;
    transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
}
.social-icon.social-icon-circle {
    border-radius: 25px !important;
}

.social-icon.amazon {
    background: url(../img/social/amazon.png) no-repeat;
}
.social-icon.behance {
    background: url(../img/social/behance.png) no-repeat;
}
.social-icon.blogger {
    background: url(../img/social/blogger.png) no-repeat;
}
.social-icon.deviantart {
    background: url(../img/social/deviantart.png) no-repeat;
}
.social-icon.dribbble {
    background: url(../img/social/dribbble.png) no-repeat;
}
.social-icon.dropbox {
    background: url(../img/social/dropbox.png) no-repeat;
}
.social-icon.evernote {
    background: url(../img/social/evernote.png) no-repeat;
}
.social-icon.facebook {
    background: url(../img/social/facebook.png) no-repeat;
}
.social-icon.forrst {
    background: url(../img/social/forrst.png) no-repeat;
}
.social-icon.github {
    background: url(../img/social/github.png) no-repeat;
}
.social-icon.googleplus {
    background: url(../img/social/googleplus.png) no-repeat;
}
.social-icon.jolicloud {
    background: url(../img/social/jolicloud.png) no-repeat;
}
.social-icon.last-fm {
    background: url(../img/social/last-fm.png) no-repeat;
}
.social-icon.linkedin {
    background: url(../img/social/linkedin.png) no-repeat;
}
.social-icon.picasa {
    background: url(../img/social/picasa.png) no-repeat;
}
.social-icon.pintrest {
    background: url(../img/social/pintrest.png) no-repeat;
}
.social-icon.rss {
    background: url(../img/social/rss.png) no-repeat;
}
.social-icon.skype {
    background: url(../img/social/skype.png) no-repeat;
}
.social-icon.spotify {
    background: url(../img/social/spotify.png) no-repeat;
}
.social-icon.stumbleupon {
    background: url(../img/social/stumbleupon.png) no-repeat;
}
.social-icon.tumblr {
    background: url(../img/social/tumblr.png) no-repeat;
}
.social-icon.twitter {
    background: url(../img/social/twitter.png) no-repeat;
}
.social-icon.vimeo {
    background: url(../img/social/vimeo.png) no-repeat;
}
.social-icon.wordpress {
    background: url(../img/social/wordpress.png) no-repeat;
}
.social-icon.xing {
    background: url(../img/social/xing.png) no-repeat;
}
.social-icon.yahoo {
    background: url(../img/social/yahoo.png) no-repeat;
}
.social-icon.youtube {
    background: url(../img/social/youtube.png) no-repeat;
}
.social-icon.vk {
    background: url(../img/social/vk.png) no-repeat;
}
.social-icon.instagram {
    background: url(../img/social/instagram.png) no-repeat;
}
.social-icon.reddit {
    background: url(../img/social/reddit.png) no-repeat;
}
.social-icon.aboutme {
    background: url(../img/social/aboutme.png) no-repeat;
}
.social-icon.flickr {
    background: url(../img/social/flickr.png) no-repeat;
}
.social-icon.foursquare {
    background: url(../img/social/foursquare.png) no-repeat;
}
.social-icon.gravatar {
    background: url(../img/social/gravatar.png) no-repeat;
}
.social-icon.klout {
    background: url(../img/social/klout.png) no-repeat;
}
.social-icon.myspace {
    background: url(../img/social/myspace.png) no-repeat;
}
.social-icon.quora {
    background: url(../img/social/quora.png) no-repeat;
}
.social-icon:hover {
    background-position: 0 -38px;
}

.social-icon-color {
    opacity: 0.7;
    background-position: 0 -38px !important;
}
.social-icon-color:hover {
    opacity: 1;
}

.parent_copyright .icon_sosmed{
	display: flex;
	justify-content: center;
	align-items: center;
}
.parent_copyright .icon_sosmed div{
	margin-top: 5px;
	margin-bottom: 5px;
	margin-left: 7px;
	margin-right: 7px;
	transition: 0.3s;
}
.parent_copyright .icon_sosmed div:hover{
	opacity: 0.5;
}

div.copyright{
	text-align: center
} 
div.copyright,
div.parent-social-icons{
	top: 0;
} 

div.copyright h5{
	color: #000000;
	margin-bottom: .3rem;
	font-size: 1.2rem;
}
ul.social-icons li{
	margin-bottom: 0;
}
ul.social-icons li:nth-last-child(1) {
	margin-right:0;
}

/* start button  */

/* -- btn one -- */ 
.btn-one {
	border: none;
	border-radius: 4px;
	text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.48);
	overflow: hidden;
	padding: 5px 5px 5px 5px;
	font-size: 20px;
	position: relative;
	color: white;
	outline: none;
	cursor: pointer;
	width: 100%;
	-webkit-transition: background-position .7s,box-shadow .4s;
	transition: background-position .7s,box-shadow .4s;
	background-size: 110%;
	font-family: 'Oswald', sans-serif;
	height: 100%;
}
.btn-one:not(.btn-darker){  
	box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.16) inset, 0px 0px 5px 0px #33E7EA;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#338CEA), to(rgba(161, 245, 245, 0.24))), url("#");
	background-image: linear-gradient(to bottom, #338CEA, rgba(161, 245, 245, 0.24)), url("#"); 
}
.btn-one.btn-darker { 
	box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.16) inset, 0px 0px 5px 0px #33E7EA;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#338CEA), to(rgba(18, 32, 241, 0.35))), url("#");
	background-image: linear-gradient(to bottom, #338CEA, rgba(18, 32, 241, 0.35)), url("#");
}
.btn-one:hover {
  	background-position: 0% 30%;
  	box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.16) inset, 0px 0px 20px 0px #33E7EA;
}
.btn-one b {
  	color: #1CF4FF;
	font-weight: 700;
} 

.btn-two {
	border: none;
	border-radius: 4px;
	text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.48);
	overflow: hidden;
	padding: 5px 5px 5px 5px;
	font-size: 20px;
	position: relative;
	color: white;
	outline: none;
	cursor: pointer;
	width: 100%;
	-webkit-transition: background-position .7s,box-shadow .4s;
	transition: background-position .7s,box-shadow .4s;
	background-size: 110%;
	font-family: 'Oswald', sans-serif;
	height: 100%;
	
	box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.16) inset, 0px 0px 5px 0px #ed6ea0;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#f7186a), to(rgba(245, 161, 161, 0.24))), url("#");
	background-image: linear-gradient(to bottom, #f7186a, rgba(245, 161, 161, 0.24)), url("#"); 
} 

.btn-two:hover {
  	background-position: 0% 30%;
  	box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.16) inset, 0px 0px 20px 0px #ed6ea0;
}

.btn-two b {
  	color: #1CF4FF;
	font-weight: 700;
} 

.btn-three {
	border: none;
	border-radius: 4px;
	text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.48);
	overflow: hidden;
	padding: 5px 5px 5px 5px;
	font-size: 20px;
	position: relative;
	color: white;
	outline: none;
	cursor: pointer;
	width: 100%;
	-webkit-transition: background-position .7s,box-shadow .4s;
	transition: background-position .7s,box-shadow .4s;
	background-size: 110%;
	font-family: 'Oswald', sans-serif;
	height: 100%;
	
	box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.16) inset, 0px 0px 5px 0px #7eed6e;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#18f75a), to(rgba(199, 245, 161, 0.24))), url("#");
	background-image: linear-gradient(to bottom, #18f75a, rgba(199, 245, 161, 0.24)), url("#"); 
} 
.btn-three:hover {
  	background-position: 0% 30%;
  	box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.16) inset, 0px 0px 20px 0px #7eed6e;
}
.btn-three b {
  	color: #1CF4FF;
	font-weight: 700;
} 

.btn-four {
	border: none;
	border-radius: 4px;
	text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.48);
	overflow: hidden;
	padding: 5px 5px 5px 5px;
	font-size: 20px;
	position: relative;
	color: white;
	outline: none;
	cursor: pointer;
	width: 100%;
	-webkit-transition: background-position .7s,box-shadow .4s;
	transition: background-position .7s,box-shadow .4s;
	background-size: 110%;
	font-family: 'Oswald', sans-serif;
	height: 100%;
	
	box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.16) inset, 0px 0px 5px 0px #edc76e;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#f78b18), to(rgba(245, 161, 161, 0.24))), url("#");
	background-image: linear-gradient(to bottom, #f78b18, rgba(245, 161, 161, 0.24)), url("#"); 
} 
.btn-four:hover {
  	background-position: 0% 30%;
  	box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.16) inset, 0px 0px 20px 0px #edc76e;
}
.btn-four b {
  	color: #1CF4FF;
	font-weight: 700;
} 

/* -- btn one -- */

.buttons {
	margin: 10%;
	text-align: center;
}

.btn-black{
	background-color: #353333 !important;
}
.btn-hover {
	width: 100%;
    font-size: 18px !important;
    font-weight: 600;
    color: #fff !important;
    cursor: pointer;
    height: 35px;
    text-align: center;
    border: none;
    background-size: 300% 100%;
    border-radius: 50px;
    moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}

.btn-hover:hover {
	background-position: 100% 0;
	moz-transition: all .4s ease-in-out;
	-o-transition: all .4s ease-in-out;
	-webkit-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out;
}

.btn-hover:focus {
	outline: none;
}

.btn-hover.color-1 {
	background-image: linear-gradient(to right, #25aae1, #40e495, #30dd8a, #2bb673);
	box-shadow: 0 4px 15px 0 rgba(49, 196, 190, 0.75);
}

.btn-hover.color-2 {
	background-image: linear-gradient(to right, #f5ce62, #e43603, #fa7199, #e85a19);
	box-shadow: 0 4px 15px 0 rgba(229, 66, 10, 0.75);
}

.btn-hover.color-3 {
	background-image: linear-gradient(to right, #667eea, #764ba2, #6B8DD6, #8E37D7);
	box-shadow: 0 4px 15px 0 rgba(116, 79, 168, 0.75);
}

.btn-hover.color-orange {
	background-image: linear-gradient(to right, #fc6076, #ff9a44, #ef9d43, #e75516);
	box-shadow: 0 4px 15px 0 rgba(252, 104, 110, 0.75);
}

.btn-hover.color-green {
	background-image: linear-gradient(to right, #0ba360, #3cba92, #30dd8a, #2bb673);
	box-shadow: 0 4px 15px 0 rgba(23, 168, 108, 0.75);
}

.btn-hover.color-6 {
	background-image: linear-gradient(to right, #009245, #FCEE21, #00A8C5, #D9E021);
	box-shadow: 0 4px 15px 0 rgba(83, 176, 57, 0.75);
}

.btn-hover.color-7 {
	background-image: linear-gradient(to right, #6253e1, #852D91, #A3A1FF, #F24645);
	box-shadow: 0 4px 15px 0 rgba(126, 52, 161, 0.75);
}

.btn-hover.color-black {
	background-image: linear-gradient(to right, #29323c, #485563, #2b5876, #4e4376);
	box-shadow: 0 4px 15px 0 rgba(45, 54, 65, 0.75);
}

.btn-hover.color-blue {
	background-image: linear-gradient(to right, #25aae1, #4481eb, #04befe, #3f86ed);
	box-shadow: 0 4px 15px 0 rgba(65, 132, 234, 0.75);
}

.btn-hover.color-red {
	background-image: linear-gradient(to right, #ed6ea0, #ec8c69, #f7186a, #FBB03B);
	box-shadow: 0 4px 15px 0 rgba(236, 116, 149, 0.75);
}

.btn-hover.color-darkred {
	background-image: linear-gradient(to right, #eb3941, #f15e64, #e14e53, #e2373f);
	box-shadow: 0 5px 15px rgba(242, 97, 103, .4);
}

/* end button  */

/* start header title */ 
.content_header_title h2 {
	font-size: 21px;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.box_header_title {
	position: relative;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%); 
	background: #451111a6;
	box-sizing: border-box;
	overflow: hidden;
	box-shadow: 0 20px 50px rgb(23, 32, 90);
	border: 2px solid #ad2a8c;
	color: white;
	padding: 8px;
}

.box_header_title:before {
	content: '';
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, 0.1);
	transition: 0.5s;
	pointer-events: none;
}

.box_header_title:hover:before {
	transform: skewX(-5deg);
}

.box_header_title .content_header_title {
	position: relative; 
	border: 1px solid #979eb0;
	padding: 7px;
	text-align: center;
	box-shadow: 0 5px 10px rgba(9, 0, 0, 0.5);
}

.box_header_title span {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
	box-sizing: border-box;
}

.box_header_title span:nth-child(1) {
	transform: rotate(0deg);
}

.box_header_title span:nth-child(2) {
	transform: rotate(180deg);
} 

.box_header_title span:before {
	content: '';
	position: absolute;
	width: 100%;
	height: 2px;
	background: #df7250;
	animation: animate_header_title 4s linear infinite;
}

@keyframes animate_header_title {
	0% {
		transform: scaleX(0);
		transform-origin: left;
	}
	50% {
		transform: scaleX(1);
		transform-origin: left;
	}
	50.1% {
		transform: scaleX(1);
		transform-origin: right;
	}
	100% {
		transform: scaleX(0);
		transform-origin: right;
	}
}

/* end header title */

.parent_banner{ 
	
	mask-image: -webkit-gradient(linear, center bottom, center top, color-stop(0.00, rgba(0,0,0,0)), color-stop(0.17, rgba(0,0,0,1)));
	-webkit-mask-image: -webkit-gradient(linear, center bottom, center top, color-stop(0.00, rgba(0,0,0,0)), color-stop(0.17, rgba(0,0,0,1)));

    /* background: url('../img/top_banner_dark.png'); */
	transition: background-image 0.3s ease-in-out;
    height:700px;
    width:100%;
    background-position:center !important;
    background-size:cover;
    background-clip: border-box;
    background-origin: border-box;
    background-position: 0 -350px;
    background-repeat: no-repeat;
    position: relative;
    padding: 0;
    z-index: 1;
}
.parent_banner img.image_logo_char{
    position: absolute;
    width: 400px;
    right: 0;
    bottom: 25px;
}
.parent_banner img.image_logo_mobile{
    display: none;
}
.parent_banner .clouds{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.parent_banner .clouds img{
    position: absolute;
    bottom: 0;
    max-width: 100%;
    animation: cloudAnimate calc(8s * var(--i)) linear infinite;
}
#parent_server_info .list-group-item{
	font-size: 1.2rem;
    padding: 0rem 0.5rem;
    background-color: transparent !important;
}
.dwn-btn{
	padding: 12px 0px !important;
}
#parent_server_info{
    z-index: -1;
	background-size: 110px auto;
	min-height: 70px;
	background-position: bottom right;
	background-repeat: no-repeat;
    background: rgba(4, 31, 71, 0.85) !important;
    backdrop-filter: blur(5px);
    border: 1px solid #a5b5e3 !important;
}

#parent_server_info ul li{
	background-color: transparent !important;
}

.server_info_location {
    background: rgba(16, 26, 75, 0.8) !important;
    backdrop-filter: blur(10px);
    border: 1px solid #a5b5e3 !important;
    text-align: left;
    color:#fff;
    padding-left: 4px;
    padding-right: 4px;
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    /* justify-content: center; */
    margin-bottom: 15px;
}

.server_info_items {
    background: rgba(16, 26, 75, 0.8) !important;
    backdrop-filter: blur(10px);
    border: 1px solid #a5b5e3 !important;
    text-align: left;
    color:#fff;
    margin-left: 2px;
    margin-right: 2px;
    padding-left: 4px !important;
    padding-right: 4px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    border-radius: 7px;
    display: flex;
    align-items: center;
    /* justify-content: center; */
    margin-bottom: 10px;
}

#parent_top_donation {
    background: rgba(4, 31, 71, 0.85) !important;
    backdrop-filter: blur(5px);
    border: 1px solid #a5b5e3 !important;
}

.card_side{
	z-index: 1;
	position: relative;
	/* margin-bottom: 20px; */
	margin-top: 1px; 
}
.card_side .face_side{
	width: 100%;
	height: 60px;
	transition:.4s; 
}

.card_side .card_side_img{
	position: relative;
	z-index: 1;
	/* margin-bottom: 15px; */
}

.card_side .card_side_img a{
	position: relative;
	text-align: center;
	display: flex;
	justify-content:center;
	align-items:center; 
}

.card_side .card_side_img a img{
	width: 250px;
}
.card_side .card_side_img a .img_play_in,
.card_side .card_side_img a:hover .img_play_out{
	display: none;
}
.card_side .card_side_img a .img_play_out, 
.card_side .card_side_img a:hover .img_play_in{
	display: block;
}

.card_side .card_side_img a span{
	position: absolute;
	font-size: 22px;
	font-weight: bold;
	color: #ede9e9;
}

.card_side .face_side.face_side1{
	position: relative;
	background: #333;
	display: flex;
	justify-content: center;
	align-content:center;
	align-items: center;
	z-index: 1;
	margin-bottom:20px;
	cursor: pointer;
	border-radius: 15px !important;
	
	background-color: #6a93d0;
	border: 2px solid transparent;
	border-color: #5b56c1;
	box-shadow:
		inset 0 0 20px whitesmoke,
		inset 10px 0 15px #0087ff,
		inset -10px 0 15px #0ff,
		inset 10px 0 30px #f0f,
		inset -10px 0 30px #0ff,
		0 0 35px #fff,
		-5px 0 50px #3800ff,
		5px 0 20px #0ff;
	
	background-image: -webkit-linear-gradient(top, #589bff 0%, #6c6ac0 100%);
	background-image: -o-linear-gradient(top, #589bff 0%, #6c6ac0 100%);
	background-image: -webkit-gradient(linear, left top, left bottom, from(#589bff), to(#6c6ac0));
	background-image: linear-gradient(to bottom, #589bff 0%, #6c6ac0 100%);
}
.card_side .face_side.face_side1:hover{
	box-shadow: 
		inset 0 0 20px whitesmoke,
		inset 10px 0 15px #0ff,
		inset -10px 0 15px #0ff,
		inset 10px 0 30px #0cbe5a,
		inset -10px 0 30px #0ff,
		0 0 35px #fff,
		-5px 0 50px #09c226,
		5px 0 20px #0ff; 
}

.card_side .face_side.face_side1 .content{
	transition:  0.5s;
	text-align: center; 

}
.card_side .face_side.face_side1:hover .content{

}
.card_side .face_side.face_side1 .content i{
	font-size: 3em;
	color: white;
	display: inline-block; 
}
.card_side .face_side.face_side1 .content h3{
	font-size: 1.2em;
	color: white;
	text-align: center; 
	margin:0px;
}
.card_side .face_side.face_side1 .content a{
	transition: .5s;
}

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

img.image_logo{
    width: 350px; 
}

.bg-blue-gradient {
    background-image: -webkit-linear-gradient(to right, #ca0000, #ca0000) !important; /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    background-image: linear-gradient(to right, #ca0000, #ca0000) !important; /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    box-shadow: 0 0.150rem 0.50rem rgba(0,0,0,.2) !important;
}
.parent_nav{
    background-color: transparent !important;
    border:none !important;
}
.parent_img_fly_city {
	/* min-height: 160px; */
	top: 40px;
}
.main_left_section{
    /* background: linear-gradient(45deg, rgba(184, 134, 11, 0.1), rgba(255, 215, 0, 0.05)); */
    background: rgba(2, 18, 77, 0.5) !important;
    backdrop-filter: blur(15px);
    position: relative;
    /* margin-top: -305px; */
    padding: 7px;
    border-radius: 20px;
    border: 1px solid #a5b5e3; 
}
.main_right_section {
    background: rgba(2, 18, 77, 0.5) !important;
    backdrop-filter: blur(15px);
    border-radius: 20px;
    padding: 20px;
    border: 1px solid #a5b5e3; 
    color: #fff;
    /* margin-bottom: 20px; */
    position: relative;
    /* margin-top: -275px; */
}
.main_child_left_section{
	position: relative;
	z-index: 2;
    /* min-height: 215px; */
} 
 

#res_payment_method{
	text-align: center;
}

#res_payment_method .child_payment_method{
	/* background-color: #fafafa; */
	color: #000;
	border: 2px solid #a5b5e3;
	border-radius: 3px;
	box-shadow: 0 2px 5px 1px rgba(14, 43, 69, 0.75);
	text-align: center;
	margin-bottom: 5px;
}

#res_payment_method .child_payment_method label{
	cursor: pointer;
	height: 100%;
	width: 100%;
	margin: 0px;
	display: flex;
  	flex-direction: column;
	padding: 3px;
}

.parent_rules_topup, 
.parent_price_list, 
.parent_payment_method, 
.parent_btn_topup, 
#res_payment_method,
#input_amount_price,
#input_amount_price_baht {
    transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
	display: none;
}

#input_voucher_tmpay {
	max-width: 300px;
	margin: auto;
	text-align: center;
}

/* Fix for Chrome select dropdown appearance */
#input_amount_price,
#input_amount_price_baht,
select.form-control {
	-webkit-appearance: menulist;
	-moz-appearance: menulist;
	appearance: menulist;
	background-color: #fff !important;
	color: #000 !important;
}

#input_amount_price option,
#input_amount_price_baht option,
select.form-control option {
	background-color: #fff !important;
	color: #000 !important;
	padding: 8px !important;
}

.option-input {
	font-family: Roboto, sans-serif;
	-webkit-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
	-o-appearance: none;
	appearance: none;
	position: relative;
	top: 13.33333px;
	right: 0;
	bottom: 0;
	left: 0;
	height: 40px;
	width: 40px;
	transition: all .15s ease-out 0s;
	background: #cbd1d8;
	border: none;
	color: #fff;
	cursor: pointer;
	display: inline-block;
	margin-right: .5rem;
	outline: 0;
	position: relative;
	z-index: 990
}

.option-input:hover {
	background: #9faab7
}

.option-input:checked {
	background: #40e0d0
}

.option-input:checked::before {
	height: 40px;
	width: 40px;
	position: absolute;
	content: '✔';
	display: inline-block;
	font-size: 26.66667px;
	text-align: center;
	line-height: 40px
}

.option-input:checked::after {
	-webkit-animation: click-wave .65s;
	-moz-animation: click-wave .65s;
	animation: click-wave .65s;
	background: #40e0d0;
	content: '';
	display: block;
	position: relative;
	z-index: 100
}

.option-input.radio {
	border-radius: 50%
}

.option-input.radio::after {
	border-radius: 50%
}

.img-ras {
	max-height: 200px !important
}

.opt-box {
    margin-left: 5px;
    font-size: 17px;
    color: #33ff33;
    background-color: rgb(0, 0, 0, 0.7);
    -webkit-border-radius: 4px;
    border-radius: 4px;
    padding: 10px;
}

.mini-notice {
    width: 114px;
    height: 120px;
    margin: -3px auto 12px auto;
}

.bg-pink {
    background-color: #E91E63 !important;
} 

.bg-purple {
    background-image: linear-gradient(to right, #ff00ff, #ea00f9, #d500f2, #c000eb, #ab00e4, #8741f3, #5b5bfc, #006cff, #0090ff, #00adff, #00c7ff, #00deff);
}

.disabled {
    pointer-events: none;
    cursor: default
}

.pointer {
    cursor: pointer;
}

tbody.small td {
    padding: 5px !important;
    font-size: 16px
}

.table-bordered td,
.table-bordered th {
    border: 1px solid #565757 !important
}

.ui-autocomplete {
    position: absolute;
    z-index: 2147483647;
    cursor: default;
    padding: 0;
    margin-top: 2px;
    list-style: none;
    background-color: #fff;
    border: 1px solid #ccc;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
    box-shadow: 0 5px 10px rgba(0, 0, 0, .2)
}

.ui-autocomplete>li {
    padding: 3px 10px
}

.ui-autocomplete>li.ui-state-focus {
    background-color: #ddd
}

.ui-helper-hidden-accessible {
    display: none
}

.ui-autocomplete {
    height: 250px;
    overflow-y: hidden;
    overflow-x: hidden;
}

/* Navigation */
.list_none,
nav.navigation ol,
nav.navigation ul {
    list-style: none;
    margin: 0;
    padding: 0
}

nav.navigation {
    background-color: #0f0e0e;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 100%;
    height: 50px;
    position: fixed;
    bottom: 0;
    z-index: 99
}

nav.navigation ul {
    margin: auto;
    height: 100%
}

nav.navigation ul li {
    height: 100%;
    float: left
}

nav.navigation ul li:hover a {
    color: #fff
}

nav.navigation ul li a {
    font-family: proxima-nova_bold, sans-serif;
    text-transform: uppercase;
    color: #a6a6a6;
    height: 100%;
    display: inline-block;
    width: 100%;
    margin: 10px 0 10px 0 !important;
    text-align: center;
    font-size: 16px;
    line-height: 20px;
    font-weight: 450
}

.list_mobile_menu {
	position: fixed; 
	z-index: 1111;
	top: 5px;
	left: 50% !important;
	transform: translateX(-50%);
	display: table-row;
}

.list_mobile_menu.open_mobile_menu {
	display: block !important;
}

.list_mobile_menu li {
	cursor: pointer;
	display: table-cell;
	vertical-align: middle;
}

.list_mobile_menu .img_mobile_menu_left {
	-webkit-filter: drop-shadow(-5px 3px 4px rgba(0, 0, 0, 0.4));
	filter: drop-shadow(-5px 3px 4px rgba(0, 0, 0, 0.4));
}

.list_mobile_menu .img_mobile_menu_right {
	-webkit-filter: drop-shadow(5px 3px 4px rgba(0, 0, 0, 0.4));
	filter: drop-shadow(5px 3px 4px rgba(0, 0, 0, 0.4));
}

.list_mobile_menu .list_icon_menu {
	background: #3dc9ef !important;
	box-shadow: 0 0.150rem 0.50rem rgba(0, 0, 0, .3) !important;
	border: 1px solid aliceblue;
}

.list_mobile_menu .list_icon_menu,
.list_mobile_menu .list_icon_menu a {
	transition: all 0.3s ease-in-out;
}

.list_mobile_menu .list_icon_menu:hover,
.list_mobile_menu .list_icon_menu:active {
	border-color: black !important;
	opacity: 0.8;
}

.list_mobile_menu .list_icon_menu:hover a,
.list_mobile_menu .list_icon_menu:active a {
	color: black !important;
	opacity: 0.8;
}

#parent_menu_mobile {
	width: 100%;
	position: fixed;
	z-index: 1112;
	top: 70px;
}

#parent_menu_mobile .col-4 {
	padding-left: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
}

#parent_menu_mobile .child_menu_mobile {
	text-align: center;
	padding: 5px;
	background-color: #3dc9ef !important;
	box-shadow: 0 0.150rem 0.50rem rgba(0, 0, 0, .3) !important;
	border: 1px solid aliceblue;
	color: white;
}

#parent_menu_mobile .child_menu_mobile a {
	display: block;
	color: #fff;
}

#parent_menu_mobile .child_menu_mobile,
#parent_menu_mobile .child_menu_mobile a {
	transition: all 0.3s ease-in-out;
}

#parent_menu_mobile .child_menu_mobile:hover,
#parent_menu_mobile .child_menu_mobile:active {
	opacity: 0.8;
}

#parent_menu_mobile .child_menu_mobile:hover a,
#parent_menu_mobile .child_menu_mobile:active a {
	opacity: 0.8;
}

#btn_open_mobile_menu {
	width: 36px;
	height: 35px;
	display: block;
	color: #fff;
}

.scroll-to-top {
	z-index: 1000;
	background-color: var(--primary-color) !important;
	border-color: aliceblue !important;
	border-width: 2px;
	cursor: pointer;
	position: fixed;
	bottom: 20px;
	right: 20px;
}

.parent_server_hot_news .parent_img_article_news_event {
	padding: 5px;
	/* background: #267ad5; */
	padding-bottom: 10px;
	padding-top: 10px;
	text-align: center;

	align-items: center;
	justify-content: center;
	display: flex;
	height: 100%;
}

.parent_server_hot_news .img_article_news_event {
	max-width: 150px;
}

#parent_news_table,
#parent_events_table {
	height: 648px;
	overflow: auto;
}

/* start btn main */
.btn_main {
	text-align: center;
	text-decoration: none;
	width: 100%;
	height: 50px;
	font-size: 20px;
	font-weight: 700;
	line-height: 50px;
	border-radius: 8px;
	outline: none;
	display: block;
	position: relative;
	overflow: hidden;
	cursor: pointer;
	transition: all .25s ease;
	letter-spacing: 1px;

	color: #fff !important;
	text-shadow: 0 1px 3px rgba(0,0,0,.35);

	/* NEW */
	background: linear-gradient(
		90deg,
		#7B2CEB 0%,
		#B54CFF 50%,
		#7430E6 100%
	);

	border: 1px solid rgba(115, 150, 255, .9);

	box-shadow:
		inset 0 1px 0 rgba(255,255,255,.12),
		0 0 12px rgba(110,70,255,.25),
		0 4px 10px rgba(0,0,0,.18);
}

.btn_main:before {
	content: '';
	position: absolute;
	top: 0;
	left: -120%;
	width: 60%;
	height: 100%;

	background: linear-gradient(
		90deg,
		transparent,
		rgba(255,255,255,.28),
		transparent
	);

	transform: skewX(-25deg);
	transition: left .6s ease;
}

.btn_main:hover:before {
	left: 160%;
}

.btn_main:hover {
	transform: translateY(-1px);
	filter: brightness(1.08);

	box-shadow:
		inset 0 1px 0 rgba(255,255,255,.16),
		0 0 18px rgba(140,90,255,.45),
		0 6px 14px rgba(0,0,0,.22);
}

.btn_main:active {
	transform: translateY(1px);

	box-shadow:
		inset 0 2px 4px rgba(0,0,0,.18),
		0 2px 8px rgba(0,0,0,.2);
}

.btn_main.btn_disabled {
	background: linear-gradient(90deg,#777,#555);
	border: 1px solid #666;
	cursor: not-allowed;
	opacity: .6;
}

.btn_main.btn_disabled:hover {
	transform: none;
	filter: none;
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,.08),
		0 2px 8px rgba(0,0,0,.15);
}

/* .btn_main.btn_red {
	background: linear-gradient(135deg, #ff4757 0%, #e84118 100%);
}

.btn_main.btn_blue {
	background: linear-gradient(135deg, #5fb3e8 0%, #3a8bc2 100%);
}

.btn_main.btn_green {
	background: linear-gradient(135deg, #7ed56f 0%, #55b848 100%);
} */

/* end btn main */

@media (max-width: 360px) {
	#parent_menu_mobile .col-4 {
		-ms-flex: 0 0 41.666667%;
		flex: 0 0 41.666667%;
		max-width: 41.666667%;
		margin-left: auto;
		margin-right: auto;
	}
}

@media (max-width: 825px) {
    .clock-container {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .clock-col+.clock-col {
        margin-top: 20px;
    }

    .clock-col:before,
    .clock-col:after {
        display: none !important;
    }
}

@media (max-width: 520px) {
    .clock-container {
        flex-direction: column;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .clock-container .clock-connector {
        text-align: center;
    }
}

@media (max-width: 1560px) {
	.bottom_background{
		background-position: 0 -170px;
	}
}
@media (max-width: 1460px) {
	.bottom_background{
		background-position: 0 -130px;
	}
}
@media (max-width: 1375px) {
	.bottom_background{
		background-position: bottom;
	}
}
@media (max-width: 1290px) {
	.parent_banner{ 
        height:400px; 
        background-position: 0 -270px;
    }
    .parent_banner img.image_logo_char{ 
        width: 300px; 
        bottom: 15px;
    }
}
@media (max-width: 1199px) {
	.parent_banner{ 
        height:400px; 
        background-position: 0 -270px;
    }
    .parent_banner img.image_logo_char{ 
        width: 300px; 
        bottom: 15px;
    }
    .parent_form_login{
        margin-top: 50px !important;
    }
	.main_left_section .card_side .card_side_img a img{
		width: 300px;
	}
    .main_left_section{
        margin-top: -172px;
    }
	.main_left_section #parent_form_login{
		margin-top: 5px !important;
	} 
	.parent_nav_clock_top{
		display: none;
	}
	.parent_nav_clock_bottom{
		display: none;
	}
}
@media (max-width: 1015px) {
    .parent_banner{ 
        background-position: bottom; 
    }
}
@media (max-width: 991px) {
	.main_content{ 
        max-width: 100% !important; 
    }
    .main_left_section{
        top: 0;
        margin-top: 15px;
    }
    .main_child_left_section{
        min-height: 0px;
    }
    .container,
	.page-footer .container{
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
    }
	.parent_copyright{
		padding-left:15px !important;
	}
	.parent_social{
		padding-right:15px !important;
	}
    .main_navbar{
        width: 100% !important;
    }

	.main_left_section .parent_img_fly_city{
		display: none;
	}
	.main_left_section .card_side{
		margin-top: -15px;
	}
	#parent_server_info .d-block h3 {
		font-size: 1.35rem;
	}
	#parent_rank_cs{
		margin-bottom: 0px !important;
	}
}

@media (max-width: 950px) { 
	.parent_social{
		display:none;
	}
	
	.parent_left_main_content {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 0;
        padding-top: 0 !important;
	}
    .main_left_section{
        display: flex !important;
        margin-top: 0 !important;
        flex-direction: column;
    }
    #parent_form_login{
        order: 1;
        display: none;
    }
    #parent_server_info{
        order: 2;
    }
    #parent_hot_items{
        order: 3;
    }
    #parent_top_donation{
        order: 4;
    }
    #parent_rank_lvl{
        order: 4;
    }
	#parent_rank_cs{
        order: 5;
    }
	.parent_right_main_content {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
	}
    .main_child_left_section{
        display: none;
    }
    .parent_form_login{
        margin-top: 30px !important;
    }
}

@media (max-width: 921px) {
	.parent_nav ul.navbar-nav .nav-item-center h5{
		font-size: 1.2rem !important;
	}
	.parent_nav ul.navbar-nav .nav-item-center .nav-center-count{
		width: 70px;
		font-size: .8rem;
	}
}

@media (max-width: 767px) { 
	.parent_nav nav.navbar{
		display: none;
	} 
    .main_navbar .parent_nav{
        display: block !important; 
    }
    .main_navbar .parent_nav ul{
        display: flex !important;
        flex-direction: row;
    }
    .main_navbar .parent_nav ul li:nth-last-child(1),
    .main_navbar .parent_nav ul li:nth-last-child(3){
        display: none;
    }
	.parent_banner img.image_logo_char {
		width: 250px; 
	}

	#parent_server_info{
		height: 100%;
	}
	#parent_top_donation table.table,
	#parent_rank_lvl table.table,
	#parent_rank_cs table.table{
		display: table;
	}
	.parent_main_banner{

	}
	.parent_news_and_updates{

	}
}
@media (max-width: 690px) {
	.parent_banner img.image_logo_char {
		width: 220px; 
	}
	.parent_right_main_content .parent_server_hot_news{
		/* padding-right: 15px !important; */
		margin-bottom: .5rem;
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%;
	}
	.parent_server_hot_news .img_article_news_event{
		
	} 
}

@media (max-width: 600px) {
	.parent_banner img.image_logo_char {
        display: none;
	}
}
@media (max-width: 575px) {
	.main_content {
		/* margin-top: -10px; */
	}
}
@media (max-width: 360px) {
	.parent_right_main_content .card h3{
		font-size: 1.45rem;
	}
}

@keyframes click-wave {
	0% {
		height: 40px;
		width: 40px;
		opacity: .35;
		position: relative
	}
	100% {
		height: 200px;
		width: 200px;
		margin-left: -80px;
		margin-top: -80px;
		opacity: 0
	}
}
/*
 Parent Sidebar Form Login - Luna Theme */
.parent_sidebar_form_login.card {
	background: linear-gradient(135deg, rgba(90, 127, 216, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%) !important;
	border: 2px solid var(--primary-color) !important;
	border-radius: 15px !important;
	box-shadow: 0 8px 32px rgba(90, 127, 216, 0.3), 
				inset 0 1px 0 rgba(255, 255, 255, 0.2);
	backdrop-filter: blur(10px);
	position: relative;
	overflow: hidden;
}

.parent_sidebar_form_login::before {
	content: '';
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background: radial-gradient(circle, rgba(0, 230, 246, 0.1) 0%, transparent 70%);
	animation: loginGlow 3s ease-in-out infinite;
	pointer-events: none;
}

@keyframes loginGlow {
	0%, 100% {
		opacity: 0.5;
		transform: scale(1);
	}
	50% {
		opacity: 0.8;
		transform: scale(1.1);
	}
}

.parent_sidebar_form_login .card-body {
	background: rgba(255, 255, 255, 0.9);
	border-radius: 13px;
	position: relative;
	z-index: 1;
}

.parent_sidebar_form_login h3 {
	color: var(--primary-color) !important;
	text-shadow: 0 2px 10px rgba(90, 127, 216, 0.3);
}

.parent_sidebar_form_login .input-group-text {
	background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
	border: none;
	color: #fff;
}

.parent_sidebar_form_login .form-control {
	border: 2px solid rgba(90, 127, 216, 0.3);
	border-left: none;
	transition: all 0.3s ease;
}

.parent_sidebar_form_login .form-control:focus {
	border-color: var(--primary-color);
	box-shadow: 0 0 15px rgba(90, 127, 216, 0.3);
}


/* Luna Theme - Card Components */
.parent_hot_items.card,
.parent_leaderboard.card,
.parent_game_log.card,
.parent_box_info.card,
.parent_boss_info.card,
.parent_gallery.card,
.parent_main_banner.card,
.parent_server_hot_news {
	background: linear-gradient(135deg, rgba(90, 127, 216, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%) !important;
	border: 2px solid var(--primary-color) !important;
	border-radius: 15px !important;
	box-shadow: 0 8px 32px rgba(90, 127, 216, 0.3), 
				inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
	backdrop-filter: blur(10px);
	position: relative;
	overflow: hidden;
}

.parent_hot_items.card::before,
.parent_leaderboard.card::before,
.parent_game_log.card::before,
.parent_box_info.card::before,
.parent_boss_info.card::before,
.parent_gallery.card::before,
.parent_main_banner.card::before,
.parent_server_hot_news::before {
	content: '';
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background: radial-gradient(circle, rgba(0, 230, 246, 0.1) 0%, transparent 70%);
	animation: loginGlow 3s ease-in-out infinite;
	pointer-events: none;
	z-index: 0;
}

.parent_hot_items .card-body,
.parent_leaderboard .card-body,
.parent_game_log .card-body,
.parent_box_info .card-body,
.parent_boss_info .card-body,
.parent_gallery .card-body,
.parent_main_banner .card-body {
	background: rgba(255, 255, 255, 0.9) !important;
	border-radius: 13px !important;
	position: relative;
	z-index: 1;
}

#parent_server_info h3,
.parent_hot_items h3,
.parent_top_donation h3,
.parent_leaderboard h3,
.parent_game_log h3,
.parent_box_info h3,
.parent_boss_info h3,
.parent_gallery h3,
.parent_main_banner h3 {
	color: var(--primary-color) !important;
	text-shadow: 0 2px 10px rgba(90, 127, 216, 0.3);
}

/* Server Info Specific */
#parent_server_info .card-body {
	/* background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%) !important; */
	color: #fff !important;
}

#parent_server_info h3,
#parent_server_info .list-group-item {
	color: #fff !important;
}

/* News & Events Cards */
.parent_server_hot_news .card {
	background: rgba(255, 255, 255, 0.95) !important;
	border: 1px solid rgba(90, 127, 216, 0.3) !important;
	border-radius: 10px !important;
	transition: all 0.3s ease;
}

.parent_server_hot_news .card:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 25px rgba(90, 127, 216, 0.4) !important;
	border-color: var(--primary-color) !important;
}

.parent_server_hot_news .parent_img_article_news_event {
	background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%) !important;
}

/* Hot Items & Top Donation Specific */
#parent_hot_items.card {
	background: linear-gradient(135deg, rgba(90, 127, 216, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%) !important;
	border: 2px solid var(--primary-color) !important;
	border-radius: 15px !important;
	box-shadow: 0 8px 32px rgba(90, 127, 216, 0.3), 
				inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
	backdrop-filter: blur(10px);
	position: relative;
	overflow: hidden;
}

#parent_hot_items.card::before {
	content: '';
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background: radial-gradient(circle, rgba(0, 230, 246, 0.1) 0%, transparent 70%);
	animation: loginGlow 3s ease-in-out infinite;
	pointer-events: none;
	z-index: 0;
}

#parent_hot_items .card-body {
	background: rgba(255, 255, 255, 0.9) !important;
	border-radius: 13px !important;
	position: relative;
	z-index: 1;
}

#parent_hot_items h3 {
	color: var(--primary-color) !important;
	text-shadow: 0 2px 10px rgba(90, 127, 216, 0.3);
}

/* Item Mall, Topup & Dynamic Page Styling */
.parent_item_mall .card-body,
.parent_dynamic_page .card-body {
	background: linear-gradient(135deg, rgba(90, 127, 216, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%) !important;
	border: 2px solid var(--primary-color) !important;
	border-radius: 15px !important;
	box-shadow: 0 8px 32px rgba(90, 127, 216, 0.3), 
				inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
	backdrop-filter: blur(10px);
	position: relative;
	overflow: hidden;
}

.parent_item_mall .card-body::before,
.parent_dynamic_page .card-body::before {
	content: '';
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background: radial-gradient(circle, rgba(0, 230, 246, 0.1) 0%, transparent 70%);
	animation: loginGlow 3s ease-in-out infinite;
	pointer-events: none;
	z-index: 0;
}

.parent_item_mall .card-body > *,
.parent_dynamic_page .card-body > * {
	position: relative;
	z-index: 1;
}

.parent_item_mall h3,
.parent_topup h3,
.parent_dynamic_page h3 {
	color: var(--primary-color) !important;
	text-shadow: 0 2px 10px rgba(90, 127, 216, 0.3);
}

/* Item Mall Category Tabs */
.parent_item_mall .nav-tabs .nav-link {
	border: 2px solid transparent !important;
	color: var(--primary-color) !important;
	transition: all 0.3s ease;
}

.parent_item_mall .nav-tabs .nav-link.active {
	background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%) !important;
	color: #fff !important;
	border-color: var(--primary-color) !important;
	box-shadow: 0 4px 15px rgba(90, 127, 216, 0.4);
}

.parent_item_mall .nav-tabs .nav-link:hover {
	border-color: var(--primary-color) !important;
	transform: translateY(-2px);
}

/* Player Pages & Features Styling */
.parent_sidebar_account_info .card-body,
.parent_history .card-body,
#parent_menu_exchange_market .card-body,
.parent_battle_pass .card-body,
.parent_wof_page .card-body,
.parent_change_map .card-body,
.parent_change_password .card-body,
.parent_change_pin .card-body,
.parent_change_email .card-body,
.parent_achievement .card-body,
.parent_achievement_history .card-body,
.parent_register .card-body, 
.parent_forgot_password .card-body,
.parent_daily_checkin .card-body {
	/* background: linear-gradient(135deg, rgba(90, 127, 216, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%) !important;
	border: 2px solid var(--primary-color) !important;
	border-radius: 15px !important;
	box-shadow: 0 8px 32px rgba(90, 127, 216, 0.3), 
				inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
	backdrop-filter: blur(10px);
	position: relative;
	overflow: hidden; */
}

.parent_sidebar_account_info .card-body::before,
.parent_history .card-body::before,
#parent_menu_exchange_market .card-body::before,
.parent_battle_pass .card-body::before,
.parent_wof_page .card-body::before,
.parent_change_map .card-body::before,
.parent_change_password .card-body::before,
.parent_change_pin .card-body::before,
.parent_change_email .card-body::before,
.parent_achievement .card-body::before,
.parent_achievement_history .card-body::before,
.parent_register .card-body::before, 
.parent_forgot_password .card-body::before,
.parent_daily_checkin .card-body::before {
	/* content: '';
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background: radial-gradient(circle, rgba(0, 230, 246, 0.1) 0%, transparent 70%);
	animation: loginGlow 3s ease-in-out infinite;
	pointer-events: none;
	z-index: 0; */
}

.parent_sidebar_account_info .card-body > *,
.parent_history .card-body > *,
#parent_menu_exchange_market .card-body > *,
.parent_battle_pass .card-body > *,
.parent_wof_page .card-body > *,
.parent_change_map .card-body > *,
.parent_change_password .card-body > *,
.parent_change_pin .card-body > *,
.parent_change_email .card-body > *,
.parent_achievement .card-body > *,
.parent_achievement_history .card-body > *,
.parent_register .card-body > *,
.parent_forgot_password .card-body > *,
.parent_daily_checkin .card-body > * {
	position: relative;
	z-index: 1;
}

.parent_sidebar_account_info h3,
.parent_history h3,
#parent_menu_exchange_market h3,
.parent_battle_pass h3,
.parent_wof_page h3,
.parent_change_map h3,
.parent_change_password h3,
.parent_change_pin h3,
.parent_change_email h3,
.parent_achievement h3,
.parent_achievement_history h3,
.parent_register h3,
.parent_forgot_password h3,
.parent_daily_checkin h3 {
	/* color: var(--primary-color) !important; */
	text-shadow: 0 2px 10px rgba(90, 127, 216, 0.3);
}

/* Exchange Market Menu Specific */
#parent_menu_exchange_market .nav-tabs .nav-link {
	border: 2px solid transparent !important;
	color: var(--primary-color) !important;
	transition: all 0.3s ease;
}

#parent_menu_exchange_market .nav-tabs .nav-link.active {
	background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%) !important;
	color: #fff !important;
	border-color: var(--primary-color) !important;
	box-shadow: 0 4px 15px rgba(90, 127, 216, 0.4);
}


/* Account Info Specific */
.parent_sidebar_account_info.card {
	background: linear-gradient(135deg, rgba(90, 127, 216, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%) !important;
	border: 2px solid var(--primary-color) !important;
	border-radius: 15px !important;
	box-shadow: 0 8px 32px rgba(90, 127, 216, 0.3), 
				inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

/* Modal Userpanel - Blue Sky Cute Theme */
#modal_userpanel .btn-three,
#modal_userpanel .btn,
#modal_userpanel button:not(.close):not(.btn-danger),
#modal_userpanel a.btn:not(.btn-danger) {
	background: linear-gradient(135deg, #5a9fd4 0%, #4a8fc7 100%) !important;
	border: 2px solid rgba(255, 255, 255, 0.5) !important;
	border-radius: 20px !important;
	color: #fff !important;
	font-weight: 600 !important;
	font-size: 18px !important;
	padding: 12px 24px !important;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2),
			inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
	transition: all 0.3s ease !important;
	position: relative;
	overflow: hidden;
	letter-spacing: 1px;
	text-transform: uppercase;
}

#modal_userpanel .btn-three::before,
#modal_userpanel .btn::before,
#modal_userpanel button:not(.close):not(.btn-danger)::before,
#modal_userpanel a.btn:not(.btn-danger)::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
	transition: left 0.5s;
}

#modal_userpanel .btn-three:hover::before,
#modal_userpanel .btn:hover::before,
#modal_userpanel button:not(.close):not(.btn-danger):hover::before,
#modal_userpanel a.btn:not(.btn-danger):hover::before {
	left: 100%;
}

#modal_userpanel .btn-three:hover,
#modal_userpanel .btn:hover,
#modal_userpanel button:not(.close):not(.btn-danger):hover,
#modal_userpanel a.btn:not(.btn-danger):hover {
	background: linear-gradient(135deg, #6aafde 0%, #5a9fd4 100%) !important;
	border-color: rgba(255, 255, 255, 0.7) !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25),
			inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}

#modal_userpanel .btn-three:active,
#modal_userpanel .btn:active,
#modal_userpanel button:not(.close):not(.btn-danger):active,
#modal_userpanel a.btn:not(.btn-danger):active {
	transform: translateY(0) !important;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2),
			inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

/* Modal Userpanel - Blue Sky Background with Purple Glow */
#modal_userpanel .modal-content {
	background: linear-gradient(135deg, #5a7fd8 0%, #7a9ff8 100%) !important;
	border: 3px solid #9d7bd8 !important;
	box-shadow: 0 0 20px rgba(157, 123, 216, 0.5),
			0 8px 32px rgba(0, 0, 0, 0.3),
			inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
	position: relative;
}

/* Floating Star Animation - Kiri Atas */
#modal_userpanel .modal-content::before {
	content: '⭐';
	position: absolute;
	top: 15px;
	left: 25px;
	font-size: 22px;
	opacity: 0.7;
	animation: floatStar 3s ease-in-out infinite;
	z-index: 10;
}

/* Floating Moon Animation - Kanan Atas */
#modal_userpanel .modal-content::after {
	content: '🌙';
	position: absolute;
	top: 15px;
	right: 60px;
	font-size: 26px;
	opacity: 0.8;
	animation: floatMoon 4s ease-in-out infinite;
	z-index: 10;
}

@keyframes floatStar {
	0%, 100% { 
		transform: translateY(0) rotate(0deg); 
		opacity: 0.5; 
	}
	50% { 
		transform: translateY(-10px) rotate(180deg); 
		opacity: 0.9; 
	}
}

@keyframes floatMoon {
	0%, 100% { 
		transform: translateY(0) scale(1); 
		opacity: 0.6; 
	}
	50% { 
		transform: translateY(-8px) scale(1.15); 
		opacity: 1; 
	}
}

#modal_userpanel .modal-body {
	background: transparent !important;
	position: relative;
	z-index: 1;
}

#modal_userpanel h3 {
	color: #fff !important;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

#modal_userpanel hr {
	border-color: rgba(255, 255, 255, 0.3) !important;
}

/* Close Button - Cute Style */
#modal_userpanel .btn-danger {
	background: linear-gradient(135deg, #ff6b9d 0%, #ff5a8a 100%) !important;
	border: 2px solid rgba(255, 255, 255, 0.5) !important;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
}

#modal_userpanel .btn-danger:hover {
	background: linear-gradient(135deg, #ff8fab 0%, #ff6b9d 100%) !important;
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3) !important;
	transform: scale(1.1) !important;
}


/* ===== IMAGE OPTIMIZATION ===== */
/* Lazy loading placeholder */
img[loading="lazy"] {
	opacity: 0;
	transition: opacity 0.3s ease-in;
}

img[loading="lazy"].loaded,
img[loading="lazy"]:not([src=""]) {
	opacity: 1;
}

/* Optimize carousel images */
.carousel-item img {
	object-fit: cover;
	will-change: transform;
}

/* Preload first carousel image */
.carousel-item.active img {
	content-visibility: auto;
}

/* Optimize background images with lazy loading effect */
body::before,
body::after {
	content-visibility: auto;
	contain: layout style paint;
}

/* Image compression hint for browser */
img {
	image-rendering: -webkit-optimize-contrast;
	image-rendering: crisp-edges;
}

/* Optimize news/event images */
.img_article_news_event {
	object-fit: cover;
	height: auto;
	max-height: 150px;
	will-change: auto;
}

.parent_img_article_news_event {
	contain: layout style paint;
}

/* Reduce paint on scroll */
.parent_server_hot_news {
	contain: layout style;
}

/* Optimize logo circle animations */
.logo_circle {
	will-change: transform;
	contain: layout style paint;
}

/* Defer offscreen content */
#parent_news_table,
#parent_events_table {
	content-visibility: auto;
	contain-intrinsic-size: 648px;
}


/* ===== PRELOADER INSTANT DISPLAY ===== */
/* Styles moved to main preloader2 section above (line ~460-490) to avoid duplication */

/* z-index already set in main #preloader2 section above */

/* Item Stats Tooltip/Popover Styling */
.item-stats-popover {
    background-color: #1a1a1a !important;
    border: 2px solid #333333 !important;
    max-width: 350px !important;
}

.item-stats-popover .popover-body {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
    padding: 12px !important;
    font-size: 14px !important;
    line-height: 1.8 !important;
}

/* Force color inheritance for all spans inside popover */
.item-stats-popover .popover-body span {
    color: inherit !important;
}

/* Specific color classes for item stats */
.item-stats-popover .popover-body .stat-positive {
    color: #7FFF00 !important; /* Bright green like in image */
}

.item-stats-popover .popover-body .stat-negative {
    color: #FF6B6B !important;
}

.item-stats-popover .popover-body .stat-hp {
    color: #00BFFF !important; /* Deep sky blue */
}

.item-stats-popover .popover-body .stat-mp {
    color: #DA70D6 !important; /* Orchid purple */
}

.item-stats-popover .popover-body .stat-level {
    color: #FFD700 !important; /* Gold */
}

.item-stats-popover .popover-body .stat-white {
    color: #E0E0E0 !important; /* Light gray white */
}

.item-stats-popover .popover-body .stat-gray {
    color: #A0A0A0 !important; /* Gray for category */
}

.item-stats-popover .popover-body .item-title {
    color: #FF6B6B !important; /* Salmon/coral red for title */
    font-weight: bold !important;
    font-size: 16px !important;
}

.item-stats-popover .popover-body strong {
    color: #FF6B6B !important;
    font-weight: bold !important;
}

/* Hover effect for item images */
.item-hover-info {
    cursor: help;
    transition: transform 0.2s ease;
}

.item-hover-info:hover {
    transform: scale(1.05);
}

/* ============================================
   Item Stats Tooltip System (Centralized)
   ============================================ */

/* Item hover trigger */
.item-hover-info,
.item-hover-trigger {
    cursor: pointer;
    transition: transform 0.2s;
}

.item-hover-info:hover,
.item-hover-trigger:hover {
    transform: scale(1.05);
}

/* Popover styling */
.item-stats-popover {
    background-color: #2c2c2c !important;
    border: 2px solid #444 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5) !important;
    max-width: 350px !important;
}

.item-stats-popover .popover-body {
    background-color: #2c2c2c !important;
    color: #fff !important;
    padding: 12px !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
}

.item-stats-popover .arrow::after {
    border-right-color: #2c2c2c !important;
}

.item-stats-popover[x-placement^="left"] .arrow::after {
    border-left-color: #2c2c2c !important;
}

.item-stats-popover[x-placement^="top"] .arrow::after {
    border-top-color: #2c2c2c !important;
}

.item-stats-popover[x-placement^="bottom"] .arrow::after {
    border-bottom-color: #2c2c2c !important;
}

/* Stat color classes */
.item-title {
    color: #ffa726;
    font-weight: bold;
    font-size: 1.1rem;
}

.stat-level {
    color: #ffd700;
}

.stat-white {
    color: #E0E0E0;
}

.stat-gray {
    color: #999;
}

.stat-positive {
    color: #7FFF00;
}

.stat-negative {
    color: #FF6B6B;
}

.stat-hp {
    color: #00BFFF;
}

.stat-mp {
    color: #DA70D6;
}

.stat-set-effect {
    color: #FFD700;
    font-weight: bold;
}

/* Item Seal Badge Styling */
.item-seal-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 14px !important;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.item-seal-badge.seal-0 {
    background-color: #28a745;
    color: white;
}

.item-seal-badge.seal-1 {
    background-color: #dc3545;
    color: white;
}

.item-seal-badge.seal-2 {
    background-color: #ffc107;
    color: #000;
}


/* Discord Widget Fixed Bottom Left */
.discord-widget-container {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 9999;
    transition: all 0.3s ease;
}

/* Toggle Button (Discord Icon) */
.discord-widget-toggle {
    width: 60px;
    height: 60px;
    background: #5865F2;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(88, 101, 242, 0.6), 0 0 0 0 rgba(88, 101, 242, 0.4);
    transition: all 0.3s ease;
    animation: discord-pulse 2s infinite;
    position: relative;
}

@keyframes discord-pulse {
    0% {
        box-shadow: 0 4px 20px rgba(88, 101, 242, 0.6), 0 0 0 0 rgba(88, 101, 242, 0.4);
    }
    50% {
        box-shadow: 0 4px 20px rgba(88, 101, 242, 0.6), 0 0 0 10px rgba(88, 101, 242, 0);
    }
    100% {
        box-shadow: 0 4px 20px rgba(88, 101, 242, 0.6), 0 0 0 0 rgba(88, 101, 242, 0);
    }
}

.discord-widget-toggle:hover {
    background: #4752C4;
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(88, 101, 242, 0.6);
}

.discord-widget-toggle i {
    color: white;
    font-size: 28px;
}

/* Widget Content */
.discord-widget-content {
    position: absolute;
    bottom: 0;
    left: 0;
    background: #36393f;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    opacity: 1;
    visibility: visible;
    transition: all 0.3s ease;
}

/* Widget Header */
.discord-widget-header {
    background: #5865F2;
    padding: 12px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    font-weight: 600;
}

.discord-close-btn {
    background: transparent;
    border: none;
    color: white;
    cursor: pointer;
    font-size: 18px;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: background 0.2s ease;
}

.discord-close-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.discord-widget-content iframe {
    display: block;
    border: none;
}

/* Minimized State */
.discord-widget-container.minimized .discord-widget-content {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.discord-widget-container.minimized .discord-widget-toggle {
    display: flex;
}

.discord-widget-container:not(.minimized) .discord-widget-toggle {
    display: none;
}

/* Responsive untuk mobile */
@media (max-width: 768px) {
    .discord-widget-container {
        display: none;
    }
}

@media (max-width: 1024px) {
    .discord-widget-content {
        width: 300px;
    }
    
    .discord-widget-content iframe {
        width: 300px;
        height: 400px;
    }
    
    .discord-widget-toggle {
        width: 50px;
        height: 50px;
    }
    
    .discord-widget-toggle i {
        font-size: 24px;
    }
}


/* ===== LOGO LUNA - LAZY LOADING FIX ===== */
/* Prevent layout shift for logo luna image */
.logo_circle .circle_img {
	/* Ensure container maintains size for lazy loaded logo */
	min-height: 300px;
}

.logo_circle .circle_img > img {
	/* Reserve space to prevent layout shift */
	max-width: 270px;
	height: auto;
	display: block;
}
/* ===== END LOGO LUNA ===== */

/* Clickable Name Link in Account Info */
.clickable-name-link {
    color: #fff44d !important;
    cursor: pointer;
    border-bottom: 1px dashed #fff44d;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

.clickable-name-link:hover {
    color: #fff !important;
    border-bottom: 1px solid #fff;
    text-decoration: none;
    transform: translateX(2px);
}

.clickable-name-link i {
    font-size: 0.85em;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.clickable-name-link:hover i {
    opacity: 1;
}

/* ============================================================================
   Construct Items Button Animations
   Created: 2026-02-09
   Purpose: Add dramatic success/fail animations for construct button
   ============================================================================ */

/* Construct Button Base Styles */
#btn_construct {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

#btn_construct:hover:not(:disabled) {
    transform: scale(1.05);
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}

#btn_construct:active:not(:disabled) {
    transform: scale(0.95);
}

/* Pulse animation for enabled button */
@keyframes pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.7);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(102, 126, 234, 0);
    }
}

#btn_construct:not(:disabled) {
    animation: pulse 2s infinite;
}

/* Constructing animation */
@keyframes constructing {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.btn-constructing {
    pointer-events: none;
    opacity: 0.8;
}

.btn-constructing .fa-cube {
    animation: constructing 1s linear infinite;
    display: inline-block;
}

/* Success animation */
@keyframes successBounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-20px);
    }
    60% {
        transform: translateY(-10px);
    }
}

@keyframes successGlow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(40, 167, 69, 0.8);
    }
    50% {
        box-shadow: 0 0 40px rgba(40, 167, 69, 1);
    }
}

.btn-success-animate {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
    animation: successBounce 1s ease, successGlow 1s ease;
    border-color: #28a745 !important;
}

/* Fail animation */
@keyframes failShake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
    20%, 40%, 60%, 80% { transform: translateX(10px); }
}

@keyframes failPulse {
    0%, 100% {
        box-shadow: 0 0 20px rgba(220, 53, 69, 0.8);
    }
    50% {
        box-shadow: 0 0 40px rgba(220, 53, 69, 1);
    }
}

.btn-fail-animate {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%) !important;
    animation: failShake 0.5s ease, failPulse 1s ease;
    border-color: #dc3545 !important;
}

/* Confetti animation for success */
.confetti {
    position: fixed;
    width: 10px;
    height: 10px;
    background: #f0f;
    animation: confetti-fall 3s linear;
    z-index: 9999;
}

@keyframes confetti-fall {
    0% {
        top: -10%;
        opacity: 1;
    }
    100% {
        top: 100%;
        opacity: 0;
        transform: rotate(720deg);
    }
}

/* Sparkle effect */
.sparkle {
    position: fixed;
    width: 5px;
    height: 5px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 10px #fff;
    animation: sparkle-fade 1s ease-out;
    z-index: 9999;
    pointer-events: none;
}

@keyframes sparkle-fade {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(2);
    }
}

/* Fix tooltip overflow in construct detail modal */
#constructDetailModal .modal-dialog {
    overflow: visible !important;
}

#constructDetailModal .modal-content {
    overflow: visible !important;
}

#constructDetailModal .modal-body {
    overflow-x: visible !important;
    overflow-y: auto !important;
}

/* Ensure tooltips/popovers appear above modal */
.popover.item-stats-popover {
    z-index: 1070 !important;
}

#constructDetailModal .popover {
    z-index: 1070 !important;
}

.tooltip {
    z-index: 1070 !important;
}

/* Ensure modal backdrop doesn't interfere with tooltips */
.modal-backdrop {
    z-index: 1040 !important;
}

/* Prevent body scroll jump when modal opens */
body.modal-open {
    padding-right: 0 !important;
}

/* ================================================
   MODERN NAVIGATION STYLES FOR NEW DESIGN
   ================================================ */

/* Modern Navigation Styles - Game Style */
.modern-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(10, 25, 47, 0.95);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid #ffedaa;
    padding: 20px 0;
}

.modern-nav .container-fluid {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

.nav-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 80px;
}

.logo img {
    height: 50px;
    width: auto;
}

/* Game-style Navigation */
.modern-main-nav {
    display: flex;
    align-items: center;
    gap: 4rem;
}

.nav-item-circle {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.nav-item-circle:hover {
    transform: translateY(-5px);
}

.nav-gold-circle {
    width: 70px;
    height: 70px;
    /* background: radial-gradient(circle, #ffd700, #ffb347); */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4);
    border: 2px solid #ffedaa;
    transition: all 0.3s ease;
}

.nav-gold-circle:hover {
    background: radial-gradient(circle, #ffed4a, #ffd700);
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.6);
    transform: scale(1.05);
}

.nav-inner-circle {
    width: 65px;
    height: 65px;
    background: rgba(2, 18, 50, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.nav-circle-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: #fff;
    border-radius: 50%;
}

.nav-circle-link img {
    max-width: 40px;
    max-height: 40px;
    object-fit: contain;
}

.nav-circle-link i {
    font-size: 24px;
    color: #40E0D0;
}

.nav-label {
    margin-top: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #fff;
    text-align: center;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* Center Play Button */
.nav-center-play {
    margin: 0 1rem;
}

.play-btn {
    display: inline-block;
    width: 120px;
    height: 50px;
    background: linear-gradient(135deg, #8b5cf6, #a855f7);
    border-radius: 25px;
    text-decoration: none;
    color: white;
    font-weight: 600;
    font-size: 0.9rem;
    text-align: center;
    line-height: 50px;
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.4);
    transition: all 0.3s ease;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.play-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.6);
    color: white;
    text-decoration: none;
}

.play-btn span {
    display: inline-block;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* Dropdown menus */
.nav-dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(10, 25, 47, 0.98);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(64, 224, 208, 0.2);
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    min-width: 180px;
    list-style: none;
    margin: 0;
    padding: 0.5rem 0;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(-10px);
    transition: all 0.3s ease;
    z-index: 1001;
    margin-top: 0.5rem;
}

.nav-item-circle:hover .nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.nav-dropdown li {
    margin: 0;
}

.nav-dropdown a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: 0.875rem;
    transition: all 0.3s ease;
}

.nav-dropdown a:hover {
    color: #40E0D0;
    background: rgba(64, 224, 208, 0.1);
    padding-left: 1.5rem;
}

.nav-dropdown img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    color: white;
    font-size: 1.25rem;
    padding: 0.5rem;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.mobile-menu-toggle:hover {
    background: rgba(64, 224, 208, 0.1);
    color: #40E0D0;
}

/* Mobile Styles */
@media (max-width: 768px) {
    .modern-nav .container-fluid {
        padding: 0 1rem;
    }
    
    .nav-content {
        height: 60px;
    }
    
    .logo img {
        height: 40px;
    }
    
    .modern-main-nav {
        display: none;
        position: fixed;
        top: 100%;
        left: 0;
        right: 0;
        background: rgba(10, 25, 47, 0.98);
        backdrop-filter: blur(20px);
        border-top: 1px solid rgba(64, 224, 208, 0.2);
        flex-direction: column;
        padding: 2rem 1rem;
        gap: 1.5rem;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-20px);
        transition: all 0.3s ease;
        max-height: 70vh;
        overflow-y: auto;
    }
    
    .modern-main-nav.show {
        display: flex;
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        top: 70px;
    }
    
    .nav-gold-circle {
        width: 60px;
        height: 60px;
    }
    
    .nav-inner-circle {
        width: 50px;
        height: 50px;
    }
    
    .nav-circle-link img {
        max-width: 30px;
        max-height: 30px;
    }
    
    .nav-circle-link i {
        font-size: 20px;
    }
    
    .nav-dropdown {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        background: rgba(0, 0, 0, 0.3);
        border: none;
        border-radius: 8px;
        margin-top: 0.5rem;
        box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.2);
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }
    
    .nav-item-circle:hover .nav-dropdown,
    .nav-item-circle.active .nav-dropdown {
        max-height: 300px;
    }
    
    .mobile-menu-toggle {
        display: block;
    }
    
    .play-btn {
        width: 100px;
        height: 40px;
        font-size: 0.8rem;
        line-height: 40px;
    }
}

/* Main Content Spacing */
.modern-main-content {
    margin-top: 90px;
    min-height: calc(100vh - 90px);
}

@media (max-width: 768px) {
    .modern-main-content {
        margin-top: 70px;
        min-height: calc(100vh - 70px);
    }
}

.modern-nav .nav-link i {
    font-size: 24px;
    margin-bottom: 5px;
}

.modern-nav .play-now-btn {
    background: linear-gradient(45deg, #6a5acd, #9370db);
    color: #fff;
    padding: 12px 30px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: bold;
    font-size: 16px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(106, 90, 205, 0.3);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.modern-nav .play-now-btn:hover {
    color: #fff;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(106, 90, 205, 0.4);
}

/* Main Content Area */
.modern-main-content {
    padding-top: 120px;
    min-height: 100vh;
    position: relative;
    z-index: 1;
}

.modern-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ================================================
   SIDEBAR LUNA LOGO SECTION - MATCH TARGET DESIGN  
   ================================================ */

.luna-logo-section {
    text-align: center;
    margin-bottom: 20px;
    padding: 20px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.luna-logo-container {
    position: relative;
    margin-bottom: 15px;
}

.logo-date {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 10px;
    font-weight: 600;
}

.luna-logo-circle {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto;
    border-radius: 50%;
    background: linear-gradient(135deg, #4a90e2, #7b68ee);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 
        0 0 30px rgba(75, 144, 226, 0.4),
        inset 0 2px 10px rgba(255, 255, 255, 0.2);
    border: 3px solid rgba(255, 255, 255, 0.3);
}

.luna-logo-img {
    width: 80px;
    height: 80px;
    object-fit: contain;
}

.logo-text {
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

.luna-text {
    font-size: 24px;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    margin: 0;
}

.online-text {
    font-size: 16px;
    color: #4a90e2;
    font-weight: 600;
    margin: 0;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
}

.wings-decoration {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 120px;
    pointer-events: none;
}

.wing {
    position: absolute;
    width: 40px;
    height: 30px;
    background: linear-gradient(45deg, #00d4ff, #4a90e2);
    opacity: 0.6;
    border-radius: 50% 10px 50% 10px;
}

.left-wing {
    left: -20px;
    transform: rotate(-30deg);
    animation: wingFlap 3s ease-in-out infinite;
}

.right-wing {
    right: -20px;
    transform: rotate(30deg) scaleX(-1);
    animation: wingFlap 3s ease-in-out infinite reverse;
}

@keyframes wingFlap {
    0%, 100% { transform: rotate(-30deg) scale(1); }
    50% { transform: rotate(-25deg) scale(1.1); }
}

.online-players-section {
    background: rgba(0, 0, 0, 0.4);
    border-radius: 10px;
    padding: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.online-players-label {
    font-size: 11px;
    color: #52ff2e;
    font-weight: bold;
    margin-bottom: 5px;
    letter-spacing: 1px;
}

.online-players-count {
    font-size: 28px;
    font-weight: bold;
    color: #52ff2e;
    text-shadow: 0 0 10px rgba(82, 255, 46, 0.5);
}

/* ================================================
   ACCOUNT INFORMATION PANEL - MATCH TARGET DESIGN
   ================================================ */

.account-info-panel {
    background: rgba(0, 0, 0, 0.4);
    border-radius: 15px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 20px;
}

.account-header {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.account-header i {
    color: #4a90e2;
    font-size: 16px;
}

.account-details .info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.account-details .info-row:last-child {
    border-bottom: none;
}

.info-label {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
}

.info-value {
    font-size: 13px;
    color: #fff;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.info-value.highlight {
    color: #ffd700;
}

.edit-icon {
    color: #4a90e2;
    font-size: 12px;
    cursor: pointer;
    transition: color 0.3s ease;
}

.edit-icon:hover {
    color: #6bb6ff;
}

.diamond-icon {
    color: #00d4ff;
    font-size: 14px;
}

.luna-icon {
    color: #ffd700;
    font-size: 14px;
    background: linear-gradient(45deg, #ffd700, #ffed4a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.membership-icon {
    color: #ff6b6b;
    font-size: 14px;
}

/* Login Panel for Non-logged Users */
.login-panel {
    background: rgba(0, 0, 0, 0.4);
    border-radius: 15px;
    padding: 25px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
    margin-bottom: 20px;
}

.login-header {
    display: flex;
    align-items: center;
    justify-content: left;
    gap: 10px;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    margin-bottom: 15px;
}

.login-header i {
    color: #4a90e2;
    font-size: 16px;
}

.login-content p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 13px;
    margin-bottom: 15px;
}

.login-btn {
    display: inline-block;
    background: linear-gradient(45deg, #4a90e2, #7b68ee);
    color: #fff;
    padding: 10px 20px;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 600;
    font-size: 12px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(75, 144, 226, 0.3);
}

.login-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(75, 144, 226, 0.4);
    color: #fff;
    text-decoration: none;
} 

/* Character Banner */
.character-banner {
    /* background: linear-gradient(135deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3)); */
    border-radius: 15px;
    padding: 20px;
    padding-bottom: 0px;
    /* margin-bottom: 20px; */
    position: relative;
    overflow: hidden;
}

.character-banner img {
    width: 100%;
    height: auto;
    border-radius: 10px;
}

/* User Info Panel */
.user-info-panel {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(15px);
    border-radius: 15px;
    padding: 20px;
    color: #fff;
    margin-bottom: 20px;
}

.user-info-panel .user-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.2);
}

.user-info-panel .user-details {
    flex: 1;
    margin-left: 15px;
}

.user-info-panel .user-name {
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    margin-bottom: 5px;
}

.user-info-panel .user-email {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 5px;
}

.user-info-panel .user-stats {
    display: flex;
    gap: 15px;
    margin-top: 10px;
}

.user-info-panel .stat-item {
    text-align: center;
}

.user-info-panel .stat-value {
    font-size: 16px;
    font-weight: bold;
    color: #6a5acd;
}

.user-info-panel .stat-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
}

/* Topup Panel */
.topup-panel {
    background: rgba(106, 90, 205, 0.2);
    border: 1px solid rgba(106, 90, 205, 0.3);
    border-radius: 15px;
    padding: 20px;
    color: #fff;
    margin-bottom: 20px;
}

.topup-panel h4 {
    color: #fff;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.topup-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.topup-form input {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    padding: 12px 15px;
    color: #fff;
    font-size: 14px;
}

.topup-form input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.topup-form input:focus {
    outline: none;
    border-color: #6a5acd;
    box-shadow: 0 0 10px rgba(106, 90, 205, 0.3);
}

.topup-btn {
    background: linear-gradient(45deg, #6a5acd, #9370db);
    color: #fff;
    padding: 12px 20px;
    border: none;
    border-radius: 10px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.topup-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(106, 90, 205, 0.4);
}

/* Footer */
.modern-footer {
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(20px);
    padding: 20px 0;
    margin-top: 50px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
}

.modern-footer .social-links {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 15px;
}

.modern-footer .social-links a {
    color: rgba(255, 255, 255, 0.7);
    font-size: 24px;
    transition: all 0.3s ease;
}

.modern-footer .social-links a:hover {
    color: #6a5acd;
    transform: translateY(-2px);
}

/* Responsive Design */
@media (max-width: 768px) {
    .modern-nav .nav-menu {
        display: none;
    }
    
    .modern-main-content {
        padding-top: 80px;
    }
    
    .modern-container {
        padding: 0 15px;
    } 
}

/* Override existing styles */
.main_content {
    background: none !important;
    box-shadow: none !important;
}
 

/* Update text colors for better contrast */
body, body * {
    color: #fff !important;
}

a {
    color: #6a5acd !important;
}

a:hover {
    color: #9370db !important;
}
/* ================================================
   ADDITIONAL POLISH AND IMPROVEMENTS
   ================================================ */

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Hide scrollbar for webkit browsers but keep functionality */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
}

::-webkit-scrollbar-thumb {
    background: rgba(106, 90, 205, 0.5);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(106, 90, 205, 0.8);
}

/* Clock styling improvements */
.clock-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
}

.clock-timer {
    background: rgba(0, 0, 0, 0.3);
    padding: 4px 8px;
    border-radius: 4px;
    margin: 0;
    min-width: 25px;
    text-align: center;
}

.clock-connector {
    font-weight: bold;
    color: #6a5acd;
}

/* Loading animation improvements */
#preloader2 {
    z-index: 9999;
}

/* Modal improvements */
.modal_waiting {
    z-index: 9998;
}

/* Button hover effects */
.btn, button {
    transition: all 0.3s ease;
}

.btn:hover, button:hover {
    transform: translateY(-1px);
} 

/* Form input improvements */
input, textarea, select {
    transition: all 0.3s ease;
}

input:focus, textarea:focus, select:focus {
    transform: translateY(-1px);
}

/* Link improvements */
a {
    transition: all 0.3s ease;
}

/* Table improvements for existing content */
table {
    background: rgba(0, 0, 0, 0.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 10px !important;
    overflow: hidden;
}

table th {
    background: rgba(106, 90, 205, 0.3) !important;
    color: #fff !important;
    border: none !important;
}

table td {
    background: rgba(0, 0, 0, 0.2) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Pagination improvements */
.pagination {
    /* background: rgba(0, 0, 0, 0.3); */
    border-radius: 10px;
    padding: 10px;
}

.page-link {
    background: rgba(106, 90, 205, 0.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
}

.page-link:hover {
    background: rgba(106, 90, 205, 0.6) !important;
    color: #fff !important;
}

/* Alert improvements */
.alert {
    background: rgba(0, 0, 0, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    border-radius: 10px !important;
}

.alert-success {
    border-color: rgba(40, 167, 69, 0.3) !important;
    background: rgba(40, 167, 69, 0.2) !important;
}

.alert-danger {
    border-color: rgba(220, 53, 69, 0.3) !important;
    background: rgba(220, 53, 69, 0.2) !important;
}

.alert-warning {
    border-color: rgba(255, 193, 7, 0.3) !important;
    background: rgba(255, 193, 7, 0.2) !important;
}

.alert-info {
    border-color: rgba(23, 162, 184, 0.3) !important;
    background: rgba(23, 162, 184, 0.2) !important;
}

/* Mobile menu improvements */
@media (max-width: 768px) {
    .modern-nav {
        padding: 10px 0;
    }
    
    .modern-nav .container-fluid {
        padding: 0 15px;
    }
    
    .modern-nav .logo img {
        height: 40px;
    }
    
    .modern-nav .play-now-btn {
        padding: 8px 20px;
        font-size: 14px;
    }
    
    .col-md-4, .col-md-8 {
        padding: 0 10px !important;
    } 
    
    .clock-container {
        font-size: 12px;
    }
    
    .user-info-panel .user-stats {
        flex-direction: column;
        gap: 10px;
    }
    
    .topup-form {
        gap: 10px;
    }
}

/* Extra small screens */
@media (max-width: 480px) {
    .modern-nav .nav-content {
        flex-direction: column;
        gap: 15px;
    }
    
    .modern-main-content {
        padding-top: 140px;
    } 
    
    .character-banner {
        padding: 15px;
    }
}

/* Print styles */
@media print {
    .modern-nav, .modern-footer {
        display: none;
    }
    
    body::before {
        display: none;
    }
    
    .modern-main-content {
        padding-top: 20px;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .left-panel, .right-panel {
        border: 2px solid #fff;
    }
    
    .modern-nav {
        border-bottom: 2px solid #fff;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
}
/* ================================================
   CONTENT-SPECIFIC STYLING FOR EXISTING ELEMENTS
   ================================================ */

/* Carousel styling */
.carousel {
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.carousel-inner img {
    border-radius: 0;
    border: none;
}

.carousel-control-prev,
.carousel-control-next {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    top: 50%;
    transform: translateY(-50%);
}

.carousel-control-prev {
    left: 15px;
}

.carousel-control-next {
    right: 15px;
}

.carousel-indicators li {
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    width: 12px;
    height: 12px;
}

.carousel-indicators .active {
    background-color: #6a5acd;
}

/* News and updates styling */
.parent_server_hot_news .card {
    background: rgba(0, 0, 0, 0.4) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.parent_server_hot_news .nav-tabs {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.parent_server_hot_news .nav-tabs .nav-link {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    border-radius: 10px 10px 0 0;
    margin-right: 5px;
}

.parent_server_hot_news .nav-tabs .nav-link.active {
    background: linear-gradient(45deg, #6a5acd, #9370db);
    border-color: #6a5acd;
    color: #fff;
}

.parent_server_hot_news .tab-content {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 0 0 15px 15px;
    padding: 20px;
}

.img_article_news_event {
    border-radius: 10px;
    object-fit: cover;
    height: 80px;
}

.parent_img_article_news_event {
    border-radius: 10px;
    overflow: hidden;
}

/* Gallery section styling */
.gallery-section {
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Rank section styling */
.rank-section {
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.rank-section table {
    background: rgba(0, 0, 0, 0.2) !important;
}

/* Tab styling improvements */
.nav-tabs {
    border-bottom: none;
}

.nav-tabs .nav-item .nav-link {
    border: none;
    color: rgba(255, 255, 255, 0.7);
    transition: all 0.3s ease;
}

.nav-tabs .nav-item .nav-link:hover {
    border: none;
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

.nav-tabs .nav-item .nav-link.active {
    background: linear-gradient(45deg, #6a5acd, #9370db);
    color: #fff;
    border: none;
}

/* Card improvements */
.card {
    background: rgba(4, 31, 71, 0.85) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 15px !important;
}

.card-body {
    color: #fff;
}

.card-header {
    background: rgba(106, 90, 205, 0.3) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
}

/* Shadow and border improvements */
.shadow-sm {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
}

.border-bottom {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* Button improvements */
.btn-primary {
    background: linear-gradient(45deg, #6a5acd, #9370db) !important;
    border: none !important;
    border-radius: 10px !important;
}

.btn-primary:hover {
    background: linear-gradient(45deg, #9370db, #6a5acd) !important;
    transform: translateY(-2px);
}

.btn-secondary {
    background: rgba(0, 0, 0, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 10px !important;
}

.btn-secondary:hover {
    background: rgba(0, 0, 0, 0.6) !important;
    transform: translateY(-2px);
}

/* Text color fixes for better visibility */
h1, h2, h3, h4, h5, h6 {
    color: #fff !important;
}

p, div, span, small {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Link color improvements */
a {
    color: #6a5acd !important;
}

a:hover {
    color: #9370db !important;
    text-decoration: none !important;
}

/* Form element improvements */
.form-control {
    background: rgba(0, 0, 0, 0.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
    border-radius: 10px !important;
}

.form-control:focus {
    background: rgba(0, 0, 0, 0.5) !important;
    border-color: #6a5acd !important;
    box-shadow: 0 0 10px rgba(106, 90, 205, 0.3) !important;
    color: #fff !important;
}

.form-control::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* Modal improvements */
.modal-content {
    background: rgba(0, 0, 0, 0.8) !important;
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 15px !important;
}

.modal-header {
    background: linear-gradient(45deg, #6a5acd, #9370db) !important;
    border-bottom: none !important;
    color: #fff !important;
    border-radius: 15px 15px 0 0 !important;
}

.modal-body {
    color: #fff !important;
}

.modal-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Dropdown improvements */
.dropdown-menu {
    background: rgba(0, 0, 0, 0.8) !important;
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 10px !important;
}

.dropdown-item {
    color: #fff !important;
}

.dropdown-item:hover {
    background: rgba(106, 90, 205, 0.3) !important;
    color: #fff !important;
}

/* Badge improvements */
.badge {
    background: linear-gradient(45deg, #6a5acd, #9370db) !important;
    border-radius: 8px !important;
}

/* Progress bar improvements */
.progress {
    background: rgba(0, 0, 0, 0.3) !important;
    border-radius: 10px !important;
}

.progress-bar {
    background: linear-gradient(45deg, #6a5acd, #9370db) !important;
}

/* List group improvements */
.list-group-item {
    background: rgba(0, 0, 0, 0.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
}

.list-group-item:hover {
    background: rgba(0, 0, 0, 0.5) !important;
}

/* Tooltip improvements */
.tooltip-inner {
    background: rgba(0, 0, 0, 0.9) !important;
    backdrop-filter: blur(10px);
    border-radius: 8px !important;
}

/* Popover improvements */
.popover {
    background: rgba(0, 0, 0, 0.9) !important;
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 10px !important;
}

.popover-header {
    background: rgba(106, 90, 205, 0.3) !important;
    color: #fff !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.popover-body {
    color: #fff !important;
}
/* ================================================
   CLOCK DISPLAY FIXES FOR NEW LAYOUT
   ================================================ */

/* Clock timer display using CSS variables */
.clock-hours:before {
    content: var(--timer-hours, '00');
}

.clock-minutes:before {
    content: var(--timer-minutes, '00');
}

.clock-seconds:before {
    content: var(--timer-seconds, '00');
}

.clock-day:before {
    content: var(--timer-day, 'Mon');
}

/* Clock styling improvements */
.parent_nav_clock_top {
    top: 10px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100% !important;
    text-align: center !important;
}

.clock-container {
    justify-content: center !important;
    margin-bottom: 8px !important;
}

.parent_nav_clock_top h6 {
    color: rgba(255, 255, 255, 0.9) !important;
    margin: 0 !important;
    font-size: 12px !important;
    font-weight: 300 !important;
}

/* Online players count styling */
.player_online {
    display: inline-block !important;
    font-size: 22px !important;
    font-weight: bold !important;
    /* color: #52ff2e !important; */
} 

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .clock-container {
        font-size: 12px !important;
    }
    
    .clock-timer {
        padding: 2px 6px !important;
        font-size: 12px !important;
    }
    
    .parent_nav_clock_top h6 {
        font-size: 10px !important;
    }
    
    .player_online {
        font-size: 18px !important;
    }
}
/* ================================================
   SIDEBAR COMPONENTS MODERN STYLING
   ================================================ */

/* Server Info Panel */
#parent_server_info .card {
    background: rgba(0, 0, 0, 0.4) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 15px !important;
}

#parent_server_info .card-body {
    /* background: rgba(106, 90, 205, 0.2) !important; */
    border-radius: 15px !important;
}

#parent_server_info h3 {
    color: #fff !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
}

#parent_server_info .list-group-item {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.9) !important;
    border: none !important;
    padding: 5px 0 !important;
}

#parent_server_info .text-warning {
    color: #ffd700 !important;
}

#parent_server_info .text-danger {
    color: #ff6b6b !important;
}

/* Hot Items Panel */
.hot_items_section {
    background: rgba(0, 0, 0, 0.4) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 15px !important;
    padding: 20px !important;
    margin-bottom: 20px !important;
}

.hot_items_section h3 {
    color: #fff !important;
    margin-bottom: 15px !important;
}

.hot_items_section .card {
    background: rgba(0, 0, 0, 0.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 10px !important;
}

.hot_items_section .card-body {
    background: transparent !important;
    color: #fff !important;
}

/* Top Donation Panel */
.top_donation_section {
    background: rgba(0, 0, 0, 0.4) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 15px !important;
    padding: 20px !important;
    margin-bottom: 20px !important;
}

.top_donation_section h3 {
    color: #fff !important;
    margin-bottom: 15px !important;
}

.top_donation_section .table {
    background: rgba(0, 0, 0, 0.2) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 10px !important;
}

.top_donation_section .table th {
    background: rgba(106, 90, 205, 0.3) !important;
    color: #fff !important;
    border: none !important;
}

.top_donation_section .table td {
    background: rgba(0, 0, 0, 0.1) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* News section improvements */
.parent_server_hot_news {
    margin-bottom: 20px;
}

.parent_server_hot_news .card {
    background: rgba(0, 0, 0, 0.4) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 15px !important;
}

.parent_server_hot_news h5 {
    color: #fff !important;
}

.parent_server_hot_news a {
    color: #6a5acd !important;
    transition: color 0.3s ease;
}

.parent_server_hot_news a:hover {
    color: #9370db !important;
    text-decoration: none !important;
}

/* Gallery improvements */
.gallery-section {
    background: rgba(0, 0, 0, 0.4) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 15px !important;
    padding: 20px !important;
    margin: 20px 0 !important;
}

.gallery-section h3 {
    color: #fff !important;
    margin-bottom: 15px !important;
}

/* Image hover effects */
.gallery-section img {
    transition: all 0.3s ease;
    border-radius: 10px !important;
}

.gallery-section img:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(106, 90, 205, 0.4);
}

/* Carousel improvements for modern design */
.carousel-item img {
    transition: all 0.5s ease;
}

.carousel-item.active img {
    transform: scale(1.02);
}

.carousel-control-prev,
.carousel-control-next {
    background: rgba(106, 90, 205, 0.3) !important;
    backdrop-filter: blur(10px);
    border-radius: 50% !important;
    width: 50px !important;
    height: 50px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    transition: all 0.3s ease !important;
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
    background: rgba(106, 90, 205, 0.6) !important;
    transform: translateY(-50%) scale(1.1) !important;
}

.carousel-indicators {
    bottom: 15px !important;
}

.carousel-indicators li {
    background-color: rgba(255, 255, 255, 0.4) !important;
    border-radius: 50% !important;
    width: 12px !important;
    height: 12px !important;
    margin: 0 5px !important;
    transition: all 0.3s ease !important;
}

.carousel-indicators .active {
    background-color: #6a5acd !important;
    transform: scale(1.3) !important;
}

/* Scrollbar styling for webkit browsers */
.tab-content::-webkit-scrollbar,
.card-body::-webkit-scrollbar {
    width: 6px;
}

.tab-content::-webkit-scrollbar-track,
.card-body::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 3px;
}

.tab-content::-webkit-scrollbar-thumb,
.card-body::-webkit-scrollbar-thumb {
    background: rgba(106, 90, 205, 0.5);
    border-radius: 3px;
}

.tab-content::-webkit-scrollbar-thumb:hover,
.card-body::-webkit-scrollbar-thumb:hover {
    background: rgba(106, 90, 205, 0.8);
}

/* Loading animation improvements */
.modal_waiting {
    background: rgba(0, 0, 0, 0.8) !important;
    backdrop-filter: blur(15px) !important;
}

/* Preloader improvements for modern design */
#preloader2 {
    background: url("../img/bg_full_loading.webp") no-repeat center center !important;
    background-size: cover !important;
}

.preloader2_image img {
    filter: drop-shadow(0 0 30px rgba(106, 90, 205, 0.6));
}

/* Text selection styling */
::selection {
    background: rgba(106, 90, 205, 0.3);
    color: #fff;
}

::-moz-selection {
    background: rgba(106, 90, 205, 0.3);
    color: #fff;
}

/* Focus outline styling */
*:focus {
    outline: 2px solid rgba(106, 90, 205, 0.5) !important;
    outline-offset: 2px !important;
}

/* Smooth transitions for all interactive elements */
a, button, input, select, textarea, .card, .btn {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Ensure proper spacing in mobile */
@media (max-width: 768px) { 
    
    #parent_server_info,
    .hot_items_section,
    .top_donation_section,
    .gallery-section {
        padding: 15px !important;
        margin: 10px 0 !important;
    }
    
    .modern-nav {
        padding: 8px 0 !important;
    }
    
    .modern-nav .nav-content {
        padding: 0 10px !important;
    }
}
/* ================================================
   HIDE OLD MENU COMPONENTS TO PREVENT DUPLICATION
   ================================================ */

/* Hide old navigation elements */
.parent_main_navbar,
.main_navbar,
.old-nav,
.navbar-old {
    display: none !important;
}

/* Hide any duplicate navigation that might appear */
.duplicate-nav,
.secondary-nav {
    display: none !important;
}

/* ================================================
   HIDE OLD MENU SYSTEM  
   ================================================ */

/* Hide old navigation completely */
.parent_nav {
    display: none !important;
}

.card.parent_nav {
    display: none !important;
}

/* Ensure only our modern nav is visible */
nav:not(.modern-nav) {
    display: none !important;
}

/* Exception: Keep certain navigation elements if needed */
.modern-nav {
    display: flex !important;
}

/* Hide mobile menu duplicates */
@media (max-width: 768px) {
    .old-mobile-menu {
        display: none !important;
    }
}
/* ================================================
   HIDE OLD MOBILE MENU AND IMPROVE MODERN NAV FOR MOBILE
   ================================================ */

/* Hide old mobile menu components */
.list_mobile_menu,
#parent_menu_mobile,
.child_menu_mobile {
    display: none !important;
}

/* Modern navigation mobile improvements */
@media (max-width: 768px) {
    .modern-main-nav {
        display: none;
        position: fixed;
        top: 100%;
        left: 0;
        right: 0;
        background: rgba(10, 25, 47, 0.98);
        backdrop-filter: blur(20px);
        border-top: 1px solid rgba(64, 224, 208, 0.2);
        flex-direction: column;
        padding: 2rem 1rem;
        gap: 1.5rem;
        z-index: 999;
        transition: all 0.3s ease;
        max-height: 70vh;
        overflow-y: auto;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-20px);
    }
    
    .modern-main-nav.show {
        display: flex;
        top: 70px;
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    
    .nav-item-circle {
        flex-direction: column;
        align-items: center;
    }
    
    .nav-dropdown {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        background: rgba(0, 0, 0, 0.3);
        border: none;
        border-radius: 8px;
        margin-top: 0.5rem;
        box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.2);
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }
    
    .nav-item-circle:hover .nav-dropdown,
    .nav-item-circle.active .nav-dropdown {
        max-height: 300px;
    }
    
    /* Mobile menu toggle button */
    .mobile-menu-toggle {
        display: block;
        background: none;
        border: none;
        color: #fff;
        font-size: 24px;
        cursor: pointer;
        padding: 8px;
        border-radius: 5px;
        transition: all 0.3s ease;
    }
    
    .mobile-menu-toggle:hover {
        background: rgba(64, 224, 208, 0.1);
        color: #40E0D0;
    }
}
    
.modern-nav .mobile-menu-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
}
    
/* Hide mobile toggle on desktop */
@media (min-width: 769px) {
    .modern-nav .mobile-menu-toggle {
        display: none !important;
    }
}

/* Desktop: hide mobile toggle */
.modern-nav .mobile-menu-toggle {
    display: none;
}

/* Improve Play Now button on mobile */
@media (max-width: 768px) {
    .modern-nav .play-now-btn {
        padding: 10px 20px;
        font-size: 14px;
        margin-left: 10px;
    }
}
/* ================================================
   NAV RIGHT CONTAINER STYLING
   ================================================ */

.modern-nav .nav-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

@media (max-width: 768px) {
    .modern-nav .nav-right {
        gap: 10px;
    }
}

/* Mobile Responsive for Sidebar */
@media (max-width: 768px) {
    .luna-logo-circle {
        width: 100px;
        height: 100px;
    }
    
    .luna-logo-img {
        width: 60px;
        height: 60px;
    }
    
    .luna-text {
        font-size: 20px;
    }
    
    .online-text {
        font-size: 14px;
    }
    
    .online-players-count {
        font-size: 24px;
    }
    
    .account-info-panel {
        padding: 15px;
    }
    
    .info-row {
        padding: 10px 0;
    }
    
    .info-label, .info-value {
        font-size: 12px;
    }
}

/* Modern Account Info Panel Styles */
.modern-account-info-panel {
    background: rgba(4, 31, 71, 0.85) !important;
    backdrop-filter: blur(5px);
    border: 1px solid #a5b5e3 !important;
    border-radius: 10px;
    margin-bottom: 15px;
    box-shadow: 0 4px 15px rgba(184, 134, 11, 0.3);
    overflow: hidden;
    z-index: -1;
    margin-top: -10px;
}

.modern-account-body {
    padding: 0;
    /* background: linear-gradient(45deg, rgba(184, 134, 11, 0.1), rgba(255, 215, 0, 0.05)); */
}

.modern-account-header {
    /* background: linear-gradient(45deg, #b8860b, #ffd700); */
    color: #000;
    padding: 12px 15px;
    font-weight: bold;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.3);
    margin-top: 10px;;
}

.account-icon {
    font-size: 16px;
    color: #000;
}

.account-title {
    letter-spacing: 1px;
    font-family: 'Arial', sans-serif;
    font-weight: 900;
}

.modern-account-details {
    padding: 15px;
}

.modern-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(240, 233, 218, 0.2);
}

.modern-info-row:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.modern-info-label {
    color: #b8860b;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.modern-info-value {
    color: #ffffff;
    font-size: 22px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
}

.modern-info-highlight .modern-name-link {
    color: #ffd700;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: color 0.3s ease;
}

.modern-info-highlight .modern-name-link:hover {
    color: #fff;
}

.modern-edit-icon,
.modern-diamond-icon,
.modern-luna-icon,
.modern-membership-icon,
.modern-achievement-icon {
    font-size: 11px;
    opacity: 0.8;
}

.modern-diamond-icon {
    color: #00bfff;
}

.modern-luna-icon {
    color: #ffd700;
}

.modern-membership-icon {
    color: #ff6b35;
}

.modern-achievement-icon {
    color: #32cd32;
}

.modern-account-actions {
    padding: 15px;
    border-top: 1px solid rgba(184, 134, 11, 0.2);
    /* background: rgba(0, 0, 0, 0.3); */
}

.modern-action-btn {
    /* font-size: 12px !important;
    padding: 8px 15px !important;
    border-radius: 5px !important;
    font-weight: bold !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    transition: all 0.3s ease !important; */

}

/* Responsive adjustments */
@media (max-width: 768px) {
    .modern-account-header {
        padding: 10px 12px;
        font-size: 13px;
    }
    
    .modern-account-details {
        padding: 12px;
    }
    
    .modern-info-row {
        padding: 6px 0;
        margin-bottom: 8px;
    }
    
    .modern-info-label {
        font-size: 11px;
    }
    
    .modern-info-value {
        font-size: 12px;
    }
}
/* Modern Luna Logo Section Styles */
.modern-luna-logo-section {
    text-align: center;
    /* margin-bottom: 20px; */
    margin-top: -20px;
}

.modern-logo-container {
    position: relative;
    display: inline-block;
    margin-bottom: 35px;
    margin-top: -25px;
}

.modern-logo-date {
    color: #b8860b;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 10px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    letter-spacing: 1px;
}

.modern-luna-logo-circle {
    position: relative;
    display: inline-block;
    width: 200px;
    height: 200px;
    /* border-radius: 50%;
    border: 3px solid #b8860b;
    background: radial-gradient(circle, rgba(184, 134, 11, 0.3), rgba(0, 0, 0, 0.8));
    box-shadow: 
        0 0 20px rgba(184, 134, 11, 0.6),
        inset 0 0 20px rgba(184, 134, 11, 0.2); */
    overflow: hidden;
}

.modern-luna-logo-img {
    width: 300px;
    /* height: 180px;
    border-radius: 50%; */
    position: relative;
    /* top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    object-fit: cover; */
}

.modern-logo-text {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

.modern-luna-text {
    color: #ffd700;
    font-size: 18px;
    font-weight: 900;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
    letter-spacing: 2px;
    margin: 0;
    line-height: 1;
}

.modern-online-text {
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
    letter-spacing: 1px;
    margin: 0;
    line-height: 1;
}

.modern-wings-decoration {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 250px;
    height: 250px;
    pointer-events: none;
}

.modern-wing {
    position: absolute;
    width: 30px;
    height: 60px;
    background: linear-gradient(45deg, #b8860b, #ffd700);
    border-radius: 50% 10% 50% 10%;
    opacity: 0.7;
}

.modern-left-wing {
    left: -40px;
    top: 50%;
    transform: translateY(-50%) rotate(-15deg);
    animation: wingFlap 3s ease-in-out infinite;
}

.modern-right-wing {
    right: -40px;
    top: 50%;
    transform: translateY(-50%) rotate(15deg) scaleX(-1);
    animation: wingFlap 3s ease-in-out infinite reverse;
}

@keyframes wingFlap {
    0%, 100% {
        transform: translateY(-50%) rotate(-15deg);
    }
    50% {
        transform: translateY(-50%) rotate(-25deg);
    }
}

/* Online Players Counter */
.modern-online-players-section {
    background: rgba(4, 31, 71, 0.85);
    backdrop-filter: blur(5px);
    border: 1px solid #a5b5e3;
    border-radius: 15px;
    padding: 5px;
    margin-top: -120px;
    box-shadow: 0 4px 15px rgba(184, 134, 11, 0.3);
    z-index: 1;
    position: relative;
    width: 60%;
    margin-left: auto;
    margin-right: auto;
}

.modern-online-players-label {
    color: #92cd18 !important;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 1px;
    /* margin-bottom: 2px; */
    text-transform: uppercase;
    /* text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8); */
}

.modern-online-players-count {
    /* background: linear-gradient(45deg, #b8860b, #ffd700); */
    color: #fff !important;
    margin-top: -10px;
    font-size: 24px;
    font-weight: 900;
    /* padding: 8px 15px; */
    border-radius: 10px;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.3);
    /* box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3); */
    letter-spacing: 2px;
}

.modern-online-players-count .player_online {
    color: inherit;
    font-weight: inherit;
}

/* Responsive adjustments for modern logo */
@media (max-width: 768px) {
    /* .modern-luna-logo-circle {
        width: 150px;
        height: 150px;
    } */
    
    .modern-luna-logo-img {
        width: 100%;
        /* height: 130px; */
    }
    
    .modern-luna-text {
        font-size: 16px;
    }
    
    .modern-online-text {
        font-size: 12px;
    }
    
    .modern-wings-decoration {
        width: 200px;
        height: 200px;
    }
    
    .modern-wing {
        width: 25px;
        height: 50px;
    }
}
/* Modern Login Panel Styles */
.modern-login-panel {
    background: rgba(0, 0, 0, 0.85);
    border: 2px solid #b8860b;
    border-radius: 10px;
    margin-bottom: 15px;
    box-shadow: 0 4px 15px rgba(184, 134, 11, 0.3);
    overflow: hidden;
}

.modern-login-header {
    background: linear-gradient(45deg, #b8860b, #ffd700);
    color: #000;
    padding: 12px 15px;
    font-weight: bold;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.3);
}

.modern-login-icon {
    font-size: 16px;
    color: #000;
}

.modern-login-title {
    letter-spacing: 1px;
    font-family: 'Arial', sans-serif;
    font-weight: 900;
}

.modern-login-body {
    padding: 20px 15px;
    background: linear-gradient(45deg, rgba(184, 134, 11, 0.1), rgba(255, 215, 0, 0.05));
}

.modern-login-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.modern-input-group {
    position: relative;
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid #b8860b;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.modern-input-group:focus-within {
    border-color: #ffd700;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}

.modern-input-icon {
    background: linear-gradient(45deg, #b8860b, #ffd700);
    color: #000;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
}

.modern-input-icon i {
    font-size: 14px;
}

.modern-form-control {
    background: transparent;
    border: none;
    color: #ffffff;
    padding: 12px 15px;
    font-size: 14px;
    flex: 1;
    outline: none;
}

.modern-form-control::placeholder {
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
}

.modern-form-control:focus {
    background: rgba(255, 255, 255, 0.05);
}

.modern-login-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}

.modern-login-btn,
.modern-register-btn {
    width: 100% !important;
    font-size: 13px !important;
    padding: 10px !important;
    font-weight: bold !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    border-radius: 6px !important;
    transition: all 0.3s ease !important;
}

.modern-forgot-password {
    text-align: center;
    margin-top: 10px;
}

.modern-forgot-link {
    color: #b8860b;
    font-size: 12px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: color 0.3s ease;
}

.modern-forgot-link:hover {
    color: #ffd700;
    text-decoration: none;
}

.modern-forgot-link i {
    font-size: 11px;
}

/* Responsive adjustments for login panel */
@media (max-width: 768px) {
    .modern-login-header {
        padding: 10px 12px;
        font-size: 13px;
    }
    
    .modern-login-body {
        padding: 15px 12px;
    }
    
    .modern-input-group {
        margin-bottom: 10px;
    }
    
    .modern-input-icon {
        padding: 10px;
        min-width: 35px;
    }
    
    .modern-form-control {
        padding: 10px 12px;
        font-size: 13px;
    }
}

/* Modern Server Info Panel Styles */
.modern-server-info-panel {
    background: rgba(0, 0, 0, 0.85);
    border: 2px solid #b8860b;
    border-radius: 10px;
    margin-bottom: 15px;
    box-shadow: 0 4px 15px rgba(184, 134, 11, 0.3);
    overflow: hidden;
}

.modern-server-header {
    background: linear-gradient(45deg, #b8860b, #ffd700);
    color: #000;
    padding: 12px 15px;
    font-weight: bold;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.3);
}

.modern-server-icon {
    font-size: 16px;
    color: #000;
}

.modern-server-title {
    letter-spacing: 1px;
    font-family: 'Arial', sans-serif;
    font-weight: 900;
}

.modern-server-body {
    padding: 20px 15px;
    background: linear-gradient(45deg, rgba(184, 134, 11, 0.1), rgba(255, 215, 0, 0.05));
}

.modern-server-location {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: rgba(184, 134, 11, 0.2);
    padding: 10px 15px;
    border-radius: 8px;
    margin-bottom: 15px;
    color: #ffd700;
    font-weight: bold;
    font-size: 14px;
}

.modern-server-location i {
    font-size: 16px;
    color: #b8860b;
}

.modern-server-separator {
    height: 2px;
    background: linear-gradient(90deg, transparent, #b8860b, transparent);
    margin: 15px 0;
    opacity: 0.6;
}

.modern-server-stats {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.modern-server-stat-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(0, 0, 0, 0.4);
    padding: 12px;
    border-radius: 8px;
    border-left: 3px solid #b8860b;
    transition: all 0.3s ease;
}

.modern-server-stat-item:hover {
    background: rgba(184, 134, 11, 0.1);
    border-left-color: #ffd700;
    transform: translateX(5px);
}

.modern-stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    background: linear-gradient(45deg, #b8860b, #ffd700);
    color: #000;
    flex-shrink: 0;
}

.modern-stat-icon.exp {
    background: linear-gradient(45deg, #ff6b35, #f7931e);
}

.modern-stat-icon.drop {
    background: linear-gradient(45deg, #e74c3c, #c0392b);
}

.modern-stat-icon.gold {
    background: linear-gradient(45deg, #f39c12, #e67e22);
}

.modern-stat-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.modern-stat-label {
    color: rgba(255, 255, 255, 0.8);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.modern-stat-value {
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

/* Modern Top Donation Panel Styles */
.modern-top-donation-panel {
    background: rgba(0, 0, 0, 0.85);
    border: 2px solid #b8860b;
    border-radius: 10px;
    margin-bottom: 15px;
    box-shadow: 0 4px 15px rgba(184, 134, 11, 0.3);
    overflow: hidden;
}

.modern-donation-header {
    background: linear-gradient(45deg, #b8860b, #ffd700);
    color: #000;
    padding: 12px 15px;
    font-weight: bold;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.3);
}

.modern-donation-icon {
    font-size: 16px;
    color: #000;
}

.modern-donation-title {
    letter-spacing: 1px;
    font-family: 'Arial', sans-serif;
    font-weight: 900;
}

.modern-donation-body {
    padding: 15px;
    background: linear-gradient(45deg, rgba(184, 134, 11, 0.1), rgba(255, 215, 0, 0.05));
}

.modern-donation-table-container {
    background: rgba(0, 0, 0, 0.4);
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(184, 134, 11, 0.3);
}

.modern-donation-table {
    width: 100%;
    margin: 0;
    background: transparent;
}

.modern-donation-header-row {
    background: linear-gradient(45deg, rgba(184, 134, 11, 0.8), rgba(255, 215, 0, 0.6)) !important;
}

.modern-donation-th {
    color: #000 !important;
    font-weight: bold !important;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.3) !important;
    padding: 12px 8px !important;
    text-align: center !important;
    border: none !important;
    font-size: 13px !important;
    letter-spacing: 0.5px !important;
}

.modern-donation-tbody tr {
    border-bottom: 1px solid rgba(184, 134, 11, 0.2);
    transition: background 0.3s ease;
}

.modern-donation-tbody tr:hover {
    background: rgba(184, 134, 11, 0.1);
}

.modern-donation-tbody td {
    color: #fff !important;
    padding: 10px 8px !important;
    text-align: center !important;
    border: none !important;
    font-size: 12px !important;
}

.modern-donation-tbody tr:first-child td {
    color: #ffd700 !important;
    font-weight: bold !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8) !important;
}

.modern-donation-tbody tr:nth-child(2) td {
    color: #c0c0c0 !important;
    font-weight: bold !important;
}

.modern-donation-tbody tr:nth-child(3) td {
    color: #cd7f32 !important;
    font-weight: bold !important;
}

/* Responsive adjustments for server info and donation panels */
@media (max-width: 768px) {
    .modern-server-header,
    .modern-donation-header {
        padding: 10px 12px;
        font-size: 13px;
    }
    
    .modern-server-body,
    .modern-donation-body {
        padding: 15px 12px;
    }
    
    .modern-server-stat-item {
        padding: 10px;
        gap: 10px;
    }
    
    .modern-stat-icon {
        width: 35px;
        height: 35px;
        font-size: 16px;
    }
    
    .modern-stat-content {
        gap: 1px;
    }
    
    .modern-stat-label {
        font-size: 11px;
    }
    
    .modern-stat-value {
        font-size: 14px;
    }
    
    .modern-donation-th {
        padding: 10px 6px !important;
        font-size: 12px !important;
    }
    
    .modern-donation-tbody td {
        padding: 8px 6px !important;
        font-size: 11px !important;
    }
}
/* Modern Hot Items Panel Styles */
.modern-hot-items-panel {
    background: rgba(0, 0, 0, 0.85);
    border: 2px solid #b8860b;
    border-radius: 10px;
    margin-bottom: 15px;
    box-shadow: 0 4px 15px rgba(184, 134, 11, 0.3);
    overflow: hidden;
}

.modern-hot-items-header {
    background: linear-gradient(45deg, #e74c3c, #f39c12);
    color: #fff;
    padding: 12px 15px;
    font-weight: bold;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    position: relative;
}

.modern-hot-items-icon {
    font-size: 16px;
    color: #fff;
    animation: flicker 2s infinite alternate;
}

@keyframes flicker {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.1);
    }
}

.modern-hot-items-title {
    letter-spacing: 1px;
    font-family: 'Arial', sans-serif;
    font-weight: 900;
    flex: 1;
}

.modern-hot-items-count {
    background: rgba(255, 255, 255, 0.2);
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: bold;
}

.hot-items-counter {
    color: #fff;
}

.modern-hot-items-body {
    padding: 15px;
    background: linear-gradient(45deg, rgba(231, 76, 60, 0.1), rgba(243, 156, 18, 0.05));
}

.modern-hot-items-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 15px;
}

.modern-hot-item-card {
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(231, 76, 60, 0.3);
    border-radius: 8px;
    padding: 8px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.modern-hot-item-card:hover {
    background: rgba(231, 76, 60, 0.1);
    border-color: #e74c3c;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3);
}

.modern-hot-item-image {
    position: relative;
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    margin-bottom: 8px;
    overflow: hidden;
}

.hot-item-img {
    max-width: 50px;
    max-height: 50px;
    object-fit: contain;
    filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.8));
}

.modern-hot-item-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    background: linear-gradient(45deg, #e74c3c, #f39c12);
    color: #fff;
    font-size: 8px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 2px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.9;
    }
}

.modern-hot-item-info {
    text-align: center;
}

.modern-hot-item-name {
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 4px;
    line-height: 1.2;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.modern-hot-item-price {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    font-size: 10px;
    font-weight: bold;
}

.price-diamond {
    color: #00bfff;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.price-icon {
    color: #00bfff;
    font-size: 8px;
}

.price-free {
    color: #32cd32;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.modern-hot-item-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(231, 76, 60, 0.9);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 8px;
}

.modern-hot-item-card:hover .modern-hot-item-overlay {
    opacity: 1;
}

.modern-hot-item-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    color: #fff;
    text-decoration: none;
    font-size: 11px;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.modern-hot-item-link:hover {
    color: #fff;
    text-decoration: none;
}

.modern-hot-item-link i {
    font-size: 16px;
}

.modern-hot-items-footer {
    text-align: center;
    padding-top: 10px;
    border-top: 1px solid rgba(231, 76, 60, 0.3);
}

.modern-hot-items-view-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(45deg, #e74c3c, #f39c12);
    color: #fff;
    padding: 8px 15px;
    border-radius: 20px;
    text-decoration: none;
    font-size: 12px;
    font-weight: bold;
    transition: all 0.3s ease;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.modern-hot-items-view-all:hover {
    background: linear-gradient(45deg, #c0392b, #d68910);
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(231, 76, 60, 0.4);
}

/* Responsive adjustments for hot items panel */
@media (max-width: 768px) {
    .modern-hot-items-header {
        padding: 10px 12px;
        font-size: 13px;
    }
    
    .modern-hot-items-body {
        padding: 12px;
    }
    
    .modern-hot-items-grid {
        gap: 8px;
        margin-bottom: 12px;
    }
    
    .modern-hot-item-card {
        padding: 6px;
    }
    
    .modern-hot-item-image {
        height: 50px;
        margin-bottom: 6px;
    }
    
    .hot-item-img {
        max-width: 40px;
        max-height: 40px;
    }
    
    .modern-hot-item-name {
        font-size: 10px;
    }
    
    .modern-hot-item-price {
        font-size: 9px;
    }
    
    .modern-hot-items-view-all {
        padding: 6px 12px;
        font-size: 11px;
    }
}

@media (max-width: 576px) {
    .modern-hot-items-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }
    
    .modern-hot-item-card {
        padding: 4px;
    }
    
    .modern-hot-item-image {
        height: 40px;
        margin-bottom: 4px;
    }
    
    .hot-item-img {
        max-width: 30px;
        max-height: 30px;
    }
    
    .modern-hot-item-name {
        font-size: 9px;
        margin-bottom: 2px;
    }
    
    .modern-hot-item-price {
        font-size: 8px;
    }
}

/* Navigation Info Message for Non-GM Users */
.nav-info-message {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.nav-player-only {
    color: #ffd700;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 8px 16px;
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 20px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

@media (max-width: 768px) {
    .nav-player-only {
        font-size: 12px;
        padding: 6px 12px;
    }
}