:root {
    --btn-primary-disabled-opacity: 0.65;
    --btn-info-disabled-opacity: 0.65;
    --text-color: rgb(var(--text));
    --bs-white: var(--text-color);
    --text-color-dark: rgb(var(--text-dark));

    --bs-info-rgb: var(--text-info);
    --bs-body-color: rgb(var(--text)) !important;
    --bs-body-bg: rgb(var(--main-bg));
    --bs-tertiary-bg: rgb(var(--bg));

    --k4main-bg: rgb(var(--main-bg));
    --k4main-color: rgb(var(--text));
    --k4second-bg: rgb(var(--bg));
}

h1,
h2,
h3 {
    color: #fff;
    margin-bottom: 20px;
  text-shadow:
    0 0 5px #00c8ff,
    0 0 10px #00c8ff,
    0 0 20px #00c8ff,
    0 0 40px #8a2be2,
    0 0 80px #8a2be2;
}


body {
    background: rgb(var(--bg));
    color: rgba(var(--text), 1);
    font-family: 'SF Pro Display', sans-serif;
    color-scheme: dark;
}

.content {
    margin-bottom: 5rem !important;
}

.floating-div {

    position: relative;
    z-index: 10;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 100%;
    border-radius: 14px;
    background-color: rgba(var(--main-bg), 1);
    max-width: 80%;
    margin: -35px auto 25px;

}


.support-content {
    margin: 0 auto;
}

.slide-container img, #article-content img {
    width: 100%;
}

@media (max-width: 991px) {
    .slide-container img, #article-content img {
        width: 100% !important;
    }
}

.wiki-content-desktop {
    position: sticky;
    top: 4rem;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    padding-right: 15px;
}


.slide-main-wrapper {
    max-width: 1000px;
    position: relative; /* Ensure this is relative to allow absolute positioning within */
    margin-bottom: 40px;
}

.slide-wrapper {
    justify-content: center;
    display: flex;
    width: 100%;
    margin-bottom: 10px;
}

.slide-container {
    display: none;
}

.slide-nav-prev, .slide-nav-next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%); /* Center vertically */
    width: auto;
    padding: 17px;
    color: grey;
    font-weight: bold;
    font-size: 19px;
    transition: .4s ease;
    user-select: none;
}

.slide-nav-prev {
    left: 0;
    border-radius: 0 5px 5px 0;
}

.slide-nav-next {
    right: 0;
    border-radius: 5px 0 0 5px;
}

.slide-nav-prev:hover, .slide-nav-next:hover {
    background-color: rgb(var(--bg));
}

.slide-indicator {
    cursor: pointer;
    height: 16px;
    width: 16px;
    margin: 0 3px;
    background: linear-gradient(92.18deg, var(--text-color) .78%, var(--text-color-dark) 123.02%);
    opacity: .3;
    border-radius: 50%;
    display: inline-block;
    transition: background-color .5s ease;
}

.slide-indicator-active, .slide-indicator:hover {
    background: linear-gradient(92.18deg, rgb(var(--main-color)) -25.78%, rgb(var(--main-color)) 123.02%);
    opacity: 1;
}

.slide-fade {
    -webkit-animation-name: slide-fade;
    animation-name: slide-fade;
    -webkit-animation-duration: 1.4s;
    animation-duration: 1.4s;
}

@-webkit-keyframes slide-fade {
    from {
        opacity: .5;
    }
    to {
        opacity: 1;
    }
}

@keyframes slide-fade {
    from {
        opacity: .5;
    }
    to {
        opacity: 1;
    }
}


.footer-online-members .online-users {
    color: var(--text-color);
    font-family: var(--font);
}

.footer-online-members .user-group h5 {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.footer-online-members .user-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

.footer-online-members .user-avatar-small {
    width: 24px;
    height: 24px;
}

.footer-online-members .username a {
    color: var(--text-color-dark);
}

.footer-online-members .username a:hover {
    color: var(--bs-info-rgb);
}

.footer-online-members .total-count {
    font-size: 1rem;
    color: var(--text-info);
}

.footer-online-members .total-count span {
    font-weight: bold;
}

.list-group-item-action:focus, .list-group-item-action:hover {
    background: rgba(var(--main-bg), 70%) !important;
}

.card .list-group-item-action:focus, .card .list-group-item-action:hover {
    background: rgba(var(--bg), 70%) !important;
}


.navbar-nav .dropdown-menu li {
    padding: 10px;
}


a.dropdown-item {
    padding: 15px;
}

.dropdown-item.active, .dropdown-item:active {
    color: rgb(var(--text));
    background-color: rgb(var(--bg));
}

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

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: rgb(var(--text));
    background-color: rgb(var(--bg));
}


.nav-link {
    color: rgb(var(--text-dark));
}

.nav-link:focus, .nav-link:hover {
    color: rgba(var(--text-dark), 80%);
}

.nav-link.active {
    color: var(--btn-primary);
}

.btn-primary {
    background-color: var(--btn-primary);
    border-color: var(--btn-primary);
    color: rgba(var(--text), 1)
}

.btn-outline-primary {
    --bs-btn-color: var(--btn-primary);
    --bs-btn-border-color: var(--btn-primary);
    --bs-btn-hover-color: rgba(var(--text), 1);
    --bs-btn-hover-bg: var(--btn-primary);
    --bs-btn-hover-border-color: var(--btn-primary);
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: rgba(var(--text), 1);
    --bs-btn-active-bg: var(--btn-primary);
    --bs-btn-active-border-color: var(--btn-primary);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--btn-primary);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--btn-primary);
    --bs-gradient: none;
}

.btn-primary:hover {
    background-color: var(--btn-primary-hover);
    border-color: var(--btn-primary);
    color: rgba(var(--text), 1)
}

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


.card {
    background: linear-gradient(rgb(var(--main-bg)) -12.18%, rgb(var(--main-bg)) 86.88%, rgb(var(--main-bg)) 103.8%);
}

.link-primary, .text-primary {
    color: var(--btn-primary) !important;
}

.link-primary:focus, .link-primary:hover {
    color: var(--btn-primary-hover) !important;
}

.btn-primary.disabled, .btn-primary:disabled, fieldset:disabled .btn {
    color: var(--btn-primary-disabled-color) !important;
    pointer-events: none;
    background-color: var(--btn-primary-disabled-bg) !important;
    border-color: var(--btn-primary-disabled-border-color) !important;
    opacity: var(--btn-primary-disabled-opacity) !important;
}

.pagination {
    --bs-pagination-bg: rgb(var(--bg));
    --bs-pagination-focus-box-shadow: 0 0 0 0.10rem rgba(var(--main-color), 0.25);
}

.pagination .disabled > .page-link, .pagination .page-link.disabled {
    color: rgb(var(--text));
    background-color: rgb(var(--main-bg));
    border-color: rgb(var(--bg));
}

.pagination .active > .page-link, .pagination .page-link.active {
    color: rgb(var(--text));
    background-color: var(--btn-primary);
    border-color: rgb(var(--bg));
}

.pagination .page-link {
    background-color: rgb(var(--main-bg));
    color: var(--btn-primary);
    border-color: rgb(var(--bg));
}

.pagination .page-link:hover {
    background-color: rgba(var(--main-bg), 50%);
    color: var(--btn-primary);
    border-color: rgb(var(--bg));
}

.pagination .page-item:last-child .page-link, .pagination .page-item:first-child .page-link {
    background-color: rgb(var(--main-bg));
    color: var(--btn-primary);
    border-color: rgb(var(--bg));
}

.modal-content {
    background-color: rgb(var(--main-bg));
    background-clip: padding-box;
    border-color: rgb(var(--main-bg));
}

.modal {
    z-index: 1201;
}

.form-control {
    background-color: rgb(var(--bg));
    border-color: rgba(var(--main-bg), 80%);
    background-clip: padding-box;
    color: rgba(var(--text))
}

.form-select {
    background-color: rgb(var(--bg));
    border-color: rgba(var(--main-bg), 80%);
    background-clip: padding-box;
    color: rgba(var(--text))
}

.form-control:focus {
    background-color: rgb(var(--bg));
    border-color: rgba(var(--main-bg), 80%);
    color: rgba(var(--text))
}

.ez-logo {
    width: 100%;
    padding: 0;
    display: flex;
    justify-content: center; /* Added */
    text-align: center; /* Added */
    cursor: normal;
    user-select: none;
}

.ez-logo h1 {
    width: 100%; /* Added */
    margin: 0; /* Added */
}

.ez-logo .ez-text {
    animation: ez-glitch 650ms infinite;
    font-size: 84px;
    font-weight: bold;
    text-transform: uppercase;
    color: #f5f5f5;
    cursor: pointer;
    text-decoration: none;
    display: inline-block; /* Added */
}

