.header, .footer {
    background-color: transparent !important;
}

.server-info .card-rounded-bottom {
    border-bottom-left-radius: 0.625rem !important;
    border-bottom-right-radius: 0.625rem !important;
}

[data-bs-theme=light] body:not(.app-blank) {
    background-image: url(../media/sever/header-bg.jpg);
}
[data-bs-theme=dark] body:not(.app-blank) {
    background-image: url(../media/sever/header-bg-dark.png);
}

[data-bs-theme=light] body.home {
    position: relative;
    z-index: 0;
}
[data-bs-theme=light] body.home::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    max-height: 800px;
    background-image: url(../media/sever/home-bg.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

[data-bs-theme=light] body.home {
    position: relative;
    z-index: 0;
}
[data-bs-theme=dark] body.home::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    max-height: 800px;
    background-image: url(../media/sever/home-bg-dark.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

[data-bs-theme=light] .server-info.card .card-header {
    background-image: linear-gradient(to right, rgb(80 205 137 / 0%), rgb(80 205 137 / 0%)), url(../media/sever/server-info-bg.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
[data-bs-theme=dark] .server-info.card .card-header {
    background-image: linear-gradient(to right, rgb(80 205 137 / 0%), rgb(80 205 137 / 0%)), url(../media/sever/server-info-bg-dark.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

[data-bs-theme=light] .card.home-banner .carousel-item.slide-1 {
    background-image: linear-gradient(to bottom, rgb(80 205 137 / 0%), rgb(80 205 137 / 0%)), url(../media/sever/banner-bg-1.png) !important;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
[data-bs-theme=light] .card.home-banner .carousel-item.slide-2 {
    background-image: linear-gradient(to bottom, rgb(80 205 137 / 0%), rgb(80 205 137 / 0%)), url(../media/sever/banner-bg-2.png) !important;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
[data-bs-theme=light] .card.home-banner .carousel-item.slide-3 {
    background-image: linear-gradient(to bottom, rgb(80 205 137 / 0%), rgb(80 205 137 / 0%)), url(../media/sever/banner-bg-3.png) !important;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

[data-bs-theme=dark] .card.home-banner .carousel-item.slide-1 {
    background-image: linear-gradient(to bottom, rgb(80 205 137 / 0%), rgb(80 205 137 / 0%)), url(../media/sever/banner-bg-dark-1.jpg) !important;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
[data-bs-theme=dark] .card.home-banner .carousel-item.slide-2 {
    background-image: linear-gradient(to bottom, rgb(80 205 137 / 0%), rgb(80 205 137 / 0%)), url(../media/sever/banner-bg-dark-2.jpg) !important;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
[data-bs-theme=dark] .card.home-banner .carousel-item.slide-3 {
    background-image: linear-gradient(to bottom, rgb(80 205 137 / 0%), rgb(80 205 137 / 0%)), url(../media/sever/banner-bg-dark-3.jpg) !important;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
[data-bs-theme=light] .card.home-banner .carousel-item.slide-1 .banner-image {
    background-image: url(../media/sever/banner-char-1.png) !important;
    background-position: center;
    background-size: 200%;
    background-repeat: no-repeat;
}
[data-bs-theme=light] .card.home-banner .carousel-item.slide-2 .banner-image {
    background-image: url(../media/sever/banner-char-2.png) !important;
    background-position: center;
    background-size: 200%;
    background-repeat: no-repeat;
}
[data-bs-theme=light] .card.home-banner .carousel-item.slide-3 .banner-image {
    background-image: url(../media/sever/banner-char-3.png) !important;
    background-position: center;
    background-size: 200%;
    background-repeat: no-repeat;
}

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

.header-menu .menu > .menu-item > .menu-link {
    border: none !important;
}
@media (min-width: 992px){
    .header-menu .menu.menu-right > .menu-item {
        margin-right: 0 !important;
        margin-left: 1.5rem !important;
    }
    .header-menu .menu.menu-right > .menu-item > .menu-link {
        padding-left: calc(var(--bs-gutter-x) * .5) !important;
        padding-right: 0 !important;
    }
}
[data-bs-theme=light] .app-header-primary {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(5px);
    border-bottom: 2px solid #f9f9f9;
}
[data-bs-theme=light] .app-header-secondary {
    background: rgba(255, 255, 255, 0.9);
    //backdrop-filter: blur(5px);
}

[data-bs-theme=dark] .app-header-primary {
    background-color: rgba(30, 30, 45, 0.9);
    backdrop-filter: blur(5px);
    border-bottom: 2px solid #2b2b40;
}
[data-bs-theme=dark] .app-header-secondary {
    background-color: rgba(30, 30, 45, 0.9);
    //backdrop-filter: blur(5px);
}
.timeline-label .timeline-label {
    width: 100px;
}
.timeline-label:before {
    left: 101px;
}
.home-intro h4, .home-intro h3 {
    text-shadow: 1px 5px 15px black;
    font-family: 'El Messiri', sans-serif;
}
@media (min-width: 992px){
    .app-header-secondary .app-container {
        padding-left: 150px !important;
        padding-right: 150px !important;
    }
}

.btn-check:active+.btn.btn-active-light-primary .svg-icon, .btn-check:active+.btn.btn-active-light-primary i, .btn-check:checked+.btn.btn-active-light-primary .svg-icon, .btn-check:checked+.btn.btn-active-light-primary i, .btn.btn-active-light-primary.active .svg-icon, .btn.btn-active-light-primary.active i, .btn.btn-active-light-primary.show .svg-icon, .btn.btn-active-light-primary.show i, .btn.btn-active-light-primary:active:not(.btn-active) .svg-icon, .btn.btn-active-light-primary:active:not(.btn-active) i, .btn.btn-active-light-primary:focus:not(.btn-active) .svg-icon, .btn.btn-active-light-primary:focus:not(.btn-active) i, .btn.btn-active-light-primary:hover:not(.btn-active) .svg-icon, .btn.btn-active-light-primary:hover:not(.btn-active) i, .show>.btn.btn-active-light-primary .svg-icon, .show>.btn.btn-active-light-primary i {
    color: #50cd89;
}
.app-header .menu-item.hover:not(.here)>.menu-link:not(.disabled):not(.active):not(.here) .menu-title, .app-header .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) .menu-title {
    color: #50cd89;
}
.app-header .menu-item.hover:not(.here)>.menu-link:not(.disabled):not(.active):not(.here) .menu-icon, .app-header .menu-item.hover:not(.here)>.menu-link:not(.disabled):not(.active):not(.here) .menu-icon .svg-icon, .menu-state-primary .menu-item.hover:not(.here)>.menu-link:not(.disabled):not(.active):not(.here) .menu-icon i, .menu-state-primary .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) .menu-icon, .menu-state-primary .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) .menu-icon .svg-icon, .menu-state-primary .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) .menu-icon i {
    color: #50cd89;
}

.app-header .menu > .menu-item.hover:not(.here) > .menu-link:not(.disabled):not(.active):not(.here) .menu-text, .app-header .menu > .menu-item:not(.here) > .menu-link:hover:not(.disabled):not(.active):not(.here) .menu-text {
    color: #50cd89
}
.menu-state-color .menu-item .menu-link.active .menu-icon, .menu-state-color .menu-item .menu-link.active .menu-icon .svg-icon, .menu-state-color .menu-item .menu-link.active .menu-icon i {
    color: #50cd89;
}
.menu-state-color .menu-item.hover:not(.here)>.menu-link:not(.disabled):not(.active):not(.here) .menu-icon, .menu-state-color .menu-item.hover:not(.here)>.menu-link:not(.disabled):not(.active):not(.here) .menu-icon .svg-icon, .menu-state-color .menu-item.hover:not(.here)>.menu-link:not(.disabled):not(.active):not(.here) .menu-icon i, .menu-state-color .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) .menu-icon, .menu-state-color .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) .menu-icon .svg-icon, .menu-state-color .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) .menu-icon i {
    color: #50cd89;
}

.menu-state-color .menu-item .menu-link.active .menu-title {
    color: #50cd89;
}
.app-header .menu > .menu-item > .menu-link.active .menu-text {
    color: #50cd89
}

.app-header .menu > .menu-item.show > .menu-link .menu-text {
    color: #50cd89
}

.app-header .menu > .menu-item.here > .menu-link .menu-text {
    color: #50cd89
}

.login-form form div.mb-3:has(.btn.btn-secondary) {
    text-align: center;
}

.menu-state-primary .menu-item.here>.menu-link .menu-icon, .menu-state-primary .menu-item.here>.menu-link .menu-icon .svg-icon, .menu-state-primary .menu-item.here>.menu-link .menu-icon i {
    color: #50cd89;
}
.login-form form .btn.btn-secondary {
    color: #fff;
    background-color: #50cd89;
    border-color: #50cd89;
    font-weight: 500 !important;
    padding-left: 2.25rem !important;
    padding-right: 2.25rem !important;
    padding-bottom: 1rem !important;
    padding-top: 1rem !important;
    margin-bottom: 0.75rem !important;
    margin-top: 0.75rem !important;
}

.table {
    margin-top: 2rem;
}
.table th, .table td {
    padding: 1.5rem;
}

[data-bs-theme=light] .table {
    color: #000;
}
[data-bs-theme=light] .table-hover tbody tr:hover {
    color: #000;
}
[data-bs-theme=light] .table-striped>tbody>tr:nth-of-type(odd)>* {
    color: #000;
}
[data-bs-theme=light] .table-hover>tbody>tr:hover>* {
    color: #000;
}
[data-bs-theme=light] .table thead th {
    color: #fff;
    background-color: #000;
    border-color: #000;
}
[data-bs-theme=light] .table tbody td a {
    color: #000;
}
[data-bs-theme=light] .table tr:not(:first-child) td {
    vertical-align: top !important;
    border-top: 1px solid rgb(222, 226, 230) !important;
}

[data-bs-theme=dark] .table {
    color: #fff;
}
[data-bs-theme=dark] .table-hover tbody tr:hover {
    color: #fff;
}
[data-bs-theme=dark] .table-striped>tbody>tr:nth-of-type(odd)>* {
    color: #fff;
}
[data-bs-theme=dark] .table-hover>tbody>tr:hover>* {
    color: #fff;
}
[data-bs-theme=dark] .table thead th {
    color: #fff;
    background-color: #2b2b40;
    border-color: #2b2b40;
}
[data-bs-theme=dark] .table tbody td a {
    color: #fff;
}

[data-bs-theme=dark] .table tr:not(:first-child) td {
    vertical-align: top !important;
    border-top: 1px solid #2b2b40 !important;
}

.table.table-inventory th, .table.table-inventory td {
    padding: 4px !important;
}
[data-bs-theme=light] .table.table-inventory tr:not(:first-child) td {
    vertical-align: top !important;
    border: 0 !important;
}

.ranking .ranking-main-button:hover, .ranking .ranking-main-button.active {
    border-color: #50cd89;
}

.ranking .ranking-main-button {
    //background-color: rgb(11 183 175 / 10%);
}
.ranking .ranking-main-button.player {
    //background-color: rgb(11 183 175 / 10%);
}
.ranking .ranking-main-button.guild {
    //background-color: rgb(11 183 175 / 10%);
}
.ranking .ranking-main-button.trader {
    background-color: rgb(126 171 0 / 10%);;
}
.ranking .ranking-main-button.hunter {
    background-color: rgb(8 161 232 / 10%);
}
.ranking .ranking-main-button.thieves {
    background-color: rgb(109 9 237 / 10%);
}
.ranking .ranking-main-button.honor {
    //background-color: rgb(11 183 175 / 10%);
}
.ranking .ranking-main-button.alliance {
    //background-color: rgb(11 183 175 / 10%);
}
.ranking .ranking-main-button.unique {
    //background-color: rgb(11 183 175 / 10%);
}

.page-item.active .page-link, .page-link:hover {
    color: #50cd89;
    background-color: transparent;
    border-color: #2b2b40;
}
.page-item.disabled .page-link {
    color: #6c757d;
    background-color: transparent;
    border-color: #2b2b40;
}

#content-replace table tbody tr:nth-child(1) td, #content-replace table tbody tr:nth-child(1) td a {
    color: #bf9e41;
}
#content-replace table tbody tr:nth-child(2) td, #content-replace table tbody tr:nth-child(2) td a {
    color: #858186;
}
#content-replace table tbody tr:nth-child(3) td, #content-replace table tbody tr:nth-child(3) td a {
    color: #bf6b19;
}
#content-replace table tbody tr:nth-child(1) td:nth-child(1):before{
    content: '';
    position: absolute;
    width: 29px;
    height: 29px;
    background: url('../media/sever/ranks/medal/medal_gold.png') no-repeat center;
    background-size: contain;
    left: 50px;
}

#content-replace table tbody tr:nth-child(2) td:nth-child(1):before{
    content: '';
    position: absolute;
    width: 29px;
    height: 29px;
    background: url('../media/sever/ranks/medal/medal_silver.png') no-repeat center;
    background-size: contain;
    left: 50px;
}

