body {
    overflow-x: hidden;
}

.justify-center {
    position: relative;
    display: flex;
    justify-content: center;
}

.full-box {
    position: relative;
    height: fit-content;
    border-radius: 10px;
    background-color: #0A141D;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.65);
    margin-top: 15px;
    margin-bottom: -15px;
    overflow: hidden;
    flex: 1 1 calc(25% - 8px);
    /* Each element will take up 25% of the container width minus the gap */
    width: calc(25% - 8px);
    box-sizing: border-box;
    width: 100%;
    user-select: none;
    padding-block: 25px;
}

.full-box:hover .box-bg {
    opacity: 35%;
}

.boxhover:hover .box-bg {
    opacity: 25%;
}

.full-box .box-bg {
    margin-top: -25px;
}

.margin5px {
    position: relative;
    display: inline-block;
    margin-inline: 6.5px;
}

.right .boxeswitdh {
    position: relative;
    left: 50%;
    transform: translate(-50%);
    width: calc(100% - 25px);
    gap: 10px;
    flex-wrap: wrap;
    display: flex;
    justify-content: flex-start;
}

.dash-title {
    position: relative;
    display: block;
    margin-top: 25px;
    font-size: 22px;
    color: white;
    text-shadow: 0px 0px 5px black;
}

.dash-desc {
    position: relative;
    display: block;
    margin-top: 5px;
    font-size: 14px;
    color: white;
    text-shadow: 0px 0px 5px black;
    font-weight: 400;
    opacity: 75%;
}

.main-box {
    position: relative;
    width: calc(100% - 25px);
    display: block;
    height: fit-content;
    padding-block: 25px;
    background-color: #0A141D;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
    margin-top: 15px;
    border-radius: 10px;
    left: 50%;
    transform: translate(-50%);
    overflow: hidden;
}

.main-box .box-bg {
    position: absolute;
    height: 100%;
    margin-top: -25px;
    width: fit-content;
    object-fit: contain;
    right: 0px;
    opacity: 20% !important;
}

.main-box .title {
    position: relative;
    display: block;
    color: white;
    margin-left: 25px;
    font-size: 20px;
    font-weight: 500;
}

.main-box .desc {
    position: relative;
    display: block;
    margin-top: 7px;
    margin-left: 25px;
    font-size: 13px;
    color: white;
    opacity: 75%;
    font-weight: 500;
    max-width: 50%;
    line-height: 20px;
}

.main-box .server-wrapper {
    position: relative;
    display: flex;
    justify-content: start;
    width: calc(100% - 50px);
    height: fit-content;
    left: 50%;
    transform: translate(-50%);
    background-color: #0A141D;;
    border-radius: 5px;
    overflow: hidden;
}

.grid-server {
    position: relative;
    width: 100%;
    height: 55px;
}

.grid-server .justify-start {
    position: relative;
    top: 50%;
    transform: translate(0, -50%);
}

.resource-name {
    position: relative;
    display: block;
    margin-left: 20px;
    color: rgb(193, 193, 193);
    font-size: 12px;
    font-weight: 300;
}

a {
    color: white;
}

.resource-value {
    position: relative;
    display: block;
    margin-left: 20px;
    margin-top: 5px;
    font-size: 30px;
    font-weight: 400;
}

.server-wrapper .grid-wrapper {
    position: relative;
    display: inline;
    width: 100%;
}

.grid-wrapper .title {
    position: relative;
    display: block;
    margin-left: 0px;
    font-size: 15px;
    font-weight: 400;
    background-color: #0A141D;;
    padding-block: 10px;
    padding-left: 10px;
}

.grid-wrapper .value {
    position: relative;
    display: block;
    font-size: 12px;
    color: white;
    opacity: 75%;
    font-weight: 300;
    padding-block: 20px;
    padding-left: 10px;
}

.lastgrid {
    max-width: 200px;
}

.server-action {
    position: relative;
    border-radius: 5px;
    display: inline-block;
    height: 34px;
    margin-inline: 5px;
    padding-inline: 20px;
    cursor: pointer;
    background-color: #1a2535;
    color: white;
    text-shadow: 0px 0px 5px black;
    font-weight: 500;
    border: 0px;
    font-size: 12px;
    transition: .2s;
    overflow: hidden;
    margin-top: 10px;
}

.server-action:hover {
    opacity: 75%;
}