@keyframes ez-glitch {
    0% { text-shadow: none }
    25% { text-shadow: -2px -2px 0 #eb055a, 2px 2px 0 #4632f0 }
    50% { text-shadow: 2px -2px 0 #eb055a, -2px 2px 0 #4632f0 }
    75% { text-shadow: -2px 2px 0 #eb055a, 2px -2px 0 #4632f0 }
    100% { text-shadow: 2px 2px 0 #eb055a, -2px -2px 0 #4632f0 }
}

@media (max-width: 900px) {
    .ez-logo .ez-text { font-size: 64px }
}

@media (max-width: 480px) {
    .ez-logo .ez-text { font-size: 48px }
}

/*Server View*/

/* Navbar style */
.navbar {
  transition: all 0.4s ease;
}

.navbar-shrink {
  width: 50%;
  border-radius: 1rem;
  margin: 0 auto;
  background-color: rgba(50, 50, 50, 0.9);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* Navbar main background */
.navbar {
  background: rgba(10, 10, 20, 0.9) !important;
  border-bottom: 1px solid rgba(0, 200, 255, 0.3);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 10px rgba(0, 200, 255, 0.2);
}

/* Navbar links */
.navbar-nav .nav-link {
  color: #00c8ff;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all 0.3s ease;
}

.navbar-nav .nav-link:hover {
  color: #b400ff;
  text-shadow: 0 0 8px rgba(180, 0, 255, 0.7);
}

/* Active link */
.navbar-nav .nav-item.active .nav-link,
.navbar-nav .nav-link.active {
  color: #ffffff;
  text-shadow: 0 0 10px rgba(0, 200, 255, 0.8);
}

/* Toggler button (mobile menu button) */
.navbar-toggler {
  background: rgba(0, 200, 255, 0.2);
  border: 1px solid rgba(0, 200, 255, 0.5);
}

/* Steam login button */
.btn-primary {
  background: linear-gradient(135deg, rgba(0, 200, 255, 0.7) 0%, rgba(180, 0, 255, 0.7) 100%);
  border: none;
  color: #ffffff;
  font-weight: bold;
  text-transform: uppercase;
  padding: 8px 16px;
  border-radius: 8px;
  box-shadow: 0 0 15px rgba(0, 200, 255, 0.4);
  transition: all 0.3s ease;
}

.btn-primary:hover {
  background: linear-gradient(135deg, rgba(180, 0, 255, 0.8) 0%, rgba(0, 200, 255, 0.8) 100%);
  box-shadow: 0 0 20px rgba(180, 0, 255, 0.5);
  transform: scale(1.05);
}

/* Align center on large screens, space around on mobile */
.navbar-nav {
  text-align: center;
}

@media (max-width: 991px) {
  .navbar-nav {
    justify-content: center;
  }
}


/* Profile Dropdown */
.profile {
    position: relative;
}

.mprofile {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    cursor: pointer;
    transition: background-color 0.2s;
    border-radius: 6px;
}

.mprofile:hover .dropdown-content {
    background: rgba(255,255,255,0.1);
       opacity: 1;
  visibility: visible;
  transform: translateY(0);
  /* The fix: Bring dropdown closer to the trigger */
  top: calc(100% - 5px);

}

.profile-img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #904add;
}

.dropdown-content {
    position: absolute;
    right: 0;
    top: calc(100% + 5px);
    min-width: 240px;
    background: #2b2d31;
    border-radius: 6px;
    padding: 1rem;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    display: none;
    z-index: 1001;
    border: 1px solid #3d3f45;
}

.profile:hover .dropdown-content {
    display: block;
}

/* Responsive Adjustments */
@media (min-width: 600px) and (max-width: 1300px) {
    .nav-scroll-arrow {
        display: block;
    }
    
    .nav-links-wrapper {
        overflow-x: hidden;
    }
    
    .navbar-nav {
        flex-wrap: nowrap;
    }
}

@media (max-width: 992px) {
    .navbar-collapse {
        order: 2;
        margin-top: 1rem;
    }
    
    .d-flex.align-items-center.gap-2 {
        order: 3;
        margin-left: auto !important;
    }
    
    .nav-item::after {
        display: none;
    }
}

.profile:hover .dropdown-content,
.dropdown-content:hover {
    display: block;
    animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-3px); }
    to { opacity: 1; transform: translateY(0); }
}

.p-links a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    color: #b9bbbe;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.2s;
}

.p-links a:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: white;
}

.sep {
    height: 1px;
    background-color: rgba(255, 255, 255, 0.1);
    margin: 0.75rem 0;
}

.account {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.sep {
    height: 1px;
    background-color: rgba(255, 255, 255, 0.1);
    margin: 0.75rem 0;
}

.account {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}
.p-links a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    color: #b9bbbe;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.2s;
}

.p-links a:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: white;
}

.sep {
    height: 1px;
    background-color: rgba(255, 255, 255, 0.1);
    margin: 0.75rem 0;
}

.account {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.server img {
    z-index: -1;
    position: absolute;
    filter: opacity(0.2);
    object-fit: cover !important;
    height: 100% !important;
    width: 100% !important;
    transition: .3s;
}


.server:hover > img {
    filter: opacity(0.4) !important;
    transition: .3s;
}

.servers {
    display: flex;
    justify-content: center;
    padding-bottom: 20px;
}

@media (max-width: 1600px) {
    .servers .col-md-4 {
        width: 60%;
    }
}

@media (max-width: 1300px) {
    .servers .col-md-4 {
        width: 80%;
    }
}

@media (max-width: 768px) {
    .servers .col-md-4 {
        width: 100%;
    }
}

.server {
    position: relative;
    height: auto;
    overflow: hidden;
    transition: 0.3s;
    cursor: pointer;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%; /* Ensures full width within the grid */
}

.servers .row {
    width: 100%;
}

.servers .row .col-12.col-sm-6.col-md-6.col-lg-3 {
    margin-bottom: 1rem; /* Adjust bottom margin between rows */
}

.servers.single-server {
    justify-content: center; /* Center a single server */
}


.main {
    margin-left: 100px;
    height: 100%;
    padding-top: 60px;
    display: block;
    transition: all .2s ease;
    margin-right: 100px;
    min-height: 75vh;
}

.s-name {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 80%;
}

.s-rank {
    font-size: 12px;
    opacity: .6;
}

.s-count {
    display: flex;
    align-items: center;
    gap: 5px;
    opacity: .6;
}


header {
    white-space: nowrap;
    position: fixed;
    display: flex;
    align-items: center;
    padding-right: 30px;
    justify-content: space-between;
    left: 84px;
    right: 0;
    transition: all .2s ease;
    top: 0;
    height: 60px;
    z-index: 1200;
    box-shadow: none;
}

.copy:hover, .server a:hover {
    background: rgba(var(--main-bg), 30%);
    transition: .3s;
}

.footer-blocks a:hover {
    opacity: 0.8;
}

.copy {
    border-radius: 12px 0;
    color: var(--text-color);
    display: flex;
    transition: .3s;
    z-index: 1;
    text-align: center;
    justify-items: center;
    cursor: pointer;
    height: 40px;
    align-items: center;
    width: 40px;
    position: absolute;
    top: 0;
    opacity: 1;
    right: 0;
    justify-content: center;
    text-decoration: none;
}

.server a {
    border-radius: 12px 0;
    color: var(--text-color);
    display: flex;
    transition: .3s;
    z-index: 25;
    text-align: center;
    justify-items: center;
    height: 40px;
    align-items: center;
    width: 40px;
    position: absolute;
    bottom: 0;
    opacity: 1;
    right: 0;
    justify-content: center;
    text-decoration: none;
}

footer {
    padding: 0 15px 80px 115px;
    margin-top: 30px;
    border-top: 2px solid rgb(var(--main-bg));
}

.footer-link {
    color: var(--text-color);
    transition: -webkit-filter .2s ease;
    transition: filter .2s ease, -webkit-filter .2s ease;
    text-decoration: none;
    font-size: 12px;
    font-weight: 400;
}


.socials a {
    color: var(--text-color);
    padding: 5px;
    font-size: 16px;
}

footer.footer img {
    width: 150px;
}


.menu {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    bottom: 0;
    gap: 30px;
    display: flex;
    flex-direction: column;
}

.menu li a {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.menu li {
    list-style: none;
}

.menu li a span {
    font-weight: 400;
    font-size: 12px;
    line-height: 13px;
    text-align: center;
    color: rgba(var(--text-dark), 80%);
    margin-top: 8px;
    padding: 0px 5px;
}

.menu li a:hover i {
    transform: scale(1.05);
    transition: .35s;
}

.menu li a i {
    color: var(--text-color);
    font-size: 19px;
    transition: .35s;
}

.logo {
    margin-top: 1em;
}

.logo img {
    height: 100%;
}

header {
    background: rgb(var(--main-bg));
}

.profile img {
    width: 35px;
    border-radius: 50%;
}

.dropdown-content {
    right: 1em;
    top: 4em;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: rgb(var(--main-bg));
    z-index: 1;
    width: 250px;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid rgb(var(--main-bg));
}

.profile {
    cursor: pointer;
}

.mprofile img, .account img {
    width: 35px;
    height: 35px;
    border-radius: 50%;
}

.account {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: rgb(var(--bg));
    color: var(--text-color);
    width: 100%;
    opacity: .8;
    transition: .35s;
}

.account:hover {
    color: var(--text-color);
    opacity: 1;
}

.account-details {
    display: flex;
    flex-direction: column;
}

.account-details b {
    font-size: 12px;
}

.account-details span {
    font-size: 10px;
    opacity: 0.8;
}

.p-links a {
    font-size: 14px;
    padding: 10px 15px;
    display: block;
    color: var(--text-color);
}

.p-links a:hover {
    background-color: rgb(var(--bg));
}

.p-links {
    display: flex;
    flex-direction: column;
}

a {
    text-decoration: none;
}

.sep {
    width: 100%;
    height: 2px;
    background: rgb(var(--bg));
    margin: 5px 10px;
}

.h-right {
    float: right;
}

.profile {
    cursor: pointer;
}


.logo.mobile {
    display: none;
}

.footer-blocks {
    display: flex;
    justify-content: flex-end;
}


.stats-container {
    overflow: hidden;
    border-radius: 6px;
    position: relative;
    top: 0;
    left: 0;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1em;
}

.stats-number {
    font-size: 18px;
    font-weight: 600;
    margin-right: 5px;
    color: rgb(var(--main-color));
}

.stats-label {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-color);
    text-transform: uppercase;
    transition: .3s;
}

.stats-subtitle {
    transform: translateY(28px);
    opacity: 0;
    position: relative;
    visibility: hidden;
    transition: .3s;
    font-size: 12px;
    font-weight: 600;
    color: rgb(var(--main-color));
}

.stats-content-wrapper {
    width: 170px;
}

.stats-content {
    display: flex;
    transform: translateY(10px);
    font-size: 18px;
    font-weight: 800;
    transition: .3s;
    z-index: 2;
}

.stats-box {
    display: flex !important;
    background-color: rgb(var(--main-bg));
    padding: 5px 15px;
    border-radius: 4px;
    position: relative;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    align-items: center;
    width: 100%;
}

.stats-icon {
    z-index: 2;
    display: flex;
    right: 15px;
    width: 45px;
    height: 40px;
    align-items: center;
    justify-content: center;
    background-color: rgb(var(--main-color));
    border-radius: 6px;
    transition: .3s;
    color: var(--text-color);
    margin-left: 20px;
}

.stats-box:hover .stats-label {
    transform: translateY(-50px);
    opacity: 1;
    visibility: visible;
    transition: .3s;
}

.stats-box:hover .stats-content {
    color: var(--text-color);
    transform: translateY(0px);
    transition: .3s;
}

.stats-box:hover .stats-subtitle {
    transform: translateY(-2px);
    opacity: 1;
    visibility: visible;
    transition: .3s;
}

.stats-box:hover .stats-number {
    color: var(--text-color);
}

.stats-box-wrapper {
    /* flex: 1 1 25%; This makes each item take up 20% of the row */
    max-width: 25%; /* Ensures 5 items per row */
}


.carousel-indicators {
    position: relative;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    display: flex;
    justify-content: flex-start;
    padding: 0;
    margin-right: unset;
    margin-bottom: unset;
    margin-left: unset;
    list-style: none;
}

.carousel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 0;
}

