/* Coded by m1xawy*/

@font-face {
    font-family: Aeonik-Regular;
    src: url(../fonts/Aeonik-Regular.ttf);
}
@font-face {
    font-family: AeonikBlack-Regular;
    src: url(../fonts/AeonikBlack-Regular.ttf);
}
@font-face {
    font-family: Kaishou;
    src: url(../fonts/Kaishou.ttf);
}
@font-face {
    font-family: MyriadPro-Regular;
    src: url(../fonts/MyriadPro-Regular.otf);
}
@font-face {
    font-family: ABCGintoNordCondensed-Black-Trial;
    src: url(../fonts/ABCGintoNordCondensed-Black-Trial.otf);
}
.font-aeonik-regular {
    font-family: 'Aeonik-Regular', sans-serif;
}
.font-aeonik-black-regular {
    font-family: 'AeonikBlack-Regular', sans-serif;
}
.font-kaishou {
    font-family: 'Kaishou', sans-serif;
}
.font-myriad-pro-regular {
    font-family: 'MyriadPro-Regular', sans-serif;
}
.font-ABCG-into-nord-condensed-black-trial {
    font-family: 'ABCGintoNordCondensed-Black-Trial', sans-serif;
}
.font-cinzel {
    font-family: 'Cinzel', sans-serif;
}
@media (min-width: 1400px) {
    .container-fluid {
        max-width: 1780px;
    }
}
@media (min-width: 1800px) {
    .sticky-top .container-fluid {
        max-width: 1654px;
    }
}

