[data-bs-theme=dark] body {
    background-color: #010808;
}
[data-bs-theme=dark] .card {
    background-color: #020f0f;
}
.border {
    border: 1px solid rgb(8 48 45) !important;
}
.border-bottom {
    border-bottom: 1px solid rgb(8 48 45) !important;
}
hr {
    border-top: 1px solid rgb(0 255 236);
}
[data-bs-theme=dark] .table thead th {
    color: #fff;
    background-color: rgb(8 48 45);
    border-color: rgb(8 48 45);
}
@font-face {
    font-family: 'Carta-Marina-Bold';
    src: url('../media/sever/fonts/Carta Marina Bold.otf');
}
.home-intro h4, .home-intro h3 {
    text-shadow: 1px 5px 15px black;
    font-family: 'Carta-Marina-Bold', serif;
}
.home-intro h3 {
    color: #28eb96 !important;
}
/*
.header-menu .menu > .menu-item > .menu-link {
    text-transform: uppercase;
}
*/
[data-bs-theme=dark] body.home::before {
    content: none;
}
[data-bs-theme=dark] body:not(.app-blank) {
    background-image: url(../media/sever/home-bg-dark.png);
    background-size: auto;
}

[data-bs-theme=dark] .app-header-primary {
    background-image: linear-gradient( 90deg, rgb(0 0 0) 0%, rgb(4 26 25) 50%, rgb(0 0 0) 100% );
    backdrop-filter: blur(5px);
    border-bottom: 1px solid rgb(8 48 45);
}
[data-bs-theme=dark] .app-header-secondary {
    background-image: linear-gradient( 90deg, rgb(0 0 0) 0%, rgb(6 35 33) 50%, rgb(0 0 0) 100% );
    //backdrop-filter: blur(5px);
}

[data-bs-theme=dark] .app-header-secondary:after {
    content: "";
    display: block;
    width: 100%;
    height: 51px;
    background-image: url(../media/sever/menu-bottom.png);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: auto;
    position: absolute;
    top: 125px;
    z-index: -1;
}

[data-kt-app-header-secondary-sticky=on] .app-header-secondary:after {
    top: 35px;
}
[data-bs-theme=dark] .menu-sub-lg-dropdown {
    background-color: rgb(2 16 15);
}
[data-bs-theme=dark] .menu-sub-dropdown {
    background-color: rgb(2 16 15);
}
.menu-active-bg .menu-item .menu-link.active {
    background-color: rgb(8 48 45);
}
@media (max-width: 991.98px){
    [data-bs-theme=dark] .app-header-secondary {
        background: rgb(2 16 15) !important;
    }
    .app-header-secondary:after {
        content: none !important;
    }
}

.menu-state-primary .menu-item.here>.menu-link {
    background-color: rgb(8 48 45);
}
.menu-state-primary .menu-item.here>.menu-link .menu-title {
    color: #fff;
}
.menu-state-primary .menu-item.hover:not(.here)>.menu-link:not(.disabled):not(.active):not(.here), .menu-state-primary .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) {
    background-color: rgb(8 48 45);
}
.menu-state-primary .menu-item.hover:not(.here)>.menu-link:not(.disabled):not(.active):not(.here) .menu-title, .menu-state-primary .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) .menu-title {
    color: #fff;
}

.app-header-secondary .logo {
    position: relative;
    top: -10px;
}

.table-striped>tbody>tr:nth-of-type(odd)>* {
    --bs-table-bg-type: rgb(8 48 45 / 1%);
}
[data-bs-theme=dark] .table tr:not(:first-child) td {
    vertical-align: top !important;
    border-top: 1px solid rgb(8 48 45) !important;
}

.social-icons .btn.btn-icon {
    height: calc(1.5em + 1rem);
    width: calc(1.5em + 1rem);
}

.ranking .btn.btn-outline:not(.btn-outline-dashed) {
    border: 1px solid rgb(8 48 45);
}
.ranking .ranking-main-button:hover, .ranking .ranking-main-button.active {
    border: 1px solid #50cd89 !important;
}
.ki-duotone, .ki-outline, .ki-solid {
    color: rgb(25 110 103);
}
i.bi, i[class*=" fa-"], i[class*=" fonticon-"], i[class*=" la-"], i[class^=fa-], i[class^=fonticon-], i[class^=la-] {
    color: rgb(25 110 103);
}
.text-muted {
    color: rgb(25 110 103) !important;
}
[data-bs-theme=dark] .sidebar-wrapper .sidebar-menu {
    background: rgb(8 48 45) !important;
}