.carousel-indicators [data-bs-target] {
    box-sizing: content-box;
    flex: 0 1 auto;
    width: 20px;
    height: 20px;
    padding: 0;
    margin-right: 3px;
    margin-left: 3px;
    text-indent: -999px;
    cursor: pointer;
    background-color: transparent;
    background-clip: padding-box;
    opacity: .5;
    transition: opacity .6s ease;
    border: 2px solid rgb(var(--main-bg));
    border-radius: 50px;
}

.carousel-indicators [data-bs-target].active {
    opacity: 1;
    border-color: rgb(var(--main-color)) !important;
}

.carousel-indicators [data-bs-target] {
    border-color: var(--text-color);
}


.carousel-slide-bg {
    background-size: cover;
    background-position: center;
    height: 350px; /* Reduce height for a more balanced view */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.carousel-content {
    width: 100%;
    padding: 30px; /* Adjust padding for better spacing */
}

.carousel-text {
    flex: 1;
    padding-left: 30px; /* Reduce left padding for better balance */
    max-width: 70%; /* Keep content to half of the width */
    background: rgba(var(--main-bg), 0.54);
    border-radius: 1em;
}


.carousel-text-title {
    color: rgb(var(--main-color));
}

.carousel-text h3 {
    font-size: 3rem; /* Reduce title size slightly */
    font-weight: 800; /* Stronger font-weight */
}

.carousel-text p {
    font-size: 1.5rem; /* Reduce text size slightly */
    line-height: 1.4;
}

.carousel-action {
    padding-right: 30px; /* Reduce right padding for better balance */
}

.carousel-action a {
    font-size: 1.5rem; /* Adjust button size slightly */
    padding: 12px 25px; /* Adjust padding for the button */
}

.carousel-slide-bg {
    user-select: none; /* Prevent text selection on the carousel background */
}

.carousel-text, .carousel-action {
    user-select: none; /* Prevent text selection on the text and action button */
}


.total-online {
    display: flex;
    align-items: center;
    font-family: Arial, sans-serif;
}

.total-online span {
    display: flex;
    align-items: center;
}

.live-dot {
    width: 10px;
    height: 10px;
    background-color: rgb(var(--bg-primary));
    border-radius: 50%; /* Ensures the element is a perfect circle */
    margin-right: 8px;
    position: relative;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(var(--bg-primary), 0.7);
    }
    70% {
        box-shadow: 0 0 10px 10px rgba(var(--bg-primary), 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(var(--bg-primary), 0);
    }
}

.global-all-online-players {
    font-size: 18px;
    font-weight: bold;
}


.socials a.discord:hover {
    color: #5865F2; /* Discord blue */
}

.socials a.youtube:hover {
    color: #FF0000; /* YouTube red */
}

.socials a.twitter:hover {
    color: #1DA1F2; /* Twitter blue */
}

.socials a.teamspeak:hover {
    color: #2580C3; /* TeamSpeak blue */
}

.socials a.telegram:hover {
    color: #0088CC; /* Telegram blue */
}

a {
    transition: color 0.3s ease;
}

.or-divider {
    position: relative;
    width: 0.3em;
    height: 2.57142857em;
    z-index: 3;
}

.profile-buttons .or-divider:before {
    position: absolute;
    text-align: center;
    content: 'OR';
    border-radius: 500rem;
    top: 50%;
    left: 50%;
    background-color: rgb(var(--bg));
    text-shadow: none;
    margin-top: -0.89285714em;
    margin-left: -0.89285714em;
    width: 1.78571429em;
    height: 1.78571429em;
    line-height: 1.78571429em;
    color: white;
    font-style: normal;
    font-weight: 700;
    -webkit-box-shadow: 0 0 0 1px transparent inset;
    box-shadow: 0 0 0 1px transparent inset;
}


.loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(var(--main-color), 20%); /* Adjust this according to your theme */
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.loader-content {
    display: flex;
    width: 100%;
    height: 100%;
    z-index: 1000; /* Keeps loader above the content */
}

.loader-left,
.loader-right {
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Loader parts stay on top */
}

.loader-left {
    background-color: rgb(var(--main-bg)); /* Left panel color */
}

.loader-right {
    background-color: rgb(var(--bg)); /* Right panel color */
}

.loader-name {
    color: rgb(var(--main-color));
    font-family: 'Arial', sans-serif;
}

.loader-logo {
    width: 450px;
}

/* Split and Slide Animation */
@keyframes slideLeft {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

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

/* Fade-out effect for the loader wrapper */
@keyframes fadeOut {
    100% {
        opacity: 0;
        visibility: hidden;
    }
}

/* Main content initial state (hidden beneath loader) */
.loaded .main-content {
    opacity: 0;
    transition: opacity 1.5s ease-in;
}

/* Apply the animation */
body.loaded .loader-left {
    animation: slideLeft 1.5s forwards ease-in-out;
}

body.loaded .loader-right {
    animation: slideRight 1.5s forwards ease-in-out;
}

body.loaded .loader-wrapper {
    animation: fadeOut 1.5s forwards ease-in-out;
}

body.loaded .main-content {
    opacity: 1; /* Gradually make the main content visible */
}


.sidebar {
    margin-bottom: 15px;
}

.sidebar ul.payments {
    display: flex;
}

.sidebar ul.payments .payment {
    margin: 0 5px 0 5px;
}

.sidebar .card-header {
    color: rgba(var(--text), 1);
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 2px;
    font-size: 18px;
}

.sidebar .payment img {
    width: 35px;
    height: 35px;
    object-fit: cover;
    border-radius: 6px;
}

.sidebar .top-donator .card-header {
    color: rgba(var(--text), 1);
    letter-spacing: 2px;
    padding: 0;
    text-align: center;
    font-size: 17px;
    font-weight: bold;
    text-transform: uppercase;
    background: transparent;
    border-color: var(--main-color);
}

/*.sidebar .top-donator .card-header{*/
/*    background-color: rgba(var(--bs-body-bg-rgb));*/
/*    padding: 10px;*/
/*}*/

.sidebar .top-donator .info .ign {
    margin-top: 2px !important;
    margin-bottom: 0 !important;
    font-size: 15px !important;
}

.sidebar .top-donator .avatar {
    overflow: hidden;
}

.sidebar .top-donator .card-body {
    padding: 5px;
}

.sidebar .top-donator .card-body {
    padding: 5px 0 0 0;
}

.sidebar .top-donator .avatar {
    position: relative;
    float: left;
    width: 40%;
}

.sidebar .top-donator .avatar .user-avatar {
    width: 96px;
    height: 83px;
    font-size: 58px;
}

.sidebar .top-donator .info {
    float: left;
    width: 65%;
    text-align: left;
}

.sidebar .top-donator {
    display: flex;
    align-items: center;
}

.sidebar .top-donator .avatar img {
    width: 55px;
}

.server-view .img-thumbnail {
    background-color: rgb(var(--main-bg));
    border: 1px solid rgb(var(--main-color));
    width: 270px;
    height:206px;
}


.leaderboards .ranking-points {
    position: absolute;
    padding-left: 22px;
    padding-top: 2px;
    font-style: italic;
    font-weight: 700;
}

.leaderboards .ranking-image {
    height: 35px;
    font-size: 16px;
    align-items: center;
    justify-content: center;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    text-shadow: 0 1px 0 black;
    font-weight: 700;
    margin: auto;
}

.leaderboards .top-name {
    color: var(--k4main-color);
    font-weight: 700;
    user-select: none;
    font-size: 10px;
    max-width: 45px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}


.leaderboards .stats-block {
    background-color: var(--k4second-bg);
    height: 100%;
    border-radius: 6px;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 5px;
    justify-content: center;
    overflow: hidden;
}

.leaderboards .stats-title {
    font-size: 12px;
    text-transform: uppercase;
    font-weight: bolder;
    color: var(--k4main-color);
    opacity: .8;
}

.leaderboards .stats-color {
    font-size: 18px;
    font-weight: 700;
    color: var(--k4main-color);
}

.leaderboards .top-stats {
    display: grid;
    grid-template-columns: repeat(var(--leaderboardsStatsGridTemplate), 1fr);
    align-items: center;
    width: 100%;
    height: 100%;
    justify-items: center;
    grid-gap: 15px;
}

#leaderboards-server-data .top-stats {
    grid-template-columns: repeat(var(--leaderboardsStatsGridTemplateServerData), 1fr);
}

.cs16gungame#leaderboards-server-data .top-stats {
    grid-template-columns: repeat(3, 1fr);
}