body {
    color: #e3e3e3;
    background-color: #070707;
    background-image: linear-gradient(to top, rgba(7, 7, 7, 0), rgba(7, 7, 7, 0.5)), url("../images/bg-navbar.png");
    background-repeat: repeat-x;
    background-position: top center;
    font-family: "Aeonik-Regular", sans-serif;
    font-weight: 400;
    font-style: normal;
}
a:hover, button:hover {
    filter: brightness(120%) !important;
}
.sticky-top {
    position: relative;
    top: 0;
    z-index: 2;
}
.navbar-top {
    position: relative;
    background-color: transparent;
    background-image: url("../images/bg-header-top.png");
    background-repeat: no-repeat;
    background-position: 100% 0%;
    background-size: cover;
    border: 1px solid #5f5344;
    border-left: none;
    border-right: none;
    margin: 1rem 0rem 3rem;
    padding: 14px;
}
.navbar-top::before {
    content: "";
    position: absolute;
    top: 0;
    left: -30px;
    width: 30px;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml;utf8,\
    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 60'>\
      <polyline points='30,0 0,30 30,60' fill='none' stroke='%235f5344' stroke-width='1' stroke-linejoin='miter'/>\
    </svg>");
}
.navbar-top::after {
    content: "";
    position: absolute;
    top: 0;
    right: -30px;
    width: 30px;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml;utf8,\
    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 60'>\
      <polyline points='0,0 30,30 0,60' fill='none' stroke='%235f5344' stroke-width='1' stroke-linejoin='miter'/>\
    </svg>");
}
.navbar-top p {
    color: #e4dcce;
}
.navbar-top p span {
    color: #d7b377;
}
.navbar-top ul li a i {
    font-size: 26px;
    background: linear-gradient(to bottom, #f8d8a7, #d9b682);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.navbar-logo {
    position: relative;
    display: inline-block;
}
.navbar-logo::before {
    content: "";
    position: absolute;
    top: calc(50% + 8px);
    transform: translateY(-50%);
    width: 463px;
    height: 59px;
    background: url("../images/bg-logo.png") no-repeat center center;
    background-size: contain;
    z-index: -1;
}
.navbar-logo::after {
    content: "";
    position: absolute;
    top: calc(50% + 75px);
    transform: translateY(-50%);
    width: 380px;
    height: 13px;
    background: url("../images/border-logo.png") no-repeat center center;
    background-size: contain;
    z-index: -1;
}
.navbar-nav .nav-link {
    color: #e4bf81;
    position: relative;
}
.navbar-nav .nav-item.active .nav-link,
.navbar-nav .nav-link:hover {
    color: #e4dcce;
}
.navbar-nav .nav-link::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 100%;
    height: 13px;
    background: url("../images/border-logo.png") no-repeat center center;
    background-size: 150%;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.navbar-nav .nav-link:hover::before,
.navbar-nav .nav-item.active .nav-link::before {
    opacity: 1;
}
.btn-login {
    min-width: 189px;
    min-height: 44px;
    color: #e4bf81;
    font-weight: bold;
    line-height: 2;
    background: url('../images/btn-login.png') no-repeat center center;
    background-size: auto;
    border: 0;
    border-radius: 0;
}
.btn-login span {
    text-transform: uppercase;
    background: linear-gradient(to bottom, #ecd1a3, #c9ae80);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 1px rgba(225, 170, 126, 0.2);
    filter: drop-shadow(1px 0 #281c0e) drop-shadow(-1px 0 #281c0e) drop-shadow(0 1px #281c0e) drop-shadow(0 -1px #281c0e);
}
.btn-login:hover,
.btn-login.active {
    color: #fff;
    background-color: transparent;
    border: none;
    border-radius: 0;
}
.btn-login:hover span,
.btn-login.active span {
    background: linear-gradient(to bottom, #fff, #fff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
header {
    min-height: 900px;
    position: relative;
    overflow: hidden;
}
.divider {
    display: block;
    width: 100%;
    height: 46px;
    margin: auto;
    background-image: url(../images/divider.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
.divider-footer {
    display: block;
    width: 100%;
    height: 4px;
    margin: auto;
    background-image: url(../images/divider-footer.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
.pegi p {
    font-size: 13px;
    line-height: 1.2;
}
.footer-backlink li {
    display: flex;
    width: 72px;
    height: 42px;
    background: url("../images/bg-footer-backlink.png") no-repeat center center;
    background-size: contain;
    align-items: center;
    justify-content: center;
    margin: 2px;
}
.footer-copyright a {
    color: #f0c46e;
}
.footer-links li {
    margin: 0 0px;
}
.footer-links a {
    color: #f0c46e;
    font-weight: bold;
    text-transform: uppercase;
}
.footer-links li a {
    padding: 0 20px;
}
.footer-links li:not(:last-child) a {
    border-right: 1px solid #f0c46e;
}

.card {
    background-color: transparent;
    border: 1px solid #675743;
    border-radius: 0;
    position: relative;
    overflow: hidden;
}
.card > .border-top-left {
    position: absolute;
    top: -2px;
    left: -2px;
    width: 206px;
    height: 206px;
    background: url("../images/border-card.png") no-repeat;
    transform: rotate(0deg);
}
.card > .border-top-right {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 206px;
    height: 206px;
    background: url("../images/border-card.png") no-repeat;
    transform: rotate(90deg);
}
.card > .border-bottom-left {
    position: absolute;
    bottom: -2px;
    left: -2px;
    width: 206px;
    height: 206px;
    background: url("../images/border-card.png") no-repeat;
    transform: rotate(270deg);
}
.card > .border-bottom-right {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 206px;
    height: 206px;
    background: url("../images/border-card.png") no-repeat;
    transform: rotate(180deg);
}
.card .card-header {
    color: #d9bb7e;
    font-family: AeonikBlack-Regular, serif;
    font-size: 1.3rem;
    font-weight: 900;
    text-transform: uppercase;
    border: 0;
    background: linear-gradient(to bottom, #ffdeac 1%, #c9ae80 80%, #ecd1a3 80%, #dcb984 99%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 1px rgba(225, 170, 126, 0.2);
    filter: drop-shadow(1px 0 #281c0e) drop-shadow(-1px 0 #281c0e) drop-shadow(0 1px #281c0e) drop-shadow(0 -1px #281c0e);
}
.card .card-body {
    position: relative;
}
.card-top-ranking {
    max-height: 450px;
}
.card-top-ranking .card-body {
    padding: 5px;
}
.card-top-ranking .table {
    font-size: 12px;
    font-weight: 400;
    border-collapse: separate;
    border-spacing: 5px 5px;
    margin-bottom: 0;
}
.card-top-ranking .table>:not(caption)>*>* {
    padding: .3rem .3rem;
}
.card-top-ranking .table thead {
    background: none;
}
.card-top-ranking .table thead tr th {
    color: #d4b880;
    font-size: 14px;
    font-family: "Aeonik-Regular", sans-serif;
    font-weight: normal;
    text-align: center;
    background: none;
    border: none;
    box-shadow: none;
    filter: none;
}
.card-top-ranking .table tbody tr td {
    color: #e3e3e3;
    background: #202020;
    border: 1px solid #353535;
    box-shadow: none;
    text-align: center;
    border-top-left-radius: 9px;
    border-bottom-left-radius: 9px;
    border-top-right-radius: 9px;
    border-bottom-right-radius: 9px;
}
.card-top-ranking .table tbody tr td a {
    color: #fff4d0;
    text-decoration: none;
}
.card-sox-plus ul li span,
.card-sox-plus ul li a {
    color: #e3b98a;
}
.card-unique-kills ul li a {
    color: #e3b98a;
}

.card-sox-plus,
.card-unique-kills {
    max-height: 450px;
    background: url("../images/bg-unique-kills.png") repeat-y bottom right;
    background-size: 100%;
}

#tns1-ow .tns-nav button,
#tns2-ow .tns-nav button {
    width: 14px;
    height: 14px;
    background-color: transparent;
    border: 2px solid #f6e27a;
    border-radius: 50px;
    margin: 0px 3px;
    opacity: 1;
}
#tns1-ow .tns-nav button.tns-nav-active,
#tns2-ow .tns-nav button.tns-nav-active {
    opacity: 1;
    background: linear-gradient(to bottom, #f6e27a, #cc9c51);
}
#tns1-ow,
#tns2-ow {
    display: flex;
    flex-direction: column-reverse;
}
#tns1-ow > button,
#tns2-ow > button {
    display: none;
}
#tns1-ow .tns-nav,
#tns2-ow .tns-nav {
    display: flex;
    align-self: flex-end;
    position: relative;
    top: -15px;
    z-index: 1;
}
.discord {
    background: url("../images/bg-discord.png") repeat-x center center;
    background-size: contain;
    padding: 5rem;
}
.server-stats {
    background: url("../images/bg-status.png") repeat-x center center;
    background-size: contain;
}
.card-server-info {
    background: url("../images/bg-server-info.png") no-repeat center center;
    background-size: contain;
    max-height: 357px;
}
.card-status {
    min-height: 155px;
    max-height: 155px;
    background-image: url('../images/bg-card-status-left.png'), url('../images/bg-card-status-right.png');
    background-repeat: no-repeat, no-repeat;
    background-position: left center, right center;
    background-size: auto 100%, auto 100%;
    padding: 2.5rem 0;
    line-height: 1;
}
.card-status .card-header {
    padding: 0;
}
#clock {
    text-align: center;
    display: block;
    font-size: 3rem;
    color: #ffead3;
    font-weight: 100;
    margin-top: 0px;
}
.progress {
    height: 27px;
    background-color: #070707;
    border: 1px solid #504437;
    border-radius: 13px;
    margin-top: 10px;
    padding: 3px;
}
.progress-bar {
    height: 23px;
    color: #070707;
    background: linear-gradient(to right, #1acc6c, #ffea7b);
    border: 2px solid transparent;
    border-radius: 11px;
}
.card-status a {
    display: block;
    color: #d9bb7e;
    text-align: center;
    text-transform: uppercase;
    font-size: 3rem;
    font-weight: 900;
    font-family: "ABCGintoNordCondensed-Black-Trial", sans-serif;
    background: linear-gradient(180deg, #cc9c51 0%, #f6e27a 0%, #ffff91 40%, #cc9c51 80%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 1px rgba(225, 170, 126, 0.2);
    filter: drop-shadow(1px 0 #281c0e) drop-shadow(-1px 0 #281c0e) drop-shadow(0 1px #281c0e) drop-shadow(0 -1px #281c0e);
}
.card-slider {
    border: 1px solid #675743;
    border-radius: 56px 56px 0 0;
    margin: 1rem 4rem;
}
.card-slider > .border-bottom-left,
.card-slider > .border-bottom-right {
    z-index: 1;
}
.carousel-indicators {
    justify-content: end;
    margin-right: 15px;
}
.carousel-control-next,
.carousel-control-prev {
    display: none;
}
.carousel-inner {
    height: 100%;
}
.carousel-indicators [data-bs-target] {
    width: 15px;
    height: 15px;
    background-color: transparent;
    border: 2px solid #f6e27a;
    border-radius: 50px;
    opacity: 1;
}
.carousel-indicators .active {
    background: linear-gradient(to bottom, #f6e27a, #cc9c51);
    border: 2px solid transparent;
    opacity: 1;
}
.carousel-item img {
    object-fit: cover;
    height: 100%;
}
.card-server-info .table tbody tr td {
    color: #e3e3e3;
    background: #080808;
    border: 1px solid #2e2e2e;
}
.card-server-info .table tbody tr td b {
    color: #ffe5b3;
}

.fortress {
    background: url("../images/bg-fortress.png") no-repeat center center;
    background-size: contain;
}
.fortress-box {
    min-height: 87px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 1rem;
    line-height: 0;
}
.fortress-box a {
    color: #f0c46e;
    text-decoration: none;
}
.card-download {
    max-height: 164px;
    line-height: 1;
    background-image: url('../images/bg-download-box-left.png'), url('../images/bg-download-box-right.png');
    background-repeat: no-repeat, no-repeat;
    background-position: left center, right center;
    background-size: auto 100%, auto 100%;
}
.card-download .hoster span:last-child {
    color: #f0c46e;
}
.gradient-text {
    font-family: "ABCGintoNordCondensed-Black-Trial", serif;
    font-optical-sizing: auto;
    font-weight: 900;
    text-transform: uppercase;
    background: linear-gradient(180deg, #cc9c51 0%, #f6e27a 0%, #ffff91 40%, #cc9c51 80%);
    text-shadow: 0 0 1px rgba(225, 170, 126, 0.2);
    background-size: 200% auto;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(1px 0 #281c0e) drop-shadow(-1px 0 #281c0e) drop-shadow(0 1px #281c0e) drop-shadow(0 -1px #281c0e);
}
.table {
    text-align: center;
}
.table thead {
    background: url("../images/bg-thead.png") repeat-x center center;
    background-size: 100%;
}
.table thead th {
    color: #070707;
    background-color: transparent;
    font-size: 1.3rem;
    text-transform: uppercase;
    font-family: "ABCGintoNordCondensed-Black-Trial", serif;
    font-weight: 900;
    border: 0;
    padding: .8rem .8rem;
    box-shadow: none;
    filter: drop-shadow(1px 0 #f5e077) drop-shadow(-1px 0 #f5e077) drop-shadow(0 1px #f5e077) drop-shadow(0 -1px #f5e077);
}

.table tbody td {
    background-color: #070707;
    color: #e2e2e2;
    border: 1px solid #675743;
    padding: .7rem .7rem;
    box-shadow: none;
}
.table tbody td a {
    color: #eddead;
    text-decoration: none;
}
.card-driver {
    height: 170px;
}
.card-requirements .table tbody th,
.card-requirements .table tbody td:first-child {
    color: #d9bb7e;
    background: linear-gradient(to bottom, #ffdeac 1%, #c9ae80 80%, #ecd1a3 80%, #dcb984 99%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 1px rgba(225, 170, 126, 0.2);
    filter: drop-shadow(1px 0 #281c0e) drop-shadow(-1px 0 #281c0e) drop-shadow(0 1px #281c0e) drop-shadow(0 -1px #281c0e);
    font-family: "AeonikBlack-Regular", serif;
}
#content-replace > h2 {
    display: none;
}
.btn-ranking {
    min-width: 412px;
    min-height: 49px;
    color: #d9bb7e;
    font-weight: bold;
    line-height: 2;
    background: url('../images/btn-ranking.png') no-repeat center center;
    background-size: auto;
    border: 0;
    border-radius: 0;
}
.btn-ranking:hover,
.btn-ranking.active {
    color: #fff;
    background: url('../images/btn-ranking-active.png') no-repeat center center;
    background-size: auto;
    border: none;
    border-radius: 0;
}
.btn-ranking span {
    color: #d9bb7e;
    font-family: AeonikBlack-Regular, serif;
    font-size: 1.3rem;
    font-weight: 900;
    text-transform: uppercase;
    border: 0;
    background: linear-gradient(to bottom, #ffdeac 1%, #c9ae80 80%, #ecd1a3 80%, #dcb984 99%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 1px rgba(225, 170, 126, 0.2);
    filter: drop-shadow(1px 0 #281c0e) drop-shadow(-1px 0 #281c0e) drop-shadow(0 1px #281c0e) drop-shadow(0 -1px #281c0e);
}
.btn-ranking:hover span,
.btn-ranking.active span {
    background: linear-gradient(to bottom, #070707, #070707);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(1px 0 #f5e077) drop-shadow(-1px 0 #f5e077) drop-shadow(0 1px #f5e077) drop-shadow(0 -1px #f5e077);
}
section.register {
    min-height: 150px;
    background: url("../images/bg-register.png") repeat-x top center;
    background-size: cover;
    margin: 3rem 0;
}
.form-label {
    display: block;
    text-align: center;
}
.form-label label {
    text-align: center;
    font-size: 18px;
    font-family: "ABCGintoNordCondensed-Black-Trial", serif;
    font-optical-sizing: auto;
    font-weight: 900;
    text-transform: uppercase;
    background: linear-gradient(180deg, #cc9c51 0%, #f6e27a 0%, #ffff91 40%, #cc9c51 80%);
    text-shadow: 0 0 1px rgba(225, 170, 126, 0.2);
    background-size: 200% auto;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(1px 0 #281c0e) drop-shadow(-1px 0 #281c0e) drop-shadow(0 1px #281c0e) drop-shadow(0 -1px #281c0e);
}
.form-control {
    color: #e3e3e3;
    background-color: transparent;
    background-image: url('../images/bg-input-left.png'), url('../images/bg-input-right.png'), url('../images/bg-input-center.png');
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-position: left center, right center, center center;
    background-size: auto 100%, auto 100%, auto 100%;
    border: none;
    border-radius: 0;
    padding: 10px 20px;
}
.form-control::placeholder {
    color: #2d2d2d;
    text-align: center;
}
.form-control:focus {
    background-color: transparent;
    box-shadow: none;
}

div:has(>button[type="submit"]) {
    text-align: center;
}
.btn-register,
button[type="submit"] {
    min-width: 412px;
    min-height: 49px;
    color: #070707;
    background-color: transparent;
    font-size: 1.3rem;
    font-family: "ABCGintoNordCondensed-Black-Trial", serif;
    text-transform: uppercase;
    font-weight: 900;
    border: 0;
    padding: .8rem .8rem;
    box-shadow: none;
    line-height: 2;
    background-image: url('../images/btn-register-left.png'), url('../images/btn-register-right.png'), url('../images/btn-register-center.png');
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-position: left center, right center, center center;
    background-size: auto 100%, auto 100%, auto 100%;
    border-radius: 0;
}
.btn:hover {
    color: #e3e3e3;
    background-color: transparent;
    border-color: transparent;
}
.form-check-input {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 24px;
    height: 24px;
    background: url("../images/icon-unchecked.png") no-repeat center center;
    background-size: contain;
    border: none;
    outline: none;
    cursor: pointer;
    margin-left: 0 !important;
    margin-right: 10px;
}
.form-check-input:checked {
    background: url("../images/icon-checked.png") no-repeat center center;
    background-size: contain;
}
.form-check-input:focus {
    box-shadow: none;
    border-radius: 0;
}
.forget span {
    color: #c5c5c5;
}
/*
* FIX: Browser Autofill Background and Text Color
* Target: Inputs within a container with the class 'card-login'
*/

/* 1. Chrome, Safari, Edge, and Opera */
.card-login input:-webkit-autofill,
.card-login input:-webkit-autofill:hover,
.card-login input:-webkit-autofill:focus,
.card-login input:-webkit-autofill:active {
    /* Prevents the default yellow/blue background color */
    -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
    /* Sets the text color to your desired light color */
    -webkit-text-fill-color: #e3e3e3 !important;
    /* Forces the cursor (caret) color to match the text */
    caret-color: #e3e3e3 !important;
    /* Removed redundant background-color and transition properties */
}

/* 2. Firefox */
/*
* Firefox doesn't reliably support the 'autofill' pseudo-class
* and does not use the -webkit- prefix.
* The best practice for Firefox is to use the standard 'autofill' pseudo-class
* for future proofing, but be aware it might not always work perfectly.
*/
.card-login input:autofill,
.card-login input:autofill:hover,
.card-login input:autofill:focus,
.card-login input:autofill:active {
    /* Sets the text fill color directly */
    -moz-text-fill-color: #e3e3e3 !important;
    /* Removes the background color using box-shadow trick */
    box-shadow: 0 0 0 1000px transparent inset !important;
    /* Forces the cursor (caret) color to match the text */
    caret-color: #e3e3e3 !important;
}
.forget a {
    color: #b9b9b9;
}
.top {
    padding: 0;
    background: transparent;
    border-bottom: none;
}
.header {
    background-color: transparent;
    border-bottom: none;
}
.table-striped>tbody>tr:nth-of-type(odd)>* {
    color: #e3e3e3;
}
.table.table-inventory th, .table.table-inventory td {
    border: none;
    text-align: left !important;
}
.table tbody tr:nth-of-type(odd) {
    background-color: transparent;
}
.table-striped>tbody>tr:nth-of-type(odd)>* {
    --bs-table-color-type: #e3e3e3;
    --bs-table-bg-type: transparent;
}
.table>:not(caption)>*>* {
    background-color: transparent;
    box-shadow: none;
}
tbody, td, tfoot, th, thead, tr {
    border-color: #675743;
}

#display-inventory-set h2,
#display-inventory-avatar h2 {
    display: none;
}
.table-inventory td {
    float: left;
}
.table-inventory td:last-child {
    float: right;
    text-align: left;
}
.sro-item-detail {
    background: none;
    width: 38px;
}
.sro-item-detail.sro-item-special {
    background: none;
}
.sro-item-detail .item {
    background-color: transparent;
    background-image: url(../images/slot.png);
    background-position: center center;
    background-size: 100%;
    margin: 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;
}
.table.table-inventory th, .table.table-inventory td {
    position: initial;
    z-index: initial;
}
.table-inventory tr:first-child td {
    padding: 0px 0px 30px 4px;
}
.pagination .page-link {
    color: #e3e3e3;
    background-color: transparent;
    border-color: transparent;
}
.pagination .page-link:hover {
    color: #d7b377;
    background-color: transparent;
    border-color: transparent;
}
.pagination .page-item.active .page-link {
    color: #d7b377;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 42px;
    background: url("../images/bg-footer-backlink.png") no-repeat center center;
    background-size: contain;
    border: none;
}
.pagination .page-item.disabled .page-link {
    color: #e3e3e3;
    background-color: transparent;
    border-color: transparent;
}
.pagination .page-item:first-child .page-link,
.pagination .page-item:last-child .page-link {
    color: #d7b377 !important;
    background-color: transparent;
    border-color: transparent;
}
#modalLogged .modal-dialog {
    position: relative;
    width: auto;
    margin-top: 250px;
    pointer-events: none;
}
@media (min-width: 576px) {
    #modalLogged .modal-dialog {
        max-width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}
#modalLogged .modal-content {
    color: #e3e3e3;
    background-color: transparent;
    border-color: transparent;
}
#modalLogged .modal-header {
    display: none;
}
.modal-backdrop {
    background-color: #000;
}
.modal-backdrop.show {
    opacity: 0.5;
}
::-webkit-scrollbar {
    width: 14px;
}
::-webkit-scrollbar-track {
    background: #070707;
    border: 1px solid #675743;

}
::-webkit-scrollbar-thumb {
    background: linear-gradient(to left, #f6e27a, #cc9c51);
    background-clip: content-box;
    border: 4px solid transparent;
}
::-webkit-scrollbar-thumb:hover {
    background: #cc9c51;
    background-clip: content-box;
    border: 4px solid transparent;
}
.card-account .btn-ranking {
    width: auto;
    height: auto;
    min-width: 200px;
    min-height: auto;
    margin: 0 5px;
    background-size: 100% 100%;
}
.card-account .btn-ranking:hover, .card-account .btn-ranking.active {
    background-size: 100% 100%;
}
.card-coins {
    min-width: 432px;
    min-height: 80px;
    background-color: #070707;
}
.card-coins span {
    display: inline-block;
    width: 183px;
    min-height: 40px;
    background: #070707;
    border: 1px solid #675743;
    line-height: 2;
}
.card-coins .card-body > p {
    color: #d7b377;
    margin-top: 5px;
}
.card-account a.logout {
    color: #d7b377 !important;
}
.card-account div:has(>.btn-close) {
    position: absolute;
    right: 0;
}
.card-account .btn-close {
    background: none;
    font-size: 1.5rem;
    color: #d7b377;
    opacity: 1;
}
.card-account .btn-close:hover {
    color: #d7b377;
    text-decoration: none;
    opacity: 1;
}
.card-guild {
    max-width: 802px;
    min-height: 166px;
    background: url("../images/bg-card-guild.png") no-repeat center right;
    background-size: contain;
}
.card-guild h3 {
    background: linear-gradient(0deg, #fff7ec 0%, #f6c67a 0%, #fff7ec 40%, #fff7ec 80%);
    text-shadow: 0 0 1px rgba(47, 37, 23, 0.2);
    background-size: 200% auto;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(1px 0 4px #2f2517) drop-shadow(-1px 0 4px #2f2517) drop-shadow(0 1px 4px #2f2517) drop-shadow(0 -1px 4px #2f2517);
}
.card-guild p {
    color: #f0d0a0;
}
.card-guild p span {
    color: #e4dcce;
}
.card-inventory {
    background: url("../images/bg-card-inventory.png") no-repeat bottom center;
    background-size: cover;
}
.card-inventory .card-body {
    padding: 0 2rem;
}
.card-inventory .card-body > div > p > a {
    color: #f0c46e;
}
#btn-inventory-inventory.btn-ranking,
#btn-inventory-avatar.btn-ranking {
    width: auto;
    height: auto;
    min-width: auto;
    min-height: auto;
    margin: 0 5px;
    color: #e4bf81;
    background-size: 100% 100%;
}
#btn-inventory-inventory.btn-ranking span,
#btn-inventory-avatar.btn-ranking span {
    color: #e4bf81;
}
#btn-inventory-inventory.btn-ranking:hover,
#btn-inventory-inventory.btn-ranking.active,
#btn-inventory-avatar.btn-ranking:hover,
#btn-inventory-avatar.btn-ranking.active {
    color: #fff;
    background: url('../images/btn-ranking.png') no-repeat center center;
    background-size: 100% 100%;
}
#btn-inventory-inventory.btn-ranking:hover span,
#btn-inventory-inventory.btn-ranking.active span,
#btn-inventory-avatar.btn-ranking:hover span,
#btn-inventory-avatar.btn-ranking.active span {
    color: #d7d7d7;
    background: none;
    text-shadow: none;
    filter: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
}
.table.table-inventory tbody td {
    background-color: transparent;
}
.sro-item-detail .item {
    box-shadow: 0 0 12px rgba(219, 190, 137, 0.5);
}
.card-inventory .card-body > div > h3 {
    background: linear-gradient(0deg, #fff7ec 0%, #f6c67a 0%, #fff7ec 40%, #fff7ec 80%);
    text-shadow: 0 0 1px rgba(47, 37, 23, 0.2);
    background-size: 200% auto;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(1px 0 4px #2f2517) drop-shadow(-1px 0 4px #2f2517) drop-shadow(0 1px 4px #2f2517) drop-shadow(0 -1px 4px #2f2517);
}
.card-inventory .card-body > div > p {
    color: #e3e3e3;
}
.card-inventory .card-body > div > p > span {
    color: #f0c46e;
}
.card-character-job,
.card-character-unique,
.card-character-global,
.card-character-info {
    background: url("../images/bg-card-character.png") no-repeat top center;
    background-size: cover;
}
.card-character-global ul li p,
.card-character-info ul li p {
    color: #f0d0a0;
}
.card-character-global ul li p span,
.card-character-info ul li p span {
    color: #e4dcce;
}
.card-character-unique {
    min-height: 258px;
    max-height: 258px;
}
.card-donate {
    min-height: 224px;
    max-height: 224px;
}
.card-donate .card-header {
    line-height: 1;
    color: #e4dcce;
    font-family: 'Aeonik-Regular', sans-serif;
    text-transform: capitalize;
    background: none;
    text-shadow: none;
    filter: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
}

.form-control:focus {
    background-color: transparent ;
    border: none;
    box-shadow: none;
}
.form-control::placeholder {
    color: #bea561;
    opacity: 1;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
    box-shadow: 0 0 0px 1000px transparent  inset !important;
    -webkit-text-fill-color: #ffc345 !important;

    border-bottom: 1px solid #504639 !important;
    transition: background-color 9999s ease-in-out 0s;
}

.form-control option {
    color: #ffc345;
    background-color: #070707;
    border: 1px solid #ffc345;
}

.form-control {
    min-width: 360px;
    max-width: 920px;
    margin: auto;
}

div:has(>.captcha-reload) {
    max-width: 920px;
    margin: auto;
}
.btn:focus-visible {
    color: #000;
    background-color: transparent;
    border-color: transparent;
    outline: 0;
    box-shadow: none;
}
.carousel {
    margin-bottom: 0;
}
.carousel-control-next, .carousel-control-prev {
    display: block;
}
.carousel-control-prev-icon {
    background-image: url("../images/arrow-left.png");
}
.carousel-control-next-icon {
    background-image: url("../images/arrow-right.png");
}
.carousel-control-prev {
    left: -150px;
}
.carousel-control-next {
    right: -150px;
}
.form-inline {
    text-align: center;
}
a {
    color: #f0c46e;
}
#mainCharacter {
    min-width: 412px;
    min-height: 49px;
    color: #d9bb7e;
    font-weight: bold;
    line-height: 2;
    background: url('../images/btn-ranking.png') no-repeat center center;
    background-size: auto;
    border: 0;
    border-radius: 0;
}
#mainCharacter:hover {
    color: #dac7a1 !important;
}

button[type="submit"]:disabled,
button[type="submit"] {
    max-width: 712px;
    background-color: transparent;
    border-color: transparent;
}