html,
body {
    position: relative;
    font-family: "Lunasima", sans-serif;
    font-size: 14px;
    color: #b0aea3;
    background-color: #0d0d0d;
}
a,
button {
    font-family: "Lunasima", sans-serif;
    color: #bfbeb6;
}
.flex {
    display: flex;
    justify-content: center;
    align-items: center;
}
.icon-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 20px;
    background-repeat: no-repeat;
    background-size: contain;
    transition: all 0.3s;
}
.icon-container.users {
    background-image: url(../img/users.png);
}
.icon-container.download-icon {
    width: 45px;
    height: 45px;
    background-image: url(../img/download-icon.png);
}
.img-container {
    display: flex;
}
.img-container img {
    object-fit: contain;
    max-height: 100%;
    max-width: 100%;
}
.hide-on-desktop {
    display: none !important;
}
.dropdown-custom {
    position: relative;
    display: inline-block;
    height: 100%;
}
.dropdown-custom-toggle {
    position: relative;
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    height: 100%;
    width: 100%;
    outline: none;
    border: none;
    font-size: 12px;
    padding: 5px;
    border-radius: 10px;
    background-color: #333;
}
.dropdown-custom.lang .img-container {
    margin-right: 5px;
}
.dropdown-custom-toggle:hover {
    color: #ff9b00;
}
.dropdown-custom-toggle svg {
    transition: all 0.3s;
    height: 12px;
    transform: rotate(180deg);
    stroke: #bfbeb6;
    fill: #fff0;
}
.dropdown-custom-toggle.active svg {
    transform: rotate(0);
}
.dropdown-custom-menu {
    display: none;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    top: 100%;
    width: 100%;
    background-color: #333;
    border-radius: 10px;
}
.dropdown-custom-menu .dropdown-custom-item {
    display: flex;
    width: 100%;
    align-items: center;
    padding: 7px 5px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 400;
    color: #bfbeb6;
}
.dropdown-custom-menu .dropdown-custom-item:hover {
    background-color: #211c28;
    border-radius: 10px;
    color: #ffcd6d;
}
.button {
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url(../img/button.png);
    background-repeat: no-repeat;
    background-size: cover;
    font-size: 13px;
    text-transform: uppercase;
    box-shadow: 0 5px 18px 0 #ff7f0059;
}
.button-small {
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url(../img/button-small.png);
    background-repeat: no-repeat;
    background-size: cover;
    font-size: 13px;
    text-transform: uppercase;
    box-shadow: 0 5px 18px 0 #ff7f0059;
}
.bgweb {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    inset: 0;
}
.bgweb-top {
    position: absolute;
    top: 0;
    z-index: 1;
    display: block;
    width: 100%;
    height: 850px;
    background-image: url(../img/bg-top.jpg);
    background-position-x: center;
    background-position-y: top;
    background-repeat: no-repeat;
    min-height: 850px;
}
.bgweb-bottom {
    position: absolute;
    bottom: 0;
    display: block;
    width: 100%;
    height: 1200px;
    background-image: url(../img/bg-bottom.png);
    background-position-x: center;
    background-position-y: bottom;
    background-repeat: no-repeat;
    min-height: 1200px;
}
.main-nav {
    position: relative;
    z-index: 5;
    display: block;
    height: 62px;
    width: 100%;
    background-image: url(../img/bg-nav.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.main-nav ul {
    display: flex;
    justify-content: center;
    gap: 5px;
}
.main-nav a {
    color: #dbd3c6;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    padding: 8px 12px;
    position: relative;
    transition: all 0.3s ease-in-out;
}
.main-nav a:hover {
    color: #fc0;
    text-shadow: 0 0 10px rgb(255 140 0 / 0.8);
}
.main-content {
    margin: 0 10px;
    padding-top: 10px;
    margin-top: -3px;
    width: calc(100% - 20px);
    height: max-content;
    background-image: url(../img/bg-content-top.jpg);
    background-repeat: repeat-y;
    background-position: center;
}
.main-content-bottom {
    margin: 0 10px;
    width: calc(100% - 20px);
    height: 17px;
    background-image: url(../img/bg-content-bottom.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.nav-frame {
    position: absolute;
    top: -40px;
    display: block;
    width: 110px;
    height: 134px;
    z-index: 5;
    background-image: url(../img/nav-frame.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.nav-frame.nav-left {
    left: -45px;
}
.nav-frame.nav-right {
    right: -45px;
    transform: scaleX(-1);
}
.header {
    position: relative;
    z-index: 5;
    background-color: #191919;
    max-height: 44px;
    height: 44px;
}
.header .container {
    height: 100%;
}
.header-content {
    display: flex;
    height: 100%;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}
.logo {
    position: relative;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    padding-right: 30px;
    top: 15px;
}
.logo-big {
    display: block;
    width: max-content;
    margin-left: 50px;
    padding: 0;
}
.logo:hover {
    filter: brightness(120%);
}
.server-online {
    position: relative;
    padding-left: 0px;
}
.server-online .wrapper {
    display: flex;
    height: 100%;
    width: 100%;
    align-items: center;
    justify-content: space-between;
}
.total-online {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 400;
    color: #b0aea3;
}
.server-online .online {
    display: flex;
    gap: 10px;
    align-items: center;
}
.online-bar {
    width: 120px;
    height: 3px;
    background-color: #403e42;
}
.online-bar span {
    width: 100%;
    display: block;
    height: 3px;
    background: linear-gradient(90deg, rgb(153 177 41) 0%, rgb(192 138 21) 100%);
}
.online-users {
    display: flex;
    align-items: center;
    font-size: 10px;
    font-weight: 400;
}
.top-content {
    position: relative;
    padding-bottom: 45px;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 40px;
}
.download-btn {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    text-transform: uppercase;
    color: #e1fa72;
    font-style: italic;
    font-weight: 700;
    padding-bottom: 10px;
    right: 50px;
    bottom: 0;
    width: 289px;
    height: 128px;
    background: url(../img/download-btn.png);
}
.nav {
    position: relative;
    z-index: 6;
    height: 100%;
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0 45px;
}
.nav .nav-item .nav-link {
    padding: 25px;
}
.nav .nav-item .nav-link:hover {
    color: #ff9b00;
}
.nav-item.has-dropdown {
    position: relative;
}
.nav-item.has-dropdown .nav-link {
    padding-right: 28px;
    position: relative;
}
.nav-item.has-dropdown:hover .nav-link {
    color: #ffb505;
}
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    min-width: 150px;
    background-color: rgb(20 20 20 / 0.9);
    border: 1px solid rgb(50 50 50 / 0.4);
    border-radius: 2px;
    box-shadow: 0 2px 6px rgb(0 0 0 / 0.2);
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    margin-top: -6px;
    padding: 3px 0;
}
.nav-item.has-dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
}
.dropdown-menu .dropdown-item {
    display: block;
    padding: 6px 12px;
    color: #aaa;
    font-size: 12px;
    text-decoration: none;
    text-align: center;
    transition: all 0.15s ease;
    position: relative;
    overflow: hidden;
}
.dropdown-menu .dropdown-item:hover {
    color: #ffb505;
    background-color: rgb(40 40 40 / 0.5);
}
.nav-item.has-dropdown .nav-link:after {
    display: none;
}
.nav-item.has-dropdown:before {
    content: "";
    position: absolute;
    height: 10px;
    bottom: -10px;
    left: 0;
    right: 0;
    z-index: 101;
}
.dropdown-menu .dropdown-item:not(:last-child) {
    border-bottom: 1px solid rgb(70 70 70 / 0.1);
}
.dropdown-menu .dropdown-item:hover:after {
    width: 70%;
}
.dropdown-menu .dropdown-item:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 1px;
    background: rgb(255 181 5 / 0.3);
    transition: all 0.15s ease;
    transform: translateX(-50%);
}
.header-content .dropdown-custom .img-container {
    width: 15px;
    height: 15px;
}
.dropdown-custom.lang {
    padding: 10px 0;
}
.header-content .right-content {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-right: 10px;
}
.header-content .right-content .header-buttons {
    display: flex;
    align-items: center;
    gap: 20px;
}
.header-content .left-content {
    display: flex;
    align-items: center;
    height: 100%;
}
.reg-btn {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: #ff9b00;
}
.reg-btn:hover {
    opacity: 0.5;
}
.login-btn {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url(../img/button.png);
    background-repeat: no-repeat;
    width: 86px;
    height: 28px;
    font-size: 12px;
    color: #fff;
    text-transform: uppercase;
}
.login-btn .axe {
    position: absolute;
    display: block;
    top: -5px;
    height: 36px;
    width: 15px;
    background-image: url(../img/axe.png);
    background-repeat: no-repeat;
    background-size: cover;
}
.login-btn .axe-left {
    left: -5px;
    transform: scaleX(-1);
}
.login-btn .axe-right {
    right: -5px;
}
.brightness:hover {
    filter: brightness(120%);
}
.main {
    position: relative;
    z-index: 2;
    overflow: hidden;
}
.slider-login {
    margin: 0 20px;
    display: flex;
    justify-content: space-between;
}
.slider-block {
    width: 610px;
    background: url(../img/bg-h-content.jpg) no-repeat;
    background-size: cover;
    background-position: center bottom;
    box-shadow: 0 10px 20px -5px #000;
    padding-bottom: 25px;
    position: relative;
}
.slider-block::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border: 3px solid rgb(255 255 255 / 0.3);
    border-top: 3px solid #fff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    z-index: 1;
    display: block;
}
.slider-block.slider-ready::before {
    display: none;
}
@keyframes spin {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}
.main-slider {
    padding: 5px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out;
}
.main-slider.slick-initialized {
    opacity: 1;
    visibility: visible;
}
.main-slider.fallback-show {
    opacity: 1;
    visibility: visible;
}
.main-slider:not(.slick-initialized):not(.fallback-show) > .img-container {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
}
.main-slider:not(.slick-initialized):not(.fallback-show) > .img-container:first-child {
    position: relative;
    opacity: 1;
    visibility: visible;
}
.main-slider.fallback-show > .img-container {
    position: relative !important;
    opacity: 1 !important;
    visibility: visible !important;
}
.main-slider.slick-initialized > .img-container,
.main-slider.slick-initialized .slick-slide .img-container {
    position: relative !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}
.login-block,
.server-info-block {
    width: 100%;
    background: url(../img/bg-h-content.jpg) no-repeat;
    background-size: cover;
    background-position: center bottom;
    box-shadow: 0 10px 20px -5px #000;
}
.block-shadow {
    position: absolute;
    top: 0;
    left: 50%;
    opacity: 0.25;
    transform: translateX(-50%);
    display: block;
    height: 40px;
    width: 320px;
    background: url(../img/block-title-shadow.png) no-repeat;
    background-size: contain;
    background-position: center;
}
.block-frame {
    position: absolute;
    top: -3px;
    display: block;
    height: 48px;
    width: 55px;
    background: url(../img/block-title-frame.png) no-repeat;
    background-size: contain;
    background-position: center;
}
.block-frame.left {
    left: 0;
}
.block-frame.right {
    right: 0;
    transform: scaleX(-1);
}
.registration-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    padding: 10px;
}
.login_form.registration-form {
    padding: 25px;
}
.registration-form .button {
    padding: 16px;
}
.form-group {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.form-group .icon-container {
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 25px;
    height: 25px;
    z-index: 5;
}
.form-group select.form-input {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 30px;
    position: relative;
    background-image: none;
}
.form-group select.form-input {
    background-image: linear-gradient(45deg, transparent 50%, #7c7671 50%), linear-gradient(135deg, #7c7671 50%, transparent 50%);
    background-position: calc(100% - 18px) center, calc(100% - 13px) center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}
.icon-container.user {
    background-image: url(../img/icon-user.png);
}
.icon-container.password {
    background-image: url(../img/icon-password.png);
}
.icon-container.email {
    background-image: url(../img/icon-email.png);
}
.icon-container.credits {
    background-image: url(../img/icon-credits.png);
}
.icon-container.wcoin {
    background-image: url(../img/icon-wcoin.png);
}
.icon-container.subject {
    background-image: url(../img/icon-subject.png);
}
.icon-container.department {
    background-image: url(../img/icon-department.png);
}
.icon-container.priority {
    background-image: url(../img/icon-priority.png);
}
.icon-container.attachment {
    background-image: url(../img/icon-attachment.png);
}
.icon-container.icon-character-status {
    background-image: url(../img/icon-character-status.png);
}
.icon-container.zen-amount {
    background-image: url(../img/icon-zen-amount.png);
}
.icon-container.icon-location {
    background-image: url(../img/icon-location.png);
}
.icon-container.icon-period {
    background-image: url(../img/icon-period.png);
}
.icon-container.account {
    background-image: url(../img/icon-account.png);
}
.icon-container.icon-strength {
    background-image: url(../img/icon-strength.png);
}
.icon-container.icon-agility {
    background-image: url(../img/icon-agility.png);
}
.icon-container.icon-vitality {
    background-image: url(../img/icon-vitality.png);
}
.icon-container.icon-energy {
    background-image: url(../img/icon-energy.png);
}
.icon-container.icon-online-status {
    background-image: url(../img/icon-online-status.png);
}
.form-input {
    position: relative;
    border: 1px solid #fff0;
    background-color: #00000080;
    height: 35px;
    display: flex;
    width: 100%;
    align-items: center;
    color: #898888;
    transition: all 0.3s;
    padding-left: 40px;
    font-size: 13px;
    outline: none;
}
.form-input:focus:not([disabled]) {
    border: 1px solid #070707;
    background-color: #070707;
}
.form-input:hover:not([disabled]) {
    background-color: #0a0a0a;
    border: 1px solid #0a0a0a;
}
input::placeholder {
    color: #353535;
}
.forgot-link {
    font-size: 13px;
}
.forgot-link:hover {
    opacity: 0.5;
}
.registration-form .button {
    position: relative;
    width: 110px;
    height: 35px;
}
.registration-form .button .axe {
    position: absolute;
    display: block;
    top: -5px;
    height: 36px;
    width: 15px;
    background-image: url(../img/axe.png);
    background-repeat: no-repeat;
    background-size: cover;
}
.registration-form .button .axe-left {
    left: -5px;
    transform: scaleX(-1);
}
.registration-form .button .axe-right {
    right: -5px;
}
.registration-form .button span {
    color: #facf96e3;
    -webkit-background-clip: text;
    background-clip: text;
    text-shadow: 1px 1px 1px rgb(255 165 0 / 60%), -1px -1px 1px rgb(0 0 0 / 60%);
    font-weight: 700;
    letter-spacing: 1px;
}
.recaptcha-container {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 15px 0;
}
.main-content-middle {
    display: flex;
    justify-content: space-between;
    margin: 0 20px;
    padding: 5px 0 15px 0;
    gap: 10px;
}
.main-content-middle .left-content {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 610px;
}
.main-content-middle .right-content {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 320px;
}
.server-info-block {
    background-image: url(../img/bg-server-info.jpg);
    background-size: contain;
}
.server-info-content {
    padding: 20px 45px;
    display: flex;
    flex-direction: column;
}
.server-info-content .wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    line-height: 25px;
}
.server-info-content .wrapper .text {
    color: #ffb505;
}
.castle-block {
    position: relative;
    background-color: rgb(21 21 21 / 0.4);
    border-radius: 5px;
    overflow: hidden;
    padding: 0;
    box-shadow: 0 0 10px rgb(0 0 0 / 0.5);
}
.castle-block:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(https://i.imgur.com/m7T6oTa.png);
    background-size: cover;
    background-position: center center;
    opacity: 0.85;
    z-index: 0;
    filter: brightness(0.9);
}
.castle-block .wrapper-content {
    position: relative;
    z-index: 1;
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.castle-title {
    text-align: center;
    font-size: 18px;
    text-transform: uppercase;
    color: #ffb505;
    margin-bottom: 10px;
    width: 100%;
}
.castle-owner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 10px;
    width: 100%;
    text-align: center;
}
.castle-siege-img {
    width: 45px;
    height: 45px;
}
.castle-siege-img img {
    width: 45px;
    height: 45px;
    border-radius: 3px;
    object-fit: cover;
}
.flex-wrapper {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
}
.wrapper .name {
    color: #ffb505;
    font-size: 11px;
    margin-bottom: 0px;
    text-align: center;
}
.wrapper .text {
    font-size: 12px;
    color: #d9d8d4;
    text-align: center;
}
.castle-info {
    text-align: center;
    background-color: rgb(0 0 0 / 25%);
    padding: 4px 40px;
    font-size: 12px;
    border-radius: 4px;
    max-width: 90%;
    margin: 0 auto 8px;
}
.castle-more-link {
    text-align: center;
    padding-top: 5px;
    opacity: 0.7;
    transition: all 0.25s ease;
    position: relative;
    z-index: 2;
    width: 100%;
}
.castle-more-link:hover {
    opacity: 1;
}
.cs-link {
    display: inline-flex;
    align-items: center;
    color: #d7d4c9;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 3px;
    background-color: rgb(0 0 0 / 0.3);
    text-decoration: none;
    transition: all 0.25s ease;
    cursor: pointer;
}
.cs-link:hover {
    color: #ffb505;
    background-color: rgb(0 0 0 / 0.5);
    transform: translateY(-2px);
}
.cs-link i {
    margin-left: 5px;
    transition: transform 0.2s ease;
}
.cs-link:hover i {
    transform: translateX(3px);
}
.top-player {
    background: url(../img/bg-h-content.jpg) no-repeat;
    background-size: cover;
    background-position: center bottom;
    box-shadow: 0 10px 20px -5px #000;
    color: #b0aea3;
}
.rating-table {
    margin-top: 12px;
    display: flex;
    width: 100%;
    min-width: 320px;
    flex-direction: column;
}
.rating-table .row-wrapper {
    position: relative;
    padding: 10px 0;
}
.rating-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    padding: 0 20px;
    text-align: center;
    gap: 20px;
    transition: all 0.3s;
    line-height: 30px;
}
.rating-row:not(.rating-heading-row):hover {
    background-color: #121212;
    transform: translateX(5px);
}
.rating-heading-row {
    padding: 10px 25px;
    background-color: #00000040;
    color: #7c7671;
    line-height: 1;
}
.rating-heading-row span {
    font-size: 13px;
    color: #7c7671;
}
.rating-number {
    width: 10%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.rating-name {
    min-width: 70px;
    width: 30%;
    overflow: hidden;
    text-align: start;
    color: #ffb505;
}
.rating-name a {
    color: #ffb505;
}

.rating-level {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25%;
}
.rating-country {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25%;
}
.events {
    background: url(../img/bg-h-content.jpg) no-repeat;
    background-size: cover;
    background-position: center bottom;
    box-shadow: 0 10px 20px -5px #000;
}
.events-table {
    display: flex;
    flex-direction: column;
    padding: 15px 20px 10px 20px;
}
.events-table li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.event-name {
    font-size: 13px;
}
.event-name span {
    color: #ffb505;
    font-size: 11px;
}
.event-name a {
    display: block;
    margin-bottom: 2px;
    color: #b0aea3;
}
.event-name a:hover {
    opacity: 0.5;
}
.event-time {
    text-align: right;
    color: #b0aea3;
    font-size: 13px;
}
.event-time p {
    margin-bottom: 2px;
}
.event-time span {
    color: #ffb505;
    font-size: 11px;
}
.events-table li.view-more-container {
    justify-content: center;
    margin: 5px 0 0 0;
    padding: 8px 0 5px;
    border-top: 1px solid rgb(255 255 255 / 0.08);
}
.view-more-link {
    color: #b0aea3;
    font-size: 11px;
    text-decoration: none;
    cursor: pointer;
    display: inline-block;
    padding: 4px 10px;
    border-radius: 3px;
    background: rgb(0 0 0 / 0.15);
    transition: all 0.2s;
}
.view-more-link:hover {
    color: #ffb505;
    background: rgb(0 0 0 / 0.25);
}
.view-more-link[data-state="expanded"] {
    color: #ffb505;
}
.articles {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin: 0px 10px;
}
.article-block {
    display: flex;
    flex-direction: column;
    background: url(../img/bg-h-content.jpg) no-repeat;
    background-size: cover;
    background-position: center bottom;
    box-shadow: 0 10px 20px -5px #000;
}
.article-title-container {
    position: relative;
    background: url(../img/block-title.png) repeat-x center bottom;
    background-size: cover;
    height: 40px;
    color: #fff;
    overflow: hidden;
    display: flex;
    align-items: center;
}
.article-title-container::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #ffcc7e;
    opacity: 0.5;
    mix-blend-mode: multiply;
    z-index: 1;
}
.article-title {
    position: relative;
    z-index: 2;
    font-size: 14px;
    font-weight: 500;
    font-family: "Segoe UI", sans-serif;
    color: #907c68;
    text-transform: uppercase;
    padding: 0 10px;
    text-shadow: 2px 2px 1px rgb(0 0 0 / 0.6);
}
.article-content {
    padding: 25px;
    padding-bottom: 15px;
}
.article-bottom {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    gap: 10px;
}
.article-text {
    display: flex;
    flex-direction: column;
    max-width: 460px;
    font-size: 12px;
    color: #b0aea3;
}
.article-des {
    line-height: 30px;
}
.article-bottom .more-button {
    width: 63px;
    height: 20px;
    text-transform: none;
    margin-top: 5px;
    margin-right: 10px;
}
.article-main-content {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.article-content-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
}
.article-button-container {
    text-align: right;
}
.article-date-row {
    width: 100%;
    text-align: right;
    margin-top: 3px;
}
.article-date {
    font-size: 10px;
    color: #575759;
}
.pagination {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 35px;
    margin-top: 10px;
    margin-bottom: 20px;
}
.pagination .page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.pagination-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: #1c1b1b;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    color: #7c7671;
    font-size: 12px;
}
.pagination .pagination-btn:hover:not([disabled]),
.page-number.active {
    color: #b7b6b6;
    box-shadow: 0 10px 10px 0 #fff0;
}
.pagination .pagination-btn:hover:not([disabled]) .arrow {
    opacity: 1;
}
.icon-container.arrow {
    display: flex;
    width: 7px;
    height: 12px;
    background-image: url(../img/arrow.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.25;
}
.arrow.left-arrow {
    transform: scaleX(-1);
}
.footer {
    padding: 10px 0;
    position: relative;
    z-index: 2;
    margin-top: 5px;
    background: #fff0;
}
.footer-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    padding: 0 5px;
}
.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.footer-links {
    display: flex;
    align-items: center;
    gap: 15px;
}
.footer-link {
    color: #ffb505;
    text-decoration: none;
    font-size: 12px;
    position: relative;
    transition: color 0.3s ease;
    padding-bottom: 2px;
}
.footer-link::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background-color: #ffb505;
    transition: width 0.3s ease;
}
.footer-link:hover {
    color: #ffcc42;
}
.footer-link:hover::after {
    width: 100%;
}
.footer-link-separator {
    display: inline-block;
    height: 10px;
    width: 1px;
    background: linear-gradient(to bottom, transparent, rgb(255 181 5 / 0.3), transparent);
    margin: 0 5px;
}
.social-links {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-right: 5px;
}
.social-link {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    background: #fff0;
    border: none;
}
.social-link i {
    color: #7c7671;
    font-size: 14px;
    opacity: 0.7;
    transition: all 0.3s ease;
}
.social-link:hover {
    transform: translateY(-2px);
}
.social-link:hover i {
    color: #ffb505;
    opacity: 1;
}
.footer-divider {
    height: 1px;
    width: 100%;
    background: linear-gradient(to right, transparent, #aeaeae26, #aeaeae26, #aeaeae26, transparent);
    margin: 5px 0;
}
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: 20px;
}
.footer-left {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 430px;
}
.footer-text {
    color: #7c7671;
    font-size: 11px;
    line-height: 16px;
}
.quote {
    font-style: italic;
    font-size: 10px;
    color: #5d5954;
    margin-top: 4px;
    padding-top: 4px;
}
.footer-time {
    display: flex;
    gap: 30px;
    justify-content: flex-end;
}
.time {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}
.time div:first-child {
    color: #7c7671;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.timer {
    font-family: "Consolas", monospace;
    font-size: 22px;
    font-weight: 400;
    color: #ffb505;
    padding: 3px 0;
}
.time-des {
    color: #7c7671;
    font-size: 10px;
}
.hamburger-menu {
    position: relative;
    z-index: 15;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    cursor: pointer;
    display: block;
    width: 75px;
    height: 100%;
    background-image: url(../img/menu.png);
    background-repeat: no-repeat;
    background-position: center;
}
.hamburger-menu-close {
    cursor: pointer;
    display: block;
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    padding: 15px 30px;
}
.hamburger-menu-content {
    position: fixed;
    z-index: 50;
    height: 100vh;
    max-height: 100vh;
    width: 100%;
    max-width: 620px;
    overflow-y: auto;
    background-color: #000;
    transform: translateX(-100%);
    transition: all 0.3s;
}
.hamburger-menu-content.active {
    transform: translateX(0);
}
.hamburger-menu-content .nav {
    height: max-content;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
}
.hamburger-menu-content .nav-item {
    display: flex;
    width: 100%;
}
.hamburger-menu-content .nav .nav-item .nav-link {
    position: relative;
    font-size: 24px;
    height: 100%;
    width: 100%;
    justify-content: flex-start;
    padding: 10px 30px;
}
.hamburger-menu-content .nav-link:hover {
    color: #ffba36;
}
.hamburger-menu-content .dropdown-custom.lang {
    margin-left: 30px;
    height: max-content;
}
.hamburger-menu-content .dropdown-custom .img-container {
    width: 20px;
    height: 20px;
}
.hamburger-menu-content .lang-name {
    font-size: 20px;
}
.download-block {
    display: flex;
    flex-direction: column;
    background: url(../img/bg-h-content.jpg) no-repeat;
    background-size: cover;
    background-position: center bottom;
    box-shadow: 0 10px 20px -5px #000;
}
.download-title {
    position: relative;
    height: 40px;
    width: 100%;
    background: url(../img/block-title.png) no-repeat;
    background-size: cover;
    background-position: center bottom;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 10px;
    font-size: 14px;
    text-transform: uppercase;
    color: #898888;
}
.download-title::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #ffe7c2;
    opacity: 0.6;
    mix-blend-mode: multiply;
    z-index: 1;
}
.squares-wrapper {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin: 10px 0;
    padding: 0 5px;
}
.download-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
    padding: 15px;
}
.download-content .square {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 128px;
    min-width: 118px;
    height: 114px;
    background-color: rgb(17 18 18 / 0.8);
    border-radius: 3px;
    transition: all 0.2s ease;
    border: 1px solid #1e1e1e;
}
.download-content .square .img-container {
    transform: translateY(-10px);
    padding: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.download-content .square .img-container img {
    width: 75px;
    height: auto;
}
.download-content .square.shadow-7 .img-container,
.download-content .square.shadow-8 .img-container,
.download-content .square.shadow-9 .img-container {
    transform: translateY(0);
}
.download-content .square .square-shadow {
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    width: 128px;
    height: 79px;
    background: url(../img/bg-shadow-1.png) center/cover no-repeat;
}
.download-content .square span {
    position: absolute;
    z-index: 2;
    bottom: 10px;
    font-size: 12px;
    text-shadow: 0 1px 1px rgb(0 0 0 / 0.5);
}
.download-content .square.shadow-1 .square-shadow {
    background-image: url(../img/bg-shadow-1.png);
}
.download-content .square.shadow-1 span {
    color: #4d9df7;
}
.download-content .square.shadow-1:hover {
    box-shadow: 0 0 20px 0 #0077ff80;
    transform: translateY(-3px);
}
.download-content .square.shadow-2 .square-shadow {
    background-image: url(../img/bg-shadow-2.png);
}
.download-content .square.shadow-2 span {
    color: #f4555c;
}
.download-content .square.shadow-2:hover {
    box-shadow: 0 0 20px 0 #f4555c80;
    transform: translateY(-3px);
}
.download-content .square.shadow-3 .square-shadow {
    background-image: url(../img/bg-shadow-3.png);
}
.download-content .square.shadow-3 span {
    color: #60eca5;
}
.download-content .square.shadow-3:hover {
    box-shadow: 0 0 20px 0 #60eca580;
    transform: translateY(-3px);
}
.download-content .square.shadow-4 .square-shadow {
    background-image: url(../img/bg-shadow-4.png);
}
.download-content .square.shadow-4 span {
    color: #2c85b0;
}
.download-content .square.shadow-4:hover {
    box-shadow: 0 0 20px 0 #2c85b080;
    transform: translateY(-3px);
}
.download-content .square.shadow-5 .square-shadow {
    background-image: url(../img/bg-shadow-5.png);
}
.download-content .square.shadow-5 span {
    color: #67217a;
}
.download-content .square.shadow-5:hover {
    box-shadow: 0 0 20px 0 #67217a80;
    transform: translateY(-3px);
}
.download-content .square.shadow-6 .square-shadow {
    background-image: url(../img/bg-shadow-6.png);
}
.download-content .square.shadow-6 span {
    color: #476010;
}
.download-content .square.shadow-6:hover {
    box-shadow: 0 0 20px 0 #47601080;
    transform: translateY(-3px);
}
.download-content .square.shadow-7 .square-shadow {
    background-image: url(../img/bg-shadow-7.png);
}
.download-content .square.shadow-7 span {
    color: #787c6f;
}
.download-content .square.shadow-7:hover {
    box-shadow: 0 0 20px 0 #787c6f80;
    transform: translateY(-3px);
}
.download-content .square.shadow-8 .square-shadow {
    background-image: url(../img/bg-shadow-8.png);
}
.download-content .square.shadow-8 span {
    color: #115ea2;
}
.download-content .square.shadow-8:hover {
    box-shadow: 0 0 20px 0 #115ea280;
    transform: translateY(-3px);
}
.download-content .square.shadow-9 .square-shadow {
    background-image: url(../img/bg-shadow-9.png);
}
.download-content .square.shadow-9 span {
    color: #009a66;
}
.download-content .square.shadow-9:hover {
    box-shadow: 0 0 20px 0 #009a6680;
    transform: translateY(-3px);
}
.download-grey-text {
    color: #575759;
    font-size: 11px;
    text-align: center;
    background-color: rgb(0 0 0 / 0.2);
    padding: 6px 20px 6px 20px;
    border-radius: 3px;
    margin: 3px auto;
    max-width: 90%;
}
.download-text {
    font-size: 12px;
    text-align: center;
    line-height: 1.4;
    color: #b0aea3;
    margin: 0 auto 5px;
}
.separator {
    height: 1px;
    background: linear-gradient(to right, transparent, rgb(255 155 0 / 50%), transparent);
    margin: 15px 0;
    width: 100%;
}
.page-content {
    display: grid;
    row-gap: 10px;
    align-items: center;
    margin: 20px auto;
    max-width: 560px;
    grid-template-columns: 170px 1fr;
}
.page-title-glow {
    color: #ff9b00;
    font-size: 13px;
    font-weight: 600;
    text-shadow: 0 0 10px rgb(255 181 5 / 0.3);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.page-content.columns-wide {
    grid-template-columns: 210px 2fr;
}
.page-content.columns-medium {
    grid-template-columns: 170px 1fr;
}
.page-content.columns-narrow {
    grid-template-columns: 120px 1fr;
}
.page-content .content-title {
    text-align: left;
    color: #b0aea3;
    margin: 0;
    font-size: 13px;
}
.page-content .bottom-form {
    grid-column: span 2;
    display: flex;
    justify-content: center;
    margin-top: 20px;
}
.page-content .form-input-wrapper {
    display: flex;
    align-items: center;
    width: 100%;
}
.page-content .button {
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url(../img/button.png);
    background-repeat: no-repeat;
    background-size: cover;
    font-size: 13px;
    text-transform: uppercase;
    box-shadow: 0 5px 18px 0 #ff7f0059;
    color: #fff;
    font-family: "Lunasima";
    width: 110px;
    height: 35px;
    padding: 16px;
    position: relative;
}
.page-content .button .axe {
    position: absolute;
    display: block;
    top: -5px;
    height: 36px;
    width: 15px;
    background-image: url(../img/axe.png);
    background-repeat: no-repeat;
    background-size: cover;
}
.page-content .button .axe-left {
    left: -5px;
    transform: scaleX(-1);
}
.page-content .button .axe-right {
    right: -5px;
}
.page-content .button span {
    color: #facf96e3;
    -webkit-background-clip: text;
    background-clip: text;
    text-shadow: 1px 1px 1px rgb(255 165 0 / 60%), -1px -1px 1px rgb(0 0 0 / 60%);
    font-weight: 700;
    letter-spacing: 1px;
}
.i_note,
.s_note,
.w_note,
.e_note {
    border: 1px solid;
    margin: 10px 0;
    padding: 12px 10px 12px 40px;
    background-repeat: no-repeat;
    -moz-border-radius: 0.5em;
    -webkit-border-radius: 0.5em;
    border-radius: 0.5em;
    text-align: left;
    font-size: 12px;
    width: 100%;
}
.i_note {
    color: #004085;
    background-color: #cce5ff;
    background-image: url(../img/info.png);
    background-position: 10px center;
}
.s_note {
    color: #155724;
    background-color: #d4edda;
    background-image: url(../img/success.png);
    background-position: 10px center;
}
.w_note {
    color: #9f6000;
    background-color: #feefb3;
    background-image: url(../img/warning.png);
    background-position: 10px center;
}
.e_note {
    color: #721c24;
    background-color: #f8d7da;
    background-image: url(../img/error.png);
    background-position: 10px center;
}
.e_note a {
    color: #721c24;
    text-decoration: underline;
}
.info-card {
    width: 100%;
    font-size: 12px;
    background-color: rgb(18 18 18 / 0.8);
    background-image: linear-gradient(rgb(30 30 30 / 0.05) 1px, transparent 1px), linear-gradient(90deg, rgb(30 30 30 / 0.05) 1px, transparent 1px);
    background-size: 20px 20px;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgb(0 0 0 / 0.25);
    border: 1px solid rgb(60 60 60 / 30%);
    overflow: hidden;
    padding: 15px;
}
.section-header {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #ffb50580;
    color: #d0d0d0;
    font-size: 13px;
    font-weight: 600;
}
.warning-header {
    color: #ffb505;
    border-bottom-color: #ffb50580;
}
.info-header {
    color: #5aabff;
    border-bottom-color: #5aabff7d;
}
.neutral-header {
    color: #a0a0a0;
    border-bottom-color: #a0a0a080;
}
.success-header {
    color: #50c050;
    border-bottom-color: #50c05080;
}
.icon {
    width: 15px;
    height: 15px;
    margin-right: 10px;
    background-color: currentColor;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
}
.info-header .icon {
    mask-image: url(../img/icons/exclamation-circle.svg);
    -webkit-mask-image: url(../img/icons/exclamation-circle.svg);
}
.warning-header .icon {
    mask-image: url(../img/icons/exclamation-triangle.svg);
    -webkit-mask-image: url(../img/icons/exclamation-triangle.svg);
}
.success-header .icon {
    mask-image: url(../img/icons/exclamation-circle.svg);
    -webkit-mask-image: url(../img/icons/exclamation-circle.svg);
}
.neutral-header .icon {
    mask-image: url(../img/icons/exclamation-circle.svg);
    -webkit-mask-image: url(../img/icons/exclamation-circle.svg);
}
ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
li {
    align-items: flex-start;
    color: #b0aea3;
    line-height: 1.3;
}
.bullet {
    color: gray;
    margin-right: 10px;
    font-size: 15px;
}
.text-content {
    color: #b0b0b0;
    line-height: 1.5;
    font-size: 14px;
}
.registration-block {
    display: flex;
    flex-direction: column;
    background: url(../img/bg-h-content.jpg) no-repeat;
    background-size: cover;
    background-position: center bottom;
    box-shadow: 0 10px 20px -5px #000;
}
.registration-title {
    position: relative;
    height: 40px;
    width: 100%;
    background: url(../img/block-title.png) no-repeat;
    background-size: cover;
    background-position: center bottom;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 10px;
    font-size: 14px;
    text-transform: uppercase;
    color: #898888;
}
.registration-title::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #ffe7c2;
    opacity: 0.6;
    mix-blend-mode: multiply;
    z-index: 1;
}
.registration-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    width: 100%;
}
.registration-content .table-data a {
    color: #ffb505 !important;
}
.registration-content .table-data a:hover {
    color: #ffc740 !important;
}
.registration-block .registration-form {
    align-items: center;
}
.registration-block .registration-form .form-group {
    max-width: 300px;
    width: 100%;
}
.registration-block .registration-form .button {
    width: 130px;
    height: 35px;
    margin-top: 15px;
}
.registration-block .confirm-text {
    font-size: 13px;
}
.registration-block .form-link {
    color: #ff9b00;
}
.registration-block .form-link:hover {
    opacity: 0.5;
}
.registration-banners {
    display: flex;
    flex-direction: column;
}
.form-field-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
    width: 100%;
    max-width: 300px;
}
.field-label {
    color: #b0aea3ad;
    font-size: 13px;
    margin-bottom: 7px;
    text-align: left;
}
.field-note {
    color: #ff2700cf;
    font-size: 9px;
    margin-top: 5px;
    text-align: right;
}
.banner {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 10px;
    font-size: 12px;
}
.banner-1 {
    background: #2e3825;
    border: 1px solid #7a8540;
    border-radius: 6px;
    color: #d6d1b1;
    box-shadow: 0 0 8px rgb(0 0 0 / 0.3);
    margin: 5px;
}
.banner-2 {
    background: #252f3e;
    border: 1px solid #60718c;
    border-radius: 6px;
    color: #d6d1b1;
    box-shadow: 0 0 8px rgb(0 0 0 / 0.3);
    margin: 5px;
}
.banner-3 {
    background: rgb(255 159 34 / 0.2);
    border: 1px solid #ff9f00;
    border-radius: 6px;
    color: #fff5d0;
    box-shadow: 0 0 8px rgb(0 0 0 / 0.3);
    margin: 5px;
}
.banner span {
    margin-left: 3px;
}
.banner-1 span {
    color: #d5ff17;
}
.banner-2 span {
    color: #68bbeb;
}
.banner-3 span {
    color: #e9c996;
}
.rankings-block {
    position: relative;
    display: flex;
    flex-direction: column;
    background: url(../img/bg-h-without-line.jpg) no-repeat;
    background-size: cover;
    background-position: center bottom;
    box-shadow: 0 10px 20px -5px #000;
}
.bottom-line {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 1px;
    width: 100%;
    background: radial-gradient(circle, rgb(81 48 4 / 0.6026785714285714) 0%, #fff0 100%);
}
.rankings-title {
    position: relative;
    height: 40px;
    width: 100%;
    background: url(../img/block-title.png) no-repeat;
    background-size: cover;
    background-position: center bottom;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 10px;
    font-size: 14px;
    text-transform: uppercase;
    color: #898888;
}
.rankings-title::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #ffe7c2;
    opacity: 0.6;
    mix-blend-mode: multiply;
    z-index: 1;
}
.rankings-class-image {
    border: 1px solid rgb(255 155 0 / 0.3);
    transition: all 0.2s ease;
    border-radius: 50%;
}
.table-data tr:hover .rankings-class-image {
    border-color: rgb(255 155 0 / 0.8);
    transform: scale(1.05);
}
.rankings-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
}
.rankings-btns,
.sub-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px 8px;
    align-items: center;
}
.rank-btn {
    padding: 10px 33px;
    text-transform: none;
}
.search-block {
    align-self: flex-start;
    display: flex;
    width: 100%;
    align-items: center;
    margin-top: 20px;
}
.search-title {
    font-size: 13px;
    color: #ff9b00;
    width: 25%;
    white-space: nowrap;
    margin-right: 8px;
}
.search-query {
    display: flex;
    align-items: center;
    width: 80%;
    gap: 10px;
}
.search-query .search-input {
    width: 40%;
    flex-grow: 1;
    height: 28px;
    background-color: #00000080;
    border: 1px solid #fff0;
    border-radius: 2px;
    color: #989690;
    padding: 0 10px;
    margin-left: 0;
}
.search-query .search-input:focus:not([disabled]) {
    background-color: #00000080;
    outline: 1px solid #fff0;
}
.search-query .search-input:hover:not([disabled]) {
    background-color: #00000080;
    border: 1px solid #080808;
}
.search-btn {
    padding: 5px 20px;
    text-transform: unset;
    white-space: nowrap;
    margin-left: auto;
}
.rank-btn.active,
.rank-btn:hover {
    box-shadow: 0 5px 18px 0 #ff7f0059;
}
.col-width-5 {
    width: 5%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.col-width-10 {
    width: 10%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.col-width-15 {
    width: 15%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.col-width-20 {
    width: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.col-width-25 {
    width: 25%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.col-width-30 {
    width: 30%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.col-width-40 {
    width: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.col-width-80 {
    width: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
}
#account-history-table .rankings-row {
    font-size: 10px;
}
#account-history-table .rankings-heading-row span {
    font-size: 12px;
}
.server-block {
    display: flex;
    flex-direction: column;
    background: url(../img/bg-h-content.jpg) no-repeat;
    background-size: cover;
    background-position: center bottom;
    box-shadow: 0 10px 20px -5px #000;
}
.server-title {
    position: relative;
    height: 40px;
    width: 100%;
    background: url(../img/block-title.png) no-repeat;
    background-size: cover;
    background-position: center bottom;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 10px;
    font-size: 14px;
    text-transform: uppercase;
    color: #898888;
}
.server-title::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #ffe7c2;
    opacity: 0.6;
    mix-blend-mode: multiply;
    z-index: 1;
}
.server-content {
    flex-direction: column;
    gap: 20px;
    justify-content: center;
    align-items: center;
    padding: 20px 15px;
}
.tab-content {
    display: none;
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
.tab-content.active {
    display: block;
}
.server-info-table {
    display: table;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 1px;
    padding: 0;
    border: 1px solid rgb(60 60 60 / 0.2);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgb(0 0 0 / 0.15);
}
.server-info-table .row-wrapper {
    display: table-row-group;
    width: 100%;
}
.server-row {
    display: table;
    width: 100%;
    table-layout: fixed;
    margin-bottom: 1px;
    font-size: 12px;
}
.server-row:not(:last-child) {
    border-bottom: 1px solid rgb(70 70 70 / 0.1);
}
.server-row .col-primary,
.server-row .col-content {
    display: table-cell;
    padding: 8px 10px;
    vertical-align: middle;
    box-sizing: border-box;
    white-space: nowrap;
    background-color: #352d1f26;
}
.server-row .col-primary {
    width: 40%;
    border-right: 1px solid #0c07014d;
}
.server-row .center {
    text-align: center;
}
.server-row .col-content {
    width: 60%;
}
.server-row .col-action,
.server-row .col-header {
    display: table-cell;
    padding: 8px 10px;
    vertical-align: middle;
    box-sizing: border-box;
    white-space: nowrap;
    width: 30%;
    background-color: #0000004d;
    text-align: center;
    color: inherit;
}
.server-row .col-action.bordered {
    border-right: 1px solid #0c07014d;
}
.server-row.header-row {
    background-color: rgb(20 20 20 / 0.95) !important;
}
.server-row.header-row .col-primary,
.server-row.header-row .col-action,
.server-row.header-row .col-header {
    background-color: rgb(20 20 20 / 0.95);
}
.server-row.main-header .col-header {
    width: 60%;
    text-align: center;
    border-left: none;
}
.server-row.sub-header {
    border-top: none;
    background-color: rgb(30 30 30 / 0.95) !important;
}
.server-row.sub-header .col-primary,
.server-row.sub-header .col-action {
    background-color: rgb(30 30 30 / 0.95);
}
.server-row:nth-child(even) .col-content,
.server-row:nth-child(even) .col-primary {
    background-color: #f0f0f00d;
}
.server-row:nth-child(n + 3):nth-child(odd) .col-action {
    background-color: #0000004d;
}
.server-row:nth-child(n + 3):nth-child(even) .col-action {
    background-color: rgb(25 25 25 / 0.9);
}
.server-row:hover .col-primary,
.server-row:hover .col-content,
.server-row:hover .col-action,
.server-row:hover {
    background-color: #0a0a0a !important;
    box-shadow: inset 0 0 0 1px rgb(255 155 0 / 0.05);
}
.server-row.header-row:hover .col-primary,
.server-row.header-row:hover .col-action,
.server-row.header-row:hover .col-header {
    background-color: rgb(20 20 20 / 0.95) !important;
}
.server-row.sub-header:hover .col-primary,
.server-row.sub-header:hover .col-action {
    background-color: rgb(30 30 30 / 0.95) !important;
}
.server-info-link {
    color: #ff9b00;
    font-size: 12px;
}
.server-info-link:hover {
    opacity: 0.5;
}
.highlight-link a {
    color: #ffb505;
}
.highlight-link a:hover {
    color: #ffb505;
    opacity: 0.8;
}
.sup-tag {
    font-size: 75%;
    position: relative;
    top: -1px;
    vertical-align: top;
    line-height: 0;
    color: #ffb505;
    font-weight: 700;
    letter-spacing: 0.8px;
}
.status-online {
    color: #01a908;
    font-weight: 700;
}
.sup-tag.hot-spot {
    color: #f20707;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    letter-spacing: 0;
}
.sup-tag.new-tag {
    color: #f7f6f2;
    letter-spacing: 0;
    background: #9e0101;
    padding: 1px 4px;
    border-radius: 10px;
    font-size: 8px;
}
.tab-content .server-info-title:first-child,
.tab-container > .server-info-title:first-child {
    margin-top: 0;
}
.check-success {
    color: #17cd28;
    font-weight: 400;
}
.check-error {
    color: #dc1c1c;
    font-weight: 400;
}
.info-icon-container {
    position: relative;
    display: inline-block;
}
.info-icon {
    cursor: help;
    font-size: 14px;
    color: #3498db;
}
.check-info {
    color: #3498db;
}
.info-icon-container:hover .tooltip-content {
    display: block;
}
.vip-star {
    color: #fbb91b;
    position: relative;
    text-shadow: 0 0 3px rgb(255 215 0 / 0.4);
    transition: transform 0.3s ease, text-shadow 0.3s ease;
}
.tooltip-content {
    display: none;
    position: absolute;
    background-color: #1f1f1f;
    color: #b6b4ab;
    border-radius: 4px;
    padding: 10px;
    z-index: 9999;
    font-size: 11px;
    top: -10px;
    right: 25px;
    left: auto;
    left: auto;
    box-shadow: 0 2px 5px rgb(0 0 0 / 0.3);
    width: auto !important;
    min-width: auto !important;
    max-width: none !important;
    transition: opacity 0.3s;
}
.info-icon-container:hover .tooltip-content {
    display: block;
    visibility: visible;
}
.tooltip-content:after {
    content: "";
    position: absolute;
    bottom: -10px;
    right: 5px;
    border-width: 5px;
    border-style: solid;
    border-color: rgb(0 0 0 / 0.85) #fff0 #fff0 #fff0;
}
.tooltip-line {
    display: flex !important;
    align-items: center !important;
    margin-bottom: 6px !important;
    white-space: nowrap !important;
    overflow: visible !important;
}
.tooltip-line .check-green,
.tooltip-line .x-red {
    margin-right: 5px;
    font-size: 14px;
}
.tooltip-line:last-child {
    margin-bottom: 0 !important;
}
.tooltip-line i {
    margin-top: 3px !important;
    margin-right: 5px !important;
    flex-shrink: 0 !important;
}
.table-data,
.tab-container,
.server-content {
    overflow: visible !important;
}
.tooltip-content:after,
.tooltip-content:before {
    display: none !important;
}
ul#vote-options {
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}
ul#vote-options li {
    display: flex;
    align-items: center;
    padding: 10px;
    border: 1px solid rgb(0 0 0 / 0.15);
    border-radius: 5px;
    background: rgb(0 0 0 / 35%);
}
ul#vote-options li img {
    width: 75px;
    height: 45px;
    margin-right: 15px;
}
ul#vote-options li .text-container {
    position: relative;
    display: flex;
    flex-direction: column;
    padding-left: 15px;
    min-width: 150px;
}
ul#vote-options li .text-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background-color: #b0aea3;
}
ul#vote-options li .text-container h5 {
    margin: 0;
    color: #b0aea3;
    font-size: 18px;
    font-weight: 700;
}
ul#vote-options li .text-container .reward-text {
    color: #b0aea3;
    font-size: 11px;
}
ul#vote-options li .text-container .reward {
    margin-top: 3px;
    color: #ffbb38;
    font-size: 11px;
}
ul#vote-options li .button-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-left: auto;
    gap: 10px;
}
ul#vote-options li .button-container button {
    padding: 5px 15px;
    font-size: 14px;
    white-space: nowrap;
}
ul#vote-options li .button-container .countdown-timer {
    order: -1;
    margin-top: 0;
    min-width: 50px;
}
ul#vote-options li .button-container button[disabled] {
    opacity: 0.7;
    color: #888 !important;
    background: rgb(50 50 50 / 0.7) !important;
    border: 1px solid rgb(128 128 128 / 0.3);
    filter: grayscale(40%);
    cursor: not-allowed;
    position: relative;
    text-decoration-color: rgb(255 255 255 / 0.3);
    text-decoration-thickness: 1px;
    box-shadow: none !important;
    transition: all 0.3s ease;
    text-shadow: none;
}
.currency-icon {
    width: 22px;
    height: 22px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 10px;
    flex-shrink: 0;
}
.wcoin-icon {
    background-image: url(../img/icon-wcoin.png);
}
.credits-icon {
    background-image: url(../img/icon-credits.png);
}
.currency-display-vertical {
    width: 200px;
    margin: 5px auto 5px auto;
    background: rgb(25 25 25 / 0.3);
    border-radius: 5px;
    padding: 5px 0;
    border: 1px solid rgb(255 255 255 / 0.08);
}
.currency-line {
    display: flex;
    align-items: center;
    padding: 5px 15px;
    margin: 0 auto;
    width: 90%;
}
.currency-label {
    font-size: 12px;
    color: #b5b5b5;
    margin-right: auto;
}
.currency-value {
    font-size: 12px;
    font-weight: 500;
    color: #ffb505;
}
.currency-line:hover {
    background: rgb(255 255 255 / 0.08);
    transform: scale(1.02);
    transition: all 0.2s ease;
}
.panel-block {
    background: url(../img/bg-h-content.jpg) no-repeat;
    background-size: cover;
    background-position: center bottom;
    box-shadow: 0 10px 20px -5px #000;
    padding-bottom: 20px;
}
.panel-block .button {
    position: relative;
    width: 109px;
    height: 35px;
    text-transform: none;
    left: 50%;
    transform: translateX(-50%);
    text-transform: uppercase;
}
.panel-block .button .axe {
    position: absolute;
    display: block;
    top: -5px;
    height: 36px;
    width: 15px;
    background-image: url(../img/axe.png);
    background-repeat: no-repeat;
    background-size: cover;
}
.panel-block .button .axe-left {
    left: -5px;
    transform: scaleX(-1);
}
.panel-block .button .axe-right {
    right: -5px;
}
.panel-options {
    margin-top: 10px;
    position: relative;
    z-index: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.panel-option {
    position: relative;
    display: flex;
    align-items: center;
    height: 30px;
    text-align: center;
    padding: 5px 20px;
    text-transform: uppercase;
    font-size: 13px;
    background-color: #232323;
    border: 1px solid #333;
    transition: color 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
    color: #b0aea3;
    width: 200px;
    margin: 0 auto;
    border-radius: 5px;
    overflow: hidden;
    white-space: nowrap;
}
.panel-option::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
    width: 316px;
    height: 74px;
    transition: all 0.3s ease-in-out;
    opacity: 0;
    background: url(../img/panel-hover.png) center/contain no-repeat;
    z-index: -1;
}
.panel-option::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, transparent, rgb(255 181 5 / 0.1), transparent);
    transition: left 0.7s ease;
    z-index: 1;
}
.panel-option:hover::before {
    opacity: 0.8;
}
.panel-option:hover::after {
    left: 100%;
}
.panel-option:hover {
    color: #ffb505;
    border-color: #ffb505;
    border-left: 2px solid #ffb505;
    text-shadow: 0 0 5px rgb(255 181 5 / 0.3);
    background: linear-gradient(to right, rgb(25 22 18 / 0.4), rgb(25 22 18 / 0.1) 85%, transparent);
}
.my-account-block {
    display: flex;
    flex-direction: column;
    background: url(../img/bg-h-content.jpg) no-repeat;
    background-size: cover;
    background-position: center bottom;
    box-shadow: 0 10px 20px -5px #000;
    margin-bottom: 5px;
    border-radius: 3px;
    overflow: hidden;
}
.block-title {
    position: relative;
    height: 40px;
    width: 100%;
    background: url(../img/block-title.png) no-repeat;
    background-size: cover;
    background-position: center bottom;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #898888;
    padding-left: 15px;
}
.block-title::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #ffe7c2;
    opacity: 0.6;
    mix-blend-mode: multiply;
    z-index: 1;
}
.block-title-text {
    position: relative;
    z-index: 2;
    color: #ff9b00;
    font-weight: 700;
    text-transform: uppercase;
}
.mac-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 3px;
    padding: 5px;
}
.mac-cell {
    padding: 0;
    vertical-align: top;
    width: 50%;
}
.mac-row {
    position: relative;
    display: flex;
    align-items: center;
    background: rgb(20 20 20 / 0.4);
    border: 1px solid rgb(70 60 40 / 0.2);
    border-radius: 3px;
    padding: 6px 8px;
    margin-bottom: 4px;
    transition: all 0.2s ease;
    min-height: 30px;
}
.mac-row:hover {
    background: rgb(25 23 20 / 0.5);
    border-color: rgb(255 155 0 / 0.2);
}
.mac-icon-container {
    width: 16px;
    height: 16px;
    margin-right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    background: rgb(0 0 0 / 0.2);
    padding: 2px;
    background-size: 14px;
    background-repeat: no-repeat;
    background-position: center;
}
.mac-icon-user {
    background-image: url(../img/icons/user.png);
}
.mac-icon-email {
    background-image: url(../img/icons/email.png);
}
.mac-icon-password {
    background-image: url(../img/icons/padlock.png);
}
.mac-icon-date {
    background-image: url(../img/icons/date.png);
}
.mac-icon-vip {
    background-image: url(../img/icons/star.png);
}
.mac-icon-ip {
    background-image: url(../img/icons/ip.png);
}
.mac-icon-online-status {
    background-image: url(../img/icons/wi-fi.png);
}
.mac-label {
    font-size: 12px;
    color: #b0aea3;
    width: 100px;
    min-width: 100px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mac-value {
    font-size: 11px;
    color: #d7d6d1;
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.mac-value.offline,
.mac-value.online {
    color: #ff3030;
    font-weight: 500;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-left: 0;
    width: auto;
}
.mac-value.online {
    color: #6bff00;
}
.mac-value.offline::before,
.mac-value.online::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 3px;
}
.mac-value.online::before {
    background: #6bff00;
    box-shadow: 0 0 5px #6bff00;
}
.mac-value.offline::before {
    background: #ff3030;
    box-shadow: 0 0 5px #ff3030;
}
.mac-value.vip {
    color: #ffb505;
    font-weight: 500;
}
.mac-btn {
    font-size: 10px;
    padding: 2px 8px;
    background: linear-gradient(to bottom, rgb(255 155 0 / 0.2), rgb(100 70 30 / 0.4));
    color: #ffb505;
    border: 1px solid rgb(255 155 0 / 0.3);
    border-radius: 3px;
    text-decoration: none;
    margin-left: auto;
    font-weight: 500;
    text-transform: uppercase;
    transition: all 0.2s ease;
}
.mac-btn:hover {
    background: linear-gradient(to bottom, rgb(255 155 0 / 0.3), rgb(100 70 30 / 0.5));
    transform: translateY(-1px);
    box-shadow: 0 2px 3px rgb(0 0 0 / 0.2);
}
.character-block {
    display: flex;
    flex-direction: column;
    background: url(../img/bg-h-content.jpg) no-repeat;
    background-size: cover;
    background-position: center bottom;
    box-shadow: 0 10px 20px -5px #000;
    margin-bottom: 5px;
}
.characters {
    display: flex;
    flex-direction: column;
    padding: 8px 5px;
}
.character {
    position: relative;
    margin-bottom: 10px;
    border-radius: 4px;
    background: rgb(20 20 20 / 0.4);
    border: 1px solid rgb(70 60 40 / 0.3);
    transition: all 0.3s ease;
    padding: 12px;
    display: flex;
}
.character:hover {
    border-color: rgb(255 155 0 / 0.2);
    box-shadow: 0 4px 8px rgb(0 0 0 / 0.3);
    background: rgb(25 23 20 / 0.5);
}
.character-left {
    width: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 15px;
}
.char-name {
    text-align: center;
    padding: 0 2px;
    margin-bottom: 5px;
    font-weight: 600;
    font-size: 13px;
    color: #ff9b00;
    text-shadow: 0 1px 2px rgb(0 0 0 / 0.5);
}
.char-ava {
    width: 80px;
    height: 80px;
    margin-bottom: 2px;
}
.char-ava .img-container {
    background: radial-gradient(circle, rgb(80 60 30 / 0.2), rgb(20 20 20 / 0.8));
    border-radius: 5px;
    padding: 3px;
    border: 1px solid rgb(255 155 0 / 0.15);
}
.char-status {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 10px;
    margin-bottom: 6px;
    background: rgb(0 0 0 / 0.2);
}
.char-status .icon-container {
    width: 8px;
    height: 8px;
    display: inline-block;
    border-radius: 50%;
    margin-right: 4px;
}
.char-status .icon-container.online {
    background: #6bff00;
    box-shadow: 0 0 5px #6bff00;
}
.char-status .icon-container.offline {
    background: #ff3030;
    box-shadow: 0 0 5px #ff3030;
}
.char-level {
    width: 90px;
    background: rgb(0 0 0 / 0.25);
    border-radius: 3px;
    padding: 3px 0;
    margin-bottom: 5px;
    font-size: 11px;
    text-align: center;
}
.char-level span {
    color: #ffb505;
    font-weight: 600;
}
.character-right {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.char-stats {
    display: flex;
    flex-direction: column;
    background: rgb(0 0 0 / 0.2);
    border-radius: 4px;
    padding: 8px 12px;
    margin-bottom: 8px;
    height: fit-content;
}
.char-stat {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    position: relative;
}
.char-stat-name {
    width: 70px;
    font-size: 11px;
    font-weight: 500;
    display: flex;
    align-items: center;
}
.char-stat-name.strength {
    color: #86fb0a;
}
.char-stat-name.agility {
    color: #c147f5;
}
.char-stat-name.vitality {
    color: #ff2241;
}
.char-stat-name.energy {
    color: #fffc00;
}
.char-stat-name.command {
    color: #41a7ff;
}
.char-bar {
    flex: 1;
    height: 5px;
    background-color: rgb(30 30 30 / 0.6);
    border-radius: 3px;
    overflow: hidden;
    margin: 0 8px;
}
.char-bar span {
    display: block;
    height: 100%;
    border-radius: 3px;
}
.char-stat.strength .char-bar span,
.char-stat-name.strength + .char-bar span {
    background: linear-gradient(90deg, #4a8c00, #86fb0a);
}
.char-stat.agility .char-bar span,
.char-stat-name.agility + .char-bar span {
    background: linear-gradient(90deg, #8a11b9, #c147f5);
}
.char-stat.vitality .char-bar span,
.char-stat-name.vitality + .char-bar span {
    background: linear-gradient(90deg, #c20022, #ff2241);
}
.char-stat.energy .char-bar span,
.char-stat-name.energy + .char-bar span {
    background: linear-gradient(90deg, #b3b000, #fffc00);
}
.char-stat.command .char-bar span,
.char-stat-name.command + .char-bar span {
    background: linear-gradient(90deg, #006ec2, #41a7ff);
}
.char-number {
    width: 40px;
    text-align: right;
    font-size: 11px;
    color: #ffb505;
    font-weight: 500;
}
.char-map {
    background: rgb(0 0 0 / 0.2);
    border-radius: 3px;
    padding: 5px 8px;
    font-size: 11px;
    margin-bottom: 8px;
}
.char-map span {
    color: #ffb505;
    font-weight: 500;
    margin-right: 4px;
}
.char-zen {
    background: rgb(0 0 0 / 0.25);
    border-radius: 3px;
    padding: 3px 0;
    margin-bottom: 5px;
    font-size: 11px;
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: help;
    text-align: center;
    width: 90px;
}
.char-zen span {
    color: #ffb505;
    font-weight: 500;
    margin-right: 2px;
}
.char-zen:hover::after {
    content: attr(title);
    position: absolute;
    background: rgb(0 0 0 / 0.9);
    padding: 5px 8px;
    border-radius: 3px;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    z-index: 10;
    box-shadow: 0 2px 5px rgb(0 0 0 / 0.5);
    color: #ffb505;
}
.character-actions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}
.character-action-btn {
    text-align: center;
    padding: 5px 4px;
    font-size: 10px;
    background: rgb(35 30 25 / 0.6);
    border: 1px solid rgb(70 60 40 / 0.4);
    border-radius: 3px;
    color: #d2bf989c;
    transition: all 0.2s ease;
    text-decoration: none;
}
.character-action-btn:hover {
    background: rgb(50 40 30 / 0.7);
    color: #ffb505;
    transform: translateY(-2px);
}
.charOptions-flex {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    padding-top: 20px;
    padding-bottom: 20px;
    background: url(../img/bg-h-content.jpg) no-repeat;
    background-size: cover;
    background-position: center bottom;
    box-shadow: 0 10px 20px -5px #000;
    height: min-content;
}
.charOptions-block {
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
    width: 282px;
    height: 70px;
    background: url(../img/option-bg.jpg) center no-repeat;
    background-size: cover;
    color: #ffb505;
    font-style: italic;
    position: relative;
    text-align: center;
}
.charOptions-block span {
    font-size: 11px;
    color: #c1c0b8;
}
.charOptions-block:hover {
    filter: brightness(120%);
}
.charOptions-block p {
    width: 100%;
    text-align: center;
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 5px;
    text-transform: uppercase;
}
.modal {
    display: none;
    position: fixed;
    z-index: 150;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0 0 0 / 0.95);
    justify-content: center;
    align-items: center;
}
.modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0 auto;
    display: flex;
    align-items: center;
    flex-direction: column;
    max-width: 600px;
    min-width: 350px;
    height: auto;
    background: url(../img/bg-h-content.jpg) no-repeat;
    background-size: cover;
    background-position: center bottom;
    box-shadow: 0 10px 20px -5px #000;
    padding: 30px 25px 40px;
    border-radius: 10px;
}
.modal-title {
    display: flex;
    width: 100%;
    justify-content: center;
    margin-bottom: 10px;
    font-size: 16px;
}
.modal .close-button {
    position: absolute;
    z-index: 150;
    top: 8px;
    right: 8px;
    cursor: pointer;
    display: block;
    font-size: 18px;
    color: #5d5d5d;
}
.bottom-form {
    display: flex;
    justify-content: center;
    margin: 20px 0px;
    align-items: center;
}
.forgot-link {
    color: #ccc;
    font-size: 12px;
    transition: color 0.3s;
}
.forgot-link:hover {
    color: #fff;
}
.register-link {
    margin-top: 20px;
    text-align: center;
    font-size: 13px;
    color: #ccc;
}
.register-link a {
    color: #ff9b00;
    text-decoration: none;
    transition: color 0.3s;
}
.register-link a:hover {
    color: #fff;
}
#loading {
    background-image: url(../img/l_bg.png);
    border-radius: 0 0 4px 4px;
    color: #fff;
    display: none;
    position: fixed;
    top: 0;
    left: 48%;
    z-index: 1000;
    padding: 6px;
}
.paypal-gateway-container {
    display: block;
}
.paypal-gateway-logo {
    width: 100%;
    height: 68px;
    background: #fff9ec url(../img/paypal-logo-200-68.png) no-repeat top center;
    margin-bottom: 10px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}
.paypal-gateway-content {
    margin: 5px;
    padding: 10px;
    overflow: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: linear-gradient(rgb(0 0 0 / 29%), rgb(0 0 0 / 31%)), url(../img/bg-h-content.jpg) no-repeat center / cover;
    border: 1px solid #b19a7521;
    border-radius: 2px;
}
.paypal-gateway-content p {
    padding: 8px;
    color: #aaa;
    line-height: 1;
    vertical-align: top;
    font-size: 14px;
}
.paypal-gateway-conversion-rate {
    margin: 0 auto;
    text-align: center;
    color: #000;
    font-size: 18px;
    padding: 10px 0;
}
.paypal-gateway-form {
    width: 100%;
    margin: 0 auto;
    text-align: center;
}
.paypal-gateway-form div {
    display: inline-block;
    padding: 3px 6px;
    color: #000;
    font-size: 18px;
}
.paypal-gateway-continue {
    margin: 0 auto;
    text-align: center;
    margin-top: 5px;
}
.package-title {
    background-color: #2e2e2e;
    border-radius: 2px;
    border: 2px solid #454545;
    margin-bottom: 5px;
}
.package-title span {
    font-size: 13px;
    color: #d2d2d0;
    margin-bottom: 5px;
}
.package-prices {
    display: flex;
    margin: -10px;
    margin-bottom: 5px;
}
.package-prices span {
    color: #23c746;
    font-size: 10px;
    width: 100%;
    margin-bottom: 5px;
}
.package-wcoin-total {
    font-size: 12px !important;
    color: #ffb505 !important;
}
.package-prizes-total {
    font-size: 14px !important;
    color: #cdcdcd !important;
    padding: 5px !important;
}
.package-prices sup {
    font-size: 8px;
    color: #fff;
    background-color: #e34d4c;
    border-radius: 2px;
    padding: 1px;
    margin: 2px;
    margin-bottom: 5px;
}
.package-coin {
    display: flex;
    margin-top: 10px;
    margin: 0 auto;
    justify-content: center;
    margin-bottom: 5px;
}
.package-coin span {
    font-size: 12px;
    margin-bottom: 5px;
}
.package-tag {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgb(0 0 0 / 0.3);
    margin-bottom: 5px;
}
.package-tag span {
    font-size: 11px;
    padding: 5px 18px;
    border-radius: 15px;
    white-space: nowrap;
    color: #eefdf2;
    background-color: #16752f;
    margin-bottom: 5px;
}
.paypal-gateway-continue button,
.paypal-gateway-continue a {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    user-select: none;
    border: 1px solid #fff0;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.25rem;
    transition: all 0.15s ease-in-out;
    cursor: pointer;
    text-decoration: none;
}
.additional-info-container {
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
}
.medieval-style-panel {
    background: linear-gradient(rgb(0 0 0 / 29%), rgb(0 0 0 / 31%)), url(../img/bg-h-content.jpg) no-repeat center / cover;
    border: 1px solid #b19a7521;
    border-radius: 4px;
    padding: 25px;
    box-shadow: 0 2px 8px rgb(0 0 0 / 0.15);
}
.disclaimer-title {
    color: #ffb505;
    font-size: 14px;
    margin: 0 0 20px 0;
    padding: 0;
    font-weight: 600;
    display: flex;
    align-items: center;
}
.disclaimer-title img {
    margin-right: 8px;
    vertical-align: middle;
}
.info-item {
    display: flex;
    align-items: flex-start;
    margin: 10px 0;
    padding: 12px;
    background: #0e0e0e;
    border-radius: 3px;
    gap: 12px;
}
.info-text {
    position: relative;
    padding-left: 15px;
    font-size: 12px;
    line-height: 1.5;
    color: #b0aea3;
}
.info-text::before {
    content: "•";
    position: absolute;
    left: 0;
    color: #ffb505;
    font-size: inherit;
}
.contact-details {
    margin-top: 8px;
    padding-left: 10px;
    font-size: 12px;
    color: #b0aea3;
}
.important-note {
    padding: 10px;
    background: rgb(90 70 40 / 0.2);
    border-left: 3px solid #ffb505;
    display: flex;
    gap: 12px;
    align-items: center;
    font-size: 12px;
    color: #b0aea3;
}
.important-note a {
    color: #ffb505;
    text-decoration: none;
    border-bottom: 1px dashed;
    transition: all 0.2s ease;
}
.important-note a:hover {
    border-bottom-style: solid;
}
.fa-info-circle {
    display: none;
}
.col-sm-4 {
    position: relative;
    width: 100%;
    padding-right: 12px;
    padding-left: 12px;
}
.col-xs-12 {
    width: 100%;
}
.col-xs-1,
.col-xs-10,
.col-xs-11,
.col-xs-12,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9 {
    float: left;
}
.col-lg-1,
.col-lg-10,
.col-lg-11,
.col-lg-12,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-md-1,
.col-md-10,
.col-md-11,
.col-md-12,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-sm-1,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-xs-1,
.col-xs-10,
.col-xs-11,
.col-xs-12,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9 {
    position: relative;
    min-height: 1px;
    padding-right: 5px;
    padding-left: 0px;
}
.panel-title {
    color: #666;
    font-size: 15px;
    font-weight: 700;
}
.panel-body {
    padding: 15px;
}
.row {
    margin-right: -15px;
    margin-left: -15px;
}
.table {
    width: 100%;
    max-width: 100%;
    margin-bottom: 20px;
}
.table > tbody > tr > td {
    border-top: 1px solid #fff0;
}
.table > tbody > tr > td,
.table > tbody > tr > th,
.table > tfoot > tr > td,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > thead > tr > th {
    padding: 8px;
    line-height: 1.42857143;
    vertical-align: top;
}
::-webkit-scrollbar {
    width: 12px;
}
::-webkit-scrollbar-track {
    background: #1e1e1e;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb {
    background: #ffb505;
    border-radius: 10px;
    border: 2px solid #1e1e1e;
}
::-webkit-scrollbar-thumb:hover {
    background: #e6a000;
}
html {
    scrollbar-width: thin;
    scrollbar-color: #ffb505 #1e1e1e;
}
.f16 .flag {
    display: inline-block;
    height: 16px;
    width: 16px;
    vertical-align: text-top;
    line-height: 16px;
    background: url(../img/flags.png) no-repeat;
}
.f16 ._African_Union {
    background-position: 0 -16px;
}
.f16 ._Arab_League {
    background-position: 0 -32px;
}
.f16 ._ASEAN {
    background-position: 0 -48px;
}
.f16 ._CARICOM {
    background-position: 0 -64px;
}
.f16 ._CIS {
    background-position: 0 -80px;
}
.f16 ._Commonwealth {
    background-position: 0 -96px;
}
.f16 ._England {
    background-position: 0 -112px;
}
.f16 ._European_Union,
.f16 .eu {
    background-position: 0 -128px;
}
.f16 ._Islamic_Conference {
    background-position: 0 -144px;
}
.f16 ._Kosovo {
    background-position: 0 -160px;
}
.f16 ._NATO {
    background-position: 0 -176px;
}
.f16 ._Northern_Cyprus {
    background-position: 0 -192px;
}
.f16 ._Northern_Ireland {
    background-position: 0 -208px;
}
.f16 ._Olimpic_Movement {
    background-position: 0 -224px;
}
.f16 ._OPEC {
    background-position: 0 -240px;
}
.f16 ._Red_Cross {
    background-position: 0 -256px;
}
.f16 ._Scotland {
    background-position: 0 -272px;
}
.f16 ._Somaliland {
    background-position: 0 -288px;
}
.f16 ._Tibet {
    background-position: 0 -304px;
}
.f16 ._United_Nations {
    background-position: 0 -320px;
}
.f16 ._Wales {
    background-position: 0 -336px;
}
.f16 .ad {
    background-position: 0 -352px;
}
.f16 .ae {
    background-position: 0 -368px;
}
.f16 .af {
    background-position: 0 -384px;
}
.f16 .ag {
    background-position: 0 -400px;
}
.f16 .ai {
    background-position: 0 -416px;
}
.f16 .al {
    background-position: 0 -432px;
}
.f16 .am {
    background-position: 0 -448px;
}
.f16 .ao {
    background-position: 0 -464px;
}
.f16 .aq {
    background-position: 0 -480px;
}
.f16 .ar {
    background-position: 0 -496px;
}
.f16 .as {
    background-position: 0 -512px;
}
.f16 .at {
    background-position: 0 -528px;
}
.f16 .au {
    background-position: 0 -544px;
}
.f16 .aw {
    background-position: 0 -560px;
}
.f16 .ax {
    background-position: 0 -576px;
}
.f16 .az {
    background-position: 0 -592px;
}
.f16 .ba {
    background-position: 0 -608px;
}
.f16 .bb {
    background-position: 0 -624px;
}
.f16 .bd {
    background-position: 0 -640px;
}
.f16 .be {
    background-position: 0 -656px;
}
.f16 .bf {
    background-position: 0 -672px;
}
.f16 .bg {
    background-position: 0 -688px;
}
.f16 .bh {
    background-position: 0 -704px;
}
.f16 .bi {
    background-position: 0 -720px;
}
.f16 .bj {
    background-position: 0 -736px;
}
.f16 .bm {
    background-position: 0 -752px;
}
.f16 .bn {
    background-position: 0 -768px;
}
.f16 .bo {
    background-position: 0 -784px;
}
.f16 .br {
    background-position: 0 -800px;
}
.f16 .bs {
    background-position: 0 -816px;
}
.f16 .bt {
    background-position: 0 -832px;
}
.f16 .bw {
    background-position: 0 -848px;
}
.f16 .by {
    background-position: 0 -864px;
}
.f16 .bz {
    background-position: 0 -880px;
}
.f16 .ca {
    background-position: 0 -896px;
}
.f16 .cg {
    background-position: 0 -912px;
}
.f16 .cf {
    background-position: 0 -928px;
}
.f16 .cd {
    background-position: 0 -944px;
}
.f16 .ch {
    background-position: 0 -960px;
}
.f16 .ci {
    background-position: 0 -976px;
}
.f16 .ck {
    background-position: 0 -992px;
}
.f16 .cl {
    background-position: 0 -1008px;
}
.f16 .cm {
    background-position: 0 -1024px;
}
.f16 .cn {
    background-position: 0 -1040px;
}
.f16 .zh {
    background-position: 0 -1040px;
}
.f16 .co {
    background-position: 0 -1056px;
}
.f16 .cr {
    background-position: 0 -1072px;
}
.f16 .cu {
    background-position: 0 -1088px;
}
.f16 .cv {
    background-position: 0 -1104px;
}
.f16 .cy {
    background-position: 0 -1120px;
}
.f16 .cz {
    background-position: 0 -1136px;
}
.f16 .de {
    background-position: 0 -1152px;
}
.f16 .dj {
    background-position: 0 -1168px;
}
.f16 .dk {
    background-position: 0 -1184px;
}
.f16 .dm {
    background-position: 0 -1200px;
}
.f16 .do {
    background-position: 0 -1216px;
}
.f16 .dz {
    background-position: 0 -1232px;
}
.f16 .ec {
    background-position: 0 -1248px;
}
.f16 .ee {
    background-position: 0 -1264px;
}
.f16 .eg {
    background-position: 0 -1280px;
}
.f16 .eh {
    background-position: 0 -1296px;
}
.f16 .er {
    background-position: 0 -1312px;
}
.f16 .es {
    background-position: 0 -1328px;
}
.f16 .et {
    background-position: 0 -1344px;
}
.f16 .fi {
    background-position: 0 -1360px;
}
.f16 .fj {
    background-position: 0 -1376px;
}
.f16 .fm {
    background-position: 0 -1392px;
}
.f16 .fo {
    background-position: 0 -1408px;
}
.f16 .fr {
    background-position: 0 -1424px;
}
.f16 .bl,
.f16 .cp,
.f16 .mf,
.f16 .yt {
    background-position: 0 -1424px;
}
.f16 .ga {
    background-position: 0 -1440px;
}
.f16 .gb {
    background-position: 0 -1456px;
}
.f16 .sh {
    background-position: 0 -1456px;
}
.f16 .gd {
    background-position: 0 -1472px;
}
.f16 .ge {
    background-position: 0 -1488px;
}
.f16 .gg {
    background-position: 0 -1504px;
}
.f16 .gh {
    background-position: 0 -1520px;
}
.f16 .gi {
    background-position: 0 -1536px;
}
.f16 .gl {
    background-position: 0 -1552px;
}
.f16 .gm {
    background-position: 0 -1568px;
}
.f16 .gn {
    background-position: 0 -1584px;
}
.f16 .gp {
    background-position: 0 -1600px;
}
.f16 .gq {
    background-position: 0 -1616px;
}
.f16 .gr {
    background-position: 0 -1632px;
}
.f16 .gt {
    background-position: 0 -1648px;
}
.f16 .gu {
    background-position: 0 -1664px;
}
.f16 .gw {
    background-position: 0 -1680px;
}
.f16 .gy {
    background-position: 0 -1696px;
}
.f16 .hk {
    background-position: 0 -1712px;
}
.f16 .hn {
    background-position: 0 -1728px;
}
.f16 .hr {
    background-position: 0 -1744px;
}
.f16 .ht {
    background-position: 0 -1760px;
}
.f16 .hu {
    background-position: 0 -1776px;
}
.f16 .id {
    background-position: 0 -1792px;
}
.f16 .mc {
    background-position: 0 -1792px;
}
.f16 .ie {
    background-position: 0 -1808px;
}
.f16 .il {
    background-position: 0 -1824px;
}
.f16 .im {
    background-position: 0 -1840px;
}
.f16 .in {
    background-position: 0 -1856px;
}
.f16 .iq {
    background-position: 0 -1872px;
}
.f16 .ir {
    background-position: 0 -1888px;
}
.f16 .is {
    background-position: 0 -1904px;
}
.f16 .it {
    background-position: 0 -1920px;
}
.f16 .je {
    background-position: 0 -1936px;
}
.f16 .jm {
    background-position: 0 -1952px;
}
.f16 .jo {
    background-position: 0 -1968px;
}
.f16 .jp {
    background-position: 0 -1984px;
}
.f16 .ke {
    background-position: 0 -2000px;
}
.f16 .kg {
    background-position: 0 -2016px;
}
.f16 .kh {
    background-position: 0 -2032px;
}
.f16 .ki {
    background-position: 0 -2048px;
}
.f16 .km {
    background-position: 0 -2064px;
}
.f16 .kn {
    background-position: 0 -2080px;
}
.f16 .kp {
    background-position: 0 -2096px;
}
.f16 .kr {
    background-position: 0 -2112px;
}
.f16 .kw {
    background-position: 0 -2128px;
}
.f16 .ky {
    background-position: 0 -2144px;
}
.f16 .kz {
    background-position: 0 -2160px;
}
.f16 .la {
    background-position: 0 -2176px;
}
.f16 .lb {
    background-position: 0 -2192px;
}
.f16 .lc {
    background-position: 0 -2208px;
}
.f16 .li {
    background-position: 0 -2224px;
}
.f16 .lk {
    background-position: 0 -2240px;
}
.f16 .lr {
    background-position: 0 -2256px;
}
.f16 .ls {
    background-position: 0 -2272px;
}
.f16 .lt {
    background-position: 0 -2288px;
}
.f16 .lu {
    background-position: 0 -2304px;
}
.f16 .lv {
    background-position: 0 -2320px;
}
.f16 .ly {
    background-position: 0 -2336px;
}
.f16 .ma {
    background-position: 0 -2352px;
}
.f16 .md {
    background-position: 0 -2368px;
}
.f16 .me {
    background-position: 0 -2384px;
}
.f16 .mg {
    background-position: 0 -2400px;
}
.f16 .mh {
    background-position: 0 -2416px;
}
.f16 .mk {
    background-position: 0 -2432px;
}
.f16 .ml {
    background-position: 0 -2448px;
}
.f16 .mm {
    background-position: 0 -2464px;
}
.f16 .mn {
    background-position: 0 -2480px;
}
.f16 .mo {
    background-position: 0 -2496px;
}
.f16 .mq {
    background-position: 0 -2512px;
}
.f16 .mr {
    background-position: 0 -2528px;
}
.f16 .ms {
    background-position: 0 -2544px;
}
.f16 .mt {
    background-position: 0 -2560px;
}
.f16 .mu {
    background-position: 0 -2576px;
}
.f16 .mv {
    background-position: 0 -2592px;
}
.f16 .mw {
    background-position: 0 -2608px;
}
.f16 .mx {
    background-position: 0 -2624px;
}
.f16 .my {
    background-position: 0 -2640px;
}
.f16 .mz {
    background-position: 0 -2656px;
}
.f16 .na {
    background-position: 0 -2672px;
}
.f16 .nc {
    background-position: 0 -2688px;
}
.f16 .ne {
    background-position: 0 -2704px;
}
.f16 .ng {
    background-position: 0 -2720px;
}
.f16 .ni {
    background-position: 0 -2736px;
}
.f16 .nl {
    background-position: 0 -2752px;
}
.f16 .bq {
    background-position: 0 -2752px;
}
.f16 .no {
    background-position: 0 -2768px;
}
.f16 .bv,
.f16 .nq,
.f16 .sj {
    background-position: 0 -2768px;
}
.f16 .np {
    background-position: 0 -2784px;
}
.f16 .nr {
    background-position: 0 -2800px;
}
.f16 .nz {
    background-position: 0 -2816px;
}
.f16 .om {
    background-position: 0 -2832px;
}
.f16 .pa {
    background-position: 0 -2848px;
}
.f16 .pe {
    background-position: 0 -2864px;
}
.f16 .pf {
    background-position: 0 -2880px;
}
.f16 .pg {
    background-position: 0 -2896px;
}
.f16 .ph {
    background-position: 0 -2912px;
}
.f16 .pk {
    background-position: 0 -2928px;
}
.f16 .pl {
    background-position: 0 -2944px;
}
.f16 .pr {
    background-position: 0 -2960px;
}
.f16 .ps {
    background-position: 0 -2976px;
}
.f16 .pt {
    background-position: 0 -2992px;
}
.f16 .pw {
    background-position: 0 -3008px;
}
.f16 .py {
    background-position: 0 -3024px;
}
.f16 .qa {
    background-position: 0 -3040px;
}
.f16 .re {
    background-position: 0 -3056px;
}
.f16 .ro {
    background-position: 0 -3072px;
}
.f16 .rs {
    background-position: 0 -3088px;
}
.f16 .ru {
    background-position: 0 -3104px;
}
.f16 .rw {
    background-position: 0 -3120px;
}
.f16 .sa {
    background-position: 0 -3136px;
}
.f16 .sb {
    background-position: 0 -3152px;
}
.f16 .sc {
    background-position: 0 -3168px;
}
.f16 .sd {
    background-position: 0 -3184px;
}
.f16 .se {
    background-position: 0 -3200px;
}
.f16 .sg {
    background-position: 0 -3216px;
}
.f16 .si {
    background-position: 0 -3232px;
}
.f16 .sk {
    background-position: 0 -3248px;
}
.f16 .sl {
    background-position: 0 -3264px;
}
.f16 .sm {
    background-position: 0 -3280px;
}
.f16 .sn {
    background-position: 0 -3296px;
}
.f16 .so {
    background-position: 0 -3312px;
}
.f16 .sr {
    background-position: 0 -3328px;
}
.f16 .st {
    background-position: 0 -3344px;
}
.f16 .sv {
    background-position: 0 -3360px;
}
.f16 .sy {
    background-position: 0 -3376px;
}
.f16 .sz {
    background-position: 0 -3392px;
}
.f16 .tc {
    background-position: 0 -3408px;
}
.f16 .td {
    background-position: 0 -3424px;
}
.f16 .tg {
    background-position: 0 -3440px;
}
.f16 .th {
    background-position: 0 -3456px;
}
.f16 .tj {
    background-position: 0 -3472px;
}
.f16 .tl {
    background-position: 0 -3488px;
}
.f16 .tm {
    background-position: 0 -3504px;
}
.f16 .tl {
    background-position: 0 -3488px;
}
.f16 .tm {
    background-position: 0 -3504px;
}
.f16 .tn {
    background-position: 0 -3520px;
}
.f16 .to {
    background-position: 0 -3536px;
}
.f16 .tr {
    background-position: 0 -3552px;
}
.f16 .tt {
    background-position: 0 -3568px;
}
.f16 .tv {
    background-position: 0 -3584px;
}
.f16 .tw {
    background-position: 0 -3600px;
}
.f16 .tz {
    background-position: 0 -3616px;
}
.f16 .ua {
    background-position: 0 -3632px;
    background-position: 0 -3664px;
}
.f16 .us {
    background-position: 0 -3648px;
}
.f16 .uy {
    background-position: 0 -3680px;
}
.f16 .uz {
    background-position: 0 -3696px;
}
.f16 .va {
    background-position: 0 -3712px;
}
.f16 .vc {
    background-position: 0 -3728px;
}
.f16 .ve {
    background-position: 0 -3744px;
}
.f16 .vg {
    background-position: 0 -3760px;
}
.f16 .vn {
    background-position: 0 -3776px;
}
.f16 .vi {
    background-position: 0 -3792px;
}
.f16 .vu {
    background-position: 0 -3808px;
}
.f16 .ws {
    background-position: 0 -3824px;
}
.f16 .ye {
    background-position: 0 -3840px;
}
.f16 .za {
    background-position: 0 -3856px;
}
.f16 .zm {
    background-position: 0 -3872px;
}
.f16 .zw {
    background-position: 0 -3888px;
}
.f16 .sx {
    background-position: 0 -3904px;
}
.f16 .cw {
    background-position: 0 -3920px;
}
.f16 .ss {
    background-position: 0 -3936px;
}
.f16 .nu {
    background-position: 0 -3952px;
}
.item_size_12 {
    font-size: 12px;
}
.item_font_family {
    font-family: tahoma;
}
.item_white {
    color: #fff;
}
.item_light_green {
    color: lime;
}
.item_light_blue {
    color: #80b2ff;
}
.item_light_blue_2 {
    color: #36f;
}
.item_blue {
    color: #06f;
}
.item_pink {
    color: #ff1493;
}
.item_yellow {
    color: #fade09;
}
.item_yellow_2 {
    color: #fc0;
}
.item_red {
    color: red;
}
.item_dark_red {
    color: maroon;
}
.item_dark_red_background {
    background-color: maroon;
}
.item_purple {
    color: purple;
}
.item_socket {
    color: #b266ff;
}
.item_grey {
    color: gray;
}
.item_yellow_title {
    color: #ffcc19;
}
.item_luck {
    color: #80b2ff;
}
.item_exe_title {
    color: green;
}
.item_socket_title {
    color: #b266ff;
}
.item_socket_exe_title {
    color: #7401df;
}
.item_ancient_title {
    color: #01df01;
}
.item_ancient_background {
    background-color: blue;
}
#inventoryc {
    background-image: url(../../default_assets/images/inventoryc_black.png?v1);
    width: 395px;
    height: 319px;
    text-align: center;
    display: inline-block;
    position: relative;
}
#inventoryc > img {
    position: absolute;
    top: 90px;
    left: 145px;
    border-radius: 50%;
    border: 3px solid #24314e;
    width: 110px;
    height: 110px;
}
#inventoryc > div {
    position: absolute;
    background-repeat: no-repeat;
    background-position: center center;
}
#in_weapon {
    width: 90px;
    height: 136px;
    bottom: 0;
    left: -6px;
    background-size: contain !important;
}
#in_shield {
    width: 60px;
    height: 136px;
    bottom: 0;
    right: 8px;
    background-size: contain !important;
}
#in_helm {
    width: 68px;
    height: 68px;
    top: 2px;
    left: 66px;
}
#in_armor {
    width: 72px;
    height: 110px;
    top: 72px;
    left: 40px;
    background-size: contain !important;
}
#in_pants {
    width: 68px;
    height: 68px;
    bottom: 8px;
    left: 82px;
    background-size: contain !important;
}
#in_gloves {
    width: 68px;
    height: 68px;
    top: 116px;
    right: 54px;
    background-size: contain !important;
}
#in_boots {
    width: 68px;
    height: 68px;
    bottom: 8px;
    right: 82px;
    background-size: contain !important;
}
#in_wings {
    width: 138px;
    height: 102px;
    top: 8px;
    right: -2px;
    background-size: contain !important;
}
#in_zoo {
    width: 42px;
    height: 42px;
    top: 15px;
    left: 10px;
    background-size: contain !important;
}
#in_pendant {
    width: 38px;
    height: 38px;
    top: 20px;
    right: 136px;
    background-size: contain !important;
}
#in_ring1 {
    width: 38px;
    height: 38px;
    bottom: 92px;
    left: 96px;
    background-size: contain !important;
}
#in_ring2 {
    width: 38px;
    height: 38px;
    bottom: 92px;
    right: 96px;
    background-size: contain !important;
}
#in_pentagram {
    width: 64px;
    height: 64px;
    bottom: 8px;
    right: 169px;
    background-size: contain !important;
}
#in_ear1 {
    width: 32px;
    height: 32px;
    top: 72px;
    left: 0;
    background-size: contain !important;
}
#in_ear2 {
    width: 32px;
    height: 32px;
    top: 72px;
    left: 115px;
    background-size: contain !important;
}
.cworkshop {
    display: table;
    margin: 50px auto;
}
.cworkshop .inventoryy {
    background-image: url(../../default_assets/images/inv.png);
    height: 610px;
    width: 311px;
    display: block;
}
.cworkshop .item {
    position: absolute;
    margin-top: 10px;
    margin-left: 3px;
}
.cworkshop .item > div {
    cursor: pointer;
    border: solid 2px #fff0;
}
div[id*="item-slot-occupied-"] img {
    background-color: rgb(31 31 31 / 0.73);
}
div[id*="item-slot-occupied-"] img:hover {
    background-color: rgb(154 60 45 / 0.43);
}
.cworkshop .item > div.selected {
    background-color: rgb(154 60 45 / 0.43);
    border: solid 2px rgb(154 60 45 / 0.44);
}
.cworkshop .item .hover_inv:hover {
    background-color: rgb(154 60 45 / 0.43);
    border: solid 2px rgb(154 60 45 / 0.44);
}
.cworkshop .title {
    margin-top: 13px;
    text-align: center;
    margin-bottom: 30px;
}
#tooltip {
    position: absolute;
    z-index: 11001;
    border: 1px solid #111;
    background-color: #221f28;
    padding: 5px;
    opacity: 0.9;
    font: normal 10px Tahoma, Helvetica, sans-serif;
    text-align: center;
    color: #fff;
}
#tooltip h3,
#tooltip div {
    margin: 0;
}
.waretitle {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    background: #610000;
    font-style: oblique;
    font-weight: 700;
    color: #fff;
}
.ticket-header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgb(18 18 18 / 0.8);
    padding: 15px;
    border-radius: 3px;
    border: 1px solid rgb(31 31 31 / 60%);
}
.ticket-header-info {
    flex: 1;
}
.ticket-header-description {
    font-size: 12px;
    color: #b0aea3;
    margin: 0;
}
.ticket-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-left: 20px;
}
.ticket {
    font-size: 12px;
    background: #fff0;
    border: none;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    width: 90%;
    margin: 10px;
}
.ticket th {
    padding: 12px 10px 12px 0;
    background: #352d1f26;
}
.ticket th:first-child {
    text-align: left;
    padding-left: 10px;
}
.ticket tr:first-child th:first-child {
    -moz-border-radius-topleft: 3px;
    -webkit-border-top-left-radius: 3px;
    border-top-left-radius: 3px;
}
.ticket tr:first-child th:last-child {
    -moz-border-radius-topright: 3px;
    -webkit-border-top-right-radius: 3px;
    border-top-right-radius: 3px;
}
.ticket tr {
    text-align: center;
    padding-left: 20px;
}
.ticket td:first-child {
    text-align: left;
    padding-left: 20px;
    border-left: 0;
}
.ticket td {
    padding: 10px;
    background: #f0f0f00d;
    transition: all 0.3s;
}
.ticket tr.even td {
    background: #f6f6f6;
    background: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#f6f6f6));
    background: -moz-linear-gradient(top, #f8f8f8, #f6f6f6);
}
.ticket tr:last-child td {
    border-bottom: 0;
}
.ticket tr:last-child td:first-child {
    -moz-border-radius-bottomleft: 3px;
    -webkit-border-bottom-left-radius: 3px;
    border-bottom-left-radius: 3px;
}
.ticket tr:last-child td:last-child {
    -moz-border-radius-bottomright: 3px;
    -webkit-border-bottom-right-radius: 3px;
    border-bottom-right-radius: 3px;
}
.ticket tr:hover td {
    background: #121212;
}
.btn-base {
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url(../img/button.png);
    background-repeat: no-repeat;
    background-size: cover;
    color: #facf96e3;
    text-transform: uppercase;
    position: relative;
    border-radius: 3px;
    text-shadow: 1px 1px 1px rgb(255 165 0 / 60%), -1px -1px 1px rgb(0 0 0 / 60%);
}
.btn-small {
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url(../img/button-small.png);
    background-repeat: no-repeat;
    background-size: cover;
    color: #dba583;
    font-size: 10px;
    text-transform: uppercase;
    box-shadow: 0 5px 18px 0 #ff7f0059;
    padding: 5px 15px;
    border-radius: 3px;
    text-shadow: 1px 1px 1px rgb(255 165 0 / 60%), -1px -1px 1px rgb(0 0 0 / 60%);
}
.btn-base .axe {
    position: absolute;
    display: block;
    top: -5px;
    height: 36px;
    width: 15px;
    background-image: url(../img/axe.png);
    background-repeat: no-repeat;
    background-size: cover;
}
.btn-base .axe-left {
    left: -5px;
    transform: scaleX(-1);
}
.btn-base .axe-right {
    right: -5px;
}
.btn-base .text-styled {
    color: #facf96e3;
    -webkit-background-clip: text;
    background-clip: text;
    text-shadow: 1px 1px 1px rgb(255 165 0 / 60%), -1px -1px 1px rgb(0 0 0 / 60%);
    font-weight: 700;
    letter-spacing: 1px;
}
.btn-xxs {
    width: 70px;
    height: 20px;
    padding: 5px;
    font-size: 11px;
    box-shadow: 0 3px 12px 0 #ff7f0033;
}
.btn-sm {
    width: 92px;
    height: 30px;
    padding: 12px;
    font-size: 12px;
    box-shadow: 0 3px 12px 0 #ff7f0033;
}
.btn-md {
    width: 100px;
    height: 35px;
    padding: 14px;
    font-size: 12px;
    box-shadow: 0 4px 15px 0 #ff7f0040;
    letter-spacing: 1px;
}
.btn-lg {
    width: 120px;
    height: 35px;
    padding: 15px;
    font-size: 13px;
    box-shadow: 0 4px 16px 0 #ff7f0045;
    letter-spacing: 1px;
}
.btn-xl {
    width: 145px;
    height: 35px;
    padding: 16px;
    font-size: 13px;
    box-shadow: 0 5px 18px 0 #ff7f0059;
}
.btn-xxl {
    width: 170px;
    height: 35px;
    padding: 16px;
    font-size: 13px;
    box-shadow: 0 5px 18px 0 #ff7f0059;
}
.btn-base .active,
.btn-base:hover {
    box-shadow: 0 5px 18px 0 #ff7f0059;
}
.btn-brightness:hover {
    filter: brightness(120%);
}
.table-data {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 1px;
    border: 1px solid rgb(60 60 60 / 0.2);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgb(0 0 0 / 0.15);
    table-layout: fixed;
    margin: 5px;
}
.table-data th {
    background-color: rgb(20 20 20 / 0.95);
    color: #8c8580;
    font-weight: 400;
    padding: 10px 10px;
    font-size: 12px;
    vertical-align: middle;
    text-align: center;
}
.table-data td {
    padding: 8px 10px;
    background-color: #352d1f26;
    font-size: 12px;
    vertical-align: middle;
    white-space: normal;
    word-wrap: break-word;
}
.table-data td:first-child {
    text-align: left;
}
.table-data.dual-column td {
    text-align: left;
}
.table-data:not(.dual-column) td:not(:first-child) {
    text-align: center;
}
.table-data tr:nth-child(even) td {
    background-color: #f0f0f00d;
}
.table-data .header-primary th {
    background-color: rgb(20 20 20 / 0.95);
}
.table-data .header-secondary th {
    background-color: rgb(30 30 30 / 0.95);
}
.td-col-auto {
    width: auto;
}
.td-col-80 {
    width: 80%;
}
.td-col-60 {
    width: 60%;
}
.td-col-40 {
    width: 40%;
}
.td-col-30 {
    width: 30%;
}
.td-col-25 {
    width: 25%;
}
.td-col-20 {
    width: 20%;
}
.td-col-15 {
    width: 15%;
}
.td-col-10 {
    width: 10%;
}
.td-col-5 {
    width: 8%;
    min-width: 50px;
}
.table-data tr {
    transition: all 0.3s ease;
    position: relative;
}
.table-data tr:hover td {
    background-color: rgb(22 22 22 / 0.95) !important;
}
.table-data tr:hover td:first-child {
    box-shadow: inset 3px 0 0 rgb(255 155 0 / 0.6);
}
.table-data a,
.highlight-link a {
    color: #ffb505 !important;
    text-decoration: none;
    position: relative;
    transition: all 0.2s ease;
    padding-bottom: 2px;
}
.table-data a:hover,
.highlight-link a:hover {
    color: #ffb505 !important;
}
.table-data a::after,
.highlight-link a::after {
    content: "";
    position: absolute;
    width: 0;
    height: 1px;
    bottom: 0;
    left: 0;
    background-color: #ffb505;
    transition: width 0.3s ease;
}
.table-data a:hover::after,
.highlight-link a:hover::after {
    width: 100%;
}
.cell-left {
    text-align: left !important;
}
.table-data td .img-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}
.stats-table td:first-child {
    text-align: center;
}
.stats-table a {
    color: #ffb505 !important;
}
.stats-table a:hover {
    color: #ffd280 !important;
}
.logs-page-table {
    font-size: 11px;
}
.logs-page-table td,
.logs-page-table th,
.logs-page-table a {
    font-size: 11px;
}
.wh_items {
    width: 261px;
    margin: 2px auto;
    padding-top: 6px;
    padding-left: 3px;
    height: 490px;
}
.warehouse-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 0 auto;
}
.warehouse-container .wh_items {
    width: 261px;
    margin: 0;
    padding-top: 6px;
    padding-left: 3px;
    height: 490px;
    float: none;
}
.warehouse-buttons-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    width: 100%;
}
.warehouse-left-buttons,
.warehouse-right-buttons {
    display: flex;
    justify-content: center;
    width: 261px;
}
.square {
    cursor: pointer;
    position: absolute;
    opacity: 0.8;
}
.square:hover {
    padding: 1px;
    opacity: 1;
}
.square img {
    width: 100%;
    height: 100%;
}
#price_with_tax {
    display: contents;
}
#price_with_tax[style*="display: block"] {
    display: contents !important;
}
.table-data td span a {
    position: relative;
    display: inline;
    text-decoration: none;
}
.table-data td span a::after {
    content: none;
}
.table-data td span a:hover::after {
    transform: none;
}
#item_filter_overlay {
    position: absolute;
    height: 400px;
    width: 300px;
    display: none;
    z-index: 9999;
}
#item_filter {
    width: 300px;
    height: auto;
    max-height: 710px;
    padding-bottom: 2px;
    background: #161616;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    box-shadow: 0 0 4px rgb(0 0 0 / 0.7);
    -webkit-box-shadow: 0 0 4px rgb(0 0 0 / 0.7);
    -moz-box-shadow: 0 0 4px rgb(0 0 0 / 0.7);
}
.item_filter_content {
    height: auto;
    max-height: 600px;
    width: 285px;
    margin: 15px;
    overflow: auto;
    padding: 5px;
}
.modal-header2 {
    background: url(../img/hd-bg.png);
    padding: 18px 18px 14px 18px;
    border-bottom: 1px solid #ccc;
    border-top-left-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -webkit-border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    -moz-border-radius-topright: 5px;
    -webkit-border-top-right-radius: 5px;
    cursor: move;
}
.modal-header2 h2 {
    color: #444;
    font-size: 2em;
    font-weight: 700;
    margin-bottom: 3px;
    text-shadow: 1px 1px 0 rgb(255 255 255 / 0.5);
}
.close {
    position: absolute;
    top: 12px;
    right: 12px;
    display: block;
    width: 14px;
    height: 14px;
    background: url(../img/close.png);
    z-index: 2;
    cursor: pointer;
}
.item_filter_content .search-query {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 8px;
}
.item_filter_content .search-input {
    flex-grow: 1;
    height: 28px;
    background-color: #00000080;
    border: 1px solid #fff0;
    border-radius: 2px;
    color: #989690;
    padding: 0 10px;
}
.item_filter_content .search-btn {
    padding: 5px 15px;
    height: 28px;
    white-space: nowrap;
}
.filter-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
}
.filter-actions button {
    flex: 1;
}
#helm {
    position: absolute;
    left: 73px;
    top: 58px;
    width: 56px;
    height: 66px;
}
#wings {
    position: absolute;
    left: 272px;
    top: 59px;
    width: 127px;
    height: 110px;
}
#pendant {
    position: absolute;
    left: 233px;
    top: 80px;
    width: 29px;
    height: 29px;
}
#sword {
    position: absolute;
    left: 6px;
    top: 242px;
    width: 69px;
    height: 129px;
}
#armor {
    position: absolute;
    left: 40px;
    top: 138px;
    width: 82px;
    height: 98px;
}
#shield {
    position: absolute;
    left: 330px;
    top: 242px;
    width: 69px;
    height: 129px;
}
#gloves {
    position: absolute;
    left: 271px;
    top: 178px;
    width: 85px;
    height: 55px;
}
#pants {
    position: absolute;
    left: 89px;
    top: 297px;
    width: 58px;
    height: 74px;
}
#ring_left {
    position: absolute;
    left: 102px;
    top: 252px;
    width: 29px;
    height: 29px;
}
#ring_right {
    position: absolute;
    left: 272px;
    top: 252px;
    width: 29px;
    height: 29px;
}
#boots {
    position: absolute;
    left: 258px;
    top: 297px;
    width: 58px;
    height: 74px;
}
.price-limits-info {
    font-size: 10px;
    margin-top: 3px;
    margin-left: 0;
    padding: 3px 2px;
    background-color: rgb(0 0 0 / 20%);
    border-radius: 3px;
    display: inline-block;
}
.price-label {
    color: #b0aea3;
}
#min_price_display {
    color: #ffb505;
}
.price-invalid {
    border-color: #800c0c !important;
    box-shadow: 0 0 5px rgb(243 18 18 / 50%);
}
.tax-hidden-row {
    display: none;
}
.tax-table-toggle {
    text-align: center;
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid rgb(255 255 255 / 0.08);
}
.tax-toggle-btn {
    display: inline-block;
    color: #b0aea3;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 3px;
    background-color: rgb(0 0 0 / 0.15);
    text-decoration: none;
    transition: all 0.2s;
}
.tax-toggle-btn:hover {
    color: #ffb505;
    background-color: rgb(0 0 0 / 0.3);
}
.tax-toggle-btn.active .toggle-more {
    display: none;
}
.tax-toggle-btn:not(.active) .toggle-less {
    display: none;
}
.title-main {
    position: relative;
    color: #b0aea3;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding-bottom: 10px;
    text-align: center;
    display: inline-block;
}
.title-main::after {
    content: "";
    position: absolute;
    bottom: 3px;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgb(255 181 5 / 0.3) 10%, rgb(255 181 5 / 0.8) 50%, rgb(255 181 5 / 0.3) 90%, transparent 100%);
}
.title-wrapper {
    text-align: center;
    width: 100%;
}
.title-main.title-left {
    text-align: left;
    display: inline-block;
    align-self: flex-start;
}
.title-main.title-left::after {
    background: linear-gradient(90deg, rgb(255 181 5 / 0.8) 0%, rgb(255 181 5 / 0.4) 70%, transparent 100%);
}
.section-header {
    display: flex;
    align-items: center;
    padding-bottom: 8px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgb(255 181 5 / 0.4);
}
.section-header .icon {
    width: 16px;
    height: 16px;
    margin-right: 8px;
    background-color: currentColor;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
}
.section-header span {
    font-size: 13px;
    font-weight: 500;
}
.section-header.info-header {
    color: #5aabff;
    border-bottom-color: rgb(90 171 255 / 0.4);
}
.section-header.warning-header {
    color: #f39c12;
    border-bottom-color: rgb(243 156 18 / 0.4);
}
.section-header.danger-header {
    color: #e74c3c;
    border-bottom-color: rgb(231 76 60 / 0.4);
}
.section-header.success-header {
    color: #2ecc71;
    border-bottom-color: rgb(46 204 113 / 0.4);
}
.info-header .icon {
    mask-image: url(../img/icons/exclamation-circle.svg);
    -webkit-mask-image: url(../img/icons/exclamation-circle.svg);
}
.warning-header .icon {
    mask-image: url(../img/icons/exclamation-triangle.svg);
    -webkit-mask-image: url(../img/icons/exclamation-triangle.svg);
}
.success-header .icon {
    mask-image: url(../img/icons/exclamation-circle.svg);
    -webkit-mask-image: url(../img/icons/exclamation-circle.svg);
}
.danger-header .icon {
    mask-image: url(../img/icons/exclamation-triangle.svg);
    -webkit-mask-image: url(../img/icons/exclamation-triangle.svg);
}
.align-self-start {
    align-self: flex-start;
    width: 100%;
}
.ref-reward-dropdown {
    position: relative;
    display: inline-block;
}
.ref-reward-dropdown-content {
    display: none;
    position: relative;
    background-color: #1d1d1d;
    min-width: 150px;
    overflow: hidden;
    box-shadow: 0 8px 16px 0 rgb(0 0 0 / 0.2);
    z-index: 2500;
    overflow-y: auto;
    max-height: 500px;
    border: 1px solid #ffb505;
    margin-top: 10px;
}
.ref-reward-dropdown-content a.dropdown-link {
    color: #ffb505;
    padding: 6px 8px;
    text-decoration: none;
    display: block;
    border-bottom: 1px solid #333;
    background: none;
    font-weight: 400;
    transition: none;
    box-shadow: none;
    border-radius: 0;
    text-shadow: none;
    outline: none;
}
.ref-reward-dropdown-content a.simple-hover:hover {
    background-color: #2a2a2a;
    color: #b0aea3;
    border-bottom: 1px solid #333;
    text-decoration: none;
    transform: none;
    box-shadow: none;
    text-shadow: none;
}
.ref-reward-dropdown-content a.simple-hover:hover::before,
.ref-reward-dropdown-content a.simple-hover:hover::after {
    display: none;
    content: none;
    opacity: 0;
}
.ref-reward-dropdown:hover .ref-reward-dropdown-content {
    display: block;
}
.reward-row {
    min-height: 100px;
}
.reward-status {
    color: #7cfc00;
}
.claimed-status {
    color: tomato;
}
.no-rewards {
    color: #b0aea3;
    font-style: italic;
}
.text-center {
    text-align: center !important;
}
.chance-badge {
    display: inline-block;
    background: linear-gradient(to right, rgb(23 205 40 / 0.15) 0%, rgb(23 205 40 / 0.15) 50%, rgb(205 23 23 / 0.15) 50%, rgb(205 23 23 / 0.15) 100%);
    color: rgb(176 174 163 / 0.9);
    padding: 2px 6px;
    border-radius: 2px;
    font-size: 10px;
    font-weight: 500;
    border-left: 1px solid rgb(23 205 40 / 0.3);
    border-right: 1px solid rgb(205 23 23 / 0.3);
    letter-spacing: 0.3px;
}
.chance-badge:hover {
    color: rgb(255 181 5 / 0.9);
}
.droplist-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}
.droplist-header-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    width: 100%;
}
.droplist-select-wrapper {
    flex: 0 0 auto;
    width: 60%;
}
.search-wrapper {
    flex: 0 0 auto;
    width: 35%;
}
.droplist-select {
    position: relative;
    width: 100%;
    z-index: 100;
}
.droplist-btn {
    width: 100%;
    padding: 0 15px;
    background-color: rgb(18 18 18 / 0.75);
    color: #b0aea3;
    border: 1px solid rgb(70 70 70 / 0.4);
    border-radius: 3px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 2px 4px rgb(0 0 0 / 0.15);
    font-size: 12px;
    font-weight: 500;
    height: 35px;
}
.droplist-btn:hover {
    background-color: rgb(25 25 25 / 0.85);
    border-color: rgb(80 80 80 / 0.6);
    box-shadow: 0 3px 6px rgb(0 0 0 / 0.2);
}
.droplist-btn:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgb(255 181 5 / 0.2);
}
.droplist-btn i {
    transition: transform 0.3s ease, color 0.2s;
    font-size: 10px;
    color: rgb(124 118 113 / 0.8);
    margin-left: 8px;
}
.droplist-select.active .droplist-btn i {
    transform: rotate(180deg);
    color: rgb(255 181 5 / 0.8);
}
.droplist-content {
    position: absolute;
    top: 110%;
    left: 0;
    width: 100%;
    max-height: 500px;
    overflow-y: scroll !important;
    background-color: rgb(18 18 18 / 0.95);
    border: 1px solid rgb(70 70 70 / 0.4);
    border-radius: 3px;
    box-shadow: 0 4px 12px rgb(0 0 0 / 0.25);
    z-index: 1000;
    display: none;
    opacity: 0;
    transform: translateY(-5px);
    transition: opacity 0.25s, transform 0.25s;
}
.droplist-select.active .droplist-content {
    display: block;
    opacity: 1;
    transform: translateY(0);
}
.drop-category-header {
    background: linear-gradient(to right, rgb(40 40 40 / 0.7), rgb(30 30 30 / 0.7));
    padding: 9px 14px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    color: rgb(160 160 160 / 0.9);
    border-bottom: 1px solid rgb(60 60 60 / 0.4);
    transition: all 0.2s;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.drop-category-header::after {
    content: "\f107";
    font-family: "FontAwesome";
    font-size: 10px;
    color: rgb(124 118 113 / 0.7);
    transform: rotate(-90deg);
    transition: transform 0.3s ease, color 0.2s;
}
.drop-category-header:hover {
    color: #fff;
    background: linear-gradient(to right, rgb(45 45 45 / 0.8), rgb(35 35 35 / 0.8));
}
.drop-category-header.active::after {
    transform: rotate(0deg);
    color: rgb(255 181 5 / 0.6);
}
.drop-item-list {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}
.drop-item-list .drop-item {
    opacity: 1 !important;
    visibility: visible !important;
}
.drop-item-list::-webkit-scrollbar {
    width: 5px;
}
.drop-item-list::-webkit-scrollbar-track {
    background: rgb(18 18 18 / 0.3);
}
.drop-item-list::-webkit-scrollbar-thumb {
    background-color: rgb(255 155 0 / 0.3);
    border-radius: 3px;
}
.drop-item-list::-webkit-scrollbar-thumb:hover {
    background-color: rgb(255 155 0 / 0.5);
}
.drop-category-header.active + .drop-item-list {
    max-height: 1000px;
    overflow-y: auto;
}
.drop-item {
    padding: 8px 15px 8px 20px;
    cursor: pointer;
    font-size: 11px;
    color: rgb(176 174 163 / 0.9);
    background-color: rgb(22 22 22 / 0.7);
    border-bottom: 1px solid rgb(40 40 40 / 0.3);
    transition: all 0.2s;
    position: relative;
}
.drop-item:hover {
    background-color: rgb(30 30 30 / 0.85);
    color: rgb(255 181 5 / 0.9);
    padding-left: 24px;
}
.drop-item:hover::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background-color: rgb(255 181 5 / 0.7);
}
.drop-result {
    width: 100%;
    background-color: rgb(22 22 22 / 0.6);
    border: 1px solid rgb(50 50 50 / 0.4);
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 0 3px 8px rgb(0 0 0 / 0.2);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s, transform 0.3s;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}
.drop-result.visible {
    opacity: 1;
    transform: translateY(0);
}
.drop-details-header {
    margin: 18px 15px 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgb(40 40 40 / 0.5);
    position: relative;
}
.drop-details-header::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 40px;
    height: 2px;
    background: rgb(255 181 5 / 0.7);
}
.drop-details-header h3 {
    margin: 0;
    padding: 0;
    color: #ffb505;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.3px;
    display: flex;
    align-items: baseline;
}
.drop-details-header h3 span {
    color: rgb(176 174 163 / 0.7);
    font-size: 11px;
    font-weight: 400;
    margin-left: 8px;
    background: rgb(40 40 40 / 0.3);
    padding: 2px 6px;
    border-radius: 2px;
}
.drop-quantity {
    margin-top: 10px;
    font-size: 10px;
    color: rgb(176 174 163 / 0.75);
    display: inline-flex;
    align-items: center;
    letter-spacing: 0.3px;
    position: relative;
    padding-left: 12px;
    transition: all 0.2s ease;
}
.drop-quantity::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 4px;
    background-color: rgb(255 181 5 / 0.6);
    border-radius: 50%;
}
.drop-item-detail {
    opacity: 0;
    transition: opacity 0.3s ease;
}
.drop-item-detail[style*="display: block"] {
    opacity: 1;
}
.drop-table-container {
    margin-top: 5px;
    padding: 0 15px 15px;
    background: #fff0;
}
.droplist-content::-webkit-scrollbar {
    width: 4px;
}
.droplist-content::-webkit-scrollbar-track {
    background: rgb(18 18 18 / 0.3);
}
.droplist-content::-webkit-scrollbar-thumb {
    background-color: rgb(70 70 70 / 0.7);
    border-radius: 2px;
}
.droplist-content::-webkit-scrollbar-thumb:hover {
    background-color: rgb(90 90 90 / 0.8);
}
.option-yes {
    color: rgb(23 205 40 / 0.9);
}
.option-no {
    color: rgb(205 23 23 / 0.9);
}
.drop-detail-notice {
    padding: 10px 15px;
    margin: 10px 0;
    background-color: rgb(40 40 40 / 0.5);
    color: rgb(200 200 200 / 0.8);
    border-left: 3px solid rgb(255 181 5 / 0.7);
    font-size: 11px;
    text-align: center;
    border-radius: 3px;
}
.search-minimal {
    display: flex;
    align-items: center;
    background-color: rgb(18 18 18 / 0.75);
    border: 1px solid rgb(70 70 70 / 0.4);
    border-radius: 3px;
    height: 35px;
    width: 100%;
    box-shadow: 0 2px 4px rgb(0 0 0 / 0.15);
    transition: all 0.25s ease;
}
.search-minimal:hover {
    background-color: rgb(25 25 25 / 0.85);
    border-color: rgb(80 80 80 / 0.6);
    box-shadow: 0 3px 6px rgb(0 0 0 / 0.2);
}
.search-minimal input {
    border: none;
    background: #fff0;
    height: 100%;
    padding: 0 10px;
    color: #b0aea3;
    font-size: 12px;
    width: calc(100% - 40px);
    outline: none;
    font-weight: 500;
}
.search-minimal input::placeholder {
    color: #666;
    font-size: 11px;
}
.search-separator {
    width: 1px;
    height: 16px;
    background-color: #333;
}
.search-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 100%;
    color: #888;
    font-size: 12px;
    cursor: pointer;
}
.search-icon:hover {
    color: #ffb505;
}
.search-and-results-container {
    position: relative;
    width: 100%;
    margin-bottom: 15px;
}
.search-results {
    width: 80%;
    margin: 0 auto 15px;
    background: rgb(19 19 20 / 50%);
    border: 1px solid #1f1f1f;
    border-radius: 3px;
}
.search-results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid #232323fc;
    background: rgb(19 19 20 / 49%);
}
.search-results-header h3 {
    color: #ffb505;
    font-size: 14px;
    margin: 0;
    font-weight: 500;
}
.search-results-close {
    color: #ffb505;
    cursor: pointer;
    transition: color 0.2s;
}
.search-results-close:hover {
    color: #ffc233;
}
#search-results-container {
    max-height: 350px;
    overflow-y: auto;
}
.search-result-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    background-color: rgb(18 18 18 / 0.7);
    border: 1px solid rgb(40 40 40 / 0.3);
    border-radius: 3px;
    margin: 5px 10px;
    transition: all 0.2s ease;
}
.search-result-item:hover {
    background-color: rgb(30 30 30 / 0.9);
    border-color: rgb(255 181 5 / 0.3);
}
.search-item-info {
    display: flex;
    flex-direction: column;
}
.search-item-name {
    font-weight: 500;
    color: #ffb505;
    font-size: 13px;
    margin-bottom: 2px;
}
.search-item-location {
    color: #b0aea3;
    font-size: 11px;
}
.search-item-view-btn {
    padding: 3px 8px;
    font-size: 11px;
    color: #ffb505;
    background-color: rgb(20 20 20 / 0.5);
    border: 1px solid rgb(255 181 5 / 0.2);
    border-radius: 3px;
    transition: all 0.2s ease;
}
.search-item-view-btn:hover {
    background-color: rgb(255 181 5 / 0.2);
}
.no-results {
    text-align: center;
    padding: 15px;
    color: #b0aea3;
    font-size: 12px;
    background-color: rgb(20 20 20 / 0.5);
    border-radius: 3px;
    margin: 5px 10px;
}
.bonus {
    color: #ffb505;
    font-size: 10px;
    vertical-align: super;
    margin-left: 2px;
}
#loading {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    backdrop-filter: blur(3px);
}
.loading-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.loading-knight {
    width: 70px;
    height: auto;
    image-rendering: pixelated;
    filter: drop-shadow(0 0 10px rgb(255 0 0 / 0.5));
}
.loading-text {
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.loading-label {
    color: #ffb505;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    text-shadow: 0 0 8px rgb(255 181 5 / 0.7);
}
.loading-dots {
    display: flex;
    margin-top: 5px;
}
.loading-dots span {
    color: #ffb505;
    font-size: 24px;
    line-height: 10px;
    animation: dotsAnimation 1.2s infinite;
    text-shadow: 0 0 10px rgb(255 181 5 / 0.8);
}
.loading-dots span:nth-child(2) {
    animation-delay: 0.4s;
}
.loading-dots span:nth-child(3) {
    animation-delay: 0.8s;
}
@keyframes dotsAnimation {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
#ajax-loading {
    display: none;
    position: absolute;
    background-color: rgb(0 0 0 / 0.6);
    padding: 8px;
    border-radius: 4px;
    z-index: 9990;
    text-align: center;
}
#ajax-loading img {
    width: 20px;
    height: 20px;
    vertical-align: middle;
}
.rules-container {
    font-family: "Lunasima", sans-serif;
    color: #b0aea3;
    line-height: 1.5;
    max-width: 100%;
    margin: 0;
    padding: 0;
}
.rules-header {
    margin-bottom: 20px;
    border-bottom: 1px solid #282828;
    padding-bottom: 15px;
    text-align: center;
}
.rules-intro {
    font-size: 12px;
    line-height: 1.5;
    margin-bottom: 15px;
    text-align: justify;
}
.rules-section {
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #282828;
}
.rules-section h2 {
    color: #ff9b00;
    font-size: 14px;
    margin-bottom: 10px;
    padding-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}