.rank-badge {
    display: inline-block;
    padding: 3px 8px 4px;
    font-weight: 600;
    min-width: 1.75rem;
    height: 1.75rem;
    box-sizing: border-box;
    font-size: 1rem;
    line-height: 1.2rem;
    vertical-align: middle;
    border-radius: 4px;
    background-color: #757575;
    color: white;
}

.rank-username-1 {
    color: #ffd700;
}

.rank-username-2 {
    color: #c0c0c0;
}

.rank-username-3 {
    color: #CD7F32;
}

.rank-border-1 {
    border-bottom: 2px solid #ffd700;
}

.rank-border-2 {
    border-bottom: 2px solid #c0c0c0;
}

.rank-border-3 {
    border-bottom: 2px solid #CD7F32;
}

.leaderboards .stats-block .rank-image img {
    max-width: 110px;
    height: auto;
}

.leaderboards .top-player {
    justify-content: center;
    background-color: var(--k4main-bg);
    border-radius: 12px;
    position: relative;
    display: flex;
    flex-direction: row;
    width: 100%;
    padding: 13px 13px;
    align-items: center;
    gap: 10px;
}

.leaderboards .top-players {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-bottom: 10px;
    gap: 10px;
}


.leaderboards .table .rating-rank {
    width: 100%;
    height: 100%;
}


.server-modal .modal-content {
    background: linear-gradient(0deg, rgb(var(--main-bg)) 71.09%, rgba(19, 24, 33, 0) 129.73%), rgb(var(--main-bg));
    box-shadow: 0 4px 134px 0 rgba(0, 0, 0, .37);
    border-radius: 30px;
}

.server-modal .modal-header {
    display: flex;
    flex-direction: column;
}

.server-modal .ctteam img, .server-modal .tteam img {
    margin: 0 25px;
    width: 60px;
}

.server-modal .ctteam, .server-modal .tteam {
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
}

.server-modal .sid {
    margin-bottom: 6px;
    font-weight: 500;
    font-size: 12px;
    text-transform: uppercase;
    color: var(--text-color);
    text-align: center;
}

.server-modal .score {
    font-weight: 700;
    font-size: 25px;
    line-height: 30px;
    margin-bottom: 6px;
    color: rgba(var(--text), 1)
}

.server-modal .s-time {
    color: var(--text-color);
    font-weight: 500;
    font-size: 12px;
}

.modal-dialog.server-modal {
    transform: none;
    bottom: 0;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    justify-content: center;
    align-items: center;
    z-index: 99999;
    mix-blend-mode: normal;
    pointer-events: none;
    display: flex;
    margin-top: 0;
}

.server-modal .modal-header .btn-close {
    height: 40px;
}

.server-modal .modal-header {
    position: relative;
}

.server-modal .modal-bg img {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.server-modal .modal-bg {
    background-position: 50% !important;
    background-repeat: no-repeat !important;
    height: 128px;
    background-size: contain;
    margin: 0 0 24px;
    border-radius: 12px 12px 0 0;
    opacity: .15;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    mask-image: linear-gradient(180deg, rgb(var(--main-bg)), #0000);
}

.server-modal td.srv-avatar img {
    height: 23px;
    width: 23px;
    border-radius: 50px;
}

.server-modal .table {
    font-weight: 400;
    font-size: 12px;
    color: rgba(var(--text), 1);
    vertical-align: middle;
}

.server-modal td.srv-rank img {
    height: 20px;
}

.server-modal table.table.server-players td, table.table.server-players th {
    text-align: center;
}

.server-modal tr.s-head {
    text-transform: uppercase;
    background: rgb(var(--bg));
    border: unset;
}

.server-modal .srv-name {
    max-width: 400px;
    overflow: hidden;
}

/*.server-modal table.table.server-players tr.odd {*/
/*    border: transparent;*/
/*}*/

/*.server-modal table.table.server-players tr.even {*/
/*    border: transparent;*/
/*    background: rgb(var(--bg));*/
/*}*/

.server-modal .table-responsive {
    max-height: 300px;
    overflow-y: auto;
}

.server-modal .country img {
    height: 10px !important;
}

.server-modal .srv-avatar {
    position: relative;
}

.server-modal .country {
    position: absolute;
    right: 20px;
    bottom: 0px;
}

.server-modal table.table.server-players th {
    border: unset;
}

.server-modal .modal-footer button, .server-modal .modal-footer a {
    background: transparent;
    border: transparent;
    font-size: 12px;
    color: rgba(var(--text), 1);
    opacity: .5;
    outline: none;
    box-shadow: unset;
}

.server-modal .modal-footer a {
    opacity: 1;
}

.server-modal .modal-footer {
    display: flex;
    justify-content: space-between;
    border: transparent;
    background: rgb(var(--bg));
}

.server-modal .table tr {
    display: grid;
    grid-template-columns: 80px 110px 1fr 1fr 1fr 1fr 1fr;
}

/* Target the table and change the background */
#leaderboards {
    background-color: rgb(var(--bg)) !important; /* Override background */
    border-collapse: separate !important;
    border-spacing: 0 8px !important; /* Space between rows */
    width: 100% !important; /* Ensure the table takes full width */
}

.table-no-card {
    background-color: rgb(var(--bg)) !important; /* Override background */
    width: 100% !important; /* Ensure the table takes full width */
}

/* Target table rows */
#leaderboards tbody tr, .table-no-card tbody tr {
    background-color: rgb(var(--main-bg)) !important;
    border-radius: 10px;
    transition: background-color 0.3s ease !important;
}

/* Hover effect */
#leaderboards tbody tr:hover {
    background-color: rgba(var(--main-bg), 0.7) !important;
}


/* Ensure table layout works correctly */
#leaderboards {
    border-collapse: separate !important;
    border-spacing: 0 8px !important; /* Spacing between rows */
}

#leaderboards th, #leaderboards td {
    border: none !important; /* Remove Bootstrap table borders */
    padding: 10px !important; /* Adjust padding */
}

#leaderboards.table {
    --bs-table-bg: none;
}


.leaderboards .pagination {
    --bs-pagination-bg: rgb(var(--main-bg));
    --bs-pagination-focus-box-shadow: 0 0 0 0.10rem rgba(var(--main-color), 0.25);
}

.leaderboards .pagination .disabled > .page-link, .pagination .page-link.disabled {
    color: rgb(var(--text));
    background-color: rgb(var(--main-bg));
    border-color: rgb(var(--main-bg));
}

.leaderboards .pagination .active > .page-link, .leaderboards .pagination .page-link.active {
    color: rgb(var(--text));
    background-color: var(--btn-primary);
    border-color: rgb(var(--main-bg));
}

.leaderboards .pagination .page-link {
    background-color: rgb(var(--main-bg));
    color: var(--btn-primary);
    border-color: rgb(var(--bg));
}

.leaderboards .pagination .page-link:hover {
    background-color: rgb(var(--bg));
    color: var(--btn-primary);
    border-color: rgb(var(--main-bg));
}

.leaderboards .pagination .page-item:last-child .page-link, .leaderboards .pagination .page-item:first-child .page-link {
    color: rgb(var(--text));
    background-color: rgb(var(--main-bg));
    border-color: rgb(var(--bg));
}

#leaderboards_wrapper .row:nth-child(1), .table-no-card .dataTables_wrapper .row:nth-child(1) {
    background: none !important;
}

.table-no-card .row:nth-child(3) {
    background: none !important;
}

#leaderboards thead tr {
    background: rgba(var(--main-bg), 70%);
}


#leaderboards_filter label,
#leaderboards_length label,
.table-no-card .dataTables_filter label,
.table-no-card .dataTables_length label,
.table-no-card .dataTables_info,
.table-no-card .dataTables_paginate {
    padding: 10px;
    font-weight: bolder;
}

.move-up-on-hover {
    transition: transform 0.3s ease; /* Smooth transition */
}

.move-up-on-hover:hover {
    transform: translateY(-10px); /* Moves the element up */
}

