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

.server-info .card-rounded-bottom {
    border-bottom-left-radius: .625rem !important;
    border-bottom-right-radius: .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, .9);
    backdrop-filter: blur(5px);
    border-bottom: 2px solid #f9f9f9
}

[data-bs-theme=light] .app-header-secondary {
    background: rgba(255, 255, 255, .9);
/ / backdrop-filter: blur(5 px)
}

[data-bs-theme=dark] .app-header-primary {
    background-color: rgba(30, 30, 45, .9);
    backdrop-filter: blur(5px);
    border-bottom: 2px solid #2b2b40
}

[data-bs-theme=dark] .app-header-secondary {
    background-color: rgba(30, 30, 45, .9);
/ / backdrop-filter: blur(5 px)
}

.timeline-label .timeline-label {
    width: 100px
}

.timeline-label:before {
    left: 101px
}

.home-intro h4, .home-intro h3 {
    text-shadow: 1px 5px 15px #000;
    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: .75rem !important;
    margin-top: .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 #dee2e6 !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(11183175 / 10 %)
}

.ranking .ranking-main-button.player {
/ / background-color: rgb(11183175 / 10 %)
}

.ranking .ranking-main-button.guild {
/ / background-color: rgb(11183175 / 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(11183175 / 10 %)
}

.ranking .ranking-main-button.alliance {
/ / background-color: rgb(11183175 / 10 %)
}

.ranking .ranking-main-button.unique {
/ / background-color: rgb(11183175 / 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(../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: 0 0
}

.sro-item-detail .tooltip {
    font-size: 12px;
    width: 220px;
    min-height: 200px;
    background-color: rgba(28, 30, 52, .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: .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: 0 0
}

.sro-item-detail {
    background: 0 0
}

.sro-item-detail.sro-item-special {
    background: 0 0
}

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