[data-bs-theme=dark] .char-buff,
[data-bs-theme=dark] .char-info table {
    background: #010808;
}

/*
#kt_login {
    background: #020f0f !important;
}
*/

[data-bs-theme=dark] .home-intro a.btn {
    color: #fff !important;
    font-weight: 900;
    padding: .7rem 3rem !important;
    background-image: linear-gradient(to bottom, #044147 0%, #0e8168  100%);
}
[data-bs-theme=dark] .btn.btn-dark.btn-register, [data-bs-theme=dark] .btn.btn-dark.btn-register:hover {
    color: #1b1b29;
    border-color: #b2aea7;
    background-color: #b2aea7 !important;
}
/*
.home-banner .carousel-item {
    border-width: 4px;
    border-style: solid;
    border-image: linear-gradient(to bottom, #091417, #28eb96) 1;
    border-radius: 20px;
}
element.style {
    width: 100%;
    height: 100%;
    border: 1px solid #00ff !important;
    border-radius: 20px;
    overflow: hidden;
}
 */

.card.home-banner .carousel-inner {
    border-radius: 0.625rem !important;
}
.card.home-banner::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    margin: -1px;
    border-radius: inherit;
    background-image: linear-gradient(to bottom, #091417, #147f51);
    //box-shadow: inset 0 0 10px #28eb96;
}
.card.home-banner .carousel-item {
    box-shadow: inset 0px 0px 10px 0px rgb(40 235 150 / 38%);
}
.card.home-banner:before {
    content: "";
    display: block;
    width: 100%;
    height: 64px;
    background-image: url(../media/sever/banner-title.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: auto;
    position: absolute;
    top: -30px;
    z-index: 1;
}

.card.home-banner h3 {
    position: absolute;
    top: -5px;
    left: 0;
    margin: auto;
    width: 100%;
    text-align: center;
    z-index: 1;
    font-size: 1.7rem !important;
    text-transform: uppercase;
    color: #50cd89 !important;
    font-family: 'Carta-Marina-Bold', serif;
}

[data-bs-theme=dark] .card.home-banner .carousel-item.slide-1 {
    background-image: url(../media/sever/slide-01.png) !important;
    background-position: center center;
    background-size: 100%;
    background-repeat: no-repeat;
}
[data-bs-theme=dark] .card.home-banner .carousel-item.slide-2 {
    background-image: url(../media/sever/slide-02.png) !important;
    background-position: center center;
    background-size: 100%;
    background-repeat: no-repeat;
}
[data-bs-theme=dark] .card.home-banner .carousel-item.slide-3 {
    background-image: url(../media/sever/slide-03.png) !important;
    background-position: center center;
    background-size: 100%;
    background-repeat: no-repeat;
}

.home-buttons .btn-home {
    width: 100%;
    height: 97px;
    display: flex;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
    font-size: 30px;
    color: #fff;
    font-family: "Philosopher", sans-serif;
    font-weight: 700;
    padding-left: 25px;
    position: relative;
    margin-bottom: 20px;
    transition: all 0.3s ease !important;
    border: 2px solid #50cd89;
    border-radius: 0.625rem !important;
    overflow: visible;
    background-image: url(../media/sever/download-button.png);
    background-size: 150%;
    background-position: center center;
    background-repeat: repeat-x;
    animation: movingBG 60s infinite;
    overflow: hidden;
}
.home-buttons .btn-home h3 {
    color: #fff;
}
.home-buttons .btn-home span {
    display: block;
    width: 100%;
    color: #fcedc0;
    font-size: 13px;
    font-weight: 400;
    font-family: "Open Sans", sans-serif;
    margin-top: -5px;
}
.home-buttons .btn-home:hover {
    padding-left: 50px;
    color: #fff;
    background-image: linear-gradient(to right, rgb(20 127 81 / 0%), rgb(0 255 145 / 77%)), url(../media/sever/download-button.png);
}
.home-buttons .btn-home:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
}
.home-buttons .btn-home.btn-download:before {
    background-image: url(../media/sever/kopya.png);
    background-size: 120%;
    background-position: 0 -94px;
    background-repeat: no-repeat;
    width: 500px;
    height: 100%;
    margin-top: 0px;
}
.home-buttons .btn-home.btn-register:before {
    background-image: url(../media/sever/29.png);
    background-size: 120%;
    background-position: 0 -150px;
    background-repeat: no-repeat;
    width: 500px;
    height: 100%;
    margin-top: 0px;
}


@keyframes movingBG {
    50% {
        background-position: center left;
    }
}

/**     effects   ***/

.smoke {
    position: absolute;
    z-index: -9999;
    left: 0;
    right: 0;
    top: 500px;
    height: 484px;
    width: 100%;
    background-image: url(../media/sever/effects/smoke.png);
    background-position: left top;
    background-repeat: repeat-x;
    -webkit-animation: 20s linear infinite forwards smoke;
    animation: 20s linear infinite forwards smoke
}

@-webkit-keyframes smoke {
    0% {
        background-position: left -1920px top
    }

    100% {
        background-position: left 1920px top
    }
}

@keyframes smoke {
    0% {
        background-position: left -1920px top
    }

    100% {
        background-position: left 1920px top
    }
}

.highlight {
    width: 731px;
    height: 480px;
    position: absolute;
    left: 232px;
    top: 438px;
    text-align: center;
    -webkit-animation: 10s linear infinite highlight;
    animation: 10s linear infinite highlight;
    z-index: 17
}

.sparks {
    position: absolute;
    width: 1200px;
    left: 50%;
    top: 500px;
    z-index: -9999;
}

.sparks>div {
    position: absolute
}

.sparks .spark_1 {
    background: url(../media/sever/effects/spark_1.png) no-repeat;
    width: 764px;
    height: 313px;
    right: 0;
    bottom: -320px;
    -webkit-transform: scale(.6);
    transform: scale(.6);
    -webkit-animation: 4s linear 1s infinite spark-1;
    animation: 4s linear 1s infinite spark-1
}

.sparks .spark_2 {
    background: url(../media/sever/effects/spark_2.png) no-repeat;
    width: 179px;
    height: 335px;
    right: 230px;
    bottom: -320px;
    -webkit-transform: scale(.6);
    transform: scale(.6);
    -webkit-animation: 4s linear 2s infinite spark-1;
    animation: 4s linear 2s infinite spark-1
}

.sparks .spark_3 {
    background: url(../media/sever/effects/spark_3.png) no-repeat;
    width: 128px;
    height: 165px;
    right: 280px;
    bottom: -140px;
    -webkit-transform: scale(.6);
    transform: scale(.6);
    -webkit-animation: 4s linear 2s infinite spark-3;
    animation: 4s linear 2s infinite spark-3
}

.sparks .spark-big {
    background: url(../media/sever/effects/spark_4.png) no-repeat;
    width: 794px;
    height: 176px;
    right: 0;
    bottom: -180px;
    -webkit-transform: scale(.6);
    transform: scale(.6);
    -webkit-animation: 4s linear infinite spark-5;
    animation: 4s linear infinite spark-5
}

.sparks .spark_5 {
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
    right: 40px
}

.sparks_1 {
    margin-left: -1200px
}

.sparks_1 .spark_1 {
    background: url(../media/sever/effects/spark-l_1.png) no-repeat;
    -webkit-animation-delay: 2s;
    animation-delay: 2s
}

.sparks_1 .spark_2 {
    background: url(../media/sever/effects/spark-l_2.png) no-repeat;
    -webkit-animation-delay: 3s;
    animation-delay: 3s
}

.sparks_1 .spark_3 {
    background: url(../media/sever/effects/spark-l_3.png) no-repeat;
    -webkit-animation-delay: 3s;
    animation-delay: 3s
}

.sparks_1 .spark-big {
    background: url(../media/sever/effects/spark-l_4.png) no-repeat
}

.sparks_1 .spark_5 {
    -webkit-animation-delay: 3s;
    animation-delay: 3s
}

.sparks_2 {
    margin-left: -400px
}

@-webkit-keyframes spark-1 {
    0% {
        bottom: -320px;
        -webkit-transform: scale(.6);
        transform: scale(.6);
        opacity: 0
    }

    25% {
        bottom: -240px;
        -webkit-transform: scale(.7);
        transform: scale(.7);
        opacity: 1
    }

    50% {
        bottom: -160px;
        -webkit-transform: scale(.8);
        transform: scale(.8);
        opacity: 1
    }

    75% {
        bottom: -80px;
        -webkit-transform: scale(.9);
        transform: scale(.9);
        opacity: .5
    }

    100% {
        bottom: 0;
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 0
    }
}

@keyframes spark-1 {
    0% {
        bottom: -320px;
        -webkit-transform: scale(.6);
        transform: scale(.6);
        opacity: 0
    }

    25% {
        bottom: -240px;
        -webkit-transform: scale(.7);
        transform: scale(.7);
        opacity: 1
    }

    50% {
        bottom: -160px;
        -webkit-transform: scale(.8);
        transform: scale(.8);
        opacity: 1
    }

    75% {
        bottom: -80px;
        -webkit-transform: scale(.9);
        transform: scale(.9);
        opacity: .5
    }

    100% {
        bottom: 0;
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 0
    }
}

@-webkit-keyframes spark-3 {
    0% {
        bottom: -140px;
        -webkit-transform: scale(.6);
        transform: scale(.6);
        opacity: 0
    }

    25% {
        bottom: -80px;
        -webkit-transform: scale(.7);
        transform: scale(.7);
        opacity: 1
    }

    50% {
        bottom: -20px;
        -webkit-transform: scale(.8);
        transform: scale(.8);
        opacity: 1
    }

    75% {
        bottom: 40px;
        -webkit-transform: scale(.9);
        transform: scale(.9);
        opacity: .5
    }

    100% {
        bottom: 100px;
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 0
    }
}

@keyframes spark-3 {
    0% {
        bottom: -140px;
        -webkit-transform: scale(.6);
        transform: scale(.6);
        opacity: 0
    }

    25% {
        bottom: -80px;
        -webkit-transform: scale(.7);
        transform: scale(.7);
        opacity: 1
    }

    50% {
        bottom: -20px;
        -webkit-transform: scale(.8);
        transform: scale(.8);
        opacity: 1
    }

    75% {
        bottom: 40px;
        -webkit-transform: scale(.9);
        transform: scale(.9);
        opacity: .5
    }

    100% {
        bottom: 100px;
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 0
    }
}

@-webkit-keyframes spark-5 {
    0% {
        bottom: -180px;
        -webkit-transform: scale(.6);
        transform: scale(.6);
        opacity: 0
    }

    25% {
        bottom: -120px;
        -webkit-transform: scale(.7);
        transform: scale(.7);
        opacity: 1
    }

    50% {
        bottom: -60px;
        -webkit-transform: scale(.8);
        transform: scale(.8);
        opacity: 1
    }

    75% {
        bottom: 0;
        -webkit-transform: scale(.9);
        transform: scale(.9);
        opacity: .5
    }

    100% {
        bottom: 60px;
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 0
    }
}

@keyframes spark-5 {
    0% {
        bottom: -180px;
        -webkit-transform: scale(.6);
        transform: scale(.6);
        opacity: 0
    }

    25% {
        bottom: -120px;
        -webkit-transform: scale(.7);
        transform: scale(.7);
        opacity: 1
    }

    50% {
        bottom: -60px;
        -webkit-transform: scale(.8);
        transform: scale(.8);
        opacity: 1
    }

    75% {
        bottom: 0;
        -webkit-transform: scale(.9);
        transform: scale(.9);
        opacity: .5
    }

    100% {
        bottom: 60px;
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 0
    }
}

@media(max-width:1200px) {
    .sparks {
        display: none
    }
}

.card.server-status::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    margin: -2px;
    border-radius: inherit;
    background-image: linear-gradient(to bottom, #091417, #147f51);
}
.card.event-times::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    margin: -2px;
    border-radius: inherit;
    background-image: linear-gradient(to bottom, #091417, #147f51);
}
.card.server-status {
    background-color: #0b3b35 !important;
    background-image: url(../media/sever/status-bg.png);
    background-size: 110%;
    background-position: center center;
    background-repeat: repeat-x;
}
.card.server-status .card-header {
    background-image: linear-gradient(to bottom, #044147 0%, #0e8168 100%);
    border-radius: 0.625rem !important;
}
.card.server-status .server-progress {
    border: 1px solid #0e8168;
}

.card.event-times {
    background-color: #0b3b35 !important;
    background-image: url(../media/sever/events-bg.png);
    background-size: 110%;
    background-position: center center;
    background-repeat: repeat-x;
}
.card.event-times .event-box {
    background-color: #091417;
    border-radius: 0.625rem !important;
}
.card.event-times .event-label {
    background-image: linear-gradient(to bottom, #044147 0%, #0e8168 100%);
    border-radius: 0.625rem !important;
    color: #fff;
}

[data-bs-theme=light] .news {
    border: 0 !important;
    background-color: #fff;

    background-image: url(../media/sever/news-bottom.png);
    background-size: 100%;
    background-position: 50% 112%;
    background-repeat: repeat-x;
}
.news {
    border: 0 !important;
    background-color: #020f0f;

    background-image: url(../media/sever/news-bottom.png);
    background-size: 100%;
    background-position: 50% 112%;
    background-repeat: repeat-x;
}
.card.news .news-line {
    background-image: url(../media/sever/news-line.png) ;
    height: 15px;
    background-size: 100%;
    background-position: center center;
    background-repeat: repeat-x;
    opacity: 0.5;
}
.card.news h3 {
    color: #02ffb9 !important;
}
.news .news-image {
    background-color: #0b3b35;
    height: 225px;
    background-size: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    border: 2px solid #147f51;
    border-radius: 2rem !important;
}

body:after {
    content: "";
    background-image: url(../media/sever/footer-bottom.png);
    background-size: 50%;
    background-position: 50% 100%;
    background-repeat: no-repeat;
    position: fixed;
    z-index: -1;
    width: 100%;
    height: 100%;
}

.menu-hover-primary .menu-item.hover:not(.here)>.menu-link:not(.disabled):not(.active):not(.here), .menu-hover-primary .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) {
    transition: color .2s ease;
    color: #147f51;
}
a:hover {
    color: #147f51;
    text-decoration: none;
}
[data-bs-theme=light] #kt_toolbar_primary_button_Support {
    border-color: #000;
    color: #000;
}

#chardetail_container #chardetail_inventory_container {
    background: none;
}
.sro-item-detail {
    background: none;
}
.sro-item-detail.sro-item-special {
    background: none;
}