.hover-animation:hover {
    transform: translateY(-10px);
}


.border-animate {
    --c: rgb(var(--main-color)); /* Border color */
    --b: 1px; /* Border thickness */

    padding: var(--b); /* Border thickness as padding */
    background: conic-gradient(from 180deg at top var(--b) right 2px, #0000 25%, var(--c) 0) var(--_i, 200%) 0 / 200% var(--_i, var(--b)) no-repeat,
    conic-gradient(at bottom var(--b) left var(--b), #0000 25%, var(--c) 0) 0 var(--_i, 200%) / var(--_i, var(--b)) 200% no-repeat;
    transition: .1s, background-position .1s .1s; /* Faster transition */
    cursor: pointer;
}

.border-animate:hover {
    --_i: 100%; /* Animation scale */
    transition: .1s, background-size .1s .1s; /* Faster hover transition */
}

.page-content-80 {
    width: 80%;
    margin: 0 auto
}


.jodit_theme_custom {
    --jd-color-background-default: rgb(var(--main-bg));
    --jd-color-border: rgb(var(--main-color));
    --jd-color-panel: rgb(var(--main-bg));
    --jd-color-icon: whitesmoke;
}

:root {
    --jd-color-background-light-gray: rgb(var(--bg)) !important;
    --jd-color-background-default: rgb(var(--bg)) !important;
    --jd-color-button-background-hover: rgb(var(--main-bg)) !important;
    --jd-color-text-icons: whitesmoke !important;
    --jd-color-white: rgb(var(--bg)) !important;
    --jd-color-border: rgb(var(--main-color)) !important;
    --jd-color-gray: rgb(var(--bg)) !important;
    --jd-color-background-button-hover: rgb(var(--bg)) !important;
}

.jodit-dialog__content .jodit-form__group .jodit-input_group-buttons > .jodit-button {
    fill: whitesmoke;
}


.jodit .jodit-input, .jodit .jodit-select, .jodit .jodit-textarea {
    color: whitesmoke;
}

.jodit .jodit-input[disabled], .jodit .jodit-select[disabled], .jodit .jodit-textarea[disabled] {
    background-color: rgb(var(--main-bg)) !important;
}

.jodit-ui-button_variant_primary {
    background-color: var(--btn-primary) !important;
}

.jodit-toolbar-button__trigger svg {
    fill: whitesmoke;
}

.jodit-dialog__panel {
    background-color: rgb(var(--main-bg)) !important;
}

.jodit-toolbar-button__button:focus-visible:not([disabled]), .jodit-toolbar-button__button:hover:not([disabled]) {
    background-color: rgb(var(--bg)) !important;
}

.jodit-dialog__header {
    background-color: rgb(var(--bg));
}

.ace-idle-fingers {
    background-color: rgb(var(--bg));
    color: var(--text-color)
}

.ace-idle-fingers .ace_gutter {
    background-color: rgb(var(--main-bg));
    color: var(--text-color)
}

.ace-idle-fingers .ace_gutter-active-line {
    background-color: rgb(var(--main-color));
}


.list-group-item.active {
    color: var(--text-color);
    background-color: var(--btn-primary);
    border-color: var(--btn-primary)
}

.swal2-modal {
    background-color: rgb(var(--main-bg)) !important;
    color: var(--text-color);
}

.swal2-confirm {
    background-color: rgb(var(--main-color)) !important;
    color: var(--text-color);
}


.tooltip-inner {
    background-color: rgb(var(--main-color));
    color: var(--text-color);
    padding: 10px;
    margin-bottom: 12px;
    font-weight: bold;
    max-width: 350px !important;
}


.tooltip-arrow {
    display: none !important;
}


.left-menu-modal ul li a {
    text-decoration: none;
    color: var(--text-color) !important;
    font-weight: 600;
}

.left-menu-modal ul li.nav-item {
    background: rgb(var(--bg)) !important;
    padding: 10px 10px;
    min-width: 130px;
    text-align: center;
    border-radius: 8px;
}

.left-menu-modal ul li.nav-item:hover {
    background: rgb(var(--bg), 70%) !important;
}

.left-menu-modal ul {
    list-style: none !important;
    padding-inline-start: 0 !important;
}

.left-menu-modal .modal-dialog {
    position: absolute;
    transition: all 0.3s ease;
}

.left-menu-modal .modal-content {
    margin-left: 20px;
    border-radius: 10px;
}

.left-menu-modal .modal-header {
    margin: 15px;
}


.btn-login-discord {
    background-color: rgb(var(--bg));
    color: var(--text-color);
    font-size: 24px;
}

.btn-login-discord:hover {
    background-color: rgb(var(--bg), 70%);
    color: var(--text-color);
}

.btn-login-discord i {
    color: #7289DA;
}

.btn-login-steam {
    background-color: rgb(var(--bg));
    color: var(--text-color);
    font-size: 24px;
}

.btn-login-steam:hover {
    background-color: rgb(var(--bg), 70%);
    color: var(--text-color);
}

.btn-login-steam i {
    color: rgb(var(--main-color));
}


.resource-image {
    width: 195px;
    height: 169px;
}

/*@media (min-width: 992px) {*/
/*    .modal-lg, .modal-xl {*/
/*        --bs-modal-width: 700px !important;*/
/*    }*/
/*}*/

.accordion-button:not(.collapsed){
    background: rgb(var(--bg));
    color:var(--text-color);
    box-shadow: unset !important;
}
.accordion-button:focus{
    box-shadow: unset !important;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 2px;
}

::-webkit-scrollbar-track {
    background: rgb(var(--main-bg));
}

::-webkit-scrollbar-thumb {
    background: rgb(var(--main-color));
}

::-webkit-scrollbar-thumb:hover {
    background: rgb(var(--bg));
}

/*.table-responsive thead th:first-child {
    text-align: left !important;
    padding-left: 30px !important;
}

.table-responsive tbody td a {
    width: 100% !important;
}

.table-responsive tbody td:first-child {
    display: flex;
    justify-content: flex-start;
    text-align: left;
    padding-left: 30px !important;
}*/

.top-players .top-player:first-child {
    background: linear-gradient(
  226deg, 
  rgba(10, 15, 30, 0.95) 70%,   /* deep dark blue background */
  rgba(255, 215, 0, 0.4) 80%,   /* soft gold at 80% */
  rgba(255, 215, 0, 0.7) 90%,   /* brighter gold at 90% */
  rgba(218, 165, 32, 1) 100%    /* full strong gold at 100% */
) !important;
    box-shadow: 0 4px 12px rgba(218, 165, 32, 0.5), 0 6px 20px rgba(0, 0, 0, 0.2);
}

.top-players .top-player:first-child a {
    color: rgba(255, 215, 0, 1) !important;
}

.top-players .top-player:nth-child(2) {
    background: linear-gradient(
  226deg, 
  rgba(10, 15, 30, 0.95) 70%,   /* deep dark blue */
  rgba(192, 192, 192, 0.4) 80%, /* light silver shine */
  rgba(192, 192, 192, 0.7) 90%, /* stronger silver */
  rgba(169, 169, 169, 1) 100%   /* full dark silver */
) !important;
    box-shadow: 0 4px 12px rgba(169,169,169,0.5), 0 6px 20px rgba(0,0,0,0.2);
}

.top-players .top-player:nth-child(2) a {
    color: rgba(192,192,192,1) !important;
}

.top-players .top-player:nth-child(3) {
    background: linear-gradient(
  226deg,
  rgba(10, 15, 30, 0.95) 70%,   /* deep dark blue base */
  rgba(205, 127, 50, 0.5) 80%,   /* soft gold shine */
  rgba(205, 127, 50, 0.8) 90%,   /* stronger gold */
  rgba(150, 75, 0, 1) 100%       /* deep dark bronze */
) !important;
    box-shadow: 0 4px 12px rgba(150,75,0,0.5), 0 6px 20px rgba(0,0,0,0.2);
}

.top-players .top-player:nth-child(3) a {
    color: rgba(205,127,50,1) !important;
}

.top-players .top-player .img-fluid {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    margin-right: 8px;
    border: 1px solid rgba(0, 200, 255, 0.5);
}


.main .user-cover-part {
    background-size: cover !important;
    background-position: center center !important;
    position: relative;
}

.main .user-cover-part:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.4);
}

.main .user-cover-part .btn-group,
.main .user-cover-part .avatar,
.main .user-cover-part .username,
.main .user-cover-part .grids { position: relative; z-index: 1; }

.row .col-lg-6 .card{
    height: 100%;
}

/* Main card */
.card.card-body {
  background: rgba(20, 20, 30, 0.8);
  border: 1px solid rgba(0, 200, 255, 0.5);
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(0, 200, 255, 0.3);
  padding: 30px;
  color: #ffffff;
  backdrop-filter: blur(10px);
}

.row-first .card.card-body {
    animation: realisticNeon 4s infinite ease-in-out;
}

@keyframes realisticNeon {
  0% {
    box-shadow:
      0 0 5px #ffffff,  /* bright white core */
      0 0 15px rgba(0, 200, 255, 0.6),
      0 0 30px rgba(0, 200, 255, 0.4),
      0 0 45px rgba(0, 200, 255, 0.2);
    border-color: rgba(0, 200, 255, 0.7);
  }
  50% {
    box-shadow:
      0 0 5px #ffffff,  /* bright white core */
      0 0 25px rgba(200, 0, 255, 0.7),
      0 0 50px rgba(200, 0, 255, 0.5),
      0 0 75px rgba(200, 0, 255, 0.3);
    border-color: rgba(200, 0, 255, 0.8);
  }
  100% {
    box-shadow:
      0 0 5px #ffffff,  /* bright white core */
      0 0 15px rgba(0, 200, 255, 0.6),
      0 0 30px rgba(0, 200, 255, 0.4),
      0 0 45px rgba(0, 200, 255, 0.2);
    border-color: rgba(0, 200, 255, 0.7);
  }
}