.main-box .btns-placement {
    margin-left: 25px;
    margin-top: 25px;
}

.btns-placement .main-btn {
    position: relative;
    padding-block: 5px;
    width: fit-content;
    padding-right: 30px;
    margin-right: 5px;
    border: 0px;
    cursor: pointer;
    color: white;
    background-color: transparent;
    color: #ffffff;
    font-weight: 500;
    text-align: start;
    opacity: 75%;
    font-size: 14px;
    transition: .2s;
    text-decoration: none;
}

.btns-placement .main-btn:hover {
    opacity: 90%;
}

.server-action .box-bg {
    margin-top: -10px;
    opacity: 5%;
}

.server-action:hover .box-bg {
    opacity: 25%;
}

.servers-wrapper {
    position: relative;
    display: flex;
    width: calc(100% - 25px);
    left: 50%;
    transform: translate(-50%);
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
    justify-content: start;
}

.server-div {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: start;
    border-radius: 10px;
    background-color: #0A141D;;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.65);
    overflow: hidden;
    height: 75px;
    cursor: pointer;
    opacity: 75%;
    transition: .2s;
}

.server-div:hover {
    opacity: 100%;
}

.server-status {
    position: absolute;
    right: 10px;
    width: 6px;
    height: 60px;
    top: 50%;
    transform: translate(0, -50%);
    background-color: red;
    border-radius: 10px;
    opacity: 75%;
}

.server-icon {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 50px;
    background-color: #0A141D;
    border-radius: 10px;
    margin-left: 15px;
    top: 50%;
    transform: translate(0, -50%);
}

.server-icon .fa-solid {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 20px;
}

.server-div .box-bg {
    /* transform: rotate(190deg); */
    /* height: 180%;
    left: -25px;
    top: -50px; */
    opacity: 3%;
    width: 100%;
}

.server-div:hover .box-bg {
    opacity: 7%;
}

.server-div .server-id {
    position: relative;
    display: inline-block;
    margin-left: 10px;
    top: 50%;
    transform: translate(0, -50%);
    height: fit-content;
    font-size: 12px;
    opacity: 75%;
}

.server-div .server-name {
    position: relative;
    display: inline-block;
    margin-left: 10px;
    font-size: 18px;
    top: 50%;
    transform: translate(0, -50%);
    font-weight: 500;
    height: fit-content;
    width: fit-content;
}

.server-div .manage {
    position: relative;
    margin-top: 8px;
    width: fit-content;
    height: 45px;
    cursor: pointer;
    border-radius: 7px;
    color: rgb(79, 133, 219);
    background-color: #04060D;
    border: 1px solid rgb(25, 36, 55);
    font-weight: 500;
    font-size: 13px;
    padding-inline: 15px;
    opacity: 55%;
    transition: .25s;
}

.server-div .server-settings {
    border: 1px solid rgb(25, 55, 33);
    color: rgb(42, 152, 58);
}

.server-div .manage:hover {
    opacity: 100%;
}


.server-resources-wrapper {
    position: relative;
    width: calc(100% - 50px);
    left: 50%;
    transform: translate(-50%);
    height: 65px;
    display: flex;
    justify-content: center;
    margin-top: 16px;
    margin-bottom: 8px;
    gap: 10px;
}

.server-resources-wrapper .server-resource-wrapper {
    position: relative;
    display: flex;
    justify-content: start;
    width: 100%;
    background-color: #060e17;
    border: 1px solid rgb(25, 36, 55);
    height: 100%;
    border-radius: 7px;
}

.server-resource-wrapper .resource-icn-wrapper {
    position: relative;
    height: 60%;
    top: 50%;
    transform: translate(0, -50%);
    margin-left: 10px;
    aspect-ratio: 1/1;
    border-radius: 50%;
    background-color: rgb(142, 149, 168, 0.25);
    color: white;
}