#chardetail_container #chardetail_inventory_container {
    position: relative;
}
#chardetail_container #chardetail_inventory {
    position: absolute;
}
#chardetail_container #chardetail_accessory {
    position: absolute;
}
#chardetail_container #chardetail_inventory_container {
    width: 459px;
    height: 355px;
}
.news {
    background-size: 40%;
    background-position: center bottom;
}
.news .news-image {
    display: none !important;
}
[data-bs-theme=dark] .app-header-primary {
    backdrop-filter: none !important;
}
.page-loader {
    background: #010808;
}
body:has(#kt_login) {
    background: #091417 !important;
}
body:has(#kt_login):after {
    content: none !important;
}

#kt_login.bg-white {
    background-color: #091417 !important;
}
#kt_login.bg-white {
    content: "";
    background-image: url(../media/sever/sever-icon-big.png);
    background-size: 40%;
    background-position: 100% 55%;
    background-repeat: no-repeat;
    position: fixed;
    width: 100%;
    height: 100%;
}
#kt_login .form-control {
    color: #7d7f80;
    background-color: #091417;
    border: 2px solid #28eb96;
    border-radius: 1rem;
}
#kt_login label {
    color: #28eb96;
}
#kt_login .login-form {
    position: absolute;
    left: 400px;
    background-color: #091417;
    padding: 2rem;
    border-radius: 2rem;
    z-index: 999999;
}
@media (max-width: 991.98px) {
    .login.login-1 .login-form {
        position: revert !important;
    }
}
#kt_login .login-label {
    position: relative;
    left: -100px;
}