/* Dropdown selects */
#punishmentsMethods .form-select {
  background: rgba(30, 30, 50, 0.9);
  border: 1px solid rgba(0, 200, 255, 0.5);
  color: #00c8ff;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 14px;
  margin-bottom: 10px;
  transition: all 0.3s ease;
}

#punishmentsMethods .form-select:hover {
  background: rgba(0, 200, 255, 0.1);
}

/* Search and Entries Dropdown */
.dataTables_filter input,
.dataTables_length select {
  background: rgba(30, 30, 50, 0.9);
  border: 1px solid rgba(0, 200, 255, 0.5);
  color: #00c8ff;
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 14px;
  margin-left: 8px;
}

.dataTables_filter label,
.dataTables_length label {
  color: #aaa;
  font-size: 14px;
}

/* Pagination */
.pagination .page-link {
  background: rgba(30, 30, 50, 0.9);
  border: 1px solid rgba(0, 200, 255, 0.5);
  color: #00c8ff;
  border-radius: 6px;
  margin: 0 3px;
  transition: all 0.3s ease;
  font-size: 14px;
}

.pagination .page-link:hover {
  background: rgba(0, 200, 255, 0.2);
  color: #ffffff;
}

.pagination .page-item.active .page-link {
  background: rgba(0, 200, 255, 0.7);
  color: #ffffff;
  border: none;
}

/* Optional - dataTables processing animation */
#ajax-data_processing {
  background: rgba(0, 200, 255, 0.2);
  color: #00c8ff;
  border-radius: 8px;
  text-align: center;
  padding: 20px;
}

/* Card links (Mutes, Bans, etc.) */
.move-up-on-hover {
  background: rgba(20, 20, 30, 0.8);
  border: 1px solid rgba(0, 200, 255, 0.5);
  border-radius: 12px;
  box-shadow: 0 0 15px rgba(0, 200, 255, 0.3);
  transition: all 0.3s ease;
  padding: 20px;
  display: block;
}

.move-up-on-hover:hover {
  transform: translateY(-8px);
  background: rgba(0, 200, 255, 0.1);
  box-shadow: 0 0 25px rgba(0, 200, 255, 0.5);
}

/* Icon inside the card */
.move-up-on-hover i {
  color: #00c8ff;
  transition: 0.3s ease;
}

/* Change icon color on hover */
.move-up-on-hover:hover i {
  color: #b400ff;
  text-shadow: 0 0 5px rgba(180, 0, 255, 0.7);
}

/* Title (Mutes, Gags, etc.) */
.move-up-on-hover h2 {
  color: #ffffff;
  margin-top: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Badge for counts (e.g., number of mutes) */
.move-up-on-hover .badge {
  background: rgba(0, 200, 255, 0.8);
  color: #ffffff;
  font-size: 12px;
  margin-left: 6px;
} 

/* Leaderboard Table wrapper */
#leaderboards_wrapper {
  background: rgba(20, 20, 30, 0.8);
  border: 1px solid rgba(0, 200, 255, 0.5);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 0 20px rgba(0, 200, 255, 0.3);
  backdrop-filter: blur(10px);
  margin-top: 20px;
  color: #ffffff;
}

/* Leaderboard Table */
#leaderboards {
  width: 100%;
  color: #ffffff;
  border-collapse: collapse;
  background: transparent;
}

/* Table Headers */
#leaderboards thead {
  background: rgba(0, 200, 255, 0.1);
  backdrop-filter: blur(6px);
}

#leaderboards thead th {
  color: rgb(0, 200, 255);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 14px;
  padding: 12px;
  border-bottom: 2px solid rgba(0, 200, 255, 0.5);
  text-align: center;
}

/* Table Rows */
#leaderboards tbody tr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transition: background 0.3s ease;
}

#leaderboards tbody tr:hover {
  background: rgba(0, 200, 255, 0.07);
}

/* Table Cells */
#leaderboards td {
  padding: 10px;
  vertical-align: middle;
  text-align: center;
  font-size: 14px;
}

/* Player Avatar Image */
.stats-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin-right: 8px;
  border: 1px solid rgba(0, 200, 255, 0.5);
}

/* Player Name Links */
#leaderboards a {
  color: #00c8ff;
  text-decoration: none;
  transition: 0.3s ease;
}

#leaderboards a:hover {
  color: #b400ff;
  text-shadow: 0 0 5px rgba(180, 0, 255, 0.7);
}

/* Rank Badge */
.ranking-image {
  width: 40px;
  height: 40px;
  margin-left: 8px;
}

/* Points Text */
.ranking-points {
  font-size: 16px;
  color: #b1c3d9;
  font-weight: bold;
}

/* Search Field & Length Select */
#leaderboards_filter input,
#leaderboards_length select {
  background: rgba(30, 30, 50, 0.9);
  border: 1px solid rgba(0, 200, 255, 0.5);
  color: #00c8ff;
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 14px;
}

#leaderboards_filter label,
#leaderboards_length label {
  color: #aaa;
  font-size: 14px;
}

/* Pagination */
#leaderboards_paginate .page-link {
  background: rgba(30, 30, 50, 0.9);
  border: 1px solid rgba(0, 200, 255, 0.5);
  color: #00c8ff;
  border-radius: 6px;
  margin: 0 3px;
  transition: 0.3s ease;
  font-size: 14px;
}

#leaderboards_paginate .page-link:hover {
  background: rgba(0, 200, 255, 0.2);
  color: #ffffff;
}

#leaderboards_paginate .page-item.active .page-link {
  background: rgba(0, 200, 255, 0.7);
  color: #ffffff;
  border: none;
}

/* Footer main style */
.footer {
  background: rgba(10, 10, 20, 0.95);
  border-top: 1px solid rgba(0, 200, 255, 0.3);
  backdrop-filter: blur(10px);
  padding: 30px 20px;
  color: #aaa;
  font-size: 14px;
  margin-top: 50px;
}

/* Social icons */
.footer-socials a {
  color: #00c8ff;
  margin: 0 10px;
  transition: all 0.3s ease;
  font-size: 24px;
}

.footer-socials a:hover {
  color: #b400ff;
  text-shadow: 0 0 10px rgba(180, 0, 255, 0.7);
}

/* Footer middle text (copyright) */
.footer-middle span {
  color: #777;
  font-weight: 500;
}

/* Footer right section (language dropdown) */
.footer-right .dropup > a {
  color: #00c8ff;
  transition: 0.3s ease;
  font-size: 22px;
}

.footer-right .dropup > a:hover {
  color: #b400ff;
  text-shadow: 0 0 8px rgba(180, 0, 255, 0.7);
}

/* Language dropdown menu */
.footer-right .dropdown-menu {
  background: rgba(20, 20, 30, 0.95);
  border: 1px solid rgba(0, 200, 255, 0.3);
  border-radius: 8px;
  padding: 10px 0;
}

.footer-right .dropdown-item {
  color: #00c8ff;
  transition: all 0.3s ease;
}

.footer-right .dropdown-item:hover {
  background: rgba(0, 200, 255, 0.1);
  color: #ffffff;
}

/* Responsive tweak for smaller devices */
@media (max-width: 767px) {
  .footer-middle {
    margin-top: 15px;
  }
}

/* Table inside Modal */
/*.table-striped {
  background: transparent;
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(0, 200, 255, 0.05);
}

.table-striped td {
  color: #00c8ff;
  border-top: 1px solid rgba(0, 200, 255, 0.3);
  padding: 10px;
}
*/

/* Table Texts */
.avatar-name span {
  color: #ffffff;
  font-weight: bold;
}

/* Badge */
.badge.bg-primary {
  background: rgba(0, 200, 255, 0.7);
  border: 1px solid rgba(0, 200, 255, 0.8);
  color: #fff;
  padding: 8px 12px;
  font-weight: bold;
  font-size: 14px;
  border-radius: 8px;
  text-transform: uppercase;
}

/* Modal Footer */
.modal-footer {
  background: rgba(0, 200, 255, 0.1);
  border-top: 1px solid rgba(0, 200, 255, 0.4);
}

/* Close Button */
#btn-footer, .btn-danger {
  background: linear-gradient(135deg, rgba(255, 0, 80, 0.8) 0%, rgba(255, 80, 0, 0.8) 100%);
  border: none;
  color: #fff;
  font-weight: bold;
  border-radius: 10px;
  padding: 10px 20px;
  transition: all 0.3s ease;
}

/* Hover Close Button */
#btn-footer:hover, .btn-danger:hover {
  background: linear-gradient(135deg, rgba(255, 80, 0, 0.9) 0%, rgba(255, 0, 80, 0.9) 100%);
  transform: scale(1.05);
}

/* Sidebar background */
.bg-nav {
  background: rgba(20, 20, 30, 0.95);
  border: 1px solid rgba(0, 200, 255, 0.4);
  border-radius: 12px;
  backdrop-filter: blur(10px);
  box-shadow: 0 0 20px rgba(0, 200, 255, 0.2);
}