.resource-icn-wrapper .fa-solid {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.server-resource-wrapper .resource-info {
    position: relative;
    margin-left: 10px;
}

.resource-info .resource-amount {
    position: relative;
    display: block;
    font-size: 14px;
    margin-top: 16px;
}

.resource-info .resource-type {
    position: relative;
    display: block;
    font-size: 12px;
    opacity: 75% !important;
}

.create-server {
    position: relative;
    margin-right: 25px;
    height: 40px;
    cursor: pointer;
    border-radius: 7px;
    color: rgb(80, 207, 128);
    background-color: #04060D;
    border: 1px solid rgb(80, 207, 128);
    box-shadow: 0px 0px 2px rgb(80, 207, 128, 0.6);
    font-weight: 500;
    font-size: 12px;
    padding-inline: 35px;
    opacity: 55%;
    transition: .25s;
    top: 50%;
    transform: translate(0, -50%);
}

.create-server:hover {
    opacity: 100%;
}

.title-create {
    position: relative;
    display: inline-block;
    top: 50%;
    transform: translate(0, -50%);
    height: fit-content;
    color: white;
    margin-left: 25px;
}

.main-box-custom {
    position: relative;
    width: calc(100% - 25px);
    display: block;
    height: 80px;
    background-color: #0A141D;;
    margin-top: 13px;
    border-radius: 10px;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.65);
    left: 50%;
    transform: translate(-50%);
    overflow: hidden;
}

.main-box-custom .justify-space-between {
    height: 100%;
}

.bottom-footer .ad-banner {
    position: absolute;
    width: 100%;
    height: 140px;
    background-color: #0A141D;
    bottom: 40px;
}

.ad-banner .close {
    position: absolute;
    top: -25px;
    right: 25px;
    background-color: #0A141D;;
    box-shadow: 0px 0px 5px black;
    padding-inline: 13px;
    padding-block: 8.5px;
    border-radius: 5px;
    cursor: pointer;
    color: rgb(246, 72, 72);
    font-weight: bolder;
}

.ad-banner .long-banner {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: transparent;
    width: 100%;
    max-width: 1250px;
    height: 125px;
    max-height: 125px;
    display: flex;
    justify-content: center;
}

.sidebar .sidebar-ad {
    position: relative;
    display: block;
    width: 95%;
    max-width: 325px;
    background-color: white;
    margin-top: 25px;
    max-height: 300px !important;
    height: fit-content;
    overflow: hidden;
}

.help-box .description {
    position: relative;
    display: block;
    max-width: calc(100% - 20px);
    width: 100%;
    left: 50%;
    transform: translate(-50%);
    text-align: start;
    color: white;
    opacity: 80%;
    margin-top: 10px;
    font-size: 14px;
    white-space: wrap;
    text-wrap: wrap;
}

.lowopacwrapper {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000000;
}

.alert-div-wrapper {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 95%;
    max-width: 600px;
    height: fit-content;
    border-radius: 10px;
    box-shadow: 0px 0px 25px black;
    background-color: #0A141D;;
    z-index: 1000000;
    overflow: hidden;
    padding-bottom: 25px;
}

.alert-div-wrapper .main-bar {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: start;
    height: 45px;
    background-color: #06090e;
}

.alert-div-wrapper .main-bar .fa-circle-info {
    position: relative;
    display: inline-block;
    top: 50%;
    transform: translate(0, -50%);
    color: white;
    margin-left: 20px;
    height: fit-content;
    margin-right: 10px;
    font-size: 25px;
}

.alert-div-wrapper .main-bar .main-title {
    position: relative;
    display: inline-block;
    color: white;
    height: fit-content;
    top: 50%;
    transform: translate(0, -50%);
}

.alert-div-wrapper .description {
    position: relative;
    display: block;
    left: 50%;
    transform: translate(-50%);
    padding-block: 10px;
    width: calc(100% - 40px);
    font-size: 14px;
    opacity: 90%;
}

.mainalertbtn {
    position: relative;
    display: inline-block;
    width: fit-content;
    padding-inline: 15px;
    height: 37px;
    border-radius: 7px;
    color: white;
    transition: .2s;
    border: 0;
    box-shadow: 0px 0px 7px black;
    cursor: pointer;
    background-color: transparent;
    overflow: hidden;
}

.closebtn {
    background-color: transparent;
}

.joindiscord {
    background-color: rgb(14, 31, 59);
}

.installing-wrapper {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 999999;
    background-color: #0A141D;;
}

.main-center-installing-box {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    left: 50%;
    width: 95%;
    max-width: 525px;
    height: fit-content;
    background-color: #050811;
    box-shadow: 0px 0px 10px black;
    border-radius: 7px;
    overflow: hidden;
}