.rule-item {
    margin-bottom: 8px;
    padding-left: 10px;
    border-left: 2px solid #282828;
}
.rule-item p {
    margin: 0;
    padding: 3px 0;
    font-size: 12px;
    text-align: justify;
}
.item_yellow_2 {
    color: #ff9b00;
}
.rules-header h1 {
    color: #ff9b00;
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}
.page-title-glow {
    color: #ff9b00;
    text-shadow: 0 0 5px rgb(255 155 0 / 0.5);
}
.tab-cards {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 20px;
}
.tab-card {
    position: relative;
    width: 140px;
    height: 90px;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 2px 5px rgb(0 0 0 / 0.4);
    transition: all 0.2s ease;
}
.tab-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 12px rgb(0 0 0 / 0.5);
}
.tab-card.active {
    box-shadow: 0 0 0 2px rgb(255 155 0 / 0.5), 0 4px 10px rgb(0 0 0 / 0.4);
}
.card-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: all 0.3s ease;
}
.tab-card:hover .card-image {
    transform: scale(1.08);
}
.card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgb(10 10 10 / 0.3) 0%, rgb(10 10 10 / 0.6) 50%, rgb(0 0 0 / 0.85) 100%);
    z-index: 1;
    transition: all 0.3s ease;
}
.tab-card.active .card-overlay {
    background: linear-gradient(to bottom, rgb(30 20 10 / 0.4) 0%, rgb(40 25 10 / 0.7) 50%, rgb(50 30 10 / 0.9) 100%);
}
.tab-card:hover .card-overlay {
    background: linear-gradient(to bottom, rgb(20 20 20 / 0.4) 0%, rgb(20 20 20 / 0.7) 50%, rgb(10 10 10 / 0.9) 100%);
}
.card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 10px 8px;
    z-index: 2;
    text-align: center;
    transform: translateY(0);
    transition: all 0.3s ease;
}
.tab-card:hover .card-content {
    transform: translateY(-2px);
}
.card-content span {
    color: #c07204;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-shadow: 0 1px 2px rgb(0 0 0 / 0.8);
    transition: all 0.3s ease;
    display: block;
}
.tab-card.active .card-content span {
    color: #ffb54d;
}
.tab-card:hover .card-content span {
    color: #ffb54d;
}
.tab-content {
    display: none;
    animation-name: fadeIn;
    animation-duration: 0.3s;
    animation-fill-mode: both;
}
.tab-content.active {
    display: block;
}
@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(5px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
.tab-container {
    background: rgb(18 18 18 / 0.6);
    padding: 15px;
    box-shadow: 0 3px 10px rgb(0 0 0 / 0.3);
    border: 1px solid rgb(50 50 50 / 0.3);
    margin-top: 5px;
}
.tab-container .table-data {
    margin: 10px 0;
    width: 100%;
}
.tab-container .title-main {
    margin-bottom: 12px;
    margin-top: 20px !important;
}
.tab-container .title-main:first-child {
    margin-top: 0 !important;
}
.ms-container {
    width: 100%;
    max-width: 360px;
    margin: 10px;
    padding: 20px;
    background: linear-gradient(#111112, #111112), url(../img/bg-h-content.jpg) no-repeat center / cover;
    border-radius: 10px;
    box-shadow: 0 6px 18px rgb(0 0 0 / 0.4);
}
.ms-header {
    text-align: center;
    margin-bottom: 20px;
}
.ms-header h2 {
    font-size: 20px;
    font-weight: 700;
    color: #f39c12;
    text-transform: uppercase;
}
.ms-header p {
    font-size: 13px;
    color: #aaa;
    margin-top: 10px;
}
.delivery-time {
    background-color: #333;
    color: #dfded8;
    font-size: 12px;
    padding: 8px;
    margin-top: 15px;
    border-radius: 5px;
    text-align: center;
    width: 70%;
    margin-left: auto;
    margin-right: auto;
}
.ms-package {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ms-platform-button {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 10px 20px;
    background: #33333370;
    border-radius: 5px;
    color: #cfcfcb;
    font-size: 14px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.ms-platform-button img {
    height: 24px;
    width: 24px;
    margin-right: 15px;
}
.ms-platform-button:hover {
    background: #252525;
    transform: scale(1.05);
    box-shadow: 0 4px 10px rgb(0 0 0 / 0.2);
}
.ms-platform-button:active {
    background: rgb(100 100 100 / 0.9);
    transform: scale(0.98);
    box-shadow: 0 2px 5px rgb(0 0 0 / 0.15);
}
.ms-platform-image-container {
    width: 100%;
    margin-top: 15px;
    display: none;
    text-align: center;
}
.ms-platform-image {
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgb(0 0 0 / 0.3);
    background: #00000057;
    width: 180px;
}
.ms-platform-scope {
    margin-top: 8px;
    padding: 6px 12px;
    border-radius: 30px;
    display: inline-block;
    font-size: 11px;
    color: #fff;
}
.brazil {
    background: rgb(46 204 113 / 0.8);
}
.international {
    background: rgb(52 152 219 / 0.8);
}
.highlighted-item {
    position: relative;
    background: linear-gradient(135deg, rgb(60 30 100 / 0.7) 0%, rgb(90 40 150 / 0.7) 40%, rgb(150 100 255 / 0.9) 50%, rgb(90 40 150 / 0.7) 60%, rgb(60 30 100 / 0.7) 100%);
    background-size: 200% 100%;
    animation: highlight-shine 3s infinite linear;
    box-shadow: inset 0 0 15px rgb(150 100 255 / 0.3), 0 0 3px rgb(150 100 255 / 0.2);
    transition: all 0.3s ease;
    border-left: 2px solid rgb(150 100 255 / 0.5);
    border-right: 2px solid rgb(150 100 255 / 0.5);
}
@keyframes highlight-shine {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}
.highlighted-item:hover {
    background: linear-gradient(135deg, rgb(70 40 120 / 0.8) 0%, rgb(100 50 170 / 0.8) 100%);
    background-size: 100% 100%;
    box-shadow: inset 0 0 30px rgb(160 110 255 / 0.5), 0 0 8px rgb(160 110 255 / 0.4);
}
.highlighted-item td:last-child {
    color: #d4baff;
    font-weight: 700;
    text-shadow: 0 0 4px rgb(150 100 255 / 0.5);
    transition: all 0.3s ease;
}
.highlighted-item:hover td:last-child {
    color: #e5d4ff;
    text-shadow: 0 0 6px rgb(150 100 255 / 0.7);
}
.highlighted-item td:nth-child(2) a {
    color: #d4baff !important;
    font-weight: 700;
    transition: all 0.3s ease;
}
.highlighted-item:hover td:nth-child(2) a {
    color: #e5d4ff !important;
}
.nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #b0aea3;
    font-size: 14px;
    font-weight: 400;
    opacity: 0.7;
    transition: all 0.3s ease;
    z-index: 10;
}
.nav-arrow:hover {
    color: #ff9b00;
    opacity: 1;
    transform: translateY(-50%) scale(1.05);
}
.ranking-nav-prev,
.events-nav-prev {
    left: 25px;
}
.ranking-nav-next,
.events-nav-next {
    right: 25px;
}
.ranking-container {
    position: relative;
    overflow: hidden;
}
.ranking-slides {
    display: flex;
    transition: transform 0.3s ease;
}
.ranking-slide {
    min-width: 100%;
    flex-shrink: 0;
}
.events-container {
    position: relative;
    overflow: hidden;
}
.events-slides {
    display: flex;
    transition: transform 0.3s ease;
}
.events-slide {
    min-width: 100%;
    flex-shrink: 0;
}
#lattest_items {
    padding: 15px 15px 10px 15px;
    background: #fff0;
    border-radius: 0;
    border: none;
    box-shadow: none;
    margin-top: 0;
}
#lattest_items .market-list,
#lattest_items .market-items-container {
    margin: 0;
    padding: 0;
    max-width: 290px;
    width: 100%;
}
#lattest_items .market-header-text {
    display: block;
    font-size: 10px;
    color: rgb(176 174 163 / 0.7);
    text-align: center;
    font-weight: 400;
    letter-spacing: 0.3px;
    margin-bottom: 15px;
    opacity: 0.8;
}
#lattest_items .i_entry,
#lattest_items .market-items-container .i_entry {
    display: block;
    padding: 0;
    margin: 0 0 6px 0;
    background: #fff0;
    border: none;
    border-radius: 0;
    transition: none;
    cursor: default;
    min-height: auto;
    position: relative;
}
#lattest_items .i_entry:last-child,
#lattest_items .market-items-container .i_entry:last-child {
    margin-bottom: 8px;
}
#lattest_items .i_entry .i_name,
#lattest_items .market-items-container .i_entry .i_name {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    margin: 0;
    background: rgb(0 0 0 / 0.2);
    border: none;
    border-radius: 4px;
    transition: all 0.2s ease;
    cursor: pointer;
    min-height: 26px;
    text-decoration: none;
    color: #e0e0e0;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
}
#lattest_items .i_entry .i_name:hover,
#lattest_items .market-items-container .i_entry .i_name:hover {
    background: rgb(0 0 0 / 0.35);
    transform: translateX(2px);
    color: #fff;
}
#lattest_items .i_entry .i_name .item-name,
#lattest_items .market-items-container .i_entry .i_name .item-name {
    flex: 1;
    font-size: 11px;
    font-weight: 400;
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
    letter-spacing: 0.1px;
    margin-right: 10px;
    max-width: 170px;
    min-width: 0;
}
#lattest_items .i_entry .i_price,
#lattest_items .market-items-container .i_entry .i_price {
    font-size: 9px;
    font-weight: 600;
    color: #ffb505;
    white-space: nowrap;
    background: linear-gradient(135deg, rgb(255 181 5 / 0.12) 0%, rgb(255 181 5 / 0.08) 100%);
    padding: 3px 8px;
    border-radius: 9px;
    border: 1px solid rgb(255 181 5 / 0.25);
    min-width: 70px;
    max-width: 95px;
    text-align: center;
    text-shadow: 0 1px 2px rgb(0 0 0 / 0.3);
    transition: all 0.2s ease;
    flex-shrink: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