#kt_login .login-label p {
    color: #bbb6af !important;
    text-shadow: 1px 5px 15px black;
    font-family: 'Carta-Marina-Bold', serif;
    text-transform: uppercase;
    font-size: 2rem !important;
    font-weight: bold;
    margin-bottom: 0 !important;
    line-height: 0;
}
#kt_login .login-label h3 {
    color: #28eb96 !important;
    text-shadow: 1px 5px 15px black;
    font-family: 'Carta-Marina-Bold', serif;
    text-transform: uppercase;
    font-size: 10rem !important;
    font-weight: bold;
}

#kt_login .login-aside {
    background-image: url('/metronic8/demo2/assets/media/sever/register-bg.png') !important;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
}
#kt_login .login-form form .btn.btn-secondary {
    color: #28eb96;
    background-color: transparent;
    border-color: #28eb96;
    border-radius: 1rem;
}
#kt_login .login-form .btn.btn-secondary.btn-back-home {
    color: #091417;
    background-color: #7d7f80;
    border-color: #091417;
    border-radius: 1rem;
    position: absolute;
    bottom: 50px;
}
#kt_login .login-form.login-signin .btn.btn-secondary.btn-back-home {
    position: absolute;
    bottom: 110px;
}
#kt_login .login-form.login-forget .btn.btn-secondary.btn-back-home {
    position: absolute;
    bottom: 50px;
}
#kt_login.login-forget .login-label h3 {
    font-size: 4rem !important;
}
#kt_login .login-form form div.mb-3:has(.btn.btn-secondary) {
    text-align: right;
}
#kt_login .login-form form input[name="captcha[input]"] {
    margin-top: 10px;
}
a#kt_login_signup {
    color: #28eb96;
}