#content-replace table tbody tr:nth-child(3) td:nth-child(1):before{
    content: '';
    position: absolute;
    width: 29px;
    height: 29px;
    background: url('../media/sever/ranks/medal/medal_bronze.png') no-repeat center;
    background-size: contain;
    left: 50px;
}
[data-bs-theme=light] .sidebar-wrapper .sidebar-menu {
    background: #99a1b7 !important;
}
[data-bs-theme=dark] .sidebar-wrapper .sidebar-menu {
    background: #2f2f42 !important;
}
.table:not(.table-bordered) td:first-child, .table:not(.table-bordered) th:first-child, .table:not(.table-bordered) tr:first-child {
    padding-left: 1.5rem;
}


#chardetail_container #chardetail_label {
    width: 673px;
}
#chardetail_container #chardetail_inventory_container {
    width: 600px;
}
#chardetail_container #chardetail_label {
    background: url(/metronic8/demo2/assets/media/sever/trsro/images/chardetails_labelbg.png) 0 0 repeat-x;
}
#chardetail_container #chardetail_inventory_container {
    background-size: cover;
}


#chardetail_container #chardetail_buttons .chardetail_button {
    height: 100%;
}

.sro-item-detail .item {
    margin: 0;
    background: none;
}

.sro-item-detail .tooltip {
    font-size: 12px;
    width: 220px;
    min-height: 200px;
    background-color: rgba(28, 30, 52, 0.8);
    color: #fff;
    padding: 6px;
    border: 1px solid #808bba;
    border-radius: 5px;
    box-shadow: none;
}

#chardetail_container #chardetail_inventory_container {
    width: auto;
    height: auto;
    border: 0;
    float: none;
    display: flex;
    align-items: end;
}
.char-image {
    width: 130px;
    height: 130px;
    border: 2px solid #fff;
    border-radius: 15%;
    background-position: -9px -14px;
}
[data-bs-theme=light] .char-image {
    border: 2px solid #50cd89;
    transition: 0.3s ease-in-out;
}
.char-image:hover {
    border: 2px solid #50cd89;
}

[data-bs-theme=light] .char-buff, [data-bs-theme=light] .char-info table {
    background: var(--bs-table-striped-bg);
}
[data-bs-theme=dark] .char-buff, [data-bs-theme=dark] .char-info table {
    background: var(--bs-table-striped-bg);
}

#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;
}