.main-center-installing-box .fa-truck-fast {
    position: relative;
    color: white;
    opacity: 75%;
    margin-top: 100px;
    display: block;
    left: 50%;
    transform: translate(-50%);
    font-size: 40px;
    width: fit-content;
}

.install-desc {
    position: relative;
    display: block;
    width: 90%;
    left: 50%;
    transform: translate(-50%);
    text-align: center;
    color: white;
    opacity: 75%;
    font-size: 13px;
    margin-top: 20px;
    margin-bottom: 100px;
}

.field-content .text-content {
    position: relative;
    width: calc(90% - 20px);
    margin-left: 20px;
    color: white;
    opacity: 75%;
    font-size: 13px;
    word-wrap: break-word;
    margin-top: 7px;
    display: inline-block;
}

.dash-content .right {
    padding-top: 60px !important;
}

/* Right-column ad top offset: client-ads.css (--wisp-ad-sidebar-top) */

@media (max-width: 1150px) {
    .dash-content .right {
        padding-top: 60px !important;
    }
}

@media(max-width: 800px) {
    .servers-wrapper {
        display: block;
    }

    .full-box {
        max-width: calc(100% - 8px);
        width: calc(100% - 8px);
    }
}

@media(max-width: 375px) {
    .right .boxeswitdh {
        position: relative;
        display: block;
    }

    .full-box {
        display: block;
        margin-top: 25px;
    }

    .btns-placement {
        display: block;
    }

    .btns-placement .main-btn {
        display: block;
        margin-block: 10px;
    }

    .main-box {
        padding-bottom: 5px;
    }
}

@media (max-width: 600px) {
    .server-resources-wrapper {
        display: block;
        height: fit-content;
        margin-top: 13px;
        margin-bottom: -8px;
    }

    .server-resources-wrapper .server-resource-wrapper {
        height: 65px;
        margin-block: 10px;
    }
}

/* ===== WISPBYTE THEME FOR DASH.CSS ===== */

/* Global wispbyte theme overrides (default - blue-ish) */
html.wispbyte-theme body,
html.wispbyte-theme body.wispbyte-theme,
body.wispbyte-theme,
.wispbyte-theme body {
    background-color: #0A141D !important;
    color: #ffffff !important;
}

/* Box elements wispbyte theme */
.wispbyte-theme .full-box,
.wispbyte-theme .main-box,
.wispbyte-theme .main-box-custom {
    background-color: #0A141D !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.6) !important;
}

.wispbyte-theme .full-box:hover,
.wispbyte-theme .main-box:hover,
.wispbyte-theme .main-box-custom:hover {
    background-color: #2a2a2a !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* Text elements wispbyte theme */
.wispbyte-theme .dash-title,
.wispbyte-theme .dash-desc {
    color: #ffffff !important;
    text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.8) !important;
}

/* Server elements wispbyte theme */
.wispbyte-theme .server-div {
    background-color: #0A141D !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.6) !important;
}

.wispbyte-theme .server-div:hover {
    background-color: #2a2a2a !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.wispbyte-theme .server-icon {
    background-color: #2a2a2a !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.wispbyte-theme .server-name {
    color: #ffffff !important;
}