/* Sidebar Buttons */
.btn-menu {
  background: rgba(0, 200, 255, 0.1);
  border: 1px solid rgba(0, 200, 255, 0.5);
  color: #00c8ff;
  border-radius: 8px;
  padding: 8px;
  transition: all 0.3s ease;
}

/* Hover effect for sidebar buttons */
.btn-menu:hover {
  background: rgba(0, 200, 255, 0.3);
  box-shadow: 0 0 10px rgba(0, 200, 255, 0.5);
  color: #ffffff;
  transform: scale(1.02);
}

/* Active button style */
.active-side {
  background: rgba(0, 200, 255, 0.3);
  color: #ffffff;
  font-weight: bold;
  box-shadow: 0 0 12px rgba(0, 200, 255, 0.6);
}

/* Images inside buttons */
.sideBtnImg {
  background: rgba(0, 200, 255, 0.05);
  border: 1px solid rgba(0, 200, 255, 0.3);
  border-radius: 6px;
  padding: 2px;
}

/* Icons inside buttons */
.sideBtnI {
  font-size: 20px;
  color: #00c8ff;
}

/* Text inside buttons */
.btn-menu p {
  font-size: 13px;
  font-weight: bold;
  color: #00c8ff;
}

/* When active, change text color */
.active-side p {
  color: #ffffff;
}

/* Team Buttons - Normal State */
#select-team-body .btn {
  background: rgba(20, 20, 30, 0.8); /* calm dark background */
  border: 1px solid rgba(0, 200, 255, 0.4);
  color: #00c8ff;
  font-weight: bold;
  border-radius: 10px;
  padding: 10px 20px;
  margin-right: 10px;
  transition: all 0.3s ease;
}

/* Team Buttons - Hover */
#select-team-body .btn:hover {
  background: rgba(0, 200, 255, 0.2);
  color: #ffffff;
}

/* Team Buttons - Selected/Active */
#select-team-body .btn.selected-team {
  background: linear-gradient(135deg, rgba(0, 200, 255, 0.8) 0%, rgba(180, 0, 255, 0.8) 100%);
  border: none;
  color: #ffffff;
  transform: scale(1.05);
  box-shadow: 0 0 15px rgba(0, 200, 255, 0.5);
}

/* Team Buttons - Normal State */
#select-team-body .btn {
  background: rgba(20, 20, 30, 0.8);
  border: 1px solid rgba(0, 200, 255, 0.8); /* stronger neon border */
  color: #00c8ff;
  font-weight: bold;
  border-radius: 10px;
  padding: 10px 20px;
  margin-right: 10px;
  transition: all 0.3s ease;
  box-shadow: 0 0 8px rgba(0, 200, 255, 0.6); /* subtle neon glow */
}

/* Team Buttons - Hover */
#select-team-body .btn:hover {
  background: rgba(0, 200, 255, 0.15);
  color: #ffffff;
  box-shadow: 0 0 12px rgba(0, 200, 255, 0.8);
}

/* Team Buttons - Selected/Active */
#select-team-body .btn.selected-team {
  background: linear-gradient(135deg, rgba(0, 200, 255, 0.9) 0%, rgba(180, 0, 255, 0.9) 100%);
  border: none;
  color: #ffffff;
  transform: scale(1.08);
  box-shadow: 0 0 20px rgba(0, 200, 255, 0.7);
}

.text-center.mt-2.text-secondary { display: none; }

.weapon-card {
  /* background: linear-gradient(135deg, rgba(20, 20, 40, 0.85) 0%, rgba(10, 10, 30, 0.9) 100%) !important; */
  border: 1px solid rgba(0, 200, 255, 0.6) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 0 15px rgba(0, 200, 255, 0.3) !important;
  transition: all 0.4s ease !important;
  position: relative !important;
}

.weapon-card:hover {
  /* background: linear-gradient(135deg, rgba(0, 200, 255, 0.15) 0%, rgba(180, 0, 255, 0.15) 100%) !important; */
  border-color: rgba(0, 200, 255, 0.8) !important;
  box-shadow: 0 0 25px rgba(0, 200, 255, 0.6) !important;
  transform: scale(1.05) !important;
}

.loading-card {
  /* background: rgba(15, 15, 30, 0.9) !important; */
  border-radius: 16px !important;
}

.weapon-img {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  transition: transform 0.3s ease !important;
}

.weapon-card:hover .weapon-img {
  transform: scale(1.1) rotate(1deg) !important;
}

.weapon-skin-title {
  /* font-weight: bold !important; */
  font-size: 15px !important;
  /* color: #00c8ff !important; */
  margin-top: 8px !important;
  margin-bottom: 8px !important;
  /* text-shadow: 0 0 5px rgba(0, 200, 255, 0.8) !important; */
}

.button-skin {
  display: block !important;
  background: rgba(0, 200, 255, 0.15) !important;
  border: 1px solid rgba(0, 200, 255, 0.4) !important;
  color: #00c8ff !important;
  font-weight: 600 !important;
  text-align: center !important;
  padding: 6px 10px !important; /* compact padding */
  margin: 8px auto 0 auto !important; /* auto-center horizontally */
  border-radius: 8px !important;
  transition: all 0.3s ease !important;
  cursor: pointer !important;
  width: 80% !important; /* smaller width */
  max-width: 160px !important; /* limit width */
  font-size: 13px !important; /* smaller font */
  box-sizing: border-box !important;
  position: absolute !important;
  bottom: 5px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

.button-skin:hover {
  background: linear-gradient(135deg, rgba(0, 200, 255, 0.7), rgba(180, 0, 255, 0.7)) !important;
  color: #ffffff !important;
  transform: translateX(-50%) scale(1.05) !important;
  box-shadow: 0 0 8px rgba(0, 200, 255, 0.5) !important;
}

.bg-main-bg {
    background: none !important;
}

.bg-nav .sideBtnImg,
.bg-nav .sideBtnI {
  width: 38px; /* slightly bigger */
  height: 38px;
  object-fit: contain;
  margin: 0 !important;
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
  color: #ffffff;
  font-size: 22px; /* increase the font size for icons */
  transition: 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Optional: slight hover effect */
.bg-nav .btn-menu:hover .sideBtnImg,
.bg-nav .btn-menu:hover .sideBtnI {
  transform: scale(1.08);
}
.mprofile {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: rgba(0, 200, 255, 0.1);
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.3s ease, box-shadow 0.3s ease;
    color: #ffffff;
    position: relative;
}

.mprofile:hover {
    background: rgba(0, 200, 255, 0.2);
    box-shadow: 0 0 12px rgba(0, 200, 255, 0.5);
}

/* Profile Image inside */
.profile-img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid rgba(0, 200, 255, 0.5);
}

/* Username */
.username {
    font-weight: 600;
    font-size: 17px;
    white-space: nowrap;
}

/* Chevron icon */
.mprofile i {
    font-size: 16px;
    margin-left: auto;
    transition: transform 0.3s ease;
}

/* Rotate the chevron on hover (optional) */
.mprofile:hover i {
    transform: rotate(180deg);
}

.dropdown-content {
    background: rgba(15, 20, 30, 0.95);
    backdrop-filter: blur(8px);
    border-radius: 12px;
    padding: 16px;
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 220px;
    box-shadow: 0 0 20px rgba(0, 200, 255, 0.2);
    z-index: 100;
    margin-top: 8px;
    display: none; /* Initially hidden */
}

/* Account section */
.account {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(0, 200, 255, 0.2);
}

/* Larger profile image */
.profile-img-lg {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid rgba(0, 200, 255, 0.5);
}

/* Username / Account details */
.account-details b {
    color: #ffffff;
    font-size: 18px;
}

/* Links inside dropdown */
.p-links a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    color: #ccc;
    text-decoration: none;
    font-size: 16px;
    transition: color 0.3s ease;
}

/* Hover effect on links */
.p-links a:hover {
    color: #00c8ff;
}

/* Separator line */
.sep {
    height: 1px;
    width: 100%;
    background: rgba(0, 200, 255, 0.15);
    margin: 8px 0;
}

/* Special colors for special links */
.p-links a.text-info {
    color: #00bfff;
}

.p-links a.text-danger {
    color: #ff4b5c;
}

.p-links a.text-info:hover {
    color: #00f7ff;
}

.p-links a.text-danger:hover {
    color: #ff7a85;
}

.stats-box {
    background: rgba(15, 20, 30, 0.95);
    border: 1px solid rgba(0, 200, 255, 0.2);
    border-radius: 12px;
    padding: 15px 18px;
    min-width: 220px;
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #ffffff;
    box-shadow: 0 0 12px rgba(0, 200, 255, 0.1);
    transition: 0.3s ease;
}

/* Hover glow effect */
.stats-box:hover {
    box-shadow: 0 0 20px rgba(0, 200, 255, 0.4);
}

/* Content wrapper */
.stats-content-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
}

/* Big number */
.stats-number {
    font-size: 24px;
    font-weight: bold;
    color: #00c8ff;
}

/* Label */
.stats-label {
    font-size: 14px;
    color: #ccc;
    line-height: 37px;
}

/* Subtitle */
.stats-subtitle {
    font-size: 12px;
    color: #777;
}

/* Icon on the right */
.stats-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 200, 255, 0.1);
    border: 1px solid rgba(0, 200, 255, 0.3);
    border-radius: 10px;
    width: 50px;
    height: 50px;
    box-shadow: 0 0 10px rgba(0, 200, 255, 0.2);
}