#lattest_items .i_entry .i_name:hover .i_price,
#lattest_items .market-items-container .i_entry .i_name:hover .i_price {
    background: linear-gradient(135deg, rgb(255 181 5 / 0.18) 0%, rgb(255 181 5 / 0.12) 100%);
    border-color: rgb(255 181 5 / 0.35);
    color: #ffcd33;
}
#lattest_items .view-more-container {
    margin: 8px 0 0 0;
    padding: 8px 0 5px;
    border-top: 1px solid rgb(255 255 255 / 0.08);
    text-align: center;
}
#lattest_items .view-more-link {
    color: #b0aea3;
    font-size: 11px;
    text-decoration: none;
    cursor: pointer;
    display: inline-block;
    padding: 4px 10px;
    border-radius: 3px;
    background: rgb(0 0 0 / 0.15);
    border: none;
    transition: all 0.2s ease;
}
#lattest_items .view-more-link:hover {
    background: rgb(0 0 0 / 0.25);
}
#lattest_items .i_entry.highlighted-item .i_name,
#lattest_items .market-items-container .i_entry.highlighted-item .i_name {
    position: relative;
    background: linear-gradient(135deg, rgb(60 30 100 / 0.85) 0%, rgb(90 40 150 / 0.85) 40%, rgb(150 100 255 / 0.95) 50%, rgb(90 40 150 / 0.85) 60%, rgb(60 30 100 / 0.85) 100%);
    background-size: 200% 100%;
    animation: sidebar-highlight-shine 3s infinite linear;
    box-shadow: inset 0 0 15px rgb(150 100 255 / 0.4), 0 0 6px rgb(150 100 255 / 0.3);
    border: 1px solid rgb(150 100 255 / 0.6);
    color: #fff;
}
#lattest_items .i_entry.highlighted-item .i_name .item-name {
    text-shadow: 2px 2px 4px rgb(0 0 0 / 0.8), 1px 1px 2px rgb(0 0 0 / 0.9), 0 0 3px rgb(0 0 0 / 0.7);
    font-weight: 600 !important;
    color: #ffffff !important;
}
#lattest_items .i_entry.highlighted-item .i_name .item-exc {
    text-shadow: 2px 2px 4px rgb(0 0 0 / 0.8), 1px 1px 2px rgb(0 0 0 / 0.9), 0 0 3px rgb(0 0 0 / 0.7);
    font-weight: 500 !important;
    color: #ffeb3b !important;
}
#lattest_items .i_entry.highlighted-item .i_name .item-level,
#lattest_items .i_entry.highlighted-item .i_name .item-ancient,
#lattest_items .i_entry.highlighted-item .i_name .item-socket {
    text-shadow: 2px 2px 4px rgb(0 0 0 / 0.8), 1px 1px 2px rgb(0 0 0 / 0.9), 0 0 3px rgb(0 0 0 / 0.7);
    font-weight: 500 !important;
    color: #e0e0e0 !important;
}
@keyframes sidebar-highlight-shine {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}
#lattest_items .i_entry.highlighted-item .i_name:hover,
#lattest_items .market-items-container .i_entry.highlighted-item .i_name:hover {
    background: linear-gradient(135deg, rgb(70 40 120 / 0.95) 0%, rgb(100 50 170 / 0.95) 100%);
    background-size: 100% 100%;
    box-shadow: inset 0 0 25px rgb(160 110 255 / 0.6), 0 0 10px rgb(160 110 255 / 0.5);
    transform: translateX(3px);
    color: #fff;
}
#lattest_items .i_entry.highlighted-item .i_name .item-name,
#lattest_items .market-items-container .i_entry.highlighted-item .i_name .item-name {
    color: #fff;
    font-weight: 600;
    text-shadow: 1px 1px 2px rgb(0 0 0 / 0.8), 0 0 3px rgb(0 0 0 / 0.6), 0 0 6px rgb(150 100 255 / 0.4);
}
#lattest_items .i_entry.highlighted-item .i_name:hover .item-name,
#lattest_items .market-items-container .i_entry.highlighted-item .i_name:hover .item-name {
    color: #fff;
    text-shadow: 1px 1px 3px rgb(0 0 0 / 0.9), 0 0 4px rgb(0 0 0 / 0.7), 0 0 8px rgb(150 100 255 / 0.5);
}
#lattest_items .i_entry.highlighted-item .i_price,
#lattest_items .market-items-container .i_entry.highlighted-item .i_price {
    color: #f0e7ff;
    background: linear-gradient(135deg, rgb(150 100 255 / 0.25) 0%, rgb(120 80 200 / 0.25) 100%);
    border: 1px solid rgb(150 100 255 / 0.5);
    text-shadow: 0 0 4px rgb(150 100 255 / 0.6);
    font-weight: 700;
}
#lattest_items .i_entry.highlighted-item .i_name:hover .i_price,
#lattest_items .market-items-container .i_entry.highlighted-item .i_name:hover .i_price {
    color: #fff;
    background: linear-gradient(135deg, rgb(160 110 255 / 0.35) 0%, rgb(130 90 210 / 0.35) 100%);
    border-color: rgb(160 110 255 / 0.7);
    text-shadow: 0 0 6px rgb(150 100 255 / 0.8);
}
#pagination ul,
.pagination-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
#pagination {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
}
#pagination li,
#pagination ul {
    align-items: center;
    display: flex;
    gap: 10px;
}
#pagination ul {
    justify-content: center;
}
#pagination a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: 0 0;
    color: #7c7671;
    font-size: 12px;
    text-decoration: none;
}
#pagination a:hover {
    color: #b7b6b6;
    box-shadow: 0 10px 10px 0 #fff0;
}
#pagination a.on {
    background: #1c1b1b;
    color: #fff;
    border-radius: 3px;
}
#pagination a#back,
#pagination a#forward,
#pagination a#next,
#pagination a#prev {
    position: relative;
    font-size: 0;
}
#pagination a#back,
#pagination a#forward {
    display: none !important;
}
#pagination a#back::before,
#pagination a#forward::before,
#pagination a#next::before,
#pagination a#prev::before {
    content: "";
    display: block;
    width: 6px;
    height: 10px;
    background-image: url(../img/arrow.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.35;
}
#pagination a#back::before,
#pagination a#prev::before {
    transform: scaleX(-1);
}
#pagination a#back:hover::before,
#pagination a#forward:hover::before,
#pagination a#next:hover::before,
#pagination a#prev:hover::before {
    opacity: 1;
}
#pagination a:not(#back):not(#prev):not(#next):not(#forward) {
    min-width: 24px;
}
.pagination-list {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.nav>li>a:focus, .nav>li>a:hover {
    background-color: transparent !important;
}

a:focus, a:hover {
    color: #facf96e3;
    text-decoration: none;
}

.table-striped>tbody>tr:nth-of-type(odd) {
    background-color: transparent;
}

.table-hover>tbody>tr:hover {
    background-color: #232323;
}

.admincp-button {
	position: absolute;
    top: 60px;
    right: 50vh;
    z-index: 999;
    width: 100px !important;
    height: 35px !important;
    padding: 14px !important;
    font-size: 12px !important;
    box-shadow: 0 4px 15px 0 #ff7f0040 !important;
    letter-spacing: 1px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url(../img/button.png);
    background-repeat: no-repeat;
    background-size: cover;
    color: #facf96e3;
    text-transform: uppercase;
    border-radius: 3px;
    text-shadow: 1px 1px 1px rgb(255 165 0 / 60%), -1px -1px 1px rgb(0 0 0 / 60%);
    background-color: transparent;
    border-color: transparent;
}

.admincp-button:hover, .admincp-button:focus, .admincp-button:active{
    z-index: 999;
    width: 100px !important;
    height: 35px !important;
    padding: 14px !important;
    font-size: 12px !important;
    box-shadow: 0 4px 15px 0 #ff7f0040 !important;
    letter-spacing: 1px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url(../img/button.png);
    background-repeat: no-repeat;
    background-size: cover;
    color: #facf96e3;
    text-transform: uppercase;
    border-radius: 3px;
    text-shadow: 1px 1px 1px rgb(255 165 0 / 60%), -1px -1px 1px rgb(0 0 0 / 60%);
    background-color: transparent;
    border-color: transparent;
}

.page-title {
	color: #ff9b00;
	font-family: 'PT Sans', sans-serif;
	font-size: 32px;
	margin-bottom: 10px;
	font-weight: bold;
}

/* NEWS MODULE */
.panel {
    display: flex;
    flex-direction: column;
    background: url(../img/bg-h-content.jpg) no-repeat;
    background-size: cover;
    background-position: center bottom;
    box-shadow: 0 10px 20px -5px #000;
}

.panel-news {
	margin-bottom: 30px;
	color: #333;
	border: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;
	-moz-box-shadow: 0 0 0px #e3e3e3;
	-webkit-box-shadow: 0 0 0px #e3e3e3;
	box-shadow: 0 0 0px #e3e3e3;
}
.panel-news .panel-heading {
    position: relative;
    background: url(../img/block-title.png) repeat-x center bottom;
    height: 40px;
    overflow: hidden;
    display: flex;
    align-items: center;
}
.panel-news .panel-title {
    position: relative;
    z-index: 2;
    font-size: 14px;
    font-weight: 500;
    font-family: 'Segoe UI', sans-serif;
    color: #907c68;
    text-transform: uppercase;
    text-shadow: 2px 2px 1px rgb(0 0 0 / .6);
}
.panel-news .panel-body {
	padding: 10px;
	color: #b0aea3;
}

.panel-body img {
    max-width: 100%;
}
.panel-news .panel-footer {
	border-top: 1px solid #907c68;
	background: #1d1d20;
	font-style: italic;
	font-size: 11px;
	height: 40px;
	color: #907c68;
}

/* RANKINGS MODULE */
.rankings-table {
	width: 100%;
	border-spacing: 0;
	border-collapse: collapse;
}

.rankings-class-image {
	width: 30px;
	height: auto;
	-moz-box-shadow: 0 0 5px #666;
	-webkit-box-shadow: 0 0 5px #666;
	box-shadow: 0 0 5px #666;
	-moz-border-radius: 0px;
	border-radius: 0px;
}
.rankings-table tr td {
	border-bottom: 1px solid #e3e3e3;
	padding: 10px;
	font-size: 18px;
	vertical-align: middle !important;
	text-align: center;
}
.rankings-table-place {
	color: #666;
	font-weight: bold;
	font-size: 24px;
	text-align: center;
}
.rankings-table tr:first-child td {
	color: #ff9b00;
	border-bottom: 3px solid #ff9b00;
}
.rankings-update-time {
	text-align: right;
	font-size: 11px;
	color: #ccc;
	padding: 10px 0px;
}
.rankings_menu {
	width: 100%;
	overflow: auto;
	text-align: center;
}
.rankings_menu span {
	width: 100%;
	display: inline-block;
	padding: 10px 0px;
	color: #ccc;
	font-size: 24px;
}

.rankings_menu a {
    width: 170px;
    height: 35px;
    padding: 16px;
    font-size: 13px;
    box-shadow: 0 5px 18px 0 #ff7f0059;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-image: url(../img/button.png);
    background-repeat: no-repeat;
    background-size: cover;
    color: #facf96e3;
    text-transform: uppercase;
    position: relative;
    border-radius: 3px;
    text-shadow: 1px 1px 1px rgb(255 165 0 / 60%), -1px -1px 1px rgb(0 0 0 / 60%);
    margin: 5px;
}

/*.rankings_menu a {
	display: inline-block;
	width: 150px;
	border: 1px solid #e3e3e3;
	text-align: center;
	padding: 2px 0px;
	margin: 2px;
	background: #f1f1f1;
	-moz-border-radius: 2px;
	border-radius: 2px;
	color: #ccc;
}*/
.rankings_menu a.active {
	color: #333;
	border-color: #333;
}
.rankings_guild_logo tr td {
	border: 0px !important;
	padding: 0px !important;
	margin: 0px !important;
}
.rankings-gens-img {
	width: auto !important;
	height: 30px !important;
	border: 0 !important;
	-moz-box-shadow: 0 0 0px #000 !important;
	-webkit-box-shadow: 0 0 0px #000 !important;
	box-shadow: 0 0 0px #000 !important;
	-moz-border-radius: 0px !important;
	border-radius: 0px !important;
}

/* MY ACCOUNT MODULE */
.myaccount-table {
	width: 100%;
}
.myaccount-table tr td:first-child {
	color: #666;
	font-weight: bold;
}
.myaccount-table tr td {
	border-bottom: 1px solid #e3e3e3;
	padding: 15px !important;
}
.myaccount-table tr:last-child td {
	border: 0px;
}

/* GENERAL TABLE UI */
.general-table-ui {
	width: 100%;
	table-layout: fixed;
	padding: 10px;
	margin: 10px 0px;
}
.general-table-ui tr td {
	padding: 5px;
	vertical-align: middle !important;
}
.general-table-ui tr:first-child td {
	color: #ff9b00;
}
.general-table-ui tr:nth-child(2n+2) td {
}
.general-table-ui tr td {
	text-align: center;
}
.general-table-ui img {
	width: 50px;
	height: auto;
	-moz-box-shadow: 0 0 5px #666;
	-webkit-box-shadow: 0 0 5px #666;
	box-shadow: 0 0 5px #666;
	-moz-border-radius: 0px;
	border-radius: 0px;
}

/* TERMS OF SERVICE PAGE */
.tos_list li {
	color: #aa0000;
	font-weight: bold;
	font-size: 18px;
	margin-bottom: 40px;
}
.tos_list li p {
	color: #444;
	text-align: justify;
	text-justify: inter-word;
	text-transform: none;
	padding-right: 35px;
	font-size: 14px;
	font-weight: normal;
}

/* ADD STATS MODULE */
.panel-addstats {
    background-color: transparent;
}

/* DOWNLOADS */
.panel-downloads {    
    margin-bottom: 30px;
    background: #232323;
    border: 1px solid #232323;
    -moz-border-radius: 0px;
    border-radius: 0px;
    color: #ffffff;
}
	.download-description {
		font-size: 11px;
		position: relative;
		top: -7px;
		color: #777;
	}


/* HEADER INFO */
.header-info-container {
	width: 1040px;
	margin: 0px auto;
	text-align: right;
}
	.header-info-container .header-info {
		display: inline-block;
		width: 350px;
		background: rgba(0, 0, 0, 0.3);
		backdrop-filter: blur(5px);
		margin: 0px;
		padding: 20px;
		overflow: auto;
		-moz-box-shadow: 0 0 15px rgba(0,0,0,0.7);
		-webkit-box-shadow: 0 0 15px rgba(0,0,0,0.7);
		box-shadow: 0 0 15px rgba(0,0,0,0.7);
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		-khtml-border-radius: 5px;
		text-shadow: 1px 1px 3px #000000;
		color: #ffffff;
		border: 1px solid rgba(255,255,255,0.1);
		font-size: 12px;
	}
		.header-info-container .header-info .header-info-block {
			padding: 0px;
			color: #aaaaaa;
		}
		.header-info-container .header-info .header-info-block #tServerTime, .header-info-container .header-info .header-info-block #tLocalTime {
			color: #ffffff;
		}
		.header-info-container .header-info .header-info-block #tServerDate, .header-info-container .header-info .header-info-block #tLocalDate {
			color: #cccccc;
		}
		.header-info-container .header-info .header-info-block .online-count {
			color: #00ff00;
		}
	