/* Server wrapper wispbyte theme */
.wispbyte-theme .server-wrapper {
    background-color: #0A141D !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* ===== DARK MODE FOR DASH.CSS ===== */

/* Global dark mode overrides (true dark - #0a0a0a) */
html.dark-theme body,
html.dark-theme body.dark-theme,
body.dark-theme,
.dark-theme body {
    background-color: #0a0a0a !important;
    color: #ffffff !important;
}

/* Box elements dark mode */
.dark-theme .full-box,
.dark-theme .main-box,
.dark-theme .main-box-custom {
    background-color: #0a0a0a !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.6) !important;
}

.dark-theme .full-box:hover,
.dark-theme .main-box:hover,
.dark-theme .main-box-custom:hover {
    background-color: #2a2a2a !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* Text elements dark mode */
.dark-theme .dash-title,
.dark-theme .dash-desc {
    color: #ffffff !important;
    text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.8) !important;
}

/* Server elements dark mode */
.dark-theme .server-div {
    background-color: #0a0a0a !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.6) !important;
}

.dark-theme .server-div:hover {
    background-color: #2a2a2a !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.dark-theme .server-icon {
    background-color: #2a2a2a !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.dark-theme .server-name {
    color: #ffffff !important;
}

/* Server wrapper dark mode */
.dark-theme .server-wrapper {
    background-color: #0a0a0a !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Grid elements dark mode */
.grid-wrapper .title {
    background-color: #2a2a2a !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.grid-wrapper .value {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Server action buttons dark mode */
.server-action {
    background-color: #2a2a2a !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.server-action:hover {
    background-color: #3a3a3a !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* Main buttons dark mode */
.btns-placement .main-btn {
    color: rgba(255, 255, 255, 0.9) !important;
}

.btns-placement .main-btn:hover {
    color: #ffffff !important;
}

/* Create server button dark mode */
.create-server {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.3) !important;
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease !important;
    transform: translateY(-50%);
}

.create-server:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.4) !important;
}

.create-server:active {
    transform: translateY(0) !important;
    transition: transform 0.1s ease !important;
}

/* Title create dark mode */
.title-create {
    color: #ffffff !important;
}

/* Server resource wrapper dark mode */
/* Server resource wrapper wispbyte theme */
.wispbyte-theme .server-resource-wrapper {
    background-color: #0A141D !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Server resource wrapper dark mode */
.dark-theme .server-resource-wrapper {
    background-color: #0a0a0a !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Resource icon wrapper wispbyte theme */
.wispbyte-theme .resource-icn-wrapper {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.wispbyte-theme .resource-amount,
.wispbyte-theme .resource-type {
    color: #ffffff !important;
}

/* Resource icon wrapper dark mode */
.dark-theme .resource-icn-wrapper {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.dark-theme .resource-amount,
.dark-theme .resource-type {
    color: #ffffff !important;
}

/* Alert wrapper dark mode */
/* Alert wrapper wispbyte theme */
.wispbyte-theme .alert-div-wrapper {
    background-color: #0A141D !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.8) !important;
}

.wispbyte-theme .alert-div-wrapper .main-bar {
    background-color: #2a2a2a !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.wispbyte-theme .alert-div-wrapper .main-bar .fa-circle-info,
.wispbyte-theme .alert-div-wrapper .main-bar .main-title {
    color: #ffffff !important;
}

.wispbyte-theme .alert-div-wrapper .description {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Alert wrapper dark mode */
.dark-theme .alert-div-wrapper {
    background-color: #0a0a0a !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.8) !important;
}

.dark-theme .alert-div-wrapper .main-bar {
    background-color: #2a2a2a !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.dark-theme .alert-div-wrapper .main-bar .fa-circle-info,
.dark-theme .alert-div-wrapper .main-bar .main-title {
    color: #ffffff !important;
}

.dark-theme .alert-div-wrapper .description {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Main alert button wispbyte theme */
.wispbyte-theme .mainalertbtn {
    background-color: #2a2a2a !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.wispbyte-theme .mainalertbtn:hover {
    background-color: #3a3a3a !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* Main alert button dark mode */
.dark-theme .mainalertbtn {
    background-color: #2a2a2a !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.dark-theme .mainalertbtn:hover {
    background-color: #3a3a3a !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* Installing wrapper wispbyte theme */
.wispbyte-theme .installing-wrapper {
    background-color: rgba(10, 20, 29, 0.95) !important;
}

.wispbyte-theme .main-center-installing-box {
    background-color: #0A141D !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.8) !important;
}

.wispbyte-theme .main-center-installing-box .fa-truck-fast {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Installing wrapper dark mode */
.dark-theme .installing-wrapper {
    background-color: rgba(10, 10, 10, 0.95) !important;
}

.dark-theme .main-center-installing-box {
    background-color: #0a0a0a !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.8) !important;
}

.dark-theme .main-center-installing-box .fa-truck-fast {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Install desc wispbyte theme */
.wispbyte-theme .install-desc {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Field content wispbyte theme */
.wispbyte-theme .field-content .text-content {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Help box wispbyte theme */
.wispbyte-theme .help-box .description {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Install desc dark mode */
.dark-theme .install-desc {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Field content dark mode */
.dark-theme .field-content .text-content {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Help box dark mode */
.dark-theme .help-box .description {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Ad banner dark mode */
/* Bottom footer ad banner wispbyte theme */
.wispbyte-theme .bottom-footer .ad-banner {
    background-color: #0A141D !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Bottom footer ad banner dark mode */
.dark-theme .bottom-footer .ad-banner {
    background-color: #0a0a0a !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Ad banner close button wispbyte theme */
.wispbyte-theme .ad-banner .close {
    background-color: #2a2a2a !important;
    color: #f64848 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Ad banner close button dark mode */
.dark-theme .ad-banner .close {
    background-color: #2a2a2a !important;
    color: #f64848 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Sidebar ad wispbyte theme */
.wispbyte-theme .sidebar .sidebar-ad {
    background-color: #0A141D !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Sidebar ad dark mode */
.dark-theme .sidebar .sidebar-ad {
    background-color: #0a0a0a !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* ===== LIGHT MODE FOR DASH.CSS ===== */

/* Global light mode overrides */
.light-theme body {
    background-color: #f5f5f5 !important;
    color: #1a1a1a !important;
}

/* Box elements light mode */
.light-theme .full-box,
.light-theme .main-box,
.light-theme .main-box-custom {
    background-color: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.05) !important;
}

.light-theme .full-box:hover,
.light-theme .main-box:hover,
.light-theme .main-box-custom:hover {
    background-color: #f9f9f9 !important;
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
}

/* Text elements light mode */
.light-theme .dash-title,
.light-theme .dash-desc {
    color: #1a1a1a !important;
    text-shadow: none !important;
}

/* Server elements light mode */
.light-theme .server-div {
    background-color: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.05) !important;
}

.light-theme .server-div:hover {
    background-color: #f9f9f9 !important;
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
}

.light-theme .server-icon {
    background-color: #f5f5f5 !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

.light-theme .server-name {
    color: #1a1a1a !important;
}

/* Server wrapper light mode */
.light-theme .server-wrapper {
    background-color: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

/* Grid elements light mode */
.light-theme .grid-wrapper .title {
    background-color: #f5f5f5 !important;
    color: #1a1a1a !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

/* Sidebar ad light mode */
.light-theme .sidebar .sidebar-ad {
    background-color: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

/* Light mode main box text */
.light-theme .main-box .title {
    color: #1a1a1a !important;
    text-shadow: none !important;
}

.light-theme .main-box .desc {
    color: #555 !important;
    opacity: 1 !important;
    text-shadow: none !important;
    font-weight: 500 !important;
}

/* Light mode main buttons */
.light-theme .btns-placement .main-btn {
    color: #3b82f6 !important;
    opacity: 1 !important;
    font-weight: 500 !important;
}

.light-theme .btns-placement .main-btn:hover {
    color: #2563eb !important;
    opacity: 1 !important;
}

/* Light mode server action buttons */
.light-theme .server-action {
    background-color: #f5f5f5 !important;
    color: #1a1a1a !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    text-shadow: none !important;
}

.light-theme .server-action:hover {
    background-color: #e5e5e5 !important;
    opacity: 1 !important;
}

/* Premium servers — ad slots hidden before Venatus loads */
html.wisp-no-ads #billboard,
html.wisp-no-ads #leaderboard,
html.wisp-no-ads #skyscraper,
html.wisp-no-ads #skyscraper-left,
html.wisp-no-ads .leftads-part,
html.wisp-no-ads .rightads-part,
html.wisp-no-ads .bottom-footer .ad-banner,
html.wisp-no-ads .sidebar-ad,
html.wisp-no-ads #stickyfooterad,
html.wisp-no-ads [id*="stickyfooter" i],
html.wisp-no-ads iframe[src*="vntsm.com"],
html.wisp-no-ads iframe[src*="venatus"] {
    display: none !important;
    visibility: hidden !important;
}

html.wisp-no-ads .dash-content .sidebar {
    padding-bottom: 0 !important;
}

html.wisp-no-ads .dash-content .right {
    padding-bottom: 0 !important;
}

html.wisp-client-modal-open,
html.wisp-client-modal-open body {
    overflow: hidden !important;
}

html.wisp-client-modal-open #stickyfooterad,
html.wisp-client-modal-open [id*="stickyfooter" i],
html.wisp-client-modal-open [id*="StickyFooter" i],
html.wisp-client-modal-open [class*="sticky-footer" i],
html.wisp-client-modal-open [class*="vm-body" i],
html.wisp-client-modal-open [data-wisp-client-modal-suppressed="1"],
html.wisp-client-modal-open [data-wisp-offer-suppressed="1"] {
    visibility: hidden !important;
    pointer-events: none !important;
}