/* Icon inside */
.stats-icon i {
    color: #00c8ff;
    font-size: 22px;
}

.stats-container { overflow: visible !important; }

.server img {
    z-index: -1;
    position: absolute;
    filter: brightness(0.4) contrast(1.2);
    object-fit: cover !important;
    height: 100% !important;
    width: 100% !important;
    transition: 0.3s;
}

.server:hover > img {
    filter: brightness(0.8) contrast(1.1);
    transition: 0.3s;
}

.servers {
    display: flex;
    justify-content: center;
    padding-bottom: 20px;
}

@media (max-width: 1600px) {
    .servers .col-md-4 {
        width: 60%;
    }
}

@media (max-width: 1300px) {
    .servers .col-md-4 {
        width: 80%;
    }
}

@media (max-width: 768px) {
    .servers .col-md-4 {
        width: 100%;
    }
}

.server {
    position: relative;
    height: auto;
    overflow: hidden;
    transition: 0.3s;
    cursor: pointer;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    background: #11161d; /* Dark matte background */
    border: 1px solid rgba(0, 200, 255, 0.15); /* very light neon border */
    box-shadow: 0 0 10px rgba(0, 200, 255, 0.05); /* subtle soft glow */
    backdrop-filter: blur(2px);
    height: 150px;
}

.server:hover {
    background: #1a1f29;
    border: 1px solid rgba(0, 200, 255, 0.3);
    box-shadow: 0 0 20px rgba(0, 200, 255, 0.2);
    transform: scale(1.01);
}

.servers .row {
    width: 100%;
}

.servers .row .col-12.col-sm-6.col-md-6.col-lg-3 {
    margin-bottom: 1rem;
}

.servers.single-server {
    justify-content: center;
}

/* Optional (inside server content text) */
.server .p-3 {
    color: #cccccc; /* soft gray text */
}

.server .s-name b {
    color: #00c8ff; /* slight neon for server name */
    font-size: 17px;
}

.server .s-count, .server #s-map {
    color: #7dd4ff;
    font-size: 14px;
}

/* Copy and join buttons */
.server .copy-btn, .server .join {
    background: rgba(0, 200, 255, 0.08);
    border: 1px solid rgba(0, 200, 255, 0.2);
    color: #00c8ff;
    transition: 0.3s;
}

.server .copy-btn:hover, .server .join:hover {
    background: rgba(0, 200, 255, 0.2);
    box-shadow: 0 0 10px rgba(0, 200, 255, 0.5);
}

#leaderboards {
    background: none !important;
    background-color: none !important;
    margin-top: 30px;
}

#leaderboards thead {
    background: linear-gradient(90deg, rgba(0, 200, 255, 0.2), rgba(0, 100, 150, 0.2)) !important;
}

#leaderboards th {
    color: #00d5ff !important;
    font-weight: 600 !important;
    font-size: 17px !important;
    padding: 14px 10px !important;
    border-bottom: 1px solid rgba(0, 200, 255, 0.3) !important;
    text-shadow: 0 0 8px rgba(0, 200, 255, 0.6) !important;
}

#leaderboards td {
    color: #b3cde3 !important;
    font-size: 15px !important;
    padding: 12px 10px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    background: #0a0f1e !important;
    transition: 0.3s !important;
}

#leaderboards tr:hover td {
    background: rgba(0, 200, 255, 0.12) !important;
    box-shadow: inset 0 0 15px rgba(0, 200, 255, 0.2) !important;
    color: #ffffff !important;
}

.stats-avatar {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 2px solid rgba(0, 200, 255, 0.6) !important;
    box-shadow: 0 0 12px rgba(0, 200, 255, 0.5) !important;
    margin-right: 30px;
}

.ranking-image {
    width: 89px !important;
    height: 32px !important;
    margin-left: 8px !important;
    filter: drop-shadow(0 0 5px rgba(0, 200, 255, 0.5)) !important;
}

#leaderboards .ranking-points {
    font-weight: 700 !important;
    font-size: 16px !important;
    color: #8deaff !important;
}

#leaderboards a {
    color: #7dd4ff !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    transition: 0.3s !important;
    text-align: left !important ;
    padding-left: 20px;
}

#leaderboards a:hover {
    color: #00eaff !important;
    text-shadow: 0 0 10px #00eaff !important;
}

#leaderboards td, 
#leaderboards th {
    text-align: center !important;
}

#leaderboards .text-truncate {
    max-width: 120px !important;
    display: inline-block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.leaderboards .stats-block {
    background: rgba(0, 10, 30, 0.95) !important; /* Solid dark blue/black base */
    border: 1px solid rgba(0, 200, 255, 0.6) !important; /* Neon blue border */
    border-radius: 10px !important;
}

.footer .mt-5 {
    margin: 0 !important;
}

.discord-holder .step {
    background: rgba(0, 10, 30, 0.95);
    border: 1px solid rgba(0, 200, 255, 0.6);
    box-shadow: 0 0 15px rgba(0, 200, 255, 0.3);
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 20px;
    text-align: center;
    transition: 0.3s ease;
}

.discord-holder .step h2 {
    color: #00c8ff;
    font-size: 24px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.discord-holder .step h2 img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    /* This colors it bluish neon */
}

.discord-holder .step p {
    color: #b1c3d9;
    font-size: 16px;
    margin-bottom: 15px;
}

.discord-holder .step .button {
    background: #00c8ff;
    color: #000;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 8px;
    font-weight: bold;
    transition: 0.3s ease;
    display: inline-block;
}

.discord-holder .step .button:hover {
    background: #00e0ff;
    box-shadow: 0 0 10px #00c8ff;
}

.card {border: none; margin-top: 30px; }

.modal-header { background: none; }

.server-modal .modal-bg { opacity: 0.4 !important; height: 155px; }

.mprofile {
    background: rgba(0, 200, 255, 0.1) !important;
    border: 1px solid rgba(0, 200, 255, 0.3) !important;
    border-radius: 10px !important;
    padding: 10px 15px !important;
    display: flex !important;
    align-items: center !important;
    width: fit-content !important;
    box-shadow: 0 0 10px rgba(0, 200, 255, 0.2) !important;
    gap: 10px !important;
}

.mprofile .profile-img {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 1px solid rgba(0, 200, 255, 0.3) !important;
    box-shadow: 0 0 10px rgba(0, 200, 255, 0.2) !important;
}

.mprofile .username {
    font-size: 1em !important;
    color: #fff !important;
    font-weight: bold !important;
}

.mprofile i.fa-chevron-down {
    color: #fff !important;
    margin-left: auto !important;
    transition: transform 0.3s ease !important;
}

.mprofile:hover i.fa-chevron-down {
    transform: rotate(180deg) !important;
}

.dropdown-content {
    background: rgba(0, 200, 255, 0.1) !important;
    border: 1px solid rgba(0, 200, 255, 0.3) !important;
    border-radius: 10px !important;
    padding: 15px !important;
    width: 250px !important;
    box-shadow: 0 0 10px rgba(0, 200, 255, 0.2) !important;
    color: #fff !important;
    font-family: Arial, sans-serif !important;
}

.dropdown-content .account {
    display: flex !important;
    align-items: center !important;
    margin-bottom: 15px !important;
    background: none !important;
}

.dropdown-content .profile-img-lg {
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 1px solid rgba(0, 200, 255, 0.3) !important;
    box-shadow: 0 0 10px rgba(0, 200, 255, 0.2) !important;
    margin-right: 10px !important;
}

.dropdown-content .account-details b {
    font-size: 1.2em !important;
    font-weight: bold !important;
    color: #fff !important;
}

.dropdown-content .p-links a {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px !important;
    margin-bottom: 5px !important;
    color: #fff !important;
    text-decoration: none !important;
    border-radius: 8px !important;
    transition: background 0.3s, transform 0.2s !important;
}

.dropdown-content .p-links a:hover {
    background: rgba(0, 200, 255, 0.1) !important;
    transform: translateX(5px) !important;
}

.dropdown-content .p-links i {
    color: #fff !important;
}

.dropdown-content .sep {
    height: 1px !important;
    background: rgba(255, 255, 255, 0.2) !important;
    margin: 10px 0 !important;
}

.button-holder {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 30px 0;
}

.btn-connect {
   background: linear-gradient(135deg, rgba(0, 200, 255, 0.8) 0%, rgba(180, 0, 255, 0.8) 100%);
  box-shadow: 0 0 20px rgba(180, 0, 255, 0.5);
  color: white;
  text-decoration: none;
  font-size: 24px;
  padding: 20px 50px;
  border-radius: 12px;
  font-weight: bold;
  animation: pop 1s ease-in-out infinite alternate;
  transition: background 0.5s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

/* Pop animation */
@keyframes pop {
  0% {
    transform: scale(1);
    box-shadow: 0 0 20px rgba(180, 0, 255, 0.5);
  }
  100% {
    transform: scale(1.05);
    box-shadow: 0 0 30px rgba(0, 200, 255, 0.6);
  }
}

.btn-connect:hover {
  background: linear-gradient(135deg, rgba(180, 0, 255, 0.8) 0%, rgba(0, 200, 255, 0.8) 100%);
  transform: scale(1.1);
  box-shadow: 0 0 30px rgba(180, 0, 255, 0.8), 0 0 40px rgba(0, 200, 255, 0.6);
}