/* MY ACCOUNT CHARACTER LIST */
.myaccount-character-block {
	background: #333;
	border: 1px solid #666;
	padding: 5px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	display: inline-block;
	margin: 0px auto;
	-moz-box-shadow: 0 0 10px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5);
	box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
	.myaccount-character-block img {
		width: 100px;
		height: auto;
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
		border-radius: 3px;
		-moz-box-shadow: 0 0 5px #000;
		-webkit-box-shadow: 0 0 5px #000;
		box-shadow: 0 0 5px #000;
		-moz-transition: all 0.3s ease;
		-o-transition: all 0.3s ease;
		-webkit-transition: all 0.3s ease;
		transition: all 0.3s ease;
	}
		.myaccount-character-block img:hover {
			-webkit-filter: brightness(120%);
			filter: brightness(120%);
		}
.myaccount-character-block-location {
	font-size: 12px;
	color: #000;
	margin-bottom: 20px;
	margin-top: 2px;
	line-height: 1.2;
}
.myaccount-character-block-level {
	position: relative;
	top: -77px;
	display: inline-block;
	background: rgba(0,0,0,0.5);
	padding: 0px 5px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	color: #fff;
	font-size: 10px;
}
.myaccount-character-name a {
	font-weight: bold;
	color: #fff;
	font-size: 16px;
}

/* RANKINGS FILTER BY CLASS */

.rankings-class-filter {
	display: inline-block;
	list-style-type: none;
	margin: 20px auto;
	padding: 10px 20px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	-khtml-border-radius: 10px;
}

	.rankings-class-filter li {
		display: inline-block;
		-moz-transition: all 0.3s ease;
		-o-transition: all 0.3s ease;
		-webkit-transition: all 0.3s ease;
		transition: all 0.3s ease;
		margin-bottom: 10px;
	}
	
	.rankings-class-filter li:hover {
		-webkit-filter: grayscale(0%);
		filter: grayscale(0%);
	}

.rankings-class-filter-selection {
	display: inline-block;
	width: 75px;
	text-align: center;
	color: #fff;
	font-size: 11px;
	cursor: pointer;
}

	.rankings-class-filter-selection:hover {
		color: #fff !important;
	}

	.rankings-class-filter-selection:hover img {
		-webkit-filter: brightness(120%);
		filter: brightness(120%);
	}

.rankings-class-filter-selection img {
	width: 40px;
	height: auto;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	-khtml-border-radius: 50%;
	margin-bottom: 5px;
	-moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
	-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.45);
	-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.45);
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.45);
}

.rankings-class-filter-grayscale {
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
}


.rankings-class-image-crew { width:20px;}
.crew-status { width:10px;}

 .discordbtn {
                    display: inline-block;
	text-decoration: none;
                    outline: none;
                    cursor: pointer;
                    border-radius: 3px;
                    font-size: 20px;
                    font-weight: 900;
                    line-height: 50px;
                    padding: 2px 16px;
                    height: 50px;
                    min-width: 96px;
                    min-height: 38px;
                    border: none;
                    color: #fff;
                    background-color: rgb(88, 101, 242);
                    transition: background-color .17s ease,color .17s ease;
                    :hover {
                        background-color: rgb(71, 82, 196);
                    }
                }
 #miPopup {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: rgba(0, 0, 0,0.85);
            padding: 20px;
            border: 3px solid #2c2f33;
            box-shadow: 0 2px 20px rgba(255, 155, 0, 1);
            z-index: 1000;
            text-align: center; color:aliceblue;
        }
#miPopup label { margin: 15px; color: firebrick; text-shadow: 1px 1px 1px black;  min-width: 30px !important;}
#miPopup input { min-width: inherit !important;}
        #miPopup button {
            padding: 10px 20px;
            margin: 10px;
            cursor: pointer;
			
        }

        #noMostrarMas {
            margin-top: 15px; text-align: left;
        }
#miPopup h1{ color:aliceblue;  }